/* ===== THE SECRET WORLD — visual identity ===== */
:root{
  --ink:#050206;
  --ink-2:#0B0713;
  --violet:#6A2DCC;
  --glow:#A97BFF;
  --magenta:#E0218A;
  --royal:#2B2BEE;
  --silver:#E8E3F5;
  --muted:#9E96B8;
  --blood:#C41E3A;
  --gold:#F2C14E;
  --sky:#6FD3FF;
  --lightbg:#FFF8E7;
  --r:16px;
  --r-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--silver);
  font-family:'Noto Kufi Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;user-select:none;-webkit-user-select:none}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%}
::selection{background:rgba(169,123,255,.35)}

/* ---------- atmosphere layers ---------- */
.smoke{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.smoke span{
  position:absolute;width:120vmax;height:120vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(106,45,204,.30),transparent 62%);
  filter:blur(40px);animation:drift 34s ease-in-out infinite alternate;
}
.smoke span:nth-child(1){top:-55vmax;inset-inline-start:-40vmax}
.smoke span:nth-child(2){bottom:-60vmax;inset-inline-end:-45vmax;
  background:radial-gradient(circle,rgba(224,33,138,.18),transparent 60%);animation-duration:46s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,4vh,0) scale(1.18)}}

.vignette{position:fixed;inset:0;z-index:55;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 38%,rgba(0,0,0,.55) 76%,rgba(0,0,0,.92) 100%)}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;overflow:hidden}
.screen[hidden]{display:none !important}
.screen.is-entering{animation:screenIn .5s var(--ease) both}
@keyframes screenIn{from{opacity:0;transform:scale(.988)}to{opacity:1;transform:none}}

.pad{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  width:100%;max-width:720px;margin:0 auto;padding:26px 20px 34px;
  display:flex;flex-direction:column;gap:16px}
.pad-narrow{max-width:560px}

/* ---------- type ---------- */
.latin{font-family:'Cinzel',Georgia,serif;letter-spacing:.24em;text-transform:uppercase}
.kicker{font-size:12.5px;font-weight:500;color:var(--glow);opacity:.92}
.kicker-lg{font-size:clamp(10px,3.1vw,14px);color:var(--gold);opacity:.95;margin-bottom:2px}
.h2{font-family:'Rakkas','Noto Kufi Arabic',serif;font-weight:400;font-size:clamp(26px,7.6vw,38px);
  line-height:1.25;color:#F3EEFF;text-shadow:0 0 26px rgba(169,123,255,.35)}
.muted{color:var(--muted);font-size:14.5px;line-height:1.75}
.hint-note{color:var(--muted);font-size:12.5px;text-align:center}
.star-ico{color:var(--gold);filter:drop-shadow(0 0 6px rgba(242,193,78,.7))}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;padding:0 26px;border-radius:var(--r);
  border:1px solid rgba(169,123,255,.34);
  background:linear-gradient(180deg,rgba(106,45,204,.5),rgba(24,10,48,.92));
  color:var(--silver);font-size:17px;font-weight:700;cursor:pointer;
  box-shadow:0 16px 34px -20px rgba(106,45,204,1),inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .12s var(--ease),box-shadow .25s,filter .2s,opacity .2s;
}
.btn:active{transform:scale(.972)}
.btn-primary{background:linear-gradient(180deg,#8A3FF0,#55209F);border-color:#BE93FF;color:#fff;
  box-shadow:0 18px 40px -18px rgba(138,63,240,.95),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-ghost{background:rgba(232,227,245,.06);border-color:rgba(232,227,245,.2);font-weight:500;font-size:16px}
.btn:disabled{opacity:.42;filter:grayscale(.45);box-shadow:none;cursor:not-allowed;transform:none}
.btn:focus-visible,.choice:focus-visible,.icon-btn:focus-visible,.mini-btn:focus-visible,
.btn-back:focus-visible,.tile:focus-visible,.char:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.btn-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--glow);
  font-size:14px;cursor:pointer;padding:8px 0;min-height:44px;align-self:flex-start}

.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;cursor:pointer;
  background:rgba(20,10,38,.72);border:1px solid rgba(169,123,255,.24);color:var(--silver);
  transition:transform .12s,border-color .2s}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:19px;height:19px}
.icon-btn.is-off{color:#6B6480}
.badge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:19px;height:19px;border-radius:10px;
  background:var(--magenta);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center;
  padding:0 5px;box-shadow:0 0 12px rgba(224,33,138,.8)}
