*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--table: #0f4d2a;--table-dark: #0a3d1e;--table-stripe: #0c4222;--gold: #c9a84c;--gold-light: #dcc278;--gold-dark: #a8872e;--navy: #1a2744;--navy-light: #243454;--card-bg: #f5f0e1;--card-border: #d4cbb5;--card-red: #b8342a;--card-black: #1a1a2e;--hl-reinforce: #27ae60;--hl-arm: #2980b9;--hl-place-general: #8e44ad;--hl-can-attack: #e67e22;--hl-selected: #e67e22;--hl-attack-target: #e74c3c;--card-w: 72px;--card-h: 100px;--card-r: 6px;--wall-gap: 8px;--zone-pad: 24px;--font-display: "Cinzel", Georgia, serif;--font-body: "Segoe UI", system-ui, sans-serif}body{background:var(--table);color:#fff;font-family:var(--font-body);min-height:100vh}.game{display:flex;flex-direction:column;min-height:100vh}.turn-banner{position:relative;text-align:center;font-size:1.1rem;font-weight:700;letter-spacing:.08em;padding:12px 24px;text-transform:uppercase;background:#1a1f2e;color:#fff;font-family:var(--font-display)}.quit-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;color:#ffffffb3;border:1.5px solid rgba(255,255,255,.3);border-radius:20px;padding:4px 14px;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.quit-btn:hover{background:#ffffff1a;border-color:#ffffff80;color:#fff}.board{display:flex;flex-direction:column;flex:1;gap:0}.player-area{padding:16px 12px 8px;position:relative}.player-area-opponent{background:var(--table-stripe);border-bottom:1px solid rgba(201,168,76,.12)}.player-area-active{border-top:1px solid rgba(201,168,76,.12)}.player-area-active-p1,.player-area-active-p2{background:#0f4d2a99}.player-label{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffffff73;margin-bottom:8px;font-family:var(--font-display)}.wall-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--wall-gap);align-items:flex-start;justify-content:center}.wall-slot{display:flex;flex-direction:column;align-items:center;gap:4px}.wall-area,.general-area{display:flex;align-items:center;justify-content:center;width:var(--card-w);min-height:var(--card-h);border-radius:var(--card-r);transition:box-shadow .15s,transform .1s}.wall-area{position:relative}.kings-marker{position:absolute;top:3px;right:4px;font-size:.55rem;font-weight:800;color:var(--gold);letter-spacing:.05em;font-family:var(--font-display)}.card{width:var(--card-w);height:var(--card-h);background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:var(--card-r);position:relative;-webkit-user-select:none;user-select:none;overflow:hidden}.card-small{width:calc(var(--card-w) * .65);height:calc(var(--card-h) * .65)}.card-red{color:var(--card-red)}.card-black{color:var(--card-black)}.card-corner-tl{position:absolute;top:3px;left:4px;display:flex;flex-direction:column;align-items:center;line-height:1}.card-corner-tl .card-rank{font-size:.75rem;font-weight:800}.card-corner-tl .card-suit{font-size:.65rem;line-height:1}.card-corner-br{position:absolute;bottom:3px;right:4px;display:flex;flex-direction:column;align-items:center;line-height:1;transform:rotate(180deg)}.card-corner-br .card-rank{font-size:.75rem;font-weight:800}.card-corner-br .card-suit{font-size:.65rem;line-height:1}.card-center-suit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;line-height:1}.card-small .card-corner-tl .card-rank,.card-small .card-corner-br .card-rank{font-size:.6rem}.card-small .card-corner-tl .card-suit,.card-small .card-corner-br .card-suit{font-size:.5rem}.card-small .card-center-suit{font-size:1.2rem}.card-small .card-corner-tl{top:2px;left:2px}.card-small .card-corner-br{bottom:2px;right:2px}.card-king{border-color:var(--gold);box-shadow:0 0 6px #c9a84c99}.card-illustration{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.card-illustration svg{width:100%;height:100%}.card-scrollwork{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;stroke:var(--gold);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.65}.card-stack{position:relative;width:var(--card-w);height:var(--card-h)}.card-stack>.card{position:absolute;top:0;left:0}.card-backing{top:-4px!important;left:-4px!important;background:#ebe6d6!important;border-color:#c4bb9f!important}.card-weapon{position:absolute!important;top:-10px!important;left:-10px!important;z-index:1;box-shadow:2px 2px 4px #0006}.card-back{width:var(--card-w);height:var(--card-h);border-radius:var(--card-r);overflow:hidden;flex-shrink:0}.card-back-small{width:calc(var(--card-w) * .65);height:calc(var(--card-h) * .65)}.card-back-svg{width:100%;height:100%;display:block}.empty-general-slot{width:var(--card-w);height:var(--card-h);border:1.5px dashed rgba(201,168,76,.15);border-radius:var(--card-r)}.king-slot{display:flex;align-items:center;justify-content:center}.wall-slot-hole{width:var(--card-w);min-height:calc(2 * var(--card-h) + 4px);border:1px dashed rgba(201,168,76,.1);border-radius:var(--card-r);flex-shrink:0}.wall-slot-empty .empty-outline{border:1px dashed rgba(201,168,76,.15);border-radius:var(--card-r)}.wall-slot-buildable .wall-area{border-color:#c9a84c66;border-width:2px;color:#c9a84c80;font-size:.75rem;font-weight:600;transition:border-color .15s,color .15s}.wall-slot-buildable:hover .wall-area{border-color:#c9a84cbf;color:#c9a84ce6}.card-face-down{width:100%;height:var(--card-h);border-radius:var(--card-r);overflow:hidden}.card-face-down .card-back{width:100%;height:100%;opacity:.5}.wall-slot-destroyed .empty-outline{border:1px dashed rgba(201,168,76,.08);border-radius:var(--card-r)}.ghost-card{width:var(--card-w);height:var(--card-h);border:2px dashed rgba(201,168,76,.35);border-radius:var(--card-r);display:flex;align-items:center;justify-content:center;color:#c9a84c80;font-size:.75rem;font-weight:600;transition:border-color .15s,color .15s}.ghost-card:hover{border-color:#c9a84cbf;color:#c9a84ce6}.clickable{cursor:pointer}.hl-reinforce{box-shadow:0 0 0 2px var(--hl-reinforce),0 0 10px var(--hl-reinforce)}.hl-arm{box-shadow:0 0 0 2px var(--hl-arm),0 0 10px var(--hl-arm)}.hl-place-general{box-shadow:0 0 0 2px var(--hl-place-general),0 0 10px var(--hl-place-general)}.hl-can-attack{box-shadow:0 0 0 2px var(--hl-can-attack),0 0 10px var(--hl-can-attack)}.hl-selected-attacker{box-shadow:0 0 0 3px var(--hl-selected),0 0 14px var(--hl-selected)}.hl-attack-target{box-shadow:0 0 0 3px var(--hl-attack-target),0 0 14px var(--hl-attack-target)}.clickable:hover{transform:translateY(-2px)}.kings-wall-card .card{border-color:var(--gold)}.ace-shielded .card{border-color:var(--gold-dark);box-shadow:0 0 6px #c9a84c80}.ace-shielded:after{content:"🛡";position:absolute;bottom:2px;left:4px;font-size:.65rem;opacity:.7;pointer-events:none}.deck-zone{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--zone-pad);padding:14px var(--zone-pad);background:#0000004d;flex-wrap:wrap}.deck-pile-area{display:flex;flex-direction:column;align-items:center;gap:6px}.deck-stack-wrapper{position:relative}.deck-backing-card{position:absolute;width:var(--card-w);height:var(--card-h);background:var(--navy);border:1.5px solid rgba(201,168,76,.3);border-radius:var(--card-r)}.deck-pile{position:relative;transition:transform .1s,box-shadow .1s}.deck-pile.clickable:hover{transform:translateY(-3px);box-shadow:0 6px 16px #0006}.deck-disabled{opacity:.45;cursor:not-allowed}.deck-count{font-size:.7rem;color:#ffffff73;letter-spacing:.03em}.deck-hint-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#ffffff59;text-align:center;white-space:nowrap}.drawn-card-area{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:var(--card-w)}.drawn-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#ffffff80}.discard-btn{background:linear-gradient(135deg,#a83225,#c0392b);color:#fff;border:none;border-radius:20px;padding:6px 18px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}.discard-btn:hover{background:linear-gradient(135deg,#c0392b,#e74c3c);transform:translateY(-1px)}.drawn-card-outline{width:var(--card-w);height:var(--card-h);border:2px dashed rgba(201,168,76,.2);border-radius:var(--card-r);display:flex;align-items:center;justify-content:center}.deck-hint{font-size:.7rem;color:#ffffff4d;text-align:center;padding:4px 6px}.discard-pile-area{display:flex;flex-direction:column;align-items:center;gap:6px;padding-left:16px;border-left:1px solid rgba(201,168,76,.12)}.discard-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#ffffff80}.discard-pile-stack{position:relative;width:var(--card-w);height:var(--card-h);flex-shrink:0}.discard-ghost{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:var(--card-r);transform-origin:center}.discard-top{position:absolute;top:0;right:0;bottom:0;left:0}.discard-empty{width:var(--card-w);height:var(--card-h);border:1.5px dashed rgba(201,168,76,.15);border-radius:var(--card-r)}.gameover-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:100}.gameover-box{background:linear-gradient(145deg,#0f4d2a,#0a3d1e);border:2px solid var(--gold);border-radius:12px;padding:48px 64px;text-align:center;display:flex;flex-direction:column;gap:20px}.gameover-title{font-size:1rem;text-transform:uppercase;letter-spacing:.15em;color:#ffffff8c;font-family:var(--font-display)}.gameover-winner{font-size:2.2rem;font-weight:800;color:var(--gold);font-family:var(--font-display)}.gameover-btn{background:linear-gradient(135deg,var(--gold-dark),var(--gold),var(--gold-light));color:#1a1a2e;border:none;border-radius:50px;padding:12px 32px;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .1s,box-shadow .15s}.gameover-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #c9a84c66}.gameover-btn-secondary{background:transparent;color:#ffffffa6;border:1.5px solid rgba(201,168,76,.4);font-weight:600}.gameover-btn-secondary:hover{background:#c9a84c1a;transform:translateY(-2px);box-shadow:none}.animation-overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50}.ai-explanation{background:#c9a84c26;color:var(--gold-light);font-size:.85rem;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.ai-explanation-dismiss{background:none;border:none;cursor:pointer;color:var(--gold-light);font-size:1rem;line-height:1;flex-shrink:0}.ai-explanation-dismiss:hover{opacity:.7}.menu-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at center,#0f4d2a,#082a16,#051a0d)}.menu-card{background:transparent;border:none;padding:32px 56px;display:flex;flex-direction:column;align-items:center;gap:24px;min-width:320px}.menu-crest{width:80px;height:90px;margin-bottom:-8px}.menu-crest svg{width:100%;height:100%}.menu-title{font-family:var(--font-display);font-size:2.8rem;font-weight:700;letter-spacing:.12em;color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.4)}.menu-main-buttons{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.menu-btn-gold{background:linear-gradient(135deg,var(--gold-dark),var(--gold),var(--gold-light),var(--gold));color:#1a1a2e;border:1px solid rgba(255,255,255,.15);border-radius:50px;padding:12px 48px;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .1s,box-shadow .15s;min-width:220px;letter-spacing:.03em}.menu-btn-gold:hover{transform:translateY(-2px);box-shadow:0 4px 16px #c9a84c66}.menu-btn-gold:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.menu-toggles{display:flex;gap:48px;margin-top:8px}.menu-toggle-group{display:flex;flex-direction:column;gap:10px}.menu-toggle-group-label{font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffffff73}.menu-toggle-item{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.menu-toggle-label{font-size:.85rem;color:#ffffffb3}.toggle-switch{position:relative;width:40px;height:22px;border-radius:11px;background:#ffffff1f;border:1.5px solid rgba(255,255,255,.2);cursor:pointer;transition:background .2s,border-color .2s;flex-shrink:0}.toggle-switch.active{background:var(--gold);border-color:var(--gold-light)}.toggle-switch:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .2s;box-shadow:0 1px 3px #0000004d}.toggle-switch.active:after{transform:translate(18px);background:#1a1a2e}.menu-difficulty{display:flex;flex-direction:column;align-items:center;gap:10px}.menu-difficulty-label{font-family:var(--font-display);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#ffffff73}.menu-difficulty-options{display:flex;gap:20px}.menu-radio-label{display:flex;align-items:center;gap:6px;font-size:.9rem;cursor:pointer;color:#ffffffbf}.menu-radio-label input[type=radio]{accent-color:var(--gold);width:16px;height:16px}.menu-btn-online{background:transparent;color:var(--gold-light);border:1.5px solid rgba(201,168,76,.4)}.menu-btn-online:hover{background:#c9a84c1a;box-shadow:none}.auth-tabs{display:flex;gap:4px}.auth-tab{background:transparent;color:#ffffff80;border:1.5px solid rgba(255,255,255,.15);border-radius:50px;padding:8px 24px;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.auth-tab:hover{color:#fffc;border-color:#c9a84c4d}.auth-tab.active{background:var(--gold);border-color:var(--gold);color:#1a1a2e}.auth-form{display:flex;flex-direction:column;gap:12px;width:100%}.auth-input{background:#ffffff0f;border:2px solid rgba(255,255,255,.15);border-radius:8px;padding:12px 16px;color:#fff;font-size:.95rem;outline:none;transition:border-color .15s}.auth-input:focus{border-color:var(--gold)}.auth-input::placeholder{color:#ffffff59}.auth-error{color:#e74c3c;font-size:.85rem;font-weight:600}.lobby-card{max-width:480px;width:100%}.lobby-header{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.lobby-user{display:flex;align-items:center;gap:12px;font-size:.85rem;color:#fff9}.lobby-section{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.lobby-section-title{font-family:var(--font-display);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#ffffff73}.lobby-join-row{display:flex;gap:8px;width:100%}.lobby-join-row .auth-input{flex:1}.lobby-games{display:flex;flex-direction:column;gap:6px;width:100%}.lobby-game-row{display:flex;align-items:center;gap:12px;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px 14px;color:#fff;font-size:.85rem;cursor:pointer;transition:background .15s;width:100%;text-align:left}.lobby-game-row:hover{background:#ffffff1f}.lobby-game-row.ended{opacity:.5}.lobby-game-variant{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);min-width:50px}.lobby-game-vs{flex:1}.lobby-game-status{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:4px}.lobby-game-status.waiting{background:#c9a84c26;color:var(--gold-light)}.lobby-game-status.active{background:#27ae6033;color:#27ae60}.lobby-game-status.ended{background:#ffffff14;color:#fff6}.lobby-share{display:flex;flex-direction:column;align-items:center;gap:8px}.lobby-share-id{background:#ffffff14;border:1px solid rgba(201,168,76,.3);border-radius:6px;padding:8px 16px;font-family:monospace;font-size:1rem;letter-spacing:.1em;color:var(--gold-light);-webkit-user-select:all;user-select:all}.online-waiting-hint{text-align:center;font-size:.85rem;color:#ffffff80;padding:4px;font-style:italic}@media(max-width:768px){:root{--card-w: 64px;--card-h: 88px}}@media(max-width:480px){:root{--card-w: 56px;--card-h: 78px;--wall-gap: 6px;--zone-pad: 16px}.deck-zone{display:grid;grid-template-columns:1fr 1fr}.menu-toggles{flex-direction:column;gap:20px}.menu-title{font-size:2rem}}@media(max-width:360px){:root{--card-w: 48px;--card-h: 67px;--wall-gap: 4px;--zone-pad: 10px}}@media(pointer:coarse){.ghost-card,.empty-general-slot{min-height:44px}}