@import "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600;700;900&family=Roboto+Mono:wght@500;700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#071e1a;font-family:Noto Serif JP,serif}*{box-sizing:border-box}body{color:#f6eedc;background:radial-gradient(circle at 50% -20%,#225c4a,#071e1a 62%);min-width:320px;min-height:100vh;margin:0}button{font:inherit}.game-shell{width:min(1480px,100%);margin:auto;padding:24px clamp(12px,3vw,42px) 30px}.build-id{z-index:20;pointer-events:none;color:#f6eedc80;font:500 10px/1.2 Roboto Mono,monospace;position:fixed;bottom:6px;right:8px}.masthead{justify-content:space-between;align-items:end;margin-bottom:18px;display:flex}.eyebrow{color:#d3a94f;letter-spacing:.24em;margin:0 0 3px;font:700 10px/1.2 Roboto Mono,monospace}h1{letter-spacing:.18em;margin:0;font-size:clamp(30px,4vw,48px);line-height:1}.new-game{color:#f4dfad;cursor:pointer;background:0 0;border:1px solid #d3a94f;border-radius:3px;padding:10px 18px}.new-game:hover{color:#102b23;background:#d3a94f}.header-actions{align-items:center;gap:10px;display:flex}.settings-bar{color:#9fb6ac;justify-content:flex-end;align-items:center;gap:10px;min-height:44px;margin:-8px 0 10px;font:700 11px Roboto Mono,monospace;display:flex}.bonus-chip{color:#a8ead8;border:1px solid #72cdb5;border-radius:3px;padding:7px 9px}.level-switch,.view-mode-switch{border:1px solid #ffffff26;border-radius:3px;display:flex;overflow:hidden}.level-switch button,.view-mode-switch button,.hint-button,.undo-button,.reset-initial-button,.surrender-button,.settings-button,.instruction-button{color:#a9bbb4;cursor:pointer;text-transform:uppercase;background:0 0;border:0;padding:9px 11px;font:700 11px Roboto Mono,monospace}.level-switch button+button,.view-mode-switch button+button{border-left:1px solid #ffffff26}.level-switch button.active,.view-mode-switch button.active{color:#102b23;background:#d3a94f}.hint-button{color:#a8ead8;border:1px solid #72cdb5}.undo-button{color:#f4dfad;border:1px solid #d3a94f88}.reset-initial-button{color:#a8ead8;border:1px solid #72cdb588}.surrender-button{color:#ffb1a8;border:1px solid #d46d62}.settings-button,.instruction-button{border:1px solid #ffffff26;border-radius:3px}.hint-button:disabled,.undo-button:disabled,.reset-initial-button:disabled{cursor:default;opacity:.4}.status-bar{border-block:1px solid #ffffff1a;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:64px;display:grid}.status-bar p{color:#d8d8c7;margin:0;font-size:13px}.status-chips{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.status-chip{background:#b9822d;border-radius:2px;align-items:center;min-height:24px;padding:5px 10px;font:700 11px Roboto Mono,monospace;display:inline-flex}.status-chip.playing{background:#1c8069}.status-chip.cleared{color:#17271f;background:#d3a94f}.status-chip.failed{background:#963d34}.status-chip.board-source{color:#d8e9e3;background:#38514d}.status-chip.board-source.server{color:#102b23;background:#72cdb5}.status-chip.board-source.random{background:#38514d}.counter{text-align:right}.counter strong{font:700 18px Roboto Mono,monospace;display:block}.counter span{color:#839e94;font-size:10px}.table-wrap{background:linear-gradient(145deg,#0d493b,#0a392f);border:1px solid #d3a94f55;margin-top:22px;padding:clamp(10px,2vw,22px);overflow-x:auto;box-shadow:inset 0 0 60px #0005,0 18px 50px #0006}.board{isolation:isolate;grid-template-columns:repeat(17,minmax(44px,1fr));gap:clamp(3px,.35vw,6px);min-width:880px;display:grid;position:relative}.board-skin-layer{z-index:0;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.board-skin-layer img{object-fit:contain;opacity:.9;width:100%;height:100%;display:block}.board.cleared .board-skin-layer img{animation:1.4s ease-out both board-skin-clear-reveal}@keyframes board-skin-clear-reveal{0%{opacity:.35;filter:saturate(.8)brightness(.9);transform:scale(.97)rotateX(0)}55%{opacity:1;filter:saturate(1.25)brightness(1.18);transform:scale(.7)rotateX(190deg)}to{opacity:1;filter:saturate()brightness();transform:scale(1)rotateX(360deg)}}.board.rotated{grid-template-columns:repeat(8,minmax(36px,1fr));width:min(620px,100%);min-width:min(430px,100%);margin-inline:auto}.board.phone-landscape{grid-template-columns:repeat(8,minmax(54px,1fr));width:min(760px,100%);min-width:min(560px,100%)}.cell{z-index:1;aspect-ratio:.72;cursor:default;background:#061a1640;border:0;border-radius:4px;padding:0;position:relative}.board.cleared .cell{background:0 0}.board.phone-landscape .cell{aspect-ratio:1.39}.tile{border:1px solid #e9ddbd;color:#142b25;writing-mode:vertical-rl;letter-spacing:-.12em;cursor:pointer;background:linear-gradient(145deg,#fffdf1,#ddd8c5);border-bottom-width:4px;border-bottom-color:#a7a084;border-radius:5px;place-items:center;font-size:clamp(12px,1.25vw,18px);font-weight:900;transition:transform .12s,box-shadow .12s;display:grid;position:absolute;inset:0;box-shadow:0 3px 5px #001d}.tile.image-skin{image-rendering:auto;color:#0000;writing-mode:horizontal-tb;letter-spacing:0;background-color:#f7f3e3;border-color:#f3e8cf;overflow:hidden}.tile.image-skin:before{content:"";background-repeat:no-repeat;background-image:var(--tile-image);background-position:var(--tile-position);background-size:1100% 600%;transition:transform .12s;position:absolute;inset:0}.tile.text-skin{background:linear-gradient(145deg,#fffdf1,#ddd8c5)}.tile-face{place-items:center;width:100%;height:100%;transition:transform .12s;display:grid}.tile.rotated-display .tile-face,.tile.image-skin.rotated-display:before{width:72%;height:139%;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)rotate(90deg)}.tile.moving-source{opacity:0}.move-animation-layer{z-index:9;pointer-events:none;position:fixed;inset:0}.moving-tile{z-index:9;opacity:1;pointer-events:none;will-change:transform;position:fixed;inset:auto}.moving-tile.moving-source{opacity:1}.moving-tile:hover{transform:none;box-shadow:0 3px 5px #001d}.tile:hover{transform:translateY(-2px);box-shadow:0 6px 8px #001d}.tile.selected{outline:3px solid #efbd52;transform:translateY(-4px)}.tile.characters,.tile.red{color:#a8362d}.tile.green{color:#087154}.tile.hint-flash{animation:.7s ease-in-out 2 hint-flash}.tile.dialog-highlight{z-index:2;outline-offset:2px;filter:brightness(1.25);outline:4px solid #79ffe0;box-shadow:0 0 0 3px #063d32,0 0 22px #79ffe0}.tile.dialog-option-0{outline-color:#ffd166;box-shadow:0 0 0 3px #503b08,0 0 28px #ffd166}.tile.dialog-option-1{outline-color:#ff78b7;box-shadow:0 0 0 3px #50142f,0 0 28px #ff78b7}.tile.dialog-option-2{outline-color:#7fb7ff;box-shadow:0 0 0 3px #12355f,0 0 28px #7fb7ff}.tile.dialog-option-3{outline-color:#b98cff;box-shadow:0 0 0 3px #351667,0 0 28px #b98cff}@keyframes hint-flash{0%,to{filter:brightness();outline:0 solid #0000}50%{filter:brightness(1.35);outline:5px solid #79ffe0;box-shadow:0 0 24px #79ffe0}}.cell.destination{cursor:pointer;background:#dfb95722}.target-marker{z-index:3;pointer-events:none;border:3px solid #ffd66f;border-radius:7px;position:absolute;inset:-2px;box-shadow:inset 0 0 0 2px #102b23aa,0 0 14px #f5c75dcc}.target-dot{background:#f5c75d;border-radius:50%;width:10px;height:10px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #102b23cc,0 0 16px #f5c75d}.how-to{color:#92aa9f;justify-content:center;align-items:center;gap:14px;padding-top:22px;font-size:12px;display:flex}.how-to b{color:#d3a94f;margin-right:4px}.how-to i{background:#51675e;width:30px;height:1px}.instruction-window{z-index:15;pointer-events:auto;background:#0b3028;border:1px solid #d3a94f;grid-template-rows:auto minmax(0,1fr);width:min(720px,100vw - 24px);max-height:calc(100vh - 116px);display:grid;position:fixed;top:92px;right:22px;box-shadow:0 20px 80px #000b}.instruction-window header{border-bottom:1px solid #ffffff1f;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;display:flex}.instruction-window h2{margin:3px 0 0;font-size:18px}.instruction-window-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.instruction-window button{color:#f4dfad;cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:3px;padding:8px 12px;font:700 11px Roboto Mono,monospace}.instruction-window button:hover{border-color:#d3a94f}.instruction-window-body{background:#071e1a;min-height:0;overflow:hidden auto}.instruction-window img{width:100%;height:auto;display:block}.instruction-window.minimized{grid-template-rows:auto;width:min(360px,100vw - 24px)}.instruction-window.minimized header{border-bottom:0}.instruction-window.side-left{left:22px;right:auto}.instruction-window.side-right{left:auto;right:22px}.overlay{z-index:10;pointer-events:auto;background:0 0;place-items:center end;padding:20px;display:grid;position:fixed;inset:0}.settings-overlay{z-index:20;background:#0009}.dialog{pointer-events:auto;background:#0b3028;border:1px solid #d3a94f;width:min(440px,100%);padding:28px;box-shadow:0 20px 80px #000}.dialog.side-left{justify-self:start}.dialog.side-right{justify-self:end}.dialog h2{margin:4px 0 8px;font-size:24px}.dialog>p:not(.eyebrow){color:#a9bbb4;font-size:13px}.dialog button{color:#f7eed9;cursor:pointer;background:#16483c;border:1px solid #ffffff26;justify-content:space-between;width:100%;margin-top:10px;padding:13px;display:flex}.dialog button:hover{border-color:#d3a94f}.dialog .option-button{border-left-width:5px}.dialog .option-button-0{border-left-color:#ffd166}.dialog .option-button-1{border-left-color:#ff78b7}.dialog .option-button-2{border-left-color:#7fb7ff}.dialog .option-button-3{border-left-color:#b98cff}.dialog .surrender-ok{border-color:#d3a94f;justify-content:center}.dialog button span{color:#9db4aa;font-size:12px}.dialog .cancel{background:0 0;justify-content:center}.settings-dialog{overscroll-behavior:contain;justify-self:center;max-height:calc(100dvh - 40px);overflow-y:auto}.setting-group{gap:8px;margin:18px 0;display:grid}.setting-group p{color:#a9bbb4;margin:0;font:700 12px Roboto Mono,monospace}.settings-dialog .view-mode-switch button{justify-content:center;width:auto;min-width:72px;margin:0;padding:10px 14px}.settings-dialog .skin-select{color:#d8d8c7;background:#071e1a;border:1px solid #ffffff26;border-radius:3px;width:min(360px,100%);padding:10px 12px;font:700 13px Roboto Mono,monospace}.settings-dialog .skin-select:focus{outline-offset:2px;outline:2px solid #72cdb5}.settings-dialog .view-mode-switch{width:max-content;max-width:100%}.privacy-choice{border:1px solid #ffffff26;border-radius:3px;width:max-content;max-width:100%;display:flex;overflow:hidden}.settings-dialog .privacy-choice button{justify-content:center;width:auto;min-width:96px;margin:0;padding:10px 14px}.settings-dialog .board-load-choice button{flex-direction:column;gap:3px;min-width:190px;line-height:1.25}.settings-dialog .board-load-choice button span{font-size:14px}.settings-dialog .board-load-choice button small{color:#9db4aa;font:700 10px Roboto Mono,monospace;display:block}.settings-dialog .privacy-choice button+button{border-left:1px solid #ffffff26}.settings-dialog .privacy-choice button.active{color:#102b23;background:#72cdb5;border-color:#72cdb5}.settings-dialog .board-load-choice button.active span{color:#102b23}.settings-dialog .board-load-choice button.active small{color:#28453b}.setting-group .setting-note{color:#d8d8c7;font-weight:500}.privacy-gate{z-index:30;pointer-events:auto;background:#0005;place-items:end center;padding:18px 12px;display:grid;position:fixed;inset:0}.privacy-banner{background:#0b3028f2;border:1px solid #d3a94f;grid-template-columns:1fr auto;align-items:center;gap:18px;width:min(760px,100vw - 24px);padding:18px;display:grid;box-shadow:0 16px 60px #000c}.privacy-banner h2{margin:0 0 6px;font-size:20px}.privacy-banner p{color:#d8d8c7;margin:0;font-size:13px;line-height:1.6}.privacy-banner-actions{grid-template-columns:repeat(3,max-content);gap:10px;display:grid}.privacy-banner button{color:#f7eed9;cursor:pointer;background:#16483c;border:1px solid #ffffff30;border-radius:3px;min-width:96px;padding:11px 13px;font:700 12px Roboto Mono,monospace}.privacy-banner button.primary{color:#102b23;background:#d3a94f;border-color:#d3a94f}@media (width<=650px){.game-shell{padding-inline:8px}.status-bar{grid-template-columns:auto 1fr}.counter{display:none}.status-bar p{font-size:11px}.how-to{display:none}.masthead{align-items:flex-start}.header-actions{flex-wrap:wrap;justify-content:flex-end}.settings-bar{justify-content:flex-start;margin-top:0}.instruction-window{width:calc(100vw - 16px);max-height:72vh;top:auto;bottom:8px;right:8px}.instruction-window.side-left{left:8px;right:auto}.instruction-window.side-right{left:auto;right:8px}.overlay{place-items:end center;padding:8px}.dialog{max-height:70vh;overflow-y:auto}.settings-dialog{max-height:calc(100dvh - 16px)}.privacy-banner{grid-template-columns:1fr;gap:12px}.privacy-banner-actions{grid-template-columns:repeat(3,1fr);display:grid}.privacy-banner button{min-width:0}}.dialog.minimized{border-radius:4px 0 0 4px;width:auto;padding:6px}.dialog.minimized.side-left{border-radius:0 4px 4px 0}.dialog.minimized.side-right{border-radius:4px 0 0 4px}.dialog-minimized-actions{gap:6px;display:flex}.dialog .dialog-toggle{color:#d8c492;background:0 0;border-color:#d3a94f88;width:auto;margin:0 0 16px auto;padding:6px 9px;font:700 10px Roboto Mono,monospace}.dialog.minimized .dialog-toggle{white-space:nowrap;margin:0}
