*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg-page:#F8F7F3;
  --bg-field-hi:#FFFFFF;
  --bg-field:#F6F4EE;
  --bg-field-lo:#ECE9E0;
  --surface-1:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#F1EFE8;
  --line-soft:rgba(120,125,140,.14);
  --line:#DDDEE3;
  --line-strong:#BCBFC9;

  --ink-1:#1C1B18;
  --ink-2:#5A5D68;
  --ink-3:#8E919C;
  --ink-4:#C3C5CD;

  --gold:#C9A227; --gold-bright:#A8821B; --gold-dim:#D8C374; --gold-ink:#8F6E14;
  --gold-glow:rgba(201,162,39,.25);
  --red:#C8313E; --red-bright:#B02532; --red-dim:#E8AEB3;
  --red-glow:rgba(200,49,62,.25);
  --cyan:#1F7F9E; --cyan-bright:#166B86; --cyan-dim:#BFE0EA;
  --cyan-glow:rgba(31,127,158,.22);
  --ice:#5E8FC4; --ice-bright:#41679A; --ice-glow:rgba(94,143,196,.25);
  --violet:#7C4FC4; --violet-bright:#6A3FB0; --violet-dim:#D9CCF0;
  --violet-glow:rgba(124,79,196,.25);
  --green:#1E8B5A; --green-bright:#177A4E; --green-dim:#BFE5D2;
  --green-glow:rgba(30,139,90,.22);
  --amber:#C07A1A; --amber-glow:rgba(192,122,26,.25);

  --nav-bg:rgba(255,255,255,.78);
  --hud-bg:rgba(255,255,255,.82);
  --dot:rgba(28,27,24,.055);
  --vig:rgba(28,27,24,.07);
  --aurora-a:rgba(201,162,39,.08);
  --aurora-b:rgba(201,162,39,.16);
  --go-overlay:rgba(248,247,243,.92);
  --halo:rgba(255,255,255,.9);
  --flash-blend:multiply;
  --shadow-card:0 6px 18px rgba(28,27,24,.08);
  --shadow-card-active:0 10px 28px rgba(28,27,24,.12);
  --shadow-hud:0 8px 28px rgba(28,27,24,.08);
  --shadow-elev:0 18px 48px rgba(28,27,24,.10);
  --shadow-chip:0 3px 10px rgba(28,27,24,.06);
  --on-accent:#FFFFFF;
  --medal-ink:#1C1B18;
  --medal-2:#A7ABB8;
  --medal-3:#B5784C;
  --boss-bg:#1D1C19;

  --btn-ink:#1A1407;
  --r:10px;
  --font:'Space Grotesk',system-ui,sans-serif;
  --display:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono','SF Mono',monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --pop:cubic-bezier(.22,1,.36,1);
}

html[data-theme="dark"]{
  --bg-page:#080B12;
  --bg-field-hi:#141B2E;
  --bg-field:#0D1220;
  --bg-field-lo:#080B12;
  --surface-1:#131927;
  --surface-2:#19202F;
  --surface-3:#202940;
  --line-soft:rgba(155,170,207,.10);
  --line:#2B3550;
  --line-strong:#3D4A6B;

  --ink-1:#F3EFE4;
  --ink-2:#A9B2C7;
  --ink-3:#67718A;
  --ink-4:#414B63;

  --gold:#E8B44C; --gold-bright:#FFD583; --gold-dim:#8A6B2A; --gold-ink:#FFD583;
  --gold-glow:rgba(232,180,76,.28);
  --red:#FF5A66; --red-bright:#FF8C94; --red-dim:#8C2F38;
  --red-glow:rgba(255,90,102,.30);
  --cyan:#53C8E8; --cyan-bright:#9BE6FF; --cyan-dim:#2A6E83;
  --cyan-glow:rgba(83,200,232,.28);
  --ice:#8FB8E8; --ice-bright:#B8D4F2; --ice-glow:rgba(143,184,232,.28);
  --violet:#B98CFF; --violet-bright:#D9BFFF; --violet-dim:#5F4691;
  --violet-glow:rgba(185,140,255,.30);
  --green:#5FE3A1; --green-bright:#9CF2C8; --green-dim:#2E7A57;
  --green-glow:rgba(95,227,161,.25);
  --amber:#F2A33C; --amber-glow:rgba(242,163,60,.25);

  --nav-bg:rgba(13,18,32,.72);
  --hud-bg:rgba(19,25,39,.78);
  --dot:rgba(169,178,199,.07);
  --vig:rgba(4,6,10,.55);
  --aurora-a:rgba(232,180,76,.07);
  --aurora-b:rgba(232,180,76,.13);
  --go-overlay:rgba(8,11,18,.88);
  --halo:rgba(8,11,18,.8);
  --flash-blend:screen;
  --shadow-card:0 8px 24px rgba(0,0,0,.35);
  --shadow-card-active:0 12px 32px rgba(0,0,0,.45);
  --shadow-hud:0 8px 28px rgba(0,0,0,.3);
  --shadow-elev:0 24px 64px rgba(0,0,0,.45);
  --shadow-chip:0 3px 10px rgba(0,0,0,.25);
  --on-accent:#0D1220;
  --medal-ink:#0D1220;
  --medal-2:#C7CCDA;
  --medal-3:#D08A55;
  --boss-bg:#0A0E18;
}

html,body{height:100%;font-family:var(--font);background:var(--bg-page);color:var(--ink-2);overflow:hidden;-webkit-font-smoothing:antialiased}

.diamond{display:inline-block;width:.32em;height:.32em;background:var(--gold);transform:rotate(45deg);margin:0 .14em;vertical-align:.08em}
.diamond-lg{width:.22em;height:.22em;box-shadow:0 0 18px var(--gold-glow)}
.diamond-ghost{opacity:.4}

