*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#1b5e20;--text:#fff;--header-bg:#f5f5f5;--header-border:#ccc;--header-text:#222;--card-bg:#fff;--card-text:#222;--card-red:#c62828;--card-border:#ccc;--card-playable:#e8f5e9;--accent:#4a90d9;--modal-bg:#fff;--modal-text:#222;--overlay-bg:rgba(0,0,0,0.5);--table-bg:#2e7d32;--msg-bg:rgba(0,0,0,0.6)}
[data-theme="dark"]{--bg:#1a1a2e;--text:#e0e0e0;--header-bg:#16213e;--header-border:#0f3460;--header-text:#e0e0e0;--card-bg:#2a2a4a;--card-text:#e0e0e0;--card-red:#ef5350;--card-border:#555;--card-playable:#1b3a1b;--table-bg:#1a2a1a;--modal-bg:#16213e;--modal-text:#e0e0e0;--overlay-bg:rgba(0,0,0,0.6);--msg-bg:rgba(0,0,0,0.7)}
html,body{height:100%;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;overflow:hidden}
body{display:flex;justify-content:center}
.app{width:100%;max-width:600px;display:flex;flex-direction:column;height:100%}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--header-bg);border-bottom:1px solid var(--header-border);color:var(--header-text)}
.app-title{font-size:1.15rem;font-weight:700}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--header-text);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px}
.icon-btn:hover{background:rgba(128,128,128,0.15)}
.icon-btn svg{width:20px;height:20px}
[data-theme="light"] .icon-moon{display:none}[data-theme="dark"] .icon-sun{display:none}[data-theme="dark"] .icon-moon{display:block}
.game-container{flex:1;display:flex;flex-direction:column;align-items:center;padding:6px;gap:4px;overflow:hidden}
.scoreboard{display:flex;gap:12px;font-size:.7rem;font-weight:600}
.sb-item{padding:3px 10px;background:rgba(0,0,0,0.3);border-radius:6px}
.pass-info{font-size:.72rem;font-weight:700;padding:3px 14px;border-radius:6px;display:none;background:rgba(255,152,0,0.3);color:#ffcc80}
.pass-info.active{display:block}
.table{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:4px}
.seat{display:flex;flex-direction:column;align-items:center;gap:2px}
.name{font-size:.65rem;font-weight:600;opacity:.8}
.middle-row{display:flex;align-items:center;justify-content:center;width:100%;gap:8px}
.trick-area{width:160px;height:100px;display:flex;align-items:center;justify-content:center;gap:4px;flex-shrink:0}
.hand{display:flex;justify-content:center;flex-wrap:nowrap;gap:-8px}
.seat.top .hand,.seat.left .hand,.seat.right .hand{gap:2px}
.card{width:40px;height:58px;background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--card-text);cursor:default;flex-shrink:0;line-height:1.1;transition:transform .15s,box-shadow .15s}
.card.red{color:var(--card-red)}
.card.face-down{background:linear-gradient(135deg,#1565c0,#0d47a1);border-color:#0d47a1;color:transparent}
.card.playable{cursor:pointer;box-shadow:0 0 0 2px #4caf50}
.card.playable:hover{transform:translateY(-6px);box-shadow:0 0 0 2px #4caf50,0 4px 12px rgba(0,0,0,0.3)}
.card.selected{transform:translateY(-8px);box-shadow:0 0 0 2px #ff9800,0 4px 12px rgba(255,152,0,0.4);cursor:pointer}
.card.in-trick{width:44px;height:62px;font-size:.75rem}
.message{min-height:24px;padding:4px 12px;border-radius:6px;font-size:.75rem;font-weight:600;text-align:center}
.message:not(:empty){background:var(--msg-bg)}
.btn-row{display:flex;gap:8px;align-items:center}
.action-btn{padding:8px 20px;font-family:inherit;font-size:.8rem;font-weight:600;border:none;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}
.action-btn.secondary{background:rgba(255,255,255,0.15)}
.action-btn.secondary:hover{background:rgba(255,255,255,0.25)}
#passBtn{display:none;background:#e67e22}
#passBtn.active{display:block}
.hist-panel{display:none;width:100%;max-height:120px;overflow-y:auto;font-size:.68rem;background:rgba(0,0,0,0.35);border-radius:6px;padding:6px 10px}
.hist-panel.active{display:block}
.hist-trick{display:flex;align-items:center;gap:6px;padding:2px 0;border-bottom:1px solid rgba(255,255,255,0.1)}
.hist-trick:last-child{border-bottom:none}
.hist-num{opacity:.5;min-width:20px}
.hist-card{padding:1px 3px;border-radius:3px;background:rgba(255,255,255,0.12);font-weight:600}
.hist-card.red{color:var(--card-red)}
.hist-card.winner{outline:1.5px solid #4caf50}
.hist-winner{margin-left:auto;opacity:.7;font-weight:600;white-space:nowrap}
.hist-empty{opacity:.5;text-align:center;padding:8px}
.modal-overlay{position:fixed;inset:0;background:var(--overlay-bg);display:none;align-items:center;justify-content:center;z-index:100}
.modal-overlay.active{display:flex}
.modal{background:var(--modal-bg);color:var(--modal-text);border-radius:16px;padding:24px;text-align:center;max-width:320px;width:90%;box-shadow:0 12px 40px rgba(0,0,0,0.2)}
.win-icon{font-size:48px;margin-bottom:6px}
.modal-title{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.modal-sub{font-size:.85rem;opacity:.7;margin-bottom:12px}
.round-scores{text-align:left;font-size:.8rem;margin-bottom:12px}
.round-scores div{padding:4px 0;border-bottom:1px solid rgba(128,128,128,0.2);display:flex;justify-content:space-between}
.play-again-btn{width:100%;padding:12px;font-family:inherit;font-size:.9rem;font-weight:600;border:none;border-radius:10px;background:var(--accent);color:#fff;cursor:pointer}