/* Peek-a-Word (DRAFT build 2026-10-17). 2D DOM game. Look: photoreal backdrop plate + cream picture card + white lowercase tiles with navy letters.
   Only two UI mark colours: green (right box) and grey (not in this box). No yellow, no QWERTY, no timers. */
:root{--navy:#242c5c;--cream:#fff4dc;--green:#44c552;--grey:#a8a3b3;--dark:#555162;--sky:#2fa8ff;--btn:#1769c2;--btnsh:#0f4f96;--yellow:#ffc928;--cocoa:#5c3e30;--shadow:rgba(40,28,90,.28);
  --font:"Chalkboard SE","Comic Sans MS","Century Gothic","Trebuchet MS",system-ui,sans-serif;
  --bx:48px;--bgap:4px;--tile:64px;--lbox:48px;--pic:160px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#243a6b;font-family:var(--font);color:var(--navy);touch-action:manipulation;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;padding:0;background:none}
#bg{position:fixed;inset:0;z-index:0;background:#243a6b}
#bg img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- app grid ---------- */
#app{position:fixed;inset:0;z-index:2;display:grid;justify-content:center;gap:8px;padding:max(env(safe-area-inset-top,0px),44px) 16px max(env(safe-area-inset-bottom,0px),34px)}
#hdr{grid-area:hdr;display:flex;align-items:center;gap:4px;min-width:0}
#home{flex:0 0 64px;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 6px 0 rgba(120,100,170,.35),0 10px 18px var(--shadow);display:flex;align-items:center;justify-content:center;text-decoration:none}
#home svg{width:60%;height:60%}
#hd{flex:1 1 auto;min-width:0;height:64px;border-radius:22px;background:rgba(255,255,255,.88);box-shadow:0 6px 16px var(--shadow);display:flex;flex-direction:column;justify-content:center;padding:4px 10px;text-align:center}
#title{font-weight:800;font-size:17px;line-height:1.15}
#sub{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;color:#5a5f8a;line-height:1.2;margin-top:2px}
#stars{display:flex;gap:2px;pointer-events:none}
#stars svg{width:15px;height:15px}
.star-off path{fill:rgba(255,255,255,.55);stroke:#8f86a8;stroke-width:1.4}.star-on path{fill:#ffc928;stroke:#c98f00;stroke-width:1.2}
.star-on.pop{animation:starpop .9s ease-out}
@keyframes starpop{0%{transform:scale(.4)}60%{transform:scale(1.5)}100%{transform:scale(1)}}
#flip{flex:0 0 64px;width:64px;height:64px;border-radius:20px;background:#fff;box-shadow:0 6px 0 rgba(120,100,170,.35),0 10px 18px var(--shadow);font-weight:800;font-size:17px;line-height:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--navy)}
#flip small{font-size:20px;line-height:.9}

/* legend: three letterless icons */
#legend{grid-area:leg;display:flex;align-items:center;justify-content:space-around;gap:6px;background:rgba(255,255,255,.9);border-radius:18px;box-shadow:0 6px 16px var(--shadow);padding:0 8px;pointer-events:none;min-width:0}
.lg{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;line-height:1.1;color:var(--cocoa);text-align:left}
.lg .ic{display:flex;align-items:center;gap:2px;flex:none}
.sbox{position:relative;width:24px;height:24px;border-radius:7px;flex:none}
.sbox.g{background:var(--green)}.sbox.x{background:var(--grey)}.sbox.k{background:var(--dark)}.sbox.y{background:var(--yellow)}
.sbox.w{background:#fff;border:2px solid #cfc8de;width:18px;height:18px;border-radius:6px}
.sbox svg{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}

/* picture card */
#pic{grid-area:pic;justify-self:center;align-self:start;width:var(--pic);height:var(--pic);border-radius:26px;background:var(--cream);box-shadow:0 10px 26px var(--shadow);padding:calc(var(--pic) * .06);display:flex;pointer-events:none}
#pic img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--pic) * .1);display:block}
#bubble{grid-area:bub;align-self:end;justify-self:stretch;background:rgba(255,255,255,.93);border-radius:22px;box-shadow:0 6px 16px var(--shadow);padding:10px 14px;font-size:15px;font-weight:600;line-height:1.25;color:var(--cocoa);min-height:48px;display:flex;align-items:center;pointer-events:none}

/* ---------- Little ---------- */
#brd.little{grid-area:brd;display:flex;justify-content:center;gap:8px;align-items:center}
.lbox{position:relative;width:var(--lbox);height:var(--lbox);border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 4px 0 rgba(120,100,170,.28);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--lbox) * .62);color:var(--navy)}
.lbox.ask{outline:4px solid var(--sky);outline-offset:1px}
.lbox.fill{background:#fff;animation:drop .42s cubic-bezier(.2,.9,.3,1.2)}
.lbox.fill.later{animation:fadein .5s ease-out}
@keyframes drop{0%{transform:translateY(-26px) scale(1.25);opacity:.2}100%{transform:none;opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
#tiles{grid-area:tls;display:grid;grid-template-columns:repeat(3,var(--tile));gap:4px;justify-content:center;align-content:start}
.tile{width:var(--tile);height:var(--tile);border-radius:16px;background:#fff;box-shadow:0 6px 0 rgba(120,100,170,.35),0 10px 14px var(--shadow);font-weight:800;font-size:calc(var(--tile) * .62);line-height:1;color:var(--navy);position:relative;display:flex;align-items:center;justify-content:center}
.tile:active{transform:translateY(3px)}
.tile.wrong{background:#e6e2ea;color:#a39db0;box-shadow:0 3px 0 rgba(120,100,170,.18);animation:wobble .45s ease-in-out}
.tile.used{opacity:.35}
.tile:disabled{cursor:default}
@keyframes wobble{0%,100%{transform:none}20%{transform:translateX(-7px) rotate(-3deg)}45%{transform:translateX(7px) rotate(3deg)}70%{transform:translateX(-4px)}}

/* mark badges (white disc + tick / dash / x) */
.bd{position:absolute;top:-7px;right:-7px;width:calc(var(--bd,22px));height:var(--bd,22px);border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
.bd svg{width:70%;height:70%}

/* ---------- Big ---------- */
#board{grid-area:brd;justify-self:center;width:calc(var(--n,4) * var(--bx) + (var(--n,4) - 1) * var(--bgap));height:calc(var(--vis,3) * var(--bx) + (var(--vis,3) - 1) * var(--bgap));overflow:visible;clip-path:inset(calc(var(--bgap) * -1) -10px calc(var(--bgap) * -1) -10px);position:relative;pointer-events:none}
#rows{display:flex;flex-direction:column;gap:var(--bgap);transition:transform .35s ease}
.row{display:flex;gap:var(--bgap);flex:none}
.bx{position:relative;flex:none;width:var(--bx);height:var(--bx);border-radius:calc(var(--bx) * .26);background:rgba(255,255,255,.92);box-shadow:0 3px 0 rgba(120,100,170,.25);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--bx) * .6);color:var(--navy);line-height:1}
.bx.cur{background:#fff;outline:3px solid var(--sky);outline-offset:-1px}
.bx.pop{animation:pop .22s ease-out}
@keyframes pop{0%{transform:scale(.8)}100%{transform:none}}
.bx.g{background:var(--green)}.bx.x{background:var(--grey)}.bx.y{background:var(--yellow)}
.bx .bd{--bd:calc(var(--bx) * .4);top:calc(var(--bgap) * -1);right:-5px}
.row.new .bx.g,.row.new .bx.x,.row.new .bx.y{animation:fadein .5s ease-out backwards}
.row.new .bx:nth-child(2){animation-delay:.1s}.row.new .bx:nth-child(3){animation-delay:.2s}.row.new .bx:nth-child(4){animation-delay:.3s}.row.new .bx:nth-child(5){animation-delay:.4s}
.row.glow .bx{animation:glow 1.5s ease-in-out}
@keyframes glow{0%{box-shadow:0 3px 0 rgba(120,100,170,.25)}50%{box-shadow:0 0 26px 10px rgba(255,255,255,.95)}100%{box-shadow:0 3px 0 rgba(120,100,170,.25)}}
.bx.auto{background:#e8f6ea}
.bx.fillin{animation:fadein .6s ease-out}

#kb{grid-area:kb;justify-self:center;display:grid;grid-template-columns:repeat(5,64px);grid-auto-rows:64px;gap:4px;width:336px}
#kb.tab{display:flex;flex-direction:column;width:auto;gap:4px;align-items:center}
#kb.tab .krow{display:flex;gap:4px}
.key{position:relative;width:64px;height:64px;border-radius:16px;background:#fff;box-shadow:0 5px 0 rgba(120,100,170,.35),0 8px 12px var(--shadow);font-weight:800;font-size:30px;line-height:1;color:var(--navy);display:flex;align-items:center;justify-content:center}
.key:active:not(:disabled){transform:translateY(3px)}
.key.dark{background:var(--dark);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.key .bd{--bd:20px;top:-6px;right:-6px}
.key.fn{background:#fff}.key.fn svg{width:46%;height:46%}
.key.enter{background:var(--btn);color:#fff}
.key.kg{background:var(--green);color:#fff}.key.ky{background:var(--yellow)}
.key:disabled{cursor:default;box-shadow:0 3px 0 rgba(120,100,170,.2);background:#e7e3ee;color:#aaa4b8}
.key.enter:disabled{background:#a9d8f8;color:#fff}
.key.dark:disabled{background:var(--dark);color:#fff}
.key.wob{animation:wobble .45s ease-in-out}
.key[hidden]{display:none!important}

/* ---------- action row ---------- */
#actions{grid-area:act;display:flex;gap:8px;justify-content:center;align-items:center;min-width:0}
.act{flex:1 1 0;min-width:64px;max-width:240px;height:64px;border-radius:32px;background:#fff;box-shadow:0 6px 0 rgba(120,100,170,.35),0 10px 18px var(--shadow);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;font-weight:800;font-size:15px;line-height:1.1;color:var(--navy);text-decoration:none;text-align:left}
.act svg{width:26px;height:26px;flex:none}
.act.pri{background:var(--btn);color:#fff;box-shadow:0 6px 0 var(--btnsh),0 10px 18px var(--shadow)}
.act:active{transform:translateY(3px)}

/* ---------- overlays (start, end, soon, turn) ---------- */
.ov{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden}
.ov .back{position:absolute;left:16px;top:max(env(safe-area-inset-top,0px),44px)}
.panel{background:rgba(255,248,232,.96);border-radius:32px;box-shadow:0 12px 0 rgba(120,100,170,.35),0 20px 50px rgba(30,20,60,.35);padding:26px 24px 24px;max-width:640px;width:100%;text-align:center}
.panel h1{margin:0 0 6px;font-size:34px;line-height:1.1}
.panel p{margin:0 0 18px;font-size:18px;font-weight:600;color:var(--cocoa)}
.choices{display:flex;gap:16px;justify-content:center}
.choice{flex:1 1 0;min-height:104px;border-radius:26px;background:#fff;box-shadow:0 8px 0 #cbbde6,0 12px 20px rgba(0,0,0,.14);font-weight:800;font-size:26px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--navy);padding:8px 14px}
.choice.go{background:var(--btn);color:#fff;box-shadow:0 8px 0 var(--btnsh),0 12px 20px rgba(0,0,0,.18);max-width:320px;margin:0 auto}
.choice svg{width:40px;height:40px}
.choice:active{transform:translateY(4px)}
#endstk{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:4px auto 18px}
.ec{width:96px;background:#fff;border-radius:18px;padding:6px 6px 8px;box-shadow:0 4px 10px rgba(0,0,0,.14);display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:800;font-size:18px}
.ec img{width:80px;height:80px;border-radius:12px;object-fit:cover}
.ec .stars1 svg{width:18px;height:18px}
.btnrow{display:flex;gap:14px;justify-content:center}
.btnrow .act{flex:0 1 220px}
#turn{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:#243a6b;padding:20px}
#turn .panel{max-width:420px;padding:18px 22px}
#turn svg{width:76px;height:76px;margin-bottom:6px;animation:none}
#turn .turnhome{display:inline-flex;align-items:center;gap:8px;margin-top:4px;height:56px;padding:0 22px;border-radius:28px;background:#fff;box-shadow:0 5px 0 rgba(120,100,170,.35);font-weight:800;font-size:18px;color:var(--navy);text-decoration:none}
#turn .turnhome svg{width:30px;height:30px;margin:0}

/* ---------- phone portrait (frozen budgets) ---------- */
@media (max-width:600px){
  #app{width:100%;max-width:100%}
  .game-big#app{grid-template-columns:128px 1fr;grid-template-rows:64px 48px 128px 152px 200px 64px;grid-template-areas:"hdr hdr" "leg leg" "pic bub" "brd brd" "kb kb" "act act";width:100%}
  .game-big #pic{--pic:128px;width:128px;height:128px;justify-self:start;border-radius:20px}
  .game-big #bubble{align-self:stretch;font-size:14px;padding:8px 12px;border-radius:18px;height:128px;margin-left:0}
  .game-little#app{grid-template-columns:1fr;grid-template-rows:64px 160px 48px 132px 1fr 64px;grid-template-areas:"hdr" "pic" "brd" "tls" "bub" "act"}
  .game-little #bubble{align-self:end}
  .game-big{--bx:48px;--bgap:4px}
  .game-little{--tile:64px;--lbox:48px;--pic:160px}
  .game-big #hd #title{font-size:16px}
  #legend .lg{font-size:11px}
}
/* ---------- tablet ---------- */
@media (min-width:601px){
  #app{padding:16px 24px;gap:12px}
  #home,#flip{flex-basis:64px}
  #hd{height:72px;padding:6px 18px;flex:0 1 380px;margin-left:8px}
  #title{font-size:26px}
  #sub{font-size:17px}
  #stars svg{width:22px;height:22px}
  #hdr{height:72px}
  .game-little#app{grid-template-columns:1fr;grid-template-rows:72px auto auto auto auto auto;grid-template-areas:"hdr" "pic" "brd" "tls" "bub" "act";align-content:space-between}
  .game-little{--pic:min(300px,30vh);--lbox:min(96px,11.5vh);--tile:96px}
  .game-little #tiles{grid-template-columns:repeat(6,96px);gap:16px}
  .game-little #bubble{justify-self:center;width:min(620px,100%);font-size:20px}
  .game-little .lbox{border-radius:20px}
  .game-little #brd.little{gap:14px}
  .tile{border-radius:22px}
  .act{font-size:18px;max-width:260px}
  .game-big #bubble{font-size:18px;padding:12px 16px;align-self:center}
  #legend{padding:0 14px;height:56px}
  .lg{font-size:14px;gap:8px}
  .sbox{width:30px;height:30px}.sbox.w{width:22px;height:22px}
}
/* tablet landscape */
@media (min-width:601px) and (orientation:landscape){
  .game-big#app{grid-template-columns:1fr auto 1fr;grid-template-rows:72px minmax(0,1fr) 204px 64px;grid-template-areas:"hdr hdr hdr" "bub brd pic" "kb kb kb" "act act act"}
  .game-big #legend{grid-area:hdr;justify-self:end;align-self:center;max-width:56%}
  .game-big{--bx:clamp(40px,calc((100vh - 16px - 32px - 72px - 204px - 64px - 36px - 30px) / 6),64px);--bgap:6px;--vis:6}
  .game-big #pic{--pic:min(240px,calc(100vh - 72px - 204px - 64px - 110px));justify-self:start;margin-left:32px;align-self:center}
  .game-big #bubble{justify-self:end;margin-right:32px;width:min(300px,100%);align-self:center}
}
/* tablet portrait */
@media (min-width:601px) and (orientation:portrait){
  .game-big#app{grid-template-columns:auto 1fr;grid-template-rows:72px 56px auto auto 204px 64px;grid-template-areas:"hdr hdr" "leg leg" "pic bub" "brd brd" "kb kb" "act act";align-content:space-between;column-gap:20px}
  .game-big{--bx:clamp(40px,calc((100vh - 32px - 72px - 56px - 190px - 204px - 64px - 60px - 30px) / 6),72px);--bgap:6px;--vis:6}
  .game-big #pic{--pic:190px;justify-self:end}
  .game-big #bubble{align-self:center;justify-self:start;max-width:380px}
  .game-little#app{padding-top:24px}
}
/* phone landscape: calm card only */
@media (orientation:landscape) and (max-height:500px){
  #turn{display:flex}
  #app,.ov,#bg{display:none!important}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* v4.2 review fixes: latched Next, Little star tray inside the action row */
.act:disabled{opacity:.45;cursor:default;box-shadow:0 3px 0 rgba(120,100,170,.2)}
.game-little #actions #stars{flex:none;align-self:center;margin-left:2px}
@media (max-width:600px){.game-little .act{padding:0 10px}}

/* v2 10-21: moving beach layer, lamb narrator, letters light as they are said, family card */
#fx{position:fixed;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.game-little #pic{position:relative}
#lamb{position:absolute;right:calc(100% + 10px);bottom:-6px;width:clamp(78px,24vw,210px);height:auto;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 6px 0 rgba(120,100,170,.3),0 10px 20px rgba(40,28,90,.25);border:4px solid #fff}
.lbox.lit{background:#fff4b8;box-shadow:0 0 0 5px #ffcf3a,0 4px 0 rgba(120,100,170,.28);transform:scale(1.14);transition:transform .15s}
.lbox.glow{background:#e8fff0;box-shadow:0 0 0 4px #4ccf7a,0 4px 0 rgba(120,100,170,.28)}
#fam{display:none}
.game-little.famon #tiles,.game-little.famon #bubble{display:none}
.game-little.famon #fam{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;grid-row:4 / span 2;grid-column:1;min-height:0}
.famhd{background:rgba(255,255,255,.94);border-radius:999px;padding:4px 16px;font-weight:800;color:var(--navy);font-size:17px;box-shadow:0 3px 0 rgba(120,100,170,.25)}
.famhd b{color:#ff4f8b;font-size:1.25em}
.famrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fcard{display:flex;flex-direction:column;align-items:center;gap:4px;width:var(--fc,78px);padding:5px 5px 6px;border:0;border-radius:16px;background:#fff;box-shadow:0 4px 0 rgba(120,100,170,.28);font:inherit;cursor:pointer;transition:transform .18s,box-shadow .18s;animation:fadein .4s ease-out}
.fcard img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:11px;display:block}
.fw{font-weight:800;font-size:16px;color:var(--navy);letter-spacing:.02em}
.fw b{color:#ff4f8b;font-size:1.2em}
.fcard.hl{transform:scale(1.12) translateY(-4px);box-shadow:0 0 0 4px #ffcf3a,0 8px 18px rgba(40,28,90,.3)}
.act.wait,.choice.wait{opacity:.6}
.game-little #actions #stars svg{width:14px;height:14px}
@media (min-width:601px){.fcard{--fc:min(150px,15vh)}.fw{font-size:22px}.famhd{font-size:22px}.famrow{gap:18px}#lamb{right:calc(100% + 22px)}.game-little #actions #stars svg{width:20px;height:20px}}
.fcard.long .fw{font-size:13px}
@media (min-width:601px){.fcard.long .fw{font-size:18px}}
.game-little #actions{min-width:0;max-width:100%}
.game-little #actions #stars{display:grid;grid-template-columns:repeat(5,auto);gap:1px 2px}

/* v2 Big 10-22: tap the picture to hear the word */
.game-big #pic{pointer-events:auto;cursor:pointer}
.game-big #pic:active{transform:scale(.97)}

/* v2 10-22 (Jico SS-PW-27): phone Big rows follow the visible height; layout() sets --ph --bx --k */
@media (max-width:600px){
  .game-big#app{--ph:128px;--k:64px;padding-top:max(env(safe-area-inset-top,0px),12px);padding-bottom:max(env(safe-area-inset-bottom,0px),12px);grid-template-rows:64px 48px var(--ph) calc(3 * var(--bx) + 2 * var(--bgap)) calc(3 * var(--k) + 8px) 64px}
  .game-big #pic{width:var(--ph);height:var(--ph)}
  .game-big #bubble{height:var(--ph)}
  .game-big #kb{grid-template-columns:repeat(5,var(--k));grid-auto-rows:var(--k);width:calc(5 * var(--k) + 16px)}
  .game-big #kb .key{width:var(--k);height:var(--k);font-size:calc(var(--k) * .47)}
  .game-big #actions .act{padding:0 10px;font-size:14px}
}

/* v2 10-22 Jico round 2 (Pete's votes) */
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}45%{transform:translateX(8px)}70%{transform:translateX(-4px)}}
.row.shake{animation:shake .45s ease-in-out}
.cardear{margin:16px auto 0;max-width:200px}
/* 05: the board shows every row; 06: the phone keyboard holds all 26 letters in three rows */
#board{height:calc(var(--vis,6) * var(--bx) + (var(--vis,6) - 1) * var(--bgap))}
#kb.tab.ph{gap:4px}
#kb.tab.ph .krow{gap:4px}
#kb.tab.ph .key{width:var(--kw,34px);height:var(--kh,52px);border-radius:12px;font-size:calc(min(var(--kw,34px),var(--kh,52px)) * .66)}
#kb.tab.ph .key.fn{width:calc(var(--kw,34px) * 1.5 + 2px)}
#kb.tab.ph .key .bd{--bd:16px;top:-5px;right:-5px}
@media (max-width:600px){
  .game-big#app{grid-template-rows:64px 40px var(--ph) calc(var(--vis,6) * var(--bx) + (var(--vis,6) - 1) * var(--bgap)) calc(3 * var(--kh,52px) + 8px) 64px}
  .game-big #kb{width:auto;display:flex}
  .game-big #legend{border-radius:14px}
  .game-big .lg{font-size:10.5px}
  .game-big .sbox{width:20px;height:20px}
  /* 14: Little on the phone: stars in the title pill, bigger picture, bubble and buttons close under the tiles */
  .game-little#app{grid-template-rows:64px var(--pic) 48px 132px minmax(48px,auto) 64px;align-content:space-evenly}
  .game-little{--pic:clamp(150px,calc(100dvh - 500px),min(200px,calc(100vw - 224px)))}
  .game-little #bubble{align-self:center}
  .game-little .act{max-width:180px}
}
.game-little #sub #stars svg{width:16px;height:16px}
@media (min-width:601px){.game-little #sub #stars svg{width:22px;height:22px}}
/* 13: Little title centred over the picture on tablets and laptops */
.hdpad{display:none}
@media (min-width:601px){.game-little #hdr{display:grid;grid-template-columns:64px 1fr 64px;gap:8px}.game-little .hdpad{display:block}
  .game-little #hd{justify-self:center;width:min(440px,100%);margin-left:0}}
@media (min-width:601px) and (orientation:portrait){.game-big #pic{--pic:var(--tpic,190px)}}
/* jico2 10-22: short phones (iPhone SE with Safari's bars, ~553 px) - slimmer edges and buttons so all six rows, the keyboard and the buttons fit */
@media (max-width:600px) and (max-height:620px){
  .game-big#app{padding-top:max(env(safe-area-inset-top,0px),8px);padding-bottom:max(env(safe-area-inset-bottom,0px),8px);grid-template-rows:64px 40px var(--ph) calc(var(--vis,6) * var(--bx) + (var(--vis,6) - 1) * var(--bgap)) calc(3 * var(--kh,52px) + 8px) 52px}
  .game-big #actions .act{height:52px}
  .game-little#app{padding-top:max(env(safe-area-inset-top,0px),12px);padding-bottom:max(env(safe-area-inset-bottom,0px),12px);grid-template-rows:64px var(--pic) 48px 132px minmax(48px,auto) 52px}
  .game-little{--pic:clamp(104px,calc(100dvh - 430px),150px)}
  .game-little .act{height:52px}
}