kbd{font-family:var(--mono)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.seo-about{color:var(--ink-3);margin-right:auto}
noscript h1,noscript p{padding:1rem;color:var(--ink-1)}

/* ═══ Mobile ═══ */
#mobile-overlay{display:none!important}

/* ═══ Custom touch keyboard ═══ */
#touch-keyboard{display:none}
@media (hover:none) and (pointer:coarse){
  #touch-keyboard{display:flex;flex-direction:column;gap:6px;padding:8px 5px calc(8px + env(safe-area-inset-bottom));background:var(--surface-1);border-top:1px solid var(--line);flex-shrink:0;z-index:55;user-select:none;-webkit-user-select:none;touch-action:manipulation}
  body:not(.playing) #touch-keyboard{display:none}
  .kb-row{display:flex;gap:5px;justify-content:center}
  .kb-key{flex:1 1 0;max-width:46px;height:48px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:1.05rem;font-weight:700;text-transform:uppercase;background:var(--surface-3);color:var(--ink-1);border:1px solid var(--line);border-radius:7px;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 0 var(--line-strong)}
  .kb-key.kb-press{background:var(--gold);color:var(--btn-ink);border-color:var(--gold);transform:translateY(1px)}
  .kb-switch{flex:0 0 auto;min-width:42px;max-width:none;color:var(--gold-bright);font-size:1rem}
  #game-hud{top:8px;padding:7px 4px;max-width:98vw;border-radius:11px}
  .hud-group{padding:0 8px}
  .hud-group+.hud-group::before{top:4px;bottom:4px}
  .hud-lbl{font-size:.5rem;letter-spacing:.12em}
  .hud-val{font-size:1.05rem}
  .hud-wpm-group,.hud-switch{display:none}
  body.playing #app-footer{display:none}
  .hud-hp-group{min-width:118px}
  .hp-cells span{width:8px;height:7px}
  .hp-num{min-width:22px}
  .word-card{font-size:1.3rem;padding:10px 16px 12px}
  .word-card.boss-word{font-size:1.5rem;padding:12px 18px 14px}
  .title{font-size:clamp(3rem,16vw,5rem);margin:.5rem 0 1.4rem}
  /* Idle action buttons: uniform width, big tap targets, tidy stack */
  .btn-begin,.btn-daily,.btn-vault{width:min(82vw,330px);justify-content:center;padding:0 1rem;min-height:54px;margin-top:.55rem;font-size:.8rem}
  .btn-begin{margin-top:0}
  .daily-hint{margin-top:.7rem}
  .legend{flex-wrap:wrap;justify-content:center;gap:.7rem .9rem;max-width:94vw;margin-top:1.6rem}
  .idle-tagline{margin-top:1.3rem}
  .idle-links{margin-top:.8rem;gap:1rem}
  .text-link{padding:6px 4px;font-size:.72rem}
  .card{margin:1.25rem auto;padding:1.4rem 1.1rem}
  .card-wide{max-width:94vw}
  .card h2{font-size:1.45rem}

  /* Navbar: icon-only nav links, compact, never clip */
  #navbar{height:auto;min-height:52px;padding:6px .7rem;flex-wrap:wrap;gap:.15rem}
  .nav-right{gap:.1rem;flex-wrap:wrap;justify-content:flex-end}
  .logo{font-size:1.05rem;letter-spacing:.5px}
  .nav-txt{display:none}
  .nav-link{padding:7px 8px;font-size:.74rem}
  .nav-link svg{opacity:.8}
  .nav-user{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-cta{padding:6px 12px;font-size:.72rem}

  /* Tables: drop low-priority columns so they fit the screen */
  #leaderboard-table,#history-table,#runs-table{font-size:.82rem;width:100%}
  #leaderboard-table th,#leaderboard-table td,#history-table th,.hist-row td,#runs-table th,#runs-table td{padding:.5rem .4rem}
  /* Leaderboard: keep # · Player · Score · Depth · Combo (hide WPM/Time/Runs) */
  #leaderboard-table th:nth-child(n+6),#leaderboard-table td:nth-child(n+6){display:none}
  /* History: keep When · Player · Score · ▾ (hide Mode/Depth/Combo/WPM; tap row for full detail) */
  #history-table th:nth-child(3),.hist-row td:nth-child(3),
  #history-table th:nth-child(5),.hist-row td:nth-child(5),
  #history-table th:nth-child(6),.hist-row td:nth-child(6),
  #history-table th:nth-child(7),.hist-row td:nth-child(7){display:none}
  /* Stats recent runs: keep Date · Score · Depth (hide Mode/Combo/WPM) */
  #runs-table th:nth-child(2),#runs-table td:nth-child(2),
  #runs-table th:nth-child(5),#runs-table td:nth-child(5),
  #runs-table th:nth-child(6),#runs-table td:nth-child(6){display:none}
  .detail-grid{grid-template-columns:repeat(3,1fr)}
  .dm-id{font-size:.66rem}
  #achievements,#profile-achievements{grid-template-columns:1fr}
  .recovery-code{font-size:1rem}
  .go-grid{grid-template-columns:repeat(2,1fr)}

  /* ── Bigger, tidier tap targets across the interface ── */
  #navbar{min-height:54px;padding:7px .6rem;gap:.2rem .35rem}
  .nav-right{gap:.15rem .3rem;align-items:center}
  .nav-link{padding:9px 9px;font-size:.78rem}
  .nav-cta{padding:8px 14px;font-size:.74rem}
  .coin-chip{padding:5px 11px;font-size:.8rem}
  #btn-mute,#btn-theme{width:34px;height:34px;margin-left:.15rem}

  /* Leaderboard tabs: one swipeable row instead of cramped/wrapping */
  .lb-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.15rem;padding-bottom:.6rem}
  .lb-tabs::-webkit-scrollbar{display:none}
  .lb-tab{flex:0 0 auto;font-size:.68rem;padding:9px 13px}

  /* Forms & primary buttons: comfortable touch sizing; 16px stops iOS zoom */
  .btn,.btn-gold,.btn-outline,.btn-red{min-height:50px}
  .form input,#delete-confirm input,#lookup-input,#bio-input,#invite-link{min-height:48px;font-size:16px}
  .btn-mini{min-height:42px;padding:.6rem 1rem;font-size:.7rem}
  .link-danger{padding:.5rem 0;display:inline-block}

  /* Game-over actions: full-width stacked buttons */
  .go-cta{flex-direction:column;gap:.7rem;width:100%;margin-top:1rem}
  .go-cta .btn-gold{width:100%}
  .go-cta .go-link{padding:.6rem;text-align:center}

  /* Lookup & invite rows */
  .lookup-row,.invite-row{gap:.5rem}

  /* Shop: two columns, tappable buttons */
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:.55rem}
  .shop-btn{min-height:42px;font-size:.64rem}

  /* Modals: roomier, full-width actions */
  .modal-overlay{padding:1.1rem}
  .modal-card{padding:1.6rem 1.2rem}
  .modal-card .btn,.modal-card .btn-outline{min-height:50px}
  .modal-check{font-size:.82rem}
}

/* ═══ Shell ═══ */
#app{display:flex;flex-direction:column;height:100dvh}
main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.view{display:none;flex:1;overflow-y:auto}
.view.active{display:flex;flex-direction:column}
#view-game{position:relative;overflow:hidden}

