:root{
  --ink:        #120E0D;
  --ink-soft:   #1C1613;
  --ink-raise:  #241B18;
  --crimson:    #B3142F;
  --crimson-dk: #6E0A1D;
  --gold:       #D1A850;
  --gold-dim:   #8C7443;
  --washi:      #EDE3CF;
  --washi-dim:  #B8AD98;
  --steel:      #3B3F42;
  --line:       rgba(209,168,80,0.22);

  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif", Georgia, serif;
  --sans:  "Hiragino Sans", "Yu Gothic", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 3px;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(90% 70% at 50% 0%, #2A1614 0%, transparent 70%),
    var(--ink);
  color: var(--washi);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
canvas, img{ image-rendering: pixelated; image-rendering: crisp-edges; }

.kanji-drift{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.kanji-drift span{
  position:absolute; font-family: var(--serif); color: var(--crimson);
  opacity:.05; font-size:18vw; line-height:1; user-select:none;
  animation: drift 40s ease-in-out infinite alternate;
}
.kanji-drift span:nth-child(1){ top:-4vw; left:-3vw; }
.kanji-drift span:nth-child(2){ top:55vh; left:70vw; font-size:22vw; animation-delay:-10s; }
.kanji-drift span:nth-child(3){ top:20vh; left:35vw; font-size:14vw; opacity:.035; animation-delay:-20s; }
.kanji-drift span:nth-child(4){ top:70vh; left:5vw; font-size:16vw; animation-delay:-5s; }
.kanji-drift span:nth-child(5){ top:-6vh; left:60vw; font-size:20vw; animation-delay:-15s; }
.kanji-drift span:nth-child(6){ top:40vh; left:-5vw; font-size:18vw; animation-delay:-25s; }
@keyframes drift{ to{ transform: translateY(-3vh) rotate(3deg); } }

.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.06;
  background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

#app{ position:relative; z-index:1; height:100vh; height:100dvh; width:100vw; }

/* ---------------- Pantallas ---------------- */
.screen{
  position:absolute; inset:0; display:none;
  overflow-y:auto; overflow-x:hidden;
  padding: 1.5rem 1rem;
}
.screen[data-active="true"]{ display:flex; animation: screenIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes screenIn{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform:none; } }
.screen-content{ margin:auto; width:min(1100px, 100%); }

/* ---------------- Tipografía y adornos ---------------- */
.eyebrow-seal{
  display:inline-grid; place-items:center;
  font-family: var(--serif); color: var(--crimson);
  border: 1.5px solid var(--crimson);
  padding: .35em 1em; border-radius: 50%;
  letter-spacing:.05em; font-size:.95rem; margin:0 0 1.2rem;
  box-shadow: inset 0 0 0 3px rgba(179,20,47,.12);
}
.eyebrow-seal.small{ font-size:.8rem; margin-bottom:.8rem; }

.title-huge{
  font-family: var(--serif); font-weight:600;
  font-size: clamp(2.6rem, 7vw, 5rem); line-height:1.02;
  margin:0 0 1.1rem;
  text-shadow: 0 0 40px rgba(179,20,47,.35);
}
.title-huge em{ font-style:normal; color: var(--gold); }
.title-mid{ font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.3rem); margin:0 0 .6rem; font-weight:600; }
.lead{ font-size:1.08rem; color: var(--washi-dim); line-height:1.65; max-width:48ch; margin:0 0 2rem; }
.lead strong{ color: var(--washi); }
.lead.small{ font-size:1rem; margin:0 auto 1.6rem; }

/* Esquinas doradas de pergamino */
.corner{ position:absolute; width:26px; height:26px; border:2px solid var(--gold); z-index:3; pointer-events:none; }
.corner.tl{ top:-6px; left:-6px; border-right:none; border-bottom:none; }
.corner.tr{ top:-6px; right:-6px; border-left:none; border-bottom:none; }
.corner.bl{ bottom:-6px; left:-6px; border-right:none; border-top:none; }
.corner.br{ bottom:-6px; right:-6px; border-left:none; border-top:none; }

/* ---------------- Botones ---------------- */
.btn{
  font-family: var(--sans); font-weight:600; border:none; cursor:pointer;
  border-radius: var(--radius);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn:focus-visible, .btn-ghost:focus-visible, .choice-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn-primary{
  background: linear-gradient(160deg, var(--crimson) 0%, var(--crimson-dk) 100%);
  color: var(--washi);
  box-shadow: 0 8px 28px rgba(179,20,47,.38), inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-primary:hover{ box-shadow: 0 10px 34px rgba(179,20,47,.55), inset 0 1px 0 rgba(255,255,255,.14); transform: translateY(-1px); }
.btn-giant{ padding: 1.05rem 2.4rem; font-size:1.12rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:.7rem; }
.btn-kanji{ font-family: var(--serif); font-size:1.3rem; color: var(--gold); }
.btn-ghost-lg{
  padding: 1rem 1.6rem; font-size:1rem; background: transparent; color: var(--washi);
  border: 1px solid var(--line);
}
.btn-ghost-lg:hover{ border-color: var(--gold); background: rgba(209,168,80,.06); }
.btn-ghost{
  background:none; border:1px solid transparent; color: var(--washi-dim);
  font: 500 .9rem var(--sans); cursor:pointer; padding:.4rem .6rem; border-radius: var(--radius);
}
.btn-ghost:hover{ color: var(--washi); border-color: var(--line); }

/* ---------------- 1. INICIO ---------------- */
.home{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items:center; }
.home-meta{ margin-top:1.4rem; font-size:.85rem; color: var(--washi-dim); display:flex; flex-wrap:wrap; gap:.5rem; }
.home-meta b{ color: var(--gold); font-family: var(--serif); font-size:1.05rem; }
.dot-sep{ opacity:.5; }
.home-showcase{ display:flex; flex-direction:column; align-items:center; }
.showcase-frame, .forge-frame, .reveal-frame{
  position:relative; background: var(--ink-soft);
  box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.6), 0 0 80px rgba(179,20,47,.15);
}
.showcase-frame canvas{ display:block; width:min(420px, 80vw); height:auto; aspect-ratio:1; }
.showcase-caption{ font-family: var(--serif); color: var(--gold); margin: 1.2rem 0 .6rem; text-align:center; min-height:1.4em; }
.showcase-steps{ display:flex; gap:1.2rem; font-size:.82rem; color: var(--washi-dim); }
.showcase-steps i{ font-style:normal; font-family: var(--serif); color: var(--crimson); margin-right:.3em; }

@media (max-width: 860px){
  .home{ grid-template-columns: 1fr; text-align:center; gap:2rem; }
  .home .lead{ margin-left:auto; margin-right:auto; }
  .home-meta{ justify-content:center; }
  .showcase-frame canvas{ width:min(300px, 72vw); }
}

/* ---------------- 2. CUESTIONARIO ---------------- */
.quiz-content{ max-width: 900px; text-align:center; }
.quiz-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.8rem; }
.session-tag{ font-family: var(--serif); color: var(--gold); font-size:.9rem; letter-spacing:.04em; margin:0; }
.quiz-count{ font-family: var(--serif); color: var(--washi-dim); font-size:.9rem; min-width:4.5rem; text-align:right; }
.quiz-bar{ height:3px; background: var(--steel); border-radius:3px; overflow:hidden; margin-bottom:2rem; }
.quiz-bar span{ display:block; height:100%; width:0; background: linear-gradient(90deg, var(--crimson), var(--gold)); transition: width .4s ease; }
.quiz-step{ animation: screenIn .4s ease both; }
.quiz-kicker{ color: var(--crimson); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 .5rem; }
.quiz-question{ font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.2rem); margin:0 0 1.8rem; font-weight:600; }

.choice-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.choice-card{
  position:relative;
  background: linear-gradient(180deg, var(--ink-raise), var(--ink-soft));
  border:1px solid var(--steel); color: var(--washi);
  border-radius: var(--radius); padding: 1.1rem .9rem 1.2rem; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  overflow:hidden;
}
.choice-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(80% 60% at 50% 0%, rgba(209,168,80,.12), transparent 70%);
  opacity:0; transition: opacity .2s;
}
.choice-card:hover{ border-color: var(--crimson); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.choice-card:hover::after{ opacity:1; }
.choice-card.is-picked{ border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 40px rgba(209,168,80,.35); transform: scale(1.03); }
.choice-thumb{ width:144px; height:auto; margin-bottom:.3rem; }
.choice-thumb.tall{ width:auto; height:150px; }
.choice-thumb.wide{ width:100%; max-width:220px; border:1px solid var(--line); }
.choice-icon{ font-family: var(--serif); font-size:1.5rem; color: var(--gold); line-height:1; }
.choice-label{ font-size:1rem; font-weight:600; }
.choice-perk{ font-size:.78rem; color: var(--washi-dim); }

@media (max-width: 640px){
  .choice-grid{ grid-template-columns: 1fr; gap:.7rem; }
  .choice-card{
    display:grid; grid-template-columns: 96px auto 1fr; align-items:center;
    text-align:left; padding:.7rem .9rem; column-gap:.7rem; row-gap:.15rem;
  }
  .choice-thumb, .choice-thumb.tall, .choice-thumb.wide{ grid-column:1; grid-row:1 / 3; width:96px; max-height:96px; object-fit:contain; margin:0; }
  .choice-icon{ grid-column:2; grid-row:1; font-size:1.3rem; }
  .choice-label{ grid-column:3; grid-row:1; }
  .choice-perk{ grid-column:2 / 4; grid-row:2; }
}

/* ---------------- 3. FORJA ---------------- */
.forge{ display:grid; grid-template-columns: auto 1fr; gap:3rem; align-items:center; max-width: 1000px; }
.forge-visual{ display:flex; flex-direction:column; gap:1rem; }
.forge-frame canvas{ display:block; width:min(400px, 84vw); height:auto; aspect-ratio:1; }
.forge-scan{
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
.forge-bar{ height:6px; background: var(--steel); border-radius:6px; overflow:hidden; }
.forge-bar span{ display:block; height:100%; width:0; background: linear-gradient(90deg, var(--crimson), var(--gold)); box-shadow: 0 0 14px rgba(209,168,80,.6); transition: width .12s linear; }
.forge-meta{ display:flex; justify-content:space-between; font: 500 .8rem ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--washi-dim); margin-top:.45rem; }
.forge-engine{ color: var(--gold); font-family: var(--serif); margin:0 0 1.2rem; }
.forge-prompt{ border-left:2px solid var(--crimson); padding:.6rem .9rem; background: rgba(28,22,19,.7); margin-bottom:1.2rem; }
.forge-label{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--washi-dim); }
.forge-prompt p{ margin:.35rem 0 0; font: 400 .82rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--washi); min-height: 4.5em; }
.forge-log{ list-style:none; margin:0; padding:0; font: 400 .85rem/1.9 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--washi-dim); }
.forge-log li{ animation: logIn .3s ease both; }
.forge-log li::before{ content:"✓ "; color: var(--gold-dim); }
.forge-log li.is-live{ color: var(--washi); }
.forge-log li.is-live::before{ content:"▸ "; color: var(--crimson); animation: blink .8s steps(2) infinite; }
.forge-log li.is-done{ color: var(--gold); font-weight:600; }
.forge-log li.is-done::before{ content:""; }
@keyframes logIn{ from{ opacity:0; transform: translateX(-6px); } to{ opacity:1; transform:none; } }
@keyframes blink{ 50%{ opacity:0; } }
@media (max-width: 860px){
  .forge{ grid-template-columns:1fr; gap:1.5rem; justify-items:center; text-align:center; }
  .forge-panel{ width:100%; max-width:420px; text-align:left; }
  .forge-panel .eyebrow-seal, .forge-panel .title-mid{ display:none; }
  .forge-frame canvas{ width:min(320px, 80vw); }
  .forge-visual{ width:min(320px, 80vw); }
}

