@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Tajawal:wght@700;900&display=swap');
:root{
  --bg:#020609; --cyan:#00e5ff; --green:#00ff88; --red:#ff2255;
  --gold:#ffc040; --text:#9dd7e6;
  --mono:'Share Tech Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:var(--mono);width:100vw;height:100vh;overflow:hidden;font-size:18px;}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.07) 3px,rgba(0,0,0,0.07) 4px);}
#cv3{position:fixed;inset:0;width:100%;height:100%;}

#s-title{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;background:rgba(2,6,9,0.92);}
#rain{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0.18;}
.title-main{font-family:'Tajawal',sans-serif;font-size:clamp(2.6rem,8vw,5.4rem);font-weight:900;color:var(--cyan);letter-spacing:0.08em;position:relative;z-index:1;text-shadow:0 0 30px rgba(0,229,255,0.6),0 0 80px rgba(0,229,255,0.2);animation:pulse 3s ease-in-out infinite;}
@keyframes pulse{0%,100%{text-shadow:0 0 20px rgba(0,229,255,0.5);}50%{text-shadow:0 0 55px rgba(0,229,255,0.9),0 0 120px rgba(0,229,255,0.3);}}
.title-story{font-size:1.2rem;color:var(--text);max-width:760px;text-align:center;line-height:2;margin-bottom:1.8rem;position:relative;z-index:1;direction:rtl;}
.menu{display:flex;flex-direction:column;gap:0.7rem;width:320px;position:relative;z-index:1;}
.language-switch{display:grid;grid-template-columns:1fr 1fr;gap:0.45rem;width:100%;}
.lang-btn{background:rgba(0,229,255,0.04);border:1px solid rgba(0,229,255,0.22);color:rgba(157,215,230,0.82);font-family:var(--mono);font-size:0.92rem;padding:0.62rem 0.7rem;cursor:pointer;transition:all 0.15s;border-radius:8px;}
.lang-btn:hover{border-color:rgba(0,229,255,0.42);color:var(--cyan);}
.lang-btn.active{border-color:rgba(255,192,64,0.62);background:rgba(255,192,64,0.1);color:var(--gold);box-shadow:0 0 14px rgba(255,192,64,0.12);}
.menu-note{font-size:0.92rem;line-height:1.8;text-align:center;color:rgba(157,215,230,0.72);padding:0.2rem 0.4rem 0;}
.mbtn{background:transparent;border:1px solid rgba(0,229,255,0.35);color:var(--cyan);font-family:var(--mono);font-size:1.18rem;padding:0.95rem 1rem;cursor:pointer;text-align:center;direction:rtl;transition:all 0.15s;letter-spacing:0.05em;}
.mbtn:hover{background:rgba(0,229,255,0.08);border-color:var(--cyan);box-shadow:0 0 12px rgba(0,229,255,0.2);}
html[dir="ltr"] .title-story,
html[dir="ltr"] .mbtn,
html[dir="ltr"] .cp-hint,
html[dir="ltr"] .cp-feedback,
html[dir="ltr"] .modal-copy,
html[dir="ltr"] .result-box,
html[dir="ltr"] #engage-screen,
html[dir="ltr"] #status-beat{direction:ltr;}
html[dir="ltr"] .title-story,
html[dir="ltr"] .menu-note,
html[dir="ltr"] .battle-sub,
html[dir="ltr"] .battle-title,
html[dir="ltr"] .cp-hint,
html[dir="ltr"] .cp-feedback,
html[dir="ltr"] .modal-card,
html[dir="ltr"] .result-box{text-align:center;}
html[dir="ltr"] .room-brief-text,
html[dir="ltr"] .explain-text,
html[dir="ltr"] .modal-copy,
html[dir="ltr"] .chat-body{text-align:left;}
html[dir="ltr"] .btn--right{align-self:flex-start;}
html[dir="ltr"] .hud-pill{border-left:0;border-right:1px solid rgba(0,229,255,0.1);}
html[dir="ltr"] .hud-control-btn{margin-right:0;margin-left:0.55rem;}
html[dir="ltr"] .hud-pill--push{margin-right:0;margin-left:auto;}

#hud{position:fixed;inset:0;display:none;pointer-events:none;z-index:50;flex-direction:column;}
.hud-top{display:flex;align-items:stretch;background:rgba(2,6,9,0.88);border-bottom:1px solid rgba(0,229,255,0.15);backdrop-filter:blur(4px);pointer-events:all;padding:0 0.4rem;}
.hud-pill{display:flex;align-items:center;gap:0.5rem;padding:0.95rem 1.2rem;border-left:1px solid rgba(0,229,255,0.1);}
.hud-pill[hidden]{display:none!important;}
.hud-pill.hud-pill--key{
  border-color:rgba(255,192,64,0.2);
  background:rgba(255,192,64,0.035);
}
.hud-control-btn{
  margin-right:0.55rem; align-self:center;
  padding:0.68rem 0.92rem; min-width:132px;
  border:1px solid rgba(0,229,255,0.22); border-radius:12px;
  background:rgba(0,229,255,0.07); color:var(--cyan);
  font-family:var(--mono); font-size:0.92rem; cursor:pointer; pointer-events:all;
  transition:all 0.15s ease;
}
.hud-control-btn:hover{background:rgba(0,229,255,0.16);border-color:rgba(0,229,255,0.46);}
.hlabel{font-size:0.85rem;color:rgba(0,229,255,0.6);text-transform:uppercase;letter-spacing:0.05em;}
.hval{font-size:1.55rem;color:var(--cyan);}
.hval.red{color:var(--red);} .hval.green{color:var(--green);} .hval.gold{color:var(--gold);}
.hp-wrap{width:200px;background:rgba(0,229,255,0.08);border:1px solid rgba(0,229,255,0.2);height:12px;}
.hp-fill{height:100%;background:var(--green);transition:width 0.4s,background 0.3s;}
.hp-fill.mid{background:var(--gold);} .hp-fill.low{background:var(--red);}
.hp-float{
  min-height:16px;
  font-size:0.76rem;
  line-height:1;
  text-align:center;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity 0.16s ease, transform 0.16s ease;
}
.hp-float.show{opacity:1;transform:translateY(0);}
.hp-float.gain{color:var(--green);}
.hp-float.loss{color:var(--red);}
.hud-bot{
  position:fixed; top:86px; right:14px;
  display:flex; gap:0;
  background:rgba(2,6,9,0.9);
  border:1px solid rgba(0,229,255,0.2);
  backdrop-filter:blur(6px);
  width:clamp(184px,20vw,228px); max-height:none;
  margin:0; pointer-events:all; border-radius:10px; overflow:hidden;
}

#minimap-wrap{padding:0.6rem;width:100%;}
#minimap{display:block;width:100%;height:auto;aspect-ratio:1/1;image-rendering:pixelated;}
.cp-header{display:flex;align-items:center;justify-content:space-between;}
.cp-badge{font-size:0.95rem;color:var(--bg);background:var(--cyan);padding:5px 14px;letter-spacing:0.08em;font-weight:bold;}
.cp-encoded{background:rgba(0,229,255,0.04);border:1px solid rgba(0,229,255,0.2);padding:0.8rem;font-size:clamp(1.3rem,2.8vw,1.9rem);color:var(--cyan);text-align:center;letter-spacing:0.25em;direction:ltr;line-height:1.8;}
.cp-hint{font-size:1rem;color:var(--gold);direction:rtl;text-align:center;}
.cp-input{background:rgba(0,0,0,0.45);border:1px solid rgba(0,229,255,0.4);color:var(--cyan);font-family:var(--mono);font-size:1.2rem;padding:0.7rem 0.8rem;text-align:center;direction:ltr;letter-spacing:0.2em;outline:none;}
.cp-input:focus{border-color:var(--cyan);box-shadow:0 0 10px rgba(0,229,255,0.2);}
.cp-action{display:flex;gap:0.6rem;justify-content:center;}
.cp-btn{background:rgba(0,229,255,0.12);border:1px solid rgba(0,229,255,0.45);color:var(--cyan);font-family:var(--mono);font-size:1.1rem;padding:0.6rem 1.2rem;cursor:pointer;transition:all 0.15s;min-width:120px;}
.cp-btn:hover{background:rgba(0,229,255,0.22);}
.cp-feedback{font-size:1rem;direction:rtl;text-align:center;min-height:24px;}
.cp-feedback.ok{color:var(--green);} .cp-feedback.bad{color:var(--red);} .cp-feedback.hint{color:var(--gold);}

.caesar-table{background:rgba(0,229,255,0.03);border:1px solid rgba(0,229,255,0.15);padding:0.65rem 0.75rem;overflow-x:auto;}
.ct-row{display:flex;gap:3px;direction:ltr;justify-content:center;flex-wrap:nowrap;}
.ct-row + .ct-row{margin-top:0.35rem;}
.ct-row--atbash{margin-top:0.6rem;}
.ct-cell{min-width:30px;width:30px;text-align:center;font-size:0.94rem;padding:5px 2px;border-radius:6px;}
.ct-cell.odd{color:rgba(0,229,255,0.95);background:rgba(0,229,255,0.08);}
.ct-cell.even{color:rgba(255,192,64,0.98);background:rgba(255,192,64,0.08);}
.ct-row--atbash .ct-cell.odd{color:rgba(0,255,170,0.96);background:rgba(0,255,170,0.1);}
.ct-row--atbash .ct-cell.even{color:rgba(255,104,138,0.98);background:rgba(255,104,138,0.1);}

#s-over,#s-win{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:200;background:rgba(2,6,9,0.97);}
.end-title{font-family:'Tajawal',sans-serif;font-size:clamp(2rem,7vw,3.8rem);font-weight:900;margin-bottom:1rem;}
.end-title.dead{color:var(--red);text-shadow:0 0 30px rgba(255,34,85,0.5);}
.end-title.win{color:var(--cyan);text-shadow:0 0 40px rgba(0,229,255,0.6);}
.result-box{border:1px solid rgba(0,229,255,0.2);padding:1rem 2rem;font-size:1.02rem;line-height:2.2;color:var(--text);text-align:center;margin-bottom:1.2rem;}
.result-box span{color:var(--cyan);}

#battle-screen{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:180;
  background:rgba(0,0,0,0.72);backdrop-filter:blur(3px);
}
#engage-screen,
#status-beat{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity 0.15s ease;direction:rtl;
}
#engage-screen{z-index:168;background:radial-gradient(circle at center,rgba(255,34,85,0.16),rgba(2,6,9,0.05) 40%,rgba(2,6,9,0));}
#status-beat{z-index:210;background:radial-gradient(circle at center,rgba(0,255,136,0.1),rgba(2,6,9,0.02) 46%,rgba(2,6,9,0));}
#engage-screen.show,
#status-beat.show{display:flex;opacity:1;}
.engage-card,
.status-card{
  min-width:min(520px,86vw);max-width:90vw;border-radius:18px;padding:1rem 1.35rem;
  border:1px solid rgba(0,229,255,0.24);background:rgba(2,10,16,0.92);
  box-shadow:0 16px 40px rgba(0,0,0,0.34);
  transform:translateY(18px) scale(0.98);opacity:0;
  transition:transform 0.2s ease,opacity 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;
}
#engage-screen.show .engage-card,
#status-beat.show .status-card{transform:translateY(0) scale(1);opacity:1;}
.engage-card{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-color:rgba(255,34,85,0.36);box-shadow:0 0 30px rgba(255,34,85,0.16);
}
.engage-card.key{border-color:rgba(255,192,64,0.44);box-shadow:0 0 30px rgba(255,192,64,0.18);}
.engage-copy{display:flex;flex-direction:column;gap:0.3rem;}
.engage-tag{font-size:0.76rem;letter-spacing:0.28em;color:rgba(255,34,85,0.7);text-transform:uppercase;}
.engage-card.key .engage-tag{color:rgba(255,192,64,0.82);}
.engage-title{font-family:'Tajawal',sans-serif;font-size:clamp(1.35rem,3.5vw,2rem);color:#ffe6ec;}
.engage-card.key .engage-title{color:#fff0c4;}
.engage-sub{font-size:0.92rem;line-height:1.7;color:rgba(157,215,230,0.9);}
.engage-piece{
  min-width:110px;padding:0.75rem 0.9rem;border-radius:14px;text-align:center;direction:ltr;
  border:1px solid rgba(0,229,255,0.22);background:rgba(0,229,255,0.07);color:var(--cyan);
  letter-spacing:0.08em;font-size:1.02rem;
}
.status-card{text-align:center;}
.status-card.ok{border-color:rgba(0,255,136,0.34);box-shadow:0 0 26px rgba(0,255,136,0.16);}
.status-card.gold{border-color:rgba(255,192,64,0.38);box-shadow:0 0 26px rgba(255,192,64,0.18);}
.status-card.clear{border-color:rgba(0,229,255,0.34);box-shadow:0 0 26px rgba(0,229,255,0.18);}
.status-tag{font-size:0.78rem;letter-spacing:0.22em;color:rgba(0,255,136,0.72);text-transform:uppercase;}
.status-card.gold .status-tag{color:rgba(255,192,64,0.82);}
.status-card.clear .status-tag{color:rgba(0,229,255,0.82);}
.status-title{font-family:'Tajawal',sans-serif;font-size:clamp(1.3rem,3.4vw,1.95rem);color:#e7fff5;margin-top:0.28rem;}
.status-card.gold .status-title{color:#fff1ca;}
.status-card.clear .status-title{color:#dffcff;}
.status-sub{font-size:0.95rem;line-height:1.75;color:rgba(157,215,230,0.92);margin-top:0.35rem;}
.battle-card{
  width:min(900px,92vw);background:rgba(2,10,16,0.96);border:2px solid rgba(0,229,255,0.3);
  padding:1.3rem;border-radius:12px;display:flex;flex-direction:column;gap:0.75rem;
}
.battle-card.damage-shake{animation:battleWrongShake 0.34s ease;border-color:rgba(255,34,85,0.82);box-shadow:0 0 34px rgba(255,34,85,0.28),0 18px 44px rgba(0,0,0,0.34);}
#hud.damage-flash .hud-pill--stack{animation:hpDamagePulse 0.45s ease;}
@keyframes battleWrongShake{
  0%,100%{transform:translateX(0);}
  16%{transform:translateX(-12px);}
  32%{transform:translateX(10px);}
  48%{transform:translateX(-8px);}
  64%{transform:translateX(6px);}
  80%{transform:translateX(-3px);}
}
@keyframes hpDamagePulse{
  0%,100%{box-shadow:none;border-color:rgba(0,229,255,0.08);}
  35%{box-shadow:0 0 22px rgba(255,34,85,0.42);border-color:rgba(255,34,85,0.66);background:rgba(255,34,85,0.1);}
}
.battle-title{font-size:1.35rem;color:var(--red);text-align:center;}
.battle-sub{font-size:1rem;color:rgba(0,229,255,0.7);text-align:center;}
.battle-status{display:grid;grid-template-columns:1.35fr 1fr;gap:0.75rem;}
.battle-panel-block{background:rgba(0,229,255,0.05);border:1px solid rgba(0,229,255,0.18);border-radius:10px;padding:0.8rem;}
.battle-hp-row{display:flex;align-items:center;gap:0.7rem;margin-top:0.4rem;}
.battle-hpbar{flex:1;height:14px;background:rgba(0,229,255,0.08);border:1px solid rgba(0,229,255,0.22);}
.battle-hp-value{min-width:78px;text-align:center;color:var(--cyan);font-size:0.95rem;}
.battle-chip-row{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:0.7rem;}
.battle-chip{padding:0.34rem 0.55rem;border:1px solid rgba(0,229,255,0.24);background:rgba(0,229,255,0.08);color:var(--cyan);font-size:0.78rem;}
.battle-chip.warn{color:var(--gold);border-color:rgba(255,192,64,0.28);background:rgba(255,192,64,0.08);}
.battle-chip.dmg{color:var(--red);border-color:rgba(255,34,85,0.28);background:rgba(255,34,85,0.08);}
.battle-chip.ok{color:var(--green);border-color:rgba(0,255,136,0.28);background:rgba(0,255,136,0.08);}
.battle-meta{display:flex;flex-direction:column;justify-content:center;gap:0.55rem;}
.battle-subtle{font-size:0.92rem;color:rgba(157,215,230,0.9);line-height:1.7;text-align:center;}
.cp-title{font-size:1.05rem;color:var(--cyan);letter-spacing:0.06em;text-transform:uppercase;}
.cp-brief{background:rgba(0,229,255,0.04);border:1px solid rgba(0,229,255,0.18);padding:0.8rem;line-height:1.75;color:var(--text);}
.cp-artifact-text{background:rgba(0,229,255,0.04);border:1px solid rgba(0,229,255,0.18);padding:0.85rem;line-height:1.8;color:var(--text);direction:ltr;text-align:left;font-family:var(--mono);}
.timer-pill{display:inline-flex;align-items:center;gap:0.4rem;padding:0.35rem 0.7rem;border-radius:999px;border:1px solid rgba(255,192,64,0.28);background:rgba(255,192,64,0.08);color:var(--gold);font-size:0.84rem;letter-spacing:0.08em;text-transform:uppercase;}
.timer-pill strong{font-size:1rem;color:#fff6d8;}
.timer-pill.alert{border-color:rgba(255,34,85,0.35);background:rgba(255,34,85,0.1);color:#ffd7df;}
.battle-detail-stack{display:flex;flex-direction:column;gap:0.55rem;margin-top:0.8rem;}
.battle-detail-row{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.5rem 0.65rem;border:1px solid rgba(0,229,255,0.14);border-radius:10px;background:rgba(0,229,255,0.03);}
.battle-detail-label{font-size:0.8rem;color:rgba(0,229,255,0.58);}
.battle-detail-value{font-size:0.92rem;color:var(--cyan);direction:ltr;}
.battle-detail-value.ok{color:var(--green);}
.battle-detail-value.warn{color:var(--gold);}
.battle-intel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.55rem;width:100%;}
.battle-intel-block{background:rgba(0,229,255,0.05);border:1px solid rgba(0,229,255,0.18);border-radius:10px;padding:0.7rem;text-align:center;}
.battle-intel-value{margin-top:0.35rem;color:var(--cyan);font-size:0.95rem;direction:ltr;letter-spacing:0.04em;word-break:break-word;}
.boss-strip{display:flex;flex-direction:column;gap:0.5rem;padding:0.75rem;border:1px solid rgba(255,34,85,0.2);border-radius:12px;background:rgba(255,34,85,0.06);}
.boss-kicker{font-size:0.82rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,192,64,0.85);text-align:center;}
.boss-title{font-family:'Tajawal',sans-serif;font-size:1.22rem;color:#ffe4eb;text-align:center;}
.boss-sub{font-size:0.9rem;color:rgba(157,215,230,0.9);line-height:1.7;text-align:center;}
.boss-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.55rem;}
.boss-meta{padding:0.6rem 0.7rem;border-radius:10px;border:1px solid rgba(0,229,255,0.16);background:rgba(0,229,255,0.04);text-align:center;}
.boss-meta-label{font-size:0.76rem;color:rgba(0,229,255,0.55);}
.boss-meta-value{margin-top:0.28rem;color:var(--cyan);font-size:0.95rem;}
.boss-segments{display:flex;justify-content:center;gap:0.32rem;direction:ltr;}
.boss-seg{width:24px;height:10px;border-radius:999px;border:1px solid rgba(255,34,85,0.3);background:rgba(255,34,85,0.08);}
.boss-seg.on{background:linear-gradient(90deg,#ff2255,#ff6f7f);box-shadow:0 0 12px rgba(255,34,85,0.26);}
.boss-seg.off{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);}

#s-explain{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:230;
  background:rgba(2,6,9,0.94); padding:1rem;
}
.modal-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:240;
  background:rgba(2,6,9,0.92); padding:1rem;
}
.modal-card{
  width:min(560px,94vw); border:1px solid rgba(0,229,255,0.24); border-radius:16px;
  background:rgba(2,10,16,0.98); box-shadow:0 18px 44px rgba(0,0,0,0.35);
  padding:1.15rem; display:flex; flex-direction:column; gap:0.85rem;
}
.modal-kicker{font-size:0.78rem;color:var(--gold);letter-spacing:0.22em;text-transform:uppercase;}
.modal-title{font-family:'Tajawal',sans-serif;font-size:clamp(1.35rem,4vw,2rem);color:var(--cyan);}
.modal-copy{color:var(--text);line-height:1.8;}
.modal-actions{display:flex;gap:0.65rem;justify-content:flex-end;flex-wrap:wrap;}
.modal-actions .mbtn{width:min(240px,100%);}
.room-brief-card{width:min(760px,95vw);}
.room-brief-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem;}
.room-brief-block{
  background:rgba(0,229,255,0.04);border:1px solid rgba(0,229,255,0.18);
  border-radius:12px;padding:0.8rem;
}
.room-brief-value{margin-top:0.3rem;color:var(--cyan);font-size:1rem;line-height:1.6;}
.room-brief-text{margin-top:0.3rem;color:var(--text);line-height:1.75;}

#room-travel{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:220;
  background:rgba(2,6,9,0.94);opacity:0;transition:opacity 0.18s ease;
  pointer-events:none;overflow:hidden;
}
#room-travel.show{display:flex;opacity:1;}
#travel-rain{position:absolute;inset:0;width:100%;height:100%;opacity:0.42;}
.travel-copy{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:0.45rem;
  text-align:center;padding:1.3rem 1.5rem;min-width:min(560px,90vw);
  border:1px solid rgba(0,255,136,0.18);border-radius:20px;
  background:rgba(2,14,12,0.55);box-shadow:0 18px 42px rgba(0,0,0,0.35);
  backdrop-filter:blur(5px);
}
.travel-kicker{font-size:0.76rem;letter-spacing:0.34em;color:rgba(0,255,136,0.72);text-transform:uppercase;}
.travel-title{font-family:'Tajawal',sans-serif;font-size:clamp(1.6rem,4.5vw,2.5rem);color:#e7fff5;}
.travel-sub{font-size:0.98rem;line-height:1.8;color:rgba(157,215,230,0.9);max-width:58ch;}

.cipher-grid-table{
  width:100%;border-collapse:collapse;table-layout:fixed;margin-top:0.45rem;
  direction:ltr;font-size:0.92rem;
}
.cipher-grid-table th,
.cipher-grid-table td{
  border:1px solid rgba(0,229,255,0.14);text-align:center;padding:0.42rem 0.35rem;
}
.cipher-grid-table th{
  color:rgba(0,229,255,0.78);background:rgba(0,229,255,0.05);font-size:0.78rem;letter-spacing:0.08em;
}
.cipher-grid-table td{
  color:var(--cyan);background:rgba(0,0,0,0.18);min-height:34px;
}
.cipher-grid-table td.empty{color:rgba(157,215,230,0.25);}
.cipher-grid-note{margin-top:0.45rem;font-size:0.82rem;line-height:1.7;color:rgba(157,215,230,0.84);}

#tutorial-chat{
  position:fixed; left:0; top:0; z-index:120; width:min(360px,32vw); display:none;
  pointer-events:none; transform:translate(-50%,-100%);
}
.chat-card{
  position:relative; border:1px solid rgba(0,229,255,0.22); border-radius:18px;
  background:rgba(3,12,18,0.94); box-shadow:0 14px 34px rgba(0,0,0,0.26);
  padding:0.95rem 1rem;
}
.chat-card::after{
  content:''; position:absolute; left:calc(50% - 10px); bottom:-12px; width:20px; height:20px;
  background:rgba(3,12,18,0.94); border-right:1px solid rgba(0,229,255,0.22); border-bottom:1px solid rgba(0,229,255,0.22);
  transform:rotate(45deg);
}
.chat-tag{font-size:0.74rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,192,64,0.86);}
.chat-title{margin-top:0.22rem;font-family:'Tajawal',sans-serif;font-size:1.22rem;color:var(--cyan);}
.chat-body{margin-top:0.35rem;color:var(--text);line-height:1.75;}

.explain-card{
  width:min(920px,95vw); max-height:92vh; overflow:auto;
  background:rgba(2,10,16,0.98); border:1px solid rgba(0,229,255,0.24); border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,0.35); padding:1.2rem; display:flex; flex-direction:column; gap:0.9rem;
}
.explain-eyebrow{font-size:0.8rem;color:var(--gold);letter-spacing:0.22em;text-transform:uppercase;}
.explain-title{font-family:'Tajawal',sans-serif;font-size:clamp(1.5rem,4vw,2.3rem);color:var(--cyan);}
.explain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem;}
.explain-block{background:rgba(0,229,255,0.04);border:1px solid rgba(0,229,255,0.18);border-radius:12px;padding:0.85rem;}
.explain-answer{font-size:1.3rem;color:var(--green);letter-spacing:0.08em;word-break:break-word;}
.explain-text{color:var(--text);line-height:1.75;}
.explain-summary{font-size:0.95rem;color:rgba(157,215,230,0.92);line-height:1.75;}
.hud-pill--stack{position:relative;flex-direction:column;gap:2px;justify-content:center;}
.hud-pill--push{margin-right:auto;}
.hval--compact{font-size:0.88rem;}
.hp-fill--full{width:100%;}
.btn--right{width:min(260px,100%);align-self:flex-end;}
.btn--end{width:240px;}
.cp-hint--meta{font-size:0.82rem;color:rgba(0,229,255,0.72);direction:ltr;}
.cp-hint--gold{font-size:0.82rem;color:rgba(255,192,64,0.8);}
.cp-hint--note{font-size:0.8rem;color:rgba(157,215,230,0.82);}