/* ═══ Navbar ═══ */
#navbar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 1.75rem;background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);z-index:100;flex-shrink:0}
.nav-left{display:flex;align-items:center;gap:1.1rem}
.logo{font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--ink-1);text-decoration:none;letter-spacing:1px}
.nav-contact{position:relative;padding-left:1.1rem}
.nav-contact::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);height:1.1em;width:1px;background:var(--line-soft)}
.nav-right{display:flex;align-items:center;gap:.4rem}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:500;color:var(--ink-3);text-decoration:none;padding:6px 10px;transition:color .16s var(--ease)}
.nav-link::after{content:'';position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .16s var(--ease)}
.nav-link:hover{color:var(--ink-1)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link svg{flex-shrink:0;opacity:.6}
.nav-user{font-weight:700;color:var(--ink-2)}
.nav-muted{color:var(--ink-4)}
.nav-muted:hover{color:var(--ink-3)}
.nav-auth{display:inline-flex;align-items:center;gap:.4rem}
.nav-cta{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--btn-ink);background:linear-gradient(180deg,#FFD583,#E8B44C);text-decoration:none;padding:7px 16px;border-radius:99px;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--gold-glow)}
#btn-mute,#btn-theme{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--ink-3);cursor:pointer;border-radius:6px;margin-left:.4rem;transition:color .16s var(--ease)}
#btn-mute:hover,#btn-theme:hover{color:var(--gold)}
#btn-mute .spk-slash{display:none}
#btn-mute.muted .spk-slash{display:block}
#btn-mute.muted .spk-wave{display:none}
#btn-theme .icon-sun{display:none}
html[data-theme="dark"] #btn-theme .icon-sun{display:block}
html[data-theme="dark"] #btn-theme .icon-moon{display:none}
#btn-mute.punch,#btn-theme.punch{animation:mutePunch .15s var(--ease)}
@keyframes mutePunch{50%{transform:scale(1.25)}}

/* ═══ Footer ═══ */
#app-footer{display:flex;align-items:center;gap:1.5rem;height:40px;padding:0 1.75rem;border-top:1px solid var(--line-soft);background:var(--surface-1);font-family:var(--mono);font-size:.62rem;color:var(--ink-3);flex-shrink:0;z-index:100}
#app-footer a{color:var(--ink-3);text-decoration:none;transition:color .16s var(--ease)}
#app-footer a:hover{color:var(--ink-2)}
.footer-right{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem}

/* ═══ Play field ═══ */
#play-field{flex:1;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-field-hi) 0%,var(--bg-field) 55%,var(--bg-field-lo) 100%);transition:filter .6s var(--ease)}
#play-field::before{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1px,transparent 1.5px);background-size:28px 28px;pointer-events:none}
body.danger #play-field{filter:saturate(.85)}
body.fever #play-field{filter:saturate(1.15)}
#play-field.hitstop{filter:saturate(.25) contrast(1.1);transition:filter 0s}
#play-field.death{filter:grayscale(.8);transition:filter .7s var(--ease)}
#aurora{position:absolute;inset:0;background:radial-gradient(ellipse 70% 45% at 50% -10%,var(--aurora-a),transparent 60%);opacity:1;pointer-events:none;transition:opacity .6s var(--ease)}
#aurora.warm{background:radial-gradient(ellipse 70% 45% at 50% -10%,var(--aurora-b),transparent 60%)}
#field-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 140px 50px var(--vig)}
#danger-vignette{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
body.danger #danger-vignette{opacity:1;animation:dangerPulse 1.2s ease-in-out infinite}
@keyframes dangerPulse{0%,100%{box-shadow:inset 0 0 120px 40px color-mix(in srgb,var(--red) 15%,transparent)}50%{box-shadow:inset 0 0 120px 40px color-mix(in srgb,var(--red) 28%,transparent)}}
#fever-vignette{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s}
body.fever #fever-vignette{opacity:1;animation:feverBreathe 3s ease-in-out infinite}
body.fever.danger #fever-vignette{opacity:.5}
@keyframes feverBreathe{0%,100%{box-shadow:inset 0 0 100px 30px color-mix(in srgb,var(--gold) 12%,transparent)}50%{box-shadow:inset 0 0 100px 30px color-mix(in srgb,var(--gold) 18%,transparent)}}
#flash-overlay{position:absolute;inset:0;pointer-events:none;z-index:60;mix-blend-mode:var(--flash-blend);opacity:0}
#flash-overlay.fc-red{background:var(--red)}
#flash-overlay.fc-gold{background:var(--gold)}
#flash-overlay.fc-cyan{background:var(--cyan)}
#flash-overlay.fc-green{background:var(--green)}
#flash-overlay.flash{animation:flashFade var(--flash-dur,.28s) ease-out forwards}
@keyframes flashFade{0%{opacity:var(--flash-peak,.2)}100%{opacity:0}}

.ghost-word{position:absolute;font-family:var(--mono);font-size:3rem;font-weight:600;color:var(--ink-2);opacity:.06;pointer-events:none;user-select:none;animation:ghostDrift 40s linear infinite}
.gw-1{left:12%;animation-delay:0s}
.gw-2{left:64%;animation-delay:-14s}
.gw-3{left:38%;animation-delay:-27s}
@keyframes ghostDrift{0%{top:105%}100%{top:-12%}}

/* ═══ Idle ═══ */
#idle-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.65rem;font-weight:600;letter-spacing:.45em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow-line{display:inline-block;width:24px;height:1px;background:var(--line-strong)}
.title{font-family:var(--display);font-weight:400;font-size:clamp(4.5rem,9vw,8rem);color:var(--ink-1);letter-spacing:.04em;line-height:1.05;margin:.5rem 0 2.4rem;position:relative;animation:titleIn .9s var(--pop) both}
.title::before{content:'';position:absolute;inset:-20%;background:radial-gradient(ellipse 50% 35% at 50% 45%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 70%);pointer-events:none;z-index:-1}
@keyframes titleIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}
.btn-begin{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:.85rem 2.6rem;background:transparent;color:var(--gold-bright);border:1px solid var(--gold);border-radius:99px;cursor:pointer;transition:background .16s var(--ease);animation:breatheGlow 2.4s ease-in-out infinite}
.btn-begin kbd{font-size:.7rem;color:var(--gold-bright);border:1px solid var(--gold-dim);border-radius:5px;padding:2px 7px}
.btn-begin:hover,.btn-begin:focus-visible{background:color-mix(in srgb,var(--gold) 9%,transparent)}
@keyframes breatheGlow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 24px 0 var(--gold-glow)}}
.legend{display:flex;gap:1.4rem;margin-top:3rem}
.legend-item{display:flex;flex-direction:column;align-items:center;gap:.55rem}
.legend-item:nth-child(1) .chip{animation-delay:0s}
.legend-item:nth-child(2) .chip{animation-delay:-1.2s}
.legend-item:nth-child(3) .chip{animation-delay:-2.4s}
.legend-item:nth-child(4) .chip{animation-delay:-3.6s}
.legend-item:nth-child(5) .chip{animation-delay:-4.8s}
.legend-item:nth-child(6) .chip{animation-delay:-6s}
.chip{font-family:var(--mono);font-size:.85rem;font-weight:600;letter-spacing:.1em;padding:7px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink-2);box-shadow:var(--shadow-chip);animation:chipDrift 6s ease-in-out infinite}
@keyframes chipDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.chip-cur{color:var(--ink-1);border-bottom:2px solid var(--gold)}
.chip-bomb{color:var(--red);background:color-mix(in srgb,var(--red) 11%,transparent);border-radius:3px;padding:0 1px}
.chip-veil{color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,transparent);border-bottom:2px dotted var(--violet);border-radius:3px;padding:0 1px}
.chip-time{border-color:var(--cyan-dim);color:var(--cyan)}
.chip-star{border-color:var(--violet-dim);color:var(--violet)}
.chip-gilded{border-color:var(--gold-dim);color:var(--gold-ink);position:relative;overflow:hidden}
.chip-gilded::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--gold) 12%,transparent) 50%,transparent 60%);animation:shimmer 2.2s linear infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.legend-lbl{font-family:var(--mono);font-size:.55rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.idle-tagline{font-family:var(--display);font-style:italic;font-size:1rem;color:var(--ink-3);margin-top:2.2rem}
.idle-hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-3);margin-top:.8rem}

