/* Reaction Time Test: a night-blue room, one big signal lamp. Sky blue is the UI's colour,
   so red, yellow and green belong to the lamp alone. */
:root{
  --lacquer:#171A2E;--lacquer-hi:#232845;--ink:#FFFFFF;--ink-soft:#D3D9F0;--ink-dim:#A0A8C8;
  --hair:rgba(143,211,255,.38);--brass:#8FD3FF;--brass-lo:#4BA6E0;--brass-hi:#CDEBFF;--jade:#2E9E6A;
  --serif:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",-apple-system,"Segoe UI",Roboto,sans-serif;
  --red:#E8463D;--red-hi:#FF8A80;--amber:#FFB628;--green:#2EE07A;--green-hi:#B8FFD6;--calm:#33406E;--lamp:240px;
}
body{background:radial-gradient(ellipse at 50% 35%,#262B4D,#171A2E 72%);font-size:20px}
#fx{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:25;pointer-events:none}
.screen{position:fixed;inset:0;z-index:1}
.pill{font-family:var(--serif);color:#0B2033}

/* home */
.home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8em;padding:1.2em;text-align:center}
.home .title{font-family:var(--serif);font-size:clamp(2.1em,10.5vw,3.8em);font-weight:900;color:var(--ink);line-height:1.02;
  text-shadow:0 3px 0 #0B1022,0 8px 22px rgba(0,0,0,.45);text-wrap:balance}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em;font-weight:700}
.lead{display:flex;flex-direction:column;align-items:center;gap:.5em}
.signal{display:flex;gap:.35em;padding:.35em .5em;border-radius:999px;background:#0E1124;border:2px solid #3A4270}
.signal i{width:1.1em;height:1.1em;border-radius:50%;background:#2A3050}
.signal i:nth-child(1){animation:sig1 3.6s infinite}
.signal i:nth-child(2){animation:sig2 3.6s infinite}
.signal i:nth-child(3){animation:sig3 3.6s infinite}
@keyframes sig1{0%,45%{background:var(--red);box-shadow:0 0 12px var(--red)}46%,100%{background:#2A3050;box-shadow:none}}
@keyframes sig2{0%,25%,36%,100%{background:#2A3050;box-shadow:none}26%,35%{background:var(--amber);box-shadow:0 0 12px var(--amber)}}
@keyframes sig3{0%,46%{background:#2A3050;box-shadow:none}47%,90%{background:var(--green);box-shadow:0 0 14px var(--green)}91%,100%{background:#2A3050}}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.55em;width:min(23em,100%)}
.levels{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:100%}
.levels .choice{min-height:48px;min-width:0;padding:.2em;font:800 1.25em/1 var(--serif);color:var(--ink);background:rgba(14,17,36,.85);
  border:2px solid rgba(211,217,240,.35);border-radius:14px}
.levels .choice[aria-pressed=true]{background:var(--brass);border-color:#fff;color:#0B2033}
.levels .choice:disabled{opacity:.4}
.lvl-note{margin:0;color:var(--ink-soft);font-weight:700;font-size:.9em;min-height:1.4em}
.menu-col .pill{min-width:12em;min-height:52px}
.pill.alt{background:rgba(255,255,255,.94);color:#171A2E;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap}
.home .link{min-height:44px;font-size:1em;color:var(--brass-hi);font-weight:700}
@media (max-width:420px){.home{gap:.5em;padding-left:.8em;padding-right:.8em}.menu-col{gap:.45em}.levels{gap:4px}.levels .choice{font-size:1.1em}
  .home .link{padding:.4em .4em;font-size:.95em}.home .title{font-size:2.15em}.tagline{font-size:1em}}
@media (max-height:620px) and (max-aspect-ratio:1/1){.signal,.home .tagline{display:none}}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:nowrap;gap:1.4em;padding:.5em 1em}
  .home .lead{flex:1 1 0;min-width:0}
  .home .menu-col{flex:none;width:min(23em,max(380px,55%))}
  .home .title{font-size:2.4em}
  .lvl-note{font-size:.8em;min-height:0}
  .menu-col{gap:.3em}
  .menu-col .pill{min-height:46px;padding-top:.4em;padding-bottom:.4em}
  .levels .choice{min-height:44px}
  .tagline{font-size:.95em}
}
@media (max-height:480px) and (max-width:700px){.home .title{font-size:1.9em}.home .tagline{font-size:.85em}}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important}}
@media (max-height:480px) and (max-width:520px){.home{flex-direction:column;gap:.3em}.home .lead{flex:none}.home .tagline,.signal{display:none}.home .menu-col{width:100%}}

/* the game: bar, the lamp, the five times */
#game{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
#game .bar{padding:max(.4em,env(safe-area-inset-top)) max(.7em,env(safe-area-inset-right)) .3em max(.7em,env(safe-area-inset-left));gap:.6em}
#game .bar .jewel{flex:none;width:2.6em;height:2.6em;min-width:48px;min-height:48px;border-color:var(--brass);background:radial-gradient(circle at 35% 30%,#33406E,#171A2E 70%);box-shadow:none}
#game .bar .jewel svg{stroke:var(--brass-hi)}
.hud{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.2}
.hud b{font:900 1em/1.2 var(--serif);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hud b em{font-style:normal}
@media (max-width:380px){.hud b em{display:none}}
.hud span{font:900 1.2em/1.2 var(--serif);color:var(--brass);white-space:nowrap;font-variant-numeric:tabular-nums}
.fouls{flex:none;display:flex;gap:.25em;min-width:48px;justify-content:flex-end}
.fouls i{width:1.05em;height:1.05em;border-radius:50%;border:2px solid var(--ink-dim);position:relative;transition:background-color .2s,border-color .2s}
.fouls i.on{background:var(--red);border-color:#fff;animation:pop .45s}
.fouls i.on::after{content:"";position:absolute;inset:18%;background:linear-gradient(45deg,transparent 40%,#fff 40% 60%,transparent 60%),linear-gradient(-45deg,transparent 40%,#fff 40% 60%,transparent 60%)}

/* the stage is one big tap target; the lamp changes colour in a single frame (no transition on its colour) */
.stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;min-height:0;outline:none;cursor:pointer;padding:.2em .6em}
.stage:focus-visible .lamp{outline:4px solid var(--brass-hi);outline-offset:6px}
.lamp{width:var(--lamp);height:var(--lamp);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05em;
  background:radial-gradient(circle at 38% 32%,#4A5A92,var(--calm) 62%,#262F55);border:calc(var(--lamp)*.035) solid #CDD6F5;
  box-shadow:0 0 0 calc(var(--lamp)*.04) #0E1124,0 calc(var(--lamp)*.05) calc(var(--lamp)*.12) rgba(0,0,0,.5);position:relative;flex:none}
.word{font:900 calc(var(--lamp)*.17)/1 var(--serif);color:#fff;letter-spacing:.01em;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.big{font:900 calc(var(--lamp)*.25)/1 var(--serif);color:#fff;font-variant-numeric:tabular-nums}
.big small{font-size:.45em;margin-left:.1em}
.big:empty{display:none}
.sub{margin:0;font:800 1.15em/1.2 var(--serif);color:var(--ink-soft);text-align:center;min-height:1.2em;text-wrap:balance}
.s-ready .lamp{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.03)}}
.s-wait .lamp{background:radial-gradient(circle at 38% 32%,var(--red-hi),var(--red) 58%,#A82720);border-color:#FFD0CC}
.s-decoy .lamp{background:radial-gradient(circle at 38% 32%,#FFE39A,var(--amber) 58%,#C98200);border-color:#FFF1C9}
.s-decoy .word{color:#3A2600;text-shadow:none}
.s-go .lamp{background:radial-gradient(circle at 38% 32%,var(--green-hi),var(--green) 58%,#16A355);border-color:#fff;
  box-shadow:0 0 0 calc(var(--lamp)*.04) #0E1124,0 0 calc(var(--lamp)*.45) rgba(46,224,122,.75)}
.s-go .word{color:#06311A;text-shadow:none;font-size:calc(var(--lamp)*.24)}
.s-go .lamp::after{content:"";position:absolute;inset:-8%;border-radius:50%;border:calc(var(--lamp)*.03) solid var(--green-hi);animation:ring .5s ease-out forwards}
@keyframes ring{from{transform:scale(.9);opacity:1}to{transform:scale(1.25);opacity:0}}
.s-hit .lamp{background:radial-gradient(circle at 38% 32%,#5D7BD8,#3550A8 62%,#243A82);animation:pop .4s ease-out}
.s-hit .word{font-size:calc(var(--lamp)*.13);color:var(--brass-hi)}
.s-foul .lamp{background:radial-gradient(circle at 38% 32%,#7A4060,#5A2846 62%,#431C34);border-color:var(--red-hi);animation:shake .45s}
.s-foul .word{font-size:calc(var(--lamp)*.14);color:#FFD0CC}
.s-foul .big{font-size:calc(var(--lamp)*.15)}
.s-over .lamp{animation:pop .45s ease-out}
.s-over .word{font-size:calc(var(--lamp)*.12);color:var(--brass-hi)}
@keyframes pop{0%{transform:scale(.86)}55%{transform:scale(1.07)}100%{transform:none}}
@keyframes shake{20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-3%)}80%{transform:translateX(2%)}}

.chips{display:flex;justify-content:center;gap:.4em;padding:.3em .8em max(.7em,env(safe-area-inset-bottom))}
.chip{flex:0 1 4.4em;min-width:0;min-height:44px;display:grid;place-items:center;border-radius:.7em;background:rgba(14,17,36,.8);border:2px solid rgba(211,217,240,.25);
  font:900 1.05em/1 var(--serif);color:var(--ink-dim);font-variant-numeric:tabular-nums}
.chip.now{border-color:var(--brass);color:var(--brass-hi)}
.chip.good{color:#fff;border-color:var(--green);background:rgba(46,224,122,.16)}
.chip.over{color:#fff;border-color:var(--red-hi);background:rgba(232,70,61,.16)}
.chip.fresh{animation:pop .4s ease-out}

/* a wide, short screen: the times sit beside the lamp */
@media (min-aspect-ratio:3/2) and (max-height:520px){
  #game{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar bar" "stage chips"}
  #game .bar{grid-area:bar}
  .stage{grid-area:stage}
  .chips{grid-area:chips;flex-direction:column;justify-content:center;padding:.2em max(.8em,env(safe-area-inset-right)) max(.5em,env(safe-area-inset-bottom)) .2em;gap:.3em}
  .chip{flex:none;width:4.6em;min-height:44px}
  body{font-size:18px}
  .sub{font-size:1em}
}

/* cards */
.card .big-line{font:900 1.35em/1.3 var(--serif);text-align:center;margin:0 0 .3em;color:var(--brass-hi)}
.card .stars{text-align:center;font-size:2em;letter-spacing:.15em;color:#FFD23F;margin:0;line-height:1.1}
.card .stars span{color:rgba(255,255,255,.2)}
.card p{margin:.2em 0 .5em}
.card ul{margin:.2em 0 .4em;padding-left:1.2em}
.card li{margin:.25em 0}
.card .pill,.card .row,.card .choice{min-height:48px}
.card .link{min-height:44px;font-weight:700;font-size:1.05em}
.card .row{color:var(--ink);font-weight:700}
.card{background:var(--lacquer-hi);font-size:1.02em}
.card .actions{background:var(--lacquer-hi)}
.card .times{display:flex;justify-content:center;gap:.3em;flex-wrap:wrap;margin:.1em 0 .5em}
.card .times span{padding:.2em .5em;border-radius:.5em;background:rgba(14,17,36,.7);font-weight:800;font-variant-numeric:tabular-nums}
.chart{display:block;width:100%;height:auto;max-height:9em;margin:.2em 0}
.chart text{font:800 12px var(--serif);fill:var(--ink-soft)}
.chart .lbl{fill:#fff}
.chart .won{fill:var(--green)}
.chart .lost{fill:var(--red-hi)}
.chart .base{stroke:rgba(211,217,240,.5);stroke-width:1.5}
.chart .bestline{stroke:var(--brass);stroke-width:1.5;stroke-dasharray:5 4}
.card .note.small{font-size:.8em;color:var(--ink-dim)}
@media (max-height:480px){.chart{max-height:5.5em}.card .times{margin:0 0 .2em}}
@media (max-height:420px){.card{font-size:.92em}.card .big-line{margin:0 0 .1em}.card .stars{font-size:1.5em}}
.pill{box-shadow:0 1px 0 #fff8 inset,0 4px 0 #23507A,0 8px 16px rgba(0,0,0,.45)}
.pill:active{box-shadow:0 1px 0 #fff8 inset,0 2px 0 #23507A,0 4px 10px rgba(0,0,0,.4)}