:root{
    --ink:#eef1f7;
    --ink-dim:#9aa4b8;
    --ground:#0a0c12;
    --panel:#12151d;
    --panel-raised:#181c26;
    --line: rgba(255,255,255,0.08);
    --gold:#ffcb47;
    --gold-dim:#8a6a20;
    --safe:#38e0a4;
    --safe-dim:#0f4b3c;
    --risky:#b98cff;
    --risky-dim:#4a2f80;
    --cringe:#ff5d78;
    --cringe-dim:#5c1c2c;
    --skin:#e8b48a;
    --shirt:#c23b3b;
    --pants:#232631;
    --ad:#4fb8d6;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;}
  body{
    background:var(--ground);
    color:var(--ink);
    font-family:'Manrope', system-ui, sans-serif;
    min-height:100vh; /* fallback for browsers without svh support */
    min-height:100svh; /* stays put when the mobile address bar shows/hides */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 16px;
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .phone, .card, .bigbtn, .gear{ touch-action:manipulation; }
  h1,h2,h3{ text-wrap:balance; margin:0; }
  .num{ font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }

  .wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
  }
  .brand{
    display:flex;
    align-items:baseline;
    gap:10px;
    font-family:'Bungee', system-ui, sans-serif;
  }
  .brand .a{ color:var(--gold); font-size:22px; letter-spacing:.5px; }
  .brand .or{ color:var(--ink-dim); font-size:13px; font-family:'Manrope',sans-serif; }
  .brand .c{ color:var(--cringe); font-size:22px; letter-spacing:.5px; }

  .phone{
    position:relative;
    width:390px;
    max-width:92vw;
    height:760px;
    max-height:88vh;
    background:var(--panel);
    border-radius:34px;
    border:1px solid var(--line);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 6px #05060a;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }

  .hud{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px 10px;
    gap:10px;
    z-index:5;
  }
  .hud-block{ display:flex; flex-direction:column; gap:2px; }
  .hud-label{ font-size:9px; letter-spacing:1.5px; color:var(--ink-dim); text-transform:uppercase; }
  .hud-risk{ font-size:9.5px; color:var(--risky); opacity:0; height:12px; transition:opacity .2s; }
  .hud-risk.show{ opacity:1; }
  .hud-hearts{ font-size:11px; letter-spacing:2px; line-height:1; }
  .hud-heart{ color:var(--cringe); }
  .hud-heart.lost{ color:rgba(255,255,255,.14); }
  .hud-rank{ font-size:11px; color:var(--ink-dim); }
  .hud-krutost{ font-size:11px; color:var(--gold-dim); }
  .hud-krutost .num{ color:var(--gold); font-weight:700; }
  .hud-confidence{ font-size:10px; text-align:right; height:12px; opacity:0; transition:opacity .2s; }
  .hud-confidence.show{ opacity:1; }
  .hud-confidence.hot{ color:var(--gold); }
  .hud-confidence.shaky{ color:var(--cringe); }

  .badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px 6px 8px;
    border-radius:999px;
    background:var(--panel-raised);
    border:1.5px solid var(--line);
    font-family:'Bungee', system-ui, sans-serif;
    font-size:13px;
    white-space:nowrap;
  }
  .badge svg{ width:16px; height:16px; flex:0 0 auto; }
  .badge-aura{ border-color:var(--gold); box-shadow:0 0 14px -4px rgba(255,203,71,.7); color:var(--gold); }
  .badge-aura svg{ color:var(--gold); filter:drop-shadow(0 0 3px rgba(255,203,71,.8)); }
  .badge-streak{ border-color:var(--risky); color:var(--risky); opacity:0; transform:translateY(-4px) scale(.9); transition:opacity .25s, transform .25s; }
  .badge-streak.show{ opacity:1; transform:translateY(0) scale(1); }
  .badge-streak svg{ color:#ff9a3c; filter:drop-shadow(0 0 3px rgba(255,154,60,.8)); }
  .gear{
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel-raised); border:1px solid var(--line);
    color:var(--ink-dim); cursor:pointer; font-size:14px; flex:0 0 auto;
  }
  .gear:hover{ color:var(--ink); }

  .scene{
    position:relative;
    flex:1 1 auto;
    margin:0 12px;
    border-radius:20px;
    overflow:hidden;
    background:#1a1e28;
  }
  .scene-bg{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    z-index:0;
  }
  .scene-scrim{
    position:absolute; inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(8,8,16,.6) 0%, rgba(8,8,16,0) 24%, rgba(8,8,16,0) 58%, rgba(8,8,16,.8) 100%);
  }
  .scene-corridor .scene-bg{ background-image:url(../assets/images/backgrounds/corridor.webp); }
  .scene-gym .scene-bg{ background-image:url(../assets/images/backgrounds/gym.webp); }
  .scene-cafeteria .scene-bg{ background-image:url(../assets/images/backgrounds/cafeteria.webp); }
  .scene-classroom .scene-bg{ background-image:url(../assets/images/backgrounds/classroom.webp); }
  .scene-schoolyard .scene-bg{ background-image:url(../assets/images/backgrounds/schoolyard.webp); }

  .banner{
    position:absolute;
    top:18px;
    left:14px;
    right:14px;
    text-align:center;
    z-index:4;
    pointer-events:none;
  }
  .banner .line1{
    position:relative;
    display:inline-block;
    box-sizing:border-box;
    width:auto;
    max-width:92%;
    padding:12px 16px 13px;
    border:2px solid rgba(255,203,71,.92);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(24,24,42,.94), rgba(14,15,29,.92));
    color:#fff8ea;
    font-size:13.5px;
    font-weight:800;
    line-height:1.35;
    text-align:center;
    text-wrap:balance;
    box-shadow:
      0 8px 22px rgba(0,0,0,.38),
      0 0 16px rgba(255,203,71,.12),
      inset 0 1px 0 rgba(255,255,255,.08);
    text-shadow:0 1px 3px rgba(0,0,0,.55);
  }
  .banner .line1::before{
    content:'';
    position:absolute;
    left:18%;
    right:18%;
    top:-2px;
    height:2px;
    border-radius:999px;
    background:#fff3b0;
    opacity:.75;
  }
  .banner .spark{
    display:none;
  }
  @keyframes sparkPulse{ 0%,100%{ opacity:1; } 50%{ opacity:1; } }
  .result-big{
    position:absolute; inset:0;
    text-align:center;
    font-family:'Bungee', system-ui, sans-serif;
    z-index:6;
    pointer-events:none;
    opacity:0;
    transform:scale(.7);
  }
  .result-big.show{
    animation:resultPop .45s cubic-bezier(.2,1.4,.4,1) forwards;
  }
  @keyframes resultPop{ to{ opacity:1; transform:scale(1); } }
  .result-big .title{
    position:absolute; top:20%; left:0; right:0;
    font-size:38px; letter-spacing:1px;
  }
  .result-big .title.win{ color:var(--safe); text-shadow:0 0 24px rgba(56,224,164,.5); }
  .result-big .title.mid{ color:var(--gold); text-shadow:0 0 24px rgba(255,203,71,.5); }
  .result-big .title.lose{ color:var(--cringe); text-shadow:0 0 24px rgba(255,93,120,.5); }
  .result-big .delta{
    position:absolute; top:33%; left:0; right:0;
    font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700;
  }
  .result-big .consequence{
    position:absolute; left:0; right:0; bottom:66px;
    max-width:360px; margin:0 auto; padding:0 20px;
    font-family:'Manrope',sans-serif; font-size:14px; line-height:1.35; font-weight:700; color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.75);
  }
  .result-big .continue-result{
    display:none;
    position:absolute;
    left:50%;
    bottom:24px;
    width:max-content;
    margin:0;
    padding:4px 8px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:rgba(255,255,255,.88);
    font-family:'Manrope',sans-serif;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
    cursor:pointer;
    pointer-events:auto;
    user-select:none;
    text-shadow:0 2px 8px rgba(0,0,0,.6);
    opacity:.88;
    transform:translateX(-50%);
  }
  .result-big .continue-result:disabled{ cursor:default; opacity:0; }
  .result-big.show{ pointer-events:auto; }
  .result-big.show .continue-result.ready{ display:block; animation:continuePulse 1.15s ease-in-out infinite; }
  @keyframes continuePulse{
    0%,100%{ transform:translateX(-50%) translateY(0); opacity:.72; }
    50%{ transform:translateX(-50%) translateY(3px); opacity:1; }
  }

  .prop{
    position:absolute;
    bottom:20%;
    left:24%;
    font-size:40px;
    filter: drop-shadow(0 6px 6px rgba(0,0,0,.5));
    z-index:2;
  }

  .character{
    position:absolute;
    left:53%;
    bottom:15%;
    width:148px;
    height:222px;
    margin-left:-74px;
    z-index:3;
    transform-origin:50% 92%;
    /* ensureSceneClearance()/hideBanner() (app.js) toggle an explicit pixel
       "top" on and off to keep the character clear of the situation banner,
       then release it back to this bottom:% anchor. Without a transition
       that release snaps instantly — most noticeable the moment you tap
       SAFE/RISKY on a tall (e.g. CRITICAL) banner. Easing just top/bottom
       here turns that into a quick settle instead of a jump, without
       touching the anchor itself, so it still tracks the scene resizing
       for the QTE bar/result screen exactly as before. */
    transition: top .22s ease, bottom .22s ease;
  }
  .character.idle{ animation: idleBob 2.3s ease-in-out infinite; }
  .character.jumping{ animation: jumpArc .6s ease-out; }
  .character.victory{ animation: victoryPop .5s ease-out; }
  .character.falling{ animation: hurtFlinch .6s ease-out; }

  /* AURA LEGEND sprites were rendered on a slightly wider canvas,
     so they looked smaller inside the common 148x222 character slot.
     Give this rank its own slot size so the visible character matches
     the scale of the other ranks. */
  .character.unlock-legend{
    width:167px;
    height:250px;
    margin-left:-83.5px;
  }

  @keyframes idleBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
  @keyframes jumpArc{ 0%{transform:translateY(0);} 40%{transform:translateY(-26px);} 100%{transform:translateY(0);} }
  @keyframes victoryPop{ 0%{transform:scale(1);} 40%{transform:scale(1.12) translateY(-8px);} 100%{transform:scale(1);} }
  @keyframes hurtFlinch{
    0%{ transform:translate(0,0) rotate(0deg) scale(1,1); }
    20%{ transform:translate(-5px,-4px) rotate(-5deg) scale(0.97,1.03); }
    40%{ transform:translate(4px,2px) rotate(4deg) scale(1.02,0.98); }
    60%{ transform:translate(-3px,1px) rotate(-2.5deg) scale(1,1); }
    80%{ transform:translate(1px,0) rotate(1deg) scale(1,1); }
    100%{ transform:translate(0,0) rotate(0deg) scale(1,1); }
  }

  .char-shadow{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:70%; height:13px; border-radius:50%; background:rgba(0,0,0,.4); filter:blur(3px); z-index:0; }
  .aura-floor,
  .aura-backglow,
  .particle{ pointer-events:none; }
  .aura-floor{
    position:absolute;
    left:50%;
    bottom:-1px;
    width:82%;
    height:24px;
    transform:translateX(-50%) scale(.86);
    border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(255,255,255,.35) 0%, rgba(191,132,255,.28) 28%, rgba(117,70,255,.18) 52%, rgba(117,70,255,0) 74%);
    filter:blur(8px);
    opacity:0;
    z-index:0;
    transition:opacity .35s ease, transform .35s ease, filter .35s ease;
  }
  .aura-backglow{
    position:absolute;
    left:50%;
    top:8%;
    width:74%;
    height:72%;
    transform:translateX(-50%) scale(.84);
    border-radius:46% 46% 40% 40%;
    background:radial-gradient(ellipse at center, rgba(255,255,255,.14) 0%, rgba(204,146,255,.18) 18%, rgba(145,92,255,.20) 42%, rgba(98,55,196,.14) 58%, rgba(98,55,196,0) 76%);
    filter:blur(18px);
    opacity:0;
    z-index:0;
    transition:opacity .35s ease, transform .35s ease, filter .35s ease;
    animation:auraBreathe 2.8s ease-in-out infinite;
  }
  .charimg{
    position:absolute; inset:0;
    z-index:1;
    width:100%; height:100%;
    object-fit:contain;
    object-position:bottom center;
    display:block;
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));
    pointer-events:none;
    -webkit-user-drag:none;
    transition:opacity .15s ease;
  }
  .charimg-proud{ opacity:0; }
  .charimg-embarrassed{ opacity:0; }
  .charimg-hurt{ opacity:0; }
  .character.victory .charimg-base{ opacity:0; }
  .character.victory .charimg-proud{ opacity:1; }
  .character.jumping .charimg-base{ opacity:0; }
  .character.jumping .charimg-embarrassed{ opacity:1; }
  .character.falling .charimg-base{ opacity:0; }
  .character.falling .charimg-hurt{ opacity:1; }


  .charimg-cap-base,
  .charimg-cap-proud,
  .charimg-cap-embarrassed,
  .charimg-cap-hurt{ opacity:0; }

  .character.unlock-cap .charimg-base,
  .character.unlock-cap .charimg-proud,
  .character.unlock-cap .charimg-embarrassed,
  .character.unlock-cap .charimg-hurt{ opacity:0; }

  .character.unlock-cap.idle .charimg-cap-base{ opacity:1; }
  .character.unlock-cap.victory .charimg-cap-proud{ opacity:1; }
  .character.unlock-cap.jumping .charimg-cap-embarrassed{ opacity:1; }
  .character.unlock-cap.falling .charimg-cap-hurt{ opacity:1; }

  .charimg-glasses-base,
  .charimg-glasses-proud,
  .charimg-glasses-embarrassed,
  .charimg-glasses-hurt{ opacity:0; }

  .character.unlock-glasses .charimg-base,
  .character.unlock-glasses .charimg-proud,
  .character.unlock-glasses .charimg-embarrassed,
  .character.unlock-glasses .charimg-hurt,
  .character.unlock-glasses .charimg-cap-base,
  .character.unlock-glasses .charimg-cap-proud,
  .character.unlock-glasses .charimg-cap-embarrassed,
  .character.unlock-glasses .charimg-cap-hurt{ opacity:0; }

  .character.unlock-glasses.idle .charimg-glasses-base{ opacity:1; }
  .character.unlock-glasses.victory .charimg-glasses-proud{ opacity:1; }
  .character.unlock-glasses.jumping .charimg-glasses-embarrassed{ opacity:1; }
  .character.unlock-glasses.falling .charimg-glasses-hurt{ opacity:1; }

  .charimg-main-base,
  .charimg-main-proud,
  .charimg-main-embarrassed,
  .charimg-main-hurt{ opacity:0; }

  .character.unlock-main .charimg-base,
  .character.unlock-main .charimg-proud,
  .character.unlock-main .charimg-embarrassed,
  .character.unlock-main .charimg-hurt,
  .character.unlock-main .charimg-cap-base,
  .character.unlock-main .charimg-cap-proud,
  .character.unlock-main .charimg-cap-embarrassed,
  .character.unlock-main .charimg-cap-hurt,
  .character.unlock-main .charimg-glasses-base,
  .character.unlock-main .charimg-glasses-proud,
  .character.unlock-main .charimg-glasses-embarrassed,
  .character.unlock-main .charimg-glasses-hurt{ opacity:0; }

  .character.unlock-main.idle .charimg-main-base{ opacity:1; }
  .character.unlock-main.victory .charimg-main-proud{ opacity:1; }
  .character.unlock-main.jumping .charimg-main-embarrassed{ opacity:1; }
  .character.unlock-main.falling .charimg-main-hurt{ opacity:1; }

  .charimg-legend-base,
  .charimg-legend-proud,
  .charimg-legend-embarrassed,
  .charimg-legend-hurt{ opacity:0; }

  .character.unlock-legend .charimg-base,
  .character.unlock-legend .charimg-proud,
  .character.unlock-legend .charimg-embarrassed,
  .character.unlock-legend .charimg-hurt,
  .character.unlock-legend .charimg-cap-base,
  .character.unlock-legend .charimg-cap-proud,
  .character.unlock-legend .charimg-cap-embarrassed,
  .character.unlock-legend .charimg-cap-hurt,
  .character.unlock-legend .charimg-glasses-base,
  .character.unlock-legend .charimg-glasses-proud,
  .character.unlock-legend .charimg-glasses-embarrassed,
  .character.unlock-legend .charimg-glasses-hurt,
  .character.unlock-legend .charimg-main-base,
  .character.unlock-legend .charimg-main-proud,
  .character.unlock-legend .charimg-main-embarrassed,
  .character.unlock-legend .charimg-main-hurt{ opacity:0; }

  .character.unlock-legend.idle .charimg-legend-base{ opacity:1; }
  .character.unlock-legend.victory .charimg-legend-proud{ opacity:1; }
  .character.unlock-legend.jumping .charimg-legend-embarrassed{ opacity:1; }
  .character.unlock-legend.falling .charimg-legend-hurt{ opacity:1; }


  .charimg-infinite-base,
  .charimg-infinite-proud,
  .charimg-infinite-embarrassed,
  .charimg-infinite-hurt{ opacity:0; }

  .character.unlock-infinite .charimg-base,
  .character.unlock-infinite .charimg-proud,
  .character.unlock-infinite .charimg-embarrassed,
  .character.unlock-infinite .charimg-hurt,
  .character.unlock-infinite .charimg-cap-base,
  .character.unlock-infinite .charimg-cap-proud,
  .character.unlock-infinite .charimg-cap-embarrassed,
  .character.unlock-infinite .charimg-cap-hurt,
  .character.unlock-infinite .charimg-glasses-base,
  .character.unlock-infinite .charimg-glasses-proud,
  .character.unlock-infinite .charimg-glasses-embarrassed,
  .character.unlock-infinite .charimg-glasses-hurt,
  .character.unlock-infinite .charimg-main-base,
  .character.unlock-infinite .charimg-main-proud,
  .character.unlock-infinite .charimg-main-embarrassed,
  .character.unlock-infinite .charimg-main-hurt,
  .character.unlock-infinite .charimg-legend-base,
  .character.unlock-infinite .charimg-legend-proud,
  .character.unlock-infinite .charimg-legend-embarrassed,
  .character.unlock-infinite .charimg-legend-hurt{ opacity:0; }

  .character.unlock-infinite.idle .charimg-infinite-base{ opacity:1; }
  .character.unlock-infinite.victory .charimg-infinite-proud{ opacity:1; }
  .character.unlock-infinite.jumping .charimg-infinite-embarrassed{ opacity:1; }
  .character.unlock-infinite.falling .charimg-infinite-hurt{ opacity:1; }

  .character.unlock-infinite{
    width:170px;
    height:250px;
    margin-left:-85px;
  }
  .character.unlock-infinite .crown{ transform:scale(0) !important; }

  .glasses{ display:none; }

  .cap{ display:none; }

  .cap{ position:absolute; top:-4%; left:47%; width:28%; height:9%; margin-left:-14%; border-radius:50% 50% 18% 18%; background:var(--risky); transform:scale(0); transition:transform .35s cubic-bezier(.3,1.6,.4,1); z-index:2; }
  .character.unlock-cap .cap{ transform:scale(1); }
  .glasses{ position:absolute; top:10.5%; left:47%; width:23%; height:3.6%; margin-left:-11.5%; background:#10121a; border-radius:4px; transform:scaleY(0); transition:transform .3s; z-index:2; }
  .character.unlock-glasses .glasses{ transform:scaleY(1); }
  .crown{ position:absolute; top:-16%; left:47%; margin-left:-16px; font-size:26px; line-height:1; transform:scale(0); transition:transform .4s cubic-bezier(.3,1.6,.4,1); z-index:2; }
  .character.unlock-crown .crown{ transform:scale(1); }
  .character.unlock-cap .aura-backglow{
    opacity:.35;
    transform:translateX(-50%) scale(.88);
    filter:blur(16px);
  }
  .character.unlock-cap .charimg{ filter:drop-shadow(0 10px 12px rgba(0,0,0,.45)) drop-shadow(0 0 7px rgba(170,118,255,.24)); }

  .character.unlock-glasses .aura-floor{
    opacity:.24;
    transform:translateX(-50%) scale(.92);
  }
  .character.unlock-glasses .aura-backglow{
    opacity:.46;
    transform:translateX(-50%) scale(.94);
    filter:blur(18px);
  }
  .character.unlock-glasses .charimg{ filter:drop-shadow(0 10px 12px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(176,120,255,.34)); }

  .character.unlock-glow .aura-floor{
    opacity:.32;
    transform:translateX(-50%) scale(1);
    filter:blur(10px);
  }
  .character.unlock-glow .aura-backglow{
    opacity:.58;
    transform:translateX(-50%) scale(1);
    filter:blur(20px);
  }
  .character.unlock-main .charimg{ filter:drop-shadow(0 10px 12px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(190,140,255,.42)); }

  .character.unlock-legend .aura-floor{
    opacity:.40;
    transform:translateX(-50%) scale(1.05);
    background:radial-gradient(ellipse at center, rgba(255,255,255,.42) 0%, rgba(255,211,110,.26) 20%, rgba(204,146,255,.34) 42%, rgba(127,72,255,.18) 58%, rgba(127,72,255,0) 78%);
  }
  .character.unlock-legend .aura-backglow{
    opacity:.72;
    transform:translateX(-50%) scale(1.07);
    background:radial-gradient(ellipse at center, rgba(255,255,255,.18) 0%, rgba(255,215,128,.18) 12%, rgba(216,162,255,.26) 34%, rgba(145,92,255,.30) 54%, rgba(96,56,190,.16) 68%, rgba(96,56,190,0) 82%);
    filter:blur(22px);
  }
  .character.unlock-legend .charimg{ filter:drop-shadow(0 10px 12px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(255,214,133,.22)) drop-shadow(0 0 16px rgba(180,118,255,.46)); }

  .character.unlock-infinite .aura-floor{
    opacity:.50;
    width:88%;
    height:28px;
    transform:translateX(-50%) scale(1.08);
    background:radial-gradient(ellipse at center, rgba(255,255,255,.62) 0%, rgba(255,233,170,.38) 14%, rgba(215,176,255,.42) 34%, rgba(145,92,255,.30) 56%, rgba(145,92,255,0) 80%);
    filter:blur(11px);
    animation:floorPulse 1.9s ease-in-out infinite;
  }
  .character.unlock-infinite .aura-backglow{
    opacity:.84;
    width:80%;
    height:76%;
    transform:translateX(-50%) scale(1.12);
    background:radial-gradient(ellipse at center, rgba(255,255,255,.34) 0%, rgba(255,255,255,.18) 10%, rgba(255,224,150,.16) 18%, rgba(222,185,255,.28) 34%, rgba(161,111,255,.34) 52%, rgba(105,62,210,.18) 70%, rgba(105,62,210,0) 84%);
    filter:blur(24px);
    animation:auraBreathe 2.2s ease-in-out infinite, infiniteFlicker 3.1s ease-in-out infinite;
  }
  .character.unlock-infinite .charimg{ filter:drop-shadow(0 10px 12px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(255,232,177,.28)) drop-shadow(0 0 20px rgba(192,136,255,.52)); }

  .particle{
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    opacity:0;
    z-index:2;
    background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,223,128,.86) 32%, rgba(188,124,255,.85) 68%, rgba(188,124,255,0) 100%);
    box-shadow:0 0 10px rgba(194,134,255,.45);
    transition:opacity .3s ease;
  }
  .character.unlock-particles .particle{ opacity:.88; }
  .particle.p1{ left:20%; top:22%; animation: sparkFloat1 2.6s ease-in-out infinite; }
  .particle.p2{ left:75%; top:27%; animation: sparkFloat2 2.9s ease-in-out infinite; }
  .particle.p3{ left:16%; top:49%; animation: sparkFloat3 3.1s ease-in-out infinite; }
  .particle.p4{ left:80%; top:55%; animation: sparkFloat4 2.7s ease-in-out infinite; }
  .particle.p5{ left:52%; top:15%; width:5px; height:5px; animation: sparkFloat5 2.4s ease-in-out infinite; }
  .character.unlock-infinite .particle{ width:8px; height:8px; box-shadow:0 0 12px rgba(255,236,181,.45), 0 0 18px rgba(190,130,255,.42); }
  .character.unlock-main .particle,
  .character.unlock-cap .particle,
  .character.unlock-glasses .particle{ opacity:0 !important; }

  @keyframes auraBreathe{
    0%,100%{ transform:translateX(-50%) scale(.98); }
    50%{ transform:translateX(-50%) scale(1.03); }
  }
  @keyframes floorPulse{
    0%,100%{ transform:translateX(-50%) scale(1.05); opacity:.46; }
    50%{ transform:translateX(-50%) scale(1.13); opacity:.58; }
  }
  @keyframes infiniteFlicker{
    0%,100%{ opacity:.82; }
    35%{ opacity:.88; }
    50%{ opacity:.76; }
    68%{ opacity:.9; }
  }
  @keyframes sparkFloat1{
    0%,100%{ transform:translate(0,0) scale(.9); }
    50%{ transform:translate(7px,-8px) scale(1.15); }
  }
  @keyframes sparkFloat2{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-8px,-10px) scale(.78); }
  }
  @keyframes sparkFloat3{
    0%,100%{ transform:translate(0,0) scale(.86); }
    50%{ transform:translate(10px,-6px) scale(1.08); }
  }
  @keyframes sparkFloat4{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-6px,-8px) scale(1.14); }
  }
  @keyframes sparkFloat5{
    0%,100%{ transform:translate(0,0) scale(.9); opacity:.7; }
    50%{ transform:translate(0,-11px) scale(1.18); opacity:1; }
  }

  .floatnum{
    position:absolute;
    left:50%; top:62%;
    transform:translate(-50%,0);
    font-family:'JetBrains Mono',monospace;
    font-weight:700;
    font-size:20px;
    z-index:7;
    animation: floatUp .9s ease-out forwards;
    pointer-events:none;
  }
  @keyframes floatUp{ 0%{ opacity:0; transform:translate(-50%,10px);} 15%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,-46px);} }

  .shake{ animation: shakeit .35s ease; }
  @keyframes shakeit{
    0%,100%{ transform:translate(0,0); }
    20%{ transform:translate(-6px,2px); }
    40%{ transform:translate(5px,-3px); }
    60%{ transform:translate(-4px,3px); }
    80%{ transform:translate(3px,-2px); }
  }

  /* Full-scene color wash for big moments — extra "juice" on top of the
     existing shake, so a perfect/cringe result reads instantly even if the
     player isn't reading the text. */
  .scene.flash-gold::after,
  .scene.flash-cringe::after{
    content:'';
    position:absolute; inset:0;
    z-index:6;
    pointer-events:none;
    animation: sceneFlash .5s ease-out;
  }
  .scene.flash-gold::after{
    background:radial-gradient(circle at 50% 42%, rgba(255,214,120,.55), rgba(255,214,120,0) 68%);
  }
  .scene.flash-cringe::after{
    background:radial-gradient(circle at 50% 42%, rgba(255,90,90,.50), rgba(255,90,90,0) 68%);
  }
  @keyframes sceneFlash{
    0%{ opacity:0; }
    18%{ opacity:1; }
    100%{ opacity:0; }
  }

  /* Snappy ring pulse the instant the player taps, independent of the
     outcome — gives every tap a physical "click" instead of only the
     result mattering. */
  .timingbar-wrap.tap-pulse::after{
    content:'';
    position:absolute;
    inset:-7px;
    border-radius:12px;
    border:2px solid rgba(255,255,255,.75);
    pointer-events:none;
    animation: tapRing .32s ease-out;
  }
  @keyframes tapRing{
    0%{ transform:scale(.92); opacity:.95; }
    100%{ transform:scale(1.18); opacity:0; }
  }

  .panel{
    padding:14px 14px 18px;
    min-height:150px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:10px;
    z-index:5;
  }

  .cards{ display:flex; gap:10px; }
  .card{
    position:relative;
    flex:1;
    border-radius:20px;
    padding:16px 10px 14px;
    cursor:pointer;
    border:2px solid var(--line);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    background:var(--panel-raised);
    overflow:hidden;
    transition:transform .15s ease, filter .15s ease;
  }
  .card:active{ transform:scale(.96); }
  .card:hover{ filter:brightness(1.12); }
  .card-icon{ width:40px; height:40px; margin-bottom:2px; }
  .card-icon svg{ width:100%; height:100%; }
  .card .tag{ font-size:10px; letter-spacing:2px; font-weight:800; padding:2px 10px; border-radius:999px; }
  .card .name{ font-size:14.5px; font-weight:800; line-height:1.2; }
  .card .reward{
    display:inline-flex; align-items:center; gap:4px;
    font-family:'JetBrains Mono',monospace; font-weight:800; font-size:12.5px;
    padding:4px 11px; border-radius:999px; margin-top:2px;
  }
  .card .reward svg{ width:12px; height:12px; }
  .card.safe{ border-color:var(--safe); box-shadow:0 0 22px -6px rgba(56,224,164,.7); background:linear-gradient(180deg, rgba(56,224,164,.16), var(--panel-raised) 70%); }
  .card.safe .card-icon{ color:var(--safe); }
  .card.safe .tag{ background:rgba(56,224,164,.18); color:var(--safe); }
  .card.safe .reward{ background:rgba(56,224,164,.16); color:var(--safe); }
  .card.risky{ border-color:var(--risky); box-shadow:0 0 22px -6px rgba(185,140,255,.75); background:linear-gradient(180deg, rgba(185,140,255,.18), var(--panel-raised) 70%); }
  .card.risky .card-icon{ color:var(--risky); }
  .card.risky .tag{ background:rgba(185,140,255,.22); color:var(--risky); }
  .card.risky .reward{ background:rgba(185,140,255,.18); color:var(--risky); }

  .bigbtn{
    width:100%;
    padding:16px;
    border-radius:16px;
    border:1px solid var(--line);
    background:var(--panel-raised);
    color:var(--ink);
    font-family:'Bungee', system-ui, sans-serif;
    font-size:15px;
    letter-spacing:.5px;
    cursor:pointer;
    text-align:center;
  }
  .bigbtn:active{ transform:scale(.98); }
  .bigbtn.gold{ background:linear-gradient(160deg,#ffdb7a,var(--gold)); color:#241b00; border:none; }
  .bigbtn.safeflat{ background:linear-gradient(160deg,#5be3af,var(--safe)); color:#04241a; border:none; }
  .bigbtn.riskyflat{ background:linear-gradient(160deg,#cfa9ff,var(--risky)); color:#1e1030; border:none; }
  .bigbtn.reviveflat{ background:var(--panel-raised); color:var(--ad); border:1px solid var(--ad); font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; }

  .hint{ text-align:center; font-size:11px; color:var(--ink-dim); letter-spacing:.5px; }

  .timingbar-wrap{ position:relative; padding-top:14px; }
  .timingbar{ position:relative; height:26px; border-radius:8px; overflow:hidden; display:flex; border:1px solid var(--line); }
  .seg{ height:100%; }
  .seg.red{ background:linear-gradient(180deg,#ff6b7f,#c13650); }
  .seg.yellow{ background:linear-gradient(180deg,#ffd166,#c98f1f); }
  .seg.green{ background:linear-gradient(180deg,#5be3af,#1fa87a); }
  .indicator{ position:absolute; top:-9px; width:2px; height:44px; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.8); }
  .indicator::before{ content:'▼'; position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-size:11px; color:#fff; }

  .bankbox{
    background:var(--panel-raised);
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px 16px;
    text-align:center;
  }
  .bankbox .amt{ color:var(--gold); font-family:'JetBrains Mono',monospace; font-weight:700; font-size:22px; }
  .bankbox .sub{ color:var(--ink-dim); font-size:12px; margin-top:4px; }
  .bankrow{ display:flex; gap:10px; margin-top:10px; }

  .rankupbox{ text-align:center; }
  .rankupbox .from{ color:var(--ink-dim); font-size:13px; }
  .rankupbox .arrow{ margin:4px 0; color:var(--ink-dim); }
  .rankupbox .to{ font-family:'Bungee',sans-serif; color:var(--gold); font-size:20px; margin:4px 0 6px; }
  .rankupbox .unlockline{ font-size:12px; color:var(--ink-dim); margin-bottom:10px; }

  .menubox{ text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center; }
  .menubox .tagline{ color:var(--ink-dim); font-size:12.5px; max-width:280px; line-height:1.5; }
  .menubox .stats{ font-size:11px; color:var(--ink-dim); display:flex; gap:14px; }
  .menubox .stats .num{ color:var(--gold); }
  .menubox .best{ font-size:11px; color:var(--ink-dim); }
  .menubox .best .num{ color:var(--gold); }

  .runoverbox{ text-align:center; }
  .runoverbox .title{ font-family:'Bungee',sans-serif; color:var(--cringe); font-size:20px; margin-bottom:8px; }
  .runoverbox .row{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-dim); padding:6px 2px; border-top:1px solid var(--line); }
  .runoverbox .row .num{ color:var(--gold); font-weight:700; }
  .runoverbox .cta{ margin-top:12px; }

  .toast{
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    background:rgba(10,12,18,.85); border:1px solid var(--line);
    padding:8px 14px; border-radius:10px; font-size:12px; color:var(--ink);
    opacity:0; transition:opacity .25s; z-index:8; pointer-events:none;
  }
  .toast.show{ opacity:1; }

  /* Reaction face — pops up right when a SAFE/RISKY choice resolves, at
     the same moment the result text appears. Positioned by a fixed % of
     the scene (not the character's own box) — that first version anchored
     to the character's bounding rect and it landed mid-text on real
     devices (the rect isn't a tight fit around the visible sprite once
     object-fit:contain letterboxes it). A fixed spot in the gap below the
     result numbers, offset to one side, keeps it clear of the text and
     reads as a reaction next to the character rather than another line of
     UI copy. Left/right is picked at random each time in JS so it doesn't
     always sit on the same side. */
  .reaction-face{
    position:absolute;
    top:56%;
    width:80px; height:80px;
    margin-top:-40px;
    z-index:5;
    pointer-events:none;
    opacity:0;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
  }
  .reaction-face.side-left{ left:26%; margin-left:-40px; }
  .reaction-face.side-right{ left:74%; margin-left:-40px; }
  .reaction-face img{
    width:100%; height:100%;
    display:block;
    object-fit:contain;
  }
  .reaction-face.show{
    animation:reactionFacePop .9s cubic-bezier(.2,1,.4,1) forwards;
  }
  @keyframes reactionFacePop{
    0%{ opacity:0; transform:scale(.6) translateY(0); }
    16%{ opacity:1; transform:scale(1.15) translateY(-26px); }
    28%{ opacity:1; transform:scale(1) translateY(-22px); }
    70%{ opacity:1; transform:scale(1) translateY(-22px); }
    100%{ opacity:0; transform:scale(.95) translateY(-34px); }
  }

  .footer-credit{ font-size:11px; color:var(--ink-dim); text-align:center; max-width:390px; line-height:1.6; }
  .footer-credit b{ color:var(--ink); }

/* Test / developer panel */
.dev-panel{position:absolute;left:12px;right:12px;bottom:12px;z-index:60;display:none;padding:14px;border-radius:16px;background:rgba(14,17,25,.98);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 60px rgba(0,0,0,.5);color:var(--ink)}
.dev-panel.open{display:grid;gap:9px}.dev-title{font-family:'Bungee',sans-serif;color:var(--gold);font-size:15px}.dev-panel label{font-size:11px;color:var(--ink-dim)}
.dev-panel select,.dev-panel button{width:100%;min-height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#191d28;color:var(--ink);padding:0 10px;font:inherit}.dev-panel button{cursor:pointer;font-weight:800}.dev-panel #resetProgressBtn{color:#ff7d91;border-color:rgba(255,91,116,.45)}.dev-close{background:#242938!important}

/* Custom confirm dialog — replaces the native confirm() popup, which
   behaves inconsistently (or is blocked outright) once the game is
   embedded in a platform iframe. */
.confirm-modal{
  position:absolute; inset:0;
  z-index:120;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  background:rgba(6,7,12,.72);
}
.confirm-modal.open{ display:flex; }
.confirm-box{
  width:100%; max-width:300px;
  background:rgba(14,17,25,.98);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
  padding:20px 16px 16px;
  text-align:center;
}
.confirm-text{
  font-weight:800; font-size:14px; line-height:1.45;
  color:var(--ink); margin-bottom:16px;
}
.confirm-actions{ display:grid; gap:8px; }

  /* Safety guard: AURA LEGEND must render exactly one sprite set. */
  .character.unlock-legend.idle .charimg-base,
  .character.unlock-legend.idle .charimg-cap-base,
  .character.unlock-legend.idle .charimg-glasses-base,
  .character.unlock-legend.idle .charimg-main-base,
  .character.unlock-legend.victory .charimg-proud,
  .character.unlock-legend.victory .charimg-cap-proud,
  .character.unlock-legend.victory .charimg-glasses-proud,
  .character.unlock-legend.victory .charimg-main-proud,
  .character.unlock-legend.jumping .charimg-embarrassed,
  .character.unlock-legend.jumping .charimg-cap-embarrassed,
  .character.unlock-legend.jumping .charimg-glasses-embarrassed,
  .character.unlock-legend.jumping .charimg-main-embarrassed,
  .character.unlock-legend.falling .charimg-hurt,
  .character.unlock-legend.falling .charimg-cap-hurt,
  .character.unlock-legend.falling .charimg-glasses-hurt,
  .character.unlock-legend.falling .charimg-main-hurt{ opacity:0 !important; }

  .character.unlock-legend.idle .charimg-legend-base,
  .character.unlock-legend.victory .charimg-legend-proud,
  .character.unlock-legend.jumping .charimg-legend-embarrassed,
  .character.unlock-legend.falling .charimg-legend-hurt{ opacity:1 !important; }


  /* Safety guard: INFINITE AURA must render exactly one sprite set. */
  .character.unlock-infinite.idle .charimg-base,
  .character.unlock-infinite.idle .charimg-cap-base,
  .character.unlock-infinite.idle .charimg-glasses-base,
  .character.unlock-infinite.idle .charimg-main-base,
  .character.unlock-infinite.idle .charimg-legend-base,
  .character.unlock-infinite.victory .charimg-proud,
  .character.unlock-infinite.victory .charimg-cap-proud,
  .character.unlock-infinite.victory .charimg-glasses-proud,
  .character.unlock-infinite.victory .charimg-main-proud,
  .character.unlock-infinite.victory .charimg-legend-proud,
  .character.unlock-infinite.jumping .charimg-embarrassed,
  .character.unlock-infinite.jumping .charimg-cap-embarrassed,
  .character.unlock-infinite.jumping .charimg-glasses-embarrassed,
  .character.unlock-infinite.jumping .charimg-main-embarrassed,
  .character.unlock-infinite.jumping .charimg-legend-embarrassed,
  .character.unlock-infinite.falling .charimg-hurt,
  .character.unlock-infinite.falling .charimg-cap-hurt,
  .character.unlock-infinite.falling .charimg-glasses-hurt,
  .character.unlock-infinite.falling .charimg-main-hurt,
  .character.unlock-infinite.falling .charimg-legend-hurt{ opacity:0 !important; }

  .character.unlock-infinite.idle .charimg-infinite-base,
  .character.unlock-infinite.victory .charimg-infinite-proud,
  .character.unlock-infinite.jumping .charimg-infinite-embarrassed,
  .character.unlock-infinite.falling .charimg-infinite-hurt{ opacity:1 !important; }


  /* INFINITE AURA size equalizer:
     idle and embarrassed source renders occupy a slightly narrower canvas,
     so they need a small per-pose boost to visually match the other ranks. */
  .character.unlock-infinite.idle .charimg-infinite-base,
  .character.unlock-infinite.jumping .charimg-infinite-embarrassed{
    transform:scale(1.07);
    transform-origin:50% 100%;
  }


  /* AURA STYLE OVERRIDE: contour glow + particles only.
     User selected the combined contour-glow + particles variant.
     Disable floor glow / smoke halo and keep energy tight to the silhouette. */
  .aura-floor,
  .aura-backglow{ display:none !important; }

  /* Base character glow by rank.
     NPC (no unlock-* class yet, the rank most of an early run is spent at)
     used to get zero rim light here — just a plain drop shadow — so on a
     busy/dark scene background the sprite could all but disappear. Give it
     a faint neutral legibility rim, matching the spirit of the "AURA
     CONTRAST PASS" applied to every unlocked rank further below, just
     dimmer/cooler since this rank hasn't earned an aura yet. */
  .character .charimg{
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))
           drop-shadow(0 0 2px rgba(238,241,247,.38))
           drop-shadow(0 0 6px rgba(255,255,255,.12));
  }
  .character.unlock-cap .charimg{
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))
           drop-shadow(0 0 8px rgba(166,112,255,.20))
           drop-shadow(0 0 14px rgba(166,112,255,.12));
  }
  .character.unlock-glasses .charimg{
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))
           drop-shadow(0 0 10px rgba(180,120,255,.34))
           drop-shadow(0 0 18px rgba(180,120,255,.18));
  }
  .character.unlock-main .charimg{
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))
           drop-shadow(0 0 12px rgba(194,132,255,.42))
           drop-shadow(0 0 22px rgba(150,88,255,.24));
  }
  .character.unlock-legend .charimg{
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))
           drop-shadow(0 0 14px rgba(255,222,152,.20))
           drop-shadow(0 0 16px rgba(194,132,255,.54))
           drop-shadow(0 0 28px rgba(150,88,255,.28));
  }
  .character.unlock-infinite .charimg{
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))
           drop-shadow(0 0 12px rgba(255,238,194,.24))
           drop-shadow(0 0 18px rgba(212,152,255,.60))
           drop-shadow(0 0 30px rgba(154,92,255,.34));
    animation: infiniteAuraPulse 2s ease-in-out infinite;
  }

  /* Particle system close to the body */
  .particle{
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    opacity:0;
    z-index:2;
    background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(228,191,255,.92) 32%, rgba(186,120,255,.88) 68%, rgba(186,120,255,0) 100%);
    box-shadow:0 0 10px rgba(190,130,255,.42);
    transition:opacity .25s ease, transform .25s ease;
  }
  .character.unlock-particles .particle{ opacity:.72; }
  .character.unlock-cap .particle{ opacity:0 !important; }

  .particle.p1{ left:26%; top:20%; animation: auraSpark1 2.6s ease-in-out infinite; }
  .particle.p2{ left:74%; top:24%; animation: auraSpark2 2.8s ease-in-out infinite; }
  .particle.p3{ left:18%; top:48%; animation: auraSpark3 3s ease-in-out infinite; }
  .particle.p4{ left:82%; top:52%; animation: auraSpark4 2.7s ease-in-out infinite; }
  .particle.p5{ left:52%; top:12%; width:5px; height:5px; animation: auraSpark5 2.3s ease-in-out infinite; }

  .character.unlock-glasses .particle{
    opacity:.50 !important;
    transform:scale(.85);
  }
  .character.unlock-main .particle{
    opacity:.74 !important;
    transform:scale(1);
  }
  .character.unlock-legend .particle{
    opacity:.88 !important;
    transform:scale(1.08);
    box-shadow:0 0 12px rgba(255,225,156,.18), 0 0 16px rgba(190,130,255,.46);
  }
  .character.unlock-infinite .particle{
    opacity:1 !important;
    transform:scale(1.18);
    box-shadow:0 0 12px rgba(255,240,196,.28), 0 0 18px rgba(198,136,255,.54);
    animation-duration:2.2s;
  }

  @keyframes auraSpark1{
    0%,100%{ transform:translate(0,0) scale(.92); }
    50%{ transform:translate(7px,-7px) scale(1.18); }
  }
  @keyframes auraSpark2{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-7px,-10px) scale(.78); }
  }
  @keyframes auraSpark3{
    0%,100%{ transform:translate(0,0) scale(.84); }
    50%{ transform:translate(9px,-5px) scale(1.10); }
  }
  @keyframes auraSpark4{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-6px,-8px) scale(1.16); }
  }
  @keyframes auraSpark5{
    0%,100%{ transform:translate(0,0) scale(.9); opacity:.65; }
    50%{ transform:translate(0,-11px) scale(1.20); opacity:1; }
  }
  @keyframes infiniteAuraPulse{
    0%,100%{
      filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))
             drop-shadow(0 0 12px rgba(255,238,194,.24))
             drop-shadow(0 0 18px rgba(212,152,255,.60))
             drop-shadow(0 0 30px rgba(154,92,255,.34));
    }
    50%{
      filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))
             drop-shadow(0 0 14px rgba(255,241,208,.28))
             drop-shadow(0 0 22px rgba(222,164,255,.74))
             drop-shadow(0 0 38px rgba(154,92,255,.42));
    }
  }


  /* FINAL PARTICLE TUNING:
     1) absolutely no particles on the first aura stage (COOL / unlock-cap)
     2) replace round particles with small diamond crystal sparks */
  .character:not(.unlock-particles) .particle,
  .character.unlock-cap .particle{
    opacity:0 !important;
    animation:none !important;
  }

  .character.unlock-particles .particle{
    display:block;
    opacity:.72 !important;
  }

  .particle{
    width:8px;
    height:8px;
    border-radius:0 !important;
    background:linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(236,209,255,.96) 30%, rgba(192,126,255,.92) 68%, rgba(156,88,255,.85) 100%) !important;
    clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow:0 0 10px rgba(190,130,255,.46), 0 0 16px rgba(255,236,194,.12) !important;
  }

  .character.unlock-glasses .particle{
    opacity:.46 !important;
    transform:scale(.82);
  }
  .character.unlock-main .particle{
    opacity:.72 !important;
    transform:scale(1);
  }
  .character.unlock-legend .particle{
    opacity:.88 !important;
    transform:scale(1.10);
    box-shadow:0 0 12px rgba(190,130,255,.52), 0 0 18px rgba(255,225,156,.18) !important;
  }
  .character.unlock-infinite .particle{
    opacity:1 !important;
    width:9px;
    height:9px;
    transform:scale(1.18);
    background:linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,239,196,.98) 18%, rgba(228,192,255,.96) 46%, rgba(194,130,255,.94) 74%, rgba(160,92,255,.90) 100%) !important;
    box-shadow:0 0 12px rgba(255,240,196,.28), 0 0 18px rgba(198,136,255,.60) !important;
  }


  /* FINAL PARTICLE SHAPE: lightning bolts */
  .particle{
    width:8px !important;
    height:14px !important;
    border-radius:0 !important;
    clip-path:polygon(58% 0%, 22% 48%, 48% 48%, 34% 100%, 82% 38%, 56% 38%) !important;
    background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(239,216,255,.98) 22%, rgba(201,142,255,.96) 58%, rgba(156,88,255,.92) 100%) !important;
    box-shadow:none !important;
    filter:drop-shadow(0 0 4px rgba(217,165,255,.90)) drop-shadow(0 0 8px rgba(167,95,255,.55));
    transform-origin:50% 50%;
  }

  .character.unlock-glasses .particle{
    opacity:.42 !important;
  }
  .character.unlock-main .particle{
    opacity:.70 !important;
  }
  .character.unlock-legend .particle{
    opacity:.90 !important;
    filter:drop-shadow(0 0 5px rgba(255,231,174,.65)) drop-shadow(0 0 9px rgba(180,112,255,.70));
  }
  .character.unlock-infinite .particle{
    width:9px !important;
    height:16px !important;
    opacity:1 !important;
    background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,239,196,1) 18%, rgba(225,184,255,.98) 48%, rgba(184,112,255,.96) 78%, rgba(143,77,255,.92) 100%) !important;
    filter:drop-shadow(0 0 5px rgba(255,238,191,.78)) drop-shadow(0 0 10px rgba(187,118,255,.78));
  }

  /* Give each bolt a slightly different angle while it floats. */
  .particle.p1{ rotate:-14deg; }
  .particle.p2{ rotate:12deg; }
  .particle.p3{ rotate:18deg; }
  .particle.p4{ rotate:-10deg; }
  .particle.p5{ rotate:6deg; }


  /* ENERGY TONGUES AURA
     Slow translucent purple/blue energy wisps rise from the feet toward the
     shoulders and dissolve. These are deliberately smoke/energy-like, not fire. */
  .energy-tongues{
    position:absolute;
    left:50%;
    bottom:0;
    width:96%;
    height:92%;
    transform:translateX(-50%);
    z-index:0;
    pointer-events:none;
    overflow:visible;
  }
  .energy-tongue{
    position:absolute;
    bottom:2%;
    width:24px;
    height:70%;
    border-radius:55% 45% 56% 44% / 78% 74% 26% 22%;
    opacity:0;
    transform-origin:50% 100%;
    filter:blur(8px);
    mix-blend-mode:screen;
    background:
      radial-gradient(ellipse at 50% 92%, rgba(125,78,255,.58) 0%, rgba(125,78,255,.30) 28%, rgba(125,78,255,0) 64%),
      linear-gradient(to top, rgba(96,72,255,.58) 0%, rgba(120,86,255,.42) 28%, rgba(76,155,255,.28) 58%, rgba(120,86,255,0) 100%);
    box-shadow:0 0 18px rgba(124,85,255,.15);
    will-change:transform,opacity,filter;
  }
  .energy-tongue::after{
    content:'';
    position:absolute;
    inset:10% 26% 14% 26%;
    border-radius:60% 40% 55% 45% / 75% 68% 32% 25%;
    background:linear-gradient(to top, rgba(210,190,255,.28), rgba(135,180,255,.16) 52%, rgba(135,180,255,0));
    filter:blur(4px);
  }

  .energy-tongue.t1{ left:10%; height:56%; width:24px; animation:energyRiseA 4.8s ease-in-out infinite; animation-delay:-.7s; }
  .energy-tongue.t2{ left:24%; height:74%; width:29px; animation:energyRiseB 5.4s ease-in-out infinite; animation-delay:-2.1s; }
  .energy-tongue.t3{ left:41%; height:82%; width:31px; animation:energyRiseA 5.8s ease-in-out infinite; animation-delay:-3.4s; }
  .energy-tongue.t4{ left:57%; height:78%; width:30px; animation:energyRiseB 5.2s ease-in-out infinite; animation-delay:-1.3s; }
  .energy-tongue.t5{ left:72%; height:68%; width:27px; animation:energyRiseA 5.7s ease-in-out infinite; animation-delay:-4.0s; }
  .energy-tongue.t6{ left:84%; height:52%; width:22px; animation:energyRiseB 4.9s ease-in-out infinite; animation-delay:-2.8s; }

  /* COOL: contour only, no tongues. */
  .character.unlock-cap .energy-tongue{ opacity:0 !important; animation-play-state:paused; }

  /* AURA FARMER: first faint wisps. */
  .character.unlock-glasses .energy-tongue.t2,
  .character.unlock-glasses .energy-tongue.t4{
    animation-play-state:running;
    --tongue-max:.24;
  }
  .character.unlock-glasses .energy-tongue:not(.t2):not(.t4){ display:none; }

  /* MAIN CHARACTER: three medium wisps. */
  .character.unlock-main .energy-tongue.t2,
  .character.unlock-main .energy-tongue.t3,
  .character.unlock-main .energy-tongue.t5{
    animation-play-state:running;
    --tongue-max:.34;
  }
  .character.unlock-main .energy-tongue:not(.t2):not(.t3):not(.t5){ display:none; }

  /* AURA LEGEND: five visible wisps. */
  .character.unlock-legend .energy-tongue{
    display:block;
    animation-play-state:running;
    --tongue-max:.48;
    filter:blur(7px);
  }
  .character.unlock-legend .energy-tongue.t6{ display:none; }

  /* INFINITE AURA: full body-height energy, still soft rather than flame-like. */
  .character.unlock-infinite .energy-tongue{
    display:block;
    animation-play-state:running;
    --tongue-max:.62;
    filter:blur(6px);
    background:
      radial-gradient(ellipse at 50% 92%, rgba(151,94,255,.68) 0%, rgba(120,78,255,.38) 30%, rgba(120,78,255,0) 66%),
      linear-gradient(to top, rgba(112,74,255,.68) 0%, rgba(133,95,255,.48) 30%, rgba(72,164,255,.34) 62%, rgba(190,128,255,0) 100%);
    box-shadow:0 0 22px rgba(136,92,255,.22);
  }

  /* Lightning accents are kept only on the final two ranks so the new flowing
     aura remains the primary effect. */
  .character.unlock-glasses .particle,
  .character.unlock-main .particle{ opacity:0 !important; }
  .character.unlock-legend .particle{ opacity:.46 !important; }
  .character.unlock-infinite .particle{ opacity:.72 !important; }

  @keyframes energyRiseA{
    0%{ opacity:0; transform:translate3d(0,12px,0) scaleX(.72) scaleY(.76) skewX(-5deg); }
    16%{ opacity:calc(var(--tongue-max, .36) * .75); }
    45%{ opacity:var(--tongue-max,.36); transform:translate3d(7px,-28px,0) scaleX(1.05) scaleY(1.02) skewX(5deg); }
    72%{ opacity:calc(var(--tongue-max, .36) * .52); transform:translate3d(-5px,-58px,0) scaleX(.84) scaleY(1.16) skewX(-7deg); }
    100%{ opacity:0; transform:translate3d(4px,-86px,0) scaleX(.54) scaleY(1.32) skewX(6deg); filter:blur(12px); }
  }
  @keyframes energyRiseB{
    0%{ opacity:0; transform:translate3d(0,10px,0) scaleX(.66) scaleY(.72) skewX(6deg); }
    18%{ opacity:calc(var(--tongue-max, .36) * .72); }
    48%{ opacity:var(--tongue-max,.36); transform:translate3d(-8px,-32px,0) scaleX(1.08) scaleY(1.04) skewX(-6deg); }
    76%{ opacity:calc(var(--tongue-max, .36) * .48); transform:translate3d(6px,-60px,0) scaleX(.80) scaleY(1.18) skewX(8deg); }
    100%{ opacity:0; transform:translate3d(-3px,-88px,0) scaleX(.50) scaleY(1.34) skewX(-5deg); filter:blur(12px); }
  }


  /* AURA CONTRAST PASS
     Keep the selected energy-tongues style, but separate it from cold/dark school backgrounds.
     The character gets a tight pale-violet inner rim; the outer aura stays purple/blue. */
  .character.unlock-cap .charimg{
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.52))
           drop-shadow(0 0 2px rgba(243,235,255,.56))
           drop-shadow(0 0 7px rgba(182,126,255,.30)) !important;
  }
  .character.unlock-glasses .charimg{
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.54))
           drop-shadow(0 0 2px rgba(247,240,255,.70))
           drop-shadow(0 0 8px rgba(201,151,255,.48))
           drop-shadow(0 0 15px rgba(125,82,238,.22)) !important;
  }
  .character.unlock-main .charimg{
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.56))
           drop-shadow(0 0 2px rgba(250,245,255,.82))
           drop-shadow(0 0 9px rgba(214,166,255,.58))
           drop-shadow(0 0 18px rgba(127,75,244,.30)) !important;
  }
  .character.unlock-legend .charimg{
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.58))
           drop-shadow(0 0 2px rgba(255,250,237,.92))
           drop-shadow(0 0 8px rgba(255,224,153,.32))
           drop-shadow(0 0 11px rgba(222,173,255,.72))
           drop-shadow(0 0 22px rgba(129,73,247,.38)) !important;
  }
  .character.unlock-infinite .charimg{
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.60))
           drop-shadow(0 0 2px rgba(255,255,255,.98))
           drop-shadow(0 0 8px rgba(255,235,183,.42))
           drop-shadow(0 0 12px rgba(229,185,255,.82))
           drop-shadow(0 0 26px rgba(128,70,250,.46)) !important;
    animation:contrastAuraPulse 2.15s ease-in-out infinite !important;
  }

  /* Make the rising energy easier to read against blue/purple scenery without turning it into fire. */
  .energy-tongue{
    background:
      linear-gradient(180deg,
        rgba(226,210,255,0) 0%,
        rgba(195,167,255,.18) 24%,
        rgba(143,112,255,.34) 52%,
        rgba(92,144,255,.30) 74%,
        rgba(83,61,205,0) 100%) !important;
    box-shadow:
      0 0 8px rgba(226,209,255,.18),
      0 0 16px rgba(131,94,255,.20),
      inset 0 0 10px rgba(255,255,255,.08) !important;
    filter:blur(4px) saturate(1.25) brightness(1.12) !important;
  }
  .energy-tongue::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(240,231,255,.22) 40%,
      rgba(191,166,255,.26) 67%,
      rgba(124,101,255,0) 100%) !important;
  }
  .character.unlock-main .energy-tongue{ --tongue-max:.40 !important; }
  .character.unlock-legend .energy-tongue{ --tongue-max:.56 !important; }
  .character.unlock-infinite .energy-tongue{ --tongue-max:.72 !important; }

  /* A tiny dark contact shadow behind the sprite improves separation on bright corridors too. */
  .character::before{
    content:'';
    position:absolute;
    inset:7% 17% 5% 17%;
    border-radius:44% 44% 38% 38%;
    background:rgba(8,7,18,.16);
    filter:blur(14px);
    opacity:0;
    z-index:0;
    pointer-events:none;
  }
  .character.unlock-glasses::before{ opacity:.20; }
  .character.unlock-main::before{ opacity:.25; }
  .character.unlock-legend::before{ opacity:.28; }
  .character.unlock-infinite::before{ opacity:.32; }

  @keyframes contrastAuraPulse{
    0%,100%{
      filter:drop-shadow(0 10px 12px rgba(0,0,0,.60))
             drop-shadow(0 0 2px rgba(255,255,255,.94))
             drop-shadow(0 0 8px rgba(255,235,183,.38))
             drop-shadow(0 0 12px rgba(229,185,255,.76))
             drop-shadow(0 0 24px rgba(128,70,250,.42));
    }
    50%{
      filter:drop-shadow(0 10px 12px rgba(0,0,0,.60))
             drop-shadow(0 0 3px rgba(255,255,255,1))
             drop-shadow(0 0 10px rgba(255,239,194,.48))
             drop-shadow(0 0 15px rgba(234,195,255,.92))
             drop-shadow(0 0 30px rgba(136,78,255,.54));
    }
  }