/* ---------------- 4. REVELACIÓN ---------------- */
.reveal{ display:grid; grid-template-columns: auto 1fr; gap:3rem; align-items:center; max-width:1000px; }
.reveal-card{ display:flex; flex-direction:column; align-items:center; }
.reveal-frame img{ display:block; width:min(400px, 84vw); height:auto; aspect-ratio:1; }
.reveal-frame.pop{ animation: revealPop .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes revealPop{
  0%{ opacity:0; transform: scale(.88) rotate(-1deg); filter: brightness(3) blur(6px); }
  60%{ filter: brightness(1.3) blur(0); }
  100%{ opacity:1; transform:none; filter:none; }
}
.reveal-hanko{
  position:absolute; right:14px; bottom:14px; z-index:4;
  width:48px; height:48px; display:grid; place-items:center;
  font-family: var(--serif); font-size:1.6rem; color: var(--washi);
  background: var(--crimson); border-radius: 6px; transform: rotate(-6deg);
  box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.15);
  animation: stamp .5s .7s cubic-bezier(.3,1.6,.4,1) both;
}
@keyframes stamp{ from{ opacity:0; transform: scale(2.2) rotate(-20deg); } to{ opacity:1; transform: rotate(-6deg); } }
.reveal-source{ font: 400 .75rem ui-monospace, Menlo, Consolas, monospace; color: var(--washi-dim); margin:1rem 0 0; text-align:center; }

