.ws-play{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.ws-bank{flex:0 0 auto;max-width:none;justify-content:center;margin:0 auto;width:min(100%,1000px)}
.ws-board{background:var(--ws-gap,transparent);box-shadow:0 0 0 3px var(--ws-gap,transparent);border-radius:3px;--n:12;container-type:inline-size;flex:0 0 auto;width:min(100%,calc(var(--gic-maxh) - 130px),860px);aspect-ratio:1;margin:0 auto;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;touch-action:none;user-select:none;-webkit-user-select:none}
.ws-cell{display:grid;place-items:center;background:var(--ws-cell,#334155);color:var(--ws-text,var(--text));border-radius:6px;font:700 calc(100cqw / var(--n) * .5) 'Baloo 2',sans-serif;line-height:1;cursor:pointer;transition:background .12s}
.ws-cell:hover{filter:brightness(1.18)}
.ws-cell.sel{background:var(--ws-cur,var(--gold))!important;color:var(--ws-on,var(--hard))}
.ws-cell.found{color:var(--ws-on,var(--hard))}
.ws-cell.ans{outline:3px solid var(--ws-cur,var(--gold));outline-offset:-3px;background:var(--ws-ans,#713f12)}
/* a found word: its letters pop in one after the other (--d is set per letter by game.js); Motion "Reduced" finishes this at once */
.ws-cell.pop{animation:wspop .55s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d,0ms);border-radius:50%;z-index:1}
@keyframes wspop{0%{transform:scale(.55);filter:brightness(1.7)}60%{transform:scale(1.2)}100%{transform:scale(1);filter:none}}
.chip.found{transition:background .3s}
html.gic-fs .layout{grid-template-columns:minmax(0,1fr)}
html.gic-fs #stage{border-radius:0;border:0;box-shadow:none;background:transparent;padding:6px 52px 6px 6px}
html.gic-fs .ws-play{display:block}
html.gic-fs .ws-bank{max-width:none;margin-top:14px}
html.gic-fs .ws-board{margin:0 auto;width:min(96vw,calc(100vh - 170px))}
/* a wide screen (phone sideways, tablet, monitor): the word list stands beside the grid, so the grid can be as tall as the screen */
@media (min-aspect-ratio:3/2){
  html.gic-fs .ws-play{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:14px}
  html.gic-fs .ws-board{margin:0;flex:0 0 auto}
  html.gic-fs .ws-bank{margin:0;flex:0 1 190px;min-width:110px;max-width:220px;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:stretch;max-height:calc(100vh - 16px);overflow:auto;width:auto}
  html.gic-fs .ws-bank .chip{white-space:nowrap}
}

@page{size:A4 portrait;margin:12mm}

/* ---- PLAY-FIRST (1.43.0), Word Search (1.83.0): PHONE = FULL SCREEN. The grid takes the screen: upright it fills the width with the word list under it; sideways the slim column
        on the left holds the timer, count and buttons, the grid fills the height and the word list stands on the right. The editing box (.no-fs) steps aside. ---- */
html.gic-phone body .layout{grid-template-columns:minmax(0,1fr)}
html.gic-phone body .app{padding-bottom:4px}
html.gic-phone body #stage{border-radius:0;border:0;box-shadow:none;background:transparent;padding:4px;display:flex;flex-direction:column;height:calc(100vh - 8px);height:calc(100dvh - 8px);box-sizing:border-box}
html.gic-phone body .stage-foot{display:none}
html.gic-phone body .stage-head{flex:none;margin-bottom:6px;padding-right:50px}
html.gic-phone body .ws-play{flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px}
html.gic-phone body .ws-board{width:min(100%,calc(100dvh - 200px));margin:0}
html.gic-phone body .ws-bank{width:100%;gap:6px}
html.gic-phone body .ws-bank .chip{font-size:clamp(.82rem,3.3vw,1rem);padding:5px 12px}
@media (orientation:landscape) and (max-height:560px){
  html.gic-phone:not(.gic-stage) body #stage{padding:4px 54px 4px 76px}
  html.gic-phone:not(.gic-stage) body #stage>.stage-head{position:fixed;left:4px;top:4px;bottom:4px;width:62px;margin:0;padding:0;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:8px;z-index:30}
  html.gic-phone:not(.gic-stage) body #stage>.stage-head>.row{flex:none;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:5px}
  html.gic-phone:not(.gic-stage) body .stage-head .status{white-space:normal;text-align:center;padding:4px 2px;font-size:.72rem;line-height:1.15;border-radius:10px}
  html.gic-phone:not(.gic-stage) body .stage-head .btn{width:100%;min-height:36px;padding:0;justify-content:center}
  html.gic-phone:not(.gic-stage) body .stage-head .btn span{display:none}
  html.gic-phone:not(.gic-stage) body .ws-play{flex-direction:row;justify-content:center;gap:14px}
  html.gic-phone:not(.gic-stage) body .ws-board{width:calc(100dvh - 12px) !important;max-width:none;flex:none}
  html.gic-phone:not(.gic-stage) body .ws-bank{flex:0 1 190px;min-width:100px;max-width:220px;width:auto;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:stretch;max-height:calc(100dvh - 12px);overflow:auto}
  html.gic-phone:not(.gic-stage) body .ws-bank .chip{white-space:nowrap;text-align:center}
}