.mini-btn{background:rgba(169,123,255,.12);border:1px solid rgba(169,123,255,.3);color:var(--glow);
  border-radius:999px;font-size:12px;padding:5px 12px;cursor:pointer;min-height:32px}

/* ---------- title ---------- */
.screen-title{justify-content:flex-end}
.hero{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  animation:ken 30s ease-in-out infinite alternate;filter:saturate(.92) contrast(1.06)}
@keyframes ken{from{transform:scale(1.03) translateY(0)}to{transform:scale(1.16) translateY(-2.2%)}}
.hero-fade{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,2,6,.98) 0%,rgba(5,2,6,.86) 34%,rgba(5,2,6,.35) 66%,rgba(5,2,6,.55) 100%)}
.title-inner{position:relative;z-index:3;width:100%;max-width:620px;margin:0 auto;
  padding:28px 22px 34px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
  animation:rise .9s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.game-title{font-family:'Rakkas','Noto Kufi Arabic',serif;font-weight:400;
  font-size:clamp(48px,17vw,96px);line-height:.98;color:#F7F2FF;
  text-shadow:0 0 34px rgba(169,123,255,.6),0 0 90px rgba(106,45,204,.5),0 6px 0 rgba(0,0,0,.55)}
.tagline{color:#CFC6E6;font-size:14.5px;opacity:.9}
.title-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:14px}
.best-line{font-size:13px;color:var(--muted);margin-top:6px}
.best-line b{color:var(--gold)}

/* ---------- intro ---------- */
.narration{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.nline{
  padding:12px 14px;border-radius:12px;font-size:14.5px;line-height:1.7;
  background:rgba(18,9,34,.6);border:1px solid rgba(169,123,255,.12);
  color:#8F87A8;opacity:.55;transition:all .45s var(--ease)
}
.nline.is-current{color:var(--silver);opacity:1;border-color:rgba(169,123,255,.55);
  background:rgba(46,20,92,.7);box-shadow:0 0 0 1px rgba(169,123,255,.2),0 10px 30px -20px #A97BFF;
  transform:translateX(0)}
.nline.is-done{opacity:.85;color:#BDB4D6;border-color:rgba(169,123,255,.22)}
.nline.is-done::before{content:'✦ ';color:var(--glow)}
.progress{height:6px;border-radius:99px;background:rgba(232,227,245,.1);overflow:hidden}
.progress-fill{height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--violet),var(--glow),var(--magenta));
  transition:width .5s var(--ease);box-shadow:0 0 16px rgba(169,123,255,.8)}

/* ---------- map / rounds ---------- */
.map-caption{font-size:11.5px;color:var(--muted);letter-spacing:0;text-align:center;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(169,123,255,.16);
  background:rgba(20,10,38,.5);align-self:center}
.rounds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:2px}
.tile{
  position:relative;overflow:hidden;text-align:start;cursor:pointer;
  min-height:142px;padding:14px 13px 12px;border-radius:var(--r-lg);
  background:linear-gradient(158deg,rgba(106,45,204,.62),rgba(22,9,44,.94) 78%);
  border:1px solid rgba(169,123,255,.28);color:var(--silver);
  box-shadow:0 22px 44px -30px #000,inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:4px;
  transition:transform .18s var(--ease),box-shadow .3s,border-color .3s,filter .3s
}
.tile:active{transform:scale(.985)}
.tile .num{position:absolute;inset-inline-start:6px;bottom:-20px;font-family:'Rakkas',serif;
  font-size:104px;line-height:1;color:rgba(232,227,245,.09);pointer-events:none}
.tile .t-sub{font-size:10.5px;color:#B9A9DA;letter-spacing:0}
.tile .t-title{font-family:'Rakkas',serif;font-size:clamp(19px,5.4vw,25px);line-height:1.25;color:#F5F0FF}
.tile .t-desc{font-size:11px;line-height:1.6;color:#A79DC2;margin-top:auto}
.tile.is-current{border-color:var(--glow);
  box-shadow:0 0 0 1px rgba(169,123,255,.55),0 0 38px -10px rgba(169,123,255,.75),inset 0 1px 0 rgba(255,255,255,.18)}
.tile.is-current::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 110%,rgba(224,33,138,.35),transparent 62%)}
.tile.is-locked{filter:grayscale(.6) brightness(.72);cursor:default}
.tile.is-done{border-color:rgba(242,193,78,.45)}
.tile .t-check{position:absolute;top:10px;inset-inline-end:11px;color:var(--gold);font-size:14px}
.role-strip{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;
  background:rgba(20,10,38,.7);border:1px solid rgba(169,123,255,.22);font-size:13.5px}
.role-strip .dot{width:9px;height:9px;transform:rotate(45deg);border-radius:2px;box-shadow:0 0 12px currentColor}
.map-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:14px}
.mini-stats{display:flex;justify-content:center;gap:14px;font-size:13px;color:var(--muted)}
.mini-stats b{color:var(--silver)}

