:root{--bg-color:#c0c0c0;--shadow-light:#fff;--shadow-dark:#808080}*{box-sizing:border-box}body{background:#e6edf5;font-family:'Courier New',monospace;display:flex;align-items:center;justify-content:center;min-height:100svh;margin:0;padding:max(25px,env(safe-area-inset-top)) 8px max(25px,env(safe-area-inset-bottom));touch-action:pan-y}#game-window{width:100%;max-width:430px;background:#c0c0c0;padding:6px;border-style:solid;border-width:3px;border-color:#fff #808080 #808080 #fff}.bevel-up{border:3px solid;border-color:#fff #808080 #808080 #fff;background:#c0c0c0}.bevel-down{border:2px solid;border-color:#808080 #fff #fff #808080;background:#c0c0c0}header{display:flex;justify-content:space-between;align-items:center;padding:8px 5px;margin-bottom:6px;gap:4px}.digital-display{background:#000;color:red;font:bold 24px 'Courier New',monospace;padding:2px 3px;width:55px;text-align:center;border:2px solid;border-color:#808080 #fff #fff #808080}.controls-cluster{display:flex;gap:6px}.btn{width:42px;height:42px;padding:0;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:#000;touch-action:manipulation}.btn:active,.btn[aria-pressed=true]{border-width:3px;border-color:#808080 #fff #fff #808080}.btn[aria-pressed=true]{background:#ff0}button:focus-visible,select:focus-visible{outline:2px solid #000;outline-offset:2px}#grid-container{overflow:auto;border:3px solid;border-color:#808080 #fff #fff #808080;max-width:100%;touch-action:pan-x pan-y}#grid{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));width:max-content;--cell:36px}.cell{width:var(--cell);height:var(--cell);padding:0;display:flex;align-items:center;justify-content:center;font:bold 22px 'Courier New',monospace;border:3px solid;border-color:#fff #808080 #808080 #fff;background:#c0c0c0;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}.cell.open,.cell.mine{border:1px solid #808080;background:#c0c0c0}.cell.hit{background:#f00}.c1{color:#00f}.c2{color:#008000}.c3{color:#f00}.c4{color:#000080}.c5{color:#800000}.c6{color:#008080}.c7{color:#000}.c8{color:#808080}.flagged,.wrong{color:red}.utility{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;min-height:50px}.utility select{font:14px 'Courier New',monospace;background:#c0c0c0;color:#000;padding:8px 4px;border:1px solid #808080;max-width:110px}.utility .btn{width:34px;height:34px;font-size:20px}#status{font-size:12px;text-align:center}#save-notice{font-size:12px;margin:0}dialog{background:#c0c0c0;border:3px solid;border-color:#fff #808080 #808080 #fff;width:min(360px,calc(100% - 32px));padding:16px;font:14px/1.6 'Courier New',monospace;max-height:calc(100svh - 40px);overflow:auto}dialog::backdrop{background:#0009}dialog h2{font-size:18px}#close-help{float:right;width:34px;height:34px}@media(max-width:350px){.btn{width:36px;height:36px;font-size:22px}.controls-cluster{gap:3px}.digital-display{font-size:21px;width:48px}header{padding-inline:3px}}

/* Compact visual guide; game and score panels keep their original appearance. */
#rules{padding:0;width:min(380px,calc(100% - 24px));max-height:calc(100dvh - 24px);border:1px solid var(--help-line);border-radius:22px;background:var(--help-bg);color:var(--help-ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 20px 70px #0006;overflow:hidden}
#rules[open]{display:flex;flex-direction:column}#rules::backdrop{background:#0008;backdrop-filter:blur(6px)}
#rules .help-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 14px;margin:0;border-bottom:1px solid var(--help-line);background:var(--help-bg);flex:none}
#rules h2{font-size:22px;font-weight:650;letter-spacing:-.6px;margin:0}#rules h3{font-size:13px;font-weight:650;margin:0 0 8px}#rules p{font-size:13px;line-height:1.45;margin:0}#rules .help-header p{color:var(--help-muted);font-size:12px;margin-top:3px}
#rules .help-close{float:none;min-width:44px;width:44px;height:44px;padding:12px;border:0;border-radius:50%;background:var(--help-panel);color:var(--help-ink);box-shadow:none;display:grid;place-items:center;flex:none}#rules .help-close svg{width:20px;height:20px}#rules .help-close:focus-visible{outline:2px solid var(--help-ink);outline-offset:2px}#rules .help-close:active{transform:none}
#rules .help-content{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:18px;display:flex;flex-direction:column;gap:18px;min-height:0;text-align:left}
#rules .help-note{color:var(--help-muted);font-size:11px;line-height:1.5;margin-top:10px}#rules .help-example{background:var(--help-panel);border-radius:16px;padding:16px}#rules .help-example p{color:var(--help-muted);font-size:12px}
#rules{--help-bg:#f5f5f3;--help-panel:#e8e8e5;--help-ink:#181918;--help-muted:#62635f;--help-line:#d7d7d1}
#rules .help-example{display:flex;align-items:center;gap:18px}#rules .help-mine-diagram{display:grid;grid-template-columns:repeat(3,28px);flex:none}#rules .help-mine-diagram>span{width:28px;height:28px;display:grid;place-items:center;font:700 21px/1 'Courier New',monospace;background:#c0c0c0;border:1px solid #808080}#rules .help-mine-diagram>.raised{border:3px solid;border-color:white #808080 #808080 white;font-size:17px}#rules .help-mine-diagram>.clue{color:#008000}
#rules .help-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}#rules .help-actions>div{background:var(--help-panel);border-radius:14px;padding:14px}#rules .help-action-icon{display:block;font-size:24px;margin-bottom:8px}#rules .help-actions p{font-size:12px;color:var(--help-muted)}#rules .help-actions h3{margin-bottom:4px}
#rules .help-chord{display:flex;align-items:center;gap:14px}#rules .help-clue{display:grid;place-items:center;width:40px;height:40px;background:#c0c0c0;border:1px solid #808080;color:#008000;font:700 26px 'Courier New',monospace;flex:none}#rules .help-chord p{font-size:12px;color:var(--help-muted)}#rules .help-chord h3{margin-bottom:4px}#rules .help-safe{margin:0}
#rules .help-keyboard{display:flex;flex-wrap:wrap;gap:8px 14px;border-top:1px solid var(--help-line);padding-top:14px;color:var(--help-muted);font-size:10px}#rules kbd{font-family:inherit;font-size:10px;color:var(--help-ink);background:var(--help-panel);padding:3px 5px;border-radius:4px}

/* In the showcase, the shared thin frame surrounds the game directly. */
html.embedded body{padding:0;background:#c0c0c0;height:100svh;min-height:0;align-items:stretch}
html.embedded #game-window{width:100%;max-width:none;height:100svh;min-height:0;display:flex;flex-direction:column}
html.embedded #game-window>header,html.embedded .utility{flex:none}
html.embedded #grid-container{flex:1 1 0;min-height:0;overflow:auto;background:#c0c0c0;overscroll-behavior:contain}