.reveal-info{ animation: screenIn .6s .25s ease both; }
.reveal-title{ color: var(--crimson); letter-spacing:.1em; text-transform:uppercase; font-size:.8rem; margin:0 0 .3rem; }
.reveal-name{ font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height:1.1; margin:0; font-weight:600; }
.reveal-kanji{ font-family: var(--serif); color: var(--gold); font-size:1.3rem; letter-spacing:.3em; margin:.4rem 0 1rem; }
.reveal-tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.4rem; }
.tag{ font-size:.8rem; padding:.3rem .65rem; border:1px solid var(--line); border-radius:99px; color: var(--washi-dim); }
.tag i{ font-style:normal; font-family: var(--serif); color: var(--gold); margin-right:.35em; }

.stats{ display:grid; gap:.55rem; margin-bottom:1.4rem; }
.stat{ display:grid; grid-template-columns: 6.5rem 1fr 1.6rem; align-items:center; gap:.8rem; font-size:.85rem; }
.stat-label{ color: var(--washi-dim); }
.stat-bar{ height:8px; background: var(--steel); position:relative; overflow:hidden; }
.stat-bar span{
  position:absolute; inset:0 auto 0 0; width: var(--v);
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, #B8913F 8px 10px);
  animation: growBar 1s .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes growBar{ from{ width:0; } }
.stat-num{ font-family: var(--serif); color: var(--gold); text-align:right; }

.perks{ border-top:1px solid var(--line); padding-top:1rem; margin-bottom:1.6rem; }
.perks-title{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color: var(--washi-dim); margin:0 0 .7rem; }
.perks ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap:.6rem 1.2rem; }
.perks li{ display:flex; gap:.65rem; align-items:flex-start; }
.perks li i{ font-style:normal; font-family: var(--serif); width:30px; height:30px; flex:none; display:grid; place-items:center; background: rgba(179,20,47,.18); color: var(--gold); border:1px solid rgba(179,20,47,.5); }
.perks li b{ display:block; font-size:.9rem; }
.perks li span{ font-size:.8rem; color: var(--washi-dim); }
.reveal-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

