*{box-sizing:border-box}
:root{font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#1e2456;background:#222053;--gap:clamp(5px,1.15vmin,14px)}
body{margin:0;height:100vh;height:100dvh;overflow:hidden}
#scenery{position:fixed;inset:0;pointer-events:none}
#scenery picture,#scenery img{display:block;width:100%;height:100%}
#scenery img{object-fit:cover}
#app{position:relative;height:100%;padding:max(7px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;place-items:center}
section{width:100%;min-width:0;min-height:0}
h1,h2,p,ul,dl,dd{margin:0}
button,input{font:inherit;background:transparent;border:0}
button,.panel,input,.card,.hud,.words,.words h2,.topics h1,.stats span{
 border-image-source:var(--art);border-image-slice:27 fill;border-image-width:var(--rim,13px);border-image-repeat:stretch
}
button{--art:url(assets/ui/button-dialog-normal.png);--pressed:url(assets/ui/button-dialog-pressed.png);color:#fff;font-weight:900;cursor:pointer;min-height:38px;padding:5px 12px 8px;line-height:1.12}
button:not(:disabled):active{--art:var(--pressed);transform:translateY(1px)}
button:disabled{opacity:.67;cursor:default}
:focus-visible{outline:3px solid #fff6b2;outline-offset:1px}
.art-start{--art:url(assets/ui/button-start-normal.png);--pressed:url(assets/ui/button-start-pressed.png);color:#512d17}
.art-home{--art:url(assets/ui/button-home-normal.png);--pressed:url(assets/ui/button-home-pressed.png)}
.art-back{--art:url(assets/ui/button-back-normal.png);--pressed:url(assets/ui/button-back-pressed.png)}
.art-hint{--art:url(assets/ui/button-hint-normal.png);--pressed:url(assets/ui/button-hint-pressed.png);color:#512d17}
.art-sound{--art:url(assets/ui/button-sound-normal.png);--pressed:url(assets/ui/button-sound-pressed.png)}
.art-replay{--art:url(assets/ui/button-play-again-normal.png);--pressed:url(assets/ui/button-play-again-pressed.png);color:#512d17}
.art-topics{--art:url(assets/ui/button-topics-normal.png);--pressed:url(assets/ui/button-topics-pressed.png)}
.button-icon{display:inline-block;width:1.3em;height:1.3em;vertical-align:middle;margin-right:.25em}
.button-icon img,.art-sound img{display:block;width:100%;height:100%;object-fit:contain}
.logo{width:min(76vw,58vh,420px);min-width:0}
.logo img{display:block;width:100%;height:auto}
.framed{display:grid;justify-items:center;align-content:center;gap:clamp(13px,3vmin,38px);max-width:650px}
.panel{--art:url(assets/ui/panel-main.png);--rim:20px}
.entry,.result{width:min(100%,450px);padding:clamp(17px,3.7vmin,40px);display:grid;gap:clamp(9px,1.85vmin,19px);text-align:center}
.entry label{font-size:1.16rem;font-weight:900}
input{--art:url(assets/ui/panel-input.png);width:100%;min-width:0;padding:12px 13px 15px;color:#1e2456}
.entry button,.result button{min-height:43px}
.topics{height:100%;max-width:1140px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--gap);padding:3px 0}
.topics h1,.result h1{font-weight:1000;letter-spacing:-.035em;font-size:clamp(24px,5vmin,49px)}
.topics h1{--art:url(assets/ui/panel-topic-heading.png);color:white;justify-self:center;padding:5px 17px 9px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:var(--gap)}
.card{--art:url(assets/ui/card-normal.png);--pressed:url(assets/ui/card-normal.png);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;text-align:left;gap:6px;color:#252254;padding:8px 9px 10px;min-height:0;font-size:clamp(11px,2.75vmin,22px)}
.card .topic-art{width:clamp(29px,10vmin,82px);aspect-ratio:1;object-fit:contain}
.card small{display:block;font-size:.76em;color:#534278;margin-bottom:3px}
.card.done{--art:url(assets/ui/card-completed.png);--pressed:url(assets/ui/card-completed.png)}
.card .done-badge{position:absolute;right:5px;top:5px;width:clamp(12px,3vmin,25px)}
.card strong{overflow-wrap:anywhere}
.topics>.back{justify-self:center}
.game{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--gap);max-width:1420px}
.hud{--art:url(assets/ui/panel-header.png);display:flex;justify-content:center;align-items:center;gap:4px var(--gap);flex-wrap:wrap;padding:5px 9px 8px;color:white;min-width:0;text-align:center}
.hud .logo{width:clamp(44px,17vmin,128px)}
.hud h1{font-size:clamp(13px,2.9vmin,28px);line-height:1.12}
.stats{display:flex;gap:4px;white-space:nowrap;font-weight:900;font-size:clamp(10px,2.4vmin,19px)}
.stats span{--art:url(assets/ui/panel-status.png);--rim:9px;padding:4px 7px 6px}
#progress{color:#fff09c}
#timer{font-variant-numeric:tabular-nums}
.playfield{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:var(--gap);container-type:size}
.board-slot{display:grid;place-items:center;min-width:0;min-height:0;container-type:size}
.board{position:relative;width:min(100cqw,100cqh);aspect-ratio:1;--frame:clamp(6px,1.25vmin,13px);border-image:url(assets/ui/grid-frame.png) 27 fill / calc(var(--frame) + 2px) stretch;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.tiles,.trails{position:absolute;inset:var(--frame);pointer-events:none}
.tiles{display:grid;grid-template:repeat(12,minmax(0,1fr))/repeat(12,minmax(0,1fr));gap:1px}
.tile{display:grid;place-items:center;font-size:clamp(10px,5.55cqh,5.55cqw);font-weight:900;line-height:1;background:url(assets/ui/tile-normal.png) center/100% 100% no-repeat}
.tile.found-tile{background-image:url(assets/ui/tile-found.png)}
.tile.selected{background-image:url(assets/ui/tile-selected.png)}
.tile.letters{background:none}
.tile.hinted{animation:hint 1.45s ease both;background-image:url(assets/ui/tile-hint.png)}
@keyframes hint{0%,65%{opacity:1}100%{opacity:.65}}
.trace,.sparkle{position:absolute;transform:translate(-50%,-50%) rotate(var(--angle,0deg));height:6.15%;pointer-events:none}
.sparkle{width:10%;height:auto;animation:word .42s ease-out both}
@keyframes word{0%{opacity:0;scale:.45}38%{opacity:1;scale:1}100%{opacity:0;scale:1.45}}
.side{display:grid;gap:var(--gap);min-width:0}
.words{--art:url(assets/ui/panel-word-list.png);padding:4px 5px 7px;overflow:hidden}
.words h2{--art:url(assets/ui/panel-word-heading.png);--rim:10px;color:white;text-align:center;font-size:clamp(11px,2.6vmin,22px);padding:3px 6px 6px}
.words ul{padding:2px 5px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:8px;list-style:none}
.words li{display:flex;align-items:center;gap:4px;font-weight:900;font-size:clamp(10px,2.58vmin,22px);white-space:nowrap;line-height:1.32}
.words li::before{content:'';width:1em;height:1em;flex:none;background:url(assets/ui/icon-unfound.png) center/contain no-repeat}
.words li.found::before{background-image:url(assets/ui/icon-completed.png)}
.words li.found span{text-decoration:line-through}
.actions{display:flex;justify-content:space-between;align-items:center;gap:5px}
.actions button{font-size:clamp(11px,2.8vmin,18px)}
.actions .art-sound{display:grid;place-items:center;width:42px;padding:4px 8px 7px;flex:none}
.art-sound img{width:25px;height:25px}
.result{--art:url(assets/ui/panel-result.png);animation:arrive .32s ease-out}
.result h1{color:#512a9c}
.result dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;text-align:left;font-size:clamp(13px,3.4vmin,18px)}
.result dt{font-weight:800}
.result dd{overflow-wrap:anywhere}
@keyframes arrive{from{opacity:.6;transform:translateY(7px)}}
dialog{width:min(28rem,calc(100% - 32px));max-width:none;padding:0;color:#1e2456;border:0;background:transparent}
dialog form{padding:clamp(16px,4vw,24px);border-radius:15px;background-color:#fff5dc;text-align:center}
dialog .actions{justify-content:center;gap:10px}
dialog .actions button{flex:1 1 0;min-width:0;min-height:44px}
dialog h2{font-size:clamp(18px,4.4vmin,23px)}
dialog::backdrop{background:url(assets/ui/dialog-backdrop.png)}
dialog p{margin:8px 0 16px}
.loading{text-align:center;font-weight:900;padding:12px;width:min(100%,240px)}
.loading img{display:block;width:46px;margin:0 auto 4px;animation:search .6s ease-in-out alternate infinite}
@keyframes search{to{transform:translateX(5px) rotate(12deg)}}
@media (orientation:landscape){
 .cards{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
 .card{grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;text-align:center}
 .card .topic-art{width:clamp(45px,15vmin,145px)}
 .playfield{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,min(100cqh,64cqw)) minmax(0,360px);justify-content:center}
 .side{align-self:center}
 .words ul{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;padding:6px 12px}
 .words li{line-height:1.56}
}
@media (max-height:620px) and (orientation:portrait){
 .hud{gap:2px 6px}.hud .logo{width:62px}
 .words li{line-height:1.15}
 .entry,.result{padding:16px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important}}
.trace{border-image-slice:0 34 fill;border-image-width:0 calc(100cqw / 32);border-image-repeat:stretch}
button,.topics h1,.hud,.words h2{color:#26334a}
#progress{color:#1e5360}
.result h1{color:#4b426b}
button.glossy-control{border-image:none;background:none;padding:0;display:grid;place-items:center;min-height:44px}
.glossy-control img{display:block;width:100%;height:auto;aspect-ratio:auto;max-height:48px;object-fit:contain}
.glossy-home{width:min(190px,100%)}
.game .glossy-control{width:min(31%,125px)}
.welcome-screen{gap:clamp(5px,1.5vmin,14px)}
.welcome-entry{position:relative;display:block;width:min(100%,450px,105vh);aspect-ratio:3/2;padding:0;background:url(assets/ui/welcome-panel.png) center/contain no-repeat}
.welcome-name{position:absolute;left:11%;top:32%;width:78%;aspect-ratio:3;background:url(assets/ui/welcome-name.png) center/contain no-repeat}
.welcome-name input{position:absolute;left:28.5%;top:45.5%;width:54.5%;height:27%;border-image:none;padding:0 2px;font-size:16px;line-height:1;outline-offset:1px}
.welcome-name input:focus-visible{outline:2px solid #225890}
.welcome-entry .welcome-start{position:absolute;top:66%;left:25%;width:50%}
.welcome-entry .welcome-start img{max-height:none}
@media (max-width:600px) and (orientation:portrait){
  .welcome-entry .welcome-name{top:27%}
  .welcome-entry .welcome-start{top:68%;left:29%;width:42%}
}
.welcome-name input::placeholder{font-size:clamp(11px,3.8vmin,16px)}
#leave{container-type:inline-size}
#leave form{
  background:none;
  border-image:url(assets/ui/confirm-panel.png) 240 222 110 fill /
    15.625cqw 14.453cqw 7.162cqw stretch;
  padding:16.5cqw 15cqw 7.5cqw;
}
#leave h2{font-size:clamp(16px,5.5cqw,23px)}
#leave p{margin:4px 0;font-size:clamp(12px,4.4cqw,16px)}
#leave .actions{gap:5px}
.card.topic-sticker{display:block;border-image:none;background:none;padding:0;min-width:0}
.card.topic-sticker .topic-art{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.result-actions .glossy-control{min-width:0;min-height:44px}
.result-actions img{max-height:68px}
.topics .topic-banner{border-image:none;padding:0;width:min(260px,68vw,39vh);line-height:0}
.topic-banner img{display:block;width:100%;height:auto}
.topic-sticker{animation:topic-pop 250ms ease-out calc(var(--topic-order,0)*85ms) both}
@keyframes topic-pop{
  0%{opacity:0;scale:.65}
  70%{opacity:1;scale:1}
  85%{scale:.97}
  100%{opacity:1;scale:1}
}
@media (prefers-reduced-motion:reduce){
  .topic-sticker{animation:none}
}
.game{max-width:1060px;grid-template-rows:auto minmax(0,1fr) auto}
.game .hud{border-image:none;padding:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:5px}
.puzzle-title,.game .stats{border-image:url(assets/ui/puzzle-hud.png) 24 fill / 12px stretch;min-width:0;min-height:34px;display:flex;justify-content:center;align-items:center;gap:4px;padding:4px 7px}
.game .hud .logo{flex:0 1 clamp(49px,21vmin,130px)}
.game .hud h1{overflow-wrap:anywhere;font-size:clamp(11px,2.8vmin,24px)}
.game .stats{font-size:clamp(8px,2vmin,16px);color:#1e2456}
.puzzle-stat{display:flex;align-items:center;gap:3px}
.puzzle-stat img{width:clamp(13px,4vmin,31px);height:auto}
.game .stats span{border-image:none;padding:0;line-height:1.05}
.game #progress{display:block;font-size:1.22em;text-align:center}
.game #timer{font-size:1.2em;font-weight:900}
.game .board{border-image-source:url(assets/ui/puzzle-grid.png);border-image-slice:24 fill}
.game .tile.mark:not(.found-tile):not(.selected):not(.hinted){background-image:url(assets/ui/puzzle-tile.png)}
.game .words{--art:url(assets/ui/puzzle-words.png);--rim:12px;padding:4px 10px 7px}
.game .words h2{--art:url(assets/ui/puzzle-heading.png);--rim:10px;display:flex;justify-content:center;align-items:center;gap:.28em;color:#fff;padding:4px 6px}
.game .words h2 img{width:1.45em;height:1.45em}
.game .words h2 strong{color:#ffeb66}
.game .puzzle-actions{justify-content:center;gap:clamp(4px,1.6vmin,12px)}
.game .puzzle-actions button{width:min(31%,145px)}
@media (max-width:370px){
  .game .hud .logo{flex-basis:44px}
  .puzzle-title,.game .stats{padding-inline:5px}
  .puzzle-stat img{width:12px}
}
@media (min-width:650px) and (orientation:portrait){
  .game{max-width:780px}
}

#hint{position:relative}
.hint-count{position:absolute;right:0;top:0;padding:2px 5px;background:url('assets/ui/puzzle-tile.png') center/100% 100%;color:#21194b;font-size:clamp(9px,1.4vmin,12px);line-height:1;font-weight:800;pointer-events:none}