*{margin:0;padding:0;box-sizing:border-box}:root{--table-bg: #3d6278;--table-felt: #4a7a90;--panel-bg: #476e80;--panel-bg-strong: #3f6577;--panel-shadow: #3b5e6e;--accent: #d4a843;--accent-hover: #e6c36a;--text: #e8eef2;--text-muted: #8fa8b8;--text-faint: rgba(255, 255, 255, .45);--danger: #c0392b;--success: #4caf50;--gold: #d4a843;--bg-card: #ffffff;--cb-base: #4a7a3e;--cb-dark: #3d6633;--cb-light: #6b9e5a;--cb-frame: #8ab878;--cb-diamond: rgba(107, 158, 90, .45);--card-width: 92px;--card-height: 132px;--card-small-width: 92px;--card-small-height: 132px;--card-radius: 8px}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--table-bg);color:var(--text);min-height:100vh;-webkit-user-select:none;user-select:none}.page{min-height:100vh;display:flex;flex-direction:column}.btn{padding:8px 22px;border:none;border-radius:20px;background:#ffffff1a;color:var(--text);cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;transition:all .15s ease}.btn:hover:not(:disabled){background:#ffffff2e;transform:scale(1.04);filter:brightness(1.05)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}.btn.primary{background:var(--accent);color:#2c1810}.btn.primary:hover:not(:disabled){background:var(--accent-hover)}.btn.danger{background:var(--danger);color:#fff}.btn.success{background:var(--success);color:#fff}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:13px;color:var(--text-muted)}.form-group input,.form-group select{width:100%;padding:10px 12px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:#0000002e;color:var(--text);font-size:15px;font-family:inherit}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--accent)}select option,select optgroup{background-color:#2f4c5c;color:var(--text)}select option:checked,select option:hover{background-color:var(--accent);color:#2c1810}.error{color:#fff;font-size:14px;margin:8px 0;padding:10px 14px;background:#c0392bd9;border-radius:8px}.card-back{width:var(--card-width);height:var(--card-height);border-radius:var(--card-radius);background:var(--cb-base);position:relative;box-shadow:0 2px 6px #00000040;overflow:hidden;flex-shrink:0;color:transparent;border:none}.card-back:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:1.5px solid var(--cb-frame);border-radius:calc(var(--card-radius) - 2px);z-index:2;pointer-events:none}.card-back:after{content:"";position:absolute;top:7px;right:7px;bottom:7px;left:7px;border:1px solid var(--cb-light);border-radius:calc(var(--card-radius) - 4px);z-index:2;pointer-events:none;background:repeating-linear-gradient(45deg,transparent 0,transparent 7px,var(--cb-diamond) 7px,var(--cb-diamond) 8px),repeating-linear-gradient(-45deg,transparent 0,transparent 7px,var(--cb-diamond) 7px,var(--cb-diamond) 8px),var(--cb-dark)}.card-back.small{width:var(--card-small-width);height:var(--card-small-height);border-radius:5px}.card-back.small:before{top:2px;right:2px;bottom:2px;left:2px;border-width:1px;border-radius:4px}.card-back.small:after{top:4px;right:4px;bottom:4px;left:4px;border-radius:3px;background:repeating-linear-gradient(45deg,transparent 0,transparent 4px,var(--cb-diamond) 4px,var(--cb-diamond) 5px),repeating-linear-gradient(-45deg,transparent 0,transparent 4px,var(--cb-diamond) 4px,var(--cb-diamond) 5px),var(--cb-dark)}.login-page{justify-content:center;align-items:center;background:radial-gradient(ellipse at 50% 40%,var(--table-felt) 0%,var(--table-bg) 70%),var(--table-bg);position:relative;overflow:hidden}.login-suits{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.login-suits .suit{position:absolute;font-family:Segoe UI Symbol,Arial Unicode MS,serif;line-height:1;-webkit-user-select:none;user-select:none;text-shadow:0 4px 16px rgba(0,0,0,.25);opacity:.1}.login-suits .suit-heart,.login-suits .suit-diamond{color:#d94d4d}.login-suits .suit-spade,.login-suits .suit-club{color:#0d1a22}.login-card{background:linear-gradient(180deg,var(--panel-bg) 0%,var(--panel-bg-strong) 100%);padding:32px 40px 36px;border-radius:18px;width:380px;text-align:center;box-shadow:0 12px 40px #00000073,0 0 0 1px #d4a8432e inset;position:relative;z-index:1}.login-suit-row{display:flex;justify-content:center;gap:14px;font-size:22px;margin-bottom:6px;letter-spacing:2px;font-family:Segoe UI Symbol,Arial Unicode MS,serif}.login-suit-row .suit-red{color:#d94d4d}.login-suit-row .suit-black{color:#1a2530}.login-card h1{font-family:Georgia,serif;font-size:34px;margin-bottom:6px;color:var(--accent);letter-spacing:1px}.login-card .subtitle{color:var(--text-muted);margin-bottom:28px;font-size:14px;line-height:1.4;font-style:italic}.login-card form{text-align:left}.nickname-display{display:flex;align-items:center;gap:8px;background:#00000038;border-radius:10px;padding:10px 14px;margin-top:6px}.nickname-text{font-size:20px;font-weight:600;flex:1;letter-spacing:.5px;color:var(--text)}.btn-regenerate{background:#ffffff14;border:1px solid rgba(255,255,255,.2);color:var(--text);font-size:18px;width:36px;height:36px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.btn-regenerate:hover{border-color:var(--accent);color:var(--accent);background:#d4a8431f}.login-card .btn{width:100%;padding:12px;font-size:16px;margin-top:8px}.lobby-page{background:radial-gradient(ellipse at 50% 30%,var(--table-felt) 0%,var(--table-bg) 70%)}.lobby-header{background:var(--panel-bg);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px #0000002e}.lobby-header h1{font-family:Georgia,serif;font-size:22px;color:var(--text)}.rooms-section{flex:1;max-width:860px;margin:0 auto;padding:24px;width:100%}.rooms-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:18px}.filter-select{flex:1;padding:10px 14px;background:#00000038;border:1px solid rgba(255,255,255,.15);border-radius:10px;color:var(--text);font-size:14px;font-family:inherit}.rooms-list .empty,.rooms-section .empty{color:var(--text-muted);text-align:center;padding:40px}.rooms{display:flex;flex-direction:column;gap:10px}.room-card{display:flex;justify-content:space-between;align-items:center;background:var(--panel-bg);padding:16px 20px;border-radius:12px;box-shadow:0 2px 8px #0000002e;transition:transform .15s,box-shadow .15s}.room-card:hover{transform:translateY(-1px);box-shadow:0 4px 14px #00000040}.room-info{display:flex;flex-direction:column;gap:4px}.room-info-top{display:flex;gap:12px;align-items:center}.room-summary{font-size:12px;color:var(--text-muted)}.room-preset{font-weight:600;color:var(--accent)}.room-players{color:var(--text-muted);font-size:13px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--panel-bg);border-radius:16px;padding:24px;width:520px;max-width:92vw;max-height:88vh;overflow-y:auto;box-shadow:0 12px 48px #00000073}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-header h2{font-family:Georgia,serif;font-size:18px;margin:0;color:var(--text)}.modal-close{font-size:18px;padding:4px 10px;line-height:1;background:transparent}.modal .create-form{display:flex;gap:16px;align-items:flex-end}.modal .create-form .form-group{flex:1;margin-bottom:0}.modal .create-btn{width:100%;margin-top:16px;padding:12px}.settings-toggle-row{margin-top:16px}.settings-toggle{padding:6px 14px;font-size:13px;background:#ffffff14}.settings-toggle.active{background:#d4a8432e;color:var(--accent)}.settings-panel{margin-top:12px;padding:16px;background:#0000002e;border-radius:10px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.setting-item>label:first-child:not(.checkbox-label):not(.radio-label){display:block;font-size:13px;color:var(--text-muted);margin-bottom:6px}.radio-group{display:flex;gap:12px;flex-wrap:wrap}.radio-label,.checkbox-label{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer;color:var(--text)}.checkbox-label{padding-top:4px}.checkbox-label input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}.radio-label input[type=radio]{accent-color:var(--accent)}.hint{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.25);font-size:11px;color:var(--text-muted);cursor:help;flex-shrink:0;margin-left:auto}.reset-settings{margin-top:12px;padding:6px 14px;font-size:12px;background:#ffffff14}.game-page{height:100vh;overflow:hidden}.game-header{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--panel-bg);box-shadow:0 2px 8px #0000002e;z-index:5}.game-info{display:flex;gap:18px;align-items:center;font-size:14px;margin-left:auto}.game-info .round{color:var(--text-muted)}.game-info .trump{color:var(--accent);font-weight:600}.game-info .room-players-info{color:var(--text-muted)}.phase{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.game-error{margin:0;border-radius:0}.waiting{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px}.waiting code{background:#00000038;padding:4px 12px;border-radius:6px;font-size:13px}.game-field{flex:1;display:flex;flex-direction:column;padding:12px 16px;gap:10px;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,var(--table-felt) 0%,var(--table-bg) 70%),repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.012) 2px,rgba(255,255,255,.012) 4px);position:relative}.opponents{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;padding:6px 12px 4px}.opponent{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:110px;position:relative}.opponent.out{opacity:.5}.opponent-name{font-size:14px;font-weight:600;color:var(--text);text-shadow:0 1px 3px rgba(0,0,0,.45);display:flex;align-items:center;gap:6px}.opponent.current .opponent-name{color:var(--accent)}.opponent-cards{display:flex;justify-content:center;align-items:flex-end;height:60px;position:relative}.opponent-cards .card-back{width:38px;height:56px;border-radius:5px;margin-left:-22px;transform-origin:bottom center;box-shadow:0 1px 4px #0000004d}.opponent-cards .card-back:first-child{margin-left:0}.opponent-cards .card-back:before{top:2px;right:2px;bottom:2px;left:2px;border-width:1px;border-radius:4px}.opponent-cards .card-back:after{top:4px;right:4px;bottom:4px;left:4px;border-radius:3px;background:repeating-linear-gradient(45deg,transparent 0,transparent 4px,var(--cb-diamond) 4px,var(--cb-diamond) 5px),repeating-linear-gradient(-45deg,transparent 0,transparent 4px,var(--cb-diamond) 4px,var(--cb-diamond) 5px),var(--cb-dark)}.card-count-badge{font-size:11px;font-weight:700;background:#0000008c;color:#fff;padding:1px 8px;border-radius:10px;margin-top:2px}.out-label{font-size:12px;color:var(--text-muted)}.role-badge{font-size:10px;padding:2px 8px;border-radius:10px;background:#ffffff2e;color:#fff;font-weight:700;letter-spacing:.3px}.role-badge.atk{background:var(--danger)}.role-badge.def{background:var(--success)}.bot-badge{font-size:9px;padding:1px 6px;border-radius:4px;background:#6b7280;color:#fff;font-weight:700;letter-spacing:.5px}.role-status-badge{font-size:13px;font-weight:700;padding:4px 14px;border-radius:14px;letter-spacing:.3px;color:#fff}.role-status-badge.atk{background:var(--danger)}.role-status-badge.def{background:var(--success)}.turn-timer{font-weight:700;font-size:13px;color:#fff;padding:2px 10px;border-radius:10px;background:#0000008c;min-width:36px;text-align:center;display:inline-block}.turn-timer.warning{background:#d4a843d9;color:#2c1810}.turn-timer.critical{background:#c0392beb;color:#fff;animation:timer-pulse .8s infinite}.opponent .turn-timer{margin-top:2px}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.55}}.deck-area{position:absolute;left:28px;top:50%;transform:translateY(-50%);display:flex;align-items:center;z-index:2}.trump-card-wrap{transform:rotate(90deg);margin-right:-38px;position:relative;z-index:1}.deck-stack{position:relative;z-index:2;width:var(--card-width);height:var(--card-height)}.deck-stack .card-back{position:absolute;top:0;left:0}.deck-stack .card-back:nth-child(2){top:2px;left:2px;z-index:-1}.deck-stack .card-back:nth-child(3){top:4px;left:4px;z-index:-2}.deck{position:absolute;top:-22px;left:50%;transform:translate(-50%);font-size:13px;font-weight:700;color:#fff;background:#0000008c;padding:2px 10px;border-radius:10px;white-space:nowrap;z-index:5}.trump-label{display:none}.table-area{flex:1;display:flex;justify-content:center;align-items:center;position:relative}.table{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;padding:20px;max-width:760px}.empty-table{color:var(--text-faint);font-size:15px}.table-slot{position:relative;width:calc(var(--card-width) + 28px);height:calc(var(--card-height) + 32px)}.table-slot .card{position:absolute;top:0;left:0}.defense-card{position:absolute;top:28px;left:22px;transform:rotate(15deg)}.defense-card .card{position:relative}.defense-placeholder{position:absolute;top:28px;left:22px;width:var(--card-width);height:var(--card-height);border:2px dashed rgba(255,255,255,.25);border-radius:var(--card-radius);transform:rotate(15deg)}.beat-target{position:absolute;top:28px;left:22px;width:var(--card-width);height:var(--card-height);border:3px solid var(--accent);border-radius:var(--card-radius);background:#d4a8432e;cursor:pointer;transform:rotate(15deg);animation:glow 1.4s infinite}@keyframes glow{0%,to{border-color:var(--accent);box-shadow:0 0 8px #d4a84366}50%{border-color:var(--accent-hover);box-shadow:0 0 14px #e6c36a99}}.your-role{display:flex;justify-content:center;gap:12px;align-items:center;min-height:24px}.your-turn{color:var(--accent);font-weight:700;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.hand{display:flex;justify-content:center;padding:8px 0 4px;flex-wrap:nowrap}.hand .card{margin-left:-30px;transition:transform .15s ease,box-shadow .15s ease;box-shadow:-6px 3px 10px #00000073,0 2px 4px #0003}.hand .card:first-child{margin-left:0;box-shadow:0 2px 6px #00000040}.card{width:var(--card-width);height:var(--card-height);background:var(--bg-card);border:none;border-radius:var(--card-radius);position:relative;overflow:hidden;box-shadow:0 2px 6px #00000038;flex-shrink:0}.card.small{width:var(--card-small-width);height:var(--card-small-height)}.card img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;padding:3px;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.card.small img{padding:2px}.card-text-fallback{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;line-height:1}.card-text-fallback .card-rank{font-family:Georgia,serif;font-size:22px}.card-text-fallback .card-suit{font-size:26px;margin-top:4px}.card.small .card-text-fallback .card-rank{font-size:14px}.card.small .card-text-fallback .card-suit{font-size:18px;margin-top:2px}.card.clickable{cursor:pointer}.hand .card.clickable:hover{transform:translateY(-14px);box-shadow:0 8px 18px #00000052;z-index:10}.card.selected{transform:translateY(-14px);box-shadow:0 0 0 3px var(--accent),0 8px 20px #d4a84359;z-index:10}.bottom-bar{background:var(--panel-bg);padding:10px 18px;margin:0;display:flex;align-items:center;gap:16px;box-shadow:0 -2px 8px #0000002e;z-index:5}.bottom-bar .player-name{font-size:14px;font-weight:600;color:var(--text)}.bottom-bar .player-stats{font-size:12px;color:var(--text-faint);margin-left:auto}.action-buttons{display:flex;gap:10px;flex:1;justify-content:center}.connection-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;justify-content:center;align-items:center;z-index:99}.connection-card{background:var(--panel-bg);padding:32px 48px;border-radius:16px;text-align:center;box-shadow:0 12px 48px #00000073}.connection-card p{font-size:16px;margin-bottom:4px;color:var(--text)}.connection-hint{color:var(--text-muted);font-size:13px!important}.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}@keyframes spin{to{transform:rotate(360deg)}}.game-over-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:flex;justify-content:center;align-items:center;z-index:100}.game-over-card{background:var(--panel-bg);padding:40px;border-radius:16px;text-align:center;box-shadow:0 12px 48px #00000073}.game-over-card h2{margin-bottom:16px;font-family:Georgia,serif;color:var(--text)}.game-over-card .win{color:#ffe5a6;text-shadow:0 0 14px rgba(212,168,67,.55);font-size:20px;font-weight:700;margin-bottom:24px}.game-over-card .lose{color:#ffc9b7;text-shadow:0 0 14px rgba(0,0,0,.4);font-size:20px;font-weight:700;margin-bottom:24px}.game-over-hint{color:var(--text-muted);font-size:13px;margin-top:12px}.room-lobby{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;background:radial-gradient(ellipse at 50% 40%,var(--table-felt) 0%,var(--table-bg) 70%)}.room-lobby-content{background:var(--panel-bg);border-radius:16px;padding:28px 32px;width:460px;max-width:92vw;text-align:center;box-shadow:0 6px 24px #00000047}.room-lobby-content h2{margin-bottom:20px;font-size:20px;font-family:Georgia,serif;color:var(--text)}.room-players-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.room-player{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0000002e;border-radius:10px;border:2px solid transparent;transition:border-color .2s}.room-player.ready{border-color:var(--success);background:#4caf501a}.room-player.empty{opacity:.6;border-style:dashed;border-color:#ffffff2e}.player-name{font-weight:500;color:var(--text)}.bot-tag{color:var(--text-muted);font-size:12px}.ready-badge{font-size:12px;padding:3px 10px;border-radius:10px;font-weight:600}.ready-badge.on{background:var(--success);color:#fff}.ready-badge.off{background:#ffffff1f;color:var(--text-muted)}.ready-deadline{font-size:12px;font-weight:700;padding:2px 8px;border-radius:8px;color:#fff;background:#0006;min-width:34px;text-align:center;margin-left:8px}.ready-deadline.warning{color:#2c1810;background:var(--accent)}.ready-deadline.critical{color:#fff;background:var(--danger);animation:timer-pulse .8s infinite}.room-lobby-actions{display:flex;gap:12px;justify-content:center;margin-bottom:12px}.ready-btn{min-width:130px;font-size:16px;padding:10px 26px}.ready-hint{font-size:13px;color:var(--text-muted);margin-bottom:8px}.room-rules-summary{font-size:12px;color:var(--text-faint)}.game-result-banner{text-align:center;padding:18px 28px;border-radius:14px;background:#00000038;margin-bottom:8px;box-shadow:0 4px 14px #00000038}.game-result-banner h2{font-family:Georgia,serif;font-size:22px;font-weight:700}.game-result-banner .win{color:#ffe5a6;text-shadow:0 0 14px rgba(212,168,67,.55)}.game-result-banner .lose{color:#ffc9b7;text-shadow:0 0 14px rgba(0,0,0,.4)}.tab-block-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#14232de0;display:flex;align-items:center;justify-content:center;padding:20px}.tab-block-dialog{background:var(--panel-bg);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:28px 32px;max-width:440px;text-align:center;box-shadow:0 10px 40px #00000080}.tab-block-dialog h2{font-size:20px;margin-bottom:12px;color:var(--accent)}.tab-block-dialog p{color:var(--text);line-height:1.5;margin-bottom:20px}