body{font-family:system-ui,sans-serif;margin:0;background:#14141c;color:#eee}header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:#223}h1{margin:0;font-size:1.2rem}main{max-width:800px;margin:1rem auto;padding:0 1rem}input,button{padding:.5rem;border-radius:4px;border:1px solid #555;background:#2b2b40;color:#eee}button{cursor:pointer}button:hover{background:#3b3b5c}.row,.inline{display:flex;gap:.5rem;margin:.5rem 0;flex-wrap:wrap}.error{color:#ff7b7b;min-height:1.2em}.card{background:#223;border-radius:8px;padding:1rem;margin:.5rem 0}.commander-surface{background-color:#223;background-image:linear-gradient(90deg,#222233f7,#222233d1 62%,#22223373),var(--commander-art);background-size:cover;background-position:center 30%}.commander-picker{position:relative;max-width:32rem;margin:.5rem 0}.commander-picker input{width:min(100%,28rem);box-sizing:border-box}.commander-results{position:absolute;top:100%;left:0;right:0;z-index:5;max-height:18rem;overflow:auto;margin:0;padding:0;list-style:none;background:#171720;border:1px solid #555;border-radius:4px}.commander-results li{margin:0}.commander-result{width:100%;display:flex;justify-content:space-between;align-items:center;gap:.75rem;text-align:left;border:0;border-radius:0;background:transparent}.commander-result:hover{background:#3b3b5c}.commander-selected{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:.5rem 0}.commander-info{margin:.4rem 0}.commander-heading{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.commander-type{font-size:.85rem;opacity:.8}.commander-info details{margin-top:.25rem}.commander-info details p{white-space:pre-line;margin:.35rem 0}.mana-cost{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}.mana-cost img{width:1.2em;height:1.2em;flex:none}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;margin:.5rem 0}.stat-tile{background:#223;border-radius:8px;padding:.75rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center}.stat-icon{font-size:1.6rem}.stat-tile strong{font-size:1.4rem}.stat-tile small{opacity:.7}.dead{opacity:.5}ul{padding-left:1.2rem}li.game{cursor:pointer;margin:.3rem 0}.avatar{border-radius:50%;object-fit:cover;flex:none;vertical-align:middle;display:inline-block}.avatar-fallback{background:#446;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600}.with-avatar{display:inline-flex;align-items:center;gap:.5rem}.user-menu{display:flex;align-items:center;gap:.5rem}.avatar-picker{display:inline-flex;align-items:center;gap:.4rem}.avatar-btn{padding:0;border:0;background:none;border-radius:50%;cursor:pointer;line-height:0}.link{background:none;border:0;padding:0;color:#9ab;text-decoration:underline;cursor:pointer;font-size:.8rem}table.games tr.game{cursor:pointer}table.games tr.game:hover,table.games tr.game:focus{background:#2c2c44;outline:none}.seat-name .avatar{margin-right:.4em;vertical-align:middle}.notifications{position:static}.badge{background:#e03131;color:#fff;border-radius:999px;font-size:.7rem;padding:0 .35rem;margin-left:.25rem}.notif-list{position:fixed;right:.5rem;top:3.5rem;z-index:50;width:min(360px,calc(100vw - 1rem));max-height:calc(100vh - 4rem);overflow:auto;box-shadow:0 4px 16px #0009}.notif-item{display:flex;flex-direction:column;gap:.4rem;padding:.4rem 0;border-bottom:1px solid #444}table{border-collapse:collapse;width:100%}td,th{border-bottom:1px solid #444;padding:.3rem;text-align:left}.counter{display:flex;align-items:stretch;margin:.5rem 0;border-radius:8px;overflow:hidden;min-height:7rem}.counter-value{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a28;pointer-events:none}.counter-label{font-size:.8rem;opacity:.7}.counter-number{font-size:3.5rem;font-weight:700;line-height:1}.zone{flex:1;border:0;border-radius:0;font-size:2.5rem;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.zone.minus{background:#4a2530}.zone.minus:hover:not(:disabled){background:#63303f}.zone.plus{background:#244a32}.zone.plus:hover:not(:disabled){background:#2f6342}.zone:active:not(:disabled){filter:brightness(1.4)}.zone:disabled{opacity:.4;cursor:default}.card.turn{border:3px solid #ffd43b;box-shadow:0 0 14px 3px #ffd43bb3;padding:calc(1rem - 3px)}.seat-controls{float:right;display:inline-flex;gap:.3rem}.table{position:fixed;inset:0;z-index:100;background:#0d0d14;display:grid;grid-template-rows:1fr 1fr;gap:6px;padding:6px;touch-action:manipulation;user-select:none;-webkit-user-select:none}.seat-cell{position:relative;container-type:size;min-width:0;min-height:0}.seat{position:absolute;top:50%;left:50%;width:100cqw;height:100cqh;transform:translate(-50%,-50%) rotate(var(--rot));container-type:size;box-sizing:border-box;border:4px solid transparent;border-radius:14px;background:#223;overflow:hidden}.seat.commander-surface{background-color:#223;background-image:linear-gradient(0deg,#14141c94,#14141c2e),var(--commander-art);background-size:cover;background-position:center 30%}.seat.commander-surface .seat-name,.seat.commander-surface .seat-life,.seat.commander-surface .seat-commander-mana{text-shadow:0 1px 4px #000,0 0 10px #000}.seat.side{width:100cqh;height:100cqw}.seat.turn{border-color:#ffd43b;box-shadow:0 0 18px 4px #ffd43bbf}.seat.dead{opacity:.45}.seat-menu{position:absolute;bottom:3cqh;left:50%;transform:translate(-50%);z-index:3}.seat-roll{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3}.seat-zone{position:absolute;top:0;bottom:0;width:50%;border:0;border-radius:0;background:transparent;font-size:12cqh;color:#ffffff40;touch-action:manipulation}.seat-zone.left{left:0;text-align:left;padding-left:6cqw}.seat-zone.right{right:0;text-align:right;padding-right:6cqw}.seat-zone:active:not(:disabled){background:#ffffff1f}.seat-zone:disabled{color:transparent;cursor:default}.seat-name{position:absolute;top:4cqh;left:0;right:0;text-align:center;font-size:min(9cqh,6cqw);pointer-events:none}.seat-commander-mana{position:absolute;top:16cqh;left:0;right:0;display:flex;justify-content:center;pointer-events:none}.seat-commander-mana .mana-cost{gap:.15cqw}.seat-commander-mana .mana-cost img{width:min(6cqh,4cqw);height:min(6cqh,4cqw)}.seat-life{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:min(48cqh,32cqw);font-weight:700;pointer-events:none}.seat-chips{position:absolute;bottom:4cqh;left:0;right:0;display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;pointer-events:none}.chip{background:#14141c;border-radius:999px;padding:.1rem .6rem;font-size:min(8cqh,5cqw)}.chip.poison{color:#9be37a}.seat-out{position:absolute;inset:auto 0 22cqh;text-align:center;font-size:min(10cqh,6cqw);color:#ff7b7b;pointer-events:none}.table-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:.5rem;align-items:center;background:#14141ceb;border:1px solid #555;border-radius:999px;padding:.4rem .8rem;z-index:2}.tracker-row{display:flex;gap:.4rem;align-items:center}.tracker-row .counter{flex:1;min-height:5rem}.tracker-row .counter-number{font-size:2.2rem}.tracker-del{padding:.4rem .6rem}.icon-picker{display:flex;flex-wrap:wrap;gap:.3rem;margin:.5rem 0}.icon-picker button{font-size:1.4rem;padding:.3rem .5rem}.icon-picker button.selected{border-color:#ffd43b;background:#4a4420}.table-panel{position:absolute;inset:0;z-index:3;background:#000000b3;display:flex;align-items:center;justify-content:center}.table-panel .card{width:min(600px,90vw);max-height:90vh;overflow:auto}button.danger{background:#b3261e;border-color:#e0524a;color:#fff}button.danger:hover{background:#d13a31}.timer-bar{display:flex;gap:1rem;align-items:center;font-variant-numeric:tabular-nums}.timer{font-weight:700}.timer.over{color:#ff7b7b}.chip.penalty{color:#ffb4ab}.table-hub .timer-bar{gap:.6rem}@keyframes flash-orange{0%,to{border-color:#ff9f1a;box-shadow:0 0 18px 4px #ff9f1ad9}50%{border-color:#5a3a0a;box-shadow:none}}@keyframes flash-red{0%,to{border-color:#ff2d2d;box-shadow:0 0 18px 4px #ff2d2de6}50%{border-color:#5a0a0a;box-shadow:none}}.card.turn.stage-warn,.seat.turn.stage-warn{animation:flash-orange 1s ease-in-out infinite}.card.turn.stage-urgent,.seat.turn.stage-urgent{animation:flash-red .5s ease-in-out infinite}.card.turn.stage-over,.seat.turn.stage-over{border-color:#ff2d2d;box-shadow:0 0 18px 4px #ff2d2de6}
