/* game-word.css — Five letters / Vijf letters (prefix gw-). SPEC §18d.
   Shared classes (.panel .btn .seg .num .pf .sub .pill) come from app.css; everything here is gw-.
   Colours: correct --green, present --gold, absent --pale2. Tiles 56 px desktop / 52 px phone, Silkscreen letters.
   Keys ≥ 44 px tall at 375 px (10 keys × 30 px + 9 gaps × 4 px = 336 px). */

.gw-root{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;min-width:0}
.gw-loading{padding:18px 4px;text-align:center}

/* ---------- board ---------- */
.gw-board{display:flex;flex-direction:column;gap:6px;perspective:600px}
.gw-row{display:flex;gap:6px}
.gw-tile{
  width:56px;height:56px;display:grid;place-items:center;
  font-family:Silkscreen,monospace;font-size:26px;line-height:1;text-transform:uppercase;color:var(--ink);
  background:var(--panel);border:3px solid var(--line);box-shadow:inset 0 -4px 0 var(--panel2);
  transform-style:preserve-3d;backface-visibility:hidden;user-select:none
}
.gw-tile.gw-filled{border-color:var(--edge);background:#fff8e6}
.gw-tile.gw-correct{background:var(--green);border-color:var(--green-dk);box-shadow:inset 0 -4px 0 var(--green-dk);color:#fff6e8;text-shadow:1px 1px 0 var(--green-dk)}
.gw-tile.gw-present{background:var(--gold);border-color:#8a5a14;box-shadow:inset 0 -4px 0 #8a5a14;color:#fff6e8;text-shadow:1px 1px 0 #8a5a14}
.gw-tile.gw-absent{background:var(--pale2);border-color:#a89a86;box-shadow:inset 0 -4px 0 #a89a86;color:var(--ink)}
.gw-tile.gw-pop{animation:gw-pop .1s ease-out}
.gw-tile.gw-flip{animation:gw-flip .3s ease-in-out both}
.gw-row.gw-shake{animation:gw-shake .42s ease-in-out}

@keyframes gw-pop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes gw-flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes gw-shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-6px)}30%{transform:translateX(6px)}
  45%{transform:translateX(-5px)}60%{transform:translateX(5px)}
  75%{transform:translateX(-3px)}90%{transform:translateX(3px)}
}

/* ---------- message, answer ---------- */
.gw-msg{min-height:22px;font-size:15px;font-weight:700;color:var(--star);text-align:center}
.gw-msg:empty{min-height:22px}
.gw-answer-host:empty{display:none}
.gw-answer{font-family:"Pixelify Sans",monospace;font-size:18px;color:var(--ink);background:var(--panel2);border:2px solid var(--edge);box-shadow:2px 2px 0 var(--shadow);padding:5px 14px 7px}
.gw-answer-host{display:flex;justify-content:center}

/* ---------- keyboard ---------- */
.gw-kb{display:flex;flex-direction:column;gap:4px;width:100%;max-width:500px;align-items:stretch}
.gw-krow{display:flex;gap:4px;justify-content:center;width:100%}
.gw-key{
  flex:1 1 0;max-width:46px;min-height:48px;padding:0;cursor:pointer;
  font-family:"Pixelify Sans",monospace;font-size:19px;line-height:1;text-transform:uppercase;color:var(--ink);
  background:var(--panel);border:3px solid var(--edge);box-shadow:inset 0 -4px 0 var(--panel2),3px 3px 0 var(--shadow);
  display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;user-select:none
}
.gw-key.gw-wide{flex:1.5 1 0;max-width:70px;font-size:15px}
.gw-key:hover:not(:disabled){filter:brightness(1.05)}
.gw-key:active:not(:disabled){transform:translate(2px,2px);box-shadow:inset 0 -4px 0 var(--panel2),1px 1px 0 var(--shadow)}
.gw-key:disabled{cursor:default;opacity:.7}
.gw-key.gw-correct{background:var(--green);border-color:var(--green-dk);box-shadow:inset 0 -4px 0 var(--green-dk),3px 3px 0 var(--shadow);color:#fff6e8;text-shadow:1px 1px 0 var(--green-dk)}
.gw-key.gw-present{background:var(--gold);border-color:#8a5a14;box-shadow:inset 0 -4px 0 #8a5a14,3px 3px 0 var(--shadow);color:#fff6e8;text-shadow:1px 1px 0 #8a5a14}
.gw-key.gw-absent{background:var(--pale2);border-color:#a89a86;box-shadow:inset 0 -4px 0 #a89a86,3px 3px 0 var(--shadow);color:var(--muted)}
.gw-key.gw-correct,.gw-key.gw-present,.gw-key.gw-absent{transition:background .2s,border-color .2s,color .2s}
.gw-bsp{width:22px;height:14px;display:block;pointer-events:none}

/* ---------- tools, footer ---------- */
.gw-tools:empty{display:none}
.gw-tools{display:flex;justify-content:center}
.gw-tools .btn{min-height:40px}
.gw-foot{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.gw-ij{font-size:13px}
.gw-credit{font-size:12px;opacity:.85}
.gw-done .gw-kb{opacity:.9}

/* ---------- phones ---------- */
@media (max-width:860px){
  .gw-tile{width:52px;height:52px;font-size:24px}
  .gw-key{min-height:46px;font-size:18px}
}
@media (max-width:420px){
  .gw-root{gap:6px}
  .gw-board{gap:4px}
  .gw-row{gap:4px}
  .gw-tile{width:46px;height:46px;font-size:22px}
  .gw-kb{max-width:none}
  .gw-key{min-height:44px;max-width:none;font-size:17px}
  .gw-key.gw-wide{max-width:none;font-size:13px}
}

/* short phones: keep the whole keyboard on screen */
@media (max-width:420px) and (max-height:740px){
  .gw-tile{width:40px;height:40px;font-size:20px}
  .gw-key{min-height:42px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .gw-tile,.gw-row,.gw-key{animation:none !important;transition:none !important}
  .gw-tile.gw-flip,.gw-tile.gw-pop,.gw-row.gw-shake{animation:none !important;transform:none !important}
}