html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#090514;color:#e6fbff;font-family:Courier New,ui-monospace,SFMono-Regular,Menlo,monospace}body{--game-width: min(92vw, calc((100dvh - 70px)*1.375) , 880px);--hud-font-size: clamp(13px, 1.9dvh, 18px);display:grid;grid-template-rows:auto auto auto;box-sizing:border-box;min-height:100dvh;padding:clamp(8px,1.6dvh,16px) 16px;align-content:center;justify-items:center;place-items:center;row-gap:clamp(10px,2dvh,18px)}#bg{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:#090514;image-rendering:pixelated}.topbar,#board,.bottom-hud,.overlay{position:relative;z-index:1}html[data-screen=title] .topbar,html[data-screen=title] #board,html[data-screen=title] .bottom-hud,html[data-screen=title-loading] .topbar,html[data-screen=title-loading] #board,html[data-screen=title-loading] .bottom-hud{visibility:hidden}.topbar{align-self:end;box-sizing:border-box;display:flex;justify-content:space-between;gap:18px;width:var(--game-width);color:#e6fbff;font-size:var(--hud-font-size);font-weight:900;letter-spacing:.08em;line-height:1.1;text-align:left;text-shadow:0 2px 0 rgba(6,0,16,.9);text-transform:uppercase}.moves-readout{display:inline-flex;flex:0 0 auto;gap:.5em;justify-content:flex-end;color:#ffcc5c;white-space:nowrap}.score-label{color:#9eefff;letter-spacing:inherit}.status{min-width:0;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#board{width:var(--game-width);height:auto;aspect-ratio:22 / 16;display:grid;place-items:center}#board canvas{width:100%!important;height:100%!important;image-rendering:pixelated;image-rendering:crisp-edges}.bottom-hud{align-self:center;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:clamp(8px,1.6vw,18px);justify-content:center;width:var(--game-width);color:#9eefff;font-size:var(--hud-font-size);font-weight:900;letter-spacing:.1em;line-height:1.1;padding:0 12px 4px;text-align:center;text-shadow:0 2px 0 rgba(6,0,16,.9);text-transform:uppercase}.bottom-hud>span{display:inline-flex;padding:2px 0;white-space:nowrap}.bottom-hud>span:first-child{color:#fff;letter-spacing:.07em}#hint-hud{flex:0 0 21ch;gap:.5em;justify-content:flex-start;text-align:left}#hint-hud .hint-label,#hint-hud .hint-value{color:inherit}@media(max-width:760px){body{--game-width: min( calc(100vw - 16px) , calc((100dvh - 118px)*1.375) , 880px);padding:8px}.bottom-hud{gap:6px 14px}}@media(max-width:500px){.bottom-hud{max-width:360px}}button{min-height:42px;border:3px solid #8fa3ba;border-radius:8px;background:#172338;box-shadow:inset 0 0 0 2px #ffffff0f,4px 5px #0000006b;color:#e6fbff;cursor:pointer;font:inherit;font-size:clamp(12px,1.7dvh,15px);font-weight:900;letter-spacing:.08em;padding:0 16px;text-transform:uppercase;touch-action:manipulation;transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease,transform 80ms ease}button.primary{background:#463823;border-color:#8fa3ba;color:#fff4cf}button:hover,button:focus-visible{background:#213451;border-color:#b8c4d1;outline:none;box-shadow:inset 0 0 0 2px #bef6ff1f,3px 4px #00000080}button:active{background:#101827;box-shadow:inset 0 0 0 2px #bef6ff14,2px 3px #00000075;transform:translate(2px,2px)}button.primary:hover,button.primary:focus-visible{background:#5a4728;border-color:#b8c4d1}button.primary:active{background:#2f2418}button.selected{background:#24516a;border-color:#b8c4d1;color:#fff}.hidden{display:none!important}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#030a149e;z-index:10}#start,html[data-screen=title-loading] #loading-screen{background:#090514}.panel{width:min(340px,calc(100vw - 32px));display:grid;gap:14px;border:4px solid #8fa3ba;border-radius:8px;background:#101827;box-shadow:inset 0 0 0 4px #060d19,8px 10px #0000007a;padding:clamp(18px,3dvh,28px);text-align:center}h2{margin:0;color:#ffcc5c;font-size:clamp(28px,7vw,48px);line-height:1;text-transform:uppercase}.panel[data-panel=main]{width:min(380px,calc(100vw - 32px));gap:clamp(14px,2.4dvh,20px);padding:clamp(18px,3dvh,24px)}.panel[data-panel=main] button{justify-self:center;width:min(100%,300px)}.start-title{display:grid;gap:clamp(4px,1dvh,10px);justify-items:center;margin:0 0 clamp(4px,1dvh,8px);text-transform:uppercase}.start-title span{display:block;max-width:100%;color:#46e6f4;font-weight:900;letter-spacing:.06em;line-height:.9;background:linear-gradient(90deg,#d930ff,#68a8ff 42%,#38e8ec 66%,#44f47d);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}.start-title span:first-child{font-size:clamp(34px,7vw,62px)}.start-title span:last-child{font-size:clamp(52px,11vw,92px);letter-spacing:.04em}#start .panel[data-panel=main] button:not(.primary){background:#172338;border-color:#8fa3ba;color:#fff}#start .panel[data-panel=main] button:not(.primary):hover,#start .panel[data-panel=main] button:not(.primary):focus-visible{background:#223451}#start .panel[data-panel=main] button:nth-of-type(3){background:#211832;border-color:#8fa3ba}#start .panel[data-panel=main] button:nth-of-type(3):hover,#start .panel[data-panel=main] button:nth-of-type(3):focus-visible{background:#342248}h2{color:#fff}p{margin:0;color:#c7f6ff;line-height:1.45}.mode-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.loading-panel{width:auto;color:#ffcc5c;font-size:22px;font-weight:900;text-transform:uppercase}@media(max-height:760px){body{--hud-font-size: 15px;padding-block:6px;row-gap:10px}.status{min-height:0}button{min-height:36px;border-width:2px;box-shadow:inset 0 0 0 1px #bef6ff14,3px 4px #0000006b;font-size:12px;padding-inline:10px}}