/* ═══ HUD ═══ */
#game-hud{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:stretch;max-width:820px;background:var(--hud-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:10px 8px;box-shadow:var(--shadow-hud);transition:border-color .3s}
body.danger #game-hud{border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.hud-group{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 18px;position:relative}
.hud-group+.hud-group::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line-soft)}
.hud-lbl{font-family:var(--mono);font-size:.55rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-3)}
.hud-val{font-family:var(--mono);font-size:1.35rem;font-weight:800;line-height:1.1;color:var(--ink-1);font-variant-numeric:tabular-nums}
.hud-wpm{font-size:1rem;font-weight:600;color:var(--ink-2)}
.hud-score-row{display:flex;align-items:center;gap:8px}
#hud-score.punch{animation:scorePunch .25s var(--ease)}
@keyframes scorePunch{40%{transform:scale(1.18);color:var(--gold-bright)}}
.combo-pill{font-family:var(--mono);font-size:.8rem;font-weight:800;color:var(--btn-ink);background:linear-gradient(180deg,#FFD583,#E8B44C);padding:2px 9px;border-radius:99px}
.combo-pill.punch{animation:comboPunch .18s var(--ease)}
@keyframes comboPunch{50%{transform:scale(1.3)}}
.combo-pill.milestone{animation:comboMilestone .6s var(--ease)}
@keyframes comboMilestone{30%{transform:scale(1.6);background:var(--violet);color:var(--on-accent)}}
.combo-pill.breaking{animation:comboBreak .45s var(--pop) forwards}
@keyframes comboBreak{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.2) rotate(-6deg);background:var(--red);color:var(--on-accent)}100%{transform:translateY(14px) scale(.6);opacity:0}}
body.fever .combo-pill{box-shadow:0 0 14px var(--gold-glow)}
.hud-hp-group{min-width:190px}
.hp-row{display:flex;align-items:center;gap:8px}
#shield-icon{color:var(--ink-4);transition:color .2s,filter .2s}
#shield-icon.held{color:var(--green);fill:color-mix(in srgb,var(--green) 25%,transparent);filter:drop-shadow(0 0 5px var(--green-glow))}
#shield-icon.absorb{animation:shieldAbsorb .5s var(--ease)}
@keyframes shieldAbsorb{30%{transform:scale(1.5);color:var(--green-bright)}}
.hp-cells{display:flex;gap:3px}
.hp-cells span{width:14px;height:8px;border-radius:2px;background:var(--surface-3);transition:background .2s}
.hp-cells.hp-high span.on{background:var(--green)}
.hp-cells.hp-mid span.on{background:var(--amber)}
.hp-cells.hp-low span.on{background:var(--red)}
.hp-cells span.ghost{background:color-mix(in srgb,var(--red) 35%,transparent)}
.hp-num{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--ink-1);font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
.hp-num.hurt{animation:hpHurt .25s var(--ease)}
@keyframes hpHurt{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px);color:var(--red)}75%{transform:translateX(3px);color:var(--red)}}
.hp-num.healed{animation:hpHeal .4s var(--ease)}
@keyframes hpHeal{40%{color:var(--green-bright);transform:scale(1.2)}}
#hud-timer.timer-urgent{color:var(--red);animation:timerBeat 1s ease-in-out infinite}
@keyframes timerBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.08)}}
#hud-timer.time-gain{animation:timeGain .2s var(--ease)}
@keyframes timeGain{50%{transform:scale(1.15);color:var(--cyan-bright)}}
#hud-depth.depth-flash{animation:depthFlash .3s var(--ease)}
@keyframes depthFlash{50%{color:var(--gold-bright);transform:scale(1.2)}}
.hud-switch{min-width:84px}
.switch-keys{display:flex;gap:3px}
.arrow-key{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);border:1px solid var(--line-strong);border-radius:5px;color:var(--ink-2);transition:opacity .15s,border-color .2s,box-shadow .2s}
.arrow-key.ready{border-color:var(--gold);box-shadow:0 0 8px color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold-bright)}
.arrow-key.disabled{opacity:.35}
.switch-keys.ping{animation:switchPing .3s ease-out}
@keyframes switchPing{0%{filter:drop-shadow(0 0 0 var(--gold-glow))}50%{filter:drop-shadow(0 0 8px var(--gold-glow))}100%{filter:drop-shadow(0 0 0 transparent)}}
.cd-track{width:44px;height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden;margin-top:2px}
.cooldown-fill{height:100%;width:100%;background:var(--gold);border-radius:2px;transition:width .1s linear,background .2s}
.cooldown-fill.cooling{background:var(--ink-3)}

/* ═══ Word cards ═══ */
#words-container{position:absolute;inset:0;z-index:5}
.word-card{position:absolute;padding:12px 22px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);font-family:var(--mono);font-size:1.5rem;font-weight:800;letter-spacing:.12em;white-space:nowrap;user-select:none;box-shadow:var(--shadow-card);opacity:.55;cursor:default;will-change:transform,opacity;animation:wordIn .28s cubic-bezier(.34,1.56,.64,1),drift 5s ease-in-out .3s infinite;transition:opacity .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease),scale .18s var(--ease)}
@keyframes wordIn{0%{transform:scale(.6);opacity:0;filter:blur(5px)}100%{transform:scale(1);opacity:.55;filter:blur(0)}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.word-card.active{opacity:1;scale:1.06;border-color:var(--gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent),0 0 24px color-mix(in srgb,var(--gold) 16%,transparent),var(--shadow-card-active);z-index:10}
.word-card.active::before{content:'';position:absolute;top:-14px;left:50%;width:5px;height:5px;background:var(--gold);transform:translateX(-50%) rotate(45deg)}
.word-card.jitter{animation:cardJitter .12s linear}
@keyframes cardJitter{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.word-card.dying{animation:none;filter:grayscale(1);opacity:.3!important;transform:translateY(20px);transition:all .7s var(--ease)}

.card-chip{position:absolute;top:-11px;left:10px;font-family:var(--mono);font-size:.55rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,currentColor 12%,var(--surface-1))}

.word-letter{display:inline-block;color:var(--ink-3);transition:color .1s,transform .1s,opacity .1s;border-radius:4px}
.word-card.active .word-letter{color:var(--ink-1)}
.word-letter.typed{color:var(--green);opacity:.7;transform:scale(.94)}
.word-card.active .word-letter.typed{color:var(--green)}
.word-letter.veiled{color:var(--violet);background:color-mix(in srgb,var(--violet) 12%,transparent);border-bottom:2px dotted var(--violet)}
.word-card.active .word-letter.veiled{color:var(--violet)}
.word-letter.revealed{animation:revealPop .3s var(--pop)}
@keyframes revealPop{0%{transform:scale(.5)}45%{transform:scale(1.35);color:var(--violet)}100%{transform:scale(.94)}}
.word-letter.hit{animation:letterHit .09s var(--ease)}
@keyframes letterHit{40%{transform:scale(1.35);color:var(--ink-1)}100%{transform:scale(.94)}}
.word-letter.current{color:var(--ink-1);background:color-mix(in srgb,var(--gold) 15%,transparent);border-bottom:2px solid var(--gold);animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{50%{border-bottom-color:transparent}}
.word-letter.miss{animation:letterMiss .1s linear}
@keyframes letterMiss{50%{color:var(--red)}}
.word-letter.bomb{position:relative;color:var(--red)!important;font-weight:600;background:color-mix(in srgb,var(--red) 11%,transparent)}
.word-letter.bomb::after{content:'';position:absolute;top:-6px;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--red);animation:fusePulse 1.2s ease-in-out infinite}
@keyframes fusePulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
.word-letter.fly{animation:letterFly .35s ease-in forwards}
@keyframes letterFly{100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

.word-timer-bar{position:absolute;bottom:0;left:8px;right:8px;height:3px;background:var(--gold);border-radius:3px;opacity:.5;transition:width .1s linear,background .2s}
.word-card.low-life{animation:lowLife .3s linear infinite,drift 5s ease-in-out infinite}
.word-card.low-life .word-timer-bar{background:var(--red);opacity:.8}
@keyframes lowLife{50%{border-color:var(--red)}}

.word-card.time-word{border-color:var(--cyan-dim);box-shadow:inset 3px 0 0 var(--cyan),var(--shadow-card)}
.word-card.time-word.active{border-color:var(--cyan);box-shadow:inset 3px 0 0 var(--cyan),0 0 0 1px color-mix(in srgb,var(--cyan) 35%,transparent),0 0 24px var(--cyan-glow)}
.word-card.time-word.active::before{background:var(--cyan)}
.word-card.time-word .card-chip{color:var(--cyan-bright)}
.word-card.time-word .word-timer-bar{background:var(--cyan)}

.word-card.freeze-word{border-color:var(--ice);box-shadow:0 0 18px var(--ice-glow),var(--shadow-card)}
.word-card.freeze-word.active{box-shadow:0 0 0 1px color-mix(in srgb,var(--ice) 35%,transparent),0 0 24px var(--ice-glow)}
.word-card.freeze-word.active::before{background:var(--ice)}
.word-card.freeze-word .card-chip{color:var(--ice-bright)}
.word-card.freeze-word .word-timer-bar{background:var(--ice)}

.word-card.star-word{border-color:var(--violet-dim);animation:wordIn .28s cubic-bezier(.34,1.56,.64,1),drift 5s ease-in-out .3s infinite,starGlow 2.4s ease-in-out infinite}
@keyframes starGlow{0%,100%{box-shadow:var(--shadow-card)}50%{box-shadow:0 0 22px var(--violet-glow)}}
.word-card.star-word::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--violet) 8%,transparent) 50%,transparent 60%);background-size:250% 100%;animation:shimmerPos 2.8s linear infinite;pointer-events:none}
@keyframes shimmerPos{0%{background-position:130% 0}100%{background-position:-130% 0}}
.word-card.star-word.active{border-color:var(--violet);box-shadow:0 0 0 1px color-mix(in srgb,var(--violet) 30%,transparent),0 0 24px var(--violet-glow)}
.word-card.star-word.active::before{background:var(--violet)}
.word-card.star-word .card-chip{color:var(--violet-bright)}
.word-card.star-word .word-timer-bar{background:var(--violet)}

