@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,800&display=swap");

:root { --paper:#f4eddd; --cream:#fffaf0; --ink:#17261f; --blue:#2457d6; --coral:#f26b4f; --line:rgba(23,38,31,.18); font-family:"DM Sans",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { min-height:100%; }
body { margin:0; min-height:100vh; background:var(--paper); }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
a { color:inherit; }
.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; }
.eyebrow,.step-label { margin:0 0 14px; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:700; }
.home-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); }
.home-copy { position:relative; overflow:hidden; padding:clamp(36px,7vw,100px); display:flex; flex-direction:column; justify-content:center; background:var(--blue); color:white; }
.home-copy::after { content:""; position:absolute; width:55vw; height:55vw; border:1px solid rgba(255,255,255,.22); border-radius:50%; right:-30vw; bottom:-35vw; box-shadow:0 0 0 7vw rgba(255,255,255,.03),0 0 0 14vw rgba(255,255,255,.03); }
.home-copy h1,.display-heading,.results-hero h1 { font:800 clamp(4.8rem,10vw,9.5rem)/.78 "Fraunces",serif; letter-spacing:-.065em; margin:0; }
.lede { max-width:470px; font-size:clamp(1rem,1.8vw,1.35rem); line-height:1.55; margin:35px 0; }
.mini-board { display:flex; gap:8px; margin-top:20px; }
.mini-board span { display:grid; place-items:center; width:50px; aspect-ratio:1; background:var(--cream); color:var(--ink); border-radius:8px; font:800 1.45rem "Fraunces",serif; transform:rotate(var(--tilt)); box-shadow:0 5px 0 rgba(0,0,0,.2); }
.entry-card { align-self:center; width:min(460px,calc(100% - 48px)); margin:auto; padding:42px; background:var(--cream); border:1px solid var(--line); box-shadow:12px 12px 0 var(--ink); }
.entry-card h2,.compact-card h1 { font:800 2.25rem/1 "Fraunces",serif; margin:0 0 34px; }
.field-label { display:block; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
.text-input,.code-input { width:100%; border:1px solid var(--ink); background:transparent; padding:15px 16px; border-radius:0; outline:none; font-size:1rem; }
.text-input:focus,.code-input:focus { box-shadow:0 0 0 3px rgba(36,87,214,.22); }
.button { border:0; padding:16px 20px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.button:disabled { opacity:.45; cursor:not-allowed; }
.button-primary { width:100%; margin-top:14px; background:var(--coral); color:var(--ink); }
.button-dark { background:var(--ink); color:white; }
.or-rule { display:flex; align-items:center; gap:12px; color:#6d746f; font-size:.75rem; margin:26px 0 14px; }
.or-rule::before,.or-rule::after { content:""; height:1px; background:var(--line); flex:1; }
.join-row { display:grid; grid-template-columns:1fr auto; }
.code-input { text-transform:uppercase; letter-spacing:.32em; font-weight:700; }
.form-error { color:#a72d20; font-size:.85rem; margin:12px 0 0; }
.fine-print { margin:22px 0 0; color:#6d746f; font-size:.72rem; }
.center-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.compact-card { align-self:auto; }
.room-header { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,70px); border-bottom:1px solid var(--line); }
.wordmark { font:800 1.25rem "Fraunces",serif; text-decoration:none; }
.room-meta { display:flex; align-items:center; gap:9px; font-size:.8rem; }
.room-meta strong { margin-left:10px; letter-spacing:.2em; background:var(--ink); color:white; padding:8px 10px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#d18c2e; }.status-dot.connected{background:#38a169}.status-dot.reconnecting{animation:pulse 1s infinite}
@keyframes pulse { 50% { opacity:.25; } }
.room-main { max-width:1180px; margin:auto; padding:clamp(35px,6vw,80px) clamp(20px,5vw,70px); }
.lobby-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(45px,8vw,120px); }
.display-heading { font-size:clamp(4rem,8vw,7rem); }
.share-card { margin-top:50px; display:flex; align-items:center; gap:20px; border-top:1px solid var(--ink); padding-top:20px; max-width:390px; }
.share-card canvas { width:116px!important; height:116px!important; }
.share-card div { display:flex; flex-direction:column; align-items:flex-start; }.share-card span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}.share-card strong{font:800 2.2rem "Fraunces",serif;letter-spacing:.14em}
.text-button { border:0; background:none; padding:4px 0; font-weight:700; text-decoration:underline; cursor:pointer; }
.lobby-panel { background:var(--cream); border:1px solid var(--line); padding:clamp(24px,4vw,45px); }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:16px; border-bottom:1px solid var(--ink); }.section-heading h2{font:800 1.8rem "Fraunces",serif;margin:0}.section-heading span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}
.player-list { list-style:none; margin:0; padding:0; }.player-list li{display:grid;grid-template-columns:28px 38px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.player-list li.offline{opacity:.42}.player-number{font-size:.68rem}.avatar{display:grid;place-items:center;background:var(--blue);color:white;width:34px;aspect-ratio:1;border-radius:50%;font-weight:700}.player-list em{font-style:normal;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--blue)}
.settings { margin-top:32px; }.settings h3{font:700 1rem "Fraunces",serif}.setting-row{min-height:54px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:.85rem}.segmented{display:flex}.segmented button{border:1px solid var(--line);background:transparent;padding:8px 11px;font-size:.75rem;cursor:pointer}.segmented button.active{background:var(--ink);color:white}.setting-row select{background:transparent;border:0;font-weight:700}.start-button{margin-top:25px}.waiting-note{padding:25px 0;color:#68716c;line-height:1.5}
.safe-checkbox{appearance:none;width:38px;height:22px;border:1px solid var(--ink);border-radius:20px;background:transparent;cursor:pointer;position:relative;transition:background .15s}.safe-checkbox::after{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:var(--ink);transition:transform .15s}.safe-checkbox:checked{background:var(--blue)}.safe-checkbox:checked::after{background:white;transform:translateX(16px)}
.rules-card{margin-top:28px;padding:18px;background:rgba(36,87,214,.08);border-left:3px solid var(--blue)}.rules-card strong{font:700 1rem "Fraunces",serif}.rules-card p{margin:8px 0 0;font-size:.76rem;line-height:1.5;color:#4f5b54}
.play-shell { max-width:1080px; margin:auto; padding:25px clamp(16px,5vw,60px) 50px; }.play-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.play-top .eyebrow{margin-bottom:4px}.timer{display:flex;align-items:center;font:800 clamp(2rem,6vw,4.5rem)/1 "Fraunces",serif;letter-spacing:-.04em}.timer span{background:var(--ink);color:white;padding:6px 10px}.timer i{font-style:normal;margin:0 5px}.timer.urgent span{background:var(--coral)}
.board-column { max-width:620px; margin:auto; }.letter-board{display:grid;gap:clamp(6px,1.5vw,12px);padding:clamp(10px,2vw,18px);background:var(--blue);box-shadow:9px 9px 0 var(--ink);touch-action:none;user-select:none;-webkit-user-select:none}.letter-board button{border:0;aspect-ratio:1;background:var(--cream);cursor:pointer;border-radius:10%;box-shadow:inset 0 -5px 0 rgba(23,38,31,.14);font:800 clamp(1.7rem,7vw,3.7rem) "Fraunces",serif;transition:transform .12s,background .12s}.letter-board.board-5 button{font-size:clamp(1.2rem,5vw,2.6rem)}.letter-board.board-6{gap:clamp(4px,1vw,8px)}.letter-board.board-6 button{font-size:clamp(1rem,4vw,2rem)}.letter-board button.selected{background:var(--coral);transform:translateY(-3px);box-shadow:0 0 0 3px var(--ink)}
.trace-word{margin:20px 0;display:grid;grid-template-columns:1fr auto;border-bottom:2px solid var(--ink);min-height:52px;align-items:center}.trace-word span{font:700 1.4rem "Fraunces",serif;text-transform:uppercase;letter-spacing:.05em}.trace-word button,.word-tray form button{border:0;background:var(--ink);color:white;padding:10px 18px;font-weight:700}.trace-word button:disabled{opacity:.3}
.word-tray{max-width:620px;margin:25px auto 0}.word-tray form{display:grid;grid-template-columns:1fr auto}.word-tray form input{min-width:0;border:1px solid var(--ink);background:var(--cream);padding:13px}.found-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.found-words span{background:var(--cream);border:1px solid var(--line);padding:8px 11px;text-transform:uppercase;font-size:.8rem;font-weight:700}.found-words b{font-size:.58rem;margin-right:8px;color:var(--blue)}.found-words p{color:#68716c;font-size:.8rem}
.results-shell{max-width:980px;margin:auto;padding:clamp(40px,7vw,90px) clamp(20px,5vw,60px)}.results-hero{max-width:760px}.results-hero h1{font-size:clamp(3.6rem,9vw,7.5rem)}.results-hero>p:last-child{max-width:480px;line-height:1.6}.score-card{background:var(--cream);border:1px solid var(--line);padding:clamp(20px,4vw,38px);margin-top:50px}.score-list{list-style:none;padding:0;margin:0}.score-list li{display:grid;grid-template-columns:45px 1fr auto;align-items:center;border-bottom:1px solid var(--line);padding:16px 8px}.score-list li>span{font:800 1.4rem "Fraunces",serif}.score-list li>b{font:800 2rem "Fraunces",serif}.score-list li.is-me{color:var(--blue)}
.word-review{margin-top:40px}.word-review h2{font:800 1.8rem "Fraunces",serif}.word-review>div{display:flex;flex-wrap:wrap;gap:9px}.word-review span{padding:9px 12px;background:var(--cream);text-transform:uppercase;font-size:.8rem}.word-review span b{margin-left:10px}.word-review .lost{text-decoration:line-through;opacity:.48}.word-review .won b{color:var(--blue)}.results-actions{display:flex;align-items:center;gap:25px;margin-top:35px}.results-actions .button{width:auto;margin:0}.results-actions p{color:#68716c}.loading-mark{text-align:center}.loading-mark span{display:grid;place-items:center;margin:auto;width:72px;aspect-ratio:1;background:var(--blue);color:white;font:800 2.4rem "Fraunces",serif;animation:tilt 1s ease-in-out infinite alternate}.loading-mark p{font-weight:700}.loading-mark a{font-size:.8rem}@keyframes tilt{to{transform:rotate(7deg)}}
.board-review,.possible-words{margin-top:40px;border-top:1px solid var(--line);padding-top:28px}.board-review .section-heading h2{margin:3px 0 0;font:800 1.8rem "Fraunces",serif}.board-review .text-button{background:none;border:0;cursor:pointer}.result-board{display:grid;gap:8px;width:min(100%,480px);margin-top:22px;padding:12px;background:var(--ink);box-shadow:6px 6px 0 var(--blue)}.result-board span{display:grid;place-items:center;aspect-ratio:1;background:var(--cream);font:800 clamp(1rem,4vw,2rem) "Fraunces",serif}.possible-words summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none}.possible-words summary::-webkit-details-marker{display:none}.possible-words summary span{display:grid;gap:5px}.possible-words summary b{font:800 1.8rem "Fraunces",serif}.possible-words summary small{color:#68716c}.possible-words summary>strong{display:grid;place-items:center;min-width:54px;height:40px;background:var(--ink);color:white}.possibility-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:8px;margin-top:22px}.possibility-list span{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--cream);text-transform:uppercase;font-size:.8rem}.possibility-list b{color:var(--blue)}
@media(max-width:760px){.home-shell{display:block}.home-copy{min-height:52vh;padding:45px 26px}.home-copy h1{font-size:clamp(4.4rem,23vw,7rem)}.home-copy .lede{margin:22px 0 8px}.mini-board span{width:39px}.entry-card{width:calc(100% - 32px);margin:28px 16px 44px;padding:27px;box-shadow:7px 7px 0 var(--ink)}.lobby-grid{grid-template-columns:1fr}.display-heading{font-size:4.3rem}.share-card{margin-top:30px}.room-meta{font-size:0}.room-meta strong{font-size:.8rem}.lobby-panel{padding:22px}.play-shell{padding-top:16px}.play-top .eyebrow{display:none}.letter-board{box-shadow:6px 6px 0 var(--ink)}.results-actions{align-items:flex-start;flex-direction:column}.results-hero h1{font-size:3.8rem}.score-card{margin-top:32px}}