/* ============ CSS RESET & THEME ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0a14;--bg2:#15111f;--bg3:#1e1830;
  --accent:#ff7b8a;--accent2:#b48eff;--accent3:#5eead4;--accent4:#fbbf24;
  --text:#e8e4f0;--text2:#9a90b0;
  --glow-accent:0 0 10px #ff7b8a,0 0 30px #ff7b8a33;
  --glow-accent2:0 0 10px #b48eff,0 0 30px #b48eff33;
  --glow-accent3:0 0 10px #5eead4,0 0 30px #5eead433;
  --card-border:#ffffff08;--card-hover-border:#ffffff12;--card-shadow:rgba(0,0,0,0.4);
  --nav-bg:rgba(13,10,20,0.88);--input-border:#ffffff10;
  --canvas-bg:#0a0812;--chess-bg:#1a1510;--gomoku-bg:#1e1830;
  --line-opacity:0.3;--sakura-opacity:1;
  --radius:8px;--transition:0.3s ease;
  --font:'Segoe UI','Microsoft YaHei',sans-serif;
  --font-mono:'Cascadia Code','Fira Code',monospace;
}
/* LIGHT THEME */
[data-theme="light"]{
  --bg:#f5f2f0;--bg2:#ece8e4;--bg3:#e0dbd6;
  --accent:#e05565;--accent2:#8b5cf6;--accent3:#0d9488;--accent4:#d97706;
  --text:#1a1525;--text2:#6b6080;
  --glow-accent:0 0 10px #e0556544,0 0 20px #e0556522;
  --glow-accent2:0 0 10px #8b5cf644,0 0 20px #8b5cf622;
  --glow-accent3:0 0 10px #0d948844,0 0 20px #0d948822;
  --card-border:#d0cbc5;--card-hover-border:#b8b3ac;--card-shadow:rgba(0,0,0,0.08);
  --nav-bg:rgba(245,242,240,0.92);--input-border:#d0cbc5;
  --canvas-bg:#e8e4e0;--chess-bg:#d4c8b0;--gomoku-bg:#ddd8d2;
  --line-opacity:0.2;--sakura-opacity:0.3;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background 0.4s ease,color 0.3s ease}
a{color:var(--accent);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--accent2);text-shadow:var(--glow-accent2)}
button{font-family:var(--font);cursor:pointer;border:none;outline:none;transition:var(--transition)}
input{font-family:var(--font);outline:none;border:none}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}
::selection{background:var(--accent2);color:#fff}

/* ============ LAYOUT ============ */
#app{display:flex;flex-direction:column;min-height:100vh}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--card-border);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;transition:background 0.4s ease}
.nav-brand{font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px;cursor:pointer}
.nav-links{display:flex;gap:4px;align-items:center;margin-left:auto}
.nav-links a{padding:8px 14px;border-radius:var(--radius);color:var(--text2);font-size:0.85rem;position:relative;transition:var(--transition)}
.nav-links a:hover,.nav-links a.active{color:var(--accent);background:rgba(255,123,138,0.06)}
[data-theme="light"] .nav-links a:hover,[data-theme="light"] .nav-links a.active{background:rgba(224,85,101,0.08)}
.nav-links a.active::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--accent);border-radius:1px;box-shadow:var(--glow-accent)}
.nav-toggle{display:none;background:none;color:var(--text);font-size:1.5rem}
.theme-toggle{background:none;color:var(--text2);font-size:1.2rem;padding:6px 8px;border-radius:var(--radius);transition:var(--transition)}
.theme-toggle:hover{color:var(--accent);background:rgba(255,123,138,0.06)}
[data-theme="light"] .theme-toggle:hover{background:rgba(224,85,101,0.08)}
@media(max-width:768px){
  .nav-links{position:fixed;top:56px;left:0;right:0;background:var(--nav-bg);flex-direction:column;padding:16px;gap:4px;transform:translateY(-120%);transition:var(--transition);border-bottom:1px solid var(--card-border);margin-left:0}
  .nav-links.open{transform:translateY(0)}
  .nav-toggle{display:block}
}

/* PAGE CONTAINER */
.page{display:none;padding:72px 24px 40px;max-width:1200px;margin:0 auto;width:100%;animation:fadeIn 0.4s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ============ COMMON COMPONENTS ============ */
.card{background:var(--bg2);border:1px solid var(--card-border);border-radius:var(--radius);padding:24px;position:relative;overflow:hidden;transition:var(--transition)}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);opacity:var(--line-opacity)}
.card:hover{border-color:var(--card-hover-border);box-shadow:0 8px 32px var(--card-shadow);transform:translateY(-2px)}
.card-title{font-size:1.1rem;font-weight:600;margin-bottom:16px;color:var(--text);display:flex;align-items:center;gap:8px}
.card-title .icon{color:var(--accent);font-size:1.2rem}