.word-card.shield-word{border-color:var(--green-dim)}
.word-card.shield-word.active{border-color:var(--green);box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 30%,transparent),0 0 24px var(--green-glow)}
.word-card.shield-word.active::before{background:var(--green)}
.word-card.shield-word .card-chip{color:var(--green-bright)}
.word-card.shield-word .word-timer-bar{background:var(--green)}

.word-card.gilded-word{border-color:var(--gold)}
.word-card.gilded-word .word-letter{color:var(--gold-bright)}
.word-card.gilded-word::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--gold) 14%,transparent) 50%,transparent 60%);background-size:250% 100%;animation:shimmerPos 1.2s linear infinite;pointer-events:none}
.word-card.gilded-word.active{box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent),0 0 24px var(--gold-glow)}
.word-card.gilded-word .card-chip{color:var(--gold-ink)}
.word-card.gilded-word .word-timer-bar{background:var(--gold);opacity:.9}
.word-card.gilded-word.fading{animation:gildedFade .3s ease-out forwards}
@keyframes gildedFade{100%{opacity:0}}

.word-card.boss-word{background:var(--boss-bg);border-color:var(--gold-dim);font-size:1.9rem;padding:16px 28px 18px;animation:wordIn .28s cubic-bezier(.34,1.56,.64,1),drift 6s ease-in-out .3s infinite,bossPulse 2s ease-in-out infinite}
@keyframes bossPulse{0%,100%{box-shadow:0 0 24px color-mix(in srgb,var(--red) 16%,transparent)}50%{box-shadow:0 0 32px color-mix(in srgb,var(--gold) 22%,transparent)}}
.word-card.boss-word.active{border-color:var(--gold);opacity:1}
.word-card.boss-word .word-letter{color:#6E6B62}
.word-card.boss-word.active .word-letter{color:#FBF8F0}
.word-card.boss-word .word-letter.typed{color:#58D69A}
.word-card.boss-word .word-letter.current{color:#FBF8F0;background:rgba(232,180,76,.22)}
.word-card.boss-word .word-letter.bomb{color:#FF6B76!important;background:rgba(255,107,118,.14)}
.word-card.boss-word .card-chip{color:#E8C95F;background:#2A2823}
.word-card.boss-word .word-timer-bar{background:#E8B44C}

.word-card.exploding{animation:explode .4s ease-in forwards}
@keyframes explode{0%{background:var(--red);transform:scale(1)}20%{background:var(--surface-2)}100%{transform:translateY(26px) rotate(6deg) scale(.85);opacity:0}}
.word-card.completed{animation:complete .32s var(--pop) forwards}
@keyframes complete{0%{transform:scale(1);opacity:1}35%{transform:scale(1.14);border-color:var(--gold)}100%{transform:scale(.7);opacity:0}}
.word-card.burned{animation:burnOut .35s ease-in forwards}
@keyframes burnOut{100%{filter:grayscale(1);transform:translateY(14px);opacity:0}}

/* ═══ Floating text & particles ═══ */
.floating-text{position:absolute;pointer-events:none;font-family:var(--mono);font-weight:800;z-index:30;animation:floatUp .85s var(--pop) forwards;white-space:nowrap;text-shadow:0 1px 8px var(--halo)}
@keyframes floatUp{0%{transform:translateY(0) scale(.5);opacity:0}15%{transform:translateY(-6px) scale(1.18);opacity:1}100%{transform:translateY(-64px) scale(.95);opacity:0}}
.floating-score{color:var(--gold-bright);font-size:1.4rem}
.floating-combo{font-family:var(--display);font-style:italic;font-weight:400;color:var(--gold-bright);font-size:1rem}
.floating-milestone{font-family:var(--display);font-style:italic;font-weight:400;color:var(--violet-bright);font-size:1.6rem}
.floating-damage{color:var(--red-bright);font-size:1.3rem}
.floating-time{color:var(--cyan-bright);font-size:1.1rem}
.floating-heal{color:var(--green-bright);font-size:1.1rem}
.floating-swift{color:var(--gold-bright);font-style:italic;font-size:.9rem}
.floating-banner{font-family:var(--display);font-style:normal;font-weight:400;color:var(--gold-bright);font-size:2.2rem;letter-spacing:.1em;animation:bannerUp 1.2s var(--pop) forwards}
@keyframes bannerUp{0%{transform:translate(-50%,8px) scale(.9);opacity:0}20%{transform:translate(-50%,0) scale(1.05);opacity:1}80%{transform:translate(-50%,-20px) scale(1);opacity:1}100%{transform:translate(-50%,-36px);opacity:0}}

.particle{position:absolute;pointer-events:none;z-index:25}
.p-spark{width:4px;height:4px;border-radius:50%;background:var(--gold);animation:burst .5s ease-out forwards}
.p-spark:nth-child(3n){width:3px;height:3px;background:var(--ink-2)}
@keyframes burst{0%{transform:translate(0,0) scale(1);opacity:.9}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.p-shard{width:8px;height:3px;border-radius:1px;background:var(--red);animation:shard .65s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes shard{0%{transform:translate(0,0) rotate(0);opacity:1}60%{transform:translate(calc(var(--dx)*.8),var(--dy)) rotate(var(--rot));opacity:.9}100%{transform:translate(var(--dx),calc(var(--dy) + 40px)) rotate(var(--rot));opacity:0}}
.p-heal{width:6px;height:6px;background:radial-gradient(var(--green) 30%,transparent 32%),linear-gradient(var(--green),var(--green)) center/2px 6px no-repeat,linear-gradient(var(--green),var(--green)) center/6px 2px no-repeat;background-color:transparent;animation:healDrift .9s ease-out forwards}
@keyframes healDrift{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.p-frost{width:4px;height:4px;background:var(--cyan);transform:rotate(45deg);animation:frost .7s ease-out forwards}
.p-frost.ice{background:var(--ice)}
@keyframes frost{0%{transform:translate(0,0) rotate(45deg) scale(1);opacity:1}60%{transform:translate(var(--dx),var(--dy)) rotate(45deg) scale(.8);opacity:.8}100%{transform:translate(var(--dx),var(--dy)) rotate(45deg) scale(.4);opacity:0}}
.p-ember{width:3px;height:3px;border-radius:50%;background:var(--gold);filter:blur(.5px);animation:ember 2.8s ease-out forwards}
@keyframes ember{0%{transform:translate(0,0);opacity:0}15%{opacity:.7}100%{transform:translate(var(--dx),-45vh);opacity:0}}
.p-micro{width:3px;height:3px;border-radius:50%;background:var(--ink-2);animation:burst .25s ease-out forwards}

.screen-shake-sm{animation:shakeSm .2s linear}
@keyframes shakeSm{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,3px)}40%{transform:translate(4px,-3px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
.screen-shake-md{animation:shakeMd .35s linear}
@keyframes shakeMd{0%,100%{transform:translate(0,0) rotate(0)}15%{transform:translate(-12px,6px) rotate(-.5deg)}35%{transform:translate(10px,-8px) rotate(.5deg)}55%{transform:translate(-8px,5px) rotate(-.3deg)}75%{transform:translate(6px,-4px)}90%{transform:translate(-3px,2px)}}
.screen-shake-lg{animation:shakeLg .5s linear}
@keyframes shakeLg{0%,100%{transform:translate(0,0) rotate(0)}12%{transform:translate(-18px,10px) rotate(-.8deg)}30%{transform:translate(15px,-12px) rotate(.8deg)}48%{transform:translate(-11px,8px) rotate(-.5deg)}66%{transform:translate(8px,-5px) rotate(.3deg)}84%{transform:translate(-4px,3px)}}

/* ═══ Game over ═══ */
#game-over-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--go-overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:70;animation:panelIn .4s var(--pop) both}
@keyframes panelIn{0%{opacity:0;transform:translateY(24px)}100%{opacity:1;transform:translateY(0)}}
.go-inner{display:flex;flex-direction:column;align-items:center;gap:.6rem;max-width:560px;width:100%;padding:0 1.5rem}
.go-label-top{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5em;color:var(--ink-3)}
.go-label-top.lost #go-title-text{color:var(--red)}
.go-score-big{font-family:var(--mono);font-size:5rem;font-weight:800;line-height:1;color:var(--ink-1);font-variant-numeric:tabular-nums;position:relative}
.go-score-big::before{content:'';position:absolute;inset:-30%;background:radial-gradient(ellipse 60% 50% at 50% 50%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 70%);z-index:-1}
.go-score-lbl{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.go-best{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--gold-bright)}
.go-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:100%;margin:1.2rem 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:1rem 0}
.go-stat{text-align:center;padding:.5rem .25rem;animation:statIn .35s var(--pop) both}
.go-stat:nth-child(1){animation-delay:.06s}.go-stat:nth-child(2){animation-delay:.12s}.go-stat:nth-child(3){animation-delay:.18s}.go-stat:nth-child(4){animation-delay:.24s}.go-stat:nth-child(5){animation-delay:.3s}.go-stat:nth-child(6){animation-delay:.36s}.go-stat:nth-child(7){animation-delay:.42s}.go-stat:nth-child(8){animation-delay:.48s}
@keyframes statIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.go-value{display:block;font-family:var(--mono);font-size:1.4rem;font-weight:700;color:var(--ink-1);font-variant-numeric:tabular-nums}
.go-label{display:block;font-family:var(--mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);margin-top:3px;font-weight:500}
.go-sub{font-size:.78rem;color:var(--ink-3)}
.go-cta{display:flex;align-items:center;gap:1.5rem;margin-top:.6rem}
.btn-gold{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.8rem 2.2rem;background:linear-gradient(180deg,#FFD583,#E8B44C);color:var(--btn-ink);border:none;border-radius:99px;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--gold-glow)}
.btn-gold kbd{font-size:.7rem;border:1px solid rgba(26,20,7,.35);border-radius:4px;padding:1px 6px}
.go-link{font-size:.78rem;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:1px;transition:color .16s}
.go-link:hover{color:var(--ink-1)}

/* ═══ Cards (forms, leaderboard, legal) ═══ */
.card{max-width:400px;width:100%;margin:2.5rem auto;padding:2.25rem;background:var(--surface-1);border:1px solid var(--line);border-top-color:color-mix(in srgb,var(--gold) 50%,transparent);border-radius:16px;box-shadow:var(--shadow-elev)}
.card-wide{max-width:620px}
.card h2{font-family:var(--display);font-weight:400;font-size:1.7rem;color:var(--ink-1);margin-bottom:1.2rem}
.card-sub{font-family:var(--display);font-style:italic;font-size:.95rem;color:var(--ink-3);margin-bottom:1rem}
.card-footer{margin-top:1.4rem;font-size:.78rem;color:var(--ink-3);text-align:center}
.card-footer a{color:var(--ink-1);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-dim)}

/* ═══ Forms ═══ */
.form{display:flex;flex-direction:column;gap:.4rem}
.form label{font-family:var(--mono);font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-3);margin-top:.6rem}
.form label:first-child{margin-top:0}
.form input,#delete-confirm input{padding:.65rem .8rem;background:var(--surface-3);border:1px solid var(--line);border-radius:8px;font-size:.9rem;font-family:var(--font);color:var(--ink-1);outline:none;transition:border-color .16s,box-shadow .16s}
.form input:focus,#delete-confirm input:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 14%,transparent)}
.form-error{font-size:.72rem;color:var(--red);min-height:.85rem;margin-top:.25rem}
.form textarea{padding:.65rem .8rem;background:var(--surface-3);border:1px solid var(--line);border-radius:8px;font-size:.9rem;font-family:var(--font);color:var(--ink-1);outline:none;resize:vertical;min-height:7rem;transition:border-color .16s,box-shadow .16s}
.form textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 14%,transparent)}
.form .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-3);opacity:.7}
.form-ok{font-size:.82rem;color:var(--green);margin-top:.7rem}
.contact-alt{font-size:.8rem;color:var(--ink-3);margin-top:1.1rem}
.contact-alt a{color:var(--ink-1);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-dim)}

.btn{font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.75rem 1.5rem;background:linear-gradient(180deg,#FFD583,#E8B44C);color:var(--btn-ink);border:none;border-radius:99px;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease);width:100%;margin-top:.6rem}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--gold-glow)}
.btn-outline{background:transparent;color:var(--ink-2);border:1px solid var(--line-strong)}
.btn-outline:hover{background:var(--surface-3);box-shadow:none;transform:none;color:var(--ink-1)}
.btn-red{background:#C72C3B;color:#fff}
.btn-red:hover{box-shadow:0 4px 16px rgba(199,44,59,.35)}
.link-danger{font-size:.75rem;color:var(--ink-3);background:none;border:none;cursor:pointer;text-align:left;margin-top:.85rem;text-decoration:underline;text-underline-offset:3px;text-decoration-color:transparent;transition:color .16s,text-decoration-color .16s;font-family:var(--font)}
.link-danger:hover{color:var(--red);text-decoration-color:var(--red)}

/* ═══ Account ═══ */
.info-list{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;font-size:.88rem;margin-bottom:1.5rem}
.info-list dt{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);align-self:center}
.info-list dd{font-weight:500;color:var(--ink-1)}
#delete-confirm{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-soft)}
#delete-confirm>*+*{margin-top:.5rem}
.warn-text{font-size:.78rem;color:var(--ink-2)}
#delete-confirm input{width:100%}

/* ═══ Leaderboard ═══ */
#leaderboard-table{width:100%;border-collapse:collapse;margin-top:.5rem}
#leaderboard-table th{text-align:left;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);padding:.5rem .75rem;border-bottom:1px solid var(--line);font-weight:500}
.r{text-align:right!important}
#leaderboard-table td{padding:.65rem .75rem;border-bottom:1px solid var(--line-soft);font-size:.85rem;color:var(--ink-2);transition:background .16s}
#leaderboard-table td.num{text-align:right;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-1)}
#leaderboard-table tbody tr:hover td{background:color-mix(in srgb,var(--ink-3) 10%,transparent)}
#leaderboard-table tr.rank-1 td{background:color-mix(in srgb,var(--gold) 7%,transparent)}
#leaderboard-table tr.rank-1 td:first-child{box-shadow:inset 2px 0 0 var(--gold)}
#leaderboard-table tr.highlight td{background:color-mix(in srgb,var(--cyan) 8%,transparent)}
#leaderboard-table tr.highlight td:first-child{box-shadow:inset 2px 0 0 var(--cyan)}
.medal{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;transform:rotate(45deg);font-family:var(--mono);font-size:.6rem;font-weight:800;color:var(--medal-ink);border-radius:3px}
.medal span{transform:rotate(-45deg)}
.medal.m1{background:var(--gold)}
.medal.m2{background:var(--medal-2)}
.medal.m3{background:var(--medal-3)}
#leaderboard-empty,#history-empty{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center;padding:2.5rem;color:var(--ink-3);font-family:var(--display);font-size:1rem}
#leaderboard-empty .diamond,#history-empty .diamond{width:10px;height:10px}

/* ═══ Daily / tabs / stats ═══ */
.btn-daily{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:.6rem 1.8rem;margin-top:.9rem;background:transparent;color:var(--cyan-bright);border:1px solid var(--cyan-dim);border-radius:99px;cursor:pointer;transition:background .16s var(--ease),border-color .16s var(--ease)}
.btn-daily kbd{font-size:.65rem;color:var(--cyan-bright);border:1px solid var(--cyan-dim);border-radius:5px;padding:1px 7px}
.btn-daily:hover{background:color-mix(in srgb,var(--cyan) 8%,transparent);border-color:var(--cyan)}
.daily-hint{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--ink-3);margin-top:.5rem}

.lb-tabs{display:flex;gap:.25rem;margin-bottom:.75rem;border-bottom:1px solid var(--line-soft);padding-bottom:.5rem}
.lb-tab{position:relative;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;background:none;border:none;color:var(--ink-3);cursor:pointer;transition:color .16s var(--ease)}
.lb-tab::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .16s var(--ease)}
.lb-tab:hover{color:var(--ink-1)}
.lb-tab.active{color:var(--ink-1)}
.lb-tab.active::after{transform:scaleX(1)}

.stats-sub{font-family:var(--mono);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-3);margin:1.6rem 0 .8rem}
.stats-grid{margin:0}
#achievements,#profile-achievements{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.ach{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.7rem;align-items:center;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;opacity:.45}
.ach.earned{opacity:1;border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 5%,transparent)}
.ach-diamond{grid-row:1/3;width:12px;height:12px;background:var(--surface-3);border:1px solid var(--line-strong);transform:rotate(45deg)}
.ach.earned .ach-diamond{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px var(--gold-glow)}
.ach-name{font-size:.8rem;font-weight:700;color:var(--ink-1)}
.ach-desc{font-size:.7rem;color:var(--ink-3)}
.spark{display:flex;align-items:flex-end;gap:3px;height:56px;margin-bottom:1rem}
.spark-bar{flex:1;max-width:22px;background:color-mix(in srgb,var(--gold) 55%,transparent);border-radius:2px 2px 0 0}
.spark-bar.daily{background:color-mix(in srgb,var(--cyan) 55%,transparent)}
#runs-table{width:100%;border-collapse:collapse}
#runs-table th{text-align:left;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);padding:.5rem .6rem;border-bottom:1px solid var(--line);font-weight:500}
#runs-table td{padding:.5rem .6rem;border-bottom:1px solid var(--line-soft);font-size:.8rem;color:var(--ink-2)}
#runs-table td.num{text-align:right;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-1)}
#stats-empty{text-align:center;padding:1.5rem;color:var(--ink-3);font-family:var(--display);font-style:italic}
.btn-share{background:none;border:none;cursor:pointer;font-family:var(--font)}

/* ═══ History ═══ */
#history-total{color:var(--ink-3);font-style:normal;font-family:var(--mono);font-size:.7rem}
.lookup-row{display:flex;gap:.5rem;margin:.25rem 0 .4rem}
#lookup-input{flex:1;padding:.55rem .7rem;background:var(--surface-3);border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:.78rem;color:var(--ink-1);outline:none;transition:border-color .16s,box-shadow .16s}
#lookup-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 14%,transparent)}
.btn-mini{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.5rem 1rem;background:linear-gradient(180deg,#FFD583,#E8B44C);color:var(--btn-ink);border:none;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.btn-mini:hover{transform:translateY(-1px);box-shadow:0 4px 14px var(--gold-glow)}
.btn-mini.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-strong)}
.btn-mini.ghost:hover{background:var(--surface-3);box-shadow:none;color:var(--ink-1)}
.lookup-error{font-size:.72rem;color:var(--red);min-height:.85rem;margin-bottom:.4rem}
#history-table{width:100%;border-collapse:collapse;margin-top:.25rem}
#history-table th{text-align:left;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);padding:.5rem .6rem;border-bottom:1px solid var(--line);font-weight:500}
#history-table th.r{text-align:right}
.hist-row{cursor:pointer;transition:background .16s}
.hist-row td{padding:.55rem .6rem;border-bottom:1px solid var(--line-soft);font-size:.82rem;color:var(--ink-2)}
.hist-row td.num{text-align:right;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-1)}
.hist-row:hover td{background:color-mix(in srgb,var(--ink-3) 8%,transparent)}
.hist-row.open td{background:color-mix(in srgb,var(--gold) 7%,transparent)}
.hist-row.highlight td{background:color-mix(in srgb,var(--cyan) 9%,transparent)}
.hist-when{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);white-space:nowrap}
.hist-row td.me{color:var(--gold-bright);font-weight:700}
.hist-caret{text-align:right;color:var(--ink-3);font-size:.7rem;transition:transform .16s}
.hist-row.open .hist-caret{transform:rotate(180deg);color:var(--gold)}
.mode-badge{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid var(--line-strong);color:var(--ink-3)}
.mode-badge.daily{color:var(--cyan);border-color:var(--cyan-dim)}
.mode-badge.normal{color:var(--ink-3)}
.detail-row td{padding:0;border-bottom:1px solid var(--line-soft);background:color-mix(in srgb,var(--ink-3) 5%,transparent)}
.detail-wrap{padding:1rem;display:flex;flex-direction:column;gap:.9rem;animation:detailIn .2s var(--ease)}
@keyframes detailIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.detail-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
.df{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.4rem;background:var(--surface-1);border:1px solid var(--line);border-radius:8px}
.df-v{font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--ink-1)}
.df-l{font-family:var(--mono);font-size:.5rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-top:2px}
.detail-meta{display:flex;flex-direction:column;gap:.35rem}
.dm-row{display:flex;align-items:center;gap:.7rem;font-size:.72rem}
.dm-k{font-family:var(--mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);min-width:54px}
.dm-id{font-family:var(--mono);font-size:.74rem;color:var(--ink-1);user-select:all;word-break:break-all}
.dm-t{font-family:var(--mono);font-size:.72rem;color:var(--ink-2)}
.detail-actions{display:flex;gap:.5rem;flex-wrap:wrap}
@media(max-width:560px){.detail-grid{grid-template-columns:repeat(3,1fr)}}

