:root{--paper:#eef4f7;--paper-high:#f8fbfc;--paper-deep:#dde9f0;--wash-blue:#7ea6c48c;--wash-blue-deep:#5886aa73;--wash-teal:#78aaa859;--ink:#24384a;--ink-soft:#5c7488;--ink-faint:#8ba2b3;--cobalt:#2f5f86;--cobalt-bright:#3f7aa8;--vermilion:#b4463c;--vermilion-soft:#cf7d70;--jade:#6f9c8a;--line:#2f5f8629;--line-strong:#2f5f8647;--font-brand:"Ma Shan Zheng", "Noto Serif SC", serif;--font-body:"Noto Serif SC", "Songti SC", "STSong", serif;--duration:.22s;--ease:cubic-bezier(.16, 1, .3, 1);--shadow-card:0 1px 2px #24384a0d, 0 18px 40px -24px #24384a73;--shadow-float:0 2px 6px #24384a0f, 0 32px 70px -30px #24384a8c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background-color:var(--paper);height:100%;color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;margin:0;overflow:clip}#app{isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background-color:var(--paper);background-image:radial-gradient(58% 46% at 14% 10%, var(--wash-blue), transparent 68%), radial-gradient(44% 38% at 88% 16%, var(--wash-blue-deep), transparent 70%), radial-gradient(50% 46% at 80% 90%, #84aeca7a, transparent 68%), radial-gradient(46% 42% at 18% 84%, #6896b866, transparent 70%), radial-gradient(34% 30% at 62% 34%, var(--wash-teal), transparent 70%), radial-gradient(72% 64% at 50% 50%, #fffffff0, transparent 74%);width:100vw;height:100dvh;position:relative;overflow:clip}#app:before{content:"";z-index:0;pointer-events:none;filter:blur(46px)saturate(1.05);opacity:.9;background:radial-gradient(circle at 22% 18%,#749ec066,#0000 42%),radial-gradient(circle at 78% 82%,#88b0c85c,#0000 46%);position:absolute;inset:-10%}#app:after{content:"";z-index:3;pointer-events:none;opacity:.09;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}#scene{top:calc(80px + env(safe-area-inset-top));z-index:1;width:calc(100% - 320px);height:calc(100% - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));touch-action:none;background:0 0;display:block;position:absolute;left:12px}.hud-layer{z-index:2;pointer-events:none;padding:clamp(12px,2vw,28px);padding-top:max(12px, env(safe-area-inset-top));padding-bottom:max(12px, env(safe-area-inset-bottom));grid-template-rows:auto 1fr;grid-template-columns:1fr auto;gap:14px;display:grid;position:absolute;inset:0}.hud-layer button{font-family:var(--font-body);cursor:pointer;pointer-events:auto}.hud-top{flex-wrap:wrap;grid-column:1/-1;justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand-title{font-family:var(--font-brand);color:var(--cobalt);letter-spacing:.04em;text-shadow:0 0 18px #7ea6c48c;margin:0;font-size:clamp(34px,4.4vw,54px);font-weight:400;line-height:.9}.hud-controls{pointer-events:auto;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.segmented{border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-card);background:#ffffffa8;border-radius:999px;padding:3px;display:inline-flex}.seg-button{color:var(--ink-soft);letter-spacing:.06em;transition:color var(--duration) var(--ease), background var(--duration) var(--ease);background:0 0;border:0;border-radius:999px;padding:7px 18px;font-size:14px}.seg-button:hover{color:var(--cobalt)}.seg-button.is-active{color:#f7fbfd;background:linear-gradient(#467aa0f5,#2f5f86f5);box-shadow:0 3px 12px #2f5f8647}.ghost-button{border:1px solid var(--line);color:var(--cobalt);letter-spacing:.05em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-card);transition:border-color var(--duration) var(--ease), background var(--duration) var(--ease), transform var(--duration) var(--ease);background:#ffffffad;border-radius:10px;padding:8px 15px;font-size:14px}.ghost-button:hover:not(:disabled){border-color:var(--line-strong);background:#fffffff0}.ghost-button:active:not(:disabled){transform:translateY(1px)}.ghost-button:disabled{opacity:.4;cursor:not-allowed}.primary-button{letter-spacing:.06em;color:#f7fbfd;transition:transform var(--duration) var(--ease), filter var(--duration) var(--ease);background:linear-gradient(#467aa0fa,#2f5f86fa);border:0;border-radius:10px;padding:10px 18px;font-size:14px;box-shadow:0 6px 18px #2f5f863d}.primary-button:hover{filter:brightness(1.07)}.primary-button:active{transform:translateY(1px)}.sound-toggle{justify-content:center;align-items:center;gap:6px;min-width:72px;display:inline-flex}.sound-toggle .sound-icon{color:var(--cobalt);font-size:14px;line-height:1}.sound-toggle.is-off{color:var(--ink-faint);border-color:#2f5f861a}.sound-toggle.is-off .sound-icon{color:var(--ink-faint)}.chip{border:1px solid var(--line);letter-spacing:.05em;color:var(--ink-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;transition:border-color var(--duration) var(--ease), color var(--duration) var(--ease);background:#ffffff9e;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;display:inline-flex}.chip[hidden]{display:none}.chip[data-tone=ok]{color:var(--jade);border-color:#6f9c8a66}.chip[data-tone=error]{color:var(--vermilion);border-color:#b4463c66}button.chip{cursor:pointer}button.chip:hover{border-color:var(--line-strong);color:var(--cobalt)}.room-chip .room-code{font-family:var(--font-body);text-shadow:none;font-variant-numeric:tabular-nums;letter-spacing:.18em;color:var(--cobalt);font-size:13px;font-weight:600;line-height:1}@keyframes chip-pulse{0%,to{opacity:1}50%{opacity:.45}}.chip.is-waiting .room-chip-dot{animation:1.6s ease-in-out infinite chip-pulse}.chip .room-chip-dot{background:currentColor;border-radius:50%;width:6px;height:6px}.hud-panel{border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);width:min(272px,84vw);box-shadow:var(--shadow-card);pointer-events:auto;background:#ffffffb3;border-radius:14px;grid-area:2/2;place-self:end;padding:18px 18px 16px}.turn-pill{letter-spacing:.06em;transition:all var(--duration) var(--ease);border:1px solid #0000;border-radius:999px;align-items:center;gap:8px;padding:6px 13px;font-size:14px;display:inline-flex}.turn-pill[data-side=red]{color:#a8433a;background:#c460541f;border-color:#b4463c47}.turn-pill[data-side=black]{color:var(--cobalt);background:#2f5f861a;border-color:#2f5f8642}.turn-dot{background:currentColor;border-radius:50%;width:7px;height:7px;animation:2.4s ease-in-out infinite pulse-dot;box-shadow:0 0 8px}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}.meta-row{border-top:1px solid #2f5f861a;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;display:flex}.hud-panel .meta-row:first-of-type{margin-top:14px}.connect-row[hidden]{display:none}.meta-label{letter-spacing:.16em;color:var(--ink-faint);font-size:11px}.meta-value{color:var(--ink);font-variant-numeric:tabular-nums;font-size:14px}.net-pill{letter-spacing:.06em;color:var(--ink-soft);transition:color var(--duration) var(--ease), background var(--duration) var(--ease);background:#2f5f8612;border-radius:6px;padding:1px 8px;font-size:11px}.net-pill[data-tone=ok]{color:var(--cobalt);background:#2f5f861f}.net-pill[data-tone=error]{color:var(--vermilion);background:#b4463c1f}.notice{letter-spacing:.04em;color:var(--ink-soft);animation:notice-in .26s var(--ease);margin:12px 0 0;font-size:12px}.notice[hidden]{display:none}.notice[data-tone=error]{color:var(--vermilion)}@keyframes notice-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.hud-actions{gap:8px;margin-top:14px;display:flex}.hud-actions .ghost-button{flex:1;padding-inline:8px}.result-banner{text-align:center;border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-float);pointer-events:auto;animation:result-in .48s var(--ease);background:#ffffffdb;border-radius:16px;grid-area:1/1/-1/-1;place-self:center;padding:30px 46px}.result-banner[hidden]{display:none}.result-title{font-family:var(--font-brand);color:var(--cobalt);text-shadow:0 0 22px #7ea6c480;margin:0;font-size:clamp(38px,5vw,62px);font-weight:400}.result-sub{letter-spacing:.24em;color:var(--ink-soft);margin:6px 0 20px;font-size:12px}.result-actions{justify-content:center;gap:10px;display:flex}@keyframes result-in{0%{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:none}}.room-backdrop{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade-in .22s var(--ease);background:radial-gradient(circle at 50% 45%,#e8f1f68c,#c5d8e5b8);place-items:center;padding:20px;display:grid;position:fixed;inset:0}.room-backdrop[hidden]{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.room-card{border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);width:min(400px,100%);box-shadow:var(--shadow-float);animation:card-in .32s var(--ease);overscroll-behavior:contain;background:#ffffffe6;border-radius:16px;max-height:calc(100dvh - 40px);padding:28px 26px 24px;position:relative;overflow-y:auto}.room-card:before{content:"";filter:blur(22px);pointer-events:none;background:radial-gradient(circle,#7ea6c480,#0000 68%);position:absolute;inset:-40% 40% 60% -20%}@keyframes card-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.room-close{z-index:1;width:30px;height:30px;color:var(--ink-faint);transition:color var(--duration) var(--ease), background var(--duration) var(--ease);background:0 0;border:1px solid #0000;border-radius:50%;padding:0;font-size:13px;line-height:1;position:absolute;top:12px;right:12px}.room-close:hover{color:var(--cobalt);background:#2f5f8614}.room-title{font-family:var(--font-brand);color:var(--cobalt);letter-spacing:.05em;margin:0 0 20px;font-size:30px;font-weight:400;position:relative}.room-hint{letter-spacing:.08em;color:var(--ink-faint);margin:4px 0 20px;font-size:12px;position:relative}.room-field{align-items:center;gap:8px;margin-bottom:14px;display:flex;position:relative}.room-input{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;border:1px solid var(--line);min-width:0;color:var(--ink);font-family:var(--font-body);letter-spacing:.34em;text-align:center;text-transform:uppercase;transition:border-color var(--duration) var(--ease);background:#ffffffe6;border-radius:10px;flex:1;padding:12px 14px;font-size:17px}.room-input::placeholder{color:var(--ink-faint);letter-spacing:.12em;text-transform:none;font-size:14px}.room-input:focus{border-color:var(--cobalt-bright);outline:none;box-shadow:0 0 0 3px #2f5f861f}.room-actions{gap:8px;display:flex;position:relative}.room-actions .primary-button,.room-actions .ghost-button{flex:1;padding-block:11px}.room-status{letter-spacing:.04em;min-height:1.4em;color:var(--ink-soft);margin:12px 0 0;font-size:12px;position:relative}.room-status[data-tone=error]{color:var(--vermilion)}.room-waiting{text-align:center;flex-direction:column;align-items:center;gap:14px;display:flex;position:relative}.room-waiting .room-title{margin:0}.room-waiting[hidden],.room-entry[hidden]{display:none}.room-code{font-family:var(--font-brand);letter-spacing:.16em;color:var(--cobalt);text-shadow:0 0 26px #7ea6c499;font-variant-numeric:tabular-nums;font-size:54px;line-height:1}.room-code-label{letter-spacing:.26em;color:var(--ink-faint);margin:0;font-size:11px}.room-waiting-row{gap:8px;width:100%;display:flex}.room-waiting-row .ghost-button,.room-waiting-row .primary-button{flex:1}.bloom{mix-blend-mode:multiply;width:66px;height:66px;display:block}.bloom svg{display:block;overflow:visible}.bloom .petal{fill:var(--petal,#9dc0d8);opacity:0;transform-box:fill-box;transform-origin:50% 100%;filter:blur(.4px);animation:2.6s cubic-bezier(.2,.7,.3,1) infinite petal;animation-delay:calc(var(--i,0) * .11s)}.bloom .heart{fill:var(--cobalt);opacity:0;transform-box:fill-box;transform-origin:50%;animation:2.6s cubic-bezier(.2,.7,.3,1) .66s infinite heart}@keyframes petal{0%{opacity:0;transform:scale(.3)}13%{opacity:.55;transform:scale(1.05)}21%,66%{opacity:.5;transform:scale(1)}92%,to{opacity:0;transform:scale(.94)}}@keyframes heart{0%{opacity:0;transform:scale(.2)}10%{opacity:.8;transform:scale(1.08)}16%,58%{opacity:.75;transform:scale(1)}84%,to{opacity:0;transform:scale(.9)}}:focus-visible{outline:2px solid var(--cobalt-bright);outline-offset:3px}@media (max-width:1000px){#scene{top:calc(54px + env(safe-area-inset-top));width:100%;height:calc(100% - 118px - env(safe-area-inset-top) - env(safe-area-inset-bottom));left:0}.hud-layer{padding:8px;padding-top:max(8px, env(safe-area-inset-top));padding-bottom:max(8px, env(safe-area-inset-bottom));grid-template-rows:auto 1fr auto;grid-template-columns:1fr;gap:8px}.hud-top{flex-flow:row;align-items:center;gap:8px}.brand-title{font-size:28px}.hud-controls{flex-wrap:nowrap;justify-content:flex-end;gap:6px;width:auto}.hud-controls .ghost-button{min-height:36px;padding:7px 9px;font-size:12px}.seg-button{min-height:30px;padding:6px 9px;font-size:12px}.sound-toggle{min-width:36px}.sound-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.chip{min-height:36px;padding:6px 8px;font-size:11px}.hud-panel{grid-area:3/1;justify-self:stretch;align-items:center;gap:6px;width:auto;padding:8px;display:flex;position:relative}.turn-pill{flex-shrink:0;gap:5px;padding:6px 8px;font-size:12px}.hud-panel .meta-row{display:none}.hud-panel .connect-row:not([hidden]){border:0;flex-shrink:0;padding:6px 0;display:flex}.connect-row .meta-label{display:none}.hud-actions{flex-shrink:0;gap:6px;margin:0 0 0 auto}.hud-actions .ghost-button{white-space:nowrap;min-height:36px;padding:7px 10px;font-size:12px}.notice{border:1px solid var(--line);background:#f8fbfcf0;border-radius:10px;margin:0;padding:8px 10px;position:absolute;bottom:calc(100% + 8px);left:0;right:0}.result-banner{margin:0 8px;padding:24px 30px}.room-card{padding:22px 20px 20px}.room-code{font-size:44px}}@media (max-height:520px) and (orientation:landscape){#scene{top:calc(52px + env(safe-area-inset-top));left:env(safe-area-inset-left);width:calc(100% - 220px - env(safe-area-inset-left) - env(safe-area-inset-right));height:calc(100% - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.hud-layer{padding:8px;padding-left:max(8px, env(safe-area-inset-left));padding-right:max(8px, env(safe-area-inset-right));grid-template-rows:auto 1fr;grid-template-columns:1fr 200px}.hud-top{flex-direction:row;align-items:center}.hud-controls{width:auto}.brand-title{font-size:28px}.hud-panel{grid-area:2/2;padding:10px 12px;display:block}.hud-actions{margin-top:8px}.hud-panel .meta-row{display:none}}@media (max-width:350px){.hud-controls{gap:4px}.seg-button{padding-inline:10px}.hud-controls .ghost-button,.chip{padding-inline:7px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.bloom .petal{opacity:.5}.bloom .heart{opacity:.75}}