@media (max-width: 860px){
  .reveal{ grid-template-columns:1fr; gap:1.6rem; }
  .reveal-frame img{ width:min(320px, 80vw); }
  .reveal-info{ max-width:520px; margin:0 auto; width:100%; }
  .perks ul{ grid-template-columns: 1fr; }
  .reveal-actions{ justify-content:center; }
}

/* ---------------- 5. TUTORIAL ---------------- */
.tutorial{ max-width: 820px; text-align:center; }
.tut-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-bottom:1.6rem; }
.tut-card{ background: linear-gradient(180deg, var(--ink-raise), var(--ink-soft)); border:1px solid var(--steel); padding:1rem .8rem 1.1rem; }
.tut-sprite{ height:110px; width:auto; }
.tut-card h3{ font-family: var(--serif); margin:.5rem 0 .2rem; font-size:1.15rem; }
.tut-card p{ margin:0; color: var(--washi-dim); font-size:.88rem; }
.tut-card b{ color: var(--gold); }
.tut-controls{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.4rem; color: var(--washi-dim); font-size:.92rem; margin-bottom:1rem; }
.tut-controls i{ font-style:normal; font-family: var(--serif); color: var(--gold); }
.tut-combo{ color: var(--washi-dim); margin:0 0 1.8rem; font-size:.95rem; }
.tut-combo b{ color: var(--gold); }
kbd{
  background: var(--steel); border:1px solid var(--washi-dim); border-bottom-width:3px;
  border-radius:4px; padding:.1em .5em; margin:0 .15em; font-family: var(--sans); color: var(--washi); font-size:.85em;
}
.hint-touch{ display:none !important; }
@media (max-width: 560px){ .tut-grid{ gap:.5rem; } .tut-sprite{ height:72px; } .tut-card{ padding:.7rem .4rem; } .tut-card h3{ font-size:1rem; } }