/* ================================================================
   UI REDESIGN V2 — HUD / situation / choices / day progress
   ================================================================ */
.hud-v2{
  display:grid;
  grid-template-columns:1fr 1.35fr 1fr;
  align-items:start;
  gap:10px;
  padding:12px 14px 10px;
  min-height:92px;
}
.hud-left,.hud-right{display:flex;flex-direction:column;gap:5px;min-width:0}
.hud-right{align-items:flex-end;position:relative;padding-right:34px}
.aura-chip{
  display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;
  padding:7px 10px;border-radius:11px;
  background:rgba(255,203,71,.08);border:1px solid rgba(255,203,71,.38);
  color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:800;
  box-shadow:0 5px 16px rgba(0,0,0,.16);
}
.aura-label{font-family:'Manrope',sans-serif;font-size:10px;font-weight:800;letter-spacing:.7px}
.hud-v2 .hud-hearts{font-size:17px;letter-spacing:3px;height:20px;padding-left:4px}
.hud-v2 .hud-heart{filter:drop-shadow(0 0 5px rgba(255,93,120,.22))}
.hud-v2 .hud-risk{font-size:9px;height:10px;padding-left:4px;letter-spacing:.4px}
.rank-center{display:flex;flex-direction:column;align-items:center;min-width:0;padding-top:1px}
.rank-center .hud-label{font-size:8px;letter-spacing:1.6px;margin-bottom:2px}
.rank-center .hud-rank{
  color:#fff;font-family:'Bungee',sans-serif;font-size:12px;line-height:1.2;text-align:center;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.rank-progress-track{
  width:100%;height:5px;margin-top:7px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.09);box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.rank-progress-fill{
  width:0;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#9f68ff,#ffcb47);
  box-shadow:0 0 8px rgba(185,140,255,.6);transition:width .35s ease;
}
.rank-progress-text{margin-top:4px;color:var(--ink-dim);font-family:'JetBrains Mono',monospace;font-size:8.5px;white-space:nowrap}
.hud-krutost-hidden{display:none}
.streak-chip{
  display:inline-flex;align-items:center;gap:4px;padding:6px 8px;border-radius:10px;
  border:1px solid rgba(185,140,255,.28);background:rgba(185,140,255,.07);
  color:#d4b8ff;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:800;
  opacity:.38;transition:opacity .2s,border-color .2s,box-shadow .2s;
}
.streak-chip.show{opacity:1;border-color:rgba(185,140,255,.55);box-shadow:0 0 12px rgba(185,140,255,.12)}
.hud-v2 .hud-confidence{font-size:8px;height:10px;margin-right:1px}
.hud-v2 .gear{position:absolute;right:0;top:0;width:29px;height:29px}

