:root{--bg: #f6f3ea;--card: #ffffff;--text: #1f2a24;--muted: #6b746e;--primary: #0f7a4f;--primary-text: #ffffff;--border: #d9d4c4;--danger: #b3261e;--warn: #c77700;--online: #2e9d5b;--offline: #9aa19c;--whatsapp: #25d366;color-scheme:light}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,PingFang SC,Noto Sans SC,sans-serif;font-size:17px;line-height:1.5;background:var(--bg);color:var(--text)}.page{max-width:480px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.title{text-align:center;font-size:32px;margin:24px 0 8px}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;font-size:17px;font-weight:600;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);color:var(--primary-text);border-color:var(--primary)}.btn-big{width:100%;min-height:60px;font-size:20px}.btn.active{box-shadow:0 0 0 3px #0f7a4f4d}.btn-whatsapp{background:var(--whatsapp);border-color:var(--whatsapp);color:#fff}.mode-buttons{display:flex;flex-direction:column;gap:12px}.form{display:flex;flex-direction:column;gap:16px}.field{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0}.field>span,.field>legend{font-weight:600}.input{min-height:48px;padding:0 12px;font-size:17px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);width:100%}.code-input{font-size:28px;letter-spacing:.3em;text-align:center;font-family:ui-monospace,monospace}.animal-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px}.animal-btn{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:88px;padding:8px;font-size:16px;border:2px solid var(--border);border-radius:12px;background:#fff;color:var(--text);cursor:pointer}.animal-btn.selected{border-color:var(--primary);background:#e6f4ec}.animal-btn:disabled{opacity:.35;cursor:not-allowed}.animal-emoji{font-size:32px;line-height:1}.error{color:var(--danger);margin:0}.muted{color:var(--muted);margin:8px 0 0}.code-card{text-align:center}.label{color:var(--muted)}.room-code{font-family:ui-monospace,monospace;font-size:48px;font-weight:700;letter-spacing:.15em;margin:4px 0 12px}.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.row>.btn{flex:1}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.player-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 10px;border-radius:10px;font-size:17px;color:var(--text);text-align:left}.player-row .animal-emoji{font-size:28px}.player-row-btn{border:2px dashed var(--primary);background:#f2faf5;cursor:pointer}.nickname{font-weight:600;flex:1}.badge{display:inline-block;font-size:14px;padding:2px 8px;border-radius:999px;background:#efe9d8;margin-right:4px}.badge-you{background:#dcefe4}.dot{width:12px;height:12px;border-radius:50%;flex:none}.dot.on{background:var(--online)}.dot.off{background:var(--offline)}.settings{display:flex;flex-direction:column;gap:14px}.settings-readonly{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}.settings-readonly dt{color:var(--muted)}.settings-readonly dd{margin:0;font-weight:600}.check{display:flex;align-items:center;gap:10px;min-height:44px}.check input{width:22px;height:22px}.start{display:flex;flex-direction:column;gap:4px}.start .muted{text-align:center}.toast{position:fixed;left:50%;bottom:16px;transform:translate(-50%);max-width:calc(100% - 32px);background:var(--text);color:#fff;padding:10px 16px;border-radius:10px;margin:0}.conn-banner{position:fixed;top:0;left:0;right:0;z-index:10;padding:10px 16px;text-align:center;background:var(--warn);color:#fff;font-weight:600}.conn-banner.offline{background:var(--danger)}.placeholder{text-align:center;font-size:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
