:root{
  --ink:#050b09; --deep:#08130f; --moss:#12251c; --moss-2:#1b3a2b; --leaf:#3f7a52;
  --gold:#e8c46a; --gold-2:#ffe1a3; --amber:#f3a548; --violet:#9a7bff; --cyan:#6fe3d0;
  --parch:#f4e8cc; --parch-dim:#cdbf9d; --danger:#e0675c;
  --glass:rgba(10,24,19,.62); --line:rgba(232,196,106,.28); --line-soft:rgba(255,255,255,.09);
  --shadow:0 24px 60px -18px rgba(0,0,0,.8);
  --ui:"Cairo","Segoe UI",system-ui,sans-serif;
  --display:"Cairo",Georgia,serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#040a08;overflow:hidden;font-family:var(--ui);color:var(--parch);}
body{user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}
#stage{position:fixed;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#0b1a14,#030706 70%)}
#game{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.screen{position:absolute;inset:0;display:none;opacity:0;transition:opacity .5s ease}
.screen.show{display:flex;opacity:1}
.btn{
  font-family:var(--ui);font-size:clamp(15px,2.1vh,19px);font-weight:700;letter-spacing:.2px;
  padding:.85em 2.1em;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,background .22s,border-color .22s;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;position:relative;
}
.btn-gold{
  color:#241a06;background:linear-gradient(160deg,#ffe6ad,#e8c46a 42%,#c99a3d);
  border-color:rgba(255,240,200,.6);
  box-shadow:0 10px 30px -8px rgba(232,196,106,.55),inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(232,196,106,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-gold:active{transform:translateY(0) scale(.985)}
.btn-gold:disabled{opacity:.4;filter:grayscale(.5);box-shadow:none;cursor:default;transform:none}
.btn-ghost{color:var(--parch);background:rgba(255,255,255,.05);border-color:var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.link-btn{background:none;border:0;color:var(--parch-dim);font-family:var(--ui);font-size:14px;cursor:pointer;padding:6px 2px;transition:color .2s}
.link-btn:hover{color:var(--gold)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(232,196,106,.3);border-radius:9px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}
/* ---------- loading ---------- */
#screen-load{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 45%,#0d2018,#040a08 72%);z-index:60}
.load-wrap{text-align:center;display:grid;gap:14px;justify-items:center;animation:fadeUp .8s both}
.load-emblem{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);position:relative;
  background:radial-gradient(circle at 50% 45%,rgba(232,196,106,.35),transparent 62%);animation:pulse 2.4s infinite}
.load-emblem:after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(232,196,106,.45);animation:spin 9s linear infinite}
.load-title{font-size:clamp(22px,3.2vh,30px);font-weight:800;letter-spacing:.04em;color:var(--gold-2)}
.load-bar{width:min(280px,60vw);height:3px;background:rgba(255,255,255,.09);border-radius:9px;overflow:hidden}
.load-bar i{display:block;height:100%;width:5%;border-radius:9px;background:linear-gradient(90deg,#c99a3d,#ffe6ad);transition:width .35s ease}
.load-note{font-size:12.5px;color:var(--parch-dim);letter-spacing:.14em}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- intro ---------- */
#screen-intro{align-items:center;justify-content:center;z-index:40}
#screen-intro:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,transparent 8%,rgba(3,8,6,.35) 52%,rgba(2,5,4,.86) 100%)}
.intro-inner{position:relative;text-align:center;display:grid;justify-items:center;gap:clamp(6px,1.4vh,14px);padding:0 24px;
  animation:fadeUp 1.1s cubic-bezier(.2,.8,.2,1) both}
.intro-eyebrow{font-size:clamp(10px,1.5vh,12.5px);letter-spacing:.42em;color:rgba(232,196,106,.78);text-indent:.42em}
.intro-title{margin:0;line-height:.98;font-weight:900;
  font-size:clamp(38px,10.5vh,96px);letter-spacing:-.01em;
  background:linear-gradient(178deg,#fff8e6 6%,#ffe1a3 38%,#e0b160 62%,#a97a2c 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(232,196,106,.32)) drop-shadow(0 1px 0 rgba(0,0,0,.5));}
.intro-title em{font-style:normal;display:inline-block}
.intro-en{font-size:clamp(10px,1.6vh,13px);letter-spacing:.62em;text-indent:.62em;color:rgba(244,232,204,.55);margin-top:-4px}
.intro-tag{margin:2px 0 clamp(8px,2vh,18px);font-size:clamp(13px,1.9vh,16.5px);color:rgba(244,232,204,.78);font-weight:400;max-width:34ch;line-height:1.6}
.intro-inner .btn{min-width:min(290px,72vw);margin-top:2px}
.intro-foot{margin-top:clamp(6px,1.6vh,16px);display:flex;align-items:center;gap:10px;font-size:11.5px;color:rgba(244,232,204,.4);letter-spacing:.02em}
.intro-foot .dot{opacity:.4}
.intro-foot .link-btn{font-size:11.5px;color:rgba(244,232,204,.55)}
/* ---------- character select ---------- */
#screen-select{flex-direction:column;z-index:40;padding:clamp(12px,3vh,30px) clamp(14px,3vw,44px);
  background:radial-gradient(ellipse at 50% -10%,rgba(18,52,38,.9),rgba(4,10,8,.96) 60%),#040a08}
#screen-select:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 50% 120%,rgba(232,196,106,.16),transparent 55%)}
.sel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:relative;z-index:2}
.sel-head h2{margin:0;font-size:clamp(19px,3.3vh,30px);font-weight:800;
  background:linear-gradient(180deg,#fff7e4,#e8c46a);-webkit-background-clip:text;background-clip:text;color:transparent}
.sel-head p{margin:.35em 0 0;font-size:clamp(11px,1.6vh,13.5px);color:rgba(244,232,204,.55)}
.sel-grid{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:repeat(7,1fr);
  gap:clamp(6px,1.1vw,16px);align-items:center;margin:clamp(8px,2vh,20px) 0;min-height:0}
.card{position:relative;border-radius:18px;padding:0;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(28,60,46,.55),rgba(8,20,15,.85));
  cursor:pointer;overflow:hidden;transition:transform .38s cubic-bezier(.2,.9,.25,1),box-shadow .38s,border-color .3s,filter .35s;
  display:flex;flex-direction:column;align-items:center;justify-self:center;width:100%;max-width:190px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);
}
.card canvas{width:100%;height:auto;display:block;aspect-ratio:3/3.7;transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.card .card-name{position:absolute;bottom:0;left:0;right:0;padding:26px 6px 9px;font-size:clamp(12px,1.9vh,16px);
  font-weight:700;text-align:center;background:linear-gradient(180deg,transparent,rgba(3,10,7,.92) 62%);
  color:#f6ecd4;letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.9)}
.card .card-aura{position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,225,163,.28),transparent 62%)}
.card:hover{transform:translateY(-6px);border-color:rgba(232,196,106,.4);box-shadow:0 26px 50px -24px rgba(0,0,0,.95),0 0 0 1px rgba(232,196,106,.25)}
.card.sel{transform:translateY(-10px) scale(1.09);border-color:rgba(255,225,163,.85);z-index:5;
  box-shadow:0 0 0 1px rgba(255,225,163,.9),0 0 34px rgba(232,196,106,.45),0 34px 60px -22px rgba(0,0,0,1)}
.card.sel .card-aura{opacity:1}
.card.sel:after{content:"";position:absolute;inset:5px;border-radius:13px;border:1px solid rgba(255,225,163,.45);pointer-events:none}
.sel-grid.has-sel .card:not(.sel){filter:saturate(.55) brightness(.72)}
.sel-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px}
.sel-hint{font-size:clamp(11px,1.6vh,13.5px);color:rgba(244,232,204,.6)}
.sel-hint b{color:var(--gold-2);font-weight:700}
@media (max-width:900px){
  .sel-grid{grid-template-columns:repeat(4,1fr);overflow-y:auto;align-content:center;gap:8px}
  .sel-grid.has-sel .card:not(.sel){filter:saturate(.5) brightness(.6)}
  .sel-head p{display:none}
}
/* ---------- HUD ---------- */
.hud{position:absolute;inset:0;display:none;pointer-events:none;z-index:30}
.hud.show{display:block}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:clamp(8px,1.6vh,16px) clamp(10px,1.8vw,22px);
  pointer-events:none;background:linear-gradient(180deg,rgba(3,9,7,.72),transparent)}
.hud-zone{display:flex;flex-direction:column;gap:1px;padding:6px 16px 6px 14px;border-radius:12px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);min-width:104px}
.hud-k{font-size:9.5px;letter-spacing:.24em;color:rgba(232,196,106,.7)}
.hud-v{font-size:clamp(12px,1.8vh,15px);font-weight:700;color:#f7eed8}
.hud-quest{flex:1;font-size:clamp(11.5px,1.7vh,14px);color:rgba(244,232,204,.86);text-align:center;
  padding:7px 16px;border-radius:999px;background:rgba(6,18,13,.5);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(8px);max-width:min(620px,58vw);margin-inline:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-actions{display:flex;gap:7px;pointer-events:auto}
.hud-btn{width:clamp(32px,5.4vh,42px);height:clamp(32px,5.4vh,42px);border-radius:50%;border:1px solid var(--line);
  background:var(--glass);color:var(--parch);font-size:clamp(13px,2vh,16px);font-weight:700;cursor:pointer;
  backdrop-filter:blur(10px);display:grid;place-items:center;transition:.2s;font-family:var(--ui)}
.hud-btn:hover{background:rgba(232,196,106,.2);transform:translateY(-2px);color:#fff}
.bag-ico{width:15px;height:14px;border:1.6px solid currentColor;border-radius:3px 3px 5px 5px;position:relative;display:block}
.bag-ico:before{content:"";position:absolute;top:-5px;left:3.5px;width:6px;height:5px;border:1.6px solid currentColor;border-bottom:0;border-radius:4px 4px 0 0}
.hud-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 clamp(14px,2.4vw,30px) clamp(14px,2.6vh,26px);pointer-events:none}
.stick-zone{width:clamp(108px,19vh,150px);height:clamp(108px,19vh,150px);pointer-events:auto;display:grid;place-items:center;touch-action:none}
.stick{width:100%;height:100%;border-radius:50%;position:relative;border:1px solid rgba(255,255,255,.16);
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.09),rgba(4,14,10,.42) 70%);
  backdrop-filter:blur(6px);box-shadow:inset 0 0 30px rgba(0,0,0,.5)}
.stick:before{content:"";position:absolute;inset:22%;border-radius:50%;border:1px dashed rgba(232,196,106,.16)}
.stick i{position:absolute;left:50%;top:50%;width:46%;height:46%;margin:-23% 0 0 -23%;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(255,246,220,.92),rgba(203,164,88,.82) 58%,rgba(120,88,36,.9));
  box-shadow:0 6px 18px rgba(0,0,0,.6),inset 0 1px 2px rgba(255,255,255,.7);transition:transform .06s linear}
.btn-cluster{display:grid;grid-template-columns:auto auto;gap:clamp(8px,1.5vh,14px);align-items:end;pointer-events:auto}
.act{border-radius:50%;border:1px solid rgba(255,255,255,.18);background:var(--glass);color:#f8f0dc;
  backdrop-filter:blur(10px);display:grid;place-content:center;gap:0;cursor:pointer;position:relative;
  transition:transform .12s,box-shadow .2s,background .2s;box-shadow:0 10px 26px -12px rgba(0,0,0,.9)}
.act b{font-size:clamp(16px,2.6vh,22px);line-height:1;font-weight:700}
.act small{font-size:clamp(8px,1.2vh,10px);opacity:.72;letter-spacing:.04em;margin-top:2px}
.act:active{transform:scale(.93)}
.act-jump{width:clamp(66px,12vh,96px);height:clamp(66px,12vh,96px);grid-row:span 2;
  background:radial-gradient(circle at 40% 30%,rgba(255,241,208,.28),rgba(12,30,23,.75));
  border-color:rgba(232,196,106,.45)}
.act-interact{width:clamp(56px,9.6vh,78px);height:clamp(56px,9.6vh,78px)}
.act-ability{width:clamp(58px,10vh,82px);height:clamp(58px,10vh,82px);border-color:rgba(154,123,255,.5);
  background:radial-gradient(circle at 40% 30%,rgba(154,123,255,.32),rgba(18,14,36,.8))}
.act-ability.ready{box-shadow:0 0 0 1px rgba(154,123,255,.5),0 0 26px rgba(154,123,255,.5)}
.act-ability.cooling{opacity:.45;filter:grayscale(.6)}
.act-glow{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(154,123,255,.35),transparent 65%);opacity:0;transition:opacity .3s}
.act-ability.ready .act-glow{opacity:1;animation:pulse 2.6s infinite}
.hud-prompt{position:absolute;left:50%;bottom:clamp(96px,18vh,150px);transform:translateX(-50%);
  padding:9px 20px;border-radius:999px;background:rgba(6,18,13,.82);border:1px solid var(--line);
  font-size:clamp(11.5px,1.7vh,14px);backdrop-filter:blur(10px);white-space:nowrap;color:#ffeec9;
  box-shadow:0 12px 30px -14px #000;animation:fadeUp .3s both}
.hud-prompt kbd{background:rgba(232,196,106,.9);color:#20180a;border-radius:5px;padding:1px 6px;font-size:.85em;font-family:var(--ui);font-weight:700;margin-inline-start:6px}
/* ---------- dialogue ---------- */
.dialogue{position:absolute;left:50%;bottom:clamp(96px,17vh,132px);transform:translate(-50%,24px);
  width:min(820px,90vw);display:none;gap:14px;align-items:stretch;z-index:34;opacity:0;
  transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.25,1);pointer-events:auto;cursor:pointer}
.dialogue.show{display:flex;opacity:1;transform:translate(-50%,0)}
.dialogue canvas{width:clamp(72px,11vh,104px);height:auto;aspect-ratio:22/26;border-radius:14px;
  border:1px solid rgba(232,196,106,.4);background:radial-gradient(ellipse at 50% 80%,rgba(58,86,60,.85),rgba(7,16,12,.95));
  box-shadow:0 12px 30px -14px #000,inset 0 0 24px rgba(0,0,0,.55);flex:0 0 auto}
.dlg-body{flex:1;min-width:0;padding:clamp(10px,1.8vh,16px) clamp(14px,2vw,22px);border-radius:16px;
  background:linear-gradient(180deg,rgba(12,30,23,.92),rgba(6,16,12,.94));
  border:1px solid rgba(232,196,106,.32);backdrop-filter:blur(14px);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);position:relative}
.dlg-body:before{content:"";position:absolute;inset:3px;border-radius:13px;border:1px solid rgba(255,255,255,.045);pointer-events:none}
.dlg-name{font-size:clamp(11.5px,1.7vh,14px);font-weight:800;color:var(--gold-2);letter-spacing:.06em;margin-bottom:3px}
.dlg-text{font-size:clamp(13px,2vh,17px);line-height:1.62;color:#f6eeda;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.dlg-next{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);color:var(--gold);
  font-size:15px;animation:bob 1.4s infinite;text-shadow:0 0 10px rgba(232,196,106,.7)}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,4px)}}

