:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#fff5fa;background:#170d13;--pink:#ff8ac1;--line:rgba(255,207,229,.22);touch-action:none;overscroll-behavior:none}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:transparent}body::before{content:"";position:fixed;inset:0;z-index:-2;background:url("assets/background.jpg") center 40%/cover no-repeat}body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,5,10,.13),rgba(12,5,10,.10) 40%,rgba(12,5,10,.55))}
button{font:inherit;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #fff;outline-offset:5px}button:disabled{opacity:.35;cursor:default}
.game{width:min(100% - 36px,440px);margin:auto;padding:max(22px,env(safe-area-inset-top)) 0 max(20px,env(safe-area-inset-bottom));min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.brand{display:flex;align-items:center;gap:11px;text-shadow:0 2px 18px #170d13}.brand-heart{color:var(--pink);font-size:32px}h1{font-size:27px;letter-spacing:-1px;margin:0;font-weight:700}.icon-button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(28,13,24,.55);font-size:22px}
.scores{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;text-shadow:0 2px 12px #000}.scores>div{display:flex;flex-direction:column;gap:5px}.label{font-size:12px;font-weight:700;letter-spacing:1.7px;color:#f4d6e5}.scores strong{font-size:34px;font-variant-numeric:tabular-nums;font-weight:600;line-height:1.1}.best{text-align:right}.best strong{color:#ffc4df}.best strong>span:first-child{font-size:24px}
.board{position:relative;width:100%;aspect-ratio:1;border:1px solid rgba(255,190,221,.44);border-radius:24px;overflow:hidden;background:rgba(29,13,25,.43);box-shadow:0 18px 55px rgba(0,0,0,.22),inset 0 0 50px rgba(17,6,13,.10);touch-action:none;user-select:none;-webkit-user-select:none}
canvas{display:block;width:100%;height:100%}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(25,11,21,.25)}.overlay[hidden]{display:none}.dialog{width:100%;max-width:310px;padding:23px 18px 20px;text-align:center;border-radius:22px;background:rgba(34,17,29,.86);border:1px solid rgba(255,210,232,.16);box-shadow:0 15px 30px #0002;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}.dialog-heart{display:block;color:var(--pink);font-size:43px;line-height:1;margin-bottom:13px;text-shadow:0 0 24px #ff70ae55}h2{font-size:25px;letter-spacing:-.7px;margin:0 0 10px}.dialog p{font-size:15px;line-height:1.5;color:#e7ceda;margin:0 0 21px}.primary{min-height:50px;width:100%;border:0;background:#ffa4ce;color:#341427;border-radius:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:20px}.primary:hover{background:#ffbcdb}.primary span{font-size:22px}.hint{text-align:center;font-size:14px;color:#f3e1ea;margin:19px 0 15px;text-shadow:0 2px 8px #000}.directions{display:flex;justify-content:center;align-items:center;gap:9px}.directions>div{display:flex;flex-direction:column;gap:7px}.directions button{width:57px;height:43px;font-size:24px;border-radius:13px;background:rgba(34,17,29,.63);border:1px solid var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.directions button:active{background:#ff8ac1;color:#341427}.keyboard-hint{text-align:center;font-size:12px;color:#d8c1ce;margin:17px 0 0;text-shadow:0 2px 8px #000}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:760px){body::before{background-size:cover;background-position:center 40%}.game{width:440px}.board{background:rgba(29,13,25,.5)}}
@media(max-height:750px){.game{width:min(100% - 32px,360px);padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}.header{margin-bottom:12px}.scores{margin-bottom:10px}.scores strong{font-size:29px}.hint{margin:12px 0}.keyboard-hint{margin-top:10px}.directions button{height:38px}.dialog{padding:17px}.dialog-heart{font-size:32px;margin-bottom:9px}.dialog p{margin-bottom:15px}}
@media(orientation:landscape) and (max-height:550px){.game{width:min(100% - 32px,760px);display:grid;grid-template-columns:1fr min(65svh,330px);gap:12px 24px;align-content:center;min-height:100svh}.header,.scores,.hint,.directions,.keyboard-hint{grid-column:1;margin:0}.board{grid-column:2;grid-row:1/6}.scores{justify-content:space-around}.dialog{padding:12px}.dialog-heart{display:none}.dialog p{font-size:14px;margin-bottom:10px}h2{font-size:21px}.primary{min-height:44px}}