:root{
  --ink:#0b0908;
  --ink-2:#13100e;
  --ink-3:#1c1815;
  --paper:#f6ecdb;
  --paper-dim:#c9bda9;
  --shu:#e02b3c;
  --shu-deep:#8f1220;
  --gold:#d9b26b;
  --jade:#57b98a;
  --line:rgba(246,236,219,.12);
  --glass:rgba(255,255,255,.045);
  --font-display:"Reem Kufi",system-ui,sans-serif;
  --font-body:"Tajawal",system-ui,sans-serif;
  --r-lg:26px;
  --r-md:16px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.85);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(120% 90% at 50% -10%, #241a16 0%, transparent 55%),
    radial-gradient(80% 60% at 85% 110%, rgba(224,43,60,.16) 0%, transparent 60%),
    var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}
.app{
  position:relative;
  overflow:hidden;
  height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(10px,1.6vw,20px);
  gap:clamp(8px,1.2vw,14px);
  isolation:isolate;
}
.sun{
  position:absolute;
  top:-16vh; left:-8vw;
  width:min(56vh,520px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(224,43,60,.34), rgba(143,18,32,.14) 60%, transparent 72%);
  filter:blur(6px);
  z-index:-2;
  pointer-events:none;
}
.grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) .5px, transparent .6px);
  background-size:3px 3px;
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 85%);
}

/* ---------- HUD ---------- */
.hud{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px clamp(12px,2vw,22px);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:relative; z-index:5;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-kanji{
  display:grid; place-items:center;
  width:42px; height:42px; flex:0 0 auto;
  border-radius:12px;
  background:linear-gradient(150deg,var(--shu),var(--shu-deep));
  color:#fff; font-family:var(--font-display); font-size:24px; line-height:1;
  box-shadow:0 10px 24px -10px rgba(224,43,60,.9), inset 0 0 0 1px rgba(255,255,255,.18);
}
.brand-text{display:flex; flex-direction:column; line-height:1.05; min-width:0}
.brand-text strong{font-family:var(--font-display); font-size:clamp(15px,2.1vw,20px); letter-spacing:.2px; white-space:nowrap}
.brand-text small{font-size:9px; letter-spacing:.32em; color:var(--paper-dim); opacity:.75; direction:ltr; text-align:right; white-space:nowrap}
.stats{display:flex; align-items:center; gap:clamp(8px,1.6vw,20px)}
.stat{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:52px}
.stat-label{font-size:10px; letter-spacing:.16em; color:var(--paper-dim); text-transform:uppercase}
.stat-value{font-family:var(--font-display); font-size:clamp(17px,2.4vw,24px); font-variant-numeric:tabular-nums; line-height:1.1}
.stat-value.pop{animation:pop .32s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.28); color:#fff}100%{transform:scale(1)}}
.stat-mid{border-inline:1px solid var(--line); padding-inline:clamp(8px,1.6vw,18px)}

.lives{display:flex; gap:5px; margin-top:2px}
.lives > *{width:15px; height:15px; color:var(--shu); transition:transform .2s ease, opacity .25s ease, color .25s ease}
.lives > .lost{color:rgba(246,236,219,.18); transform:scale(.82)}
.lives > .beat{animation:beat .45s ease}
[hidden]{display:none !important}
.clock{display:inline-flex; align-items:center; gap:5px; color:var(--paper); font-variant-numeric:tabular-nums}
.clock svg{width:14px; height:14px; color:var(--gold); stroke-width:2}
.clock b{font-family:var(--font-display); font-size:clamp(16px,2.2vw,21px); line-height:1}
.clock.warn{color:#ff6b78; animation:warnPulse 1s ease-in-out infinite}
@keyframes warnPulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes beat{0%,100%{transform:scale(1)}35%{transform:scale(1.35)}}
.tools{display:flex; gap:6px}
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:11px; cursor:pointer;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--paper); transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.icon-btn:hover{transform:translateY(-2px); background:rgba(224,43,60,.16); border-color:rgba(224,43,60,.45); color:#fff}
.icon-btn:active{transform:translateY(0) scale(.96)}
.icon-btn.is-off{color:rgba(246,236,219,.35)}
.icon-btn svg{width:17px; height:17px; stroke-width:1.9}
.icon-btn .ico{display:grid; place-items:center}
.icon-btn .ico-off{display:none}
.icon-btn.is-off .ico-on{display:none}
.icon-btn.is-off .ico-off{display:grid}

/* ---------- Stage ---------- */
.stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(60% 50% at 50% 115%, rgba(224,43,60,.14), transparent 70%),
    linear-gradient(180deg,#100d0c 0%,#0a0807 100%);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  touch-action:none;
  cursor:crosshair;
}
.stage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 120px 30px rgba(0,0,0,.55);
}
#game{display:block; width:100%; height:100%}
.flash{position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.9), rgba(224,43,60,.6) 45%, transparent 72%)}
.flash.fire{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

.overlay{
  position:absolute; inset:0; z-index:4;
  display:grid; place-items:center;
  padding:clamp(12px,3vw,30px);
  background:radial-gradient(circle at 50% 45%, rgba(8,7,6,.55), rgba(8,7,6,.88));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease;
  overflow:auto;
}
.overlay.is-visible{opacity:1; visibility:visible}
.panel{
  position:relative;
  width:min(660px,100%);
  padding:clamp(20px,3.6vw,38px);
  border-radius:calc(var(--r-lg) - 4px);
  border:1px solid rgba(217,178,107,.24);
  background:
    linear-gradient(165deg, rgba(28,24,21,.96), rgba(14,12,11,.97));
  box-shadow:0 30px 80px -30px #000, inset 0 1px 0 rgba(255,255,255,.07);
  animation:fadeUp .5s cubic-bezier(.2,.8,.3,1) both;
}
.panel-sm{width:min(470px,100%); text-align:center}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px) scale(.985)}to{opacity:1; transform:none}}

