:root{--bg-color:#312e2b;--bg-gradient:none;--text-primary:#fff;--text-secondary:#989795;--accent-color:#81b64c;--accent-glow:#81b64c66;--tiger-color:#f05345;--tiger-glow:#f0534566;--goat-color:#b0b0b0;--goat-glow:#b0b0b066;--board-line:#ffffff1a;--board-bg:#262421;--node-bg:#403d39;--node-border:#4d4945;--node-hover:#ffffff26;--modal-bg:#262421;--modal-border:#ffffff0d}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-tap-highlight-color:transparent}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;justify-content:center;min-height:100dvh;font-family:Outfit,sans-serif;display:flex;overflow-x:hidden}#root{flex-direction:column;width:100%;max-width:1100px;min-height:100dvh;padding:1.5rem 1rem;display:flex}@media (width>=768px){#root{padding:2rem}}.glass-panel{background:var(--board-bg);border-radius:8px;box-shadow:0 4px 14px #00000040}.title-glow{text-shadow:none}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}.app-container{flex-direction:column;flex:1;align-items:center;gap:1.5rem;width:100%;animation:.4s ease-out fadeInUp;display:flex}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.header{text-align:center}.header h1{letter-spacing:-1px;background:linear-gradient(135deg,#fff,#94a3b8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.25rem;font-size:2.4rem;font-weight:800}@media (width>=768px){.header h1{font-size:3rem}}.header p{color:var(--text-secondary);font-size:1rem;font-weight:300}.main-content{flex-direction:column;align-items:center;gap:1.5rem;width:100%;display:flex}@media (width>=900px){.main-content{flex-direction:row;justify-content:center;align-items:flex-start;gap:2rem}}.board-section{flex-direction:column;flex-shrink:0;justify-content:center;align-items:stretch;gap:.5rem;width:min(88vw,480px);display:flex}.room-state-banner{letter-spacing:.3px;text-transform:uppercase;text-align:center;border:1px solid #ffffff14;border-radius:10px;padding:.55rem .8rem;font-size:.78rem;font-weight:700}.room-state-banner.waiting{color:#93c5fd;background:#3b82f626}.room-state-banner.reconnecting{color:#fbbf24;background:#fbbf2426}.room-state-banner.finished{color:#cbd5e1;background:#94a3b826}.sidebar-section{flex-direction:column;width:100%;max-width:500px;height:450px;display:flex}@media (width>=900px){.sidebar-section{flex:1;width:360px;max-width:360px;height:0;min-height:480px;max-height:85vh}}.connecting-overlay{background:var(--bg-color);z-index:50;flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex;position:fixed;inset:0}.connecting-overlay h2{color:var(--text-secondary);font-size:1.2rem;font-weight:600}.loader{border:4px solid var(--board-bg);border-bottom-color:var(--accent-color);border-radius:50%;width:48px;height:48px;animation:1s linear infinite rotation}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.board-container{aspect-ratio:1;background:var(--board-bg);border-radius:8px;justify-content:center;align-items:center;width:100%;padding:28px;display:flex;position:relative;box-shadow:0 4px 14px #00000040}.board-container.board-review-mode{box-shadow:0 0 0 2px #81b64c59,0 10px 30px #0006}@media (width<=400px){.board-container{padding:20px}}.board-svg{pointer-events:none;width:calc(100% - 56px);height:calc(100% - 56px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (width<=400px){.board-svg{width:calc(100% - 40px);height:calc(100% - 40px)}}.board-line{stroke:var(--board-line);stroke-width:2px;stroke-linecap:round}.nodes-container{pointer-events:none;position:absolute;inset:28px}@media (width<=400px){.nodes-container{inset:20px}}.node{background-color:var(--node-bg);border:2px solid var(--node-border);cursor:pointer;pointer-events:auto;z-index:10;-webkit-tap-highlight-color:transparent;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:inset 0 2px 4px #00000080}@media (width<=400px){.node{width:34px;height:34px}}.node:hover{background-color:var(--node-hover);border-color:#ffffff4d;transform:translate(-50%,-50%)scale(1.1)}.node.possible-move{border-color:var(--accent-color);background-color:#81b64c26}.node.possible-move:after{content:"";background-color:var(--accent-color);opacity:.8;border-radius:50%;width:12px;height:12px}.node.move-from{border-color:#60a5fad9;box-shadow:0 0 0 2px #60a5fa40}.node.move-to{border-color:#facc15f2;box-shadow:0 0 0 3px #facc1540}.node.move-captured{border-color:#ef4444f2;box-shadow:inset 0 0 0 2px #ef44448c,0 0 0 2px #ef444440}.node.readonly{cursor:default}.node.readonly:hover{background-color:var(--node-bg);border-color:var(--node-border);transform:translate(-50%,-50%)}.piece{z-index:20;border-radius:50%;width:85%;height:85%;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:absolute;box-shadow:0 4px 10px #0006,inset 0 2px 5px #fff3}.piece.tiger{background:radial-gradient(circle at 30% 30%, #f87171, var(--tiger-color));border:2px solid #b91c1c}.piece.goat{background:radial-gradient(circle at 30% 30%, #34d399, var(--goat-color));border:2px solid #047857}.piece.selected{z-index:25;transform:scale(1.1);box-shadow:0 0 0 3px #fff6}.piece.tiger.selected{box-shadow:0 0 0 4px var(--tiger-color)}.piece.goat.selected{box-shadow:0 0 0 4px var(--goat-color)}.sidebar{background:var(--board-bg);border-radius:20px;flex-direction:column;height:100%;display:flex;overflow:hidden}@media (width>=900px){.sidebar{min-height:520px}}.sidebar.loading{justify-content:center;align-items:center;min-height:200px;display:flex}.sidebar-header{background:#0003;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;gap:.75rem;padding:.85rem 1.15rem;display:flex}.room-info{color:var(--text-secondary);white-space:nowrap;align-items:center;gap:.5rem;font-size:.82rem;display:flex}.sidebar-header-right{align-items:center;gap:.75rem;display:flex}.spectating-badge{color:var(--accent-color);letter-spacing:.5px;text-transform:uppercase;align-items:center;gap:5px;font-size:.78rem;font-weight:700;display:inline-flex}.spectator-count{color:var(--text-secondary);background:#ffffff0f;border-radius:6px;align-items:center;gap:4px;padding:3px 8px;font-size:.78rem;display:flex}.phase-indicator{color:var(--accent-color);text-transform:uppercase;letter-spacing:.5px;font-size:.78rem;font-weight:600}.copy-btn{color:var(--text-primary);cursor:pointer;white-space:nowrap;background:#ffffff1a;border:none;border-radius:6px;align-items:center;gap:4px;padding:4px 10px;font-family:inherit;font-size:.72rem;font-weight:500;transition:all .2s;display:inline-flex}.copy-btn:hover{background:#fff3;transform:translateY(-1px)}.turn-banner{text-transform:uppercase;letter-spacing:.5px;justify-content:center;align-items:center;gap:8px;padding:.5rem 1rem;font-size:.82rem;font-weight:700;animation:.3s ease-out turnBannerIn;display:flex}@keyframes turnBannerIn{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}.turn-banner.my-turn-banner{color:var(--goat-color);background:#10b98126;border-bottom:1px solid #10b98133}.turn-banner.opp-turn-banner{color:var(--tiger-color);background:#ef44441a;border-bottom:1px solid #ef444426}.turn-banner-dot{background:currentColor;border-radius:50%;width:7px;height:7px;animation:1.2s ease-in-out infinite turnDotPulse}.players-container{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.player-profile{background:var(--board-bg);border-radius:8px;justify-content:space-between;align-items:center;padding:.6rem .8rem;transition:background .3s;display:flex;position:relative;box-shadow:0 2px 8px #0003}.profile-left{align-items:center;gap:.75rem;display:flex}.profile-right{flex-direction:column;align-items:flex-end;gap:.2rem;display:flex}.player-profile.active-turn{border-left:3px solid var(--accent-color);background:#81b64c1a}.profile-avatar{background:#0003;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:1.2rem;transition:transform .2s;display:flex}.player-profile.active-turn .profile-avatar{transform:scale(1.05)}.profile-avatar.goat-bg{border-bottom:3px solid var(--goat-color);color:var(--goat-color)}.profile-avatar.tiger-bg{border-bottom:3px solid var(--tiger-color);color:var(--tiger-color)}.profile-avatar.spectator-bg{border-bottom:3px solid var(--text-secondary);color:var(--text-secondary)}.profile-info{flex-direction:column;gap:.15rem;min-width:0;display:flex}.profile-name{align-items:center;gap:.5rem;font-size:1.05rem;font-weight:600;display:flex}.role-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:6px;padding:2px 7px;font-size:.65rem;font-weight:700}.role-badge.goat{color:var(--goat-color);background:#10b98133}.role-badge.tiger{color:var(--tiger-color);background:#ef444433}.role-badge.spectator{color:var(--text-secondary);background:#ffffff1a}.profile-stats{color:var(--text-secondary);font-size:.82rem}.turn-indicator{color:var(--accent-color);white-space:nowrap;align-items:center;gap:5px;margin-left:auto;font-size:.78rem;font-weight:600;animation:1.5s infinite pulse;display:flex}.turn-indicator.my-turn{color:var(--goat-color)}.turn-indicator.my-turn .turn-dot{background:var(--goat-color)}.turn-dot{background:var(--accent-color);border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite turnDotPulse}@keyframes turnDotPulse{0%,to{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.move-history{background:#0000004d;flex:1;padding:.5rem 0;font-family:JetBrains Mono,monospace,sans-serif;font-size:.85rem;overflow-y:auto}.move-history-shell{flex-direction:column;flex:1;min-height:0;display:flex}.history-controls{background:#0003;border-bottom:1px solid #ffffff0f;gap:.45rem;padding:.55rem .75rem;display:flex}.history-control-btn,.history-live-btn{text-transform:uppercase;letter-spacing:.5px;cursor:pointer;border:none;border-radius:8px;padding:.35rem .7rem;font-family:inherit;font-size:.72rem;font-weight:700;transition:all .2s}.history-control-btn{color:var(--text-primary);background:#ffffff14}.history-control-btn:hover:not(:disabled){background:#ffffff26}.history-icon-btn{justify-content:center;align-items:center;width:34px;height:30px;padding:0;display:inline-flex}.history-live-btn{color:var(--accent-color);background:#81b64c33;margin-left:auto}.history-live-btn.active,.history-live-btn:hover:not(:disabled){background:#81b64c4d}.history-live-btn.reviewing{color:#fbbf24;background:#fbbf2433}.history-live-btn.reviewing:hover:not(:disabled){background:#fbbf244d}.history-control-btn:disabled,.history-live-btn:disabled{opacity:.45;cursor:default}.history-status-note{color:#fbbf24;background:#fbbf241a;border-bottom:1px solid #fbbf2433;padding:.4rem .75rem;font-size:.72rem}.move-history.empty{justify-content:center;align-items:center;min-height:120px;display:flex}.empty-message{color:var(--text-secondary);font-family:Outfit,sans-serif;font-style:italic}.history-table{flex-direction:column;display:flex}.history-row{align-items:center;padding:.4rem 1.15rem;transition:background .2s;display:flex}.history-row:nth-child(2n){background:#ffffff05}.history-row:hover{background:#ffffff0d}.turn-number{color:#ffffff4d;flex-shrink:0;width:36px;font-weight:600}.move{color:var(--text-secondary);cursor:default;border-radius:4px;flex:1;padding:1px 4px}.move.goat-move{color:#10b981d9}.move.tiger-move{color:#ef4444d9}.move.latest-move{color:var(--text-primary);background:#ffffff1a;font-weight:700}.move.selected-move{color:#fff;background:#3b82f642;font-weight:800;box-shadow:inset 0 0 0 1px #93c5fdb3}.move.selected-move.goat-move{background:#10b9813d;box-shadow:inset 0 0 0 1px #34d399b8}.move.selected-move.tiger-move{background:#ef44443d;box-shadow:inset 0 0 0 1px #f87171b8}.move-btn{text-align:left;font-family:inherit;font-size:inherit;cursor:pointer;background:0 0;border:none}.move-btn:hover:not(:disabled){background:#ffffff14}.move-btn:disabled{opacity:.35;cursor:default}.sidebar-tabs{background:#00000040;border-bottom:1px solid #ffffff0d;display:flex}.sidebar-tab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:5px;padding:.55rem .75rem;font-family:inherit;font-size:.78rem;font-weight:600;transition:all .2s;display:flex;position:relative}.sidebar-tab:hover{color:var(--text-primary);background:#ffffff0a}.sidebar-tab.active{color:var(--accent-color);border-bottom-color:var(--accent-color)}.tab-badge{background:var(--accent-color);color:#fff;text-align:center;border-radius:8px;min-width:16px;padding:1px 5px;font-size:.6rem;font-weight:700;line-height:1.3}.chatbox{background:#0000004d;flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.chatbox-header{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #ffffff0d;padding:.5rem 1rem;font-size:.78rem;font-weight:600;display:none}.chatbox-messages{flex-direction:column;flex:1;gap:.35rem;padding:.6rem .85rem;display:flex;overflow-y:auto}.chatbox-empty{height:100%;color:var(--text-secondary);opacity:.6;justify-content:center;align-items:center;font-size:.85rem;font-style:italic;display:flex}.chat-msg{animation:.2s ease-out chatMsgIn;display:flex}@keyframes chatMsgIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.chat-msg-mine{justify-content:flex-end}.chat-msg-other{flex-direction:column;justify-content:flex-start;align-items:flex-start}.chat-msg-sender{text-transform:uppercase;letter-spacing:.4px;margin-bottom:1px;padding-left:4px;font-size:.65rem;font-weight:700}.chat-msg-sender.goat{color:var(--goat-color)}.chat-msg-sender.tiger{color:var(--tiger-color)}.chat-msg-bubble{word-wrap:break-word;border-radius:10px;max-width:80%;padding:.4rem .7rem;font-size:.82rem;line-height:1.4}.chat-msg-mine .chat-msg-bubble{color:var(--text-primary);background:#3b82f640;border-bottom-right-radius:3px}.chat-msg-other .chat-msg-bubble{color:var(--text-primary);background:#ffffff14;border-bottom-left-radius:3px}.chatbox-input-row{background:#0003;border-top:1px solid #ffffff0d;gap:.4rem;padding:.5rem .6rem;display:flex}.chatbox-input{color:var(--text-primary);background:#ffffff0f;border:1px solid #ffffff1a;border-radius:8px;outline:none;flex:1;padding:.45rem .7rem;font-family:inherit;font-size:.82rem;transition:border-color .2s}.chatbox-input::placeholder{color:var(--text-secondary);opacity:.5}.chatbox-input:focus{border-color:var(--accent-color)}.chatbox-send-btn{background:linear-gradient(135deg, var(--accent-color), #2563eb);color:#fff;cursor:pointer;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.chatbox-send-btn:hover:not(:disabled){box-shadow:0 4px 12px var(--accent-glow);transform:translateY(-1px)}.chatbox-send-btn:disabled{opacity:.4;cursor:default}.sidebar-footer{background:#0006;border-top:1px solid #ffffff0d;justify-content:center;padding:.85rem 1.15rem;display:flex}.game-controls{gap:.75rem;width:100%;display:flex}.primary-btn,.secondary-btn{cursor:pointer;border:none;border-radius:10px;flex:1;padding:.7rem;font-family:inherit;font-size:.9rem;font-weight:600;transition:all .2s}.primary-btn{background:linear-gradient(135deg, var(--accent-color), #2563eb);color:#fff}.primary-btn:hover{box-shadow:0 6px 16px var(--accent-glow);transform:translateY(-2px)}.secondary-btn{color:var(--text-primary);background:#ffffff1a}.secondary-btn:hover{background:#ffffff2e}.game-over-banner{text-align:center;width:100%}.game-over-banner h3{color:var(--accent-color);margin-bottom:.2rem;font-size:1.3rem}.game-over-banner p{color:var(--text-secondary);margin-bottom:.75rem;font-size:.85rem}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#000000b3;justify-content:center;align-items:center;padding:1rem;animation:.3s ease-out forwards fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--modal-bg);border:1px solid var(--modal-border);text-align:center;border-radius:24px;width:100%;max-width:360px;padding:2.5rem 2rem;animation:.4s cubic-bezier(.175,.885,.32,1.275) forwards popIn;position:relative;overflow:hidden;transform:scale(.9);box-shadow:0 20px 40px #00000080}.modal-content.goat-win{border-color:#10b98159}.modal-content.tiger-win{border-color:#ef444459}.modal-content:before{content:"";background:linear-gradient(90deg,#10b981e6,#ef4444e6);height:5px;position:absolute;top:0;left:0;right:0}.winner-pill{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;background:#ffffff14;border:1px solid #ffffff1f;border-radius:999px;margin-bottom:.75rem;padding:.28rem .75rem;font-size:.72rem;font-weight:700;display:inline-flex}.modal-close-btn{width:32px;height:32px;color:var(--text-secondary);cursor:pointer;background:#ffffff14;border:none;border-radius:999px;font-size:1.35rem;line-height:1;transition:all .2s;position:absolute;top:10px;right:10px}.modal-close-btn:hover{color:var(--text-primary);background:#ffffff29}.winner-icon{border:1px solid #ffffff1a;border-radius:999px;justify-content:center;align-items:center;width:70px;height:70px;margin:0 auto 1rem;display:flex}.winner-icon.goat{color:var(--goat-color);background:#10b9811f;box-shadow:0 0 35px #10b98133}.winner-icon.tiger{color:var(--tiger-color);background:#ef44441f;box-shadow:0 0 35px #ef444433}.modal-actions{gap:.7rem;margin-top:1rem;display:flex}.modal-title{margin-bottom:.75rem;font-size:2.5rem;font-weight:800}.modal-title.tiger{color:var(--tiger-color);text-shadow:0 0 20px var(--tiger-glow)}.modal-title.goat{color:var(--goat-color);text-shadow:0 0 20px var(--goat-glow)}.modal-subtitle{color:var(--text-secondary);margin-bottom:.7rem;font-size:1.1rem}.modal-winby{color:#ffffffa6;text-transform:uppercase;letter-spacing:.4px;font-size:.8rem}.restart-btn{background:linear-gradient(135deg, var(--accent-color), #2563eb);color:#fff;cursor:pointer;border:none;border-radius:12px;flex:1;width:100%;padding:.9rem 2rem;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s}@media (width<=480px){.modal-actions{flex-direction:column}}.restart-btn:hover{box-shadow:0 10px 20px var(--accent-glow);transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:scale(.8)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.rooms-page{flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:640px;margin:0 auto;padding:1rem;animation:.5s ease-out fadeInUp;display:flex}.rooms-page-header{text-align:center;animation:.6s ease-out fadeInUp}.rooms-page-header h1{letter-spacing:-1px;background:linear-gradient(135deg,#fff,#94a3b8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.25rem;font-size:2.8rem;font-weight:800}@media (width<=480px){.rooms-page-header h1{font-size:2.2rem}}.rooms-page-header p{color:var(--text-secondary);font-size:1rem;font-weight:300}.rooms-card{border-radius:20px;flex-direction:column;width:100%;max-height:calc(100dvh - 200px);animation:.7s ease-out fadeInUp;display:flex;overflow:hidden}.rooms-card-header{background:#00000040;border-bottom:1px solid #ffffff0f;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:1.25rem 1.5rem;display:flex}.rooms-card-title{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.rooms-card-header h2{color:var(--text-primary);font-size:1.2rem;font-weight:700}.rooms-online-badge{color:var(--goat-color);background:#10b9811f;border-radius:20px;align-items:center;gap:5px;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.rooms-card-actions{align-items:center;gap:.6rem;display:flex}.rooms-refresh-btn{justify-content:center;align-items:center;flex:0!important;width:auto!important;padding:.5rem .7rem!important;font-size:.85rem!important;transition:all .3s!important;display:inline-flex!important}.rooms-refresh-btn.spinning svg{animation:.6s linear infinite rotation}.rooms-play-btn{align-items:center;gap:6px;flex:0!important;width:auto!important;padding:.5rem 1.6rem!important;font-size:.95rem!important;display:inline-flex!important}.rooms-list{flex-direction:column;flex:1;gap:.6rem;padding:.75rem;display:flex;overflow-y:auto}.rooms-loading{color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:3rem;display:flex}.rooms-empty{text-align:center;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;padding:3rem 1rem;display:flex}.rooms-empty-icon{opacity:.4;margin-bottom:.75rem}.rooms-empty p{color:var(--text-primary);margin-bottom:.25rem;font-size:1.1rem;font-weight:600}.rooms-empty span{color:var(--text-secondary);font-size:.9rem}.room-card{background:#ffffff0a;border:1px solid #ffffff12;border-radius:14px;justify-content:space-between;align-items:center;padding:1rem 1.25rem;transition:all .25s cubic-bezier(.4,0,.2,1);animation:.35s ease-out both roomSlideIn;display:flex}@keyframes roomSlideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.room-card:hover{background:#ffffff14;border-color:#ffffff24;transform:translate(4px)}.room-card-left{flex-direction:column;gap:.25rem;display:flex}.room-card-id{color:var(--text-primary);font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:500}.room-card-meta{align-items:center;gap:.75rem;display:flex}.room-state-badge{text-transform:uppercase;letter-spacing:.35px;color:var(--text-secondary);background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;padding:2px 8px;font-size:.68rem;font-weight:700}.room-state-badge.waiting{color:#93c5fd;background:#3b82f62e;border-color:#3b82f659}.room-state-badge.playing{color:#86efac;background:#10b9812e;border-color:#10b98159}.room-state-badge.reconnecting{color:#facc15;background:#facc1529;border-color:#facc1559}.room-state-badge.finished{color:#cbd5e1;background:#94a3b829;border-color:#94a3b859}.room-card-players{color:var(--text-secondary);align-items:center;gap:.4rem;font-size:.82rem;display:flex}.room-card-spectators{color:var(--text-secondary);opacity:.7;align-items:center;gap:3px;font-size:.78rem;display:inline-flex}.room-status-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.room-status-dot.open{background:var(--goat-color);box-shadow:0 0 6px var(--goat-glow);animation:2s ease-in-out infinite dotGlow}@keyframes dotGlow{0%,to{box-shadow:0 0 4px var(--goat-glow)}50%{box-shadow:0 0 10px var(--goat-glow)}}.room-status-dot.full{background:var(--tiger-color);box-shadow:0 0 6px var(--tiger-glow)}.room-card button{white-space:nowrap;flex:0;align-items:center;gap:5px;width:auto;padding:.55rem 1.2rem;display:inline-flex}@media (width<=480px){.rooms-card-header{padding:1rem}.room-card{padding:.85rem 1rem}.room-card-id{font-size:.9rem}}