/* Memory Grid Challenge: deep navy, big high-contrast squares, warm yellow light. */
:root{
  --lacquer:#0E1830;--lacquer-hi:#1A2850;--ink:#FFFFFF;--ink-soft:#D5DDF0;--ink-dim:#A3B0D0;
  --hair:rgba(255,210,63,.4);--brass:#FFD23F;--brass-lo:#E3A400;--brass-hi:#FFE98F;--jade:#2FA37A;
  --serif:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",-apple-system,"Segoe UI",Roboto,sans-serif;
  --sq:#2B3B61;--sq-edge:#7084B5;--lit:#FFD23F;--lit-edge:#FFF4C2;--bad:#FF8A7A;--good:#5BE3A0;--cur:#7FE3FF;
}
body{background:radial-gradient(ellipse at 50% 30%,#1B2C55,#0E1830 70%);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:#2A1E00}

/* 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,4em);font-weight:900;color:var(--brass);line-height:1.02;
  text-shadow:0 3px 0 #6B4A00,0 8px 22px rgba(0,0,0,.45);text-wrap:balance}
.tagline{margin:0;color:var(--ink);font-size:1.1em;font-weight:700}
.lead{display:flex;flex-direction:column;align-items:center;gap:.5em}
.lead .mini{display:grid;grid-template-columns:repeat(3,1.2em);gap:.25em;margin-bottom:.2em}
.lead .mini i{width:1.2em;height:1.2em;border-radius:.25em;background:var(--sq);border:2px solid var(--sq-edge)}
.lead .mini i.on{background:var(--lit);border-color:var(--lit-edge);box-shadow:0 0 10px rgba(255,210,63,.7);animation:twinkle 2.4s infinite var(--d,0s)}
@keyframes twinkle{0%,100%{filter:none}50%{filter:brightness(1.25)}}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.55em;width:min(23em,100%)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.levels{display:grid;grid-template-columns:repeat(var(--n,8),1fr);gap:5px;width:100%}
.modes .choice,.levels .choice{min-height:48px;min-width:40px;padding:.2em;font:800 1.05em/1 var(--serif);color:var(--ink);background:rgba(14,24,48,.85);
  border:2px solid rgba(213,221,240,.35);border-radius:14px}
.levels .choice{font-size:1.3em}
.modes .choice[aria-pressed=true],.levels .choice[aria-pressed=true]{background:var(--brass);border-color:#fff;color:#2A1E00}
.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:#0E1830;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{min-width:0;font-size:1.15em}
  .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){.lead .mini{display:none}}
@media (max-height:620px) and (max-aspect-ratio:1/1){.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.5em}
  .lvl-note{font-size:.8em;min-height:0}
  .menu-col{gap:.3em}
  .menu-col .pill{min-height:46px;padding-top:.4em;padding-bottom:.4em}
  .modes .choice,.levels .choice{min-height:44px}
  .tagline{font-size:.95em}
  .lead .mini{display:none}
}
@media (max-height:480px) and (max-width:700px){.home .title{font-size:2em}.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{display:none}.home .menu-col{width:100%}}

/* the game: bar, a line of words, the board, the answer button */
#game{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"bar" "status" "board" "foot";
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
#game .bar{grid-area: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%,#2B3B61,#0E1830 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-height:480px){.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}
.hearts{flex:none;display:flex;gap:.15em}
.hearts svg{width:1.6em;height:1.6em;fill:#FF6B81;stroke:#fff;stroke-width:1.2;transition:transform .3s,opacity .3s,filter .3s}
.hearts svg.gone{fill:none;stroke:var(--ink-dim);opacity:.6;transform:scale(.8)}
.hearts svg.break{animation:heartbreak .6s}
@keyframes heartbreak{30%{transform:scale(1.35) rotate(-8deg)}60%{transform:scale(.7) rotate(6deg)}}
.status{grid-area:status;text-align:center;font:900 1.45em/1.25 var(--serif);color:var(--ink);padding:.15em .6em .35em;min-height:2.1em;display:flex;align-items:center;justify-content:center;text-wrap:balance}
.status.glow{color:var(--brass-hi);animation:praise .6s}
@keyframes praise{0%{transform:scale(.8);opacity:.3}60%{transform:scale(1.08)}100%{transform:none;opacity:1}}
.status.soft{color:var(--bad)}
.wrap{grid-area:board;position:relative;min-height:0;min-width:0}
.board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;gap:var(--gap,10px);grid-template-columns:repeat(var(--size,3),1fr);grid-template-rows:repeat(var(--size,3),1fr)}
.board.enter{animation:enter .35s ease-out}
@keyframes enter{from{opacity:0;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%)}}
.cell{border:3px solid var(--sq-edge);border-radius:16%;background:linear-gradient(160deg,#34497A,var(--sq));padding:0;min-width:0;min-height:0;
  box-shadow:0 4px 0 #0A1226,inset 0 1px 0 rgba(255,255,255,.15);transition:background-color .15s,border-color .15s,box-shadow .2s,filter .2s;position:relative}
.cell:hover{filter:brightness(1.12)}
.cell.lit,.cell.found{background:radial-gradient(circle at 40% 35%,#FFF6CC,var(--lit) 60%,#F2B800);border-color:var(--lit-edge);
  box-shadow:0 4px 0 #8A6400,0 0 calc(var(--cs,80px)*.35) rgba(255,210,63,.75)}
.cell.found::after{content:"";position:absolute;inset:28%;border-radius:50%;border:4px solid rgba(120,80,0,.55)}
.cell.lit{animation:light .3s ease-out}
@keyframes light{from{transform:scale(.9);filter:brightness(1.6)}to{transform:none}}
.cell.pop{animation:pop .32s ease-out}
@keyframes pop{0%{transform:scale(.82)}55%{transform:scale(1.1)}100%{transform:none}}
.cell.wrong{background:linear-gradient(160deg,#FFA597,var(--bad));border-color:#fff;box-shadow:0 4px 0 #7A2A20}
.cell.wrong::after{content:"";position:absolute;inset:30%;background:linear-gradient(45deg,transparent 42%,#5A1A12 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,#5A1A12 42% 58%,transparent 58%)}
.cell.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-6%)}40%{transform:translateX(6%)}60%{transform:translateX(-4%)}80%{transform:translateX(3%)}}
.cell.reveal{border-color:var(--lit);border-style:dashed;border-width:5px}
.cell.wave{animation:wave .5s ease-out var(--d,0s) both}
@keyframes wave{0%{transform:none}40%{transform:scale(1.12) rotate(3deg);filter:brightness(1.35)}100%{transform:none}}
.cell.cursor{outline:5px solid var(--cur);outline-offset:3px;z-index:1}
.board.wait .cell{cursor:default}
.foot-row{grid-area:foot;display:flex;justify-content:center;padding:.4em .8em max(.8em,env(safe-area-inset-bottom))}
.foot-row:not(:has(#match:not([hidden]))){padding:0 0 max(.6em,env(safe-area-inset-bottom))}
.match{min-height:64px;min-width:min(14em,90%);font-size:1.4em;touch-action:manipulation}
.match[aria-disabled=true]{filter:grayscale(.7) brightness(.8)}
.match.yes{animation:yes .45s;background:linear-gradient(180deg,#B8FFD9,var(--good) 50%,#2FA37A)}
@keyframes yes{40%{transform:scale(1.08)}}
.match.no{animation:shake .4s}

/* a wide screen: the board on the left, the bar, words and button beside it */
@media (min-aspect-ratio:5/4){
  #game{grid-template-columns:minmax(0,1fr) minmax(12.5em,min(36%,19em));grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"board bar" "board status" "board foot"}
  .status{font-size:1.5em;padding:.3em .5em}
  #game .bar{padding-left:.3em}
  .foot-row:not(:has(#match:not([hidden]))){padding:0}
}
@media (min-aspect-ratio:5/4) and (max-height:480px){
  body{font-size:17px}
  .status{font-size:1.3em}
  .match{min-height:56px;font-size:1.25em}
}

.card .big{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:var(--brass);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 h3{margin:.5em 0 .1em;color:var(--brass);font:900 1.05em/1.2 var(--serif)}
.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)}
@media (max-height:420px){.card{font-size:.92em}.card .big{margin:0 0 .1em}.card .stars{font-size:1.5em}}