/* What every game here shares: a shell the size of the screen, the button back to all games, and the buttons.
   Each game brings its own colours and its own board. */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:var(--bg);color:var(--fg);font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,sans-serif}
.app{height:100vh;height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:10px;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
header{display:flex;align-items:center;gap:8px;min-height:40px}
.back{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:inherit}
.back::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:.16}
.back:active::before{opacity:.3}
.back svg{position:relative;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
h1{margin:0;font-size:20px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.best{margin:0 0 0 auto;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.info{display:flex;flex-direction:column;gap:8px}
.line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;min-height:20px;font-size:15px;font-weight:700;line-height:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hint{margin:0;min-height:40px;font-size:15px;line-height:20px}
.bar{height:8px;border-radius:4px;background:var(--bar-bg);overflow:hidden}
.bar i{display:block;height:100%;background:var(--bar);transform-origin:0 50%}
.stage{position:relative;flex:1;min-height:0;container-type:size;display:grid;place-items:center}
footer{display:flex;align-items:center;gap:8px}
footer .gap{flex:1}
button{-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.btn{min-height:46px;padding:0 16px;border-radius:12px;background:var(--btn);color:var(--btn-fg);font-size:16px;font-weight:700;white-space:nowrap}
.btn.go{background:var(--go);color:var(--go-fg)}
.btn:disabled{opacity:.4;cursor:default}
.btn:active:not(:disabled){transform:translateY(1px)}
:focus-visible{outline:3px solid var(--focus,#fff);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* A phone held sideways: the words and buttons move to the left, and the board takes the rest. */
@media(orientation:landscape) and (max-height:519px){
 .app{max-width:none;display:grid;grid-template-columns:minmax(220px,36%) 1fr;grid-template-rows:auto 1fr auto;column-gap:16px;row-gap:8px}
 header{grid-column:1;grid-row:1}
 .info{grid-column:1;grid-row:2}
 footer{grid-column:1;grid-row:3;flex-wrap:wrap}
 footer .gap{display:none}
 .stage{grid-column:2;grid-row:1/span 3}
}