:root{--felt:#155342;--felt-dark:#0d382f;--cream:#fffaf0;--gold:#edbd55;--gold-dark:#8b5b0c;--red:#a82935;--ink:#26332f;--line:rgba(255,255,255,.38);--shadow:0 8px 20px rgba(4,24,19,.28);--card-w:clamp(72px,10vw,120px);--card-h:calc(var(--card-w)*1.35)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--felt-dark);font-family:Inter,ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#fff}button,select{font:inherit}.game-shell{min-height:100vh;background:radial-gradient(circle at 50% 25%,#25745c 0,var(--felt) 42%,#0d3a30 100%);display:flex;flex-direction:column}.topbar{min-height:70px;display:flex;align-items:center;gap:22px;padding:10px clamp(12px,3vw,38px);background:rgba(5,32,26,.7);border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 3px 12px rgba(0,0,0,.2)}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:clamp(16px,2vw,23px);white-space:nowrap}.brand-mark{display:grid;place-items:center;width:38px;height:46px;background:var(--cream);color:var(--red);border-radius:6px;box-shadow:0 3px 8px #0005;transform:rotate(-4deg)}.stats{display:flex;flex:1;justify-content:center;gap:clamp(14px,4vw,60px)}.stats div{display:flex;flex-direction:column;text-align:center}.stats small{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:#bfdbd3}.stats strong{font-size:16px}.icon-button{border:1px solid #ffffff42;background:#ffffff12;color:white;border-radius:10px;width:44px;height:44px;font-size:25px;cursor:pointer}.board{width:min(1100px,100%);margin:auto;padding:clamp(10px,2vw,24px);flex:1}.section-heading{display:flex;justify-content:space-between;align-items:baseline;margin:0 3px 9px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:#d5ebe4}.section-heading small{font-weight:500;letter-spacing:0;text-transform:none;color:#a9c9bf}.active-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(7px,1.8vw,20px)}.slot{height:clamp(128px,17vw,190px);border:2px dashed var(--line);border-radius:14px;position:relative;display:flex;align-items:flex-start;justify-content:center;transition:.18s;background:rgba(0,0,0,.06)}.slot.empty::before{content:"Category";position:absolute;top:43%;color:#b6d2c8;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.slot.empty::after{content:"+";position:absolute;top:17%;font-size:35px;color:#ffffff57}.slot.legal{border-color:#ffe294;background:#fff2a51c;box-shadow:0 0 0 4px #fbd66a29}.slot.invalid{animation:shake .28s}.category-card,.word-card,.play-card{width:var(--card-w);height:var(--card-h);border-radius:10px;border:2px solid #ede3cb;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;user-select:none;touch-action:none;cursor:pointer}.category-card{background:linear-gradient(145deg,#ffe8a1,#e7ad38);border-color:#ffe8a3;color:#56370b;font-weight:800}.category-card .icon{font-size:28px;margin-bottom:5px}.category-card .progress{position:absolute;bottom:7px;background:#6c430e;color:#fff;border-radius:12px;padding:2px 8px;font-size:10px}.slot>.category-card{margin-top:4px}.matched-stack{position:absolute;left:50%;top:52px;transform:translateX(-50%);width:var(--card-w);height:calc(var(--card-h)*.65);pointer-events:none}.match-chip{position:absolute;width:100%;height:42px;border-radius:7px;background:var(--cream);border:1px solid #dfd2b4;color:var(--ink);box-shadow:0 4px 7px #0003;display:grid;place-items:center;font-size:11px;font-weight:800}.word-card,.play-card.word{background:linear-gradient(145deg,#fffdf8,#eee3ca);color:var(--ink)}.card-label{font-size:clamp(12px,1.5vw,17px);font-weight:800;padding:4px;overflow-wrap:anywhere}.card-kind{position:absolute;top:7px;font-size:8px;text-transform:uppercase;letter-spacing:.12em;opacity:.62}.card-suit{position:absolute;bottom:6px;right:8px;color:var(--red);font-size:17px}.tableau-area{margin-top:clamp(15px,2vw,25px)}.tableau{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,5vw,65px);justify-items:center;min-height:calc(var(--card-h) + 26px)}.pile{width:var(--card-w);height:calc(var(--card-h) + 24px);position:relative}.pile-card{position:absolute;left:0;top:0}.pile-card:nth-last-child(2){top:8px}.pile-card:last-child{top:16px}.card-back{background-color:var(--red);background-image:radial-gradient(#f2c8bd 1.2px,transparent 1.2px),radial-gradient(#f2c8bd 1.2px,#9f2633 1.2px);background-position:0 0,6px 6px;background-size:12px 12px;border:4px solid #f6e8d4;box-shadow:var(--shadow);color:#fff}.pile-card.card-back{width:var(--card-w);height:var(--card-h);border-radius:10px}.play-card.selected{outline:4px solid #9fe7ff;transform:translateY(-5px)}.play-card.hint-source{animation:pulse 1s infinite;outline:4px solid #ffe477}.hint-target{animation:pulse 1s infinite;box-shadow:0 0 0 5px #ffe477}.draw-area{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,32px);margin-top:17px;min-height:120px}.draw-stack{position:relative;width:82px;height:105px;border-radius:9px;cursor:pointer}.draw-stack:disabled{opacity:.15;cursor:default}.back-emblem{display:grid;place-items:center;margin:auto;border:2px solid #f7d9cc;border-radius:50%;width:40px;height:40px;font-weight:900}.pile-count{position:absolute;bottom:-21px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px}.draw-card-space{width:82px;height:105px}.draw-card-space .play-card{width:82px;height:105px}.draw-help{display:flex;flex-direction:column;max-width:245px;color:#d3e8e1;font-size:11px;line-height:1.35}.draw-help strong{font-size:13px;color:#fff}.controls{position:sticky;bottom:0;z-index:5;display:flex;justify-content:center;gap:8px;padding:9px max(10px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom));background:rgba(7,39,32,.95);border-top:1px solid #ffffff24}.controls button,.modal-actions button,.settings-card button{min-height:44px;padding:7px 18px;border:1px solid #ffffff32;border-radius:9px;background:#ffffff12;color:#fff;cursor:pointer;font-weight:700}.controls button span{margin-right:6px;color:#f5d475}.controls button:disabled{opacity:.38}.toast{position:fixed;z-index:20;left:50%;bottom:82px;transform:translate(-50%,20px);background:#1b2925;color:#fff;padding:10px 18px;border-radius:24px;opacity:0;pointer-events:none;transition:.2s;box-shadow:var(--shadow);font-size:13px}.toast.show{opacity:1;transform:translate(-50%,0)}.modal{position:fixed;inset:0;z-index:30;background:#061b16c9;display:grid;place-items:center;padding:20px}.modal.hidden{display:none}.modal-card{width:min(430px,100%);background:#fffaf0;color:var(--ink);border-radius:20px;padding:28px;text-align:center;box-shadow:0 22px 60px #0008}.modal-crown{font-size:40px;color:#d79b22}.modal-card h2{font-size:28px;margin:4px}.modal-stats{display:flex;justify-content:center;gap:30px;margin:20px 0}.modal-stats div{display:flex;flex-direction:column}.modal-stats strong{font-size:22px;color:#8f5b08}.modal-actions{display:flex;gap:8px;justify-content:center}.modal-actions button,.settings-card button{background:#174f40;color:white}.modal-actions .primary,.settings-card .primary{background:#d49725}.settings-card{display:flex;flex-direction:column;gap:15px;text-align:left}.settings-card label{display:flex;justify-content:space-between;align-items:center}.settings-card select{padding:8px;border-radius:7px}.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}button:focus-visible,.play-card:focus-visible,.slot:focus-visible{outline:4px solid #a9edff;outline-offset:3px}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes pulse{50%{filter:brightness(1.25);transform:translateY(-5px)}}
@media(max-width:650px){:root{--card-w:clamp(64px,19vw,92px)}.topbar{gap:8px;flex-wrap:wrap}.brand{font-size:15px}.brand-mark{width:28px;height:34px}.stats{order:3;width:100%;gap:0;justify-content:space-around}.stats small{font-size:8px}.stats strong{font-size:13px}.section-heading small,.draw-help{display:none}.active-slots{gap:5px}.slot{height:130px}.category-card .icon{font-size:20px}.tableau{gap:8px}.controls button{padding:6px 10px;font-size:12px}.controls button span{display:block;margin:0}.draw-area{margin-top:7px}.board{padding-bottom:8px}}
@media(max-height:650px) and (orientation:landscape){:root{--card-w:66px}.topbar{min-height:50px}.brand-mark{height:30px}.stats small{display:none}.board{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}.active-area{grid-column:1}.tableau-area{grid-column:1;margin-top:5px}.draw-area{grid-column:2;grid-row:1/3}.slot{height:105px}.controls{position:fixed;right:0;bottom:0;flex-direction:column;background:#092e27}.controls button{font-size:0;width:48px}.controls button span{font-size:18px;margin:0}.game-shell{padding-right:54px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.play-card.category{background:linear-gradient(145deg,#ffe8a1,#e7ad38);border-color:#ffe8a3;color:#56370b;font-weight:800}
.top-draw{justify-content:flex-start;margin:0 0 20px;padding:12px 18px;background:#0b382e66;border:1px solid #ffffff1c;border-radius:16px}.reveal-place:empty,.reveal-place:not(:has(.play-card)){border:2px dashed #ffffff61;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#c4ded5;text-align:center}.reveal-place small{font-size:9px;max-width:60px}.reveal-icon{font-size:28px;line-height:1}.category-row{display:grid;grid-template-columns:64px 1fr;gap:12px}.category-row .active-slots{min-width:0}.completed-pill{min-height:clamp(128px,17vw,190px);border-radius:32px;background:linear-gradient(#edbd55,#b47718);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;padding:10px 5px;color:#422b08;text-align:center}.completed-pill>strong{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff8df;font-size:18px}.completed-pill>span{font-size:8px;font-weight:900;text-transform:uppercase;writing-mode:vertical-rl;margin:5px 0}.completed-pill #completed-list{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}.completed-pill #completed-list span{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#245d49;color:white;font-size:9px}
@media(max-width:650px){.category-row{grid-template-columns:42px 1fr;gap:5px}.completed-pill{border-radius:22px;padding:7px 3px}.completed-pill>strong{width:28px;height:28px;font-size:14px}.top-draw{padding:8px 10px;margin-bottom:12px}.top-draw .draw-help{display:flex}.top-draw .draw-stack,.top-draw .draw-card-space{width:70px;height:92px}}
.category-row{grid-template-columns:var(--card-w) 1fr;align-items:start}.category-row .active-slots{justify-items:center}.slot{width:var(--card-w);height:var(--card-h)}.completed-pill{width:var(--card-w);height:var(--card-h);min-height:0;border-radius:10px;justify-content:flex-start}.completed-pill>span{writing-mode:horizontal-tb;margin:5px 0}.under-count{position:absolute;top:calc(var(--card-h) + 20px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 8px;border-radius:10px;background:#082d25a8;color:#d7ebe5;font-size:10px;font-weight:800}.tableau{padding-bottom:24px}
@media(max-width:650px){.category-row{grid-template-columns:var(--card-w) 1fr}.completed-pill{border-radius:9px}.completed-pill>span{font-size:7px}.under-count{font-size:8px;padding:2px 5px}.active-slots{justify-items:center}}
.tableau{align-items:start}.pile-card.card-back{box-shadow:0 3px 7px rgba(0,0,0,.3)}.pile .play-card{transition:transform .18s,filter .18s}.pile .play-card:hover{transform:translateY(-3px)}
.pile.empty-tableau{height:var(--card-h)!important;border:2px dashed #ffffff55;border-radius:10px;background:#082d2529}.pile.empty-tableau::before{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:#ffffff6b;font-size:34px}
.draw-card-space .card-label{max-width:100%;padding:3px;font-size:clamp(9px,1vw,12px);line-height:1.08;letter-spacing:-.02em;overflow-wrap:anywhere;word-break:normal}.draw-card-space .card-kind{font-size:7px}
.group-count{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:10px;background:#6c430e;color:#fff;font-size:9px;font-weight:900}
