:root{color-scheme:light;--background:#eff5ef;--ink:#123f28;--green:#1d5030;--tile:#e4f2e6;--muted:#718078;--border:#c9d9cc;--white:#fff;font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--background)}
*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible{outline:3px solid #c28932;outline-offset:4px}button:disabled{cursor:default}button,nav button{min-height:44px}button:hover:not(:disabled){filter:brightness(.96)}.game{width:min(84vw,55.2svh,848px);min-width:min(92vw,310px);margin:0 auto;padding-top:4.8svh;container-type:inline-size}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4.9cqw}h1{display:flex;align-items:center;gap:1.5cqw;margin:0;font-size:7.8cqw;font-weight:900;letter-spacing:-.055em;white-space:nowrap}.brand{width:8.1cqw;height:10.5cqw;flex-shrink:0}.language{font-size:3.8cqw;font-weight:750;background:transparent;border:2px solid var(--border);border-radius:3cqw;padding:0 2.6cqw;min-width:44px;min-height:max(44px,7.8cqw)}nav{display:flex;justify-content:center;gap:8cqw;margin-bottom:4.3cqw}nav button{position:relative;width:31cqw;background:none;border:0;font-size:5cqw;font-weight:750;padding:1.2cqw 0 2.8cqw;color:var(--muted)}nav button[aria-pressed=true]{color:var(--ink)}nav button[aria-pressed=true]:after{content:"";position:absolute;bottom:0;left:3%;width:94%;height:1.15cqw;border-radius:20px;background:var(--green)}.score{display:flex;justify-content:space-between;align-items:center;font-size:4.1cqw;margin:0 1.1cqw 2.9cqw;gap:12px}.score strong{font-weight:780}.board{display:grid;grid-template-columns:repeat(var(--size,4),1fr);aspect-ratio:1.04;padding:3.7cqw;gap:2cqw;background:var(--white);border-radius:3.7cqw;overflow:hidden}.cell{position:relative;min-width:0;min-height:0;border:0;border-radius:2.1cqw;background:var(--tile);display:grid;place-items:center;padding:0;transition:background .16s,opacity .22s,transform .22s}.cell svg{width:57%;height:57%;overflow:visible;transition:transform .2s,opacity .2s}.cell.removed{background:#f5f9f5;pointer-events:none}.cell.removed svg{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--angle))!important}.cell.hinted{background:#dcefb2;box-shadow:inset 0 0 0 3px #6c8844}.cell.blocked{animation:nudge .25s;background:#f5ded2}.cell svg path{stroke:var(--ink);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;fill:none}#message{font-size:4.35cqw;line-height:1.4;min-height:2.8em;display:flex;align-items:center;justify-content:center;text-align:center;margin:2.5cqw 0 1.9cqw}.actions{display:flex;gap:3.5cqw}.actions button,dialog button{border:2px solid var(--border);border-radius:4.2cqw;width:100%;min-height:max(48px,12.5cqw);font-size:4.6cqw;font-weight:750;background:var(--white);padding:8px}.actions .primary,.primary{background:var(--green);border-color:var(--green);color:var(--white)}footer{margin:3.8cqw 0 0;text-align:center;font-size:3.25cqw;color:#788179}.about{margin:2.4cqw 0 16px;text-align:center;color:#6a776d;font-size:max(11px,2.7cqw)}.about summary{cursor:pointer;min-height:32px}.about p{font-size:14px;line-height:1.7;text-align:left}dialog{border:0;border-radius:28px;max-width:calc(100vw - 32px);width:350px;padding:32px;text-align:center;color:var(--ink);background:var(--background);box-shadow:0 20px 80px #143c2630}dialog::backdrop{background:#143c2680;backdrop-filter:blur(6px)}dialog h2{font-size:36px;letter-spacing:-1px;margin:12px 0}dialog p{line-height:1.6;color:#617467}dialog button{font-size:18px;border-radius:16px;min-height:52px}.win-mark{font-size:64px;color:#6d975d}@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@media(max-width:360px){.game{width:92vw}.board{padding:2.5cqw;gap:1.5cqw}header{gap:6px}h1{font-size:7.3cqw}.language{font-size:14px}nav button{font-size:18px}#message{font-size:15px}.actions button{font-size:17px}.score{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* UI direction follows the language; board coordinates stay physical. */
.board{direction:ltr}.about p{text-align:start}.language{font:inherit;font-size:max(12px,3.5cqw);width:26cqw;max-width:120px;padding:0 1cqw;flex-shrink:0;cursor:pointer;min-height:44px}h1{font-size:6.7cqw}select:focus-visible{outline:3px solid #c28932;outline-offset:4px}.game{padding-top:max(4.8svh,env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom)}[lang=ar] #message,[lang=hi] #message{line-height:1.65}[lang=hi] .actions button{font-size:4.2cqw}[lang=ar] .score,[lang=hi] .score{line-height:1.6}

body{-webkit-user-select:none;user-select:none} .about p{user-select:text;-webkit-user-select:text}

/* Keep the board and actions visible in short, landscape game iframes. */
@media(min-width:600px) and (max-height:600px){
  .game{width:min(94vw,740px);min-width:0;padding-top:max(8px,env(safe-area-inset-top));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"header header" "board nav" "board score" "board message" "board actions" "about about";gap:8px 20px}
  header{grid-area:header;margin:0}h1{font-size:24px;gap:6px}.brand{width:27px;height:34px}.language{width:112px;font-size:14px;border-radius:10px;padding:0 6px}
  nav{grid-area:nav;margin:0;gap:16px}nav button{width:50%;font-size:17px;padding:4px 0 8px}nav button[aria-pressed=true]:after{height:3px}
  .score{grid-area:score;font-size:14px;margin:0;gap:8px}
  .board{grid-area:board;align-self:center;justify-self:center;width:100%;max-width:calc((100svh - 80px)*1.04);padding:12px;gap:6px;border-radius:16px}.cell{border-radius:9px}
  #message{grid-area:message;margin:0;min-height:2.8em;font-size:16px;line-height:1.4}
  .actions{grid-area:actions;gap:10px;align-self:end}.actions button,[lang=hi] .actions button{min-height:48px;font-size:16px;border-radius:14px;padding:6px}
  footer{display:none}.about{grid-area:about;margin:0 0 8px;font-size:12px}.about summary{min-height:28px}
}