/* ---------------- 6. JUEGO ---------------- */
#screen-juego{ padding:0; overflow:hidden; }
#game-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; background: var(--ink); }
.hud{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding: .8rem 1.2rem 1.6rem;
  background: linear-gradient(to bottom, rgba(12,8,8,.85), transparent);
  pointer-events:none;
}
.hud-left{ display:flex; align-items:center; gap:.7rem; }
.hud-avatar{ width:44px; height:44px; object-fit:cover; border:1.5px solid var(--gold); background: var(--ink-soft); }
.hud-id, .hud-center{ display:flex; flex-direction:column; }
.hud-center{ align-items:center; }
.hud-label{ font-size:.66rem; color: var(--washi-dim); letter-spacing:.1em; text-transform:uppercase; }
.hud-value{ font-family: var(--serif); font-size:1.1rem; color: var(--washi); }
.hud-score{ color: var(--gold); font-size:1.6rem; line-height:1.1; }
.hud-score.bump{ animation: bump .25s ease; }
@keyframes bump{ 50%{ transform: scale(1.25); } }
.hud-right{ display:flex; align-items:center; gap:.9rem; }
.hud-lives{ display:flex; gap:.25rem; }
.heart{ width:20px; height:20px; filter: drop-shadow(0 0 4px rgba(200,20,47,.6)); }
.hud-pause{
  pointer-events:auto; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background: rgba(18,14,13,.6); color: var(--washi);
  font-size:.8rem; cursor:pointer;
}
.hud-pause:hover{ border-color: var(--gold); }

.touch-controls{
  display:none; position:absolute; left:0; right:0; bottom: 1.2rem; z-index:6;
  padding: 0 1.2rem; align-items:flex-end; justify-content:space-between; pointer-events:none;
}
.touch-dpad, .touch-actions{ display:flex; gap:.9rem; align-items:flex-end; pointer-events:auto; }
.touch-btn{
  width:66px; height:66px; border-radius:50%;
  border:1.5px solid var(--gold); background: rgba(18,14,13,.55); color: var(--washi);
  font-family: var(--serif); font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color: transparent; touch-action:none; user-select:none; pointer-events:auto;
}
.touch-btn:active{ background: rgba(179,20,47,.6); border-color: var(--crimson); }
.touch-btn-slash{ width:88px; height:88px; font-size:2rem; border-color: var(--crimson); background: rgba(110,10,29,.6); }

