/* Title / pause / game-over screens and their shared button language. */

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;flex-direction:column;box-sizing:border-box;
  /* On a landscape phone the pause panel is taller than the viewport and the
     rigid centring box clipped the bottom of it — "Quit to Title" was simply
     off-screen and unreachable. Let the screen scroll, and switch to
     flex-start once the content no longer fits so nothing is cut off the top
     either (centred content overflowing a flex container clips upward). */
  overflow-y:auto;overscroll-behavior:contain;
  /* keep the scrollable band inside the notch and the home indicator — minimal
     extra padding so pause/title use the glass, not a floating inset card */
  padding:calc(6px + env(safe-area-inset-top,0px)) max(6px,env(safe-area-inset-right,0px))
    calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
@media (max-height:620px){.screen{justify-content:flex-start}}
.screen.active{display:flex}
#pause-fps{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top, 0px));
  right:calc(14px + env(safe-area-inset-right, 0px));
  z-index:3;
  pointer-events:none;
}
#title-screen{background:linear-gradient(180deg,rgba(4,6,9,.35),rgba(2,3,5,.9)),radial-gradient(ellipse at 50% 30%,var(--steel-700),var(--steel-900) 75%)}
#title-bg{position:absolute;inset:0;overflow:hidden;background:url('../assets/img/menu_bg.jpg') center/cover no-repeat;opacity:.55;filter:saturate(.8)}
#title-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
#title-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,5,8,.25) 0%,rgba(3,5,8,.72) 62%,var(--tone-020304) 100%)}
.subtitle{font-family:var(--font-ui);font-style:normal;letter-spacing:.34em;color:var(--steel-300);text-transform:uppercase;font-size:clamp(12px,1.8vw,17px);margin-top:10px;opacity:.86}
.menu-col{display:flex;flex-direction:column;gap:var(--space-2, 12px);align-items:center;margin-top:var(--space-4, 30px)}
.mbtn{cursor:pointer;pointer-events:auto;min-width:300px;min-height:44px;padding:13px 34px;text-transform:uppercase;letter-spacing:.22em;font-weight:700;font-size:15px;
  color:var(--cream-500);background:linear-gradient(180deg,rgba(46,52,58,.9),rgba(18,21,24,.95));border:1px solid rgba(190,160,110,.4);
  border-radius:0;transition:background var(--dur-fast,.15s) var(--ease-out,ease),color var(--dur-fast,.15s),border-color var(--dur-fast,.15s),box-shadow var(--dur-fast,.15s),transform var(--dur-fast,.15s) var(--ease-out,ease);box-shadow:0 6px 22px rgba(0,0,0,.6);font-family:var(--font-ui)}
.mbtn:hover{background:linear-gradient(180deg,var(--tone-8c231c),var(--tone-5c130e));color:var(--paper);border-color:var(--tone-d45b50);box-shadow:0 0 26px rgba(190,40,30,.5);transform:translateY(-2px)}
.mbtn:focus-visible{outline:1px solid var(--focus-ring, var(--amber));outline-offset:2px}
.mbtn:active{transform:translateY(0);filter:brightness(.93)}
.mbtn.small{min-width:200px;min-height:44px;padding:9px 20px;font-size:12px}
.diff-row{display:flex;gap:10px;margin-top:6px}
.scare-row{flex-wrap:wrap;justify-content:center;max-width:100%}
.scare-row .diff-btn{padding-inline:12px}
.diff-btn{cursor:pointer;pointer-events:auto;padding:9px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--steel-300);background:rgba(10,13,16,.8);border:1px solid rgba(150,150,150,.25);border-radius:3px;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s;font-family:var(--font-ui)}
.diff-btn:hover{color:var(--paper);border-color:var(--tone-888888)}
.diff-btn.sel{color:var(--cream-100);background:rgba(120,25,18,.55);border-color:var(--tone-c8544a);box-shadow:0 0 14px rgba(200,60,50,.35)}
.best-line{margin-top:18px;font-size:13px;letter-spacing:.18em;color:var(--tone-8b95a0);text-transform:uppercase}
.best-line b{color:var(--cream-500);font-size:15px}
.panel{background:linear-gradient(160deg,rgba(22,27,32,.96),rgba(8,10,13,.97));border:1px solid rgba(190,160,110,.3);border-radius:6px;
  padding:38px 48px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.85);max-width:min(620px,92vw);
  /* A flex child shrinks before it overflows: on a landscape phone the
     game-over panel compressed to viewport height and its dossier + buttons
     spilled into unreachable (unscrollable) visible overflow. Never shrink —
     let the .screen scroll instead, which is what its overflow-y:auto is for. */
  flex-shrink:0}
