/* ==========================================================================
   Front end: paused label, title, WebGL failure               owner: P0-2
   ========================================================================== */
.paused{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;background:rgba(42,26,46,.2)}
.paused span{
  font:400 64px/1 var(--f-display);letter-spacing:.04em;
  color:#fff;-webkit-text-stroke:12px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink);
}

/* ---------- title: the logo, one short line, Play; the demo duel in the open sand beside it ---------- */
#scr-title{background:linear-gradient(90deg,rgba(42,26,46,.18) 0%,rgba(42,26,46,0) 42%)}
#scr-title .screen-inner{max-width:1200px;display:grid}
.title-wrap{width:min(480px,100%);display:grid;gap:26px}
.title-logo{display:grid;justify-items:center}
/* the logo (owner, 2026-10-22: "need way better art direction, more ambitious"): a Blender render of chunky gold GLADS, TINY on
   a red banner and a Heavy Swordsman saluting from the S (blender/kk/logo/title_logo.py). It squashes and springs back when
   the attract screen is pressed (ui/attract.js) */
.game-title{margin:0;line-height:0}
/* it shrinks with a short window so the menu under it always fits (the image is 1.42 times as wide as it is tall; the menu
   and the margins take about 360px) */
.game-title img{display:block;margin-inline:auto;width:min(480px,100%,max(240px,calc((100dvh - 360px) * 1.42)));height:auto;transform-origin:50% 88%;filter:drop-shadow(0 14px 22px rgba(42,26,46,.32))}
.game-title.squash img{animation:logo-pop .62s var(--out)}
@keyframes logo-pop{0%{transform:none}22%{transform:scale(1.07,.93)}52%{transform:scale(.97,1.04)}78%{transform:scale(1.01,.99)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){ .game-title.squash img{animation:none} }
/* the arena first: on the first title of a visit the name, then the menu, rise into the scene (title.js; once a visit) */
#scr-title.intro .title-logo{animation:ttl-in .7s var(--out) .25s both}
#scr-title.intro .title-body{animation:ttl-in .5s var(--out) .75s both}
@keyframes ttl-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ #scr-title.intro .title-logo,#scr-title.intro .title-body{animation:none} }
.title-body{display:grid;gap:18px}
/* the one line of text, shown only when the game cannot load (the title leads with the arena, no subheader) */
.title-note{
  justify-self:center;margin:0;max-width:100%;padding:7px 16px 8px;border:var(--line-s) solid var(--ink);border-radius:999px;background:rgba(255,246,228,.95);
  box-shadow:inset 0 2px 0 #fff,var(--drop-s);font:var(--w-strong) var(--t-lead)/1.3 var(--f-ui);color:var(--ink-2);text-align:center;font-variant-numeric:tabular-nums;
}
.title-note strong{color:var(--gold-ink);font-weight:var(--w-strong)}

.webgl-fail{position:fixed;inset:0;z-index:100;display:grid;place-items:center;text-align:center;padding:24px;font:var(--w-strong) var(--t-lead)/1.4 var(--f-ui);color:var(--ink);background:var(--sand)}

@media (max-width:600px),(max-aspect-ratio:4/5){
  #scr-title{background:none;grid-template-rows:minmax(100%,auto);padding-block:calc(env(safe-area-inset-top,0px) + 18px) calc(env(safe-area-inset-bottom,0px) + 16px)}
  #scr-title .screen-inner{margin:0 auto;max-width:560px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:100%}
  .title-wrap{display:contents}
  .title-body{gap:12px}
}
@media (max-width:600px){
  .title-note{font-size:var(--t-body);padding:6px 14px 7px}
  /* the next goal and its coins in a phone's top bar (src/ui/title.js moves it out of the menu): the corner sound
     button's line and height, ending 10px short of it; one line, its text cut short when it must */
  #scr-title>.title-goal{position:absolute;z-index:2;top:calc(env(safe-area-inset-top,0px) + 10px);left:max(16px,env(safe-area-inset-left,0px));
    right:calc(max(16px,env(safe-area-inset-right,0px)) + 54px);width:auto;max-width:320px;min-height:44px;
    grid-template-columns:32px minmax(0,1fr) auto;gap:8px;padding:4px 10px 4px 4px;border-radius:12px;
    transition:opacity .55s var(--out) .5s,transform .14s var(--out),box-shadow .14s var(--out)}
  #scr-title>.title-goal .gl-ic{width:32px;height:32px}
  #scr-title>.title-goal .gl-ic .ic{width:24px;height:24px}
  #scr-title>.title-goal .gl-main{gap:4px}
  #scr-title>.title-goal .gl-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.attract #scr-title>.title-goal{opacity:0;pointer-events:none}
}

/* ---- P0-2 additions (main menu, loading screen, pause menu, settings, how to play) go below ---- */

/* ---------- the attract screen and the title's atmosphere (ui/attract.js; owner, 2026-10-21: "a more compelling title
   screen. take inspo from AAA titles") ---------- */
.ttl-atmo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(130% 95% at 50% 42%,rgba(42,26,46,0) 52%,rgba(42,26,46,.42) 100%),
    linear-gradient(112deg,rgba(255,214,140,0) 28%,rgba(255,220,150,.18) 40%,rgba(255,214,140,0) 53%)}
