:root{--bg: #181310;--bg2: #1f1a15;--panel: #272018;--panel-elevated: #302820;--border: #3d3228;--border-light: #4e4136;--text: #f0e6d8;--text-muted: #9a8878;--text-dim: #6b5d52;--accent: #d4a853;--accent-hover: #e2bc72;--accent-dim: rgba(212,168,83,.12);--accent-glow: rgba(212,168,83,.2);--rose: #c25c74;--felt: #1c3d2c;--felt-dark: #152e20;--felt-border: #2a5a3c;--ok: #7bc67d;--warn: #e8953a;--danger: #d95f5f;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-sm: 0 2px 8px rgba(0,0,0,.4);--shadow-md: 0 4px 20px rgba(0,0,0,.5);--shadow-lg: 0 8px 40px rgba(0,0,0,.6);--shadow-warm: 0 0 40px rgba(212,168,83,.08);--font-display: "Playfair Display", Georgia, serif;--font-body: "Lora", Georgia, serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}#root{min-height:100vh}button,.card.clickable{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.page{display:flex;flex-direction:column;min-height:100vh}.screen{padding:24px 16px;flex:1}.loading-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}.loading-spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.navbar{display:flex;align-items:center;gap:16px;padding:0 24px;height:56px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.navbar-brand{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--accent);text-decoration:none;margin-right:auto;letter-spacing:.02em;transition:opacity .18s}.navbar-brand:hover{opacity:.85}.navbar-links{display:flex;gap:4px}.navbar-links a{color:var(--text-muted);text-decoration:none;font-size:14px;padding:6px 12px;border-radius:var(--radius-sm);font-family:var(--font-body);transition:color .16s,background .16s}.navbar-links a:hover{color:var(--text);background:var(--border)}.navbar-links a.active{color:var(--accent)}.navbar-user{display:flex;align-items:center;gap:12px}.navbar-username{color:var(--text-muted);font-size:13px;font-style:italic}.btn-logout{background:none;border:1px solid var(--border);color:var(--text-muted);font-size:12px;font-family:var(--font-body);padding:4px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:color .16s,border-color .16s,background .16s}.btn-logout:hover{color:var(--danger);border-color:var(--danger);background:#d95f5f0f}button{background:var(--panel-elevated);color:var(--text);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:8px 16px;cursor:pointer;font-size:14px;font-family:var(--font-body);transition:border-color .16s,background .16s,transform 80ms ease,box-shadow .16s}button:disabled{opacity:.38;cursor:not-allowed}button:active:not(:disabled){transform:scale(.97)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#1a1208;font-weight:600;padding:10px 24px;font-size:15px;letter-spacing:.02em}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 0 16px var(--accent-glow)}.btn-primary:active:not(:disabled){transform:scale(.97)}.btn-secondary{background:var(--panel-elevated);border-color:var(--border-light);color:var(--text)}.btn-secondary:hover:not(:disabled){background:#3a3028;border-color:#5a4e42}.btn-warn{border-color:var(--warn);color:var(--warn);background:#e8953a0f}.btn-warn:hover:not(:disabled){background:#e8953a24}.btn-ghost{background:none;border:none;color:var(--text-muted);font-size:13px;padding:6px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:var(--font-body)}.btn-ghost:hover{color:var(--text)}.btn-big{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 36px;font-size:17px;min-width:180px;border-radius:var(--radius-md)}.btn-big small{font-weight:400;font-size:12px;opacity:.72}@media (hover: hover){button:hover:not(:disabled){border-color:var(--border-light)}.card.clickable:hover{transform:translateY(-10px) rotate(-1.5deg) scale(1.04);box-shadow:0 12px 24px #00000073,0 0 12px var(--accent-glow)}}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:12px;font-family:var(--font-body);color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}.form-group input,input[type=text],input[type=password],input[type=number],textarea,select{background:var(--bg2);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:10px 14px;color:var(--text);font-size:15px;font-family:var(--font-body);outline:none;width:100%;transition:border-color .16s,box-shadow .16s}.form-group input:focus,input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}textarea{resize:vertical;min-height:90px}select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239a8878' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}.form-error{color:var(--danger);font-size:13px;margin:0;font-style:italic}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(212,168,83,.1) 0%,transparent 70%),var(--bg)}.login-card{background:var(--panel);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:40px 36px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:24px;box-shadow:var(--shadow-lg),var(--shadow-warm)}.login-header{text-align:center}.login-title{margin:0 0 6px;font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--accent);letter-spacing:.01em}.login-subtitle{margin:0;color:var(--text-muted);font-size:14px;font-style:italic}.login-divider{display:flex;align-items:center;gap:12px;color:var(--text-dim);font-size:12px}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--border)}.login-form{display:flex;flex-direction:column;gap:16px}.login-form .btn-primary{width:100%;margin-top:4px;padding:12px;font-size:16px;border-radius:var(--radius-sm)}.dashboard{padding:40px 24px;max-width:960px;margin:0 auto}.dashboard-hero{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--border)}.dashboard-greeting{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}.dashboard-hero h1{margin:0 0 8px;font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--text);line-height:1.2}.dashboard-hero p{margin:0;color:var(--text-muted);font-size:15px;font-style:italic}.section-label{font-size:11px;font-family:var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px}.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.feature-card{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;text-decoration:none;color:var(--text);transition:border-color .2s,transform .16s,box-shadow .2s;cursor:pointer;position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 80% at 20% 20%,var(--accent-dim) 0%,transparent 60%);opacity:0;transition:opacity .3s}.feature-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md),0 0 20px var(--accent-glow)}.feature-card:hover:before{opacity:1}.feature-card--disabled{opacity:.38;cursor:default}.feature-card--disabled:hover{border-color:var(--border);transform:none;box-shadow:none}.feature-card--disabled:hover:before{opacity:0}.feature-icon{font-size:28px;width:48px;height:48px;display:grid;place-items:center;background:var(--panel-elevated);border:1px solid var(--border-light);border-radius:var(--radius-sm);margin-bottom:4px;position:relative}.feature-title{margin:0;font-family:var(--font-display);font-size:18px;font-weight:700}.feature-desc{margin:0;font-size:13px;color:var(--text-muted);flex:1;line-height:1.5}.feature-play{font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-top:4px}.feature-play:after{content:"→"}.screen-mode-select{display:flex;flex-direction:column;align-items:center;gap:28px;padding:48px 16px}.screen-mode-select h2{margin:0;font-family:var(--font-display);font-size:26px;font-weight:700}.screen-mode-select p{margin:0;color:var(--text-muted);font-style:italic}.mode-buttons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.screen-lobby,.screen-online-lobby{max-width:440px;margin:0 auto;display:grid;gap:18px;padding:24px 16px}.screen-lobby h2,.screen-online-lobby h2{margin:0;font-family:var(--font-display);font-size:22px}.lobby-add{display:flex;gap:8px}.lobby-add input{flex:1}#lobby-players,#online-players{display:grid;gap:8px}.lobby-player{display:flex;align-items:center;gap:10px;background:var(--panel);padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border)}.lobby-player .name{flex:1;font-weight:600}.lobby-player .remove{background:none;border:none;color:var(--danger);cursor:pointer;font-size:20px;padding:0 4px;line-height:1}.lobby-hint{color:var(--text-muted);margin:0;font-size:13px;font-style:italic}.lobby-actions{display:flex;gap:10px;justify-content:flex-end}.host-badge{background:var(--accent);color:#1a1208;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.online-join-actions{display:grid;gap:12px}.join-row{display:flex;gap:8px}.code-input{flex:1;text-transform:uppercase;letter-spacing:6px;text-align:center;font-size:18px;font-weight:700;font-family:var(--font-display);background:var(--bg2);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:10px;color:var(--accent);outline:none}.code-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.screen-pass{max-width:400px;margin:80px auto;text-align:center;display:grid;gap:28px}.screen-pass h2{margin:0;font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--text-muted);font-style:italic}.screen-pass strong{font-size:34px;font-weight:700;font-family:var(--font-display);color:var(--text);display:block}.screen-game{display:flex;flex-direction:column;gap:0;min-height:calc(100vh - 56px)}.game-header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--panel);padding:10px 18px;border-bottom:1px solid var(--border);font-size:14px}#current-turn-label{font-weight:700;font-family:var(--font-display);font-size:15px}.game-status{color:var(--text-muted);font-size:13px;margin-left:auto;font-style:italic}.lives-display .life{margin-right:2px;font-size:14px}.lives-display .life.full{color:var(--danger)}.lives-display .life.empty{color:#3a2e28}.county-label{color:var(--warn);font-size:11px;margin-left:4px;font-style:italic}.game-layout{display:grid;grid-template-columns:180px 1fr;gap:0;flex:1}.game-center{display:grid;gap:14px;align-content:start;padding:16px;background:var(--felt-dark)}.opponents{display:grid;gap:8px;align-content:start;padding:14px;background:var(--bg2);border-right:1px solid var(--border)}.opponent{background:var(--panel);padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);font-size:13px}.opponent .opp-name{font-weight:600;display:block;font-family:var(--font-display)}.opponent .opp-lives{color:var(--text-muted);display:block;font-size:11px;margin-top:2px}.opponent .opp-cards{display:flex;gap:4px;margin-top:6px}.opponent.eliminated{opacity:.35}.opponent.knocked .opp-name:after{content:" (knocked)";color:var(--warn);font-weight:400;font-family:var(--font-body);font-size:11px}.card-piles{display:flex;gap:24px;justify-content:center;align-items:flex-start;background:var(--felt);padding:16px;border-radius:var(--radius-md);border:2px solid var(--felt-border);box-shadow:inset 0 2px 12px #00000059}.pile{display:grid;gap:8px;align-items:center;justify-items:center}.pile-label{color:#ffffff80;font-size:11px;text-align:center;letter-spacing:.06em;text-transform:uppercase}.player-hand-area{background:var(--felt);border:2px solid var(--felt-border);border-radius:var(--radius-md);padding:16px;display:grid;gap:10px;box-shadow:inset 0 2px 12px #00000059}.player-hand{display:flex;gap:14px;justify-content:center}.hand-score{color:#ffffffd9;font-weight:700;text-align:center;font-family:var(--font-display);font-size:15px}.game-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.card{width:clamp(52px,10vw,76px);aspect-ratio:5 / 7;border-radius:7px;display:grid;place-items:center;background:#fefcf5;border:1px solid #d4cbb8;color:#1a1a1a;font-weight:700;font-size:clamp(14px,2.2vw,20px);font-family:var(--font-display);-webkit-user-select:none;user-select:none;box-shadow:0 2px 6px #0006,0 1px 2px #0000004d;transition:transform .16s ease,box-shadow .16s ease}.card.clickable{cursor:pointer}.card.clickable:active{transform:translateY(-3px)}.card.back{background:repeating-linear-gradient(45deg,#1a2e5a,#1a2e5a 5px,#1e3568 5px,#1e3568 10px);border:1px solid #2a3e7a;color:transparent;box-shadow:0 2px 6px #00000073}.card.empty{border:2px dashed rgba(255,255,255,.2);background:transparent;box-shadow:none;color:transparent}.card.red{color:#c42020}.card.black{color:#1a1a1a}.card-mini{width:28px;height:38px;border-radius:4px;display:inline-grid;place-items:center;background:#fefcf5;border:1px solid #d4cbb8;font-size:10px;font-weight:700;font-family:var(--font-display);box-shadow:0 1px 4px #00000059}.card-mini.back{background:repeating-linear-gradient(45deg,#1a2e5a,#1a2e5a 3px,#1e3568 3px,#1e3568 6px);border-color:#2a3e7a}.card-mini.red{color:#c42020}.card-mini.black{color:#1a1a1a}.screen-round-end{max-width:540px;margin:0 auto;display:grid;gap:18px;padding:28px 16px}.screen-round-end h2{margin:0;font-family:var(--font-display);font-size:26px}#round-results{display:grid;gap:10px}.round-result-row{display:flex;align-items:center;gap:12px;background:var(--panel);padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--border)}.round-result-row.loser{border-color:var(--danger);background:#281818}.round-result-row.blitzer{border-color:var(--ok);background:#182818}.rr-name{font-weight:700;min-width:80px;font-family:var(--font-display)}.rr-score{color:var(--accent);font-weight:700;min-width:36px;text-align:right;font-family:var(--font-display)}.rr-cards{display:flex;gap:4px;flex:1}.rr-life-change,.rr-lives{color:var(--danger);font-size:13px;white-space:nowrap}.screen-game-over{max-width:420px;margin:80px auto;text-align:center;display:grid;gap:24px;padding:24px}.screen-game-over h2{margin:0;font-family:var(--font-display);font-size:28px}#winner-display{font-size:32px;font-weight:700;font-family:var(--font-display);color:var(--ok)}.plex-page{padding:40px 24px;max-width:640px;margin:0 auto}.plex-header{margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--border)}.plex-back{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);text-decoration:none;font-size:13px;margin-bottom:20px;transition:color .16s}.plex-back:hover{color:var(--accent)}.plex-header h1{margin:0 0 8px;font-family:var(--font-display);font-size:28px;font-weight:700}.plex-header p{margin:0;color:var(--text-muted);font-size:14px;font-style:italic}.plex-form{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);padding:32px;display:grid;gap:22px}.plex-type-toggle{display:flex;gap:0;border:1px solid var(--border-light);border-radius:var(--radius-sm);overflow:hidden}.plex-type-btn{flex:1;background:transparent;border:none;border-radius:0;padding:10px;color:var(--text-muted);font-size:14px;font-family:var(--font-body);cursor:pointer;transition:background .16s,color .16s;display:flex;align-items:center;justify-content:center;gap:7px}.plex-type-btn:first-child{border-right:1px solid var(--border-light)}.plex-type-btn.active{background:var(--accent);color:#1a1208;font-weight:600}.plex-type-btn:hover:not(.active){background:var(--panel-elevated);color:var(--text)}.plex-hints{display:flex;flex-direction:column;gap:4px;padding:10px 14px;background:var(--accent-dim);border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:13px;color:var(--text-muted);line-height:1.5}.plex-hints em{color:var(--accent);font-style:normal;font-weight:600}.plex-submit{display:flex;justify-content:flex-end;padding-top:4px}.plex-success{text-align:center;padding:40px 24px;display:grid;gap:16px}.plex-success-icon{font-size:56px;line-height:1}.plex-success h2{margin:0;font-family:var(--font-display);font-size:24px}.plex-success p{margin:0;color:var(--text-muted);font-style:italic}.ornament{text-align:center;color:var(--text-dim);font-size:18px;letter-spacing:12px;-webkit-user-select:none;user-select:none}@media (max-width: 720px){.game-layout{grid-template-columns:1fr}.opponents{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));border-right:none;border-bottom:1px solid var(--border)}.navbar-links{display:none}.dashboard{padding:24px 16px}.plex-form{padding:20px}}@media (max-width: 480px){.screen{padding:12px}.card{width:clamp(46px,23vw,64px)}.game-actions button{flex:1 1 auto;min-height:44px;font-size:13px}.mode-buttons{flex-direction:column;align-items:stretch}.btn-big{min-width:unset}.login-card{padding:28px 20px}.dashboard-hero h1{font-size:26px}}