/* ═══ Prose ═══ */
.prose h3{margin-top:1.3rem;margin-bottom:.3rem;font-size:.85rem;font-weight:700;color:var(--ink-1)}
.prose h3::before{content:'';display:inline-block;width:5px;height:5px;background:var(--gold);transform:rotate(45deg);margin-right:.5rem;vertical-align:.12em}
.prose p{font-size:.85rem;color:var(--ink-2);line-height:1.7}
.prose p+p{margin-top:.5rem}

/* ═══ Guide page ═══ */
.guide-page{overflow:auto;height:auto}
.guide-bar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 1.5rem;background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:50}
.guide-cta{text-decoration:none}
.guide-wrap{max-width:760px;margin:2rem auto;padding:0 1.1rem}
.guide-wrap h1{font-family:var(--display);font-weight:400;font-size:2.2rem;color:var(--ink-1);line-height:1.15;margin-bottom:1rem}
.guide-wrap h2{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--ink-1);margin:1.8rem 0 .6rem}
.guide-wrap h3{font-size:.95rem;font-weight:700;color:var(--ink-1);margin:1.1rem 0 .3rem}
.guide-wrap p,.guide-wrap li{font-size:.92rem;color:var(--ink-2);line-height:1.7}
.guide-wrap ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.35rem;margin:.4rem 0}
.guide-wrap a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px}
.guide-table{width:100%;border-collapse:collapse;margin:.6rem 0}
.guide-table th{text-align:left;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);padding:.5rem .6rem;border-bottom:1px solid var(--line)}
.guide-table td{padding:.55rem .6rem;border-bottom:1px solid var(--line-soft);font-size:.86rem;color:var(--ink-2);vertical-align:top}
.guide-table td:first-child{font-weight:600;color:var(--ink-1);white-space:nowrap}
.guide-final{margin-top:2rem;text-align:center}
.guide-final a{text-decoration:none}