.ttl-atmo i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,242,210,.8);animation:ttl-dust var(--d) linear infinite}
@keyframes ttl-dust{from{transform:translate(0,0);opacity:0}15%{opacity:.85}85%{opacity:.5}to{transform:translate(var(--w),-160px);opacity:0}}
#scr-title .screen-inner{position:relative;z-index:1}
#scr-title .title-logo{transform-origin:50% 50%;transition:transform 1.05s var(--out)}
#scr-title .title-body{transition:opacity .55s var(--out) .5s,transform .55s var(--out) .5s}
body.attract #scr-title{background:none}
body.attract #scr-title .title-logo{transform:translate(var(--at-x,0),var(--at-y,0)) scale(var(--at-s,1));animation:at-fade 1.4s var(--out) .2s both}
body.attract #scr-title .title-body{opacity:0;transform:translateY(18px);pointer-events:none;animation:none}
body.attract-out #scr-title .title-body{pointer-events:none}
/* "Press any key", low on the screen's centre line. The indent matches the letter-spacing after the last letter, so the
   words themselves sit on the centre line; it grows with the menu on big screens (nav.css --big) */
.at-hint{position:absolute;left:0;right:0;bottom:15vh;z-index:2;margin:0;text-align:center;text-indent:.26em;pointer-events:none;
  font:400 calc(22px * var(--big,1))/1 var(--f-display);letter-spacing:.26em;text-transform:uppercase;color:var(--paper);
  -webkit-text-stroke:calc(6px * var(--big,1)) var(--ink);paint-order:stroke fill;text-shadow:0 calc(4px * var(--big,1)) 0 var(--ink);opacity:.6}
.at-hint.ready{animation:at-pulse 1.9s ease-in-out infinite}
@keyframes at-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes at-fade{from{opacity:0}to{opacity:1}}

/* the menu like a big game's: Play is the one button; the rest is a list of words over the arena, a gold mark beside
   the one under the pointer or the focus */
#scr-title .title-body .actions.title-actions{grid-template-columns:minmax(0,1fr);gap:2px;width:min(340px,100%)}
#scr-title .title-actions>.btn{grid-column:auto}
#scr-title .title-actions>#btn-start{margin-bottom:10px}
#scr-title .title-actions>.btn.ghost,#scr-title .title-actions>.btn.ghost.half,#scr-title .title-actions>.btn.ghost.quiet{
  all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 12px;cursor:pointer;
  font:400 var(--t-h)/1 var(--f-display);letter-spacing:.02em;color:var(--paper);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);
  transition:color .16s var(--out),transform .16s var(--out)}
#scr-title .title-actions>.btn.ghost .ic{position:static;flex:none;width:26px;height:26px;margin:0;filter:drop-shadow(0 3px 0 var(--ink))}
#scr-title .title-actions>.btn.ghost::before,#scr-title .title-actions>.btn.ghost::after{content:"";width:10px;height:10px;flex:none;border:3px solid var(--ink);background:#ffd27a;transform:rotate(45deg) scale(0);transition:transform .18s var(--pop)}
#scr-title .title-actions>.btn.ghost::before{order:-1}
#scr-title .title-actions>.btn.ghost .tb-badge{position:static;margin:0 0 0 2px;color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
/* the Emperor's Rules: one line, its heat a flame and the number (owner, 2026-10-25: "this looks like ass") */
#scr-title .title-actions>#btn-rules{white-space:nowrap}
#scr-title .title-actions>.btn.ghost #rules-heat{display:inline-flex;align-items:center;gap:1px;padding:0 7px 0 4px}
#scr-title .title-actions>.btn.ghost #rules-heat .ic{width:14px;height:14px;filter:none}
#scr-title .title-actions>.btn.ghost.quiet{font-size:var(--t-btn);opacity:.82}
@media (hover:hover) and (pointer:fine){ #scr-title .title-actions>.btn.ghost:hover{color:#ffd27a} #scr-title .title-actions>.btn.ghost:hover::before,#scr-title .title-actions>.btn.ghost:hover::after{transform:rotate(45deg) scale(1)} }
#scr-title .title-actions>.btn.ghost:focus-visible{color:#ffd27a;outline:none}
#scr-title .title-actions>.btn.ghost:focus-visible::before,#scr-title .title-actions>.btn.ghost:focus-visible::after{transform:rotate(45deg) scale(1)}
#scr-title .title-actions>.btn.ghost:active{transform:translateY(2px)}
@media (max-width:600px){
  #scr-title .title-actions>.btn.ghost,#scr-title .title-actions>.btn.ghost.half,#scr-title .title-actions>.btn.ghost.quiet{font-size:var(--t-btn);min-height:44px;-webkit-text-stroke:5px var(--ink)}
  .at-hint{font-size:17px;bottom:22vh}
}
@media (prefers-reduced-motion:reduce){ #scr-title .title-logo,#scr-title .title-body{transition:none} body.attract #scr-title .title-logo{animation:none} .at-hint.ready{animation:none;opacity:1} }