/* Letter Hive only. Everything else comes from ../shared/game.css. */
canvas#world{touch-action:none;cursor:pointer}
canvas#world:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#distanceLine{white-space:pre-line;line-height:1.7}
/* board = the canvas plus the found-words list: side by side on a computer, list under the canvas on a phone */
.board{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.board .screen{flex:1;min-width:0}
.side{display:flex;flex-direction:column;gap:5px;flex:none;height:76px}
.found-head{font-size:8px;color:var(--muted);letter-spacing:1px}
.found{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-wrap:wrap;
  align-content:flex-start;gap:5px;padding:1px 2px 2px 0;-webkit-user-select:text;user-select:text}
.found .chip{font:700 13px/1 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.5px;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:5px 9px}
.found .chip.full{background:var(--mogi);border-color:var(--mogi);color:var(--night)}
.found .chip:first-child{border-color:var(--jax)}
.found .chip.full:first-child{border-color:#fff}
.found .none{font:600 12px "Plus Jakarta Sans",system-ui,sans-serif;color:var(--muted)}
.hive-tools{display:grid;grid-template-columns:1fr .8fr 1fr;gap:8px}
.ht{font:12px "Press Start 2P",ui-monospace,monospace;color:var(--ink);background:linear-gradient(#1d1830,#15121f);
  border:2px solid var(--line);border-radius:12px;height:52px;cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 #0b0a10;
  transition:transform .06s ease,border-color .06s ease}
.ht.shuffle{font:26px/1 system-ui,sans-serif}
.ht.enter{background:linear-gradient(#ffe45c,#f2b705);color:var(--night);border-color:#ffe45c}
.ht:active{transform:translateY(2px);box-shadow:0 1px 0 #0b0a10;border-color:var(--cyan)}
.ht:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
/* start and end cards get the whole screen: no list, no buttons */
.game.carding .side,.game.carding .hive-tools{display:none}
@media (min-width:560px) and (min-aspect-ratio:1/1){
  .board{flex-direction:row}
  .side{flex:none;width:230px;height:auto;background:#100d19;border:1px solid var(--line);border-radius:14px;padding:12px}
  .found{flex-direction:column;flex-wrap:nowrap;gap:6px}
  .found .chip{align-self:flex-start}
  .hive-tools{max-width:560px;width:100%;margin:0 auto}
}
@media (max-height:700px) and (orientation:portrait){.ht{height:44px}.side{height:62px}}
@media (orientation:landscape) and (max-height:520px){.ht{height:38px}.side{width:180px;padding:8px}.found .chip{font-size:12px;padding:4px 8px}}