:root { color-scheme: light; font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; background:#f6f1e7; color:#173c37; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 10% 0%,#fff9e9 0 22%,transparent 42%),#e2f0e6; }
.app { width:min(720px,100%); min-height:100vh; margin:auto; padding:max(24px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom)); }
header { text-align:center; } .eyebrow { text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:.72rem; color:#b06d36; margin:0 0 5px; }
h1 { font-family:Georgia,serif; font-size:clamp(2.15rem,8vw,3.35rem); margin:0; color:#164a45; } .instructions { margin:7px 0 20px; font-size:1.03rem; }
.scorebar { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:18px; } .scorebar div { background:#fffdf8; border:2px solid #d5e2d4; padding:10px 7px; border-radius:14px; text-align:center; box-shadow:0 3px 0 #bfd2c1; }
.scorebar span { display:block; font-size:.72rem; color:#54736b; } .scorebar strong { display:block; font-size:1.45rem; margin-top:1px; }
.progress-card { background:#164a45; color:#fff; padding:13px 15px 10px; border-radius:16px; margin:-7px 0 18px; box-shadow:0 4px 0 #0d302c; }.progress-title { display:flex; justify-content:space-between; align-items:center; }.progress-title strong { font-size:1.05rem; }.progress-title span:first-child { background:#f6bd60; color:#57380e; font-size:.72rem; font-weight:900; padding:4px 8px; border-radius:99px; }.xp-track { height:10px; border-radius:99px; background:#0d302c; overflow:hidden; margin:10px 0 5px; }.xp-fill { height:100%; width:0; background:linear-gradient(90deg,#f6bd60,#e77d59); transition:width .35s ease; }.progress-card p { font-size:.72rem; margin:0; color:#d9eee3; }
.board { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:12px; border-radius:22px; background:#77a993; box-shadow:inset 0 0 0 4px #457c6d, 0 8px 18px #376a5a44; }
.tile { position:relative; aspect-ratio:.76; border:4px solid #fffaf0; border-radius:14px; overflow:hidden; padding:0; background:#fff; box-shadow:0 5px 0 #c9bca5; cursor:pointer; transition:transform .14s,opacity .18s; touch-action:manipulation; }
.tile:active { transform:translateY(3px); box-shadow:0 2px 0 #c9bca5; } .tile.selected { outline:5px solid #f6bd60; transform:translateY(-4px) scale(1.03); } .tile.hint { outline:5px solid #e77d59; animation:pulse .8s 2; }
.tile.cleared { opacity:0; pointer-events:none; transform:scale(.7); } .tile img { width:100%; height:100%; object-fit:cover; display:block; } .tile span { position:absolute; left:5px; bottom:5px; background:#164a45e8; color:#fff; font-size:.7rem; border-radius:99px; padding:3px 7px; font-weight:800; }
.message { min-height:1.6em; text-align:center; font-weight:700; margin:18px 0 12px; }.controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.controls .primary { grid-column:1/-1; }
button { font:inherit; font-weight:800; min-height:52px; border-radius:14px; border:0; cursor:pointer; touch-action:manipulation; }.primary { color:#fff; background:#d76a48; box-shadow:0 4px 0 #aa4e36; }.secondary { background:#fffdf8; color:#164a45; border:2px solid #bcd4c3; }
.modal { position:fixed; inset:0; display:grid; place-items:center; padding:24px; background:#123e36aa; }.dialog { max-width:360px; text-align:center; background:#fffdf7; border-radius:24px; padding:28px; box-shadow:0 12px 40px #0005; }.dialog h2 { margin:0; font-family:Georgia,serif; font-size:1.8rem; }.dialog .primary { width:100%; margin-top:12px; }
@keyframes pulse { 50% { transform:scale(1.05); } } @media (min-width:600px) { .board { grid-template-columns:repeat(6,1fr); gap:10px; } }