:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;background:#06111c;color:#e9eef5}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 30% 0,#173957,#091725 45%,#040b12 100%)}
button,input,select{font:inherit}button{cursor:pointer}#shell{max-width:1500px;margin:auto;padding:clamp(12px,2vw,28px)}
.notice{position:sticky;top:8px;z-index:20;background:#6b2930;border:1px solid #d9767f;padding:10px 14px;border-radius:9px}
.ui-stack{display:flex;flex-direction:column;gap:12px}.ui-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}.app-root{gap:20px}
.header{justify-content:space-between;border-bottom:1px solid #35536b;padding-bottom:16px}.eyebrow{font-size:10px;font-weight:850;letter-spacing:.22em;color:#75c8ff}.heading{font:600 clamp(30px,4vw,46px)/1 Georgia,serif;color:#eff9ff}
.header-meta{align-items:flex-end}.ui-badge{display:inline-flex;padding:6px 10px;border:1px solid #3c637e;background:#102b3e;border-radius:99px;font-size:12px}.phase-badge{color:#bce5ff}
.game-columns{gap:15px}.ui-panel{background:#0d2233dc;border:1px solid #31506a;border-radius:14px;padding:14px}.panel-title{margin:0 0 12px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#8ab8d3}
.seat-stack{gap:5px}.seat.own{border-color:#68c8f5}.seat.active{box-shadow:0 0 0 1px #e7bd61}.communication{font-size:10px}.communication.available{opacity:.55}
.tasks{align-items:stretch}.objective{width:148px;padding:10px;background:#10283b;border:1px solid #426078;border-radius:10px;display:grid;gap:6px}.objective.mine{box-shadow:0 0 0 2px #6bc8ff}.objective.complete{opacity:.48}.objective-top{display:flex;justify-content:space-between;align-items:center}.objective-target{font-size:23px}.objective-difficulty{font-size:9px;color:#ffd27b}.objective-title{font-size:10px;text-transform:uppercase;color:#9ab6c8}.objective-detail{font-size:12px}.objective-owner{font-size:10px;font-weight:800;color:#8fd8a8}.objective-action{padding:6px 8px!important;font-size:11px!important}
.hand,.trick,.last-trick{align-items:flex-start}.ui-card-wrap{display:flex;flex-direction:column;align-items:center;gap:5px}.playing-card{width:62px;height:86px;border-radius:8px;border:2px solid #d7e4ec;background:#eaf3f8;color:#10202d;font:800 23px Georgia,serif;position:relative;overflow:hidden}
.playing-card::before{content:"";position:absolute;inset:0 0 auto;height:9px;background:var(--suit,#777)}.suit-blue{--suit:#2a83d7}.suit-green{--suit:#2f9b69}.suit-pink{--suit:#d85b91}.suit-yellow{--suit:#d7a82a}.suit-rocket{--suit:#525a69}.hand-card.playable .playing-card{box-shadow:0 0 0 2px #e6c86e,0 6px 20px #0008}.card-caption{font-size:9px;color:#a9c5d7}.card-options{display:grid;gap:3px}.card-option{font-size:10px;padding:5px 6px!important}
.ui-button,.primary,.secondary{border:1px solid #69a3c7;border-radius:8px;background:#17415e;color:#ecf8ff;padding:10px 14px;font-weight:750}.primary{background:#59b9ea;color:#06121b;border-color:#8ad8ff}.secondary{background:#10283a}.phase-detail,.empty,.log-line{font-size:12px;color:#abc4d4;line-height:1.5}.log-line{padding:4px 0;border-bottom:1px solid #ffffff0c}.outcome{font-size:18px;color:#f4d989}
.lobby-panel{max-width:560px;margin:10vh auto;padding:40px;background:#0c2538;border:1px solid #3e6985;border-radius:18px;box-shadow:0 25px 80px #0008}.lobby-panel h1{font:600 50px/1 Georgia,serif;margin:12px 0;color:#eff9ff}.lobby-lede{color:#b9cedd;line-height:1.6}.lobby-form{display:grid;gap:16px}.lobby-form label{display:grid;gap:6px;font-size:12px;font-weight:700}.lobby-form input,.lobby-form select{padding:12px;background:#071723;color:#fff;border:1px solid #466b83;border-radius:8px}
.confirm-popover{position:fixed;z-index:1000;width:min(280px,calc(100vw - 20px));padding:15px;background:#153349;border:1px solid #75b4d5;border-radius:12px;box-shadow:0 16px 50px #000b}.confirm-popover[hidden]{display:none}.confirm-eyebrow{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#7bc9ef}.confirm-message{font-size:13px;line-height:1.45}.confirm-actions,.dialog-actions{display:flex;gap:8px;justify-content:flex-end}
.holding::after{content:"";position:absolute;left:0;bottom:0;height:5px;background:#f5cf63;animation:hold-progress var(--hold-ms) linear forwards;width:100%}@keyframes hold-progress{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
dialog{background:#102d42;color:#eef8ff;border:1px solid #6ba7c8;border-radius:12px;max-width:400px}dialog::backdrop{background:#000a}
@media(max-width:650px){#shell{padding:9px}.ui-panel{padding:9px}.objective{width:132px}.playing-card{width:52px;height:74px}.lobby-panel{padding:24px}.header{gap:10px}.heading{font-size:30px}}