/* Secret Message. Layout only; the letters, boxes and cipher table are HTML, and the tap and drag logic is in kids-secretmessage.js. */
.gm-stage{display:grid;gap:14px}
.kg-levels.gm-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:4px}
.gm-level-name{display:block;font-size:.8em;opacity:.8}

.gm-key{margin:0;font-weight:800;font-size:1.05em}
.gm-status{margin:0}

.gm-ladder-wrap{display:grid;gap:8px;width:100%;max-width:640px;margin:0 auto;box-sizing:border-box}
.gm-ladder-wrap h3,.gm-ladder-hint{margin:0}
.gm-ladder{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:10px;border-radius:16px;background:rgba(0,0,0,.14);box-sizing:border-box}
.gm-step{display:flex;flex-direction:column;align-items:center;min-width:26px;padding:4px 3px;border-radius:8px;background:rgba(255,255,255,.06);font-size:14px;line-height:1.25}
.gm-step b{font-weight:800}
.gm-step span{color:#ffd54f;font-weight:800}

.gm-scene{display:grid;gap:12px;width:100%;max-width:640px;margin:0 auto;padding:12px;border-radius:20px;background:rgba(255,255,255,.06);box-sizing:border-box}
.gm-words{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px}
.gm-word{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.gm-pair{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:38px}
.gm-no{font-size:12px;font-weight:800;opacity:.6}
.gm-coded{font-size:18px;font-weight:800;color:#ffd54f}

.gm-box{display:flex;align-items:center;justify-content:center;min-width:38px;min-height:44px;box-sizing:border-box;border-radius:10px;border:2px dashed rgba(255,255,255,.4);background:rgba(255,255,255,.04);font-size:20px;font-weight:800;cursor:pointer;touch-action:manipulation}
.gm-box:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.gm-box.gm-filled{border-style:solid;border-color:#fff;background:#fff;color:#1d2246}
.gm-box.gm-wrong{border-style:solid;border-color:#ffab91;background:#ffab91;color:#1d2246}

.gm-tray{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;min-height:64px;padding:8px;border-radius:16px;background:rgba(0,0,0,.14);box-sizing:border-box}
.gm-tile{min-width:44px;min-height:44px;padding:6px;border-radius:12px;border:2px solid #fff;background:#fff;color:#1d2246;font:inherit;font-size:18px;font-weight:800;cursor:grab;touch-action:none;user-select:none}
.gm-tile:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.gm-tile.gm-selected{background:#ffd54f;border-color:#ffd54f;box-shadow:0 0 0 4px rgba(255,213,79,.35)}

.gm-ghost{position:fixed;z-index:50;transform:translate(-50%,-50%);pointer-events:none;padding:8px 14px;border-radius:12px;background:#ffd54f;color:#1d2246;font-weight:800;font-size:18px;box-shadow:0 8px 20px rgba(0,0,0,.3)}

.gm-actions{justify-content:center}
.gm-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.gm-win[hidden]{display:none}
.gm-win:focus-visible{outline:4px solid #ffd54f;outline-offset:4px}

.gm-howto ol{padding-left:1.2em}
.gm-howto li+li{margin-top:6px}

@media (max-width:519px){
 .kg-levels.gm-levels{gap:4px}
 .gm-level-name{font-size:.7em}
 .gm-words{gap:10px 14px}
 .gm-pair{min-width:34px}
 .gm-box{min-width:34px}
 .gm-tile{min-width:40px}
 .gm-step{min-width:23px;font-size:13px}
}