/* Balloon Hangman — game-specific styles (shared tokens come from /assets/css/game.css) */
.link-btn{background:none;border:0;padding:0;color:var(--sky);font:700 .82rem 'Inter',sans-serif;cursor:pointer;text-align:left}
.link-btn:hover{text-decoration:underline}
.hide-xs{display:inline}
.msg{min-height:1.4em;margin:10px 0 0;text-align:center;font-weight:700}
.msg.ok{color:#a7f3d0}.msg.bad{color:#fda4af}.msg.hint{color:var(--gold)}
.btn.danger{background:#3b0a14;color:#fecdd3}.btn.danger:hover{background:var(--rose);color:#fff}
.top-list{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.88rem}
.top-list li{display:flex;justify-content:space-between;gap:8px;color:var(--soft)}
.top-list li:nth-child(1) b{color:var(--gold)}

/* ---- word list editor ---- */
.fc-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"th w ctl" "th c ctl";gap:2px 6px;align-items:center;background:var(--bg);border:2px solid var(--hard);border-radius:10px;padding:5px 6px}
.fc-item .fc-thumb{grid-area:th}.fc-item .w{grid-area:w}.fc-item .c{grid-area:c}.fc-item .ctl{grid-area:ctl;display:flex;align-items:center}
.fc-item input[type=text]{min-width:0;border:0;background:transparent;padding:5px 4px;border-radius:6px;font-weight:700;font-size:.9rem}
.fc-item input.c{font-weight:500;font-size:.78rem;color:var(--muted);padding-top:0}
.fc-item input[type=text]:focus{outline:2px solid var(--sky);border:0}
.fc-item input.warn{outline:2px dashed var(--gold)}
.fc-thumb{width:40px;height:40px;border-radius:8px;border:2px solid var(--hard);background:var(--panel2);cursor:pointer;padding:0;overflow:hidden;display:grid;place-items:center;font-size:1.2rem;color:var(--muted)}
.fc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fc-thumb:hover{filter:brightness(1.12)}
.fc-item .mini{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.8rem;width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center}
.fc-item .mini:hover:not(:disabled){background:var(--panel2);color:var(--text)}
.fc-item .mini:disabled{opacity:.25;cursor:default}
.fc-item .mini.del:hover{background:var(--rose);color:#fff}
.fc-none{text-align:center;color:var(--muted);padding:14px 6px;font-size:.9rem}

/* ---- the game board: everything inside is sized in cqw so it scales without distortion ---- */
.bh-stage{padding:16px}
.bh-board{position:relative;container-type:size;width:min(100%,calc(var(--gic-maxh) * 1.25),1100px);aspect-ratio:5/4;margin:4px auto 0;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:4px solid var(--hard);box-shadow:var(--shadow);background:#cfeeff;--kh:5cqw;--kw:5.8cqw;user-select:none;-webkit-user-select:none}
/* wide screens: always the wide (16:9) layout, like full screen */
@media (min-width:700px){.bh-board{aspect-ratio:16/9;width:min(100%,calc(var(--gic-maxh) * 1.78),1500px)}}
@media (max-width:699px) and (orientation:portrait){.bh-board{aspect-ratio:3/4;width:min(100%,calc(var(--gic-maxh) * .75),1100px)}}
@media (max-width:699px) and (orientation:landscape){.bh-board{aspect-ratio:16/9;width:min(100%,calc(var(--gic-maxh) * 1.78))}}

.bh-scene{position:relative;flex:1 1 0;min-height:0;overflow:hidden;background:linear-gradient(#52b8ff 0%,#9bdcff 62%,#d9f3ff 100%)}
.bh-sun{position:absolute;right:5%;top:8%;width:11cqw;height:11cqw;border-radius:50%;background:radial-gradient(circle,#fff7b0 0 45%,#ffe066 46% 100%);box-shadow:0 0 0 1.4cqw rgba(255,240,150,.35),0 0 0 3cqw rgba(255,240,150,.18)}
.bh-clouds i{position:absolute;display:block;height:4.6cqw;width:15cqw;background:#fff;border-radius:99px;opacity:.95;animation:bhdrift linear infinite}
.bh-clouds i::before,.bh-clouds i::after{content:'';position:absolute;background:#fff;border-radius:50%}
.bh-clouds i::before{width:6.6cqw;height:6.6cqw;left:2.2cqw;top:-3.2cqw}
.bh-clouds i::after{width:8.4cqw;height:8.4cqw;left:6.4cqw;top:-4.4cqw}
.bh-clouds .c1{top:14%;animation-duration:70s;animation-delay:-12s}
.bh-clouds .c2{top:34%;transform:scale(.7);animation-duration:95s;animation-delay:-60s;opacity:.8}
.bh-clouds .c3{top:6%;transform:scale(.55);animation-duration:120s;animation-delay:-30s;opacity:.7}
.bh-clouds .c4{top:48%;transform:scale(.9);animation-duration:80s;animation-delay:-45s}
.bh-clouds .c5{top:24%;transform:scale(1.2);animation-duration:110s;animation-delay:-85s;opacity:.85}
@keyframes bhdrift{from{left:-24cqw}to{left:106cqw}}
.bh-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* hero (character + balloons) */
.bh-eyes{transform-box:fill-box;transform-origin:center;animation:bhblink 5.2s infinite}
@keyframes bhblink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.bh-tail{transform-box:fill-box;transform-origin:0 100%;animation:bhtail 2.2s ease-in-out infinite}
@keyframes bhtail{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(7deg)}}
.bh-mill{transform-box:fill-box;transform-origin:center;animation:bhmill 14s linear infinite}
@keyframes bhmill{to{transform:rotate(360deg)}}
.bh-bird{animation:bhbird 34s linear infinite}
.bh-bird.b1{transform:translate(-80px,110px)}.bh-bird.b2{transform:translate(-80px,135px);animation-duration:46s;animation-delay:-20s}
@keyframes bhbird{0%{transform:translate(var(--b0,-120px),110px)}50%{transform:translate(var(--b1,300px),92px)}100%{transform:translate(var(--b2,760px),118px)}}
.bh-fall{transition:transform 1.15s cubic-bezier(.4,.1,.3,1)}
.bh-bob{animation:bhbob 3.4s ease-in-out infinite}
.bh-bob.fast{animation-duration:1.3s}
.bh-bob.landed{animation:none}
@keyframes bhbob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(6px)}}
.bh-sway{animation:bhsway 4.6s ease-in-out infinite;transform-origin:0 -26px}
@keyframes bhsway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.bh-legL{animation:bhleg 2.6s ease-in-out infinite;transform-origin:-8px 92px}
.bh-legR{animation:bhleg 2.6s ease-in-out infinite reverse;transform-origin:8px 92px}
@keyframes bhleg{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}}
.bh-b{transform-box:fill-box;transform-origin:50% 50%}
.bh-b.pop{animation:bhpop .22s ease-out forwards}
@keyframes bhpop{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1.5);opacity:0}}
.bh-burst{pointer-events:none}
.bh-burst circle{transform-box:fill-box;transform-origin:center;animation:bhspark .7s ease-out forwards}
@keyframes bhspark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.bh-burst .ring{fill:none;stroke-width:5;animation:bhring .45s ease-out forwards}
@keyframes bhring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.3);opacity:0}}
@keyframes bhsquash{0%{transform:scale(1,1)}35%{transform:scale(1.12,.86)}70%{transform:scale(.96,1.05)}100%{transform:scale(1,1)}}
.bh-cheer{animation:bhcheer .6s ease-in-out 2}
@keyframes bhcheer{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}
.bh-conf rect{transform-box:fill-box;transform-origin:center;animation:bhconf 1.6s ease-in forwards}
@keyframes bhconf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* sizes in this block are in cqw (a % of the board / panel width) times --m, which game.js sets from the real
   size on screen so text and buttons stay readable on narrow phones and roomy on big screens */