@media (max-width: 900px){
  .hud-bot{width:min(168px,54vw);right:8px;}
}
html, body{
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}
#cv3{touch-action:none;}
body.mobile-fit{
  position:fixed;
  inset:0;
  overflow:hidden;
  width:100vw;
  height:100dvh;
}
body.mobile-fit .hud-top,
body.mobile-fit .modal-card,
body.mobile-fit .battle-card,
body.mobile-fit .explain-card{
  -webkit-tap-highlight-color:transparent;
}

#mobile-controls{display:none;}

@media (max-width: 980px), (pointer: coarse){
  body{font-size:16px;}
  #mobile-controls{
    position:static;
    display:none;
    align-items:stretch;
    justify-content:stretch;
    align-self:stretch;
    padding:0;
    pointer-events:none;
    direction:rtl;
    min-width:0;
  }
  #mobile-controls.visible{display:flex;}
  .mobile-actions{pointer-events:none;display:flex;gap:4px;flex-direction:row;align-items:stretch;width:100%;}
  .mobile-btn{
    pointer-events:auto;
    flex:1 1 0;
    min-width:48px;
    height:auto;
    min-height:34px;
    padding:0 0.42rem;
    border:1px solid rgba(0,229,255,0.22);
    border-radius:10px;
    background:rgba(0,229,255,0.07);
    color:var(--cyan);
    font-family:var(--mono);
    font-size:0.72rem;
    font-weight:800;
    letter-spacing:0;
    box-shadow:none;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
  }
  .mobile-btn:active{
    transform:scale(0.94);
    background:rgba(0,229,255,0.2);
    border-color:rgba(0,229,255,0.9);
  }
  .mobile-action,
  .mobile-pause{width:auto;font-size:0.72rem;}

  .hud-top{
    min-height:0;
    display:grid;
    grid-template-columns:minmax(52px,0.62fr) minmax(78px,1fr) minmax(50px,0.56fr) minmax(104px,max-content);
    gap:4px;
    padding:calc(6px + env(safe-area-inset-top)) 6px 6px;
    background:linear-gradient(180deg,rgba(2,6,9,0.96),rgba(2,6,9,0.72));
  }
  .hud-pill--key{grid-column:1 / -1;grid-row:2;}
  .hud-pill--push{grid-column:3;grid-row:1;margin-right:0;}
  #mobile-controls{grid-column:4;grid-row:1;}
  .hud-pill{
    min-width:0;
    border-left:0;
    padding:4px 6px;
    gap:3px;
    background:rgba(0,229,255,0.04);
    border:1px solid rgba(0,229,255,0.08);
    border-radius:10px;
  }
  .hlabel{font-size:0.58rem;letter-spacing:0.03em;white-space:nowrap;}
  .hval{font-size:0.86rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hval--compact{font-size:0.78rem;}
  .hp-float{min-height:13px;font-size:0.62rem;}
  .hp-wrap{width:100%;height:9px;}
  .hud-control-btn{display:none;}
  .hud-bot{
    top:calc(112px + env(safe-area-inset-top));
    right:max(8px, env(safe-area-inset-right));
    width:118px;
    max-height:none;
    border-radius:12px;
    opacity:0.94;
  }
  #minimap-wrap{padding:0.42rem;}
  #minimap{width:100%;height:auto;}

  .title-main{font-size:clamp(2.05rem,10vw,4.2rem);}
  .title-story{max-width:88vw;font-size:0.92rem;line-height:1.75;margin-bottom:1.1rem;}
  .menu{width:min(320px,88vw);}
  .mbtn{min-height:48px;padding:0.78rem 0.9rem;}
  .lang-btn{min-height:42px;font-size:0.84rem;padding:0.55rem 0.5rem;}
  .menu-note{font-size:0.82rem;line-height:1.65;}

  .battle-card,
  .explain-card,
  .modal-card{
    width:94vw;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y:auto;
    padding:0.9rem;
    border-radius:16px;
  }
  .battle-status,
  .explain-grid,
  .room-brief-grid,
  .battle-intel-grid,
  .boss-meta-grid{grid-template-columns:1fr;}
  .battle-card{gap:0.55rem;}
  .battle-title{font-size:1.12rem;}
  .battle-sub{font-size:0.88rem;}
  .cp-encoded{font-size:clamp(1.14rem,4.8vw,1.34rem);letter-spacing:0.14em;padding:0.72rem 0.65rem;line-height:1.55;}
  .cp-artifact-text{font-size:0.96rem;line-height:1.75;}
  .explain-answer{font-size:clamp(1.34rem,5.6vw,1.64rem);}
  .cp-hint,.cp-feedback,.cp-brief,.explain-text,.modal-copy{font-size:0.88rem;line-height:1.65;}
  .cp-input{width:100%;font-size:1rem;min-height:46px;}
  .cp-action{flex-direction:column;gap:0.5rem;}
  .cp-btn{width:100%;min-height:48px;}
  .caesar-table{padding:0.55rem;overflow-x:visible;}
  .ct-row{
    display:grid;
    grid-template-columns:repeat(13,minmax(0,1fr));
    gap:4px;
    justify-content:stretch;
  }
  .ct-cell{
    min-width:0;
    width:auto;
    font-size:0.9rem;
    padding:0.45rem 0;
    border-radius:7px;
  }
  .cipher-grid-table{font-size:0.78rem;}
  .cipher-grid-table th,
  .cipher-grid-table td{padding:0.32rem 0.22rem;}

  #tutorial-chat{
    width:min(300px,78vw);
    z-index:130;
  }
  .chat-card{padding:0.72rem 0.8rem;border-radius:14px;}
  .chat-title{font-size:1rem;}
  .chat-body{font-size:0.82rem;line-height:1.55;}
}