.pause-overlay{
  position:absolute; inset:0; z-index:10; display:grid; place-items:center;
  background: rgba(10,6,6,.72); backdrop-filter: blur(4px);
}
.pause-overlay[hidden]{ display:none; }
.pause-box{ display:flex; flex-direction:column; align-items:center; gap:.9rem; text-align:center; }

@media (hover:none) and (pointer:coarse){
  .touch-controls{ display:flex; }
  .hint-desktop{ display:none !important; }
  .hint-touch{ display:flex !important; }
}

/* ---------------- 7. GAME OVER ---------------- */
.gameover{ display:grid; grid-template-columns: 1fr 1fr; gap:3rem; align-items:center; max-width: 1000px; }
.go-main{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.go-main .title-huge{ font-size: clamp(2.2rem, 5.5vw, 3.8rem); margin-bottom:1rem; }
.go-portrait{ position:relative; width:200px; height:200px; border:2px solid var(--gold); box-shadow: 0 16px 50px rgba(0,0,0,.55); overflow:hidden; }
.go-portrait img{ width:100%; height:100%; display:block; }
.gameover-id{ font-family: var(--serif); color: var(--washi); margin:1rem 0 .3rem; }
.go-rank{ color: var(--washi-dim); margin:0 0 1rem; font-size:.95rem; }
.go-rank i{ font-style:normal; font-family: var(--serif); color: var(--crimson); font-size:1.3rem; margin-right:.3rem; }
.gameover-score-label{ color: var(--washi-dim); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin:0; }
.gameover-score{ font-family: var(--serif); font-size: clamp(2.6rem, 7vw, 4rem); color: var(--gold); margin:0 0 1rem; text-shadow: 0 0 30px rgba(209,168,80,.35); line-height:1.1; }
.go-stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.5rem; width:100%; max-width:440px; }
.go-stats div{ border:1px solid var(--line); padding:.55rem .3rem; display:flex; flex-direction:column; }
.go-stats b{ font-family: var(--serif); font-size:1.2rem; color: var(--washi); }
.go-stats span{ font-size:.68rem; color: var(--washi-dim); }

.board-title{ font-family: var(--serif); font-weight:600; font-size:1.3rem; margin:0 0 .9rem; display:flex; justify-content:space-between; align-items:baseline; }
.board-title span{ color: var(--crimson); font-size:1rem; }
.board{ list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.45rem; }
.board li{
  display:grid; grid-template-columns: 1.8rem 44px 1fr auto; align-items:center; gap:.7rem;
  padding:.45rem .7rem; background: var(--ink-soft); border:1px solid var(--steel);
}
.board li.is-me{ border-color: var(--gold); box-shadow: 0 0 22px rgba(209,168,80,.2); }
.board li.empty{ display:block; color: var(--washi-dim); text-align:center; }
.board .pos{ font-family: var(--serif); color: var(--gold); font-size:1.1rem; text-align:center; }
.board li:nth-child(1) .pos{ color:#FFD86B; }
.board img{ width:44px; height:44px; object-fit:cover; }
.board .who{ display:flex; flex-direction:column; min-width:0; }
.board .who b{ font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board .who small{ font-size:.72rem; color: var(--washi-dim); }
.board .pts{ font-family: var(--serif); color: var(--gold); font-size:1.15rem; }
.go-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

@media (max-width: 860px){
  .gameover{ grid-template-columns: 1fr; gap:2rem; }
  .go-side{ max-width:480px; margin:0 auto; width:100%; }
  .go-actions{ justify-content:center; }
  .go-stats{ grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}