:root { color-scheme: dark; --puzzle-ink:#09182a; --puzzle-panel:#142c43; --puzzle-panel-2:#1e3b54; --puzzle-gold:#f7c968; --puzzle-paper:#fff0c7; --puzzle-mist:#d9e7f2; }
* { box-sizing: border-box; }
body.puzzle-body { margin:0; min-width:320px; background:radial-gradient(circle at 75% -10%,#264f6b 0,#0b1c30 42%,#071322 100%); color:var(--puzzle-mist); font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
/* XP still receives completion events; the global bar would otherwise occupy
   the first rows of this full-screen game without loading the site shell CSS. */
.puzzle-body .cet-gamification-bar { display:none!important; }
button,select { font:inherit; } button { cursor:pointer; } button:focus-visible,a:focus-visible,select:focus-visible { outline:3px solid #fff0a6; outline-offset:3px; }
.puzzle-page { width:min(1160px,100%); margin:auto; padding:max(16px,env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom)); }
.puzzle-back { display:inline-flex; color:#ffe0a4; text-decoration:none; font-weight:700; margin:4px 0 16px; min-height:44px; align-items:center; }
.puzzle-heading { max-width:740px; margin:0 auto 18px; text-align:center; }.puzzle-heading h1 { margin:0; color:#fff2cd; font-size:clamp(2rem,6vw,3.3rem); letter-spacing:-.04em; }.puzzle-heading p:last-child { margin:.35rem 0 0; color:#cbdce8; }
.puzzle-kicker { margin:0 0 4px; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:800; color:var(--puzzle-gold); }
.puzzle-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:860px; margin:0 auto 16px; }
.puzzle-mode { min-height:80px; border:1px solid #335a72; border-radius:16px; background:rgba(17,43,65,.88); color:#eff8ff; padding:12px; text-align:left; display:grid; grid-template-columns:36px 1fr; column-gap:10px; align-items:center; transition:transform .16s ease,background .16s ease,border-color .16s ease; }.puzzle-mode:hover,.puzzle-mode.is-active { border-color:#f3c563; background:#254b63; transform:translateY(-1px); }.puzzle-mode>span{font-size:1.9rem;color:#f9cf6a;grid-row:span 2}.puzzle-mode strong{font-size:1rem}.puzzle-mode small{color:#c6d8e4}
.puzzle-stage { position:relative; isolation:isolate; overflow:hidden; border:1px solid #3a6177; border-radius:24px; background:#0b1b2d; box-shadow:0 24px 70px #0008; min-height:clamp(590px,76dvh,760px); }.puzzle-game-root { position:absolute; inset:0; }.puzzle-game-root canvas { display:block; width:100%!important; height:100%!important; touch-action:none; }
.puzzle-hud { position:absolute; z-index:4; top:12px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; pointer-events:none; }.puzzle-hud p { margin:0; display:flex; gap:12px; align-items:center; padding:7px 10px; border-radius:999px; background:#071426cc; border:1px solid #46677b; font-size:.78rem; }.puzzle-hud strong { color:#ffe3a4; }.puzzle-icon-button { pointer-events:auto; width:44px; height:44px; border:1px solid #547a8e; border-radius:50%; background:#142d42; color:#fff1c8; font-weight:800; }
.puzzle-live { position:absolute; z-index:6; top:61px; left:50%; translate:-50% 0; margin:0; padding:5px 10px; min-height:0; background:#112840d9; border-radius:999px; color:#fff0c8; font-size:.8rem; text-align:center; pointer-events:none; opacity:0; transition:opacity .15s; }.puzzle-live:not(:empty){opacity:1;}
.puzzle-controls { position:absolute; z-index:5; bottom:12px; left:12px; right:12px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; pointer-events:auto; }.puzzle-difficulty { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; background:#10263bdc; border:1px solid #4b7081; border-radius:12px; color:#eaf5ff; font-size:.82rem; }.puzzle-difficulty select { max-width:160px; border:0; border-radius:7px; padding:4px; background:#fff3d1; color:#152536; }
.puzzle-button { min-height:44px; border:0; border-radius:11px; padding:9px 14px; background:linear-gradient(180deg,#f8d678,#d79535); color:#27200f; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; text-align:center; }.puzzle-button--secondary { background:#e2eef3; color:#153047; }.puzzle-button:disabled { cursor:not-allowed; opacity:.56; }
.sequence-panel { position:absolute; z-index:6; inset:150px 14px 12px; overflow:auto; padding:14px; border-radius:18px; background:#0b1d30e8; border:1px solid #4a7081; }.sequence-panel h2 { margin:0;color:#fff0ca;font-size:1.1rem}.sequence-panel>p{margin:4px 0 12px;font-size:.85rem;color:#cfe0ea}.sequence-list{padding:0;margin:0;list-style:none;display:grid;gap:8px}.sequence-card{display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;padding:10px;border:1px solid #52748a;border-radius:12px;background:#1f4057;color:#edf7ff;touch-action:none;user-select:none}.sequence-card.is-dragging{opacity:.55;outline:2px dashed #f8ce68}.sequence-card__order{font-weight:900;color:#ffda79}.sequence-card__move{display:flex;gap:5px}.sequence-card__move button{width:36px;min-height:36px;border:0;border-radius:8px;background:#dcecf4;color:#17334b;font-weight:900}.sequence-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.puzzle-modal { position:absolute; z-index:10; inset:auto 14px 14px; max-width:580px; margin:auto; padding:20px; border:1px solid #f1c669; border-radius:20px; background:#10263eeF; box-shadow:0 18px 60px #000a; text-align:center; }.puzzle-modal--result { top:50%; bottom:auto; translate:0 -50%; }.puzzle-modal h2 { color:#fff0ca;margin:.1rem 0 .5rem; }.puzzle-stars{font-size:1.65rem;letter-spacing:.18em;color:#f7cc65;margin:8px}.puzzle-result-reference{font-weight:800;color:#f8d27a}.puzzle-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}.puzzle-option{display:flex;gap:8px;margin:10px 0;align-items:center;text-align:left}.puzzle-exit{color:#d4e9f6;display:inline-block;margin-top:16px}.puzzle-modal[hidden],.sequence-panel[hidden]{display:none}
.puzzle-footer { max-width:760px;margin:16px auto 0;text-align:center;font-size:.88rem;color:#bbceda }.puzzle-footer p{margin:0}
.puzzle-shell.is-playing .puzzle-heading { margin:0 auto 4px; }.puzzle-shell.is-playing .puzzle-heading .puzzle-kicker,.puzzle-shell.is-playing .puzzle-heading p:last-child { display:none; }.puzzle-shell.is-playing .puzzle-heading h1 { font-size:clamp(1.25rem,4vw,1.7rem); letter-spacing:-.02em; }.puzzle-shell.is-playing .puzzle-picker { display:none; }
@media (max-width:699px){.puzzle-page{padding-left:10px;padding-right:10px}.puzzle-picker{grid-template-columns:1fr}.puzzle-stage{min-height:clamp(570px,82dvh,720px);border-radius:18px}.puzzle-hud{top:8px;left:8px;right:8px}.puzzle-hud p{font-size:.7rem;gap:7px}.puzzle-controls{bottom:7px;left:7px;right:7px;gap:6px}.puzzle-difficulty{font-size:.73rem;padding:6px}.puzzle-difficulty select{max-width:136px;font-size:.73rem}.puzzle-button{min-height:40px;padding:8px 10px;font-size:.82rem}.sequence-panel{inset:142px 8px 8px;padding:10px}.sequence-card{grid-template-columns:24px 1fr; padding:9px;font-size:.88rem}.sequence-card__move{grid-column:2;}.puzzle-modal{left:8px;right:8px;bottom:8px;padding:16px}.puzzle-modal--result{top:50%;bottom:auto}.puzzle-actions .puzzle-button{flex:1 1 130px}.puzzle-heading{margin-bottom:12px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0.01ms!important;animation-duration:0.01ms!important;animation-iteration-count:1!important}}
.force-reduced-motion *, .force-reduced-motion *::before, .force-reduced-motion *::after { scroll-behavior:auto!important; transition-duration:0.01ms!important; animation-duration:0.01ms!important; animation-iteration-count:1!important; }