@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#20252b;--muted:#73787b;--paper:#f4f0e8;--white:#fffdf8;--red:#e64f3d;--teal:#277f78;--line:#d9d4c9;--shadow:0 20px 60px #1c242814}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Space Grotesk',sans-serif}button,input{font:inherit}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed;opacity:.55}.home-page{min-height:100vh;display:grid;place-items:center;padding:28px;background:linear-gradient(135deg,#f4f0e8 0 63%,#dce9e3 63%)}.home-shell{display:grid;grid-template-columns:1.1fr .9fr;max-width:1000px;width:100%;box-shadow:var(--shadow);background:var(--white);min-height:620px}.intro-panel{padding:70px 66px;background:var(--teal);color:#f8f4e9;position:relative;overflow:hidden}.intro-panel:after{content:'';position:absolute;width:250px;height:250px;border:1px solid #ffffff35;border-radius:50%;right:-90px;bottom:-70px}.eyebrow,.section-title span{font:500 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:1.5px;color:var(--red)}.intro-panel .eyebrow{color:#e8c1a8}.intro-panel h1{font-size:clamp(52px,7vw,84px);line-height:.9;letter-spacing:-2px;margin:52px 0 28px}.intro-panel h1 em{font-style:normal;color:#f3c37e}.intro-panel p{max-width:280px;color:#d7e5df;line-height:1.6}.mark{position:absolute;bottom:64px;display:flex;gap:10px}.mark span{width:44px;height:44px;border:1px solid #ffffff55;display:grid;place-items:center;font-size:20px}.mark span:nth-child(2){color:#f3c37e}.entry-panel{padding:70px 58px}.panel-heading{display:flex;align-items:center;gap:15px}.step{font:12px 'DM Mono',monospace;color:var(--red)}h2{font-size:25px;margin:0}.game-form{display:grid;gap:9px;margin-top:34px}.game-form label{font-size:12px;color:var(--muted)}input{background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 2px;outline:0;color:var(--ink)}input:focus{border-color:var(--teal)}.code-input{text-transform:uppercase;letter-spacing:4px;font-family:'DM Mono',monospace}.primary-button,.secondary-button,.copy-button,.small-button{padding:14px 17px;display:flex;align-items:center;justify-content:space-between;gap:20px;transition:transform .2s,background .2s}.primary-button{background:var(--red);color:#fff;margin-top:18px}.secondary-button{background:var(--teal);color:#fff;margin-top:18px}.primary-button:hover,.secondary-button:hover,.copy-button:hover{transform:translateY(-2px)}.divider{display:flex;align-items:center;gap:12px;margin-top:39px;color:var(--muted);font:11px 'DM Mono',monospace}.divider:before,.divider:after{content:'';height:1px;background:var(--line);flex:1}.feedback{color:var(--red);font-size:13px;min-height:20px}.room-page{min-height:100vh}.topbar{height:76px;padding:0 clamp(20px,5vw,70px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{color:var(--ink);text-decoration:none;font-weight:700}.brand span{color:var(--red);margin-right:8px}.icon-button{background:transparent;color:var(--muted)}.room-layout{max-width:1180px;margin:auto;padding:52px 30px;display:grid;grid-template-columns:minmax(400px,1fr) 350px;gap:72px}.room-meta{display:flex;justify-content:space-between;align-items:end}.room-meta h1{font:500 36px 'DM Mono',monospace;margin:8px 0}.copy-button{background:transparent;border-bottom:1px solid var(--ink);padding:8px 0}.notice{color:var(--teal);min-height:22px}.players{display:flex;align-items:center;gap:15px;margin:32px 0}.player-chip{display:flex;align-items:center;gap:10px;flex:1;padding:12px 14px;border:1px solid var(--line);background:#ffffff55}.player-chip.active{border-color:var(--teal);background:#dce9e3}.player-chip i{width:8px;height:8px;background:var(--line);border-radius:50%}.player-chip.active i{background:var(--teal)}.player-chip span{display:grid;gap:3px;min-width:0}.player-chip b{font-size:14px;overflow:hidden;text-overflow:ellipsis}.player-chip small{color:var(--muted);font-size:10px}.player-chip strong{margin-left:auto;font:18px 'DM Mono',monospace}.player-chip:last-child strong{color:var(--red)}.vs{font:11px 'DM Mono',monospace;color:var(--muted)}.board{display:grid;grid-template-columns:repeat(3,1fr);aspect-ratio:1;max-width:510px;margin:30px auto 20px;border:1px solid var(--ink);background:var(--ink);gap:1px}.cell{background:var(--white);font:500 clamp(44px,9vw,90px) 'Space Grotesk',sans-serif;color:var(--teal);display:grid;place-items:center;aspect-ratio:1;transition:background .2s,transform .2s}.cell:hover:not(:disabled){background:#e8f0eb}.cell.mark-o{color:var(--red)}.cell:not(:empty){animation:pop .25s ease-out}.turn-label{text-align:center;font-weight:600;min-height:25px}.restart-button{margin:20px auto 0}.voice-panel,.chat-panel{border-top:1px solid var(--ink);padding:20px 0}.chat-panel{margin-top:40px}.section-title{display:flex;gap:12px;align-items:baseline}.section-title h2{font-size:19px}.voice-panel p{font-size:13px;color:var(--muted);line-height:1.5}.voice-actions{display:flex;gap:8px}.voice-actions .secondary-button{margin:0;flex:1;font-size:12px}.small-button{background:#e5e1d8;padding:11px;min-width:42px;justify-content:center}.messages{height:270px;overflow-y:auto;margin:20px 0;padding-right:8px}.message{border-bottom:1px solid var(--line);padding:10px 0}.message b{font-size:12px}.message p{font-size:13px;margin:5px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.message-form{display:flex;border-bottom:1px solid var(--ink)}.message-form input{border:0;flex:1}.message-form button{background:transparent;font-size:22px;padding:8px}.room-page audio{display:none}@keyframes pop{0%{transform:scale(.65);opacity:.2}100%{transform:scale(1);opacity:1}}@media(max-width:760px){.home-page{padding:0;background:var(--paper)}.home-shell{display:block;min-height:100vh}.intro-panel{padding:42px 28px;height:330px}.intro-panel h1{font-size:58px;margin:36px 0 0}.intro-panel p,.mark{display:none}.entry-panel{padding:40px 28px}.room-layout{display:block;padding:30px 20px}.room-meta{align-items:start}.room-meta h1{font-size:27px}.copy-button{font-size:11px}.players{gap:6px}.player-chip{padding:9px 7px}.player-chip b{font-size:12px}.vs{font-size:9px}.side-area{margin-top:52px}.chat-panel{margin-top:35px}.messages{height:200px}}