@media (max-width: 760px) and (orientation: portrait){
  .hud-top{grid-template-columns:minmax(50px,0.6fr) minmax(76px,1fr) minmax(48px,0.55fr) minmax(104px,max-content);}
  .hud-bot{top:calc(112px + env(safe-area-inset-top));width:112px;}
  #minimap{width:100%;height:auto;}
  .mobile-btn{min-width:48px;min-height:34px;border-radius:10px;padding:0 0.38rem;}
}

@media (max-height: 520px) and (orientation: landscape){
  .hud-top{grid-template-columns:minmax(52px,0.68fr) minmax(74px,0.9fr) minmax(128px,1.2fr) minmax(50px,0.55fr) minmax(104px,max-content);padding:calc(4px + env(safe-area-inset-top)) 6px 4px;}
  .hud-pill--key{grid-column:auto;}
  .hud-pill--push{grid-column:auto;grid-row:auto;}
  #mobile-controls{grid-column:auto;grid-row:auto;}
  .hud-pill{padding:4px 6px;}
  .hlabel{font-size:0.52rem;}
  .hval{font-size:0.76rem;}
  .hp-wrap{height:7px;}
  .hp-float{min-height:10px;font-size:0.56rem;}
  .hud-bot{top:calc(48px + env(safe-area-inset-top));width:104px;}
  #minimap{width:100%;height:auto;}
  .mobile-btn{min-width:48px;min-height:30px;border-radius:9px;padding:0 0.36rem;}
  .mobile-action,.mobile-pause{font-size:0.74rem;}
}

html[dir="ltr"] #mobile-controls{direction:ltr;}
html[dir="ltr"] .mobile-actions{direction:ltr;}
html[dir="ltr"] body.mobile-fit .hud-pill--push{margin-left:0;}