:root { --ink:#262626; --paper:#fffef9; --yellow:#f5b300; --green:#cfe1d5; --muted:#76736b; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Noto Sans SC","Segoe UI",sans-serif; min-height:100dvh; } button,input,textarea { font:inherit; } .topbar { min-height:68px; padding:15px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1.5px solid var(--ink); } .brand { display:flex; align-items:center; gap:7px; color:var(--ink); text-decoration:none; font-weight:800; font-size:16px; }.brand img { width:30px; height:30px; object-fit:contain; }.language { border:1.5px solid var(--ink); background:var(--paper); border-radius:99px; padding:6px 10px; font-size:12px; font-weight:800; cursor:pointer; }
main { width:min(100%,560px); margin:auto; padding:38px 20px 46px; }.eyebrow { margin:0 0 15px; font-size:12px; font-weight:800; letter-spacing:.1em; }.title { font-size:clamp(39px,12vw,58px); line-height:1.15; letter-spacing:-.075em; margin:0 0 18px; }.title em { font-style:normal; background:linear-gradient(transparent 67%,var(--yellow) 67%); }.lead { font-size:16px; line-height:1.75; margin:0; }.subtle,.flow { color:var(--muted); font-size:14px; line-height:1.65; }.flow { border-left:3px solid var(--yellow); padding-left:12px; margin:20px 0 25px; }.stack { display:grid; gap:12px; margin-top:30px; }.button { min-height:53px; border:1.5px solid var(--ink); border-radius:5px; padding:13px 16px; background:var(--paper); color:var(--ink); text-decoration:none; text-align:center; font-weight:800; cursor:pointer; }.button:hover { box-shadow:4px 4px 0 var(--ink); transform:translate(-2px,-2px); }.button.primary { background:var(--yellow); }.button.green { background:var(--green); }.button.ghost { background:transparent; }.join { margin-top:26px; padding-top:26px; border-top:1.5px solid var(--ink); }.join label,.field-label { display:block; font-size:13px; font-weight:800; margin-bottom:8px; }.join-row { display:flex; gap:8px; }.join-row input { min-width:0; flex:1; }.text-input,.score-input,.message-input { width:100%; border:1.5px solid var(--ink); border-radius:5px; background:var(--paper); color:var(--ink); padding:14px; outline:none; }.text-input:focus,.score-input:focus,.message-input:focus { box-shadow:3px 3px 0 var(--yellow); }.room-code { letter-spacing:.16em; text-transform:uppercase; font-weight:800; }.share-box { margin:27px 0; padding:20px; border:1.5px solid var(--ink); background:var(--green); border-radius:5px; }.share-code { font-size:48px; line-height:1; letter-spacing:.08em; font-weight:800; margin:10px 0 16px; }.copy-url { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid var(--ink); background:var(--paper); padding:10px; font-size:12px; }.room-meta { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; margin-bottom:33px; }.room-meta b { background:var(--yellow); padding:6px 9px; border-radius:3px; letter-spacing:.12em; }.progress { display:flex; gap:5px; margin:18px 0 29px; }.progress span { height:7px; flex:1; border:1px solid var(--ink); background:var(--paper); }.progress span.active { background:var(--yellow); }.game-card { border:1.5px solid var(--ink); border-radius:5px; padding:22px 19px; }.game-card h2 { font-size:28px; letter-spacing:-.06em; line-height:1.2; margin:0 0 12px; }.score-input { font-size:42px; font-weight:800; letter-spacing:-.06em; padding:13px 15px; }.score-input::-webkit-outer-spin-button,.score-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }.hint { margin:8px 0 0; color:var(--muted); font-size:12px; }.waiting { text-align:center; padding:44px 18px; }.dots { display:flex; justify-content:center; gap:7px; margin-bottom:20px; }.dots i { display:block; width:9px; height:9px; background:var(--yellow); border:1px solid var(--ink); border-radius:50%; animation:bounce 1s infinite alternate; }.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes bounce{to{transform:translateY(-9px)}}.gap { background:var(--yellow); border:1.5px solid var(--ink); border-radius:5px; padding:26px 18px; text-align:center; margin-bottom:18px; }.gap strong { display:block; font-size:58px; line-height:1; letter-spacing:-.08em; margin:8px 0; }.message-input { resize:vertical; min-height:132px; line-height:1.6; }.counter { text-align:right; color:var(--muted); font-size:12px; margin:6px 0 15px; }.exit { margin-top:14px; color:var(--ink); border:0; border-bottom:1px solid var(--ink); padding:4px 0; background:transparent; font-size:13px; cursor:pointer; }.history,.score-history { margin-top:25px; }.history h3,.score-history h3 { font-size:17px; margin:0 0 12px; }.score-history { border-top:1.5px solid var(--ink); padding-top:20px; }.score-history span { display:inline-flex; flex-direction:column; gap:5px; min-width:74px; margin:0 8px 8px 0; padding:9px; border:1.5px solid var(--ink); font-size:11px; }.score-history b { font-size:25px; line-height:1; }.reflection { padding:14px; border-left:3px solid var(--yellow); background:#f3f1e9; margin:9px 0; font-size:14px; line-height:1.65; }.reflection small { display:block; font-size:11px; font-weight:800; margin-bottom:3px; }.end-mark { width:80px; height:80px; display:grid; place-items:center; border:1.5px solid var(--ink); border-radius:50%; background:var(--yellow); font-size:34px; margin-bottom:24px; }.error { padding:12px; border:1.5px solid var(--ink); background:var(--yellow); font-size:14px; margin-top:16px; }.hidden { display:none; } @media(min-width:650px){main{padding-top:62px}.game-card{padding:30px}.topbar{padding-left:max(20px,calc((100vw - 560px)/2));padding-right:max(20px,calc((100vw - 560px)/2));}}