.btn{padding:10px 24px;border-radius:var(--radius);font-size:0.9rem;font-weight:500;display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.btn-primary:hover{box-shadow:var(--glow-accent);transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.btn-outline:hover{background:rgba(255,123,138,0.08);box-shadow:var(--glow-accent)}
[data-theme="light"] .btn-outline:hover{background:rgba(224,85,101,0.08)}
.btn-danger{background:linear-gradient(135deg,var(--accent2),#8b5cf6);color:#fff}
.btn-danger:hover{box-shadow:var(--glow-accent2)}

.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.badge-cyan{background:rgba(94,234,212,0.12);color:var(--accent3)}
.badge-magenta{background:rgba(180,142,255,0.12);color:var(--accent2)}
.badge-green{background:rgba(255,123,138,0.12);color:var(--accent)}
[data-theme="light"] .badge-cyan{background:rgba(13,148,136,0.1)}
[data-theme="light"] .badge-magenta{background:rgba(139,92,246,0.1)}
[data-theme="light"] .badge-green{background:rgba(224,85,101,0.1)}

.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

.section-title{font-size:1.8rem;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.section-desc{color:var(--text2);margin-bottom:32px;font-size:0.95rem}

/* NEON LINE */
.neon-line{height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);margin:32px 0;opacity:var(--line-opacity)}

/* ============ HOME PAGE ============ */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 120px);text-align:center;position:relative}
.hero-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.2;margin-bottom:16px}
.hero-title .gradient{background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent4));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:gradientShift 4s ease infinite}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-sub{font-size:1.1rem;color:var(--text2);margin-bottom:40px;max-width:500px}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-stats{display:flex;gap:40px;margin-top:60px}
.hero-stat{text-align:center}
.hero-stat .num{font-size:1.6rem;font-weight:700;color:var(--accent);font-family:var(--font-mono)}
.hero-stat .label{font-size:0.75rem;color:var(--text2);margin-top:4px;text-transform:uppercase;letter-spacing:1px}

/* SAKURA WEBGL CANVAS */
#sakura{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:var(--sakura-opacity);transition:opacity 0.6s ease}

/* ============ SEARCH PAGE ============ */
.search-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 120px)}
.search-time{font-size:3rem;font-weight:200;color:var(--text);font-family:var(--font-mono);margin-bottom:8px}
.search-greeting{color:var(--text2);margin-bottom:32px;font-size:1rem}
.search-box{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--input-border);border-radius:50px;padding:4px 6px 4px 24px;width:min(600px,90vw);transition:var(--transition)}
.search-box:focus-within{border-color:var(--accent);box-shadow:var(--glow-accent)}
.search-box input{flex:1;background:none;color:var(--text);font-size:1rem;padding:12px 0}
.search-box input::placeholder{color:var(--text2)}
.search-engine-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:50px;padding:10px 20px;font-weight:600;font-size:0.85rem;white-space:nowrap}
.search-engine-btn:hover{box-shadow:var(--glow-accent)}
.search-engines{display:flex;gap:8px;margin-top:16px}
.search-engines button{background:var(--bg3);color:var(--text2);padding:6px 14px;border-radius:20px;font-size:0.8rem}
.search-engines button.active{background:rgba(255,123,138,0.12);color:var(--accent)}
[data-theme="light"] .search-engines button.active{background:rgba(224,85,101,0.1)}
.search-shortcuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px;margin-top:40px;width:min(600px,90vw)}
.shortcut{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:var(--radius);background:var(--bg2);border:1px solid var(--card-border);cursor:pointer;transition:var(--transition)}
.shortcut:hover{border-color:var(--accent);transform:translateY(-2px)}
.shortcut .s-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:var(--bg3)}
.shortcut .s-name{font-size:0.7rem;color:var(--text2)}

/* ============ PORTAL PAGE (sub-site) ============ */
.portal-welcome{padding:40px 0;text-align:center}
.hitokoto-box{background:var(--bg2);border-left:3px solid var(--accent2);padding:20px 24px;border-radius:0 var(--radius) var(--radius) 0;margin:24px auto;max-width:600px;font-style:italic;color:var(--text2);position:relative}
.hitokoto-box .from{display:block;text-align:right;margin-top:8px;font-size:0.8rem;color:var(--accent2);font-style:normal}

/* ============ GAMES ============ */
.game-canvas-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.game-canvas-wrap canvas{border-radius:var(--radius);border:1px solid var(--card-border)}
.game-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.game-info{color:var(--text2);font-size:0.85rem;text-align:center}

/* Gomoku */
#gomoku-board{cursor:pointer;background:var(--gomoku-bg)}

/* Fruit Ninja */
#fruit-canvas{cursor:crosshair;background:var(--canvas-bg)}

/* Chinese Chess */
#xiangqi-board{cursor:pointer;background:var(--chess-bg)}

/* ============ EFFECTS ============ */
.effect-canvas-wrap{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.effect-canvas-wrap canvas{border-radius:var(--radius);width:100%;max-width:900px}
.effect-controls{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;justify-content:center}

/* 3D viewer */
.viewer-3d{position:relative}
.viewer-3d canvas{border-radius:var(--radius)}
.config-panel{position:absolute;top:12px;right:12px;background:var(--nav-bg);padding:12px;border-radius:var(--radius);border:1px solid var(--input-border);max-width:300px;font-size:0.8rem}
.config-panel textarea{width:100%;background:var(--bg);color:var(--accent);border:1px solid var(--input-border);border-radius:4px;padding:8px;font-family:var(--font-mono);font-size:0.75rem;resize:vertical}

/* Fluid */
#fluid-canvas{cursor:crosshair}

/* ============ FOOTER ============ */
footer{text-align:center;padding:24px;color:var(--text2);font-size:0.8rem;border-top:1px solid var(--card-border);margin-top:auto}
footer a{color:var(--accent)}

/* ============ LOADING ============ */
.loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--text2)}
.loading::after{content:'';width:24px;height:24px;border:2px solid var(--accent);border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite;margin-left:12px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ RESPONSIVE ============ */
@media(max-width:600px){
  .hero-stats{gap:20px;flex-wrap:wrap}
  .hero-stat .num{font-size:1.2rem}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .search-time{font-size:2rem}
}