/* ═══ Idle extras / links ═══ */
.idle-stats{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-2);margin-top:1.1rem;min-height:.9rem}
.idle-links{display:flex;align-items:center;gap:.6rem;margin-top:.6rem}
.text-link{background:none;border:none;cursor:pointer;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);transition:color .16s}
.text-link:hover{color:var(--gold-bright)}
.dot-sep{color:var(--ink-4);font-size:.66rem}

/* ═══ Modals ═══ */
.modal-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--go-overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:flashFade .001s,panelIn .35s var(--pop)}
.modal-card{max-width:460px;width:100%;background:var(--surface-1);border:1px solid var(--line);border-top-color:color-mix(in srgb,var(--gold) 50%,transparent);border-radius:16px;box-shadow:var(--shadow-elev);padding:2rem;text-align:center}
.modal-card h2{font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--ink-1);margin-bottom:.9rem}
.modal-text{font-size:.84rem;color:var(--ink-2);line-height:1.6;margin-bottom:1.1rem}
.recovery-code{font-family:var(--mono);font-size:1.2rem;font-weight:700;letter-spacing:.12em;color:var(--gold-bright);background:var(--surface-3);border:1px dashed var(--gold-dim);border-radius:10px;padding:.9rem;margin-bottom:.8rem;word-break:break-all;user-select:all}
.modal-check{display:flex;align-items:center;gap:.5rem;justify-content:center;font-size:.78rem;color:var(--ink-2);margin:1rem 0}
.modal-check input{width:16px;height:16px;accent-color:var(--gold)}
.help-list{text-align:left;margin:0 0 1.2rem;padding-left:1.1rem;display:flex;flex-direction:column;gap:.55rem}
.help-list li{font-size:.82rem;color:var(--ink-2);line-height:1.5}
.help-list kbd{font-size:.7rem;background:var(--surface-3);border:1px solid var(--line-strong);border-radius:4px;padding:0 5px}
.hl-red{color:var(--red);font-weight:600}
.hl-cyan{color:var(--cyan);font-weight:600}
.hl-ice{color:var(--ice);font-weight:600}
.hl-green{color:var(--green);font-weight:600}
.hl-violet{color:var(--violet);font-weight:600}
.hl-gold{color:var(--gold-bright);font-weight:600}

