:root { --green:#087a5b; --deep:#055a44; --ink:#17352d; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:white; background:radial-gradient(circle at 50% 0%,#159371 0,var(--green) 38%,var(--deep) 100%); font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,sans-serif; }
button { font:inherit; }
.game-shell { width:min(100%,700px); min-height:100vh; margin:0 auto; padding:20px 18px 28px; display:flex; flex-direction:column; align-items:center; }
.topbar { width:100%; display:grid; grid-template-columns:48px 1fr 70px; align-items:center; margin-bottom:18px; }
.brand { text-align:center; line-height:1; }
.brand span { display:block; font-weight:950; font-size:25px; letter-spacing:.045em; text-shadow:0 2px 0 rgba(0,0,0,.12); }
.brand small { display:block; margin-top:6px; font-size:10px; font-weight:850; letter-spacing:.14em; opacity:.88; }
.icon-button { width:42px; height:42px; border:1px solid rgba(255,255,255,.25); border-radius:13px; background:rgba(0,0,0,.12); color:white; font-size:24px; cursor:pointer; }
.time-help { justify-self:end; display:flex; align-items:center; gap:8px; border:0; color:white; background:transparent; cursor:pointer; font-size:13px; font-variant-numeric:tabular-nums; font-weight:800; }
.time-help span { opacity:.78; }
.time-help b { width:29px; height:29px; display:grid; place-items:center; border-radius:10px; background:rgba(0,0,0,.15); font-size:16px; }
.game-card { width:100%; min-height:760px; border:1px solid rgba(255,255,255,.12); border-radius:32px; background:rgba(0,64,48,.24); padding:25px 22px; box-shadow:0 24px 60px rgba(0,45,34,.26),inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(5px); }
.status-line { text-align:center; font-size:15px; letter-spacing:.08em; font-weight:800; }
.status-line strong { font-size:25px; margin-right:5px; }
.message { height:22px; margin:8px 0 10px; text-align:center; color:#d4f5e9; font-size:13px; font-weight:650; }
.stack { width:min(100%,620px); aspect-ratio:1/1; position:relative; margin:0 auto 24px; overflow:hidden; border-radius:25px; background:#0f7055; box-shadow:inset 0 2px 12px rgba(0,35,25,.18); }
.tile { position:absolute; left:var(--tile-x); top:var(--tile-y); z-index:calc(10 + var(--tile-layer)); width:16.48%; aspect-ratio:1/1; border:0; border-radius:13%; display:grid; place-items:center; font-size:clamp(25px,7.1vw,54px); line-height:1; font-weight:900; color:#28251d; box-shadow:0 .85vw 0 #6f644e,0 1.3vw 1.25vw rgba(27,38,31,.32); transition:transform .16s ease,background .18s ease,color .18s ease; }
.tile-exposed { background:linear-gradient(145deg,#fff9e8,#f4ecd5); cursor:pointer; }
.tile-exposed:hover { transform:translateY(-3px); }
.tile-exposed:active { transform:translateY(4px); box-shadow:0 .3vw 0 #71654e,0 .7vw .9vw rgba(27,38,31,.28); }
.tile-covered { background:linear-gradient(145deg,#d5c6a2,#c4b48d); color:#2d291f; }
.rack { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin:0 auto; max-width:330px; }
.slot { height:58px; border:2px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(0,55,42,.28); color:white; font-size:27px; font-weight:900; cursor:pointer; box-shadow:inset 0 2px 5px rgba(0,30,24,.12); }
.slot:not(:empty) { background:#fffdf8; color:var(--ink); border-color:white; box-shadow:0 4px 0 rgba(0,43,32,.28); }
.rack-error .slot:not(:empty) { color:#8b241c; background:#ffe1db; border-color:#ffd1c9; animation:rack-shake .32s ease-in-out 2; }
@keyframes rack-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.hint-button,.primary-button { display:block; margin:22px auto 0; border:0; border-radius:999px; padding:13px 22px; color:white; background:rgba(0,50,38,.32); font-size:12px; font-weight:900; letter-spacing:.08em; cursor:pointer; }
.hint-button span { margin-right:7px; }
.hint-button:hover { background:rgba(0,45,34,.5); }
.result { min-height:590px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.result-mark { width:92px; height:92px; display:grid; place-items:center; border-radius:50%; background:#ffce55; color:#78540a; font-size:52px; font-weight:950; box-shadow:0 9px 0 #d7a52c; }
.eyebrow { margin:35px 0 5px; font-size:11px; font-weight:900; letter-spacing:.16em; opacity:.78; }
.result h1 { margin:4px 0; font-size:46px; line-height:1; }
.result>p:not(.eyebrow) { color:#d3f2e7; }
.stars { margin:16px 0 22px; color:#ffd568; font-size:31px; letter-spacing:4px; }
.word-list { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.word-list span { padding:7px 11px; border-radius:9px; background:rgba(255,255,255,.12); font-size:12px; font-weight:850; letter-spacing:.08em; }
.primary-button { background:#fffdf8; color:var(--deep); }
.text-button { margin-top:14px; border:0; border-bottom:1px solid rgba(255,255,255,.4); padding:3px; background:transparent; color:white; cursor:pointer; font-size:12px; }
footer { padding:18px 0 0; font-size:11px; opacity:.65; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(0,35,26,.72); backdrop-filter:blur(7px); }
.help-modal { position:relative; width:min(100%,430px); border-radius:28px; padding:32px; background:#fffdf8; color:var(--ink); box-shadow:0 26px 70px rgba(0,20,15,.38); }
.help-modal .eyebrow { margin:0 0 8px; color:#0b7c5d; }
.help-modal h2 { margin:0 0 20px; font-size:30px; }
.help-modal ol { margin:0; padding-left:22px; }
.help-modal li { margin:0 0 13px; padding-left:7px; line-height:1.45; }
.help-note { margin:21px 0 0; border-radius:13px; padding:13px; background:#e9f5f0; color:#47625a; font-size:12px; line-height:1.5; }
.help-modal .primary-button { background:var(--deep); color:white; }
.close-button { position:absolute; top:15px; right:17px; width:34px; height:34px; border:0; border-radius:50%; background:#edf2ef; color:#315047; font-size:25px; cursor:pointer; }
noscript { display:block; margin:40px auto; max-width:600px; padding:20px; text-align:center; }
@media (max-width:430px) { .game-shell{padding:12px 8px 20px}.topbar{margin-bottom:10px}.game-card{min-height:620px;padding:18px 7px;border-radius:25px}.brand span{font-size:21px}.status-line strong{font-size:22px}.message{margin-bottom:5px}.stack{margin-bottom:15px}.rack{padding:0 7px}.tile{font-size:clamp(23px,7.2vw,34px);box-shadow:0 5px 0 #6f644e,0 8px 8px rgba(27,38,31,.3)} }
@media (prefers-reduced-motion:reduce) { .tile{transition:none} }