/* 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;
  /* 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;padding:12px 0}
@media (max-height:620px){.screen{justify-content:flex-start}}
.screen.active{display:flex}
#title-screen{background:linear-gradient(180deg,rgba(4,6,9,.35),rgba(2,3,5,.9)),radial-gradient(ellipse at 50% 30%,#1a2430,#05070a 75%)}
#title-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55;filter:saturate(.8)}
#title-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,5,8,.25) 0%,rgba(3,5,8,.72) 62%,#020304 100%)}
.title-content{position:relative;text-align:center;z-index:2;max-width:min(860px,94vw);padding:20px}
.eyebrow{letter-spacing:.5em;text-transform:uppercase;color:#c8544a;font-size:13px;font-weight:700;text-shadow:0 0 12px rgba(200,60,50,.6)}
h1.game-title{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;font-size:clamp(46px,9vw,104px);letter-spacing:.06em;line-height:.9;
  color:#ddd6c4;text-transform:uppercase;text-shadow:0 0 30px rgba(180,40,30,.35),3px 4px 0 #000,0 0 90px rgba(0,0,0,.9)}
h1.game-title .red{color:#b3271e;text-shadow:0 0 34px rgba(200,30,20,.75),3px 4px 0 #000}
.subtitle{font-family:Georgia,serif;font-style:italic;letter-spacing:.34em;color:#9aa4ad;text-transform:uppercase;font-size:clamp(12px,1.8vw,17px);margin-top:10px}
.menu-col{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:30px}
.mbtn{cursor:pointer;pointer-events:auto;min-width:300px;padding:13px 34px;text-transform:uppercase;letter-spacing:.22em;font-weight:700;font-size:15px;
  color:#e6dfc8;background:linear-gradient(180deg,rgba(46,52,58,.9),rgba(18,21,24,.95));border:1px solid rgba(190,160,110,.4);
  border-radius:3px;transition:all .15s;box-shadow:0 6px 22px rgba(0,0,0,.6);font-family:inherit}
.mbtn:hover{background:linear-gradient(180deg,#8c231c,#5c130e);color:#fff;border-color:#d45b50;box-shadow:0 0 26px rgba(190,40,30,.5);transform:translateY(-2px)}
.mbtn.small{min-width:200px;padding:9px 20px;font-size:12px}
.diff-row{display:flex;gap:10px;margin-top:6px}
.diff-btn{cursor:pointer;pointer-events:auto;padding:9px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:#9aa4ad;background:rgba(10,13,16,.8);border:1px solid rgba(150,150,150,.25);border-radius:3px;transition:all .15s;font-family:inherit}
.diff-btn:hover{color:#fff;border-color:#888}
.diff-btn.sel{color:#ffd9d0;background:rgba(120,25,18,.55);border-color:#c8544a;box-shadow:0 0 14px rgba(200,60,50,.35)}
.best-line{margin-top:18px;font-size:13px;letter-spacing:.18em;color:#8b95a0;text-transform:uppercase}
.best-line b{color:#e8ddba;font-size:15px}
.controls-panel{margin-top:22px;display:grid;grid-template-columns:auto auto;gap:4px 16px;font-size:12px;color:#79828c;
  background:rgba(5,8,11,.65);border:1px solid rgba(255,255,255,.07);padding:14px 22px;border-radius:4px;text-align:left}
.controls-panel b{color:#c9c2ae;text-align:right;letter-spacing:.06em}
.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)}
.panel h2{font-family:Impact,"Arial Black",sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(30px,5vw,48px);color:#ddd6c4;text-shadow:2px 3px 0 #000}
.panel h2.red{color:#b3271e;text-shadow:0 0 30px rgba(200,30,20,.7),2px 3px 0 #000}
.panel .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 30px;margin:22px auto 6px;font-size:14px;text-align:left;max-width:380px}
.panel .stats span{color:#8b95a0;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.panel .stats b{color:#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:#9aa4ad}
.slider-row input{width:180px;accent-color:#b3271e;cursor:pointer;pointer-events:auto}
.slider-row .val{min-width:38px;color:#e8ddba;text-align:right}