/* ...existing styles... */
:root { --ink:#111; --muted:#6b7280; --line:#e5e7eb; --title-color:#3b82f6; }
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0; font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink); background:transparent;
}
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px);z-index:0;pointer-events:none;}
.site-header,.grid{position:relative;z-index:1;}
.site-header { padding:48px 20px 24px; text-align:center; }
.site-header h1 { margin:0 0 6px; font-weight:800; letter-spacing:-0.02em; }
.sub { margin:0; color:var(--muted); }

.grid {
  display:grid; gap:16px; padding:20px; max-width:1100px; margin:0 auto 80px;
  grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) );
}
.card {
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius:24px; padding:18px 16px; text-decoration:none; color:inherit;
  flex-direction: column; gap: 10px; aspect-ratio: 4 / 3;
  background: rgba(255,255,255,0.86); backdrop-filter: saturate(110%) blur(2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.04);
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
  position: relative;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 40%);
}
.card:hover { background:#ffffff; border-color:#b9d4ff; box-shadow:0 10px 22px rgba(59,130,246,0.18); transform: translateY(-1px); }
.label { font-weight:700; font-size:18px; position: relative; z-index: 1; }
.chip {
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line); padding:6px 10px; border-radius:999px; color:var(--muted);
  background:#fff;
  position: relative; z-index: 1;
}

.audio-toggle {
  position:fixed; right:16px; bottom:16px; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:999px; padding:10px 14px; display:flex; gap:8px; align-items:center; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.05); transition: background .12s ease, border-color .12s ease;
}
.audio-toggle:hover { background:#fafafa; border-color:#dfe3e8; }
.audio-toggle .icon { font-weight:700; width:14px; display:inline-block; text-align:center; }

.moving-title{position:relative;display:inline-block;color:var(--title-color);animation:floatXY 12s ease-in-out infinite alternate;}
.moving-title::after{content:attr(data-text);position:absolute;left:0;top:0;color:var(--title-color);opacity:.28;filter:blur(.6px);animation:floatXY 12s ease-in-out infinite alternate;animation-delay:.6s;pointer-events:none;}
@keyframes floatXY{0%{transform:translate(0,0)}25%{transform:translate(6px,-4px)}50%{transform:translate(-8px,5px)}75%{transform:translate(10px,3px)}100%{transform:translate(-4px,-6px)}}

.wii-status{
  position:fixed; top:10px; right:14px; z-index:2; font-weight:700; color:#111;
  background:rgba(255,255,255,.85); border:1px solid #e5e7eb; border-radius:999px; padding:6px 10px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}

.wii-boot{position:fixed;inset:0;background:#fff;display:grid;place-items:center;z-index:3;animation:bootOut 1.8s 1.2s forwards}
.wii-boot .logo{font:800 64px/1 "Noto Sans",system-ui;color:#6aa9ff;letter-spacing:.02em;opacity:.98;transform:scale(1);animation:bootIn 1.2s ease both}
@keyframes bootIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes bootOut{to{opacity:0;visibility:hidden}}
.channel-overlay{position:fixed;inset:0;z-index:2;background:rgba(255,255,255,.75);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s ease}
.channel-overlay.show{opacity:1;pointer-events:auto}
.channel-center{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:min(80vw,720px);aspect-ratio:16/9;border-radius:24px;background:#fff;border:1px solid #dbe3f0;box-shadow:0 20px 60px rgba(0,0,0,.15);display:grid;place-items:center;overflow:hidden}
.channel-center .preview{width:100%;height:100%;background:linear-gradient(180deg,#eaf3ff,#ffffff 60%)}
.channel-center .title{position:absolute;bottom:12px;left:16px;font-weight:800}
.bottom-bar{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:16px}
.btn{border:1px solid #cfd8e3;background:#fff;border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer}
.btn.start{border-color:#8ab6ff;background:#f7fbff}
.btn.menu:hover,.btn.start:hover{background:#f0f6ff}
.thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.disc{width:140px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff, #ddd 35%, #bbb 60%, #eee 80%);box-shadow:0 8px 24px rgba(0,0,0,.18) inset,0 4px 16px rgba(0,0,0,.08);animation:spin 1.2s linear infinite;margin:auto;position:relative}
.disc::after{content:"";position:absolute;inset:50% auto auto 50%;width:22px;aspect-ratio:1;border-radius:50%;background:#f7f7f7;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #e5e5e5 inset}
@keyframes spin{to{transform:rotate(360deg)}}