.l101-chat{--l101-bg: #ffffff;--l101-panel: #f6f4f9;--l101-fg: #2b2340;--l101-muted: #6b6480;--l101-line: #e4e0ec;--l101-accent: #6c4ce0;--l101-accent-fg: #ffffff;--l101-bubble: #ece8f6;--l101-danger: #c62d4a;display:grid;grid-template-columns:minmax(220px,300px) 1fr;height:100%;min-height:420px;background:var(--l101-bg);color:var(--l101-fg);font:15px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;border:1px solid var(--l101-line);border-radius:12px;overflow:hidden}@media(prefers-color-scheme:dark){.l101-chat:not([data-theme=light]){--l101-bg: #1b1724;--l101-panel: #231e2f;--l101-fg: #efeaf8;--l101-muted: #a59fb8;--l101-line: #362f45;--l101-bubble: #2f2840;--l101-accent: #9b84ff;--l101-accent-fg: #160f2a}}.l101-chat button{font:inherit;color:inherit}.l101-chat__list{background:var(--l101-panel);border-right:1px solid var(--l101-line);overflow-y:auto}.l101-chat__list ul{list-style:none;margin:0;padding:0}.l101-chat__list-header{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--l101-line)}.l101-chat__status{font-size:12px;color:var(--l101-muted);white-space:nowrap}.l101-chat__status:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;background:var(--l101-muted)}.l101-chat__status--live:before{background:#2a9d5c}.l101-chat__status--polling:before{background:#e0a100}.l101-chat__item{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;border:0;background:none;text-align:left;cursor:pointer}.l101-chat__item:hover,.l101-chat__item.is-active{background:var(--l101-bubble)}.l101-chat__avatar{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--l101-accent);color:var(--l101-accent-fg);font-weight:600}.l101-chat__item-main{display:flex;flex-direction:column;min-width:0;flex:1}.l101-chat__item-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.l101-chat__item-preview{color:var(--l101-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.l101-chat__badge{flex:none;min-width:20px;padding:0 6px;border-radius:10px;background:var(--l101-danger);color:#fff;font-size:12px;font-weight:700;text-align:center;line-height:20px}.l101-chat__main{display:flex;flex-direction:column;min-width:0;min-height:0}.l101-chat__placeholder,.l101-chat__hint{color:var(--l101-muted);padding:16px}.l101-chat__placeholder{margin:auto}.l101-chat__error{color:var(--l101-danger);padding:4px 16px;margin:0}.l101-chat__conversation{display:flex;flex-direction:column;height:100%;min-height:0}.l101-chat__conv-header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--l101-line)}.l101-chat__back{display:none;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;padding:0 6px}.l101-chat__messages{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.l101-chat__older{align-self:center;border:1px solid var(--l101-line);background:none;border-radius:16px;padding:4px 12px;cursor:pointer}.l101-chat__msg{display:flex;flex-direction:column;align-items:flex-start;max-width:80%}.l101-chat__msg.is-mine{align-self:flex-end;align-items:flex-end}.l101-chat__bubble{background:var(--l101-bubble);padding:8px 12px;border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere}.l101-chat__msg.is-mine .l101-chat__bubble{background:var(--l101-accent);color:var(--l101-accent-fg)}.l101-chat__msg img{display:block}.l101-chat__msg time,.l101-chat__read{font-size:11px;color:var(--l101-muted);margin-top:2px}.l101-chat__composer{display:flex;gap:8px;align-items:flex-end;padding:10px;border-top:1px solid var(--l101-line)}.l101-chat__composer textarea{flex:1;resize:none;border:1px solid var(--l101-line);border-radius:18px;padding:8px 12px;font:inherit;background:var(--l101-bg);color:inherit;max-height:120px}.l101-chat__composer button[type=submit]{border:0;border-radius:18px;padding:8px 16px;background:var(--l101-accent);color:var(--l101-accent-fg);font-weight:600;cursor:pointer}.l101-chat__composer button[disabled]{opacity:.5;cursor:default}.l101-chat__sticker-btn{border:0;background:none;font-size:24px;cursor:pointer;padding:4px}.l101-chat__picker{border-top:1px solid var(--l101-line);background:var(--l101-panel);max-height:260px;display:flex;flex-direction:column}.l101-chat__picker-tabs{display:flex;gap:4px;padding:6px;border-bottom:1px solid var(--l101-line);overflow-x:auto}.l101-chat__picker-tabs button{border:0;background:none;border-radius:8px;padding:2px;cursor:pointer}.l101-chat__picker-tabs button[aria-selected=true]{background:var(--l101-bubble)}.l101-chat__picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:4px;padding:6px;overflow-y:auto}.l101-chat__picker-grid button{border:0;background:none;border-radius:8px;cursor:pointer;padding:2px}.l101-chat__picker-grid button:hover{background:var(--l101-bubble)}.l101-chat__credit{font-size:11px;color:var(--l101-muted);margin:0;padding:4px 8px}@media(max-width:640px){.l101-chat{grid-template-columns:1fr}.l101-chat--open .l101-chat__list{display:none}.l101-chat:not(.l101-chat--open) .l101-chat__main{display:none}.l101-chat__back{display:block}}:root{--bg: #f3f7ef;--fg: #24301f;--muted: #66735f;--card: #ffffff;--line: #dce5d3;--accent: #3f8f4a;--accent-fg: #fff;--gold: #e8a317;--danger: #c62d4a;color-scheme:light dark}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #121a12;--fg: #e8f1e3;--muted: #9db09a;--card: #1b261b;--line: #2d3d2c;--accent: #7cc37f;--accent-fg: #0d1a0e}}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit;color:inherit;cursor:pointer}input{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);min-width:0}.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}.error{color:var(--danger)}.splash{display:grid;place-items:center;height:100%;font-size:64px}.game{min-height:100%;display:flex;flex-direction:column}.bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}.title{font-size:18px}.bar nav{display:flex;gap:4px;flex:1}.bar nav button{border:0;background:none;padding:6px 12px;border-radius:8px}.bar nav button.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-weight:600}.who{display:flex;gap:10px;align-items:center}.cta{border:0;background:var(--accent);color:var(--accent-fg);padding:8px 14px;border-radius:999px;font-weight:600}.link{border:0;background:none;color:var(--accent);text-decoration:underline;padding:0}.pill{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:12px;line-height:18px;text-align:center}.toast{margin:12px 16px 0;padding:10px 14px;background:color-mix(in srgb,var(--gold) 20%,var(--card));border:1px solid var(--gold);border-radius:10px;display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}.play{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1.1fr);gap:16px;padding:16px;max-width:1100px;width:100%;margin:0 auto}@media(max-width:760px){.play{grid-template-columns:1fr}}.stage,.shop,.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}.stage{display:flex;flex-direction:column;align-items:center;gap:14px}.score{display:flex;flex-direction:column;align-items:center}.notes{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums}.drum-wrap{position:relative;width:220px;height:220px}.drum{width:100%;height:100%;border-radius:50%;border:6px solid var(--accent);background:radial-gradient(circle at 50% 40%,#fffbe8,#f5e2b0);font-size:110px;line-height:1;box-shadow:0 8px color-mix(in srgb,var(--accent) 60%,#000),0 12px 24px #0003;transition:transform .06s;user-select:none;-webkit-tap-highlight-color:transparent}.drum:active{transform:translateY(5px) scale(.98);box-shadow:0 3px color-mix(in srgb,var(--accent) 60%,#000)}.pop{position:absolute;top:20%;font-weight:800;color:var(--accent);pointer-events:none;animation:rise .9s ease-out forwards}@keyframes rise{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-80px)}}@media(prefers-reduced-motion:reduce){.pop{animation:none;opacity:0}.drum{transition:none}}.groove{position:relative;width:100%;max-width:300px;height:24px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);overflow:hidden}.groove-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .15s}.groove span{position:relative;display:block;text-align:center;font-size:13px;font-weight:700;line-height:24px}.shop h2{font-size:16px;margin:0 0 8px}.shop h2+.list{margin-bottom:16px}.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.buy{width:100%;display:grid;grid-template-columns:40px 1fr auto auto;gap:10px;align-items:center;text-align:left;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}.buy:disabled{opacity:.55;cursor:default}.buy:not(:disabled):hover{border-color:var(--accent)}.emoji{font-size:28px;text-align:center}.info{display:flex;flex-direction:column;min-width:0}.price{font-weight:700;white-space:nowrap}.owned{min-width:28px;text-align:right;font-size:20px;font-weight:800;color:var(--muted)}.friends{flex:1;display:grid;grid-template-rows:auto 1fr;gap:12px;padding:16px;max-width:1100px;width:100%;margin:0 auto;min-height:0}.codes{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end}.code{font:800 28px/1.2 ui-monospace,monospace;letter-spacing:4px;color:var(--accent)}.row{display:flex;gap:8px}.row button,.panel button[type=submit]{border:0;background:var(--accent);color:var(--accent-fg);border-radius:8px;padding:8px 14px;font-weight:600}.row button:disabled{opacity:.5}.chat-wrap{min-height:460px}.chat-wrap .l101-chat{height:100%;--l101-accent: var(--accent);--l101-accent-fg: var(--accent-fg)}.narrow{max-width:420px;margin:32px auto}