/* ---------- characters ---------- */
.chars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.char{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 10px 12px;border-radius:var(--r-lg);cursor:pointer;
  background:linear-gradient(170deg,rgba(28,14,54,.9),rgba(12,6,24,.95));
  border:1px solid rgba(169,123,255,.2);color:var(--silver);
  transition:transform .16s var(--ease),border-color .25s,box-shadow .3s}
.char:active{transform:scale(.98)}
.char svg{width:100%;height:auto;max-width:112px;filter:drop-shadow(0 8px 18px rgba(106,45,204,.5))}
.char .c-name{font-family:'Rakkas',serif;font-size:22px;line-height:1.2}
.char .c-tag{font-size:11px;color:var(--muted)}
.char.is-picked{border-color:var(--glow);box-shadow:0 0 0 1px rgba(169,123,255,.6),0 0 34px -12px rgba(169,123,255,.85)}
.char.is-picked::after{content:'✦';position:absolute;top:8px;inset-inline-end:10px;color:var(--gold);font-size:14px}

/* ---------- scene ---------- */
.screen-scene{background:var(--ink)}
.scene-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.scene-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  animation:ken 34s ease-in-out infinite alternate;filter:saturate(.9) contrast(1.05);transition:opacity .5s}
.scene-veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,2,6,.35) 0%,rgba(5,2,6,.72) 26%,rgba(5,2,6,.94) 52%,rgba(5,2,6,.995) 74%)}
.hud{position:relative;z-index:5;display:flex;align-items:center;gap:8px;
  padding:10px 12px 8px;background:linear-gradient(to bottom,rgba(5,2,6,.92),rgba(5,2,6,.35))}
.hud-pill{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  background:rgba(20,10,38,.82);border:1px solid rgba(169,123,255,.26);font-size:13.5px;font-weight:700;
  min-height:34px;white-space:nowrap}
.hud-pill.pop{animation:pop .35s var(--ease)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
.hud-round{font-size:11.5px;color:#B9A9DA;margin-inline-start:auto;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:88px}
#hudLives{gap:3px;padding:5px 9px}
.life{font-size:12px;color:#3C3350;transition:color .3s,text-shadow .3s}
.life.on{color:var(--magenta);text-shadow:0 0 10px rgba(224,33,138,.85)}
.timerbar{position:relative;z-index:5;height:4px;background:rgba(232,227,245,.09)}
.timer-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--violet),var(--glow));
  transition:background .4s}
