/* ==== مغامرة النهر — styles ==== */
:root{
  --deep:#04182b;
  --water:#0b3c5c;
  --aqua:#57e0d0;
  --cyan:#48c9e8;
  --sand:#e8d9b5;
  --danger:#ff5d6c;
  --hp:#ff6b6b;
  --o2:#4fd6ff;
  --ink:#04212f;
  --glass:rgba(6,32,52,.62);
  --stroke:rgba(140,232,255,.22);
  --font:'Cairo',system-ui,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  background:
    radial-gradient(1200px 600px at 20% -10%, #12557a 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 110%, #0a2c46 0%, transparent 60%),
    #04121f;
  color:#eaf7ff;
  display:flex;align-items:center;justify-content:center;
  padding:12px;overflow-x:hidden;
}
.stage{
  position:relative;
  width:min(100%,1080px);
  aspect-ratio:16/9;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px var(--stroke);
  background:var(--deep);
  user-select:none;
}
canvas{display:block;width:100%;height:100%}
.hidden{display:none !important}

/* ==== HUD ==== */
.hud{position:absolute;inset:0;pointer-events:none;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gauge{
  display:flex;align-items:center;gap:8px;
  background:var(--glass);backdrop-filter:blur(10px);
  border:1px solid var(--stroke);border-radius:14px;
  padding:6px 10px;min-width:190px;
}
.gauge .lbl{font-size:12px;font-weight:700;opacity:.85}
.gauge .track{position:relative;flex:1;height:9px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.gauge .track i{position:absolute;inset:0 auto 0 0;width:100%;border-radius:99px;transition:width .12s linear}
.gauge.hp .track i{background:linear-gradient(90deg,#ff8a5b,var(--hp))}
.gauge.o2 .track i{background:linear-gradient(90deg,#8ef0ff,var(--o2))}
.gauge b{font-size:12px;min-width:38px;text-align:center;font-weight:800}
.gauge.hp.low .track i{animation:pulse .7s infinite}
@keyframes pulse{50%{opacity:.35}}
.stat{
  background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--stroke);
  border-radius:14px;padding:5px 12px;display:flex;flex-direction:column;align-items:center;line-height:1.05;
}
.stat b{font-size:16px;font-weight:900;color:#ffe08a}
.stat span{font-size:10px;opacity:.7}
.btns{margin-inline-start:auto;display:flex;gap:8px;pointer-events:auto}
.ibtn{
  width:36px;height:36px;border-radius:11px;cursor:pointer;color:#dff6ff;
  background:var(--glass);border:1px solid var(--stroke);
  display:grid;place-items:center;transition:transform .15s,background .15s;
}
.ibtn:hover{transform:translateY(-2px);background:rgba(20,70,105,.8)}
.ibtn.off{opacity:.45}
.river-progress{
  position:relative;height:14px;border-radius:99px;margin-top:2px;
  background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(8px);
  overflow:hidden;
}
.river-progress i{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,#2ea8d8,#57e0d0,#ffe08a);transition:width .2s linear}
.river-progress .pr-lbl{position:absolute;inset-inline-end:10px;top:-1px;font-size:9px;font-weight:800;letter-spacing:.4px;color:#eaf7ff;text-shadow:0 1px 3px #000}

.warn{
  align-self:center;margin-top:4px;font-weight:800;font-size:14px;color:#fff;
  background:rgba(255,60,80,.85);border:1px solid rgba(255,255,255,.35);
  padding:7px 16px;border-radius:99px;box-shadow:0 8px 24px rgba(255,0,40,.35);
  animation:blink .8s infinite;
}
@keyframes blink{50%{opacity:.45}}
.toast{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  background:rgba(4,24,40,.8);border:1px solid var(--stroke);color:#eaf7ff;
  padding:6px 14px;border-radius:99px;font-size:13px;font-weight:700;opacity:0;transition:opacity .3s
}
.toast.on{opacity:1}

/* ==== overlays ==== */
.overlay{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(700px 400px at 50% 40%,rgba(5,30,50,.55),rgba(2,12,22,.9));
  backdrop-filter:blur(7px)}
.screen{display:none;width:100%;height:100%;place-items:center;overflow:auto;padding:14px}
.screen.on{display:grid}
.panel{
  width:min(620px,94%);border-radius:20px;padding:20px 22px;text-align:center;
  background:linear-gradient(160deg,rgba(12,48,74,.92),rgba(5,24,40,.94));
  border:1px solid var(--stroke);
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  animation:fadeUp .45s cubic-bezier(.2,.8,.2,1);
}
.panel.slim{width:min(460px,94%)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.kicker{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--aqua);opacity:.9}
h1{font-size:clamp(26px,5vw,42px);font-weight:900;line-height:1.1;margin:4px 0 6px;
  background:linear-gradient(180deg,#fff,#8fe6ff 70%,#4fd6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(20px,3.6vw,28px);font-weight:900;margin-bottom:6px}
h2.bad{color:#ff9aa5}
h2.good{color:#8ff0c8}
.sub{font-size:13.5px;opacity:.82;line-height:1.7;margin-bottom:14px}

.rules{display:grid;gap:8px;text-align:right;margin-bottom:12px}
.rule{
  display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:13px;padding:9px 12px;transition:transform .18s,border-color .18s;
}
.rule:hover{transform:translateY(-2px);border-color:var(--stroke)}
.rule b{font-size:12.5px;color:var(--aqua);font-weight:800}
.rule span{font-size:12.5px;opacity:.85;line-height:1.6}
.keys{display:grid;gap:5px;font-size:11.5px;opacity:.8;margin-bottom:14px}
kbd{
  display:inline-block;min-width:20px;padding:2px 6px;margin:0 1px;border-radius:6px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  font-family:var(--font);font-size:11px;font-weight:700
}
.diffs{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.diff-btn{
  cursor:pointer;padding:7px 18px;border-radius:99px;font-family:var(--font);font-weight:800;font-size:13px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#dff6ff;
  transition:all .18s
}
.diff-btn:hover{transform:translateY(-2px)}
.diff-btn.on{background:linear-gradient(135deg,#1f9dc4,#57e0d0);color:#04212f;border-color:transparent;box-shadow:0 8px 20px rgba(87,224,208,.28)}
.cta{
  cursor:pointer;width:100%;padding:13px;border:none;border-radius:14px;font-family:var(--font);
  font-size:16px;font-weight:900;color:#03202c;
  background:linear-gradient(135deg,#7ef0d8,#3fc7ee 60%,#8fd8ff);
  box-shadow:0 12px 30px rgba(63,199,238,.35);transition:transform .16s,box-shadow .16s
}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(63,199,238,.45)}
.ghost{
  cursor:pointer;padding:12px 18px;border-radius:14px;font-family:var(--font);font-weight:800;font-size:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#dff6ff;transition:all .16s
}
.ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)}
.ghost.wide{width:100%;margin-top:8px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:12px 0}
.stats div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:10px;display:flex;flex-direction:column;gap:3px}
.stats span{font-size:11px;opacity:.7}
.stats b{font-size:18px;font-weight:900;color:#ffe08a}
.best{margin-top:10px;font-size:12px;opacity:.75}
.best b{color:#ffe08a}

/* ==== touch controls ==== */
.touch{position:absolute;inset:0;pointer-events:none}
.joy{
  position:absolute;bottom:18px;right:18px;width:104px;height:104px;border-radius:50%;
  background:rgba(6,32,52,.42);border:1px solid var(--stroke);backdrop-filter:blur(6px);
  pointer-events:auto;touch-action:none
}
.joy i{
  position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:linear-gradient(135deg,#8ef0ff,#3fc7ee);box-shadow:0 6px 16px rgba(0,0,0,.4)
}
.tbtns{position:absolute;bottom:22px;left:18px;display:flex;gap:12px;pointer-events:auto}
.tbtn{
  width:74px;height:74px;border-radius:50%;font-family:var(--font);font-weight:900;font-size:14px;
  border:1px solid rgba(255,255,255,.22);color:#04212f;touch-action:none;cursor:pointer
}
.tbtn.atk{background:linear-gradient(135deg,#ffe08a,#ffb347)}
.tbtn.dash{background:linear-gradient(135deg,#a9f7ff,#57e0d0)}
.tbtn:active{transform:scale(.94)}

@media (max-width:620px){
  .gauge{min-width:132px}
  .gauge .lbl{font-size:10px}
  .gauge b{min-width:30px;font-size:10px}
  .stat b{font-size:13px}
  .panel{padding:16px}
  .rule{grid-template-columns:60px 1fr}
}
@media (max-aspect-ratio:1/1){
  .stage{aspect-ratio:auto;height:min(78vh,72vw)}
}