/* Situation card: short headline + compact description */
.banner.situation-card{
  top:12px;left:14px;right:14px;padding:10px 14px 11px;
  border:1px solid rgba(255,255,255,.13);border-left:3px solid rgba(255,203,71,.9);
  border-radius:13px;background:linear-gradient(180deg,rgba(16,18,30,.90),rgba(11,13,23,.84));
  box-shadow:0 7px 20px rgba(0,0,0,.30);text-align:left;backdrop-filter:blur(3px);
}
.situation-title{
  font-family:'Bungee',sans-serif;color:#fff;font-size:16px;line-height:1.05;letter-spacing:.4px;
  text-shadow:0 2px 7px rgba(0,0,0,.5);
}
.situation-desc{margin-top:4px;color:#c9ceda;font-size:11.5px;font-weight:700;line-height:1.28;text-wrap:balance}
.banner.situation-card .spark,.banner.situation-card .line1{display:none!important}

/* Compact choice cards */
.panel{padding:10px 12px 12px;min-height:188px;gap:7px}
.choice-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.choice-cards .card{
  min-height:128px;padding:11px 9px 0;border-radius:15px;gap:4px;justify-content:flex-start;
  box-shadow:none;overflow:hidden;
}
.choice-top{display:flex;align-items:center;justify-content:center;gap:6px;min-height:27px}
.choice-cards .card-icon{width:24px;height:24px;margin:0}
.choice-cards .card .tag{font-size:9px;letter-spacing:1.5px;padding:2px 7px}
.choice-cards .card .name{font-size:13px;line-height:1.15;min-height:30px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.choice-sub{font-size:9px;line-height:1.2;color:var(--ink-dim);min-height:22px;display:flex;align-items:center;justify-content:center}
.choice-cards .card .reward{
  width:calc(100% + 18px);margin:auto -9px 0;padding:8px 8px;border-radius:0;
  justify-content:center;font-size:12px;border-top:1px solid rgba(255,255,255,.08);
}
.card.safe{
  border-color:rgba(56,224,164,.62);background:linear-gradient(180deg,rgba(56,224,164,.09),var(--panel-raised) 64%);
  box-shadow:0 0 10px rgba(56,224,164,.06);
}
.card.safe:hover{box-shadow:0 0 13px rgba(56,224,164,.10)}
.card.risky{
  border-color:rgba(185,140,255,.95);
  background:radial-gradient(circle at 50% 25%,rgba(185,140,255,.22),transparent 55%),linear-gradient(180deg,rgba(185,140,255,.16),var(--panel-raised) 67%);
  box-shadow:0 0 18px rgba(185,140,255,.22),inset 0 0 20px rgba(185,140,255,.04);
}
.card.risky:hover{filter:brightness(1.08);box-shadow:0 0 24px rgba(185,140,255,.30)}
.card.risky .reward{background:rgba(185,140,255,.13)}
.card.safe .reward{background:rgba(56,224,164,.09)}
.risk-badge{
  position:absolute;right:7px;top:7px;padding:3px 6px;border-radius:999px;
  background:#2b203c;border:1px solid rgba(185,140,255,.42);color:#d7bfff;
  font-size:7px;font-weight:900;letter-spacing:.6px;z-index:2;
}
.risk-low{color:#71e7b7;border-color:rgba(56,224,164,.42);background:rgba(17,64,53,.82)}
.risk-high{color:#ff9aae;border-color:rgba(255,93,120,.55);background:rgba(80,27,42,.88)}
.risk-legendary,.risk-insane,.critical-risk{color:#ffd1dc;border-color:rgba(255,93,120,.72);background:rgba(92,24,45,.92)}
.safe-status{text-align:center;color:var(--safe);font-size:8.5px;font-weight:800;letter-spacing:.4px;height:10px}
.critical-strip{text-align:center;color:#ff8399;font-family:'Bungee',sans-serif;font-size:10px;letter-spacing:1px;margin-bottom:-1px;text-shadow:0 0 12px rgba(255,93,120,.35)}
.critical-choice{grid-template-columns:1fr;padding:0 52px}
.critical-choice .card.risky{min-height:126px;border-color:rgba(255,93,120,.72);box-shadow:0 0 20px rgba(255,93,120,.16),0 0 22px rgba(185,140,255,.17)}

/* 15-step school day progress */
.day-progress{margin-top:0;padding:5px 2px 0}
.day-progress-head{display:flex;align-items:center;justify-content:space-between;padding:0 2px 4px}
.day-label{font-family:'Bungee',sans-serif;color:#fff;font-size:9.5px;letter-spacing:.6px}
.day-counter{font-family:'JetBrains Mono',monospace;color:var(--ink-dim);font-size:8.5px}
.day-dots{display:grid;grid-template-columns:repeat(15,1fr);align-items:start;gap:2px;min-height:24px}
.day-step{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.day-dot{width:7px;height:7px;border-radius:50%;background:#343946;border:1px solid rgba(255,255,255,.08);transition:.25s}
.day-dot.done{background:#8a70be;border-color:#a989e2}
.day-dot.current{background:#f5d77d;border-color:#fff1bc;box-shadow:0 0 8px rgba(255,203,71,.75);animation:currentDotPulse 1.2s ease-in-out infinite}
.day-dot.critical{width:8px;height:8px;border-color:#9c4054;background:#482632}
.day-dot.critical.done{background:#bd5069;border-color:#ff758f}
.day-dot.critical.current{background:#ff5d78;border-color:#ffd0d8;box-shadow:0 0 10px rgba(255,93,120,.9)}
.day-dot.critical.incoming{animation:criticalIncoming .85s ease-in-out infinite;background:#722f43;border-color:#ff7992;box-shadow:0 0 8px rgba(255,93,120,.45)}
.critical-label{font-size:4.4px;letter-spacing:.05px;color:#8c5964;line-height:1;text-align:center;transform:scale(.9)}
.day-step:has(.day-dot.critical.current) .critical-label,.day-step:has(.day-dot.critical.incoming) .critical-label{color:#ff7f96}
@keyframes currentDotPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:1}}
@keyframes criticalIncoming{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.45);opacity:1}}

/* Keep scene visually dominant despite denser HUD. */
.scene{margin:0 12px}
.result-big .title{top:20%}
.result-big .delta{top:33%}

@media(max-width:420px){
  .hud-v2{grid-template-columns:1fr 1.25fr 1fr;gap:7px;padding-left:11px;padding-right:11px}
  .aura-chip{font-size:11.5px;padding:6px 8px}
  .rank-center .hud-rank{font-size:10.5px}
  .rank-progress-text{font-size:7.8px}
  .streak-chip{font-size:8.5px;padding:5px 6px}
  .critical-choice{padding:0 38px}
}


/* ================================================================
   UI REFINEMENT — readability / hierarchy / cleaner release HUD
   ================================================================ */
.footer-credit{ display:none !important; }
.hud-v2{ grid-template-columns:1fr 1.45fr 1fr; gap:12px; padding:12px 15px 8px; min-height:96px; }
.hud-v2 .hud-risk,
.hud-v2 .hud-confidence{ display:none !important; }
.aura-chip{ padding:8px 11px; font-size:14px; }
.aura-label{ font-size:10px; }
.hud-v2 .hud-hearts{ font-size:20px; letter-spacing:3.5px; height:24px; padding-left:2px; }
.rank-center .hud-label{ font-size:8px; letter-spacing:1.7px; margin-bottom:3px; }
.rank-center .hud-rank{ font-size:13.5px; line-height:1.18; }
.rank-progress-track{ height:6px; margin-top:8px; }
.rank-progress-text{ margin-top:5px; font-size:9.5px; min-height:16px; }
.max-rank-badge{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,203,71,.44); background:rgba(255,203,71,.10); color:var(--gold); font-family:'Manrope',sans-serif; font-size:9px; font-weight:900; letter-spacing:.9px; }
.streak-chip{ padding:7px 9px; font-size:10px; border-color:rgba(185,140,255,.34); background:rgba(185,140,255,.08); }
.hud-v2 .gear{ width:30px; height:30px; }

.banner.situation-card{
  top:18px; left:14px; right:14px; padding:12px 15px 13px;
  background:linear-gradient(180deg, rgba(16,18,30,.84), rgba(11,13,23,.74));
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  backdrop-filter:blur(2px);
}
.situation-title{ font-size:20px; line-height:1.02; letter-spacing:.45px; }
.situation-desc{ margin-top:5px; font-size:13px; line-height:1.42; }

.panel{ padding:10px 12px 12px; min-height:190px; gap:8px; }
.choice-cards{ gap:10px; }
.choice-cards .card{ min-height:132px; padding:11px 10px 0; }
.choice-cards .card .tag{ font-size:9px; letter-spacing:1.45px; padding:2px 7px; }
.choice-cards .card .name{ font-size:13.2px; line-height:1.12; min-height:30px; padding:0 6px; }
.choice-sub{ font-size:9.6px; line-height:1.15; color:#aeb8ca; min-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.choice-cards .card .reward{ width:calc(100% + 20px); margin:auto -10px 0; padding:9px 8px; font-size:14px; font-weight:900; }
.choice-cards .card .reward svg{ width:13px; height:13px; }
.card.safe{
  border-color:rgba(56,224,164,.54);
  background:linear-gradient(180deg, rgba(56,224,164,.07), rgba(24,28,38,.98) 66%);
  box-shadow:0 0 8px rgba(56,224,164,.05);
}
.card.safe .reward{ background:rgba(56,224,164,.08); }
.card.risky{
  border-color:rgba(185,140,255,1);
  background:radial-gradient(circle at 50% 24%, rgba(185,140,255,.28), transparent 54%), linear-gradient(180deg, rgba(185,140,255,.21), rgba(24,28,38,.98) 68%);
  box-shadow:0 0 22px rgba(185,140,255,.27), inset 0 0 26px rgba(185,140,255,.06);
}
.card.risky:hover{ filter:brightness(1.1); box-shadow:0 0 28px rgba(185,140,255,.34), inset 0 0 26px rgba(185,140,255,.08); }
.card.risky .reward{ background:rgba(185,140,255,.16); }
.risk-badge{
  right:8px; top:8px; padding:4px 8px; font-size:8.8px; font-weight:900; letter-spacing:.5px;
  background:#322246; border-color:rgba(185,140,255,.5); color:#e4d2ff;
}
.risk-badge::before{ content:'⚠ '; }
.critical-choice .card.risky{ min-height:130px; }
.safe-status{ font-size:9px; height:12px; }

.day-progress{ margin-top:2px; padding:6px 3px 0; }
.day-progress-head{ padding:0 2px 6px; }
.day-label{ font-size:10.5px; }
.day-counter{ font-size:9.5px; }
.day-dots{ gap:3px; min-height:36px; }
.day-step{ gap:1px; }
.day-dot{ width:10px; height:10px; }
.day-dot.done{ background:#9679cf; border-color:#b898ef; }
.day-dot.current{ box-shadow:0 0 10px rgba(255,203,71,.9), 0 0 18px rgba(255,203,71,.24); animation:currentDotPulseStrong 1s ease-in-out infinite; }
.day-dot.critical{ width:11px; height:11px; }
.day-dot.critical.current{ box-shadow:0 0 12px rgba(255,93,120,.95), 0 0 20px rgba(255,93,120,.28); }
.day-dot.critical.incoming{ animation:criticalIncomingStrong .9s ease-in-out infinite; }
.day-num,.critical-num{ font-family:'JetBrains Mono',monospace; font-size:7.4px; line-height:1; color:#70788c; }
.day-step:has(.day-dot.done) .day-num{ color:#a4add0; }
.day-step:has(.day-dot.current) .day-num{ color:#fff0bf; }
.critical-num{ color:#d191a1; font-weight:800; }
.critical-label{ font-size:5.6px; letter-spacing:.25px; color:#a46a77; transform:none; }
.day-step:has(.day-dot.critical.done) .critical-num{ color:#ffc0cc; }
.day-step:has(.day-dot.critical.current) .critical-num,
.day-step:has(.day-dot.critical.incoming) .critical-num,
.day-step:has(.day-dot.critical.current) .critical-label,
.day-step:has(.day-dot.critical.incoming) .critical-label{ color:#ff9fb0; }
@keyframes currentDotPulseStrong{ 0%,100%{ transform:scale(1); opacity:.95; } 50%{ transform:scale(1.45); opacity:1; } }
@keyframes criticalIncomingStrong{ 0%,100%{ transform:scale(1); opacity:.72; } 50%{ transform:scale(1.55); opacity:1; } }

/* Story prop placement zones for more stable composition */
.prop{ transition:left .25s ease, right .25s ease, bottom .25s ease, transform .25s ease, opacity .25s ease; }
.prop.prop-zone-left{ left:16%; right:auto; bottom:21%; transform:none; z-index:2; }
.prop.prop-zone-right{ left:auto; right:12%; bottom:21%; transform:none; z-index:2; }
.prop.prop-zone-front{ left:50%; right:auto; bottom:14%; transform:translateX(-50%) scale(1.08); z-index:4; }

@media(max-width:420px){
  .situation-title{ font-size:18.5px; }
  .situation-desc{ font-size:12.5px; }
  .choice-cards .card .name{ font-size:12.6px; }
  .choice-sub{ font-size:9px; }
  .choice-cards .card .reward{ font-size:13.5px; }
  .day-dot{ width:9px; height:9px; }
  .day-dot.critical{ width:10px; height:10px; }
  .critical-label{ font-size:5px; }
  .day-num,.critical-num{ font-size:6.8px; }
}


/* ================================================================
   UI TUNE PASS — larger character, cleaner prop logic, phone readability
   ================================================================ */
/* 1) Character scale up without redesigning sprite or aura */
.character{
  width:172px !important;
  height:258px !important;
  margin-left:-86px !important;
  bottom:13.2% !important;
}
.character.unlock-legend{
  width:194px !important;
  height:292px !important;
  margin-left:-97px !important;
}
.character.unlock-infinite{
  width:198px !important;
  height:292px !important;
  margin-left:-99px !important;
}

/* 2) Situation card: slightly lower and shorter, description larger */
.banner.situation-card{
  top:22px !important;
  padding:10px 15px 11px !important;
  background:linear-gradient(180deg, rgba(16,18,30,.80), rgba(11,13,23,.70)) !important;
}
.situation-desc{
  font-size:14.5px !important;
  line-height:1.46 !important;
}

/* 3) Story prop: hide placeholders, keep stable placement zones */
.prop.is-hidden{ display:none !important; }

/* 4) Choice cards: slightly taller, stronger hierarchy */
.choice-cards .card{
  min-height:148px !important;
  padding:12px 10px 0 !important;
}
.choice-cards .card .name{
  font-size:15px !important;
  line-height:1.1 !important;
  min-height:34px !important;
}
.choice-sub{
  font-size:10.8px !important;
  line-height:1.2 !important;
  min-height:22px !important;
  color:#bac4d4 !important;
}
.choice-cards .card .reward{
  padding:10px 8px !important;
  font-size:16.5px !important;
  font-weight:900 !important;
}
.choice-cards .card .reward svg{
  width:14px !important;
  height:14px !important;
}
.card.safe{
  box-shadow:0 0 8px rgba(56,224,164,.04) !important;
}
.card.risky{
  box-shadow:0 0 24px rgba(185,140,255,.30), inset 0 0 28px rgba(185,140,255,.07) !important;
  background:radial-gradient(circle at 50% 22%, rgba(185,140,255,.30), transparent 55%), linear-gradient(180deg, rgba(185,140,255,.23), rgba(24,28,38,.98) 68%) !important;
}
.risk-badge{
  padding:5px 9px !important;
  font-size:10.1px !important;
  letter-spacing:.55px !important;
}
.critical-choice .card.risky{ min-height:144px !important; }

/* 5) Bigger, clearer hearts */
.hud-v2 .hud-hearts{
  font-size:22px !important;
  letter-spacing:4px !important;
  height:26px !important;
}

/* 6) Day progress simplified for phones */
.day-progress{
  margin-top:3px !important;
  padding:7px 3px 0 !important;
}
.day-progress-head{
  padding:0 2px 7px !important;
}
.day-label{ font-size:11px !important; }
.day-counter{ font-size:10px !important; }
.day-dots{
  gap:4px !important;
  min-height:42px !important;
  align-items:start !important;
}
.day-step{ gap:2px !important; }
.day-dot{
  width:11px !important;
  height:11px !important;
  background:#323745 !important;
  border-color:rgba(255,255,255,.10) !important;
}
.day-dot.done{
  background:#9b7fe0 !important;
  border-color:#c2a9ff !important;
}
.day-dot.current{
  background:#ffd86e !important;
  border-color:#fff4ca !important;
  box-shadow:0 0 12px rgba(255,203,71,.95), 0 0 22px rgba(170,106,255,.20) !important;
  animation:currentDotPulseStrong 1s ease-in-out infinite !important;
}
.day-dot.critical{
  width:15px !important;
  height:15px !important;
  background:#572c38 !important;
  border-color:#a74b63 !important;
}
.day-dot.critical.done{
  background:#d05a78 !important;
  border-color:#ff9ab0 !important;
}
.day-dot.critical.current{
  background:#ff6a87 !important;
  border-color:#ffd2dc !important;
  box-shadow:0 0 14px rgba(255,93,120,.95), 0 0 22px rgba(255,93,120,.30) !important;
}
.day-dot.critical.incoming{
  background:#7b3649 !important;
  border-color:#ff89a1 !important;
  box-shadow:0 0 10px rgba(255,93,120,.55) !important;
  animation:criticalIncomingStrong .9s ease-in-out infinite !important;
}
.day-num{ display:none !important; }
.critical-num{
  display:block !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:8.5px !important;
  line-height:1 !important;
  color:#f2bcc8 !important;
  font-weight:900 !important;
}
.critical-label{
  font-size:6.2px !important;
  letter-spacing:.28px !important;
  color:#c28191 !important;
}
.day-step:has(.day-dot.critical.current) .critical-num,
.day-step:has(.day-dot.critical.incoming) .critical-num,
.day-step:has(.day-dot.critical.current) .critical-label,
.day-step:has(.day-dot.critical.incoming) .critical-label{
  color:#ffb0c0 !important;
}

@media(max-width:420px){
  .character{ width:166px !important; height:249px !important; margin-left:-83px !important; }
  .character.unlock-legend{ width:188px !important; height:282px !important; margin-left:-94px !important; }
  .character.unlock-infinite{ width:192px !important; height:282px !important; margin-left:-96px !important; }
  .situation-desc{ font-size:14px !important; }
  .choice-cards .card{ min-height:144px !important; }
  .choice-cards .card .name{ font-size:14.2px !important; }
  .choice-sub{ font-size:10.2px !important; }
  .choice-cards .card .reward{ font-size:15.3px !important; }
  .risk-badge{ font-size:9.4px !important; }
  .day-dot{ width:10px !important; height:10px !important; }
  .day-dot.critical{ width:14px !important; height:14px !important; }
  .critical-num{ font-size:8px !important; }
  .critical-label{ font-size:5.7px !important; }
}


/* ================================================================
   FOLLOW-UP SCALE / READABILITY PASS
   ================================================================ */
/* 1) Character bigger in scene */
.character{
  width:198px !important;
  height:297px !important;
  margin-left:-99px !important;
  bottom:11.8% !important;
}
.character.unlock-legend{
  width:223px !important;
  height:334px !important;
  margin-left:-111.5px !important;
}
.character.unlock-infinite{
  width:228px !important;
  height:336px !important;
  margin-left:-114px !important;
}

/* 2) Bigger Russian situation body text */
.situation-desc{
  font-size:16.6px !important;
  line-height:1.48 !important;
}

/* 3) Bigger SAFE / RISKY action names */
.choice-cards .card .name{
  font-size:16.9px !important;
  line-height:1.08 !important;
  min-height:38px !important;
}

/* 4) Bigger story props */
.prop{
  font-size:56px !important;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.55)) !important;
}
.prop.prop-zone-left{ left:14% !important; bottom:20% !important; }
.prop.prop-zone-right{ right:10% !important; bottom:20% !important; }
.prop.prop-zone-front{ bottom:13% !important; transform:translateX(-50%) scale(1.2) !important; }

/* 5) Bigger day progress */
.day-progress{
  padding:8px 4px 1px !important;
}
.day-progress-head{
  padding:0 2px 8px !important;
}
.day-label{ font-size:12.5px !important; }
.day-counter{ font-size:11.5px !important; }
.day-dots{
  gap:5px !important;
  min-height:50px !important;
}
.day-step{ gap:3px !important; }
.day-dot{
  width:13px !important;
  height:13px !important;
}
.day-dot.current{
  box-shadow:0 0 14px rgba(255,203,71,.98), 0 0 24px rgba(170,106,255,.24) !important;
}
.day-dot.critical{
  width:18px !important;
  height:18px !important;
}
.day-dot.critical.current{
  box-shadow:0 0 16px rgba(255,93,120,.98), 0 0 24px rgba(255,93,120,.34) !important;
}
.critical-num{
  font-size:10px !important;
}
.critical-label{
  font-size:7.4px !important;
  letter-spacing:.34px !important;
}

@media(max-width:420px){
  .character{ width:190px !important; height:285px !important; margin-left:-95px !important; bottom:11.5% !important; }
  .character.unlock-legend{ width:214px !important; height:321px !important; margin-left:-107px !important; }
  .character.unlock-infinite{ width:219px !important; height:323px !important; margin-left:-109.5px !important; }
  .situation-desc{ font-size:15.6px !important; line-height:1.46 !important; }
  .choice-cards .card .name{ font-size:15.6px !important; min-height:36px !important; }
  .prop{ font-size:52px !important; }
  .day-label{ font-size:12px !important; }
  .day-counter{ font-size:11px !important; }
  .day-dot{ width:12px !important; height:12px !important; }
  .day-dot.critical{ width:17px !important; height:17px !important; }
  .critical-num{ font-size:9.3px !important; }
  .critical-label{ font-size:6.9px !important; }
  .day-dots{ min-height:47px !important; gap:4px !important; }
}


/* ================================================================
   COMPOSITION PASS — card / character / prop never collide
   ================================================================ */

/* Keep the current character scale from the previous pass.
   Only move the character lower in the scene. */
.character{
  bottom:5.5% !important;
}
.character.unlock-legend,
.character.unlock-infinite{
  bottom:5.0% !important;
}

/* Situation card: higher and ~20–25% leaner vertically. */
.banner.situation-card{
  top:7px !important;
  padding:7px 13px 8px !important;
  border-radius:12px !important;
}
.situation-title{
  font-size:19px !important;
  line-height:1 !important;
}
.situation-desc{
  margin-top:4px !important;
  font-size:14.6px !important;
  line-height:1.32 !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  max-height:2.64em !important;
}

/* Story Props are positioned in JS relative to the character,
   not relative to the card. */
.prop{
  position:absolute !important;
  font-size:56px !important;
  z-index:4 !important;
}
.prop.prop-zone-left,
.prop.prop-zone-right,
.prop.prop-zone-front{
  left:0;
  right:auto;
  top:0;
  bottom:auto;
  transform:none;
}

/* Give the scene a small visual safety gutter above choices. */
.scene{
  min-height:0;
}

@media(max-width:420px){
  .banner.situation-card{
    top:6px !important;
    padding:6px 12px 7px !important;
  }
  .situation-title{ font-size:18px !important; }
  .situation-desc{
    font-size:13.8px !important;
    line-height:1.30 !important;
  }
  .character{
    bottom:5% !important;
  }
  .character.unlock-legend,
  .character.unlock-infinite{
    bottom:4.5% !important;
  }
  .prop{ font-size:52px !important; }
}


/* ================================================================
   OVERLAP HOTFIX — reserve a hard safe zone under the situation card
   ================================================================ */
.banner.situation-card{
  top:4px !important;
  padding:6px 12px 6px !important;
  background:linear-gradient(180deg, rgba(15,17,29,.84), rgba(11,13,23,.72)) !important;
}
.situation-title{
  font-size:18px !important;
  line-height:1 !important;
}
.situation-desc{
  margin-top:3px !important;
  font-size:14px !important;
  line-height:1.28 !important;
  -webkit-line-clamp:2 !important;
  max-height:2.56em !important;
}
.character{
  transition:top .18s ease, bottom .18s ease !important;
}
.prop{ transition:left .22s ease, top .22s ease, opacity .22s ease !important; }

@media(max-width:420px){
  .banner.situation-card{
    top:4px !important;
    padding:5px 11px 6px !important;
  }
  .situation-title{ font-size:17px !important; }
  .situation-desc{
    font-size:13.4px !important;
    line-height:1.26 !important;
  }
}


/* ================================================================
   HOTFIX: slightly smaller character + non-overlapping risk badge
   ================================================================ */
/* Slightly reduce the current character scale */
.character{
  width:186px !important;
  height:279px !important;
  margin-left:-93px !important;
}
.character.unlock-legend{
  width:210px !important;
  height:315px !important;
  margin-left:-105px !important;
}
.character.unlock-infinite{
  width:214px !important;
  height:316px !important;
  margin-left:-107px !important;
}

/* Move the risk badge into its own row so it never covers the action title */
.risk-row{
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:18px;
  margin-top:-1px;
  margin-bottom:1px;
}
.risk-badge{
  position:static !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  max-width:100%;
  white-space:nowrap;
  flex:0 0 auto;
  padding:4px 8px !important;
  font-size:9.4px !important;
  line-height:1 !important;
}
.choice-cards .card .name{
  padding-top:1px;
}
.critical-choice .risk-row{
  justify-content:center;
  margin-bottom:3px;
}

@media(max-width:420px){
  .character{ width:178px !important; height:267px !important; margin-left:-89px !important; }
  .character.unlock-legend{ width:201px !important; height:302px !important; margin-left:-100.5px !important; }
  .character.unlock-infinite{ width:205px !important; height:303px !important; margin-left:-102.5px !important; }
  .risk-row{ min-height:17px; }
  .risk-badge{ font-size:8.8px !important; padding:4px 7px !important; }
}


/* ================================================================
   VERTICAL-FIT PASS — every hotfix pass above sizes the character in
   fixed px, tuned against a handful of common phone widths. None of
   them account for the scene's actual rendered HEIGHT, which also
   depends on browser chrome (address/nav bars eat real viewport
   height on some mobile browsers), HUD/day-progress content length,
   etc. On a device where the resulting scene box is shorter than
   whatever those fixed px assumed, the character no longer fits:
   feet get clipped by .scene's own overflow:hidden, and the head can
   end up under the situation banner.
   Sizing height as a percentage of .scene fixes this for ANY screen:
   .scene is a flex item with a resolved (definite) height, so a
   percentage child always scales to whatever that box actually is,
   not to a guessed viewport number. Width is left alone — .charimg
   already uses object-fit:contain + object-position:bottom center,
   so it scales itself down with the box's height and stays centered,
   with no stretching and no need to touch margin-left/centering.
   clamp() keeps the previous tuned size as a ceiling (so nothing
   changes on screens that already had room) and a sane floor (so the
   character never shrinks to near-nothing on an extreme layout).
   ================================================================ */
.character{
  height:clamp(160px, 44%, 279px) !important;
}
.character.unlock-legend,
.character.unlock-infinite{
  height:clamp(180px, 50%, 316px) !important;
}

/* The main-menu / shop skin preview reuses the corridor background, but
   its .scene box is often much shorter than in gameplay (the day-selector
   / shop list below it is taller), and it also carries the skin-preview
   card near the bottom. The gameplay-tuned clamp above pins the floor at
   160px regardless, which no longer leaves room to clear the skin card
   or the scene's own bottom edge here — the character's lower body ends
   up hidden. Scope this smaller, higher-anchored size to the dedicated
   .scene-menu-preview marker (set only by renderMenu()/renderShop()) —
   NOT to .scene-corridor alone, which many real gameplay situations also
   use as their background and must keep the normal gameplay sizing so
   the character doesn't ride up into the situation banner. */
.scene-menu-preview .character{
  height:clamp(110px, 30%, 190px) !important;
  bottom:25% !important;
}
.scene-menu-preview .character.unlock-legend,
.scene-menu-preview .character.unlock-infinite{
  height:clamp(122px, 33%, 214px) !important;
  bottom:24% !important;
}


/* ================================================================
   RESULT OVERLAY HOTFIX — prevent Aura numbers from overflowing
   ================================================================ */
.result-big .delta{
  position:absolute;
  top:33%;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:calc(100% - 36px);
  max-width:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:20px;
  line-height:1.1;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}
.result-big .delta.delta-compact{
  font-size:17px;
  letter-spacing:-.15px;
}
.result-big .delta.delta-long{
  font-size:15px;
  letter-spacing:-.25px;
}

@media(max-width:420px){
  .result-big .delta{
    width:calc(100% - 28px);
    max-width:250px;
    font-size:18px;
  }
  .result-big .delta.delta-compact{ font-size:16px; }
  .result-big .delta.delta-long{ font-size:14px; }
}


/* ================================================================
   HUD AURA COUNTER HOTFIX — never overflow into the rank column
   ================================================================ */
.hud-v2{
  grid-template-columns:minmax(92px,1.08fr) minmax(0,1.34fr) minmax(82px,1fr) !important;
  gap:8px !important;
}
.hud-left,.rank-center,.hud-right{ min-width:0 !important; }
.aura-chip{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  justify-content:center !important;
  padding:7px 7px !important;
  gap:3px !important;
  font-size:12px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
.aura-chip .aura-label{
  flex:0 0 auto;
  font-size:9px !important;
  letter-spacing:.35px !important;
}
.aura-chip #auraVal{
  flex:0 1 auto;
  min-width:0;
  font-size:inherit;
  letter-spacing:-.15px;
}
.aura-chip.aura-compact{
  font-size:10.8px !important;
  padding-left:5px !important;
  padding-right:5px !important;
}
.aura-chip.aura-compact .aura-label{
  font-size:8.3px !important;
  letter-spacing:.15px !important;
}
.aura-chip.aura-ultra{
  font-size:9.6px !important;
  padding-left:4px !important;
  padding-right:4px !important;
  gap:2px !important;
}
.aura-chip.aura-ultra .aura-label{
  font-size:7.7px !important;
  letter-spacing:0 !important;
}

@media(max-width:420px){
  .hud-v2{
    grid-template-columns:minmax(88px,1.08fr) minmax(0,1.30fr) minmax(78px,.98fr) !important;
    gap:6px !important;
  }
  .aura-chip{ font-size:11.2px !important; padding:6px 5px !important; }
  .aura-chip.aura-compact{ font-size:10px !important; }
  .aura-chip.aura-ultra{ font-size:9px !important; }
}


/* Language selector */
.language-block{width:100%;padding-bottom:10px;margin-bottom:9px;border-bottom:1px solid rgba(255,255,255,.08)}
.language-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}
.lang-btn{border:1px solid rgba(255,255,255,.14);background:#202432;color:#aeb7ca;border-radius:9px;padding:7px 10px;font-family:'JetBrains Mono',monospace;font-weight:800;cursor:pointer}
.lang-btn.active{color:#fff;border-color:rgba(185,140,255,.75);background:rgba(185,140,255,.18);box-shadow:0 0 12px rgba(185,140,255,.15)}

/* Russian rank names are longer than English ones. */
html[lang="ru"] .rank-center .hud-rank{font-size:11.5px;letter-spacing:-.15px}
html[lang="ru"] .rank-center{min-width:0}
html[lang="ru"] .rank-center .hud-rank{white-space:nowrap;overflow:visible;text-overflow:clip}
@media(max-width:420px){html[lang="ru"] .rank-center .hud-rank{font-size:10.4px}}


/* QUEST CARD — title removed, only the situation text remains */
.banner.situation-card{
  display:flex;
  align-items:center;
  min-height:0 !important;
}
.situation-desc{
  margin-top:0 !important;
  width:100%;
}
.situation-title{ display:none !important; }

/* ================================================================
   STORY PROP SPRITES — visual language matched to the neon school
   ================================================================ */
.prop.prop-image{
  width:82px;
  height:82px;
  font-size:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:4 !important;
  filter:none !important;
}
.story-prop-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.52)) drop-shadow(0 0 8px rgba(143,91,255,.22));
}
/* Per-object optical sizes: transparent canvases have very different silhouettes. */
.prop-day1_late{ width:72px !important; height:104px !important; }
.prop-day1_notebooks{ width:76px !important; height:76px !important; }
.prop-day1_pizza{ width:82px !important; height:82px !important; }
.prop-day1_puddle{ width:132px !important; height:72px !important; z-index:2 !important; }
.prop-day1_note{ width:74px !important; height:74px !important; }
.prop-day1_carrot,.prop-day1_storage_carrot{ width:72px !important; height:88px !important; }
.prop-day1_director_ball{ width:72px !important; height:72px !important; }
.prop-day1_toilet_music{ width:86px !important; height:72px !important; }
.prop-day1_vacuum_ride,.prop-day1_vacuum_again{ width:112px !important; height:84px !important; }
.prop-day1_goat_finale{ width:104px !important; height:118px !important; }

/* Props are scenery accents, not UI stickers. Keep glow restrained in-scene. */
.prop-day1_puddle .story-prop-img{ filter:drop-shadow(0 5px 5px rgba(0,0,0,.38)) drop-shadow(0 0 7px rgba(87,111,255,.18)); }
.prop-day1_goat_finale .story-prop-img,
.prop-day1_vacuum_ride .story-prop-img,
.prop-day1_vacuum_again .story-prop-img{ filter:drop-shadow(0 8px 9px rgba(0,0,0,.56)) drop-shadow(0 0 9px rgba(143,91,255,.25)); }

@media(max-width:420px){
  .prop.prop-image{ width:76px; height:76px; }
  .prop-day1_late{ width:66px !important; height:96px !important; }
  .prop-day1_notebooks{ width:70px !important; height:70px !important; }
  .prop-day1_pizza{ width:76px !important; height:76px !important; }
  .prop-day1_puddle{ width:120px !important; height:66px !important; }
  .prop-day1_note{ width:68px !important; height:68px !important; }
  .prop-day1_carrot,.prop-day1_storage_carrot{ width:66px !important; height:81px !important; }
  .prop-day1_director_ball{ width:66px !important; height:66px !important; }
  .prop-day1_toilet_music{ width:80px !important; height:67px !important; }
  .prop-day1_vacuum_ride,.prop-day1_vacuum_again{ width:102px !important; height:77px !important; }
  .prop-day1_goat_finale{ width:96px !important; height:108px !important; }
}


/* ================================================================
   STORY PROP SCENE PLACEMENT PASS
   ================================================================ */
.prop.prop-image{
  opacity:.98;
  transition:left .28s ease, top .28s ease, transform .28s ease, opacity .20s ease;
}
.story-prop-img{
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.48)) drop-shadow(0 0 8px rgba(130,98,255,.18));
}
/* Fine tuning for specific objects so they feel grounded in the scene */
.prop-day1_late .story-prop-img{ filter:drop-shadow(0 8px 10px rgba(0,0,0,.54)) drop-shadow(0 0 7px rgba(118,84,255,.16)); }
.prop-day1_notebooks .story-prop-img,
.prop-day1_note .story-prop-img,
.prop-day1_storage_carrot .story-prop-img,
.prop-day1_carrot .story-prop-img{ filter:drop-shadow(0 5px 6px rgba(0,0,0,.42)) drop-shadow(0 0 5px rgba(123,92,255,.12)); }
.prop-day1_director_ball .story-prop-img{ filter:drop-shadow(0 6px 8px rgba(0,0,0,.44)) drop-shadow(0 0 8px rgba(100,130,255,.14)); }
.prop-day1_toilet_music .story-prop-img{ filter:drop-shadow(0 7px 10px rgba(0,0,0,.50)) drop-shadow(0 0 8px rgba(167,101,255,.18)); }

@media(max-width:420px){
  .prop.prop-image{ opacity:.99; }
}


/* Vacuum prop placement hotfix: keep it farther from the character */
.prop-day1_vacuum_ride,.prop-day1_vacuum_again{ width:104px !important; height:78px !important; }
@media(max-width:420px){
  .prop-day1_vacuum_ride,.prop-day1_vacuum_again{ width:95px !important; height:72px !important; }
}


/* Door prop alignment pass: place the late-door object over the background classroom door */
.prop-day1_late{
  width:86px !important;
  height:134px !important;
  z-index:1 !important;
  opacity:.86 !important;
}
.prop-day1_late .story-prop-img{
  object-fit:fill;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.34)) drop-shadow(0 0 6px rgba(115,88,255,.10));
}
@media(max-width:420px){
  .prop-day1_late{
    width:78px !important;
    height:122px !important;
    opacity:.84 !important;
  }
}


/* Final classroom door alignment: right wall, beside the blackboard */
.prop-day1_late{
  width:62px !important;
  height:118px !important;
  opacity:.90 !important;
  z-index:1 !important;
}
.prop-day1_late .story-prop-img{
  object-fit:fill !important;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.28)) drop-shadow(0 0 4px rgba(110,86,255,.08)) !important;
}
@media(max-width:420px){
  .prop-day1_late{ width:57px !important; height:109px !important; }
}


/* Final vacuum composition fix:
   keep the robot vacuum clearly to the side / behind the character. */
.prop-day1_vacuum_ride,
.prop-day1_vacuum_again{
  width:92px !important;
  height:69px !important;
  z-index:1 !important;
  opacity:.93 !important;
}
.prop-day1_vacuum_ride .story-prop-img,
.prop-day1_vacuum_again .story-prop-img{
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.48))
         drop-shadow(0 0 6px rgba(143,91,255,.16)) !important;
}
@media(max-width:420px){
  .prop-day1_vacuum_ride,
  .prop-day1_vacuum_again{
    width:84px !important;
    height:63px !important;
  }
}

/* ================================================================
   DOOR RIGHT-WALL PRECISE PLACEMENT
   Only door position/size changed.
   ================================================================ */
.prop-day1_late{
  width:14% !important;
  height:50% !important;
  z-index:1 !important;
  opacity:.90 !important;
  transform-origin:top center !important;
}
.prop-day1_late .story-prop-img{
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.28))
         drop-shadow(0 0 4px rgba(116,88,255,.07)) !important;
}
@media(max-width:420px){
  .prop-day1_late{
    width:14% !important;
    height:50% !important;
  }
}


/* Day 2 props */
.prop-day2_flicker_light{ width:124px !important; height:70px !important; opacity:.88 !important; z-index:1 !important; }
.prop-day2_backpack{ width:82px !important; height:98px !important; }
.prop-day2_vending_pizza{ width:94px !important; height:122px !important; }
.prop-day2_goat_locker,.prop-day2_goat_gate{ width:104px !important; height:118px !important; }
.prop-day2_symbol_board{ width:88px !important; height:88px !important; opacity:.88 !important; z-index:1 !important; }
.prop-day2_ball_rebound{ width:72px !important; height:72px !important; }
.prop-day2_toilet_music2{ width:86px !important; height:72px !important; }
.prop-day2_vacuum_chase{ width:92px !important; height:69px !important; opacity:.93 !important; z-index:1 !important; }
.prop-day2_wall_trace{ width:126px !important; height:96px !important; opacity:.80 !important; z-index:1 !important; }
.prop-day2_floor_scratches{ width:140px !important; height:88px !important; opacity:.92 !important; z-index:1 !important; }
.prop-day2_keychain{ width:76px !important; height:76px !important; }
.prop-day2_flicker_light .story-prop-img,
.prop-day2_symbol_board .story-prop-img,
.prop-day2_wall_trace .story-prop-img,
.prop-day2_floor_scratches .story-prop-img,
.prop-day2_vacuum_chase .story-prop-img{
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.42)) drop-shadow(0 0 6px rgba(128,98,255,.14)) !important;
}
@media(max-width:420px){
  .prop-day2_flicker_light{ width:112px !important; height:63px !important; }
  .prop-day2_backpack{ width:75px !important; height:90px !important; }
  .prop-day2_vending_pizza{ width:86px !important; height:111px !important; }
  .prop-day2_goat_locker,.prop-day2_goat_gate{ width:96px !important; height:108px !important; }
  .prop-day2_symbol_board{ width:80px !important; height:80px !important; }
  .prop-day2_ball_rebound{ width:66px !important; height:66px !important; }
  .prop-day2_toilet_music2{ width:80px !important; height:67px !important; }
  .prop-day2_vacuum_chase{ width:84px !important; height:63px !important; }
  .prop-day2_wall_trace{ width:114px !important; height:87px !important; }
  .prop-day2_floor_scratches{ width:128px !important; height:80px !important; }
  .prop-day2_keychain{ width:70px !important; height:70px !important; }
}


/* ================================================================
   VISUAL STORY PROP EDITOR
   ================================================================ */
.prop-editor-open{
  color:#d9c6ff !important;
  border-color:rgba(155,105,255,.52) !important;
  background:linear-gradient(180deg,#241d38,#191728) !important;
}
.prop-editor-panel{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  z-index:80;
  display:none;
  max-height:78%;
  overflow:auto;
  padding:12px;
  border-radius:16px;
  background:rgba(11,13,22,.98);
  border:1px solid rgba(168,126,255,.38);
  box-shadow:0 20px 60px rgba(0,0,0,.62),0 0 26px rgba(130,83,255,.14);
  color:var(--ink);
  overscroll-behavior:contain;
}
.prop-editor-panel.open{ display:block; }
.prop-editor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.prop-editor-sub{font-size:10px;color:var(--ink-dim);margin-top:3px}
.prop-editor-x{
  width:36px;height:36px;min-height:36px;
  border-radius:10px;border:1px solid rgba(255,255,255,.14);
  background:#242938;color:#fff;font-size:24px;line-height:1;cursor:pointer;
}
.prop-editor-grid{display:grid;grid-template-columns:88px 1fr;gap:8px;margin-bottom:8px}
.prop-editor-grid label,.prop-editor-range{
  display:grid;gap:4px;font-size:10px;font-weight:800;color:var(--ink-dim);
}
.prop-editor-grid select{
  width:100%;min-width:0;height:38px;border-radius:9px;
  border:1px solid rgba(255,255,255,.13);background:#191d28;color:#fff;padding:0 8px;
  font:inherit;font-size:11px;
}
.prop-editor-status{
  min-height:20px;padding:6px 8px;margin:4px 0 8px;border-radius:8px;
  background:rgba(139,91,255,.08);color:#d8ccff;font-size:10px;line-height:1.3;
}
.prop-editor-coords{
  display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:10px;
}
.prop-editor-coords div{
  padding:6px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#151924;
  text-align:center;
}
.prop-editor-coords span{display:block;font-size:8px;color:var(--ink-dim);font-weight:900}
.prop-editor-coords b{display:block;margin-top:2px;font:700 10px 'JetBrains Mono',monospace;color:#fff}
.prop-editor-range{margin:8px 0}
.prop-editor-range input[type=range]{width:100%;accent-color:#9b6cff}
.prop-editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.prop-editor-actions button{
  min-height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.13);
  background:#202534;color:#fff;font:800 10px 'Manrope',sans-serif;cursor:pointer;
}
#propEditorSave{background:linear-gradient(180deg,#7150ce,#4d3297);border-color:rgba(190,163,255,.45)}
#propEditorReset{color:#ff97a8;border-color:rgba(255,91,116,.35)}
.prop-editor-export{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.12)}
.prop-editor-export-btn{
  width:100%;min-height:42px;border-radius:9px;border:1px solid rgba(120,220,170,.4);
  background:linear-gradient(180deg,#1f8f63,#146645);color:#eafff3;
  font:800 11px 'Manrope',sans-serif;letter-spacing:.3px;cursor:pointer;
}
.prop-editor-export-hint{
  margin-top:6px;font-size:9.5px;line-height:1.4;color:#b9c0d4;
}
.prop-editor-advanced{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.prop-editor-advanced summary{
  cursor:pointer;font-size:9.5px;font-weight:800;color:var(--ink-dim);letter-spacing:.3px;
  list-style:none;
}
.prop-editor-advanced summary::-webkit-details-marker{display:none}
.prop-editor-advanced summary::before{content:'▸ ';color:#9b6cff}
.prop-editor-advanced[open] summary::before{content:'▾ '}
.prop-editor-advanced #propEditorCopy{
  width:100%;min-height:34px;margin-top:8px;border-radius:9px;border:1px solid rgba(255,255,255,.13);
  background:#202534;color:#fff;font:800 10px 'Manrope',sans-serif;cursor:pointer;
}
#propEditorCode{
  box-sizing:border-box;width:100%;height:58px;resize:none;margin-top:8px;padding:8px;
  border-radius:9px;border:1px solid rgba(255,255,255,.1);background:#10131c;color:#cdbbff;
  font:10px/1.35 'JetBrains Mono',monospace;
}
.prop-editor-game-hint{
  padding:8px 10px;margin:8px auto;max-width:340px;border-radius:10px;text-align:center;
  background:rgba(116,77,202,.12);border:1px solid rgba(165,125,255,.22);
  color:#cfc0f5;font-size:9px;font-weight:900;letter-spacing:.5px;
}
.prop.prop-editor-draggable{
  cursor:grab !important;
  pointer-events:auto !important;
  touch-action:none !important;
  outline:1px dashed rgba(211,189,255,.58);
  outline-offset:4px;
  border-radius:8px;
}
.prop.prop-editor-draggable::after{
  content:'';
  position:absolute;inset:-7px;
  border:1px solid rgba(149,105,255,.28);
  border-radius:10px;
  pointer-events:none;
}
.prop.prop-editor-draggable.is-dragging{
  cursor:grabbing !important;
  outline-color:#fff;
}
@media(max-width:420px){
  .prop-editor-panel{max-height:76%;left:6px;right:6px;bottom:6px;padding:10px}
  .prop-editor-grid{grid-template-columns:78px 1fr}
  .prop-editor-actions button{font-size:9px}
}


/* ================================================================
   PROP EDITOR V2 — keep the game scene visible while editing
   ================================================================ */
.prop-editor-panel{
  position:fixed !important;
  top:128px !important;
  left:calc(50% + 195px) !important;
  right:auto !important;
  bottom:auto !important;
  width:330px !important;
  max-height:calc(100vh - 150px) !important;
  box-sizing:border-box;
}
.prop-editor-head-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.prop-editor-collapse{
  width:36px;
  height:36px;
  min-height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:#242938;
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.prop-editor-body{
  display:block;
}
.prop-editor-panel.collapsed{
  width:250px !important;
  max-height:none !important;
  overflow:hidden !important;
  padding-bottom:10px !important;
}
.prop-editor-panel.collapsed .prop-editor-body{
  display:none !important;
}
.prop-editor-panel.collapsed .prop-editor-head{
  margin-bottom:0 !important;
}

/* On narrower screens there is no room beside the phone.
   Turn the editor into a short bottom sheet so the upper game scene remains visible. */
@media(max-width:900px){
  .prop-editor-panel{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:8px !important;
    width:min(94vw, 380px) !important;
    max-height:38vh !important;
    transform:translateX(-50%) !important;
  }
  .prop-editor-panel.collapsed{
    width:min(88vw, 310px) !important;
    max-height:none !important;
  }
}

/* Very small phone screens: keep only ~1/3 of the display for controls. */
@media(max-width:520px){
  .prop-editor-panel{
    bottom:4px !important;
    max-height:34vh !important;
    padding:8px !important;
  }
  .prop-editor-grid{
    grid-template-columns:70px 1fr !important;
  }
  .prop-editor-coords{
    grid-template-columns:repeat(3,1fr) !important;
  }
}


/* Day 2 quest 4: food vending machine */
.prop-day2_vending_pizza{
  width:82px !important;
  height:116px !important;
  z-index:1 !important;
}
@media(max-width:420px){
  .prop-day2_vending_pizza{
    width:76px !important;
    height:108px !important;
  }
}


/* Prop editor scene-size fix:
   editor preview renders the real gameplay panel, but disables it. */
.panel.prop-editor-preview-panel{
  pointer-events:none !important;
  user-select:none !important;
}
.panel.prop-editor-preview-panel .card,
.panel.prop-editor-preview-panel .bigbtn{
  cursor:default !important;
}


/* Day 2 quest 10: second story prop (goat) alongside robot vacuum. */
.prop-extra{
  position:absolute;
  pointer-events:none;
  font-size:0 !important;
}
.prop-extra .story-prop-img{
  width:100%;
  height:100%;
  object-fit:contain;
}


/* ================================================================
   DAY SELECTOR
   ================================================================ */
.day-select-title{
  font-family:'Bungee',system-ui,sans-serif;
  font-size:13px;
  letter-spacing:.7px;
  color:#fff2b8;
  text-align:center;
}
.day-selector{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.day-select-card{
  position:relative;
  min-width:0;
  min-height:92px;
  padding:10px 8px 9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(31,34,50,.98),rgba(20,23,34,.98));
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  cursor:pointer;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease;
}
.day-select-card:hover:not(.locked){
  transform:translateY(-1px);
  border-color:rgba(183,139,255,.45);
}
.day-select-card.active{
  border-color:rgba(255,203,71,.85);
  box-shadow:0 0 16px rgba(255,203,71,.10),inset 0 0 0 1px rgba(255,203,71,.12);
}
.day-select-card.locked{
  opacity:.46;
  filter:saturate(.45);
  cursor:not-allowed;
}
.day-select-num{
  position:absolute;
  right:8px;
  top:6px;
  font-family:'Bungee',system-ui,sans-serif;
  font-size:25px;
  line-height:1;
  color:rgba(196,159,255,.30);
}
.day-select-card.active .day-select-num{
  color:rgba(255,209,92,.42);
}
.day-select-name{
  max-width:92px;
  font-size:10px;
  line-height:1.18;
  font-weight:900;
  color:#f7f3ff;
  text-wrap:balance;
}
.day-select-state{
  margin-top:3px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.45px;
  color:var(--safe);
}
.day-select-card.locked .day-select-state{
  color:var(--ink-dim);
}
.day-selected-desc{
  padding:8px 9px;
  border-radius:10px;
  background:rgba(122,84,196,.07);
  border:1px solid rgba(154,112,226,.12);
}
.day-menu-btn{
  background:#1d2230 !important;
  color:#d8caff !important;
  border:1px solid rgba(166,126,255,.25) !important;
}
@media(max-width:420px){
  .day-select-card{min-height:84px;padding:9px 7px 8px}
  .day-select-name{font-size:9px;max-width:88px}
}


/* ================================================================
   COMPACT DAY SELECTOR
   ================================================================ */
.menubox{
  gap:8px !important;
}
.day-select-title{
  font-size:11px !important;
  margin:0 !important;
}
.day-selector{
  gap:6px !important;
}
.day-select-card{
  min-height:62px !important;
  padding:7px 8px 6px !important;
  border-radius:10px !important;
  gap:1px !important;
}
.day-select-num{
  right:7px !important;
  top:5px !important;
  font-size:20px !important;
}
.day-select-name{
  max-width:102px !important;
  font-size:8.5px !important;
  line-height:1.05 !important;
}
.day-select-state{
  margin-top:2px !important;
  font-size:7px !important;
}
.day-compact-info{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 10px;
  padding:6px 8px;
  border-radius:9px;
  background:rgba(122,84,196,.06);
  border:1px solid rgba(154,112,226,.11);
  color:var(--ink-dim);
  font-size:8.5px;
  line-height:1.15;
}
.day-compact-info b{
  color:#fff;
}
.day-compact-info .num{
  color:var(--gold);
}
.compact-play{
  min-height:42px !important;
  margin-top:0 !important;
  font-size:11px !important;
}
.day-selected-desc{
  display:none !important;
}
@media(max-width:420px){
  .day-select-card{
    min-height:58px !important;
    padding:6px 7px 5px !important;
  }
  .day-select-name{
    font-size:8px !important;
    max-width:94px !important;
  }
  .compact-play{
    min-height:40px !important;
  }
}


/* ================================================================
   ADAPTIVE SITUATION TEXT CARD — mobile-safe long quest text
   ================================================================ */
.banner.situation-card{
  height:auto !important;
  min-height:0 !important;
  max-height:42% !important;
  box-sizing:border-box !important;
  align-items:flex-start !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.situation-desc{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:initial !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  text-wrap:pretty !important;
}
.banner.situation-card::-webkit-scrollbar{width:4px}
.banner.situation-card::-webkit-scrollbar-thumb{background:rgba(196,159,255,.42);border-radius:999px}
.banner.situation-card::-webkit-scrollbar-track{background:transparent}

@media(max-width:420px){
  .banner.situation-card{
    top:4px !important;
    left:10px !important;
    right:10px !important;
    padding:7px 10px 8px !important;
    max-height:46% !important;
  }
  .situation-desc{
    font-size:13.4px !important;
    line-height:1.30 !important;
  }
}


/* === CONCEPT V2: shop + secret choices === */
.menu-action-row{display:grid;grid-template-columns:.82fr 1.18fr;gap:7px;width:100%}
.menu-action-row .bigbtn{margin:0;min-height:40px;font-size:10px}
.shop-btn{background:linear-gradient(180deg,#34205b,#251842)!important;color:#e9dcff!important;border:1px solid rgba(190,145,255,.38)!important}
.shopbox{display:flex;flex-direction:column;gap:7px;width:100%;max-height:100%}
.shop-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#ddd3f5}.shop-head b{font-family:'Bungee',system-ui;font-size:12px;color:#fff}.shop-head strong{color:var(--gold)}
.shop-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;overflow:auto;max-height:250px;padding:1px}
.shop-item{appearance:none;text-align:left;border-radius:10px;border:1px solid rgba(163,118,232,.20);background:rgba(26,27,39,.96);padding:8px;color:#fff;min-height:76px;display:flex;flex-direction:column;gap:5px;cursor:pointer}
.shop-item-top{display:flex;justify-content:space-between;gap:6px;font-size:9px}.shop-item-top b{color:#f5efff}.shop-item-top span{color:var(--gold);white-space:nowrap;font-weight:900}.shop-item-desc{font-size:7.5px;line-height:1.25;color:#a9a4b7}.shop-item.owned{border-color:rgba(69,222,154,.35);opacity:.72}.shop-item.owned .shop-item-top span{color:var(--safe)}.shop-item.poor{opacity:.55}
.card.secret{border-color:#b996ff;background:linear-gradient(180deg,rgba(82,48,121,.98),rgba(40,27,62,.98));box-shadow:0 0 16px rgba(167,112,255,.13)}.card.secret .tag{color:#dcc6ff}.card.secret .reward{color:#e8d8ff}
.cards.choice-cards:has(.card.secret){grid-template-columns:1fr 1fr}.cards.choice-cards:has(.card.secret) .card.secret{grid-column:1/-1;min-height:74px}
.secret-found-line{padding:7px 8px;border:1px solid rgba(185,150,255,.25);border-radius:9px;background:rgba(116,78,176,.10);color:#ddc9ff;text-align:center;font-size:9px;font-weight:900}
@media(max-width:420px){.shop-list{max-height:220px}.shop-item{min-height:70px;padding:7px}.menu-action-row .bigbtn{font-size:9px}}


/* ================================================================
   FIX: DAY 2 FINAL CRITICAL + SECRET LAYOUT
   The generic secret rule switched the critical panel back to 2 columns,
   which squeezed the risky card into the left half of the phone.
   ================================================================ */
.cards.choice-cards.critical-choice:has(.card.secret){
  grid-template-columns:1fr !important;
  padding:0 52px !important;
  gap:9px !important;
}

.cards.choice-cards.critical-choice:has(.card.secret) .card.risky,
.cards.choice-cards.critical-choice:has(.card.secret) .card.secret{
  grid-column:1 / -1 !important;
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.cards.choice-cards.critical-choice:has(.card.secret) .card.secret{
  min-height:82px !important;
}

@media(max-width:420px){
  .cards.choice-cards.critical-choice:has(.card.secret){
    padding:0 38px !important;
  }
}


/* Day 3 / World 1 completion */
.world-coming-soon{margin:10px 0 4px;padding:9px 10px;border:1px solid rgba(183,139,255,.28);border-radius:10px;background:rgba(122,84,196,.08);font-weight:900;letter-spacing:.7px;text-align:center;color:#d8caff;}
@media(max-width:380px){.day-select-card{padding-left:6px!important;padding-right:6px!important}.day-select-name{font-size:7.7px!important;max-width:84px!important}}

/* ================================================================
   FINAL RESPONSIVE HOTFIX — stable choice layout on desktop/mobile
   Goal: cards must stay readable and never collapse into narrow columns.
   ================================================================ */

.phone{
  width:min(390px, calc(100vw - 24px)) !important;
  height:min(760px, calc(100vh - 110px)) !important;
  max-width:100% !important;
  max-height:calc(100vh - 110px) !important;
}
/* svh stays put when the mobile address bar shows/hides; vh above is the fallback. */
@supports (height: 100svh){
  .phone{
    height:min(760px, calc(100svh - 110px)) !important;
    max-height:calc(100svh - 110px) !important;
  }
}

.panel{
  padding:12px clamp(10px, 3vw, 14px) 12px !important;
  min-height:200px !important;
}

/* Default gameplay should always use two readable columns. */
.cards.choice-cards{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  align-items:stretch !important;
  gap:10px !important;
}

.choice-cards .card{
  width:100% !important;
  min-width:0 !important;
  min-height:150px !important;
  padding:12px 10px 0 !important;
}

.choice-cards .card .name{
  min-height:42px !important;
  font-size:14px !important;
  line-height:1.18 !important;
  text-wrap:balance !important;
  overflow-wrap:anywhere !important;
}

.choice-sub{
  min-height:28px !important;
  font-size:9.6px !important;
  line-height:1.2 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-wrap:balance !important;
}

.choice-cards .card .reward{
  width:calc(100% + 20px) !important;
  margin:auto -10px 0 !important;
  padding:10px 8px !important;
  font-size:14px !important;
}

/* Critical moments must remain a single centered card. */
.cards.choice-cards.critical-choice{
  grid-template-columns:1fr !important;
  padding:0 clamp(34px, 10vw, 52px) !important;
}

.cards.choice-cards.critical-choice .card{
  min-height:138px !important;
}

/* Secret layout: safe + risky on first row, secret full width below. */
.cards.choice-cards:has(.card.secret){
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

.cards.choice-cards:has(.card.secret) .card.secret{
  grid-column:1 / -1 !important;
  min-height:84px !important;
}

.cards.choice-cards.critical-choice:has(.card.secret){
  grid-template-columns:1fr !important;
}

/* Small tablets / landscape phones */
@media (max-width: 520px){
  body{padding:14px 10px !important;}
  .wrap{gap:10px !important;}
  .brand .a, .brand .c{font-size:20px !important;}
  .phone{
    width:min(390px, calc(100vw - 16px)) !important;
    height:min(760px, calc(100vh - 70px)) !important;
    max-height:calc(100vh - 70px) !important;
    border-radius:28px !important;
  }
  @supports (height: 100svh){
    .phone{
      height:min(760px, calc(100svh - 70px)) !important;
      max-height:calc(100svh - 70px) !important;
    }
  }
  .scene{margin:0 10px !important; border-radius:18px !important;}
  .panel{padding:10px 10px 12px !important; min-height:190px !important;}
  .cards.choice-cards{gap:8px !important;}
  .choice-cards .card{min-height:142px !important; padding:11px 9px 0 !important;}
  .choice-cards .card .name{font-size:13px !important; min-height:38px !important;}
  .choice-sub{font-size:9px !important; min-height:24px !important;}
  .choice-cards .card .reward{font-size:13px !important;}
  .cards.choice-cards.critical-choice{padding:0 26px !important;}
}

/* Very small phones: stack the standard choices vertically to prevent squeezing. */
@media (max-width: 380px){
  .phone{
    width:calc(100vw - 12px) !important;
    height:min(760px, calc(100vh - 50px)) !important;
    max-height:calc(100vh - 50px) !important;
    border-radius:24px !important;
  }
  @supports (height: 100svh){
    .phone{
      height:min(760px, calc(100svh - 50px)) !important;
      max-height:calc(100svh - 50px) !important;
    }
  }
  .cards.choice-cards{
    grid-template-columns:1fr !important;
  }
  .cards.choice-cards.critical-choice,
  .cards.choice-cards.critical-choice:has(.card.secret){
    padding:0 !important;
  }
  .choice-cards .card{
    min-height:126px !important;
  }
  .choice-cards .card .name{
    min-height:auto !important;
  }
  .choice-sub{
    min-height:auto !important;
  }
  .cards.choice-cards:has(.card.secret) .card.secret{
    min-height:78px !important;
  }
}


/* ================================================================
   DAY 3 STORY PROPS
   ================================================================ */
.prop-day3_purple_locker{ width:88px !important; height:88px !important; opacity:.88 !important; z-index:1 !important; }
.prop-day3_wrong_bell{ width:76px !important; height:76px !important; }
.prop-day3_vending_symbol{ width:94px !important; height:122px !important; }
.prop-day3_goat_stairs,.prop-day3_goat_classroom,.prop-day3_world_finale{ width:104px !important; height:118px !important; }
.prop-day3_projector{ width:88px !important; height:88px !important; opacity:.82 !important; z-index:1 !important; }
.prop-day3_vacuum_message{ width:92px !important; height:69px !important; opacity:.93 !important; z-index:1 !important; }
.prop-day3_biology_door,.prop-day3_storage_hum{ width:70px !important; height:116px !important; opacity:.96 !important; z-index:1 !important; }
.prop-day3_gym_shadow{ width:112px !important; height:126px !important; opacity:.34 !important; z-index:1 !important; }
.prop-day3_alarm{ width:112px !important; height:112px !important; opacity:.80 !important; z-index:1 !important; }
.prop-day3_teacher_photo{ width:74px !important; height:74px !important; }
.prop-day3_portal_trace{ width:146px !important; height:110px !important; opacity:.86 !important; z-index:1 !important; }

.prop-day3_purple_locker .story-prop-img,
.prop-day3_projector .story-prop-img,
.prop-day3_alarm .story-prop-img,
.prop-day3_portal_trace .story-prop-img{
  filter:drop-shadow(0 0 16px rgba(164,111,255,.34)) drop-shadow(0 0 30px rgba(110,79,255,.20));
}

.prop-day3_goat_stairs .story-prop-img,
.prop-day3_goat_classroom .story-prop-img,
.prop-day3_world_finale .story-prop-img{
  filter:drop-shadow(0 8px 9px rgba(0,0,0,.56)) drop-shadow(0 0 10px rgba(143,91,255,.28));
}

.prop-day3_gym_shadow .story-prop-img{
  filter:brightness(0) saturate(0) blur(1px) drop-shadow(0 0 14px rgba(146,102,255,.18));
}

@media(max-width:420px){
  .prop-day3_purple_locker{ width:80px !important; height:80px !important; }
  .prop-day3_wrong_bell{ width:70px !important; height:70px !important; }
  .prop-day3_vending_symbol{ width:86px !important; height:111px !important; }
  .prop-day3_goat_stairs,.prop-day3_goat_classroom,.prop-day3_world_finale{ width:96px !important; height:108px !important; }
  .prop-day3_projector{ width:80px !important; height:80px !important; }
  .prop-day3_vacuum_message{ width:84px !important; height:63px !important; }
  .prop-day3_biology_door,.prop-day3_storage_hum{ width:64px !important; height:106px !important; }
  .prop-day3_gym_shadow{ width:103px !important; height:116px !important; }
  .prop-day3_alarm{ width:100px !important; height:100px !important; }
  .prop-day3_teacher_photo{ width:68px !important; height:68px !important; }
  .prop-day3_portal_trace{ width:132px !important; height:100px !important; }
}


/* ================================================================
   DAY 3 POLISH PASS
   ================================================================ */
.prop-day3_biology_door .story-prop-img,
.prop-day3_storage_hum .story-prop-img{
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.56)) drop-shadow(0 0 12px rgba(143,91,255,.16));
}

.prop-day3_wrong_bell .story-prop-img,
.prop-day3_teacher_photo .story-prop-img{
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.46)) drop-shadow(0 0 7px rgba(143,91,255,.10));
}

.prop-day3_alarm .story-prop-img{
  filter:drop-shadow(0 0 18px rgba(188,144,255,.32)) drop-shadow(0 0 34px rgba(135,96,255,.22));
}

.prop-day3_world_finale{ width:112px !important; height:126px !important; }
.prop-day3_portal_trace{ width:158px !important; height:118px !important; }

.prop-extra[data-story-id="day3_wrong_bell"] .story-prop-img,
.prop-extra[data-story-id="day3_biology_door"] .story-prop-img,
.prop-extra[data-story-id="day3_storage_hum"] .story-prop-img,
.prop-extra[data-story-id="day3_portal_trace"] .story-prop-img,
.prop-extra[data-story-id="day3_world_finale"] .story-prop-img{
  filter:drop-shadow(0 0 14px rgba(170,124,255,.30)) drop-shadow(0 0 28px rgba(114,81,255,.18));
}

@media(max-width:420px){
  .prop-day3_world_finale{ width:102px !important; height:116px !important; }
  .prop-day3_portal_trace{ width:142px !important; height:106px !important; }
}


/* ================================================================
   DAY 3 NEW UNIQUE SPRITES
   ================================================================ */
.prop-day3_dead_clock{ width:118px !important; height:118px !important; opacity:.96 !important; z-index:1 !important; }
.prop-day3_purple_locker{ width:118px !important; height:156px !important; opacity:.97 !important; z-index:1 !important; }
.prop-day3_projector{ width:146px !important; height:146px !important; opacity:.98 !important; z-index:1 !important; }
.prop-day3_alarm{ width:110px !important; height:110px !important; opacity:.97 !important; z-index:1 !important; }
.prop-day3_teacher_photo{ width:108px !important; height:108px !important; opacity:.98 !important; z-index:2 !important; }
.prop-day3_portal_trace{ width:172px !important; height:172px !important; opacity:.98 !important; z-index:1 !important; }

.prop-day3_dead_clock .story-prop-img,
.prop-day3_purple_locker .story-prop-img,
.prop-day3_projector .story-prop-img,
.prop-day3_alarm .story-prop-img,
.prop-day3_teacher_photo .story-prop-img,
.prop-day3_portal_trace .story-prop-img{
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(143,91,255,.22));
}

.prop-extra[data-story-id="day3_biology_door"] .story-prop-img,
.prop-extra[data-story-id="day3_world_finale"] .story-prop-img{
  filter:drop-shadow(0 0 20px rgba(165,112,255,.34)) drop-shadow(0 0 36px rgba(114,81,255,.20));
}

@media(max-width:420px){
  .prop-day3_dead_clock{ width:106px !important; height:106px !important; }
  .prop-day3_purple_locker{ width:106px !important; height:140px !important; }
  .prop-day3_projector{ width:132px !important; height:132px !important; }
  .prop-day3_alarm{ width:100px !important; height:100px !important; }
  .prop-day3_teacher_photo{ width:96px !important; height:96px !important; }
  .prop-day3_portal_trace{ width:154px !important; height:154px !important; }
}


/* ================================================================
   DAY 3 CLEANUP PASS
   Less visual noise, slightly smaller props.
   ================================================================ */
.prop-day3_dead_clock{ width:102px !important; height:102px !important; }
.prop-day3_purple_locker{ width:100px !important; height:132px !important; }
.prop-day3_projector{ width:126px !important; height:126px !important; }
.prop-day3_alarm{ width:98px !important; height:98px !important; }
.prop-day3_teacher_photo{ width:92px !important; height:92px !important; }
.prop-day3_portal_trace{ width:150px !important; height:150px !important; }
.prop-day3_world_finale{ width:98px !important; height:112px !important; }
.prop-day3_goat_classroom{ width:98px !important; height:112px !important; }

.prop-day3_dead_clock .story-prop-img,
.prop-day3_purple_locker .story-prop-img,
.prop-day3_projector .story-prop-img,
.prop-day3_alarm .story-prop-img,
.prop-day3_teacher_photo .story-prop-img,
.prop-day3_portal_trace .story-prop-img{
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.36)) drop-shadow(0 0 14px rgba(143,91,255,.18));
}

.prop-extra[data-story-id="day3_world_finale"] .story-prop-img{
  filter:drop-shadow(0 0 18px rgba(165,112,255,.28)) drop-shadow(0 0 30px rgba(114,81,255,.16));
}

@media(max-width:420px){
  .prop-day3_dead_clock{ width:94px !important; height:94px !important; }
  .prop-day3_purple_locker{ width:92px !important; height:122px !important; }
  .prop-day3_projector{ width:114px !important; height:114px !important; }
  .prop-day3_alarm{ width:90px !important; height:90px !important; }
  .prop-day3_teacher_photo{ width:84px !important; height:84px !important; }
  .prop-day3_portal_trace{ width:136px !important; height:136px !important; }
  .prop-day3_world_finale,.prop-day3_goat_classroom{ width:90px !important; height:102px !important; }
}


/* ================================================================
   DAY 3 FINAL VISUAL PASS
   ================================================================ */
/* Keep story props present but subordinate to the character and choice UI. */
.prop-day3_dead_clock{width:96px!important;height:96px!important;}
.prop-day3_purple_locker{width:94px!important;height:124px!important;}
.prop-day3_vending_symbol{width:86px!important;height:111px!important;}
.prop-day3_goat_stairs{width:94px!important;height:106px!important;}
.prop-day3_projector{width:118px!important;height:118px!important;}
.prop-day3_vacuum_message{width:82px!important;height:62px!important;}
.prop-day3_biology_door,.prop-day3_storage_hum{width:62px!important;height:102px!important;}
.prop-day3_gym_shadow{width:100px!important;height:112px!important;opacity:.28!important;}
.prop-day3_alarm{width:92px!important;height:92px!important;}
.prop-day3_teacher_photo{width:88px!important;height:88px!important;}
.prop-day3_goat_classroom,.prop-day3_world_finale{width:94px!important;height:106px!important;}
.prop-day3_portal_trace{width:142px!important;height:142px!important;}

/* The shadow must read as a shadow, not as a second goat sprite. */
.prop-day3_gym_shadow .story-prop-img{
  filter:brightness(0) saturate(0) blur(1.4px) drop-shadow(0 0 11px rgba(146,102,255,.16))!important;
}

/* Final portal stays behind the goat. */
.prop-extra[data-story-id="day3_world_finale"]{opacity:.90!important;}
.prop-extra[data-story-id="day3_world_finale"] .story-prop-img{
  filter:drop-shadow(0 0 18px rgba(165,112,255,.26)) drop-shadow(0 0 30px rgba(114,81,255,.14))!important;
}

@media(max-width:420px){
  .prop-day3_dead_clock{width:88px!important;height:88px!important;}
  .prop-day3_purple_locker{width:86px!important;height:114px!important;}
  .prop-day3_vending_symbol{width:80px!important;height:103px!important;}
  .prop-day3_goat_stairs,.prop-day3_goat_classroom,.prop-day3_world_finale{width:86px!important;height:98px!important;}
  .prop-day3_projector{width:108px!important;height:108px!important;}
  .prop-day3_vacuum_message{width:76px!important;height:57px!important;}
  .prop-day3_biology_door,.prop-day3_storage_hum{width:58px!important;height:94px!important;}
  .prop-day3_gym_shadow{width:92px!important;height:104px!important;}
  .prop-day3_alarm{width:84px!important;height:84px!important;}
  .prop-day3_teacher_photo{width:80px!important;height:80px!important;}
  .prop-day3_portal_trace{width:130px!important;height:130px!important;}
}


/* ================================================================
   Prop editor + Day 3 locker fit fix
   ================================================================ */
.prop-day3_purple_locker{
  opacity:.78 !important;
}
.prop-day3_purple_locker .story-prop-img{
  filter:drop-shadow(0 0 12px rgba(159,112,255,.20)) drop-shadow(0 0 22px rgba(100,72,255,.14));
}


/* ================================================================
   DAY 3 fit pass: clock + integrated locker
   ================================================================ */
.prop-day3_dead_clock{
  width:72px !important;
  height:72px !important;
  opacity:.88 !important;
  z-index:1 !important;
}
.prop-day3_dead_clock .story-prop-img{
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.34)) drop-shadow(0 0 10px rgba(143,91,255,.14));
}

.prop-day3_purple_locker{
  width:54px !important;
  height:126px !important;
  opacity:.62 !important;
  z-index:1 !important;
}
.prop-day3_purple_locker .story-prop-img{
  object-fit:fill !important;
  filter:drop-shadow(0 0 10px rgba(170,120,255,.16)) brightness(.92) saturate(.95);
  mix-blend-mode:screen;
}

@media(max-width:420px){
  .prop-day3_dead_clock{
    width:64px !important;
    height:64px !important;
  }
  .prop-day3_purple_locker{
    width:48px !important;
    height:114px !important;
  }
}


/* ================================================================
   DAY 3 fit pass: biology door integrated into background door
   ================================================================ */
.prop-day3_biology_door{
  width:46px !important;
  height:104px !important;
  opacity:.54 !important;
  z-index:1 !important;
}
.prop-day3_biology_door .story-prop-img{
  object-fit:fill !important;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 10px rgba(156,110,255,.14)) brightness(.88) saturate(.90);
}

@media(max-width:420px){
  .prop-day3_biology_door{
    width:42px !important;
    height:95px !important;
  }
}


/* ================================================================
   DAY 3 fit pass: alarm integrated onto wall
   ================================================================ */
.prop-day3_alarm{
  width:68px !important;
  height:68px !important;
  opacity:.82 !important;
  z-index:1 !important;
}
.prop-day3_alarm .story-prop-img{
  object-fit:contain !important;
  mix-blend-mode:screen;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.28)) drop-shadow(0 0 10px rgba(160,95,255,.16)) brightness(.94) saturate(.92);
}

@media(max-width:420px){
  .prop-day3_alarm{
    width:60px !important;
    height:60px !important;
  }
}


/* ================================================================
   DAY 3 fit pass: storage door integrated into background door
   ================================================================ */
.prop-day3_storage_hum{
  width:46px !important;
  height:104px !important;
  opacity:.54 !important;
  z-index:1 !important;
}
.prop-day3_storage_hum .story-prop-img{
  object-fit:fill !important;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 10px rgba(156,110,255,.14)) brightness(.88) saturate(.90);
}

@media(max-width:420px){
  .prop-day3_storage_hum{
    width:42px !important;
    height:95px !important;
  }
}

/* ================================================================
   DAY 3 fit pass: portal floating deeper in corridor
   ================================================================ */
.prop-day3_portal_trace{
  width:92px !important;
  height:92px !important;
  opacity:.74 !important;
  z-index:1 !important;
}
.prop-day3_portal_trace .story-prop-img{
  object-fit:contain !important;
  filter:drop-shadow(0 0 12px rgba(160,105,255,.22)) drop-shadow(0 0 24px rgba(115,75,255,.14));
}
@media(max-width:420px){
  .prop-day3_portal_trace{
    width:84px !important;
    height:84px !important;
  }
}


/* World 1 completion/secret pass */
.card.secret{
  border-style:dashed !important;
  box-shadow:0 0 22px rgba(157,92,255,.18);
}
.card.secret .tag{
  letter-spacing:.12em;
  font-weight:900;
}
.runoverbox .row{
  gap:12px;
}


/* Character look picker + evolution feedback */
.skin-picker{
  margin-top:10px;
  padding:10px 10px 8px;
  border:1px solid rgba(164,120,255,.18);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(18,16,34,.92), rgba(14,12,28,.98));
}
.skin-picker-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px; font-size:11px; font-weight:900; letter-spacing:.08em; color:#d9cbff;
}
.skin-picker-head b{ color:#ffd65f; font-size:12px; }
.skin-strip{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none;
}
.skin-strip::-webkit-scrollbar{ display:none; }
.skin-card{
  flex:0 0 76px; display:flex; flex-direction:column; gap:5px; align-items:center;
  border:1px solid rgba(164,120,255,.18); border-radius:12px;
  background:rgba(19,17,33,.95); padding:7px 6px; color:#ece7ff;
}
.skin-card.active{ border-color:#ffd65f; box-shadow:0 0 0 1px rgba(255,214,95,.25), 0 0 14px rgba(255,214,95,.12); }
.skin-card.locked{ opacity:.92; }
.skin-thumb{
  position:relative; display:flex; align-items:flex-end; justify-content:center;
  width:58px; height:72px; border-radius:10px; overflow:hidden;
  background:radial-gradient(circle at 50% 20%, rgba(112,74,183,.35), rgba(18,16,31,.95));
}
.skin-thumb img{
  width:58px; height:72px; object-fit:contain; object-position:center bottom; user-select:none; pointer-events:none;
}
.skin-card.locked .skin-thumb img{ filter:brightness(0) saturate(0) contrast(1.1); opacity:.95; }
.skin-lock{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:18px; background:rgba(6,5,12,.18);
}
.skin-name{ font-size:9px; line-height:1.15; font-weight:800; text-align:center; min-height:20px; }
.skin-meta{ font-size:8px; line-height:1.15; color:#a79dc8; text-align:center; }

.evolution-box{
  margin-top:10px; padding:10px 12px; border-radius:16px;
  border:1px solid rgba(255,214,95,.45);
  background:linear-gradient(180deg, rgba(77,44,125,.96), rgba(28,19,46,.98));
  box-shadow:0 0 24px rgba(170,118,255,.16), inset 0 0 0 1px rgba(255,255,255,.04);
  text-align:center; animation:evoPanelPop .55s ease-out;
}
.evolution-kicker{ font-size:10px; font-weight:900; letter-spacing:.14em; color:#ffd65f; }
.evolution-title{ margin-top:4px; font-size:16px; font-weight:900; color:#fff6d7; }
.evolution-sub{ margin-top:4px; font-size:11px; color:#e7dcff; font-weight:700; }
.evolution-preview{ margin:8px auto 0; width:82px; height:96px; border-radius:14px; display:flex; align-items:flex-end; justify-content:center;
  background:radial-gradient(circle at 50% 0%, rgba(255,214,95,.18), rgba(167,111,255,.2), rgba(18,16,31,.9)); }
.evolution-preview img{ width:76px; height:92px; object-fit:contain; object-position:center bottom; }
@keyframes evoPanelPop{ 0%{ transform:scale(.92); opacity:0; } 100%{ transform:scale(1); opacity:1; } }

.phone.evolution-burst::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:20; border-radius:34px;
  background:radial-gradient(circle at 50% 48%, rgba(255,226,120,.26), rgba(181,116,255,.22) 30%, rgba(20,14,34,0) 62%);
  animation:evolutionBurst 1.5s ease-out forwards;
}
.phone.evolution-burst .character{ animation:evolutionCharacter 1.15s ease-out; }
@keyframes evolutionBurst{
  0%{ opacity:0; transform:scale(.85); }
  18%{ opacity:1; transform:scale(1.02); }
  100%{ opacity:0; transform:scale(1.18); }
}
@keyframes evolutionCharacter{
  0%{ transform:translateX(-50%) scale(1); }
  25%{ transform:translateX(-50%) scale(1.08); }
  55%{ transform:translateX(-50%) scale(.98); }
  100%{ transform:translateX(-50%) scale(1); }
}


/* Main-scene skin chooser */
.scene-menu-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:11;
  display:none;
}
.scene-menu-overlay.show{ display:block; }
.scene-skin-arrow{
  position:absolute;
  top:47%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,16,32,.9);
  color:#f5e7ff;
  font-size:28px;
  font-weight:900;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(172,116,255,.12) inset;
  pointer-events:auto;
}
.scene-skin-arrow.left{ left:10px; }
.scene-skin-arrow.right{ right:10px; }
.scene-skin-info{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  min-width:170px;
  max-width:82%;
  padding:8px 12px 9px;
  border-radius:16px;
  background:rgba(15,13,28,.92);
  border:1px solid rgba(173,118,255,.22);
  box-shadow:0 12px 30px rgba(0,0,0,.26);
  text-align:center;
}
.scene-skin-info.locked{
  border-color:rgba(255,214,95,.28);
}
.scene-skin-title{
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1.1;
}
.scene-skin-meta{
  margin-top:3px;
  color:#c2b7de;
  font-size:10px;
  line-height:1.2;
}
.scene-skin-count{
  margin-top:4px;
  color:#ffd65f;
  font-size:10px;
  font-weight:800;
}
.character.preview-locked{
  filter:brightness(0) saturate(0) contrast(1.1);
  opacity:.95;
}
.character.preview-locked .aura-backglow,
.character.preview-locked .aura-floor,
.character.preview-locked .energy-tongues,
.character.preview-locked .particle,
.character.preview-locked .crown{
  opacity:0 !important;
}


/* Minimal scene skin arrows + softer switch animation */
.scene-skin-arrow{
  top:47%;
  width:24px;
  height:48px;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:rgba(255,255,255,.82);
  padding:0;
  opacity:.76;
  transition:opacity .2s ease, transform .2s ease, color .2s ease;
}
.scene-skin-arrow.left{ left:8px; }
.scene-skin-arrow.right{ right:8px; }
.scene-skin-arrow:hover,
.scene-skin-arrow:focus-visible{
  opacity:1;
  color:#ffffff;
  transform:translateY(-50%) scale(1.03);
  outline:none;
}
.scene-skin-arrow svg{
  width:18px;
  height:34px;
  display:block;
}
.scene-skin-arrow path{
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.scene-menu-overlay.switching .scene-skin-arrow{
  pointer-events:none;
  opacity:.35;
}
.scene-menu-overlay.switching .scene-skin-info{
  opacity:.92;
  transform:translateX(-50%) translateY(1px);
}
.scene-skin-info{
  transition:opacity .22s ease, transform .22s ease, border-color .22s ease;
}
.character.menu-skin-out-left{ animation:menuSkinOutLeft .17s ease-out forwards; }
.character.menu-skin-out-right{ animation:menuSkinOutRight .17s ease-out forwards; }
.character.menu-skin-in-right{ animation:menuSkinInRight .32s cubic-bezier(.22,.8,.24,1) forwards; }
.character.menu-skin-in-left{ animation:menuSkinInLeft .32s cubic-bezier(.22,.8,.24,1) forwards; }
@keyframes menuSkinOutLeft{
  from{ opacity:1; transform:translateX(-50%) translateX(0) scale(1); }
  to{ opacity:0; transform:translateX(-50%) translateX(-6px) scale(.992); }
}
@keyframes menuSkinOutRight{
  from{ opacity:1; transform:translateX(-50%) translateX(0) scale(1); }
  to{ opacity:0; transform:translateX(-50%) translateX(6px) scale(.992); }
}
@keyframes menuSkinInRight{
  from{ opacity:0; transform:translateX(-50%) translateX(6px) scale(.992); }
  to{ opacity:1; transform:translateX(-50%) translateX(0) scale(1); }
}
@keyframes menuSkinInLeft{
  from{ opacity:0; transform:translateX(-50%) translateX(-6px) scale(.992); }
  to{ opacity:1; transform:translateX(-50%) translateX(0) scale(1); }
}


/* Skin switching: intentionally instantaneous. */
.character.menu-skin-out-left,
.character.menu-skin-out-right,
.character.menu-skin-in-left,
.character.menu-skin-in-right{
  animation:none !important;
}

/* User-facing sound toggle in settings */
.sound-toggle-btn{
  width:100%;
  margin-top:8px;
  border:1px solid rgba(167,111,255,.28);
  background:rgba(24,20,42,.96);
  color:#eee7ff;
  border-radius:10px;
  padding:9px 10px;
  font:800 11px/1.1 Manrope, sans-serif;
  letter-spacing:.04em;
}

/* ================================================================
   SHORT-VIEWPORT PASS — keep the character clear of the situation
   banner on short screens, not just narrow ones.
   Root cause: every earlier sizing pass only reacted to viewport
   WIDTH (@media max-width:420px). Two phones can share the same
   ~360-390px width but differ by 150-200px in HEIGHT (e.g. an
   iPhone SE/older Android vs. a modern phone). .hud-v2 and .panel
   (choice cards + day progress) are sized for the width breakpoint
   only, so on a short-but-not-narrow screen they already claim
   their full size while .scene — and the character inside it,
   which is height-clamped to a % of .scene — is left too little
   room. Result: the character's clamp floor no longer fits under
   the situation banner, and the banner ends up covering its head.
   Fix: on short viewports, shrink the choice-card / day-dots chrome
   (the most compressible part of the layout) so .scene keeps real
   room for the character, at any width. Verified against 844/667/
   640px-tall phones and a 900px-tall desktop window.
   ================================================================ */
@media (max-height:720px){
  .hud-v2{ min-height:78px !important; padding:9px 13px 6px !important; }
  .aura-chip{ padding:5px 8px !important; }

  .panel{ padding:8px 10px 9px !important; min-height:0 !important; gap:6px !important; }
  .cards.choice-cards{ gap:7px !important; }
  .choice-cards .card{ min-height:98px !important; padding:7px 8px 0 !important; }
  .choice-top{ min-height:18px !important; }
  .choice-cards .card-icon{ width:18px !important; height:18px !important; }
  .choice-cards .card .tag{ font-size:7.6px !important; padding:1px 6px !important; }
  .choice-cards .card .name{ font-size:11px !important; line-height:1.05 !important; min-height:22px !important; }
  .choice-sub{ font-size:7.6px !important; min-height:0 !important; }
  .choice-cards .card .reward{ font-size:10.5px !important; padding:5px 6px !important; }

  .day-counter{ font-size:7.6px !important; }
  .day-dots{ min-height:16px !important; gap:2px !important; }
  .day-dot{ width:5px !important; height:5px !important; }
  .day-dot.critical{ width:6px !important; height:6px !important; }
  .critical-num,.critical-label{ font-size:5.4px !important; }

  .character{ height:clamp(130px, 40%, 210px) !important; }
  .character.unlock-legend,
  .character.unlock-infinite{ height:clamp(146px, 45%, 236px) !important; }
}