.panel-kanji{
  position:absolute; top:-4px; inset-inline-end:clamp(10px,3vw,26px);
  font-family:var(--font-display); font-size:clamp(58px,10vw,94px); line-height:1;
  color:rgba(224,43,60,.16); pointer-events:none; user-select:none;
  writing-mode:vertical-rl; letter-spacing:.05em;
}
.eyebrow{
  margin:0 0 8px; font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.panel h1, .panel h2{
  margin:0 0 10px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(24px,4.4vw,40px); line-height:1.2; letter-spacing:-.2px;
}
.panel-sm h2{font-size:clamp(21px,3.4vw,30px)}
.lede{margin:0 0 20px; color:var(--paper-dim); font-size:clamp(13px,1.7vw,15px); line-height:1.75; max-width:46ch}
.panel-sm .lede{margin-inline:auto}

.modes{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px}
.mode-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:16px 16px 14px; border-radius:15px; cursor:pointer; text-align:start;
  border:1px solid var(--line); background:rgba(255,255,255,.035); color:var(--paper);
  font-family:inherit; transition:transform .2s cubic-bezier(.2,.8,.3,1), background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mode-card:hover{
  transform:translateY(-3px);
  border-color:rgba(224,43,60,.55);
  background:linear-gradient(160deg,rgba(224,43,60,.22),rgba(224,43,60,.05));
  box-shadow:0 16px 34px -18px rgba(224,43,60,.8);
}
.mode-card:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.mode-card svg{width:19px; height:19px; color:var(--shu); margin-bottom:4px; stroke-width:1.9}
.mode-card:hover svg{color:#ff6b78}
.mode-title{font-family:var(--font-display); font-size:17px}
.mode-sub{font-size:11.5px; color:var(--paper-dim)}
.mode-best{font-size:11px; color:var(--gold); opacity:.9; margin-top:4px; font-variant-numeric:tabular-nums}

.hints{list-style:none; margin:0; padding:14px 0 0; border-top:1px dashed var(--line); display:grid; gap:8px}
.hints li{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--paper-dim)}
.hints svg{width:15px; height:15px; color:var(--gold); flex:0 0 auto; stroke-width:1.8}

.row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:13px; cursor:pointer;
  font-family:var(--font-body); font-weight:700; font-size:14.5px;
  border:1px solid transparent; color:#fff;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn svg{width:16px; height:16px; stroke-width:2}
.btn-primary{
  background:linear-gradient(150deg,#ef3a4b,var(--shu-deep));
  box-shadow:0 16px 34px -16px rgba(224,43,60,.95), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 40px -16px rgba(224,43,60,1)}
.btn-ghost{background:rgba(255,255,255,.05); border-color:var(--line); color:var(--paper)}
.btn-ghost:hover{transform:translateY(-2px); background:rgba(255,255,255,.1); border-color:rgba(246,236,219,.3)}
.btn:active{transform:translateY(0) scale(.97)}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.result{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 6px}
.result > div{
  display:flex; flex-direction:column; gap:4px; padding:12px 6px;
  border-radius:13px; background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.result-label{font-size:10.5px; letter-spacing:.12em; color:var(--paper-dim)}
.result strong{font-family:var(--font-display); font-size:clamp(18px,3vw,25px); font-variant-numeric:tabular-nums}
.badge{
  display:inline-flex; align-items:center; gap:6px; margin:12px 0 0;
  padding:7px 13px; border-radius:999px; font-size:12px; font-weight:700;
  color:#0e0b0a; background:linear-gradient(140deg,var(--gold),#f0d9a8);
  box-shadow:0 10px 26px -12px rgba(217,178,107,.9);
}
.badge svg{width:14px; height:14px; stroke-width:2.2}
.badge[hidden]{display:none}
.foot{text-align:center; font-size:11px; color:rgba(201,189,169,.55); letter-spacing:.02em}

@media (max-width:640px){
  .hud{padding:8px 10px; gap:8px}
  .brand-kanji{width:36px; height:36px; font-size:20px; border-radius:10px}
  .brand-text small{display:none}
  .stat{min-width:44px}
  .stat-label{font-size:9px}
  .icon-btn{width:34px; height:34px}
  .lives i{width:13px; height:13px}
  .modes{grid-template-columns:1fr}
  .panel-kanji{font-size:70px; opacity:.28}
  .result{gap:6px}
  .foot{display:none}
}
@media (max-width:380px){
  .brand-text strong{font-size:13px}
  .stats{gap:6px}
  .stat-mid{padding-inline:6px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
@media (max-width:420px){
  .brand-text{display:none}
  .brand{gap:0}
}