@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap";:root{--bg-primary:#071220;--bg-secondary:#0b1a2e;--bg-tertiary:#0f243f;--bg-card:#0b1a2ed9;--bg-glass:#00f2fe0a;--bg-glass-hover:#00f2fe14;--surface-board:#071220;--surface-grid-line:#00f2fe14;--surface-grid-line-major:#00f2fe29;--tile-red:#f05;--tile-blue:#00d2ff;--tile-orange:#ffea00;--tile-black:#fff;--tile-joker:#00f2fe;--tile-bg:#1c1d22;--tile-bg-hover:#26272e;--tile-shadow:#0006;--tile-border:#ffffff1a;--accent-primary:#00f2fe;--accent-primary-glow:#00f2fe33;--accent-success:#10b981;--accent-success-glow:#10b98133;--accent-danger:#ef4444;--accent-danger-glow:#ef444433;--accent-warning:#facc15;--accent-warning-glow:#facc1533;--text-primary:#f9fafb;--text-secondary:#9ca3af;--text-muted:#6b7280;--text-tile:#e5e7eb;--border-subtle:#00f2fe1a;--border-medium:#00f2fe33;--border-active:#00f2fe80;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--tile-width:60px;--tile-height:80px;--rack-height:192px;--hud-height:56px;--grid-cell:72px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-tile:8px;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 30px #00000080;--shadow-tile:0 2px 8px #0000004d, 0 1px 2px #0003;--shadow-tile-drag:0 12px 40px #00000080, 0 4px 12px #0000004d;--shadow-glow:0 0 20px var(--accent-primary-glow);--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);--transition-bounce:.5s cubic-bezier(.34, 1.56, .64, 1);--z-board:1;--z-tiles:10;--z-rack:20;--z-hud:30;--z-drag:50;--z-modal:100;--z-toast:110}@media (width<=768px){:root{--tile-width:46px;--tile-height:62px;--rack-height:156px;--hud-height:88px;--grid-cell:56px;--space-md:12px;--space-lg:16px}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100dvh;font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overflow:hidden}#root{flex-direction:column;width:100%;height:100dvh;display:flex}.game-layout{flex-direction:column;width:100%;height:100dvh;display:flex;position:relative}.game-board-container{background:var(--surface-board);background-image:radial-gradient(at 20%,#00f2fe0a 0%,#0000 60%),radial-gradient(at 80% 20%,#0ea5e908 0%,#0000 50%);flex:1;position:relative;overflow:hidden}.game-board-canvas{cursor:grab;width:100%;height:100%}.game-board-canvas:active{cursor:grabbing}.game-board-canvas.is-dragging-tile{cursor:none}.game-hud{height:var(--hud-height);padding:0 var(--space-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);z-index:var(--z-hud);justify-content:space-between;align-items:center;gap:var(--space-sm);display:flex}.hud-logo-container{border-right:1px solid var(--border-subtle);align-items:center;height:24px;margin-right:8px;padding-right:12px;display:flex}.hud-logo-text{font-family:var(--font-mono);color:var(--accent-primary);letter-spacing:.5px;text-shadow:var(--shadow-glow);text-transform:lowercase;font-size:18px;font-weight:900}@media (width<=480px){.hud-logo-container{display:none}}.hud-section{align-items:center;gap:var(--space-sm);display:flex}.hud-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-size:11px;font-weight:600}.hud-value{font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--text-primary)}.hud-player-name{color:var(--accent-primary);text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-size:14px;font-weight:700;overflow:hidden}@media (width<=768px){.hud-label{font-size:9px}.hud-value{font-size:12px}.hud-player-name{max-width:80px;font-size:12px}}.turn-timer{width:36px;height:36px;position:relative}.turn-timer svg{transform:rotate(-90deg)}.turn-timer-circle-bg{fill:none;stroke:var(--border-subtle);stroke-width:3px}.turn-timer-circle{fill:none;stroke:var(--accent-primary);stroke-width:3px;stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s}.turn-timer-circle.warning{stroke:var(--accent-warning)}.turn-timer-circle.danger{stroke:var(--accent-danger);animation:.5s ease-in-out infinite alternate pulse-timer}.turn-timer-text{font-size:11px;font-weight:700;font-family:var(--font-mono);color:var(--text-primary);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}@keyframes pulse-timer{0%{opacity:1}to{opacity:.5}}.player-rack{align-items:center;gap:var(--space-sm);height:auto;min-height:110px;padding:16px var(--space-md) var(--space-sm);color:var(--text-primary);border-top:4px solid var(--border-medium);box-shadow:inset 0 2px 8px #00000080, var(--shadow-lg);z-index:var(--z-rack);background:#111622;display:flex;position:relative;overflow:hidden}.player-rack:before{content:"";opacity:.9;background-image:repeating-linear-gradient(90deg,#00f2fe40 0 1px,#0000 1px 8px),repeating-linear-gradient(90deg,#00f2fe99 0 2px,#0000 2px 40px);height:12px;position:absolute;top:0;left:0;right:0}.player-rack .scroll-btn,.player-rack .sort-btn{background:var(--bg-glass)!important;color:var(--text-secondary)!important;border-color:var(--border-subtle)!important}.player-rack .scroll-btn:hover,.player-rack .sort-btn:hover{box-shadow:var(--shadow-glow);background:var(--bg-glass-hover)!important;color:var(--accent-primary)!important;border-color:var(--border-active)!important}.player-rack .tile-count-badge{background:var(--accent-primary)!important;color:#071220!important}.rack-tiles-container{height:auto;max-height:calc(3 * var(--tile-height) + 16px);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;flex-wrap:wrap;flex:1;align-content:flex-start;gap:4px;padding:4px 0;display:flex;overflow:hidden}.rack-controls{gap:var(--space-xs);flex-direction:column;flex-shrink:0;display:flex}.rack-scroll-buttons{flex-shrink:0;gap:2px;display:flex}.scroll-btn{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-glass);width:32px;height:32px;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;font-size:10px;font-weight:700;display:flex}.scroll-btn:hover{background:var(--bg-glass-hover);color:var(--text-primary);border-color:var(--border-medium)}.scroll-btn:active{transform:scale(.9)}.tile{width:var(--tile-width);height:var(--tile-height);border-radius:var(--radius-tile);background:var(--tile-bg);cursor:grab;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-tile);transition:transform var(--transition-fast), box-shadow var(--transition-fast);touch-action:none;border:2px solid #0000001a;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.tile:before{content:"";border-radius:calc(var(--radius-tile) - 2px);pointer-events:none;background:linear-gradient(135deg,#fff6 0%,#0000 50%);position:absolute;inset:2px}.tile:hover{box-shadow:var(--shadow-tile-drag);background:var(--tile-bg-hover);transform:translateY(-3px)scale(1.03)}.tile:active{cursor:grabbing}.tile.is-dragging{opacity:.4;transform:scale(.95)}.tile.is-new-drawn{box-shadow:0 0 15px var(--accent-primary-glow), var(--shadow-tile);animation:1.5s ease-in-out infinite alternate draw-pulse;border-color:var(--accent-primary)!important}@keyframes draw-pulse{0%{box-shadow:0 0 8px var(--accent-primary-glow), var(--shadow-tile);transform:scale(1)}to{box-shadow:0 0 18px #00f2fe80, var(--shadow-tile);transform:scale(1.05);border-color:#00f2fecc!important}}.tile-number{font-size:22px;font-weight:800;font-family:var(--font-mono);line-height:1}.tile-number-small{font-size:9px;font-weight:700;font-family:var(--font-mono);position:absolute;top:4px;left:6px}.tile-dots{gap:2px;display:flex;position:absolute;bottom:6px}.tile-dot{border-radius:50%;width:4px;height:4px}.tile--red .tile-number,.tile--red .tile-number-small{color:var(--tile-red)}.tile--red .tile-dot{background:var(--tile-red)}.tile--blue .tile-number,.tile--blue .tile-number-small{color:var(--tile-blue)}.tile--blue .tile-dot{background:var(--tile-blue)}.tile--orange .tile-number,.tile--orange .tile-number-small{color:var(--tile-orange)}.tile--orange .tile-dot{background:var(--tile-orange)}.tile--black .tile-number,.tile--black .tile-number-small{color:var(--tile-black)}.tile--black .tile-dot{background:var(--tile-black)}.tile--joker{background:linear-gradient(135deg,#00f2fe 0%,#00a8f3 100%);border-color:#00f2fe4d}.tile--joker .tile-number{color:#fff;text-transform:uppercase;letter-spacing:1px;font-size:14px;font-weight:700}@media (width<=768px){.tile-number{font-size:18px}.tile-number-small{font-size:8px;top:3px;left:4px}}.tile-ghost{z-index:var(--z-drag);pointer-events:none;opacity:.9;box-shadow:var(--shadow-tile-drag);transition:none;position:fixed;transform:scale(1.1)rotate(2deg)}.grid-cell-indicator{width:var(--grid-cell);height:var(--grid-cell);border-radius:var(--radius-sm);pointer-events:none;transition:opacity var(--transition-fast);position:absolute}.grid-cell-indicator--valid{background:var(--accent-success-glow);border:2px dashed var(--accent-success);animation:1.5s ease-in-out infinite cell-pulse}.grid-cell-indicator--invalid{background:var(--accent-danger-glow);border:2px dashed var(--accent-danger)}@keyframes cell-pulse{0%,to{opacity:.4}50%{opacity:.8}}.btn{justify-content:center;align-items:center;gap:var(--space-xs);border:1px solid var(--border-medium);border-radius:var(--radius-md);background:var(--bg-glass);color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;-webkit-backdrop-filter:blur(10px);padding:8px 16px;font-size:13px;font-weight:600;display:inline-flex}.btn:hover{background:var(--bg-glass-hover);border-color:var(--border-active);box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn--primary{background:linear-gradient(135deg, var(--accent-primary), #38bdf8);border-color:var(--accent-primary);color:#071220;font-weight:700}.btn--primary:hover{filter:brightness(1.1);box-shadow:0 0 24px var(--accent-primary-glow)}.btn--success{background:linear-gradient(135deg, var(--accent-success), #34d399);border-color:var(--accent-success);color:#fff}.btn--success:hover{filter:brightness(1.1);box-shadow:0 0 24px var(--accent-success-glow)}.btn--danger{background:linear-gradient(135deg, var(--accent-danger), #f87171);border-color:var(--accent-danger);color:#fff}.btn--danger:hover{filter:brightness(1.1);box-shadow:0 0 24px var(--accent-danger-glow)}.btn--outline{border-color:var(--border-medium);color:var(--text-primary);background:0 0}.btn--outline:hover{background:var(--bg-glass-hover);border-color:var(--border-active);box-shadow:var(--shadow-glow)}.btn--text{color:var(--text-secondary);-webkit-backdrop-filter:none;background:0 0;border-color:#0000}.btn--text:hover{color:var(--text-primary);box-shadow:none;background:#ffffff0d;border-color:#0000}.btn--small{padding:5px 10px;font-size:11px}.btn--icon{border-radius:var(--radius-sm);width:36px;height:36px;padding:0}@media (width<=768px){.btn{padding:6px 12px;font-size:12px}.btn--small{padding:4px 8px;font-size:10px}}.lobby{background:var(--bg-primary);width:100%;height:100%;padding:var(--space-lg);background-image:radial-gradient(at 30% 20%,#00f2fe14 0%,#0000 50%),radial-gradient(at 70% 80%,#0ea5e90f 0%,#0000 50%),radial-gradient(#e5e7eb0a 0%,#0000 60%);flex-direction:column;justify-content:center;align-items:center;display:flex}.lobby-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);width:100%;max-width:480px;padding:var(--space-2xl);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-lg)}.lobby-title{text-align:center;margin-bottom:var(--space-xs);background:linear-gradient(135deg, var(--accent-primary), #38bdf8, #e5e7eb);-webkit-text-fill-color:transparent;letter-spacing:1px;font-size:36px;font-weight:900;font-family:var(--font-mono);text-transform:lowercase;-webkit-background-clip:text;background-clip:text}.lobby-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:var(--space-xl);font-size:14px}.lobby-form{gap:var(--space-md);flex-direction:column;display:flex}.lobby-input-group{gap:var(--space-xs);flex-direction:column;display:flex}.lobby-input-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-size:12px;font-weight:600}.lobby-input{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-md);min-width:120px;color:var(--text-primary);font-family:var(--font-sans);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;flex:1;padding:10px 14px;font-size:14px}.lobby-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-glow)}.lobby-input::placeholder{color:var(--text-muted)}.lobby-select{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:10px 14px;font-size:14px}.lobby-select:focus,.lobby-select:hover{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-glow)}.lobby-select option,select option{color:var(--text-primary)!important;background-color:#0b1a2e!important}.lobby-players{gap:var(--space-sm);flex-direction:column;display:flex}.lobby-player-row{align-items:center;gap:var(--space-sm);width:100%;display:flex}@media (width<=580px){.lobby-player-row{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff05;padding:12px;grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:8px!important;display:grid!important}.lobby-player-row .lobby-player-badge{grid-area:1/1}.lobby-player-row .lobby-input{grid-area:1/2;width:100%;min-width:0}.lobby-player-row button.btn--danger{grid-area:1/3}.lobby-player-row .lobby-select{grid-column:2/span 2;width:100%}.lobby-player-row .lobby-select:first-of-type{grid-row:2}.lobby-player-row .lobby-select:nth-of-type(2){grid-row:3;margin-top:4px}}.lobby-player-badge{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:700;display:flex}.lobby-player-badge:first-child{background:var(--tile-red)}.lobby-player-row:nth-child(2) .lobby-player-badge{background:var(--tile-blue)}.lobby-player-row:nth-child(3) .lobby-player-badge{background:var(--tile-orange)}.lobby-player-row:nth-child(4) .lobby-player-badge{background:var(--tile-black)}.lobby-add-player{justify-content:center;align-items:center;gap:var(--space-xs);border:2px dashed var(--border-subtle);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);font-size:13px;font-family:var(--font-sans);background:0 0;padding:8px;display:flex}.lobby-add-player:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:var(--accent-primary-glow)}.lobby-start-btn{margin-top:var(--space-md);width:100%;padding:14px;font-size:16px;font-weight:700}@media (width<=768px){.lobby-card{padding:var(--space-lg)}.lobby-title{font-size:26px}}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:var(--z-modal);animation:fadeIn var(--transition-normal) ease;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-card);border:1px solid var(--border-medium);border-radius:var(--radius-xl);padding:var(--space-2xl);text-align:center;width:90%;max-width:420px;box-shadow:var(--shadow-lg);animation:scaleIn var(--transition-bounce) ease}.modal-title{margin-bottom:var(--space-sm);font-size:28px;font-weight:900}.modal-message{color:var(--text-secondary);margin-bottom:var(--space-xl);font-size:16px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.toast-container{top:calc(var(--hud-height) + var(--space-md));right:var(--space-md);z-index:var(--z-toast);gap:var(--space-sm);pointer-events:none;flex-direction:column;display:flex;position:fixed}.toast{padding:var(--space-sm) var(--space-md);background:var(--bg-card);border:1px solid var(--border-medium);border-radius:var(--radius-md);color:var(--text-primary);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(20px);animation:slideInRight var(--transition-normal) ease;pointer-events:auto;font-size:13px;font-weight:500}.toast--error{border-color:var(--accent-danger);background:#ef44441a}.toast--success{border-color:var(--accent-success);background:#10b9811a}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.your-turn-indicator{top:calc(var(--hud-height) + var(--space-md));padding:var(--space-sm) var(--space-lg);background:var(--bg-card);border:2px solid var(--accent-primary);border-radius:var(--radius-md);color:var(--accent-primary);font-family:var(--font-mono);z-index:var(--z-hud);box-shadow:0 0 15px var(--accent-primary-glow);animation:bounceIn var(--transition-bounce) ease;pointer-events:none;letter-spacing:.5px;text-transform:uppercase;font-size:14px;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}@keyframes bounceIn{0%{opacity:0;transform:translate(-50%)scale(.8)translateY(-10px)}to{opacity:1;transform:translate(-50%)scale(1)translateY(0)}}@keyframes bounceInMobile{0%{opacity:0;transform:scale(.8)translateY(-10px)}to{opacity:1;transform:scale(1)translateY(0)}}.tile-count-badge{background:var(--accent-primary);color:#071220;min-width:24px;height:24px;font-size:11px;font-weight:700;font-family:var(--font-mono);border-radius:12px;justify-content:center;align-items:center;padding:0 6px;display:inline-flex}.validation-overlay{pointer-events:none;z-index:calc(var(--z-tiles) + 1);position:absolute;inset:0}.valid-highlight{box-shadow:var(--shadow-tile);border-radius:var(--radius-tile);outline:3px solid #fff}.invalid-highlight{box-shadow:var(--shadow-tile);border-radius:var(--radius-tile);outline:3px dashed #ef4444;animation:.4s ease-in-out shake,.5s ease-in-out infinite alternate flash-invalid}@keyframes flash-invalid{0%{outline-color:#ef444433}to{outline-color:#ef4444}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}.score-table{border-collapse:collapse;width:100%;margin:var(--space-md) 0}.score-table th,.score-table td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--border-subtle)}.score-table th{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-size:11px;font-weight:600}.score-table td{font-size:14px;font-weight:500}.score-table .winner td{color:var(--accent-success);font-weight:700}.sort-buttons{flex-shrink:0;gap:2px;display:flex}.sort-btn{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-glass);width:32px;height:32px;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;font-size:14px;display:flex}.sort-btn:hover{background:var(--bg-glass-hover);color:var(--text-primary);border-color:var(--border-medium)}.pool-counter{align-items:center;gap:var(--space-xs);background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:4px 10px;display:flex}.pool-counter-icon{font-size:14px}.pool-counter-text{font-size:12px;font-weight:600;font-family:var(--font-mono);color:var(--text-secondary)}@media (width<=768px){.player-rack{gap:var(--space-xs) var(--space-sm);height:auto;min-height:156px;padding:var(--space-sm) var(--space-md);grid-template-rows:auto auto;grid-template-columns:auto 1fr auto;display:grid}.rack-controls{align-items:center;gap:var(--space-xs);flex-direction:row;grid-area:1/1}.tile-count-badge{grid-area:1/3;place-self:center end}.rack-tiles-container{height:auto;max-height:calc(3 * var(--tile-height) + 16px);padding:var(--space-xs) 0;flex-wrap:wrap;grid-area:2/1/auto/span 3;justify-content:center;overflow:hidden}.game-hud{height:var(--hud-height);padding:8px var(--space-sm);gap:6px var(--space-xs);grid-template-rows:auto auto;grid-template-columns:1fr 1fr;display:grid}.game-hud .hud-section:first-child{grid-area:1/1;justify-content:flex-start;align-items:center}.game-hud .hud-section:nth-child(2){grid-area:1/2;justify-content:flex-end;align-items:center}.game-hud .hud-section:nth-child(3){justify-content:center;gap:var(--space-xs);border-top:1px solid var(--border-subtle);flex-wrap:wrap;grid-area:2/1/auto/span 2;width:100%;padding-top:6px}.game-hud .btn--small{padding:5px 8px;font-size:11px}.toast-container{left:auto;right:var(--space-sm);max-width:200px;top:calc(var(--hud-height) + var(--space-sm))}.your-turn-indicator{left:var(--space-sm);top:calc(var(--hud-height) + var(--space-sm));border-radius:var(--radius-md);animation:bounceInMobile var(--transition-bounce) ease;padding:6px 12px;font-size:12px;transform:none}}.pass-device-overlay{-webkit-backdrop-filter:blur(24px);z-index:99999;background:#0a0a0cf2;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.pass-device-card{background:var(--bg-card);border:1px solid var(--border-medium);border-radius:var(--radius-xl);text-align:center;width:90%;max-width:400px;box-shadow:var(--shadow-lg);flex-direction:column;align-items:center;gap:20px;padding:32px;animation:.3s scaleIn;display:flex}.trade-proposal-overlay{-webkit-backdrop-filter:blur(16px);z-index:99999;background:#0a0a0ce6;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.trade-proposal-card{background:var(--bg-card);border:1px solid var(--border-medium);border-radius:var(--radius-xl);padding:var(--space-lg);text-align:center;flex-direction:column;align-items:center;width:92%;max-width:420px;animation:.25s cubic-bezier(.34,1.56,.64,1) scaleIn;display:flex;box-shadow:0 20px 50px #0009,0 0 30px #00f2fe1a}.trade-proposal-card.proposer-waiting{box-shadow:0 20px 50px #0009,0 0 30px #10b9810d}.trade-tile-badge{background:var(--tile-bg);color:var(--text-tile);border-radius:var(--radius-sm);box-shadow:var(--shadow-tile);border:1px solid #0000001a;margin:0 4px;padding:4px 10px;font-size:14px;font-weight:700;display:inline-block}.trade-timer-track{border-radius:var(--radius-sm);background:#ffffff14;width:100%;height:6px;margin:16px 0 8px;overflow:hidden}.trade-timer-bar{background:linear-gradient(90deg, var(--accent-warning), var(--accent-danger));border-radius:var(--radius-sm);height:100%;transition:width .1s linear}.trade-proposal-card.proposer-waiting .trade-timer-bar{background:linear-gradient(90deg, var(--accent-primary), var(--accent-success))}.trade-timer-text{color:var(--text-secondary);font-size:13px;font-weight:500}.trade-actions{gap:var(--space-md);justify-content:center;width:100%;display:flex}.trade-actions button{flex:1;padding:12px 24px;font-size:15px}.trade-offline-options{width:100%}.trade-offline-buttons{max-height:180px;margin-bottom:8px;padding-right:4px;overflow-y:auto}.trade-offline-buttons::-webkit-scrollbar{width:6px}.trade-offline-buttons::-webkit-scrollbar-track{background:0 0}.trade-offline-buttons::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:3px}.lobby-title{cursor:pointer;transition:transform var(--transition-fast), filter var(--transition-fast);width:fit-content;margin:0 auto;display:block}.lobby-title:hover{filter:brightness(1.2);transform:scale(1.05)}.tile.is-new-drawn{animation:3s cubic-bezier(.25,1,.5,1) forwards drawGlow}@keyframes drawGlow{0%{box-shadow:0 0 20px #00f2fee6, var(--shadow-tile);border-color:#00f2fecc;transform:scale(1.05)}30%{box-shadow:0 0 15px #00f2feb3, var(--shadow-tile);border-color:#00f2fe99}to{box-shadow:var(--shadow-tile);border-color:var(--tile-border);transform:scale(1)}}.tile-count-badge.is-offline{filter:grayscale(80%);border:1px dashed var(--accent-danger);position:relative;opacity:.35!important}.offline-badge-indicator{background:var(--bg-secondary);border-radius:50%;padding:1px;font-size:10px;animation:1.5s ease-in-out infinite alternate pulse-offline;position:absolute;top:-8px;right:-8px}@keyframes pulse-offline{0%{filter:drop-shadow(0 0 1px #ef444480);transform:scale(.9)}to{filter:drop-shadow(0 0 4px #ef4444e6);transform:scale(1.1)}}.offline-warning-banner{top:calc(var(--hud-height) + 16px);z-index:40;-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);color:var(--text-primary);background:#ef444426;border:1px solid #ef44444d;justify-content:space-between;align-items:center;gap:16px;width:540px;max-width:90%;padding:12px 20px;font-size:14px;animation:.4s cubic-bezier(.16,1,.3,1) slideDownFade;display:flex;position:absolute;left:50%;transform:translate(-50%)}.offline-warning-banner span{align-items:center;gap:8px;display:flex}@keyframes slideDownFade{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}@media (width<=768px){.offline-warning-banner{text-align:center;width:calc(100% - 24px);top:calc(var(--hud-height) + 8px);flex-direction:column;align-items:stretch;gap:10px}.offline-warning-banner span{justify-content:center}}.spinning-loader{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mini-chat-container{z-index:25;pointer-events:none;flex-direction:column;align-items:flex-end;display:flex;position:absolute;bottom:16px;right:16px}.mini-chat-toggle-btn{pointer-events:auto;align-items:center;gap:var(--space-xs);border-radius:var(--radius-xl);border:1px solid var(--border-medium);background:var(--bg-card);color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;box-shadow:var(--shadow-lg), var(--shadow-glow);-webkit-backdrop-filter:blur(16px);transition:all var(--transition-normal);padding:10px 18px;font-size:13px;font-weight:700;display:flex}.mini-chat-toggle-btn:hover{background:var(--bg-glass-hover);border-color:var(--accent-primary);transform:translateY(-2px)}.chat-unread-badge{background:var(--accent-danger);color:#fff;border-radius:10px;padding:2px 6px;font-size:10px;font-weight:800;line-height:1;animation:1s infinite alternate pulse-unread;box-shadow:0 0 8px #ef444480}@keyframes pulse-unread{0%{transform:scale(1)}to{transform:scale(1.1)}}.mini-chat-window{pointer-events:auto;width:320px;height:380px;max-height:calc(100vh - var(--rack-height) - var(--hud-height) - 40px);background:var(--bg-card);border:1px solid var(--border-medium);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg), var(--shadow-glow);-webkit-backdrop-filter:blur(24px);animation:slide-in-chat var(--transition-normal) ease-out;flex-direction:column;margin-bottom:12px;display:flex;overflow:hidden}@keyframes slide-in-chat{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.chat-window-header{padding:var(--space-md);border-bottom:1px solid var(--border-subtle);background:#0003;justify-content:space-between;align-items:center;display:flex}.chat-window-header h3{font-size:14px;font-weight:800;font-family:var(--font-mono);text-transform:uppercase;color:var(--accent-primary)}.chat-close-btn{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;padding:4px;font-size:16px}.chat-close-btn:hover{color:var(--accent-danger);background:#ef44441a}.chat-messages-log{padding:var(--space-md);gap:var(--space-sm);scroll-behavior:smooth;flex-direction:column;flex:1;display:flex;overflow-y:auto}.chat-empty-state{text-align:center;color:var(--text-muted);padding:0 var(--space-lg);margin-top:auto;margin-bottom:auto;font-size:12px;line-height:1.5}.chat-message-row{max-width:80%;animation:message-fade-in var(--transition-fast) ease-out;flex-direction:column;display:flex}@keyframes message-fade-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.message-is-me{align-self:flex-end;align-items:flex-end}.message-is-other{align-self:flex-start;align-items:flex-start}.message-sender{color:var(--text-secondary);margin-bottom:2px;margin-left:6px;font-size:10px;font-weight:600}.message-bubble{word-break:break-word;border-radius:14px;padding:8px 12px;font-size:13px;line-height:1.4}.message-is-me .message-bubble{background:linear-gradient(135deg, var(--accent-primary), #0ea5e9);color:#071220;border-bottom-right-radius:2px;font-weight:600;box-shadow:0 2px 8px #00f2fe40}.message-is-other .message-bubble{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-subtle);border-bottom-left-radius:2px}.chat-quick-controls{padding:var(--space-md);border-top:1px solid var(--border-subtle);gap:var(--space-sm);background:#00000026;flex-direction:column;flex-shrink:0;display:flex;position:relative}.chat-cooldown-overlay{-webkit-backdrop-filter:blur(2px);z-index:10;background:#0b1a2ebf;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.chat-cooldown-overlay span{color:var(--accent-warning);font-size:12px;font-weight:700;font-family:var(--font-mono);animation:1s infinite alternate pulse-cooldown}@keyframes pulse-cooldown{0%{opacity:.6}to{opacity:1}}.chat-emojis-row{justify-content:space-between;gap:4px;display:flex}.quick-emoji-btn{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);flex:1;padding:4px;font-size:18px}.quick-emoji-btn:hover:not(:disabled){background:var(--bg-glass-hover);border-color:var(--accent-primary);transform:scale(1.15)}.quick-emoji-btn:active:not(:disabled){transform:scale(.95)}.chat-texts-grid{flex-shrink:0;grid-template-columns:repeat(2,1fr);gap:6px;max-height:130px;display:grid;overflow-y:auto}.quick-phrase-btn{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);padding:6px var(--space-xs);cursor:pointer;text-align:center;white-space:nowrap;text-overflow:ellipsis;transition:all var(--transition-fast);font-size:11px;font-weight:600;overflow:hidden}.quick-phrase-btn:hover:not(:disabled){background:var(--bg-glass-hover);border-color:var(--accent-primary);color:var(--accent-primary)}.quick-phrase-btn:active:not(:disabled){transform:scale(.98)}.chat-preview-bubble{pointer-events:auto;cursor:pointer;background:var(--bg-card);border:1px solid var(--border-medium);border-radius:var(--radius-md);box-shadow:var(--shadow-lg), var(--shadow-glow);-webkit-backdrop-filter:blur(16px);min-width:120px;max-width:240px;transition:all var(--transition-normal);flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:8px;padding:10px 14px;animation:.3s cubic-bezier(.34,1.56,.64,1) bounce-in-preview;display:flex;position:relative}.chat-preview-bubble:hover{background:var(--bg-glass-hover);border-color:var(--accent-primary);transform:translateY(-2px)}.chat-preview-bubble .preview-sender{color:var(--accent-primary);text-transform:uppercase;letter-spacing:.5px;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11px;font-weight:800;overflow:hidden}.chat-preview-bubble .preview-text{color:var(--text-primary);word-break:break-word;font-size:13px;line-height:1.35}.chat-preview-bubble .preview-arrow{border-left:6px solid #0000;border-right:6px solid #0000;border-top:6px solid var(--border-medium);width:0;height:0;position:absolute;bottom:-6px;right:24px}.chat-preview-bubble:after{content:"";z-index:1;border-top:5px solid #0b1a2ef2;border-left:5px solid #0000;border-right:5px solid #0000;width:0;height:0;position:absolute;bottom:-5px;right:25px}@keyframes bounce-in-preview{0%{opacity:0;transform:translateY(10px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=768px){.mini-chat-container{bottom:12px;right:12px}.mini-chat-window{width:280px;height:320px;max-height:calc(100% - 24px)}}.dashboard-glass{transition:all .3s;-webkit-backdrop-filter:blur(20px)!important;background:#0b1a2e73!important;border:1px solid #ff6b0026!important;box-shadow:0 16px 40px #00000080,0 0 20px #ff6b000d!important}.dashboard-game-row{transition:all .2s ease-in-out}.dashboard-game-row:hover{transform:translateY(-1px);background:#ffffff0a!important;border-color:#ff6b0059!important}.pulsing-dot{background-color:#fff;border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite pulse-gold;display:inline-block}@keyframes pulse-gold{0%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}to{opacity:.5;transform:scale(.8)}}.spinning-loader{animation:1.5s linear infinite spin;display:inline-block}.local-your-turn-banner{background:linear-gradient(135deg, var(--accent-primary), #ffb703);color:#071220;border-radius:var(--radius-md);z-index:99;border:none;padding:10px 20px;font-size:14px;font-weight:700;animation:.3s ease-out bounce-in-indicator;position:absolute;bottom:16px;left:16px;box-shadow:0 4px 16px #ff6b0066}.npc-thinking-indicator{color:#071220;border-radius:var(--radius-md);z-index:99;background:linear-gradient(135deg,#219ebc,#8ecae6);padding:10px 20px;font-size:14px;font-weight:700;animation:.3s ease-out bounce-in-indicator,1.5s ease-in-out infinite pulse-indicator;position:absolute;bottom:16px;left:16px;box-shadow:0 4px 16px #219ebc66}@keyframes bounce-in-indicator{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes pulse-indicator{0%{opacity:.85}50%{opacity:1;transform:scale(1.03)}to{opacity:.85}}.last-action-banner{top:calc(var(--hud-height) + 12px);z-index:30;border:1px solid var(--border-medium);border-radius:var(--radius-xl);color:var(--accent-primary);font-family:var(--font-mono);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-lg), 0 0 10px #00f2fe0d;pointer-events:none;text-transform:uppercase;letter-spacing:.5px;background:#0b1a2eb3;align-items:center;gap:8px;padding:8px 20px;font-size:13px;font-weight:700;animation:.3s cubic-bezier(.16,1,.3,1) slide-down-fade;display:flex;position:absolute;left:50%;transform:translate(-50%)}@keyframes slide-down-fade{0%{opacity:0;transform:translate(-50%,-15px)}to{opacity:1;transform:translate(-50%)}}.lobby-footer{justify-content:center;align-items:center;gap:var(--space-md);padding:16px var(--space-lg);z-index:10;pointer-events:auto;background:0 0;display:flex;position:absolute;bottom:12px;left:0;right:0}.footer-link-btn{color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast), transform var(--transition-fast);font-size:13px;font-weight:500;font-family:var(--font-sans);background:0 0;border:none;outline:none}.footer-link-btn:hover{color:var(--accent-primary);transform:translateY(-1px)}.footer-separator{color:var(--text-muted);-webkit-user-select:none;user-select:none;font-size:12px}.help-page-overlay{animation:.25s cubic-bezier(.16,1,.3,1) forwards fade-in-help}@keyframes fade-in-help{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.help-page-card{flex-direction:column;width:100%;max-height:85vh;display:flex}.help-back-btn{color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast);font-size:13px;font-weight:500;font-family:var(--font-sans);background:0 0;border:none;align-self:flex-start;margin-bottom:16px;padding:0}.help-back-btn:hover{color:var(--accent-primary)}.help-page-title{margin-bottom:4px!important}.help-scroll-container{flex:1;margin-top:16px;padding-right:8px;overflow-y:auto}.help-scroll-container::-webkit-scrollbar{width:6px}.help-scroll-container::-webkit-scrollbar-track{background:#00000026;border-radius:3px}.help-scroll-container::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:3px}.help-scroll-container::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.help-section{margin-bottom:24px}.help-section h3{color:var(--accent-primary);margin-bottom:8px;font-size:15px;font-weight:700}.help-section p{color:var(--text-secondary);margin-bottom:8px;font-size:13px;line-height:1.6}.help-section ul,.help-section ol{margin-bottom:8px;padding-left:20px}.help-section li{color:var(--text-secondary);margin-bottom:6px;font-size:13px;line-height:1.6}.help-tile{border-radius:var(--radius-sm);background:var(--tile-bg);width:32px;height:42px;font-family:var(--font-mono);box-shadow:var(--shadow-sm);-webkit-user-select:none;user-select:none;border:1px solid #ffffff26;justify-content:center;align-items:center;font-size:13px;font-weight:800;display:inline-flex}.help-tile--red{color:var(--tile-red);border-color:#ff4f3333}.help-tile--blue{color:var(--text-tile);border-color:#ffffff1a}.help-tile--orange{color:var(--tile-orange);border-color:#facc1533}.help-tile--black{color:var(--tile-black);border-color:#34d39933}.help-tile--joker{color:#fff;background:linear-gradient(135deg,#00f2fe 0%,#00a8f3 100%);border-color:#00f2fe4d;width:44px;font-size:9px;font-weight:700}.help-example-box{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#00000040;padding:12px 16px}.help-example-box h4{color:var(--text-primary);margin-bottom:4px;font-size:13px;font-weight:600}.help-example-box p{margin-bottom:8px;font-size:12px}.help-example-note{color:var(--text-muted);margin-top:6px;font-size:11px;font-style:italic;display:block}.changelog-timeline{border-left:1px solid var(--border-medium);flex-direction:column;margin-left:8px;padding-left:20px;display:flex;position:relative}.timeline-item{margin-bottom:28px;position:relative}.timeline-item:last-child{margin-bottom:12px}.timeline-badge{background:var(--bg-primary);border:2px solid var(--text-muted);z-index:2;width:11px;height:11px;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;font-size:0;display:flex;position:absolute;top:2px;left:-26px}.timeline-item--current .timeline-badge{background:var(--accent-primary);border-color:var(--accent-primary-glow);width:17px;height:17px;box-shadow:0 0 10px var(--accent-primary-glow);color:#071220;font-size:10px;font-weight:900;left:-29px}.timeline-content{border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:background var(--transition-fast), border-color var(--transition-fast);background:#ffffff03;padding:14px 18px}.timeline-content:hover{border-color:var(--border-medium);background:#ffffff05}.timeline-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.timeline-version{font-family:var(--font-mono);color:var(--accent-primary);background:var(--accent-primary-glow);border-radius:4px;padding:2px 6px;font-size:12px;font-weight:700}.timeline-date{color:var(--text-muted);font-size:11px}.timeline-title{color:var(--text-primary);margin-bottom:8px;font-size:14px;font-weight:700}.timeline-list{margin:0;padding-left:16px}.timeline-list li{color:var(--text-secondary);margin-bottom:4px;font-size:12px;line-height:1.5}.timeline-list li:last-child{margin-bottom:0}.board-floating-controls{z-index:25;align-items:center;gap:var(--space-xs);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg), var(--shadow-glow);-webkit-backdrop-filter:blur(16px);pointer-events:auto;padding:6px 12px;display:flex;position:absolute;top:16px;left:16px}.board-floating-controls .control-btn{background:var(--bg-glass);border:1px solid var(--border-subtle);width:34px;height:34px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border-radius:50%;outline:none;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex}.board-floating-controls .control-btn:hover{background:var(--bg-glass-hover);color:var(--accent-primary);border-color:var(--accent-primary);box-shadow:var(--shadow-glow);transform:translateY(-1px)}.board-floating-controls .control-btn:active{transform:translateY(0)}.board-floating-controls .control-divider{background:var(--border-subtle);width:1px;height:20px;margin:0 4px}.board-floating-controls .mode-btn{font-family:var(--font-sans);padding:0 12px;border-radius:var(--radius-md)!important;width:auto!important}.board-floating-controls .mode-btn.active{font-weight:700;background:var(--accent-primary-glow)!important;border-color:var(--accent-primary)!important;color:var(--accent-primary)!important}@media (width<=768px){.board-floating-controls{padding:4px 8px;top:12px;bottom:auto;left:8px}.board-floating-controls .control-btn{width:30px;height:30px;font-size:11px}.board-floating-controls .mode-btn{padding:0 8px}}