.timer-fill.is-low{background:linear-gradient(90deg,var(--blood),#FF6B8A);animation:warnpulse 1s infinite}
@keyframes warnpulse{0%,100%{opacity:1}50%{opacity:.55}}
.scene-scroll{position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 26px}
.scene-body{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:10px;padding-top:14px}
.place{font-size:11.5px;color:var(--glow);opacity:.9}
.speaker-row{display:flex;align-items:center;gap:10px}
.speaker{font-family:'Rakkas',serif;font-size:20px;color:var(--magenta);
  text-shadow:0 0 18px rgba(224,33,138,.6)}
.scene-title{font-family:'Rakkas',serif;font-weight:400;font-size:clamp(26px,8vw,40px);
  line-height:1.2;color:#F6F1FF;text-shadow:0 0 30px rgba(169,123,255,.4)}
.scene-text{font-size:15.5px;line-height:1.85;color:#D6CFE8;max-width:58ch}
.choices{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.choice{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:start;cursor:pointer;
  padding:13px 15px;border-radius:var(--r);color:var(--silver);
  background:linear-gradient(180deg,rgba(34,15,64,.9),rgba(11,6,22,.94));
  border:1px solid rgba(169,123,255,.24);
  box-shadow:0 16px 34px -26px #000,inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .14s var(--ease),border-color .25s,box-shadow .25s;
  animation:choiceIn .45s var(--ease) both}
@keyframes choiceIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.choice:active{transform:scale(.985)}
.choice:hover{border-color:rgba(169,123,255,.55)}
.choice.is-picked{border-color:var(--glow);box-shadow:0 0 0 1px rgba(169,123,255,.6),0 0 32px -10px rgba(169,123,255,.9)}
.choice:disabled{cursor:default}
.choice:disabled:not(.is-picked){opacity:.45}
.c-bullet{width:9px;height:9px;flex:0 0 9px;margin-top:8px;transform:rotate(45deg);border-radius:2px;
  background:linear-gradient(135deg,var(--glow),var(--magenta));box-shadow:0 0 14px rgba(169,123,255,.9)}
.c-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.c-title{font-weight:700;font-size:15.5px;line-height:1.55}
.c-hint{font-size:12.5px;color:var(--muted);line-height:1.6}
.c-bonus{display:inline-block;margin-inline-start:6px;font-size:11px;color:var(--gold);
  border:1px solid rgba(242,193,78,.35);border-radius:999px;padding:0 7px}

/* ---------- end ---------- */
.screen-end{justify-content:center;background:#07030C}
.end-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.end-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:.5;filter:saturate(.8)}
.screen-end::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(90% 70% at 50% 40%,rgba(5,2,6,.55),rgba(5,2,6,.97))}
.screen-end.is-light{background:var(--lightbg)}
.screen-end.is-light::before{background:radial-gradient(90% 70% at 50% 38%,rgba(255,248,231,.35),rgba(255,248,231,.94))}
.screen-end.is-light .end-bg img{opacity:.75;filter:saturate(1.1) brightness(1.06)}
.end-wrap{position:relative;z-index:3;width:100%;max-width:620px;margin:0 auto;
  padding:28px 20px 32px;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;overflow-y:auto;max-height:100%;
  animation:screenIn .6s var(--ease) both}
.end-title{font-family:'Rakkas',serif;font-size:clamp(38px,12vw,64px);line-height:1.15;color:#F8F3FF;
  text-shadow:0 0 42px rgba(169,123,255,.7)}
.end-sub{font-size:17px;font-weight:700;color:var(--gold);text-shadow:0 0 22px rgba(242,193,78,.5)}
.end-mark{font-size:11px;color:#A79DC2;margin-top:2px}
.end-body{font-size:14.5px;line-height:1.85;color:#CFC7E4;max-width:46ch;margin-top:6px}
.is-light .end-title{color:#231a3d;text-shadow:0 0 40px rgba(111,211,255,.9)}
.is-light .end-sub{color:#B8780F}
.is-light .end-body{color:#4A3F63}
.is-light .end-mark{color:#8B7FA6}
.is-light .kicker{color:#8A6BD1}
.end-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px;width:100%}
.stat{flex:1 1 96px;min-width:92px;padding:10px 8px;border-radius:14px;
  background:rgba(20,10,38,.78);border:1px solid rgba(169,123,255,.22)}
.is-light .stat{background:rgba(255,255,255,.72);border-color:rgba(140,110,210,.35)}
.stat .s-lab{display:block;font-size:11px;color:var(--muted)}
.stat .s-val{display:block;font-family:'Rakkas',serif;font-size:26px;line-height:1.3;color:var(--silver)}
.is-light .stat .s-val{color:#2A2140}
.is-light .stat .s-lab{color:#6B5F86}
.end-secrets{width:100%;margin-top:14px;text-align:start}
.end-secrets h4{font-size:12.5px;color:var(--glow);margin-bottom:8px;font-weight:500}
.end-secrets li{font-size:13px;line-height:1.7;color:#BDB4D6;padding:7px 0;
  border-bottom:1px dashed rgba(169,123,255,.16)}
.end-secrets li::before{content:'✦ ';color:var(--gold)}
.is-light .end-secrets h4{color:#7C5BC8}
.is-light .end-secrets li{color:#54486E;border-color:rgba(140,110,210,.22)}
.end-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:20px}
.is-light .btn-ghost{background:rgba(255,255,255,.6);border-color:rgba(140,110,210,.35);color:#3A2F55}
.spark{position:fixed;bottom:-20px;z-index:4;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#FFF6D2,#F2C14E);pointer-events:none;
  animation:sparkUp linear forwards}
@keyframes sparkUp{from{transform:translateY(0) scale(1);opacity:0}
  12%{opacity:1}to{transform:translateY(-92vh) scale(.35);opacity:0}}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(3,1,6,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal[hidden]{display:none !important}
.modal-card{width:100%;max-width:420px;max-height:86vh;overflow-y:auto;text-align:center;
  padding:26px 20px 22px;border-radius:26px;display:flex;flex-direction:column;gap:10px;align-items:center;
  background:linear-gradient(170deg,rgba(43,20,86,.96),rgba(10,5,20,.98));
  border:1px solid rgba(169,123,255,.42);
  box-shadow:0 40px 90px -40px #000,0 0 60px -20px rgba(169,123,255,.7),inset 0 1px 0 rgba(255,255,255,.1);
  animation:modalIn .4s var(--ease) both}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.modal-title{font-family:'Rakkas',serif;font-size:30px;line-height:1.25;color:#F6F1FF}
.role-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(169,123,255,.4);
  background:radial-gradient(circle at 50% 30%,rgba(169,123,255,.28),rgba(10,5,20,.9));
  box-shadow:0 0 40px -8px rgba(169,123,255,.8)}
.role-icon svg{width:40px;height:40px}
.perk{font-size:12.5px;color:var(--gold);border:1px solid rgba(242,193,78,.35);
  border-radius:999px;padding:5px 14px}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-start;
  background:rgba(3,1,6,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.drawer[hidden]{display:none !important}
.drawer-panel{width:min(88vw,360px);height:100%;overflow-y:auto;padding:20px 18px 30px;
  background:linear-gradient(190deg,rgba(30,14,58,.99),rgba(8,4,16,.99));
  border-inline-end:1px solid rgba(169,123,255,.35);
  box-shadow:30px 0 70px -30px #000;animation:slideIn .32s var(--ease) both}
@keyframes slideIn{from{transform:translateX(-104%)}to{transform:none}}
[dir="rtl"] .drawer-panel{animation-name:slideInRtl}
@keyframes slideInRtl{from{transform:translateX(104%)}to{transform:none}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.drawer-head h3{font-family:'Rakkas',serif;font-size:24px;color:#F4EEFF}
.secrets-list li{font-size:13.5px;line-height:1.75;color:#C3BADE;padding:10px 0;
  border-bottom:1px dashed rgba(169,123,255,.18)}
.secrets-list li::before{content:'✦ ';color:var(--gold)}
.secrets-list li .s-round{display:block;font-size:10.5px;color:var(--muted)}
.empty-note{font-size:13px;color:var(--muted);padding:16px 0;line-height:1.8}

/* ---------- toast ---------- */
.toast{position:fixed;z-index:95;inset-inline:0;bottom:22px;margin:0 auto;width:max-content;max-width:86vw;
  padding:11px 20px;border-radius:999px;font-size:13.5px;font-weight:700;text-align:center;
  background:rgba(28,13,54,.97);color:var(--silver);border:1px solid rgba(169,123,255,.45);
  box-shadow:0 20px 40px -20px #000,0 0 30px -12px rgba(169,123,255,.9);
  animation:toastIn .28s var(--ease) both}
.toast[hidden]{display:none !important}
.toast.is-bad{border-color:rgba(196,30,58,.65);color:#FFC9D4;
  box-shadow:0 20px 40px -20px #000,0 0 30px -12px rgba(196,30,58,.9)}
.toast.is-good{border-color:rgba(242,193,78,.6);color:#FFEFC4}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- leaderboard ---------- */
.board-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  background:rgba(20,10,38,.7);border:1px solid rgba(169,123,255,.18);font-size:14px}
.board-row.is-you{border-color:var(--glow);box-shadow:0 0 0 1px rgba(169,123,255,.5)}
.board-row .rank{width:30px;text-align:center;font-family:'Rakkas',serif;font-size:20px;color:var(--gold)}
.board-row .handle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-row .score{font-weight:700;color:var(--gold)}
.board-note{font-size:11.5px;color:var(--muted);line-height:1.7;margin-top:10px}
.board-list{display:flex;flex-direction:column;gap:8px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .hero-img,.scene-bg img{animation:none !important}
}

/* ---------- small phones ---------- */
@media (max-width:400px){
  .hud{padding:8px 9px 7px;gap:6px}
  .hud-pill{padding:4px 8px;font-size:12.5px;min-height:32px}
  .hud-round{max-width:70px;font-size:10.5px}
  .icon-btn{width:38px;height:38px;flex-basis:38px}
  .tile{min-height:130px;padding:12px 11px 10px}
  .chars{gap:10px}
}
@media (min-width:760px){
  .rounds{grid-template-columns:repeat(4,minmax(0,1fr))}
  .title-actions{flex-direction:row;max-width:440px}
  .end-actions{flex-direction:row;max-width:440px}
  .choices{gap:12px}
}