/* ---------- toast / modal / fx ---------- */
.toast{position:absolute;top:clamp(64px,11vh,96px);left:50%;transform:translate(-50%,-14px);z-index:44;
  padding:10px 22px;border-radius:999px;font-size:clamp(12px,1.8vh,14.5px);font-weight:600;
  background:linear-gradient(180deg,rgba(34,60,44,.95),rgba(10,24,18,.96));border:1px solid var(--line);
  box-shadow:0 16px 40px -18px #000;opacity:0;transition:.34s;pointer-events:none;max-width:86vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:absolute;inset:0;display:none;place-items:center;z-index:50;background:rgba(3,8,6,.72);backdrop-filter:blur(9px);padding:20px}
.modal.show{display:grid}
.modal-card{width:min(560px,92vw);max-height:88vh;overflow:auto;border-radius:22px;padding:clamp(18px,3vh,30px);
  background:linear-gradient(175deg,rgba(18,40,30,.97),rgba(6,16,12,.99));border:1px solid var(--line);
  box-shadow:0 40px 90px -30px #000,inset 0 1px 0 rgba(255,255,255,.07);animation:fadeUp .34s both;position:relative}
.modal-card:before{content:"";position:absolute;inset:6px;border-radius:17px;border:1px solid rgba(255,255,255,.05);pointer-events:none}
.mc-title{font-size:clamp(17px,2.7vh,23px);font-weight:800;color:var(--gold-2);margin:0 0 6px}
.mc-sub{font-size:clamp(11.5px,1.7vh,13.5px);color:rgba(244,232,204,.6);margin:0 0 16px}
.mc-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.mc-row .btn{flex:1;min-width:120px;padding:.7em 1.2em;font-size:14px}
.bag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.bag-item{padding:12px 8px;border-radius:13px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  text-align:center;font-size:11.5px;display:grid;gap:6px;justify-items:center;color:#eadfc4}
.bag-item .bi-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  background:radial-gradient(circle at 40% 30%,rgba(232,196,106,.3),rgba(0,0,0,.35));border:1px solid rgba(232,196,106,.3)}
.bag-empty{font-size:13px;color:rgba(244,232,204,.5);text-align:center;padding:22px 0}
.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:33}
.fx-layer.flash{animation:flash .7s ease-out}
@keyframes flash{0%{background:radial-gradient(circle,rgba(255,236,190,.55),rgba(255,220,150,.12) 45%,transparent 72%)}
  100%{background:radial-gradient(circle,rgba(255,236,190,0),transparent 72%)}}
.fx-layer.violet{animation:flashV 1s ease-out}
@keyframes flashV{0%{background:radial-gradient(circle at 50% 60%,rgba(154,123,255,.5),transparent 70%)}100%{background:none}}
.rotate{position:absolute;inset:0;display:none;place-items:center;z-index:70;background:#040a08;
  color:var(--parch-dim);font-size:14px;text-align:center;padding:30px}
@media (orientation:portrait) and (max-width:860px){ .rotate{display:grid} }
@media (max-height:460px){
  .hud-quest{font-size:11px;padding:5px 12px}
  .hud-prompt{bottom:84px}
  .dialogue{bottom:78px}
}

/* ---------- puzzle modal & ending ---------- */
.toast{z-index:58}
#screen-ending{z-index:46;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(20,52,40,.92),rgba(3,8,6,.97) 72%)}
.end-inner .intro-tag{max-width:44ch}
.end-stats{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin:4px 0 12px;
  font-size:clamp(11px,1.7vh,13.5px);color:rgba(232,196,106,.85);letter-spacing:.04em}
.end-stats span{padding:6px 14px;border-radius:999px;border:1px solid rgba(232,196,106,.25);
  background:rgba(255,255,255,.04)}
.pz-wrap{width:100%;max-width:min(760px,86vw);margin:0 auto;border-radius:16px;overflow:hidden;
  border:1px solid rgba(232,196,106,.22);box-shadow:0 24px 60px -28px #000,inset 0 1px 0 rgba(255,255,255,.06)}
.pz-canvas{display:block;width:100%;height:auto;background:#08130f;touch-action:none;cursor:pointer}
.modal-card{width:min(820px,94vw)}
@media (max-width:760px){ .modal-card{padding:14px} .mc-row .btn{font-size:13px;padding:.6em .9em} }