/* ═══ Profile ═══ */
.profile-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.name-cell{cursor:pointer}
.name-cell:hover{color:var(--gold-bright);text-decoration:underline;text-underline-offset:2px}

/* ═══ Sprint ═══ */
#sprint-hud{display:none;position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:50;align-items:stretch;background:var(--hud-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:10px 8px;box-shadow:var(--shadow-hud)}
body.sprint #sprint-hud{display:flex}
body.sprint #game-hud{display:none}
.btn-sprint{color:var(--violet-bright);border-color:var(--violet-dim)}
.btn-sprint kbd{color:var(--violet-bright);border-color:var(--violet-dim)}
.btn-sprint:hover{background:color-mix(in srgb,var(--violet) 8%,transparent);border-color:var(--violet)}

/* ═══ Coins ═══ */
.coin-mark{display:inline-block;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8,#E8B44C 70%,#B8860c);box-shadow:0 0 0 1px rgba(184,134,12,.5) inset;flex-shrink:0}
.coin-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--ink-1);background:var(--surface-3);border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.coin-chip.bump{animation:coinBump .35s var(--ease)}
@keyframes coinBump{40%{transform:scale(1.18);color:var(--gold-bright)}}

.btn-vault{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.6rem 1.6rem;margin-top:.6rem;background:transparent;color:var(--gold-bright);border:1px solid var(--gold-dim);border-radius:99px;cursor:pointer;transition:background .16s var(--ease)}
.btn-vault:hover:not(:disabled){background:color-mix(in srgb,var(--gold) 10%,transparent)}
.btn-vault:disabled{opacity:.4;cursor:not-allowed}

/* ═══ Invite ═══ */
.invite-box{margin:.5rem 0 1rem;padding:1rem;background:color-mix(in srgb,var(--gold) 5%,transparent);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:10px}
.invite-title{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--gold-bright);margin-bottom:.3rem}
.invite-sub{font-size:.78rem;color:var(--ink-2);line-height:1.5;margin-bottom:.6rem}
.invite-row{display:flex;gap:.4rem}
#invite-link{flex:1;padding:.5rem .6rem;background:var(--surface-3);border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:.72rem;color:var(--ink-1)}

/* ═══ Shop ═══ */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.6rem;margin-bottom:.5rem}
.shop-item{border:1px solid var(--line);border-radius:10px;padding:.7rem;display:flex;flex-direction:column;gap:.5rem;background:var(--surface-2)}
.shop-swatch{height:34px;border-radius:7px;border:1px solid var(--line)}
.shop-item-name{font-size:.78rem;font-weight:600;color:var(--ink-1)}
.shop-title-preview{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--gold-bright);text-transform:uppercase}
.shop-btn{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.45rem;border:none;border-radius:7px;cursor:pointer;background:linear-gradient(180deg,#FFD583,#E8B44C);color:var(--btn-ink)}
.shop-btn.owned{background:var(--surface-3);color:var(--ink-2);border:1px solid var(--line);cursor:default}
.shop-btn.equipped{background:transparent;border:1px solid var(--gold);color:var(--gold-bright);cursor:default}
.shop-btn.locked{background:var(--surface-3);color:var(--ink-3);border:1px solid var(--line);cursor:not-allowed}
.shop-btn:disabled{opacity:.6;cursor:not-allowed}

/* ═══ Profile card ═══ */
.pcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:1rem;box-shadow:var(--shadow-card)}
.pcard-banner{height:96px;position:relative;background:linear-gradient(135deg,#141B2E,#080B12)}
.pcard-avatar{position:absolute;left:1.2rem;bottom:-22px;width:56px;height:56px;border-radius:14px;background:var(--surface-1);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.pcard-avatar .diamond{width:18px;height:18px}
.pcard-body{padding:2rem 1.2rem 1.1rem}
.pcard-headrow{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.pcard-name{font-family:var(--display);font-weight:400;font-size:1.7rem;color:var(--accent,var(--ink-1));margin:0}
.pcard-title{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--btn-ink);background:var(--accent,var(--gold));padding:3px 9px;border-radius:99px}
.pcard-bio{font-size:.85rem;color:var(--ink-2);margin-top:.5rem;font-style:italic}
#profile-bio-edit{display:flex;gap:.4rem;margin-bottom:1rem}
#bio-input{flex:1;padding:.5rem .6rem;background:var(--surface-3);border:1px solid var(--line);border-radius:8px;font-family:var(--font);font-size:.85rem;color:var(--ink-1)}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce){
  .word-card,.chip,.title,.btn-begin,.ghost-word,.word-card.star-word,.word-card.boss-word{animation:none!important}
  .word-card{opacity:.55}
  .word-card.active{opacity:1;scale:1.06}
  .screen-shake-sm,.screen-shake-md,.screen-shake-lg,.word-card.jitter{animation:none!important}
  .particle{display:none!important}
  .chip-gilded::after,.word-card.gilded-word::after,.word-card.star-word::after{animation:none!important;display:none}
  #flash-overlay.flash{animation-duration:.1s}
  body.danger #danger-vignette,body.fever #fever-vignette{animation:none}
}