.app-layout{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.5rem;background:var(--bg-surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--gold)}.brand-icon{font-size:1.3rem}.brand-name{font-size:1.2rem;font-weight:700;letter-spacing:.08em}.nav-links{display:flex;gap:.2rem}.nav-links a{text-decoration:none;color:var(--text-muted);padding:.4rem .8rem;border-radius:6px;font-size:.85rem;font-weight:500;transition:all .2s}.nav-links a:hover{color:var(--text);background:#ffffff0d}.nav-links a.active{color:var(--gold);background:#d4af371a}.header-right{display:flex;align-items:center;gap:.75rem}.connection-dot{width:8px;height:8px;border-radius:50%}.connection-dot.online{background:var(--success)}.connection-dot.offline{background:var(--danger)}.user-badge{display:flex;align-items:center;gap:.4rem;font-size:.85rem}.user-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.2)}.logout-btn{padding:.3rem .6rem;font-size:.75rem}.app-main{flex:1;padding:1rem}@media(max-width:600px){.app-header{flex-wrap:wrap;gap:.5rem;padding:.5rem .8rem}.nav-links a{font-size:.75rem;padding:.3rem .5rem}.user-badge span{display:none}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}.auth-container{width:100%;max-width:400px}.auth-brand{text-align:center;margin-bottom:2rem}.auth-logo{font-size:3rem;display:block;margin-bottom:.5rem}.auth-brand h1{font-size:2rem;color:var(--gold);letter-spacing:.1em;margin-bottom:.2rem}.auth-brand p{color:var(--text-muted);font-size:.85rem}.auth-form{display:flex;flex-direction:column;gap:1rem}.auth-form h2{color:var(--gold);text-align:center}.auth-error{background:#c0392b26;color:var(--danger);padding:.5rem;border-radius:6px;font-size:.85rem;text-align:center}.form-group{display:flex;flex-direction:column;gap:.3rem}.form-group label{font-size:.8rem;color:var(--text-muted);font-weight:600}.auth-submit{margin-top:.5rem;padding:.75rem;font-size:1rem}.auth-switch{text-align:center;font-size:.85rem;color:var(--text-muted)}.link-btn{background:none;border:none;color:var(--gold);font-weight:600;text-decoration:underline;padding:0;font-size:inherit}.link-btn:hover{color:var(--gold-light)}.lobby-view{max-width:900px;margin:0 auto;padding:1rem}.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:700px){.lobby-grid{grid-template-columns:1fr}}.lobby-section{display:flex;flex-direction:column;gap:.75rem}.lobby-section h2{color:var(--gold);font-size:1.1rem}.section-desc{color:var(--text-muted);font-size:.85rem}.searching{color:var(--gold-light);font-size:.8rem;animation:blink 1.5s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.ai-options{display:flex;gap:.5rem}.ai-options .btn-secondary.active{background:#d4af3733;border-color:var(--gold);color:var(--gold)}.lobby-code{font-size:1.8rem;font-weight:700;letter-spacing:.3em;color:var(--gold);text-align:center;padding:.5rem;background:var(--bg-surface);border-radius:8px;border:1px dashed var(--gold)}.lobby-status{color:var(--text-muted);font-size:.85rem;text-align:center}.invite-friends{margin-top:.5rem}.invite-friends .small{font-size:.75rem;color:var(--text-muted);margin-bottom:.3rem}.friend-invite-btn{font-size:.8rem;padding:.3rem .6rem}.lobby-actions{display:flex;flex-direction:column;gap:.75rem}.join-group{display:flex;gap:.5rem}.join-group input{flex:1;text-transform:uppercase}.add-friend-group{display:flex;gap:.5rem}.add-friend-group input{flex:1}.pending-requests{border-top:1px solid var(--border);padding-top:.5rem}.pending-requests h4{font-size:.85rem;color:var(--gold);margin-bottom:.3rem}.pending-item{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;font-size:.85rem}.pending-item .small{padding:.2rem .5rem;font-size:.7rem}.friend-list{list-style:none}.friend-item{display:flex;align-items:center;justify-content:space-between;padding:.3rem 0;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.05)}.friend-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-actions{display:flex;gap:.25rem;flex-shrink:0}.btn-icon{width:24px;height:24px;padding:0;font-size:.85rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.btn-icon:hover{background:#d4af3726;color:var(--gold);border-color:var(--gold)}.btn-icon-danger:hover{background:#e53e3e26;color:var(--danger);border-color:var(--danger)}.friend-tag{color:var(--text-muted);font-size:.75rem}.no-friends{color:var(--text-muted);font-size:.8rem;font-style:italic}.invite-banner{margin-bottom:1rem;background:#d4af371a;border-color:var(--gold);text-align:center}.invite-actions{display:flex;gap:.5rem;justify-content:center;margin-top:.5rem}.error-toast{background:#c0392be6;color:#fff;padding:.6rem 1rem;border-radius:8px;text-align:center;margin-bottom:.5rem;font-size:.85rem;animation:fadeInUp .3s ease}.connection-status{text-align:center;color:var(--text-muted);font-size:.8rem;margin-top:1rem}.board-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem}.board{display:flex;flex-direction:column;gap:2px;background:var(--gold-dark);border:3px solid var(--gold);border-radius:8px;padding:3px;box-shadow:0 0 20px #d4af374d,inset 0 0 10px #0000004d}.board-row{display:flex;gap:2px}.square{width:60px;height:60px;background:var(--papyrus);border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;cursor:default;transition:all .15s ease}.square .square-num{position:absolute;top:2px;left:4px;font-size:.6rem;color:#00000059;font-weight:600}.square .square-icon{position:absolute;bottom:2px;right:4px;font-size:.85rem;opacity:.6}.square.safe{background:linear-gradient(135deg,#e8f5e9,#c8e6c9)}.square.danger{background:linear-gradient(135deg,#ffebee,#ffcdd2)}.square.bonus{background:linear-gradient(135deg,#fff8e1,#ffe082)}.square.highlighted{background:#27ae604d!important;box-shadow:inset 0 0 0 2px var(--success);cursor:pointer}.square.highlighted:hover{background:#27ae6080!important;transform:scale(1.05)}.square.selected{box-shadow:inset 0 0 0 2px var(--gold)}.piece{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #fff3;transition:all .15s ease;z-index:1}.piece .piece-symbol{color:#fff;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}.piece.selectable{cursor:pointer;animation:pulse 1.5s ease-in-out infinite}.piece.selectable:hover{transform:scale(1.15);box-shadow:0 4px 8px #0006,0 0 12px #d4af3799}.piece.piece-selected{transform:scale(1.1);box-shadow:0 0 0 3px var(--gold),0 4px 8px #0006;animation:none}@keyframes pulse{0%,to{box-shadow:0 2px 4px #0000004d}50%{box-shadow:0 2px 4px #0000004d,0 0 10px #d4af3780}}@media(max-width:700px){.square{width:32px;height:32px}.piece{width:22px;height:22px}.piece .piece-symbol{font-size:.6rem}.square .square-num{font-size:.45rem}.square .square-icon{font-size:.55rem}}.game-view{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;padding-bottom:2rem}.game-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px}.player-info{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem}.player-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}.borne-count{display:flex;align-items:center;gap:.3rem;padding:.1rem .2rem}.borne-count-dot{width:10px;height:10px;border-radius:50%;border:2px solid;opacity:.9;transition:background-color .2s ease}.borne-count-dot.filled{opacity:1}.turn-indicator{text-align:center}.phase-badge{display:inline-block;padding:.3rem .8rem;border-radius:20px;font-size:.8rem;font-weight:600}.phase-badge.your-turn{background:#d4af3733;color:var(--gold);border:1px solid var(--gold)}.phase-badge.waiting{background:#a8b2c126;color:var(--text-muted);border:1px solid rgba(168,178,193,.3)}.phase-badge.over{background:#c0392b33;color:var(--danger)}.game-controls{display:flex;flex-direction:column;align-items:center;gap:.55rem;min-height:155px}.control-primary-row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:.75rem;min-width:0}.control-primary-item{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}.control-primary-item.roll-item{justify-content:center}.bonus-roll-display{display:flex;align-items:center;justify-content:center;min-width:96px;height:48px;border-radius:10px;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border);color:var(--gold-light);font-weight:700}.bonus-roll-icon{font-size:1rem;line-height:1}.bonus-roll-label{margin-left:.25rem;font-size:.95rem}.control-slot{width:100%;display:flex;justify-content:center;align-items:center}.hint-slot{min-height:22px}.event-slot{min-height:44px}.roll-display{display:flex;align-items:center;gap:.75rem;width:220px;justify-content:flex-start;min-width:0}.roll-value{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--gold);color:var(--black);font-size:1.4rem;font-weight:700;border-radius:10px;box-shadow:0 4px 8px #d4af374d}.roll-value.empty{background:var(--bg-surface);color:var(--text-muted);box-shadow:inset 0 0 0 1px var(--border)}.roll-label{color:var(--text-muted);font-size:.85rem;min-width:130px;white-space:nowrap}.roll-btn{padding:.8rem 2.5rem;font-size:1.1rem;white-space:nowrap}.roll-btn:disabled{background:#5f6776;color:#d3d8e0;box-shadow:none}.resign-btn{padding:.4rem 1rem;font-size:.8rem}.panel-resign-btn{margin-left:auto}.move-hint{color:var(--gold-light);font-size:.85rem;font-style:italic}.event-notice{padding:.5rem 1rem;border-radius:8px;font-weight:600;font-size:.85rem;text-align:center}.event-notice.blocked{background:#c0392b33;color:var(--danger);border:1px solid rgba(192,57,43,.4)}.event-notice.trap{background:#e67e2233;color:#e67e22;border:1px solid rgba(230,126,34,.4)}.event-notice.good{background:#27ae6033;color:var(--success);border:1px solid rgba(39,174,96,.4)}.bear-off-inline-btn{padding:.5rem 1.4rem;background:#27ae6033;border:2px dashed var(--success);border-radius:8px;color:var(--success);font-weight:700;cursor:pointer;transition:all .2s ease}.bear-off-inline-btn:hover{background:#27ae6059}.initial-rolls{text-align:center}.initial-rolls h3{color:var(--gold);margin-bottom:.5rem}.init-roll-row{font-size:.85rem;padding:.2rem 0}.init-result{margin-top:.5rem;font-weight:700;color:var(--gold);font-size:1.1rem}.move-log-container{display:flex;flex-direction:column;gap:.6rem}.panel-header{display:flex;align-items:center;gap:.75rem}.panel-tabs{display:flex;align-items:center;gap:.25rem}.panel-tab{border:1px solid var(--border);background:var(--bg-surface);color:var(--text-muted);border-radius:8px;padding:.35rem .65rem;font-size:.8rem;font-weight:600;cursor:pointer}.panel-tab.active{color:var(--gold-light);border-color:var(--gold);background:#d4af3729}.panel-body{height:min(200px,36vh);min-height:140px}.move-log{height:100%;overflow-y:auto}.log-entry{display:flex;gap:.5rem;padding:.2rem 0;font-size:.75rem;font-family:Courier New,monospace;color:var(--text-muted);border-bottom:1px solid rgba(255,255,255,.05)}.log-turn{color:var(--gold);min-width:2rem}.log-player{min-width:2.5rem}.log-player.player1{color:#5dade2}.log-player.player2{color:#f39c12}.log-roll{min-width:2rem}.log-event{color:#e67e22;font-style:italic}.chat-panel{height:100%;display:flex;flex-direction:column;gap:.5rem}.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem;padding:.25rem 0;min-height:0}.chat-message{display:flex;flex-direction:column;max-width:85%}.chat-message.mine{align-self:flex-end;align-items:flex-end}.chat-message.theirs{align-self:flex-start;align-items:flex-start}.chat-sender{font-size:.65rem;color:var(--text-muted);margin-bottom:.1rem}.chat-text{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:.3rem .6rem;font-size:.8rem;word-break:break-word}.chat-message.mine .chat-text{background:#d4af3726;border-color:#d4af374d}.chat-input-row{display:flex;gap:.4rem}.chat-input{flex:1;font-size:.8rem;padding:.35rem .6rem}.chat-send{font-size:.75rem;padding:.35rem .7rem;white-space:nowrap}.help-panel{height:100%;overflow-y:auto;display:flex;align-items:flex-start}.help-list{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}.help-item{display:inline-flex;align-items:center;gap:.35rem;color:var(--text-muted);font-size:.78rem;white-space:nowrap}.sq-sample.plain{background:#a8b2c126;color:var(--text-muted);border:1px solid rgba(168,178,193,.3)}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:110;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.confirm-card{width:min(420px,calc(100vw - 2rem));text-align:center}.confirm-card h3{margin-bottom:.45rem;color:var(--gold-light)}.confirm-card p{color:var(--text-muted);margin-bottom:1rem}.confirm-actions{display:flex;justify-content:center;gap:.6rem}.game-over-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.game-over-card{text-align:center;padding:2rem 3rem;animation:fadeInUp .3s ease}.game-over-card h2{font-size:2rem;color:var(--gold);margin-bottom:.5rem}.game-over-card p{color:var(--text-muted);margin-bottom:1.5rem}.game-over-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.timer-bar{position:relative;height:28px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}.timer-bar-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:#d4af3740;transition:width .5s linear;border-radius:8px}.timer-bar.urgent .timer-bar-fill{background:#c0392b4d}.timer-bar-text{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}.timer-bar.urgent .timer-bar-text{color:var(--danger);animation:pulse .8s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.faceoff-subtitle{color:var(--text-muted);font-size:.85rem;margin-bottom:.5rem}.faceoff-waiting{color:var(--text-muted);font-style:italic;font-size:.85rem;margin-top:.5rem}.faceoff-current-round{margin:.75rem 0}.faceoff-round-label{font-weight:600;color:var(--gold-light);margin-bottom:.4rem}.faceoff-roll-status{display:flex;justify-content:center;gap:1rem}.faceoff-roll-chip{padding:.3rem .8rem;border-radius:12px;font-size:.85rem;font-weight:600}.faceoff-roll-chip.rolled{background:#27ae6033;color:var(--success);border:1px solid rgba(39,174,96,.4)}.faceoff-roll-chip.waiting{background:#a8b2c126;color:var(--text-muted);border:1px solid rgba(168,178,193,.3)}.faceoff-roll-btn{margin-top:.75rem}.legend-grid{display:flex;flex-wrap:wrap;gap:.5rem 1rem}.legend-item{display:flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--text-muted);white-space:nowrap}.sq-sample{display:inline-flex;align-items:center;justify-content:center;min-width:24px;width:fit-content;padding:0 .2rem;height:18px;border-radius:3px;font-size:.55rem;font-weight:700;white-space:nowrap}.sq-sample.danger{background:#ffcdd2;color:#b71c1c}.sq-sample.bonus{background:#ffe082;color:#e65100}.sq-sample.safe{background:#c8e6c9;color:#1b5e20}@media(max-width:680px){.control-primary-row{gap:.5rem}.roll-display{width:auto;justify-content:center}.roll-label{display:none}.roll-btn{padding:.7rem 1rem;font-size:.95rem}.bonus-roll-display{min-width:72px}}.profile-view{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;padding:1rem}.profile-header{display:flex;gap:1.5rem;align-items:center}.profile-avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;box-shadow:0 4px 12px #0000004d;flex-shrink:0}.profile-info h2{color:var(--gold);margin-bottom:.2rem}.profile-info .username{color:var(--text-muted);font-size:.85rem;margin-bottom:.5rem}.edit-fields{display:flex;flex-direction:column;gap:.5rem}.color-picker{display:flex;align-items:center;gap:.5rem;font-size:.85rem}.color-swatches{display:flex;flex-wrap:wrap;gap:6px}.color-swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;outline:none;transition:transform .1s,border-color .1s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{border-color:var(--gold);transform:scale(1.2);box-shadow:0 0 0 2px #0006}.edit-actions{display:flex;gap:.5rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.stat-card{text-align:center;padding:1rem .75rem}.stat-card.accent{border-color:var(--gold)}.stat-value{font-size:1.5rem;font-weight:700;color:var(--gold)}.stat-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem}.recent-games h3{color:var(--gold);margin-bottom:.75rem;font-size:1rem}.recent-games table{width:100%;border-collapse:collapse;font-size:.85rem}.recent-games th{text-align:left;padding:.4rem .5rem;color:var(--text-muted);font-weight:600;font-size:.75rem;text-transform:uppercase;border-bottom:1px solid var(--border)}.recent-games td{padding:.4rem .5rem;border-bottom:1px solid rgba(255,255,255,.05)}.recent-games .win{color:var(--success);font-weight:700}.recent-games .loss{color:var(--danger);font-weight:700}.ai-badge{font-size:.6rem;background:var(--bg-surface);padding:.1rem .3rem;border-radius:4px;color:var(--text-muted)}.no-games{color:var(--text-muted);font-style:italic;font-size:.85rem}:root{--gold: #D4AF37;--gold-light: #F0D060;--gold-dark: #A88B2B;--lapis: #26619C;--lapis-light: #3B7FC4;--papyrus: #F5E6C8;--papyrus-dark: #E8D5A8;--sand: #C2A35A;--terra: #8B4513;--nile: #1A5276;--black: #1A1A2E;--white: #FAF3E0;--danger: #C0392B;--success: #27AE60;--bg: #16213E;--bg-surface: #1A2744;--bg-card: #0F3460;--text: #FAF3E0;--text-muted: #A8B2C1;--border: rgba(212, 175, 55, .3);font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;color:var(--text);background-color:var(--bg)}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;min-width:480px;background:linear-gradient(135deg,var(--bg) 0%,#0a1628 50%,#16213E 100%)}button{cursor:pointer;border:none;outline:none;font-family:inherit;font-size:.95rem;padding:.6rem 1.2rem;border-radius:6px;transition:all .2s ease}button:disabled{opacity:.5;cursor:not-allowed}input{font-family:inherit;font-size:.95rem;padding:.6rem .8rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-surface);color:var(--text);outline:none;transition:border-color .2s}input:focus{border-color:var(--gold)}.loading-screen{display:flex;align-items:center;justify-content:center;height:100vh;font-size:1.2rem;color:var(--gold)}.btn-primary{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);color:var(--black);font-weight:600}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #d4af3766}.btn-secondary{background:var(--bg-card);color:var(--gold);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:#d4af371a}.btn-danger{background:var(--danger);color:#fff;font-weight:600}.btn-danger:hover:not(:disabled){background:#e74c3c}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.5rem}.badge{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.75rem;font-weight:600}