/* Doughnut Escape main menu (console-style): logo, subtitle, a vertical menu that follows keyboard,
   mouse or touch focus. Sits in the existing title screen layout from game.css. */
:is(.game-menu,.intro-gate) .menu-kicker{font:11px/1.6 Mono,monospace;letter-spacing:2.4px;color:var(--pink);margin:0 0 18px;display:flex;align-items:center;gap:12px}
:is(.game-menu,.intro-gate) .menu-kicker i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber)}
:is(.game-menu,.intro-gate) .game-logo{margin:0;font-size:clamp(52px,7.4vw,112px);line-height:.9;letter-spacing:-.05em;font-weight:800}
:is(.game-menu,.intro-gate) .game-logo span{display:block;color:#f8f2ed}
:is(.game-menu,.intro-gate) .game-logo em{display:block;font-style:normal;color:var(--pink);text-shadow:0 0 36px #ff568b55}
.game-menu .menu-sub{margin:14px 0 0;font:600 13px/1.4 Mono,monospace;letter-spacing:3px;text-transform:uppercase;color:#d8c7cc}
.game-menu .intro{max-width:30em;margin:18px 0 22px}
.main-menu{display:flex;flex-direction:column;gap:4px;max-width:440px;margin-top:6px}
.menu-item{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:18px;width:100%;padding:13px 18px 13px 26px;border-radius:12px;
  background:transparent;border:1px solid transparent;color:#e9dfe3;text-align:left;text-decoration:none;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease}
.menu-item .mi-label{font:700 clamp(19px,1.9vw,24px)/1.1 Space,sans-serif;letter-spacing:-.01em}
.menu-item .mi-note{font:10px/1.2 Mono,monospace;letter-spacing:1px;color:#a99aa1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-item::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--pink);opacity:0;transform:scale(.4);transition:opacity .18s,transform .18s}
.menu-item:hover,.menu-item:focus-visible,.menu-item.is-focus{background:linear-gradient(90deg,#ff568b2e,#ff568b08);border-color:#ffb1c155;color:#fff;transform:translateX(6px);outline:none}
.menu-item:hover::before,.menu-item:focus-visible::before,.menu-item.is-focus::before{opacity:1;transform:scale(1)}
.menu-item:hover .mi-note,.menu-item:focus-visible .mi-note,.menu-item.is-focus .mi-note{color:var(--pink)}
.menu-item:first-child .mi-label{color:#fff}
.menu-item:first-child{background:linear-gradient(90deg,#ff9bb322,#ff568b10);border-color:#ffb1c133}
.menu-item:first-child:hover,.menu-item:first-child.is-focus,.menu-item:first-child:focus-visible{background:linear-gradient(90deg,#ff9bb3,#ff568b);border-color:#ffb1c1;color:#2d0818;box-shadow:0 10px 30px #ff568b44}
.menu-item:first-child:hover .mi-label,.menu-item:first-child.is-focus .mi-label,.menu-item:first-child:focus-visible .mi-label{color:#2d0818}
.menu-item:first-child:hover .mi-note,.menu-item:first-child.is-focus .mi-note,.menu-item:first-child:focus-visible .mi-note{color:#5a1330}
.menu-item:first-child::before{background:#2d0818}
.game-menu .menu-hint{margin:16px 0 0 26px;font:10px Mono,monospace;letter-spacing:1px;color:#8d8189;display:flex;gap:6px;align-items:center}
.game-menu kbd{font:10px Mono,monospace;padding:2px 6px;border-radius:4px;border:1px solid #ffffff2a;background:#ffffff0d;color:#d8c7cc}
@media (hover:none),(pointer:coarse){.game-menu .menu-hint{display:none}}
@media (max-height:640px){.game-menu .intro{display:none}.menu-item{padding-block:9px}}
@media (prefers-reduced-motion:reduce){.menu-item{transition:none}.menu-item:hover,.menu-item.is-focus{transform:none}}

/* Menu background: the looping bakery video under the title screen's dark gradients (replaces the old still). */
.title-screen .menu-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:.9}
.title-screen .title-art{background:linear-gradient(90deg,#0f141afa 2%,#0f141ad9 36%,#0f141a3d 74%),linear-gradient(0deg,#0f141a 0%,transparent 45%,#0f141a8c 100%);opacity:1}

/* Opening movie: a full-screen layer over everything. The gate asks for one tap so the movie can play with sound. */
.intro-screen{position:fixed;inset:0;z-index:2147483000;background:#000;display:grid;place-items:center;overflow:hidden}
.intro-screen[hidden]{display:none}
.intro-screen video{width:100%;height:100%;object-fit:contain;background:#000}
.intro-gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;
  background:radial-gradient(ellipse at 50% 60%,#0f141a88,#0f141af2 70%),url('assets/intro/gate.jpg') center/cover}
.intro-gate .menu-kicker{justify-content:center;margin:0}
.intro-gate .game-logo{font-size:clamp(46px,8vw,120px);margin:0 0 18px}
.intro-play{font:700 clamp(17px,2vw,22px)/1 Space,sans-serif;padding:18px 34px;border-radius:14px;border:1px solid #ffb1c1aa;color:#2d0818;
  background:linear-gradient(135deg,#ff9bb3,#ff568b);box-shadow:0 12px 36px #ff568b55;display:inline-flex;gap:12px;align-items:center}
.intro-play:hover,.intro-play:focus-visible{transform:translateY(-2px);box-shadow:0 16px 42px #ff568b77}
.intro-later{background:transparent;color:#d8c7cc;font:12px Mono,monospace;letter-spacing:1.5px;text-transform:uppercase;padding:10px 14px;border-radius:8px}
.intro-later:hover,.intro-later:focus-visible{color:#fff;background:#ffffff12}
.intro-skip{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:2;padding:11px 18px;border-radius:999px;
  background:#0f141acc;border:1px solid #ffffff33;color:#f8f2ed;font:700 14px Space,sans-serif;letter-spacing:.5px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.intro-skip:hover,.intro-skip:focus-visible{background:#ff568b;color:#2d0818;border-color:#ffb1c1}

/* ---- Title screen v2 ("hub"): header / body / footer grid that always fits; sizes follow the window height too.
   Left: logo + menu. Right: Sprinkles and console-style cards. Short windows shed extras; as a last resort the page scrolls. */
.title-screen.hub{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);height:auto;min-height:100vh;min-height:100svh;max-height:none;overflow:visible}
.title-screen.hub .menu-bg,.title-screen.hub .title-art,.title-screen.hub .grain{position:fixed}
.hub .hub-top{padding:clamp(12px,2.4vh,22px) 4.5%}
.hub-top-nav{display:flex;align-items:center;gap:6px}
.hub-top-nav .live-now{margin:0 10px 0 0}
.hub-body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(20px,4vw,72px);padding:clamp(4px,1.5vh,20px) 5.5%;max-width:1500px;width:100%;margin:0 auto;box-sizing:border-box}
.hub-left{display:flex;flex-direction:column;min-width:0}
.hub .game-logo{font-size:clamp(38px,min(6.6vw,11vh),112px)}
.hub .menu-kicker{margin-bottom:clamp(6px,1.6vh,18px)}
.hub .menu-sub{margin-top:clamp(6px,1.4vh,14px)}
.hub .intro{margin:clamp(8px,1.8vh,18px) 0 clamp(10px,2.2vh,22px);max-width:32em}
.hub .main-menu{gap:clamp(0px,.4vh,4px);max-width:460px}
.hub .menu-item{padding-block:clamp(5px,1.25vh,13px)}
.hub .menu-item .mi-label{font-size:clamp(16px,min(1.9vw,3.1vh),24px)}
.hub .menu-hint{margin-top:clamp(8px,1.6vh,16px)}
.hub-right{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4vh,26px);min-width:0}
.hub-hero{position:relative;width:min(26vw,34vh,360px);aspect-ratio:1;flex-shrink:0;pointer-events:none}
.hub-hero img{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 20px 35px #000a);animation:bob 5s ease-in-out infinite}
.hub-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.hub-card{position:relative;display:flex;flex-direction:column;min-height:clamp(118px,19vh,176px);padding:0;border-radius:16px;overflow:hidden;text-align:left;text-decoration:none;color:#f8f2ed;
  background:#161b22d9;border:1px solid #ffffff1c;box-shadow:0 14px 36px #0007;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.hub-card:hover,.hub-card:focus-visible{transform:translateY(-4px);border-color:#ffb1c1aa;box-shadow:0 18px 44px #ff568b33;outline:none}
.hc-art{display:block;flex:1;min-height:clamp(44px,8vh,84px);background:#0f141a center/cover no-repeat}
.hc-video{background-image:linear-gradient(0deg,#0f141acc,transparent 70%),url('assets/intro/gate.jpg');display:grid;place-items:center}
.hc-play{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ff568be6;color:#2d0818;font-size:15px;padding-left:3px;box-shadow:0 6px 18px #ff568b66}
.hc-body{display:flex;flex-direction:column;gap:4px;padding:10px 14px 12px}
.card-scores .hc-body{flex:1;justify-content:space-between}
.hc-kicker{font:10px Mono,monospace;letter-spacing:1.6px;color:var(--pink)}
.hub-card b{font:700 clamp(14px,1.2vw,17px)/1.15 Space,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-meta{font:10px/1.3 Mono,monospace;color:#a99aa1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-bar{display:block;height:4px;border-radius:2px;background:#ffffff1a;margin-top:4px;overflow:hidden}
.hc-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff9bb3,#ff568b);border-radius:2px}
.hc-leaders{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13px}
.hc-leaders li{display:flex;gap:8px;align-items:baseline;min-width:0}
.hc-leaders .medal{font:700 11px Mono,monospace;color:var(--amber);width:14px}
.hc-leaders .who{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.hc-leaders .what{font:10px Mono,monospace;color:#a99aa1;white-space:nowrap}
.hc-leaders .muted{color:#a99aa1;font-size:12px}
.hub .title-footer{position:relative;z-index:1;margin:0 4.5%}
.hub .title-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
/* big screens: let everything grow into the space */
@media (min-width:1600px) and (min-height:860px){
 .hub-body{max-width:1760px;gap:clamp(40px,5vw,110px)}
 .hub .game-logo{font-size:clamp(100px,min(7vw,12.5vh),156px)}
 .hub .menu-sub{font-size:15px}
 .hub .intro{font-size:17px}
 .hub .main-menu{max-width:560px}
 .hub .menu-item{padding-block:clamp(10px,1.5vh,16px)}
 .hub .menu-item .mi-label{font-size:clamp(24px,1.6vw,30px)}
 .hub .menu-item .mi-note{font-size:12px}
 .hub-hero{width:min(24vw,38vh,440px)}
 .hub-cards{gap:16px}
 .hub-card{min-height:clamp(170px,21vh,230px)}
 .hub-card b{font-size:19px}
 .hc-meta,.hc-kicker{font-size:11px}
 .hc-leaders{font-size:15px}
}
/* shorter windows: shed extras first */
@media (max-height:820px){.hub .intro{display:none}}
@media (max-height:700px){.hub .menu-hint,.hub-hero{display:none}.hub-cards{grid-template-columns:1fr;max-width:340px}.hub-card{min-height:0;flex-direction:row;align-items:stretch}.hc-art{flex:0 0 96px;min-height:0}.card-scores{display:none}}
/* narrow screens: one column, cards under the menu */
@media (max-width:900px){.hub-body{grid-template-columns:1fr}.hub-hero{display:none}.hub-cards{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}.hub-right{justify-content:flex-start}}
@media (max-width:600px){.hub-cards{grid-template-columns:1fr}.card-scores{display:none}.hub-card{flex-direction:row;min-height:0}.hc-art{flex:0 0 88px}.hub-top-nav .live-now{display:none}}
/* very short windows (phones held sideways): logo left, menu right, nothing else */
@media (max-height:560px){.hub .menu-kicker,.hub .menu-sub{display:none}.hub-right{display:none}.hub-body{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}.hub-left{display:contents}.hub .game-logo{grid-column:1;align-self:center}.hub .main-menu{grid-column:2;grid-row:1}}