/* The session overlay: countdown, round, results and final screens. */
#game-root{position:fixed;inset:0;z-index:1000;overflow:auto;background:var(--outer);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.g-shell{width:100%;max-width:max(calc(421*var(--px)),360px);min-height:100%;margin:0 auto;padding:0 calc(8*var(--u)) calc(48*var(--u));background:var(--page);display:grid;gap:calc(6*var(--u));align-content:start}
.g-header{display:flex;align-items:center;gap:calc(6*var(--u));min-height:calc(22*var(--u));padding-top:calc(3*var(--u))}
.g-mode,.g-leave,.g-kicker{font:calc(10*var(--u))/1.3 var(--label);letter-spacing:calc(1*var(--u));text-transform:uppercase;-webkit-font-smoothing:none;color:var(--muted)}
.g-controls{display:flex;align-items:center;gap:calc(6*var(--u));margin-left:auto}
.g-score{font:calc(10*var(--u))/1 var(--slab);-webkit-font-smoothing:none;color:var(--gold)}
.g-sound,.g-leave{padding:calc(4*var(--u)) calc(2*var(--u))}
.g-sound{display:grid;place-items:center}
.g-leave:hover{color:var(--text)}
.g-sound[aria-pressed=false]{opacity:.35}

/* The sky where the session's stars collect, with the castle beyond. */
.g-sky{position:relative;height:calc(56*var(--u));margin:0 calc(-8*var(--u));overflow:hidden;border-block:calc(1*var(--u)) solid var(--ink);
  background:url('./assets/art/sky.png') right bottom/calc(421*var(--u)) calc(64*var(--u)) no-repeat #1c2a70;image-rendering:pixelated}
.sky-stars{position:absolute;inset:0 calc(150*var(--u)) calc(12*var(--u)) calc(50*var(--u))}
.sky-star{position:absolute;transform:translate(-50%,-50%);animation:star-arrive .35s steps(5)}
.sky-star--glow{filter:drop-shadow(0 0 calc(3*var(--u)) #fff8)}
.g-pair{position:absolute;left:calc(6*var(--u));bottom:0;display:flex;align-items:flex-end}

.g-panel,.g-card,.spot-card{--frame:url('./assets/art/frame-panel.png');--c:12;position:relative;isolation:isolate;padding:calc(9*var(--u)) calc(12*var(--u));display:flex;flex-direction:column;gap:calc(6*var(--u))}
.g-panel:before,.g-card:before,.spot-card:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:calc(var(--c)*var(--u)) solid transparent;
  border-image:var(--frame) var(--c) fill/calc(var(--c)*var(--u)) stretch;image-rendering:pixelated}
.g-center{align-items:center;text-align:center}
.g-prompt{font:var(--fs-xl)/1.2 var(--body);letter-spacing:0;text-transform:none;color:var(--text);text-shadow:none;text-wrap:balance;overflow-wrap:anywhere}
/* Headings take focus only so screen readers announce the new screen. */
#game-root h1:focus{outline:none}
.g-prompt--long,.g-prompt--small{font-size:var(--fs);line-height:1.4}
[data-phase=intro] .g-intro,[data-phase=round] .g-round>.g-panel{transform-origin:50% 20%;animation:g-pop .42s steps(6) both}
.g-intro{text-align:center;align-items:center}
.g-intro-count{font:calc(40*var(--u))/1 var(--slab);-webkit-font-smoothing:none;color:var(--gold);padding:calc(10*var(--u));text-shadow:0 calc(4*var(--u)) var(--ink)}

.g-round,.g-results,.g-final{display:grid;gap:calc(6*var(--u))}
.g-clock{display:flex;gap:calc(6*var(--u));align-items:center}
.g-track{flex:1;height:calc(8*var(--u));background:var(--well);border:calc(1*var(--u)) solid var(--line)}
.g-fill{height:100%;background:var(--gold);box-shadow:inset 0 calc(-2*var(--u)) var(--gold-deep);transition:width .25s linear}
.g-timer{font:calc(10*var(--u))/1 var(--slab);-webkit-font-smoothing:none;color:var(--gold);min-width:calc(18*var(--u));text-align:right}
.g-clock.is-low .g-fill{background:var(--bad);box-shadow:inset 0 calc(-2*var(--u)) #a8404f}
.g-timer.is-urgent{color:var(--bad);animation:blink .6s steps(2) infinite}
.g-form{display:flex;gap:calc(5*var(--u))}
.g-input{flex:1;height:calc(28*var(--u));min-height:44px;padding:0 calc(6*var(--u))}
.g-form .btn{min-width:calc(48*var(--u));min-height:max(44px,calc(28*var(--u)))}
.g-feedback{display:flex;flex-wrap:wrap;align-items:center;gap:calc(4*var(--u));min-height:calc(14*var(--u));overflow-wrap:anywhere}
.g-feedback strong{color:var(--text)}
.fb-idle{color:var(--muted)}.fb-warn{color:var(--gold)}.fb-bad{color:var(--bad)}
.fb-points,.find__points,.slot__meta b,.answer__head b,.g-rounds b,.g-roundscore b,.spot-tier em{font:calc(10*var(--u))/1.3 var(--label);font-style:normal;font-weight:400;-webkit-font-smoothing:none;white-space:nowrap}
.g-tally{display:flex;flex-wrap:wrap;gap:calc(3*var(--u))}
.g-tally li{display:flex;align-items:center;gap:calc(3*var(--u));padding:calc(2*var(--u)) calc(4*var(--u));background:var(--well);border-bottom:calc(2*var(--u)) solid var(--tier);color:var(--tier)}
.g-tally b{font:calc(10*var(--u))/1 var(--label);font-weight:400;color:var(--text)}
.g-tally .is-full{background:color-mix(in srgb,var(--tier) 22%,var(--well))}
.g-finds{display:grid;gap:calc(3*var(--u))}
.find{display:flex;align-items:center;gap:calc(5*var(--u));padding:calc(3*var(--u)) calc(5*var(--u));background:var(--well);border-left:calc(2*var(--u)) solid var(--tier);min-width:0;animation:g-rise .25s steps(4) both}
.find__name{flex:1;min-width:0;overflow-wrap:anywhere}
.find__points{color:var(--tier)}
.g-text{color:var(--muted);margin:0 auto;min-height:36px}
.g-text:hover{color:var(--text)}
.g-explain,.g-self{display:grid;gap:calc(6*var(--u))}
.g-textarea{width:100%;resize:vertical}
.g-row{display:flex;gap:calc(5*var(--u));justify-content:flex-end}
.g-self label{display:flex;gap:calc(5*var(--u));align-items:flex-start;cursor:pointer}
.g-self input{margin-top:.35em;padding:0}
.g-self .btn{justify-self:end}
.g-quote{margin:0;padding:calc(4*var(--u)) calc(6*var(--u));border-left:calc(2*var(--u)) solid var(--line);color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}

/* Eureka: every answer of a round found. Stars fly out from behind the word. */
.eureka{position:fixed;inset:0;z-index:1400;display:grid;place-content:center;justify-items:center;gap:calc(6*var(--u));width:100%;background:#0b0a1cc7;color:var(--text);text-align:center;cursor:pointer;animation:fade .2s steps(3)}
.eureka__word{position:relative;font:calc(30*var(--u))/1 var(--slab);font-weight:400;letter-spacing:calc(2*var(--u));text-transform:uppercase;-webkit-font-smoothing:none;color:var(--gold);
  text-shadow:0 calc(3*var(--u)) var(--ink),0 0 calc(14*var(--u)) #f5d06699;animation:eureka-in .5s steps(6) both}
.eureka__sub{position:relative;font:calc(10*var(--u))/1 var(--label);letter-spacing:calc(1*var(--u));text-transform:uppercase;-webkit-font-smoothing:none;color:var(--gold-soft);animation:fade .3s steps(3) .35s both}
.eureka__rays{position:absolute;left:50%;top:50%}
.eureka__rays i{position:absolute;left:0;top:0;transform:translate(-50%,-50%) rotate(calc(var(--i)*45deg)) translateY(calc(-72*var(--u)));animation:eureka-ray .9s steps(9) both;animation-delay:calc(var(--i)*40ms)}

/* Results */
.g-roundscore{display:flex;flex-wrap:wrap;align-items:center;gap:calc(4*var(--u))}
.g-roundscore b{font-family:var(--slab);color:var(--gold)}
.g-card>h2>span{float:right;font:var(--fs) var(--body);letter-spacing:0;text-transform:none;color:var(--bad)}
.slots{display:flex;flex-direction:column;gap:calc(4*var(--u))}
.slot{min-height:calc(36*var(--u));border:calc(1*var(--u)) dashed var(--line);position:relative}
.slot--1{min-height:calc(46*var(--u))}
.slot__mystery{display:flex;align-items:center;gap:calc(9*var(--u));padding:calc(10*var(--u)) calc(6*var(--u));color:var(--muted)}
.slot__mystery span,.slot__place{font:calc(10*var(--u))/1 var(--label);-webkit-font-smoothing:none;text-transform:uppercase}
.slot__mystery b{font:calc(20*var(--u))/1 var(--slab);font-weight:400;color:var(--line)}
.slot__shown{display:none;align-items:center;gap:calc(6*var(--u));padding:calc(5*var(--u))}
.slot.is-revealed{border-style:solid;border-color:var(--ink);box-shadow:inset calc(2*var(--u)) 0 var(--tier);background:var(--well)}
.slot--1.is-revealed{background:linear-gradient(90deg,color-mix(in srgb,var(--tier) 24%,transparent),transparent 70%),var(--well)}
.slot.is-revealed .slot__mystery{display:none}
.slot.is-revealed .slot__shown{display:flex;animation:g-reveal .5s steps(6)}
.slot__place{width:calc(22*var(--u));flex:none;color:var(--gold);text-align:center}
.slot__star{flex:none;width:calc(24*var(--u));display:grid;place-items:center;filter:drop-shadow(0 0 calc(4*var(--u)) color-mix(in srgb,var(--tier) 60%,transparent))}
.slot__body{display:flex;flex-direction:column;gap:calc(3*var(--u));min-width:0}
.slot__body strong{font:var(--fs)/1.2 var(--body);overflow-wrap:anywhere}
.slot__meta{display:flex;gap:calc(4*var(--u));align-items:center;flex-wrap:wrap}
.slot__meta b{color:var(--tier)}
.slot__body small,.g-away small,.g-best small{color:var(--muted);line-height:1.2}
.g-skip{align-self:flex-start;color:var(--muted)}
.g-card[data-result-at]:not([hidden]){animation:g-reveal .5s steps(6) both}
.g-away__row,.g-best__row{display:flex;gap:calc(7*var(--u));align-items:center}
.g-away__row>div,.g-best__row>div{display:flex;flex-direction:column;gap:calc(3*var(--u));min-width:0;align-items:flex-start}
.g-away strong,.g-best strong{overflow-wrap:anywhere}
.answers{display:grid;gap:calc(3*var(--u))}
.answer{display:flex;gap:calc(4*var(--u));padding:calc(4*var(--u)) calc(5*var(--u));background:var(--well);border-left:calc(2*var(--u)) solid var(--tier)}
.answer.is-missed{background:#191630}
.answer__mark{width:1.1em;flex:none}
.is-hit .answer__mark{color:var(--good)}.is-missed .answer__mark{color:var(--bad)}
.answer__body{display:grid;gap:calc(2*var(--u));min-width:0}
.answer__head{display:flex;gap:calc(4*var(--u));align-items:center;flex-wrap:wrap}
.answer__head strong{overflow-wrap:anywhere}
.is-missed .answer__head strong{color:var(--muted)}
.answer__head b{color:var(--tier)}
.answer small{color:var(--muted);line-height:1.2}
.g-wrong{overflow-wrap:anywhere}
.g-bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:1100;width:100%;max-width:max(calc(421*var(--px)),360px);display:flex;align-items:center;gap:calc(5*var(--u));
  padding:calc(5*var(--u)) calc(8*var(--u));background:var(--header);border-top:calc(1*var(--u)) solid var(--gold-deep)}
.g-bottom>span{flex:1;color:var(--muted)}

/* Final */
.g-final.is-ceremony>*:not(.g-final-head){visibility:hidden}
.g-final-head{text-align:center;display:grid;gap:calc(4*var(--u));justify-items:center}
.g-final-head>span{font:calc(10*var(--u))/1 var(--label);letter-spacing:calc(1*var(--u));-webkit-font-smoothing:none;color:var(--muted)}
.g-final-head h1{font-size:calc(30*var(--u));color:var(--gold);text-shadow:0 calc(3*var(--u)) var(--ink)}
.g-best{animation:g-reveal .6s steps(7) backwards}
.g-titles{display:grid;gap:calc(4*var(--u))}
.g-title{display:flex;align-items:center;gap:calc(6*var(--u));padding:calc(5*var(--u));background:var(--well);border:calc(1*var(--u)) solid var(--line)}
.g-title__icon{width:calc(34*var(--u));height:calc(34*var(--u));display:grid;place-items:center;flex:none;overflow:hidden}
.g-title>div,.g-unlocks li>div{display:flex;flex-direction:column;gap:calc(2*var(--u));min-width:0}
.g-title strong,.g-unlocks strong{font:calc(10*var(--u))/1.2 var(--label);letter-spacing:calc(1*var(--u));-webkit-font-smoothing:none;color:var(--gold);text-transform:uppercase;font-weight:400}
.g-title small,.g-unlocks small{color:var(--muted);line-height:1.2}
.g-unlocks ul{display:grid;gap:calc(4*var(--u))}
.g-unlocks li{display:flex;gap:calc(6*var(--u));align-items:center}
.g-unlocks__art{flex:none;display:grid;place-items:end center;width:calc(64*var(--half))}
.g-rounds{display:grid;gap:calc(3*var(--u))}
.g-rounds li{display:flex;justify-content:space-between;gap:calc(6*var(--u));align-items:baseline}
.g-rounds .tier-badge{margin-left:calc(3*var(--u))}
.g-rounds b{color:var(--muted)}
.g-final .g-bottom .btn{flex:1}

.spotlight{position:fixed;inset:0;z-index:1450;background:#0b0a1ce6;color:var(--text);display:grid;place-items:center;padding:calc(12*var(--u)) calc(9*var(--u));cursor:pointer;text-align:center;font-family:var(--body)}
.spot-card{width:min(calc(240*var(--u)),100%);min-height:calc(190*var(--u));align-items:center;justify-content:center;gap:calc(7*var(--u));animation:g-spot .35s steps(5)}
.spot-art{min-height:calc(56*var(--u));display:grid;place-items:center;filter:drop-shadow(0 0 calc(7*var(--u)) #f5d06666)}
.spot-title{font:calc(10*var(--u))/1.3 var(--slab);letter-spacing:calc(1*var(--u));-webkit-font-smoothing:none;color:var(--gold);text-transform:uppercase}
.spot-main{font:var(--fs-xl)/1.2 var(--body)}
.spot-tier{display:flex;align-items:center;gap:calc(5*var(--u))}
.spot-tier em{color:var(--gold)}
.spot-detail{max-width:calc(190*var(--u));color:#d6cdea}
.spot-card small{margin-top:auto;color:var(--muted)}

@keyframes star-arrive{from{opacity:0;transform:translate(-50%,-50%) scale(2.2)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes g-pop{0%{opacity:0;transform:translateY(calc(-6*var(--u))) scale(.94)}70%{opacity:1;transform:translateY(calc(1*var(--u))) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes g-rise{from{opacity:0;transform:translateY(calc(3*var(--u)))}to{opacity:1;transform:none}}
@keyframes g-reveal{from{opacity:0;transform:translateY(calc(5*var(--u))) scale(.96)}to{opacity:1;transform:none}}
@keyframes g-spot{0%{transform:scale(.72);opacity:0}70%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes eureka-in{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes eureka-ray{0%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--i)*45deg)) translateY(0) scale(.4)}50%{opacity:1}}

@media(max-width:600px){
  /* With the keyboard open, pin the round to the visible area. */
  #game-root[data-keyboard=true]{height:var(--keyboard-height);bottom:auto}
  #game-root[data-keyboard=true] .g-sky{display:none}
  #game-root[data-keyboard=true] .g-shell{padding-bottom:calc(8*var(--u))}
}