.panel h2{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;font-size:clamp(30px,5vw,48px);color:var(--tone-ddd6c4);text-shadow:2px 3px 0 var(--ink)}
.panel h2.red{color:var(--blood-hot);text-shadow:0 0 30px rgba(200,30,20,.7),2px 3px 0 var(--ink)}
.panel .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 30px;margin:var(--space-4, 22px) auto var(--space-2, 6px);font-size:14px;text-align:left;max-width:380px}
.panel .stats span{color:var(--tone-6e767e);letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.panel .stats b{color:var(--tone-efe8d2);text-align:right;font-size:16px}
.slider-row{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-300)}
.slider-row input{width:180px;accent-color:var(--blood-hot);cursor:pointer;pointer-events:auto}
.slider-row .val{min-width:38px;color:var(--cream-500);text-align:right}

#cache-index-screen{z-index:90;overflow:auto;
  padding:max(clamp(10px,3vw,28px),env(safe-area-inset-top,0px))
    max(clamp(10px,3vw,28px),env(safe-area-inset-right,0px))
    max(clamp(10px,3vw,28px),env(safe-area-inset-bottom,0px))
    max(clamp(10px,3vw,28px),env(safe-area-inset-left,0px))}
#cache-index-screen .cache-index-panel{width:min(1040px,96vw);max-width:none;text-align:left;padding:clamp(18px,3vw,34px)}
.cache-index-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cache-index-head h2{margin:0;font-size:clamp(28px,5vw,44px)}
.cache-index-head .eyebrow{color:var(--amber);letter-spacing:.2em;font-size:11px}
.cache-index-copy{color:var(--tone-98a2a4);max-width:720px;line-height:1.45}
.cache-index-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;max-height:min(68vh,680px);overflow:auto;padding:4px}
.cache-card{position:relative;min-height:210px;background:var(--tone-090d0e);border:1px solid var(--tone-354044);border-radius:5px;padding:10px;color:var(--tone-e5dfcb);text-align:left}
.cache-card img{display:block;width:100%;aspect-ratio:2/1;object-fit:contain;border-radius:4px;background:var(--tone-080b0c)}
/* Locked cards keep the SVG silhouette readable — dim + desaturate, never a
   pure black rectangle. A stamped lock badge marks the sealed state. */
.cache-card.locked img{
  filter:grayscale(.92) brightness(.42) contrast(1.05) opacity(.88);
}
.cache-card.locked::after{
  content:"LOCKED";
  position:absolute;top:14px;right:14px;z-index:2;
  padding:4px 8px;
  border:1px solid rgba(190,160,110,.45);
  border-radius:2px;
  background:rgba(6,8,10,.78);
  color:var(--paper-dim);
  font:700 9px/1 var(--font-mono);
  letter-spacing:.18em;
  pointer-events:none;
  box-shadow:0 6px 14px rgba(0,0,0,.45);
}
.cache-card.locked h3{color:var(--paper-mute)}
.cache-card.locked p{color:var(--paper-faint)}
.cache-card h3{margin:9px 0 4px;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.cache-card p{margin:0;color:var(--tone-91a0a2);font-size:12px}
.cache-card .rarity{display:inline-block;margin-top:8px;color:var(--tone-d0aa5a);font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.cache-card.prototype{border-color:var(--tone-4b897b);box-shadow:inset 0 0 24px rgba(58,145,122,.1)}
@media(max-width:600px){
  .cache-index-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cache-card{min-height:170px;padding:7px}.cache-card h3{font-size:12px}.cache-card p{font-size:10px}
}
@media(max-width:420px) and (orientation:portrait){.cache-index-grid{grid-template-columns:1fr}}

/* Destructive actions use an in-game modal instead of the browser's confirm()
   so focus, controller navigation, safe areas and touch targets stay consistent. */
#confirm-screen{z-index:100;background:rgba(2,3,5,.78)}
#confirm-screen .confirm-panel{width:min(520px,92vw);box-sizing:border-box}
.confirm-panel .eyebrow{color:var(--amber);letter-spacing:.2em;font-size:11px}
.confirm-panel h2{margin-top:12px;font-size:clamp(26px,5vw,40px)}
.confirm-copy{max-width:420px;margin:14px auto 0;color:var(--tone-b8b0a0);font:13px/1.6 var(--font-ui)}
.confirm-actions{display:flex;justify-content:center;gap:10px;margin-top:24px}
.confirm-actions .pbtn{min-width:0}
.pbtn.destructive{border-color:var(--danger);background:rgba(82,15,11,.72);color:var(--tone-f2d8d2)}
.pbtn.destructive:hover,.pbtn.destructive:focus-visible{
  border-color:var(--tone-e05242);background:var(--tone-861d15);color:var(--paper)
}
@media(max-width:520px){
  .confirm-actions{flex-direction:column}
  .confirm-actions .pbtn{width:100%;max-width:none}
}