.bh-panel{position:relative;flex:none;display:flex;flex-direction:column;container-type:inline-size;min-width:0;--m:1;--mr:1;--ms:1}
.bh-board[data-k=l]{--kh:min(9.6cqw,64px);--kw:min(8.4cqw,58px)}
@media (pointer:coarse){.bh-board:not([data-lay=wide]){--kh:min(9.6cqw,64px);--kw:min(8.4cqw,58px)}}   /* 1.203.82: a touch screen (iPad held upright) gets the big keys too, not only narrow phones */
.bh-board[data-lay=wide]{--kh:10.2cqw;--kw:8.6cqw}

/* result card (covers the keyboard while the answer and the scene stay visible) */
.bh-result{position:absolute;left:2.4cqw;right:2.4cqw;bottom:2cqw;z-index:6;display:flex;align-items:center;justify-content:center;gap:calc(var(--mr) * 1.4cqw) calc(var(--mr) * 3cqw);flex-wrap:wrap;background:rgba(255,255,255,.97);color:#0f172a;border:.4cqw solid #0f172a;border-radius:2.2cqw;padding:calc(var(--mr) * 1.4cqw) calc(var(--mr) * 2.4cqw);text-align:center;box-shadow:0 .6cqw 0 rgba(15,23,42,.8),0 1.4cqw 3cqw rgba(0,0,0,.22);animation:bhpopin .35s cubic-bezier(.2,1.4,.4,1)}
.bh-result[hidden]{display:none}
.bh-res-t{flex:1 1 40cqw;min-width:0}
.bh-result h3{margin:0 0 .3cqw;font:800 max(var(--k-pop-title,26px),calc(var(--mr) * 3.2cqw))/1.15 'Baloo 2',sans-serif;color:#0f172a}
.bh-result.good h3{color:#15803d}.bh-result.bad h3{color:#be123c}
.bh-result p{margin:0;font:700 max(var(--k-pop-text,17px),calc(var(--mr) * 2cqw))/1.3 'Inter',sans-serif;color:#334155}
.bh-result p b{font:800 max(var(--k-pop-title,26px),calc(var(--mr) * 2.8cqw)) 'Baloo 2',sans-serif;color:#0f172a;word-break:break-word}
.bh-result .btn{font-size:max(var(--k-pop-text,17px),calc(var(--mr) * 2cqw));flex:none}
@keyframes bhpopin{from{transform:translateY(20%) scale(.92);opacity:0}to{transform:none;opacity:1}}

/* prompt: picture + clue + the hidden word */
.bh-prompt{flex:1 1 auto;min-height:0;background:#f8fbff;border-top:.4cqw solid #0f172a;padding:calc(var(--m) * 1.3cqw) calc(var(--m) * 2cqw) calc(var(--m) * 1.2cqw);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--m) * .8cqw);color:#0f172a}
.bh-hint{display:flex;align-items:center;justify-content:center;gap:calc(var(--m) * 1.6cqw);max-width:100%}
.bh-hint[hidden]{display:none}
.bh-hintpic{width:calc(var(--m) * 8cqw);height:calc(var(--m) * 8cqw);flex:none;border-radius:1.6cqw;background:#fffdf5;border:.35cqw solid #0f172a;display:grid;place-items:center;overflow:hidden;position:relative;container-type:size}
.bh-hintpic[hidden]{display:none}
.bh-hintpic img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.bh-hintpic .e{font-size:62cqh;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.bh-clue{font:700 calc(var(--m) * 2.3cqw)/1.25 'Inter',sans-serif;color:#334155;max-width:70cqw;text-align:center}
.bh-clue[hidden]{display:none}
.bh-clue::before{content:'Clue: ';color:#7c3aed;font-weight:800}
.bh-slots{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:calc(var(--m) * 1.1cqw) calc(var(--m) * 2.4cqw);--sl:5.6cqw}
.bh-word{display:inline-flex;gap:calc(var(--m) * .5cqw);flex-wrap:nowrap}
.bh-slot{--s:calc(var(--sl) * var(--ms));width:var(--s);height:calc(var(--s) * 1.25);display:grid;place-items:center;background:#fff;border:.3cqw solid #0f172a;border-radius:calc(var(--s) * .2);font:800 calc(var(--s) * .74)/1 'Baloo 2',sans-serif;color:#0f172a;box-shadow:0 .3cqw 0 rgba(15,23,42,.85)}
.bh-slot.got{background:#dcfce7;color:#14532d;animation:bhgot .35s cubic-bezier(.2,1.5,.4,1)}
.bh-slot.rev{background:#fef9c3;color:#92400e}
.bh-slot.miss{background:#fee2e2;color:#9f1239}
@keyframes bhgot{from{transform:scale(.5) translateY(-30%)}to{transform:none}}
.bh-punct{--s:calc(var(--sl) * var(--ms));display:grid;place-items:end center;width:calc(var(--s) * .5);height:calc(var(--s) * 1.25);font:800 calc(var(--s) * .74)/1 'Baloo 2',sans-serif;color:#0f172a;padding-bottom:calc(var(--s) * .08)}
.bh-missed{min-height:calc(var(--m) * 2.6cqw);font:700 calc(var(--m) * 1.9cqw)/1.2 'Inter',sans-serif;color:#be123c;letter-spacing:.12em}
.bh-missed span{color:#64748b;letter-spacing:0;margin-right:.8cqw;font-weight:600}

/* on-screen keyboard */
.bh-keys{flex:none;background:#e0efff;border-top:.4cqw solid #0f172a;padding:1.1cqw 1.4cqw 1.3cqw;display:flex;flex-direction:column;gap:.7cqw}
.bh-krow{display:flex;justify-content:center;gap:.7cqw;flex-wrap:wrap}
.bh-key{width:var(--kw);height:var(--kh);display:grid;place-items:center;border-radius:1.2cqw;border:.3cqw solid #0f172a;background:#fff;color:#0f172a;font:800 calc(var(--kh) * .5)/1 'Baloo 2',sans-serif;cursor:pointer;box-shadow:0 .35cqw 0 rgba(15,23,42,.85);padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .08s,box-shadow .08s}
.bh-key:hover:not(:disabled){background:#fef3c7}
.bh-key:active:not(:disabled){transform:translateY(.3cqw);box-shadow:0 .05cqw 0 rgba(15,23,42,.85)}
.bh-key.hit{background:#86efac;color:#14532d}
.bh-key.bad{background:#fda4af;color:#881337}
.bh-key:disabled{cursor:default;opacity:.85}
.bh-key:disabled:not(.hit):not(.bad){opacity:.45}
.bh-board.res .bh-keys{visibility:hidden}

/* wide boards (widescreen / classroom boards): a wide sky with the character in the middle on top,
   and along the bottom the clue + word on the left with the keyboard on the right */
.bh-board[data-lay=wide]{--kh:max(34px,3.1cqw);--kw:max(32px,3cqw)}
@media (pointer:coarse){.bh-board[data-lay=wide]{--kh:6cqw;--kw:4.4cqw}.bh-board[data-lay=wide] .bh-keys{flex-basis:50%}.bh-board[data-lay=wide] .bh-result{width:calc(50% - 3cqw)}}   /* 1.203.82: bigger keys on a touch board / iPad held sideways */
.bh-board[data-lay=wide] .bh-slots{--sl:max(30px,3.4cqw)}
.bh-board[data-lay=wide] .bh-hintpic{width:calc(var(--m) * 5.6cqw);height:calc(var(--m) * 5.6cqw)}
.bh-board[data-lay=wide] .bh-prompt{padding:.8cqw 1.6cqw;gap:.5cqw}
.bh-board[data-lay=wide] .bh-missed{min-height:0}
.bh-board[data-lay=wide] .bh-panel{flex-direction:row;align-items:stretch;border-top:.4cqw solid #0f172a}
.bh-board[data-lay=wide] .bh-prompt{flex:1 1 0;min-width:0;border-top:0;border-right:.4cqw solid #0f172a}
.bh-board[data-lay=wide] .bh-keys{flex:0 0 44%;justify-content:center;border-top:0;padding:.8cqw 1cqw;gap:.45cqw}
.bh-board[data-lay=wide] .bh-krow{gap:.4cqw;flex-wrap:nowrap}
.bh-board[data-lay=wide] .bh-result{left:auto;width:calc(44% - 3cqw);bottom:50%;transform:translateY(50%);animation:none}
.bh-board[data-lay=wide] .bh-hint{max-width:100%}
.bh-board[data-lay=wide] .bh-clue{max-width:26cqw}

/* start overlay */
.lg{display:inline-grid;place-items:center;width:calc(var(--mb) * 3.2cqw);height:calc(var(--mb) * 3.2cqw);flex:none;border-radius:50%;font:800 calc(var(--mb) * 1.9cqw) 'Baloo 2',sans-serif}

/* full screen: GIC.fit (bridge.js, "fill" mode) sizes the board to the whole free area, any shape of screen */
html.gic-fs .layout{grid-template-columns:minmax(0,1fr)}
html.gic-fs .bh-stage{border-radius:0;border:0;box-shadow:none;background:transparent;padding:4px 6px}
html.gic-fs .bh-stage .stage-head{padding-right:56px;gap:6px;margin-bottom:6px}
html.gic-fs .bh-stage .stage-head .row{gap:6px;flex-wrap:nowrap}
html.gic-fs .bh-board{margin:0 auto;border-width:3px;border-radius:14px}
html.gic-fs .bh-stage .msg{min-height:0;margin:2px 0 0}
@media(max-width:520px){.hide-xs{display:none}}
@media(prefers-reduced-motion:reduce){.bh-thud,.bh-hop,.bh-shake,.bh-dust circle,.bh-dizzy .spin,.bh-okay,.bh-bob,.bh-sway,.bh-legL,.bh-legR,.bh-eyes,.bh-tail,.bh-mill,.bh-bird,.bh-clouds i,.bh-slot.got,.bh-result{animation:none}.bh-fall{transition:none}}

/* ---- scenes ---- */
.bh-board[data-scene=beach] .bh-scene{background:linear-gradient(#38bdf8 0%,#7dd3fc 55%,#e0f2fe 100%)}
.bh-board[data-scene=snow] .bh-scene{background:linear-gradient(#94a3b8 0%,#cbd5e1 55%,#f1f5f9 100%)}
.bh-board[data-scene=snow] .bh-sun{background:radial-gradient(circle,#fff 0 45%,#e2e8f0 46% 100%);box-shadow:0 0 0 1.4cqw rgba(255,255,255,.35),0 0 0 3cqw rgba(255,255,255,.18)}
.bh-board[data-scene=night] .bh-scene{background:linear-gradient(#050816 0%,#1e1b4b 55%,#4338ca 100%)}
.bh-board[data-scene=night] .bh-sun{background:radial-gradient(circle at 36% 40%,#fff 0 55%,#e2e8f0 56% 100%);box-shadow:0 0 0 1.2cqw rgba(255,255,255,.14),0 0 4cqw 2cqw rgba(199,210,254,.45);width:8cqw;height:8cqw}
.bh-board[data-scene=night] .bh-clouds i,.bh-board[data-scene=night] .bh-clouds i::before,.bh-board[data-scene=night] .bh-clouds i::after{background:#4c4f8a;opacity:.55}
.bh-board[data-scene=desert] .bh-scene{background:linear-gradient(#7c3aed 0%,#fb7185 38%,#fb923c 68%,#fde68a 100%)}
.bh-board[data-scene=desert] .bh-sun{background:radial-gradient(circle,#fff1c1 0 40%,#fb923c 41% 100%);width:14cqw;height:14cqw;top:36%;right:12%;box-shadow:0 0 0 2cqw rgba(253,186,116,.35)}
.bh-board[data-scene=desert] .bh-clouds .c2,.bh-board[data-scene=desert] .bh-clouds .c4,.bh-board[data-scene=desert] .bh-clouds .c5{display:none}
.bh-board[data-scene=beach] .bh-clouds .c3{display:none}

/* ---- the hard (but harmless) landing ---- */
.bh-fall.hard{transition:transform .62s cubic-bezier(.55,0,.95,.72)}
.bh-thud{transform-box:fill-box;transform-origin:50% 100%;animation:bhthud 1.15s ease-out forwards}
@keyframes bhthud{0%{transform:scale(1,1)}12%{transform:scale(1.4,.58)}28%{transform:scale(.88,1.1) translateY(-26px)}44%{transform:scale(1.22,.76)}58%{transform:scale(.96,1.04) translateY(-10px)}74%{transform:scale(1.1,.88)}100%{transform:scale(1.06,.9)}}
.bh-hop{transform-box:fill-box;transform-origin:50% 100%;animation:bhhop .7s ease-out forwards}
@keyframes bhhop{0%{transform:scale(1.06,.9)}35%{transform:scale(.94,1.1) translateY(-14px)}65%{transform:scale(1.05,.95)}100%{transform:scale(1,1)}}
.bh-shake{animation:bhshake .45s linear}
@keyframes bhshake{0%,100%{transform:translate(0,0)}15%{transform:translate(-1.1cqw,.6cqw)}35%{transform:translate(1cqw,-.5cqw)}55%{transform:translate(-.6cqw,.4cqw)}75%{transform:translate(.4cqw,-.2cqw)}}
.bh-dust circle{transform-box:fill-box;transform-origin:center;animation:bhdust 1s ease-out forwards}
@keyframes bhdust{0%{transform:translate(0,0) scale(.4);opacity:.95}100%{transform:translate(var(--dx),var(--dy)) scale(2);opacity:0}}
.bh-dizzy .spin{animation:bhspin 1s linear infinite}
@keyframes bhspin{to{transform:rotate(360deg)}}
.bh-okay{animation:bhpopin2 .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes bhpopin2{from{opacity:0}}
.bh-dizzy .spin{transform-box:fill-box;transform-origin:center}

/* Present mode: the teacher's phone does the clicking, so the screen only shows the game (the keyboard stays as a scoreboard of used letters) */
html.gic-present .bh-key{pointer-events:none}
html.gic-present #hintBtn,html.gic-present #nextBtn,html.gic-present #startBtn,html.gic-present #restartBtn,html.gic-present #muteBtn{display:none!important}
/* ---- PLAY-FIRST (1.43.0): PHONE = FULL SCREEN. A phone, a small window or a touch tablet gets the same play-first rules as real full screen
        (these are copies of the html.gic-fs rules above, scoped to html.gic-phone; to change the look, change both). ---- */
html.gic-phone body .layout{grid-template-columns:minmax(0,1fr)}
html.gic-phone body .bh-stage{border-radius:0;border:0;box-shadow:none;background:transparent;padding:4px 6px}
html.gic-phone body .bh-stage .stage-head{padding-right:56px;gap:6px;margin-bottom:6px}
html.gic-phone body .bh-stage .stage-head .row{gap:6px;flex-wrap:nowrap}
html.gic-phone body .bh-board{margin:0 auto;border-width:3px;border-radius:14px}
html.gic-phone body .bh-stage .msg{min-height:0;margin:2px 0 0}


/* ---- 1.43.11: Balloon Hangman on a phone. Chips and buttons are one family (same height, rounded-rectangle shape, dark look, thin outline, like Flashcards and
        Letter Bubbles). Held sideways the two chips stand in a column on the left and Hint / Sound / Restart in a column on the right (under the "..." button), so
        the game gets the whole height and GIC.fit gives the board all the room (the layout inside it re-picks itself from the board's shape). ---- */

html.gic-phone body .bh-board{border-width:2px;border-radius:14px;box-shadow:2px 2px 0 var(--hard)}
/* 1.203.73: the phone layout never scrolls the page. The board is exactly the screen high, but the page's bottom padding and a small gap pushed it 10-25px past the screen, so in the
   home-screen app the page scrolled and the score chips at the top slid half out of sight. Nothing is lost: the extra is empty space under the board. */
html.gic-phone:has(#stage.bh-stage),html.gic-phone body:has(#stage.bh-stage){overflow:hidden}
html.gic-phone body:has(#stage.bh-stage) .app{padding-bottom:0}
html.gic-phone body .bh-stage .stage-head .status,html.gic-phone body .bh-stage .stage-head .btn{box-sizing:border-box;height:var(--ph-btn);min-height:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;font:800 .9rem 'Inter',sans-serif;color:var(--text);background:var(--panel2);border:2px solid var(--hard);border-radius:10px;box-shadow:1px 2px 0 var(--hard)}
html.gic-phone body .bh-stage .stage-head .status.ok{background:#0f5132;color:#d1fae5}
html.gic-phone body .bh-stage .stage-head .status.warn{background:#5a3a0c;color:#fde68a}
html.gic-phone body .bh-stage .stage-head .btn{width:var(--ph-btn);padding:0}
html.gic-phone body .bh-stage .stage-head .btn .hide-xs{display:none}
html.gic-phone body .bh-stage .stage-head .btn i{color:var(--sky);font-size:1rem}
html.gic-phone body .bh-stage .stage-head .btn.gold{background:var(--gold);color:var(--hard)}
html.gic-phone body .bh-stage .stage-head .btn.gold i{color:var(--hard)}
html.gic-phone body .gic-head-right{top:8px;right:12px}
@media (orientation:landscape) and (max-height:560px){
  html.gic-phone body .app{padding:0 4px}
  html.gic-phone body #stage.bh-stage{padding:4px 54px 4px 4px}
  html.gic-phone body .bh-stage .stage-head{display:contents}
  /* 1.43.19: round and points are small text inside the answer panel, above the clue (no side column), so the board gets the width */
  html.gic-phone body .bh-stage .stage-head>.row:first-child{position:fixed;left:14px;top:9px;display:flex;flex-direction:row;align-items:center;gap:12px;margin:0;padding:0;z-index:5}
  html.gic-phone body .bh-stage .stage-head>.row:first-child .status{height:auto!important;min-height:0!important;flex-direction:row;gap:4px;padding:0!important;font-size:.78rem;line-height:1;text-align:left;white-space:nowrap;background:none!important;border:0!important;box-shadow:none!important;color:#475569!important}
  html.gic-phone body .bh-stage .stage-head>.row:first-child .status i{font-size:.78rem}
  html.gic-phone body .bh-stage .stage-head>.row:last-child{position:fixed;right:6px;top:calc(var(--ph-btn) + 12px);display:flex;flex-direction:column;gap:6px;margin:0;padding:0;z-index:5}
  html.gic-phone body .gic-head-right{top:6px;right:6px}
  html.gic-phone body .bh-stage .msg{display:none}
  html.gic-phone body .bh-stage .stage-head .status .hide-xs{display:none}
  html.gic-phone body #stage .bh-board{width:100%!important;max-width:none!important;aspect-ratio:auto!important;height:calc(100dvh - 12px)!important;margin:0}
}
@media (orientation:portrait){
  html.gic-phone body .bh-stage .stage-head{flex-wrap:nowrap}
  html.gic-phone body #stage.bh-stage .stage-head>.row:first-child{flex-wrap:nowrap;min-width:0}
  html.gic-phone body .bh-stage #hintBtn{display:none}   /* upright there is no room for it beside the chips and the "..." */
  html.gic-phone body .bh-stage .stage-head .status .hide-xs{display:none}
}

/* 1.43.18: phone held sideways: balloon scene on the right; clue (picture beside the text), the word and a smaller keyboard in the left column.
   Long clues wrap, long words wrap onto a second line of boxes. Sizes are px here (the board's container units are too coarse for this). */
html.gic-phone body .bh-board[data-side]{flex-direction:row}
html.gic-phone body .bh-board[data-side] .bh-panel{order:1;flex:0 0 56%;min-width:0;flex-direction:column;border-top:0;border-right:1.5px solid rgba(15,23,42,.45)}
html.gic-phone body .bh-board[data-side] .bh-scene{order:2;flex:1 1 0;min-width:0}
html.gic-phone body .bh-board[data-side] .bh-prompt{flex:1 1 0;min-height:0;border:0;padding:26px 10px 8px;gap:8px;justify-content:center;overflow:hidden}
html.gic-phone body .bh-board[data-side] .bh-hint{flex-direction:row;align-items:center;justify-content:center;gap:10px;max-width:100%}
html.gic-phone body .bh-board[data-side] .bh-hintpic{width:68px;height:68px;border-width:1.5px;border-radius:8px}
html.gic-phone body .bh-board[data-side] .bh-clue{font:700 17px/1.25 'Inter',sans-serif;max-width:none;min-width:0;text-align:left;overflow-wrap:anywhere}
html.gic-phone body .bh-board[data-side] .bh-slots{--sl:40px;gap:6px 14px}
html.gic-phone body .bh-board[data-side] .bh-missed{font-size:12px;min-height:0}
html.gic-phone body .bh-board[data-side] .bh-keys{flex:none;border-top:1.5px solid rgba(15,23,42,.45);padding:6px 8px;gap:4px;--kh:clamp(36px,10.5cqw,72px);--kw:min(clamp(34px,8cqw,70px),calc((100cqw - 16px - 36px) / 10))}   /* 1.203.82: grows with the panel (an iPad held sideways), same as before on a phone */
html.gic-phone body .bh-board[data-side] .bh-krow{gap:4px;flex-wrap:nowrap}
html.gic-phone body .bh-board[data-side] .bh-key{border-width:1.5px;border-radius:6px;box-shadow:0 1px 0 rgba(15,23,42,.7)}
html.gic-phone body .bh-board[data-side] .bh-result{left:6px;right:6px;width:auto;bottom:6px;transform:none;animation:none}
html.gic-phone body .bh-board[data-side] :is(.bh-slot,.bh-punct){--s:calc(48px * var(--ms))}

/* 1.203.85: the result pop-up is centred on the board in every layout (it used to sit on the keyboard / left side / bottom). It names the answer itself, so covering the empty word boxes is fine. */
.bh-board .bh-result,.bh-board[data-lay=wide] .bh-result{left:50%;top:50%;right:auto;bottom:auto;translate:-50% -50%;transform:none;width:min(92cqw,clamp(300px,58cqw,900px));flex-direction:column;flex-wrap:nowrap;animation:bhpopc .35s cubic-bezier(.2,1.4,.4,1)}
html.gic-phone body .bh-board[data-side] .bh-result{left:50%;top:50%;right:auto;bottom:auto;translate:-50% -50%;transform:none;width:min(92cqw,clamp(300px,58cqw,900px));animation:bhpopc .35s cubic-bezier(.2,1.4,.4,1)}
.bh-result .bh-res-t{text-align:center;flex:0 0 auto;max-width:100%}
@keyframes bhpopc{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.bh-board .bh-result,html.gic-phone body .bh-board[data-side] .bh-result{animation:none}}

/* ===== 1.203.88  LANDSCAPE LAYOUT for iPad / 4:3 windows / full screen (data-lay=box): ONE block, nothing else touches this case =====
   Short clue bar under the picture: the clue picture on the left, the clue text above the word boxes on the right, then a fixed-size keyboard.
   The picture gets all the rest. (Before: the clue bar and the picture shared the leftover space equally, so the bar was huge.)
   To go back to the old look, delete this whole block. Portrait, phone and wide (16:9 board / TV) layouts are not changed by it. */
.bh-board[data-lay=box] .bh-prompt{flex:0 0 auto;display:grid;grid-template-columns:auto minmax(0,auto);justify-content:center;align-items:center;column-gap:calc(var(--m) * 2.4cqw);row-gap:.6cqw;padding:1.2cqw 2cqw}
.bh-board[data-lay=box] .bh-hint{display:contents}
.bh-board[data-lay=box] .bh-hint[hidden]{display:none}
.bh-board[data-lay=box] .bh-hintpic{grid-column:1;grid-row:1 / span 3;width:min(9cqw,92px);height:min(9cqw,92px)}
.bh-board[data-lay=box] .bh-clue{grid-column:2;grid-row:1;font-size:clamp(16px,2.1cqw,26px);max-width:60cqw;text-align:left}
.bh-board[data-lay=box] .bh-slots{grid-column:2;grid-row:2;justify-content:flex-start;--sl:clamp(32px,4.6cqw,54px)}
.bh-board[data-lay=box] .bh-missed{grid-column:2;grid-row:3;min-height:0;font-size:clamp(12px,1.6cqw,18px)}
.bh-board[data-lay=box]{--kh:min(7cqw,60px);--kw:min(6.4cqw,56px)}
.bh-board[data-lay=box] .bh-keys{padding:.9cqw 1.4cqw 1cqw;gap:.6cqw}