:root{
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#eef8ed;
  background:#153e36;
  font-synthesis:none;
  color-scheme:dark
}
*{
  box-sizing:border-box
}
html,body,#app{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden
}
button,select{
  font:inherit
}
button{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,select:focus-visible{
  outline:3px solid #ffdf87;
  outline-offset:3px
}
/* Headings receive focus from code so screen readers start there; a focus box on them only looks broken. */
[tabindex="-1"]:focus{
  outline:none
}
button:disabled{
  opacity:.35;
  cursor:default
}
#app{
  position:relative;
  display:flex;
  flex-direction:column;
  background:radial-gradient(ellipse at 50% 42%,#316858 0,#194b40 55%,#103d35 100%)
}
#app:before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid #b9d5ad19;
  border-radius:18px;
  pointer-events:none
}
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 26px 10px;
  z-index:1
}
.brand{
  display:flex;
  align-items:center;
  gap:11px
}
.brand-mark{
  display:grid;
  place-items:center;
  width:35px;
  height:41px;
  background:#f7f3dc;
  color:#35614b;
  border-radius:7px;
  box-shadow:0 3px #b8bca0;
  font-family:serif;
  font-size:28px
}
.eyebrow{
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#b9d3ba
}
.brand h1{
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:400;
  margin:2px 0 0;
  letter-spacing:-.5px
}
.header-actions{
  display:flex;
  gap:6px
}
.icon-button{
  width:38px;
  height:38px;
  border:1px solid #c9dfc52b;
  border-radius:50%;
  background:#14392c55;
  color:#e6efda;
  font-size:18px
}
.stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  font-variant-numeric:tabular-nums;
  font-size:14px;
  color:#e0e9d8;
  padding:0 20px 7px
}
.stats strong{
  font-size:20px;
  color:#fff8df;
  margin-left:5px;
  font-weight:600
}
.stats .time{
  min-width:40px;
  display:inline-block
}
#score{display:inline-block}
.time-label{
  display:none
}
.progress{
  height:3px;
  background:#b6d2b526;
  width:min(340px,64%);
  margin:0 auto 5px;
  border-radius:6px;
  overflow:hidden
}
.progress i{
  display:block;
  height:100%;
  width:0;
  background:#dfc681;
  transition:width .35s
}
.board-area{
  position:relative;
  flex:1;
  min-height:0;
  overflow:clip;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#75947b #194b40;
  touch-action:pan-x pan-y
}
.board-area.enlarged{
  overflow:auto;
  scrollbar-gutter:stable;
}
.board-wrap{
  overflow:hidden;
  position:relative;
  margin:auto;
  contain:layout paint
}
.board{
  position:absolute;
  transform-origin:top left;
  will-change:transform
}
.tile{
  position:absolute;
  width:60px;
  height:80px;
  padding:3px;
  border:1px solid #dbd8c3;
  border-radius:7px;
  background:linear-gradient(135deg,#fffef3,#eee9d4);
  box-shadow:0 6px 0 #8f9b80,0 8px 3px #07281e80,inset 0 1px 0 white;
  /* Gradient-to-solid background transitions expose the dark board mid-fade, and shadow transitions repaint the board. */
  transition:filter .16s,translate .14s ease-out;
  touch-action:manipulation;
  color:#244c46
}
.tile svg{
  display:block;
  width:100%;
  height:100%;
  pointer-events:none
}
/* Upper layers cast a deeper shadow, so stacks read at a glance. */
.tile.upper{
  box-shadow:0 6px 0 #8f9b80,0 9px 3px #07281e99,-3px 13px 14px #031a1466,inset 0 1px 0 white
}
.tile.blocked{
  /* Dim the face, not its ink: covered symbols must remain readable. Free tiles also stand taller. */
  background:#cbd2c6;
  box-shadow:0 4px 0 #808c7a,0 6px 2px #07281e80;
  filter:none
}
.tile.upper.blocked{
  box-shadow:0 4px 0 #808c7a,0 7px 2px #07281e99,-3px 11px 12px #031a1466
}
.tile.free:hover{
  background:#fffbea;
  box-shadow:0 6px 0 #b7b793,0 8px 10px #061f2480,inset 0 0 0 2px #dfc886
}
.tile.free.hinted{
  background:#ffe59a;
  box-shadow:0 6px 0 #a47620,inset 0 0 0 3px #704000,0 0 0 3px #ffda75;
  z-index:900!important
}
/* The picked tile lifts off the board. */
.tile.free.selected{
  background:#dcefff;
  box-shadow:0 6px 0 #50738a,0 14px 12px #061f2466,inset 0 0 0 3px #174f79,0 0 0 3px #eff8ff;
  translate:0 -7px;
  z-index:950!important
}
.tile.free.partner:not(.hinted){
  background:#edf6ff;
  box-shadow:0 6px 0 #50738a,inset 0 0 0 3px #174f79;
  z-index:850!important
}
/* Glows stay still. An animated glow becomes its own layer, and every tile stacked above it must then be composited
   too, which doubled the drawing work per match on a slow two-core machine. */
.tile.free.hinted:not(.lock-source)::before,.tile.unlocked:not(.lock-source):not(.lock-target)::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:10px;
  pointer-events:none
}
.tile.free.hinted:not(.lock-source)::before{box-shadow:0 0 0 3px #ffda75,0 0 18px 7px #ffe8a8cc}
.coaching .tile.free.hinted:not(.lock-source)::before{box-shadow:0 0 0 5px #ffda75,0 0 24px 10px #ffe8a8dd}
.tile.unlocked:not(.lock-source):not(.lock-target)::before{box-shadow:0 0 0 3px #fff3c4,0 0 20px 6px #fff3c4b0}
.tile.restored{animation:restore .35s ease-out}
.board.shuffling{animation:reshuffle .55s ease-in-out}
.tile[data-marker]::after{
  content:attr(data-marker);
  position:absolute;
  top:-7px;
  right:-5px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:2px solid #fff9e6;
  border-radius:50%;
  background:#704000;
  color:#fff;
  font-size:20px;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}
.tile.selected::after{
  background:#174f79
}
.tile.partner:not(.hinted)::after{background:#174f79}
.tile.lock-target::before,.tile.lock-source::before{
  content:"";
  position:absolute;
  inset:0;
  border:3px dashed #a13b0c;
  border-radius:6px;
  pointer-events:none
}
.tile.lock-target::before{border:4px solid #a13b0c}
.blocked-guide{position:fixed;inset:0;z-index:1050;pointer-events:none}
.blocked-guide[hidden]{display:none}
.blocked-label{
  position:absolute;
  padding:9px 12px;
  min-height:76px;
  border:2px solid #a13b0c;
  border-radius:10px;
  background:#fff4df;
  color:#662604;
  font-size:15px;
  line-height:1.4;
  box-shadow:0 3px 8px #07281e66;
  text-align:center
}
.blocked-label strong,.blocked-label span{display:block}
.blocked-label strong{font-size:17px;margin-bottom:3px}
.blocked-arrow{
  position:absolute;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:2px solid #fff4df;
  border-radius:6px;
  background:#a13b0c;
  color:white;
  font-size:26px;
  font-weight:800;
  line-height:1
}
.blocked-guide[data-reason="sides"] .above,
.blocked-guide[data-reason="covered"] .left,
.blocked-guide[data-reason="covered"] .right{display:none}
.side-rule{margin:20px 0;padding:12px 8px;background:#e7ebdf;border-radius:10px}
.rule-row{display:flex;justify-content:center}
.rule-tile{position:relative;flex:1;max-width:65px}
.rule-tile svg{display:block;width:100%;border:1px solid #81907a;border-radius:5px;background:#fffef3}
.rule-tile.locked svg{background:#cbd2c6}
.rule-tile>span{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);background:#a13b0c;color:white;border-radius:5px;padding:0 4px;font-size:22px;line-height:1.2}
.side-rule p{margin:22px 0 0}
.practice-dialog{width:min(460px,calc(100% - 28px));padding:18px}
.practice-dialog h2{font-size:25px;margin:0 0 8px}
.practice-progress{font-size:14px;margin:8px 0;color:#45624d}
.practice h3{font-size:24px;margin:8px 0;color:#254b3c}
.practice{--practice-width:clamp(60px,18vw,88px);display:grid;grid-template-columns:1fr 1fr}
.practice>p,.practice>h3,.practice-board{grid-column:1 / -1}
.practice #practice-next{grid-column:2;grid-row:6}
.practice #practice-skip{grid-column:1;grid-row:6}
.practice:has(#practice-next[hidden]) #practice-skip{grid-column:1 / -1}
.practice .tool{white-space:normal;line-height:1.25;padding:10px 8px}
.practice-complete{display:block}
.practice-copy{min-height:48px;margin:8px 0;font-size:clamp(16px,2vw,18px)}
.practice-board{height:calc(var(--practice-width) * 4 / 3 + 42px);position:relative;margin:16px auto}
.practice-status{min-height:48px;margin:10px 0;font-size:clamp(16px,2vw,18px);font-weight:600;color:#254b3c}
.practice button[hidden]{display:none}
.practice .tile{width:var(--practice-width);height:calc(var(--practice-width) * 4 / 3);transition:none}
@media (min-width:520px) and (min-aspect-ratio:4/3){
  .practice-dialog{width:min(760px,calc(100% - 24px))}
  .practice:not(.practice-complete){--practice-width:clamp(60px,calc((100vw - 96px) / 8),88px);grid-template-columns:minmax(0,1fr) calc(var(--practice-width) * 4 + 6px);gap:8px 16px}
  .practice .practice-progress{grid-column:1;grid-row:1}
  .practice h3{grid-column:1;grid-row:2}
  .practice .practice-copy{grid-column:1;grid-row:3;min-height:0}
  .practice .practice-board{grid-column:2;grid-row:1 / 4;align-self:center;margin:8px auto}
  .practice-status{grid-row:4;min-height:0;margin:6px 0}
  .practice #practice-next,.practice #practice-skip{grid-row:5;margin-top:0}
}
@media (max-height:380px) and (min-width:520px){
  .practice-dialog{padding:12px}
  .practice-dialog h2{display:none}
  .practice:not(.practice-complete){gap:6px 16px}
  .practice h3{font-size:22px;margin:0}
  .practice-progress,.practice-copy,.practice-status{margin:0;line-height:1.3}
  .practice-copy,.practice-status{font-size:16px}
  .practice-board{height:calc(var(--practice-width) * 4 / 3 + 26px);margin:0 auto}
}
.tile.removing{
  pointer-events:none;
  transition:translate .12s cubic-bezier(.55,0,.9,.45);
  z-index:1000!important
}
.feedback{
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 12px;
  font-size:14px;
  line-height:1.4;
  color:#eef5e8;
  flex-shrink:0
}
.feedback.positive{
  color:#ffe6a3
}
.feedback.warning{
  color:#ffd7ac
}
.toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:3px 20px 19px;
  z-index:1
}
.tool{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 17px;
  border:1px solid #bdd6b933;
  background:#12392f77;
  border-radius:12px;
  color:#f0f3df;
  font-size:14px;
  font-weight:600;
  white-space:nowrap
}
.tool:disabled{
  opacity:1;
  background:#244e45;
  color:#b6c7ba;
  border-color:#607b6d
}
.tool:hover{
  background:#386853
}
.tool.primary{
  background:#eee5bd;
  color:#27483a;
  border-color:#eee5bd
}
.tool .symbol{
  font-size:18px;
  font-weight:400
}
.floating{
  position:fixed;
  z-index:1160;
  color:#fff2b7;
  font-weight:800;
  font-size:26px;
  text-shadow:0 2px 0 #1e6045,0 3px 10px #0b2a22;
  pointer-events:none;
  animation:float .9s cubic-bezier(.2,.8,.3,1) forwards
}
.floating.hot{color:#fff;font-size:30px}
.fx{position:fixed;inset:0;pointer-events:none;z-index:1150;overflow:hidden;contain:strict}
.fx>div{position:absolute;width:0;height:0}
.fx i{position:absolute;display:block}
.fx .chips i{margin:-3px 0 0 -5px;border-radius:2px;background:#fffaea;box-shadow:0 2px 0 #7d8a6c}
.fx .petals i{width:12px;height:7px;margin:-3px 0 0 -6px;border-radius:50%}
.fx .ring{border:3px solid #fff6d8;border-radius:50%}
/* Combo words: quick matches only ever add points; nothing counts down. */
.combo{
  position:fixed;
  z-index:1160;
  pointer-events:none;
  transform:translateX(-50%);
  display:grid;
  justify-items:center;
  opacity:0;
  padding:5px 14px 6px;
  border-radius:14px;
  background:#0d2f28e0;
  box-shadow:0 6px 20px #00140f80;
  font-weight:800;
  text-align:center;
  line-height:1.15;
  white-space:nowrap
}
.combo strong{font-size:26px;color:#fff;text-shadow:0 2px 0 #1e6045}
.combo span{font-size:15px;color:#ffe6a3}
.combo.big{padding:8px 18px}
#hint.nudge{animation:nudge 1.6s ease-in-out infinite}
.feedback.coach{gap:10px;color:#fff8df;font-weight:600;font-size:15px}
.feedback .mipo{width:38px;height:38px;flex:none;animation:hop .5s ease-out}
.level{font-size:13px;font-weight:600;color:#cfe3cc;margin-top:2px;letter-spacing:.01em}
.loading{
  margin:auto;
  color:#fff3cb
}
dialog{
  border:1px solid #d9cdac;
  border-radius:22px;
  background:#faf7e9;
  color:#254b3c;
  padding:24px;
  width:min(420px,calc(100% - 28px));
  max-height:calc(100% - 24px);
  overflow:auto;
  box-shadow:0 24px 80px #001e1aaa;
  text-align:center
}
dialog::backdrop{
  background:#052e29b5;
  backdrop-filter:blur(5px)
}
dialog h2{
  font-family:Georgia,serif;
  font-size:31px;
  font-weight:400;
  margin:8px 0 12px
}
dialog p{
  font-size:16px;
  line-height:1.6;
  color:#3d5846
}
dialog .tool{
  background:#255846;
  color:#fff;
  width:100%;
  margin-top:12px;
  border-color:#255846;
  min-height:48px;
  font-size:16px
}
dialog .secondary{
  background:transparent;
  color:#45624d;
  border-color:#cbd3bc
}
dialog .secondary:hover{background:#e7ead9;color:#254b3c;border-color:#68795e}
dialog button:focus-visible,dialog select:focus-visible{outline-color:#174f79}
dialog label{
  display:block;
  text-align:left;
  font-size:15px;
  margin:20px 0 7px
}
dialog select{
  width:100%;
  height:48px;
  font-size:16px;
  padding:0 12px;
  border:1px solid #c1cbb4;
  border-radius:9px;
  background:#fffdf4;
  color:#254b3c
}
.result-flower{
  font-size:50px;
  color:#b99a49;
  line-height:1.2
}
.result-stats{
  display:flex;
  justify-content:center;
  gap:28px;
  margin:22px 0
}
.result-stats strong{
  display:block;
  font-size:25px
}
.result-stats span{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#49634b
}
.result-dialog{padding-top:16px}
.result-dialog[open]{display:flex;flex-direction:column}
.result-dialog .result-mipo{order:-1}
.result-dialog h2{margin:0 0 4px}
.result-mipo .mipo{display:block;width:80px;height:80px;margin:0 auto;animation:hop .6s ease-out}
dialog p.result-sub{margin:0}
.result-dialog .result-stats{margin:14px 0}
.badges{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 12px}
.badges li{display:flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;border:1px dashed #a9b39d;color:#5d6d59;font-size:14px;font-weight:600}
.badges li span{font-size:16px;line-height:1}
.badges li.earned{border:1px solid #255846;background:#e2efe1;color:#1f4a3a}
.badges li.earned span{color:#b8325c}
.badges li.waiting{opacity:.25}
.badges li.pop{animation:badge .45s cubic-bezier(.3,1.6,.5,1)}
dialog p.new-best{font-weight:700;color:#7a4b00;margin:0}
dialog p.next-up{font-size:15px;margin:2px 0 0}
dialog .tool.play{background:#ffd23f;border:2px solid #2a1d9e;color:#2a1d9e;font-weight:800;box-shadow:0 4px 0 #f6b42c}
dialog .tool.play:hover{background:#ffdc66}
dialog .tool.play:focus-visible{outline-color:#2a1d9e}
.rule-sample{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:18px
}
.rule-sample svg{
  height:72px;
  background:#fffef2;
  border:1px solid #d4d3bc;
  border-radius:7px;
  box-shadow:0 3px #aab19a
}
.confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1200
}
.confetti i{
  position:absolute;
  width:7px;
  height:12px;
  top:-20px;
  background:#e3c576;
  animation:confetti 2.4s ease-out forwards
}
.paused .board{
  visibility:hidden
}
@keyframes float{
  0%{opacity:0;translate:0 6px;scale:.7}
  15%{opacity:1;scale:1.15}
  30%{scale:1}
  100%{opacity:0;translate:0 -54px}
}
@keyframes restore{from{opacity:0;translate:0 -18px}}
@keyframes reshuffle{50%{opacity:.35}}
@keyframes nudge{50%{box-shadow:0 0 0 4px #ffe59a99;background:#386853}}
@keyframes hop{0%{translate:0 8px;scale:.85}60%{translate:0 -3px}100%{translate:0 0}}
@keyframes badge{0%{scale:.4;opacity:0}100%{scale:1;opacity:1}}
@keyframes confetti{
  to{
    transform:translateY(100vh) rotate(640deg);
    opacity:0
  }
}
@media(max-width:550px){
  header{
    padding:17px 17px 12px
  }
  .brand h1{
    font-size:23px
  }
  .eyebrow{
    font-size:8px
  }
  .stats{
    gap:18px;
    padding-bottom:12px
  }
  .stats strong{
    font-size:18px
  }
  .progress{
    margin-bottom:10px
  }
  .toolbar{
    gap:4px;
    padding:4px 8px max(16px,env(safe-area-inset-bottom))
  }
  .tool{
    flex:1;
    flex-direction:column;
    gap:2px;
    padding:4px 2px;
    height:54px;
    font-size:14px;
    border-radius:11px
  }
  .tool .symbol{
    font-size:20px
  }
  #new{white-space:normal;line-height:1.15}
  #new .symbol{display:none}
  .feedback{
    height:44px;
    font-size:14px;
    padding:0 18px
  }
  dialog .tool{
    display:flex;
    flex-direction:row;
    min-height:44px
  }
  .brand-mark{
    width:31px;
    height:38px
  }
  .header-actions{
    gap:5px
  }
  .icon-button{
    width:34px;
    height:34px
  }
}
@media(max-height:450px){
  header{
    padding:8px 18px 4px
  }
  .brand h1{
    font-size:19px
  }
  .eyebrow{
    display:none
  }
  .brand-mark{
    height:28px;
    width:25px;
    font-size:21px
  }
  .stats{
    position:absolute;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    gap:16px;
    white-space:nowrap
  }
  .stats strong{
    font-size:16px
  }
  .progress{
    margin-bottom:2px
  }
  .toolbar{
    padding:0 12px 8px
  }
  .tool{
    height:35px;
    flex-direction:row;
    flex:initial;
    padding:0 13px;
    font-size:14px
  }
  .feedback{
    height:34px;
    font-size:14px
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition:none!important
  }
  dialog::backdrop{
    backdrop-filter:none
  }
}
@media(max-width:550px) and (max-height:450px){
  header{
    padding:8px 12px 4px
  }
  .brand-mark,.eyebrow{
    display:none
  }
  .brand h1{
    font-size:19px
  }
  .header-actions{
    gap:4px
  }
  .icon-button{
    width:30px;
    height:30px;
    font-size:15px
  }
  .stats{
    position:static;
    transform:none;
    padding:0 12px 6px;
    gap:18px
  }
  .toolbar{
    gap:4px;
    padding:2px 8px 8px
  }
  .toolbar .tool{
    flex:1;
    flex-direction:column;
    height:44px;
    padding:4px 2px;
    font-size:14px;
    gap:1px
  }
  .toolbar .symbol{
    font-size:17px
  }
  .feedback{
    height:36px;
    font-size:14px
  }
}

@media (max-height:450px) and (min-width:551px) and (max-width:759px){
  .stats{position:static;transform:none;gap:16px;padding:0 10px 4px}
}

@media (pointer:coarse){
  .icon-button{min-width:44px;min-height:44px}
  .tool{min-width:44px;min-height:44px}
  .brand{min-width:0}
  .keyboard-help{display:none}
}
@media (pointer:coarse) and (max-width:550px){
  .brand{gap:8px}
  .brand h1{font-size:20px}
  .brand-mark{width:28px;height:34px;font-size:25px;flex-shrink:0}
  .eyebrow{display:none}
  .header-actions{gap:2px}
}

/* Use the empty sides of a wide player, so the board gets its full height.
   Narrow/very short players retain the compact top and bottom controls. */
@media (min-width:760px) and (min-height:380px){
  #app{
    display:grid;
    grid-template-columns:92px minmax(0,1fr) 108px;
    grid-template-rows:94px auto 4px minmax(0,1fr);
    gap:8px;
    padding:12px
  }
  header{display:contents}
  .brand{
    grid-column:1;
    grid-row:1;
    align-self:start;
    padding-top:8px
  }
  .brand-mark,.eyebrow{display:none}
  .brand h1{font-size:21px;line-height:1.15;margin:0;letter-spacing:-.5px}
  .stats{
    grid-column:1;
    grid-row:2;
    position:static;
    transform:none;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:0;
    font-size:14px;
    white-space:normal
  }
  .stats strong{display:block;margin:3px 0 0;font-size:25px;line-height:1.1}
  .stats .time{display:block}
  .time-label{display:inline}
  .progress{grid-column:1;grid-row:3;width:100%;height:4px;margin:0}
  .feedback{
    grid-column:1;
    grid-row:4;
    height:auto;
    min-height:0;
    display:block;
    overflow:auto;
    padding:6px 0 0;
    text-align:left;
    font-size:15px;
    line-height:1.45
  }
  .board-area{grid-column:2;grid-row:1 / -1;min-width:0}
  .feedback.coach .mipo{display:block;margin-bottom:6px}
  .header-actions{
    grid-column:3;
    grid-row:1;
    display:grid;
    grid-template-columns:repeat(2,44px);
    gap:6px;
    justify-content:center;
    align-self:start
  }
  .icon-button{width:44px;height:44px;font-size:20px}
  #pause{grid-column:1 / -1;width:100%;border-radius:12px}
  .toolbar{
    grid-column:3;
    grid-row:2 / -1;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    padding:0
  }
  .toolbar .tool{height:44px;min-height:44px;flex:none;padding:0 6px;gap:5px;font-size:14px}
  .toolbar .symbol{font-size:19px}
}
@media (min-width:1100px) and (min-height:450px){
  #app{grid-template-columns:128px minmax(0,1fr) 140px;padding:16px;gap:12px}
  .brand h1{font-size:27px}
  .stats strong{font-size:30px}
  .feedback{font-size:15px}
  .toolbar .tool{height:50px;font-size:16px}
}

/* The level line sits under the title; on very narrow or short screens they share one line or drop the mark. */
@media (max-width:360px){
  .brand-mark{display:none}
  .brand h1{font-size:18px;white-space:nowrap}
  .practice h3{font-size:21px}
  /* Five buttons share 320 px. Medium labels still read at 14 px, and "Enlarge" fits even in a wide fallback font. */
  .toolbar{gap:3px;padding-left:6px;padding-right:6px}
  .toolbar .tool{font-weight:500}
}
/* A short phone (320 × 568) fits each practice step, even when the hint or step title wraps onto another line. */
@media (max-width:550px) and (max-height:620px){
  .practice-dialog{padding:14px}
  .practice-dialog h2{font-size:22px;margin-bottom:4px}
  .practice-progress,.practice h3,.practice-copy{margin:4px 0}
  .practice-board{margin:8px auto}
  .practice-status{margin:6px 0}
}
@media (max-height:450px){
  .brand h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .level{margin:0;font-size:16px;color:#fff8df;white-space:nowrap}
}