:root {
  --bg: #09080d;
  --panel: #15121b;
  --panel2: #20162b;
  --line: #4b355d;
  --hot: #ff2f9e;
  --violet: #9f6bff;
  --text: #f7f2fb;
  --muted: #b7a9c1;
  --good: #67e39d;
  --warn: #ffca5c;
  --bad: #ff6b7f;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top, #23102d, var(--bg) 45%); color: var(--text); font-family: Inter, Segoe UI, Arial, sans-serif; min-height: 100vh; }
button, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
#app { width: min(1600px, 100%); margin: 0 auto; padding: 14px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:10px 14px 16px; }
h1 { margin:0; letter-spacing:.08em; font-size:clamp(24px,3vw,42px); }
.subtitle { color:var(--muted); }
.status-area { display:flex; align-items:center; gap:10px; }
button { color:var(--text); background:#2b2035; border:1px solid #684d7c; border-radius:9px; padding:9px 13px; }
button:hover { border-color:var(--hot); }
.primary { background:linear-gradient(135deg,#c91c77,#6d3fd1); font-weight:800; }
.panel { background:rgba(20,16,26,.95); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 35px #0008; }
.setup { max-width:650px; margin:9vh auto; padding:28px; }
.setup label { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:20px 0; }
.setup select, .setup input { padding:8px; border-radius:8px; background:#17121d; color:white; border:1px solid var(--line); }
.setup input { width:min(280px,60%); }
.setup input:focus { outline:none; border-color:var(--hot); box-shadow:0 0 0 2px #ff2f9e22; }
.prototype-note { color:var(--muted); font-size:12px; margin-top:18px; line-height:1.45; }
.opponents { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:9px; margin-bottom:10px; }
.opponent { background:#121018; border:1px solid #3a2b46; border-radius:13px; padding:10px; min-height:150px; }
.opponent.current, .human-area.current { box-shadow:0 0 0 2px var(--hot), 0 0 22px #ff2f9e44; }
.player-header { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:9px; }
.player-header > div:first-child { display:flex; flex-direction:column; }
.player-header span { color:var(--muted); font-size:12px; }
.flags { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }
.flag { font-size:10px; border:1px solid #554364; border-radius:999px; padding:3px 6px; }
.flag.read { color:#ffd27d; border-color:#b06b22; }
.flag.escape { color:#8fc8ff; border-color:#3977a9; }
.flag.skip { color:#ff9191; }
.mini-tableau { display:grid; grid-template-columns:70px 1fr; gap:7px; }
.mini-read, .slot-special { min-height:92px; border:1px dashed #6f547d; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#8d7a98; font-size:10px; overflow:hidden; }
.mini-read img, .read-slot img { width:100%; height:100%; object-fit:cover; }
.mini-merch { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.merch-dot { min-height:41px; border:1px solid #30263a; border-radius:6px; padding:3px; font-size:9px; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.merch-dot strong { font-size:10px; }
.center-table { display:flex; align-items:center; justify-content:center; gap:24px; min-height:230px; background:radial-gradient(ellipse at center,#2d1637 0%,#0e0b12 70%); border:1px solid #362540; border-radius:18px; margin:10px 0; }
.pile { width:120px; height:170px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font-weight:800; letter-spacing:.08em; }
.card-back { background:linear-gradient(145deg,#17111f,#641b52); border:3px double #f354ba; box-shadow:0 6px 18px #0009; }
.card-back:disabled { opacity:.55; cursor:not-allowed; }
.discard-pile { background:#17151b; border:2px dashed #65536c; color:#9e8ca7; }
.panel-mini { border:1px solid #4a3658; border-radius:12px; padding:12px; display:grid; gap:8px; min-width:170px; }
.panel-mini div { display:flex; justify-content:space-between; gap:18px; }
.panel-mini span { color:var(--muted); font-size:12px; }
.human-area { background:linear-gradient(180deg,#17111d,#100d14); border:1px solid #4a3359; border-radius:17px; padding:13px; }
.tableau { display:grid; grid-template-columns:130px 1fr; gap:10px; }
.read-slot { min-height:178px; }
.merch-grid { display:grid; grid-template-columns:repeat(5,minmax(100px,1fr)); gap:7px; }
.merch-slot { border:1px solid #43334d; border-radius:10px; min-height:84px; background:#0f0c12; padding:5px; position:relative; display:flex; gap:5px; align-items:center; }
.merch-slot img { width:54px; height:76px; object-fit:cover; border-radius:5px; }
.merch-slot .meta { font-size:10px; line-height:1.25; }
.merch-slot .count { font-size:15px; font-weight:900; }
.merch-slot.protected { box-shadow:inset 0 0 0 2px var(--good); }
.hand-header { margin:14px 2px 7px; display:flex; justify-content:space-between; }
.hand { min-height:230px; display:flex; gap:8px; overflow-x:auto; padding:6px 3px 12px; align-items:flex-start; }
.hand-card { flex:0 0 145px; border:1px solid #4f3b5c; background:#0e0b11; border-radius:10px; padding:4px; transition:.13s transform,.13s border-color; position:relative; }
.hand-card:hover { transform:translateY(-7px); border-color:var(--hot); }
.hand-card.disabled { opacity:.55; }
.hand-card img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:7px; display:block; }
.hand-card .card-actions { display:flex; gap:4px; margin-top:5px; }
.hand-card button { padding:5px 7px; font-size:10px; flex:1; }
.hand-card .protected-badge { position:absolute; top:8px; right:8px; background:#114f32; padding:4px 6px; border-radius:999px; font-size:9px; }
.log { margin-top:10px; padding:12px; }
.log h3 { margin:0 0 7px; }
#log { max-height:180px; overflow:auto; font-size:12px; color:#d8cde0; }
.log-line { padding:3px 0; border-bottom:1px solid #241d29; }
.modal { position:fixed; inset:0; background:#000b; display:flex; align-items:center; justify-content:center; padding:18px; z-index:50; }
.modal-card { width:min(700px,96vw); max-height:88vh; overflow:auto; background:#19131f; border:1px solid #704c83; border-radius:16px; padding:20px; box-shadow:0 25px 60px #000; }
.choice-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:12px 0; }
.choice { text-align:left; min-height:55px; }
.choice strong { display:block; }
.choice small { color:var(--muted); }
.gameover-card { text-align:center; }
.score-row { display:flex; justify-content:space-between; border-bottom:1px solid #3b2b46; padding:10px 4px; }
.score-row.winner { color:#ffe07d; font-size:18px; font-weight:900; }
@media (max-width:850px) {
  .tableau { grid-template-columns:90px 1fr; }
  .merch-grid { grid-template-columns:repeat(2,minmax(120px,1fr)); }
  .center-table { gap:10px; flex-wrap:wrap; padding:18px; }
  .pile { width:92px; height:130px; font-size:11px; }
}

.escape-btn {
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid #f4b5df;
  border-radius: 10px;
  background: linear-gradient(135deg, #6b174b, #a72773);
  color: white;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(220, 65, 156, .3);
}
.escape-btn:hover { transform: translateY(-1px); }
.escape-btn:disabled { opacity: .45; cursor: default; transform: none; }

.flag.danger { color:#fff0a0; border-color:#ffb52e; background:#6a341d; font-weight:900; box-shadow:0 0 10px #ff8a2e66; }
.pickup-zone { display:flex; flex-direction:column; align-items:center; gap:8px; }
.pickup-hint { color:var(--muted); font-size:12px; text-align:center; }
.pickup-options { display:flex; align-items:center; gap:10px; }
.market-row { display:flex; gap:9px; }
.market-card { width:112px; padding:4px; background:#120e17; border:1px solid #76528b; border-radius:11px; position:relative; }
.market-card img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:7px; display:block; }
.market-card span { display:block; font-size:9px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.market-card:not(:disabled):hover { transform:translateY(-5px); border-color:var(--hot); box-shadow:0 8px 20px #0008; }
.market-card:disabled { opacity:.72; cursor:default; }
.or-label { font-size:11px; color:var(--muted); font-weight:900; }
@media (max-width:850px){ .market-card{width:82px;} .pickup-options{gap:6px;} }

.name-field span{font-weight:700;font-size:1.05rem}.name-field input{font-size:1rem;min-width:220px}#editNameBtn{white-space:nowrap}


.setup-actions,.join-row,.lobby-controls,.chat-form{display:flex;gap:10px;flex-wrap:wrap}
.setup-actions button{flex:1;min-width:180px}
.join-row{margin-top:12px}
.join-row input,.chat-form input{flex:1;min-width:180px;padding:10px;border-radius:9px;background:#17121d;color:#fff;border:1px solid var(--line)}
.online-btn{background:linear-gradient(135deg,#314a8a,#7a3db5);font-weight:800}
.online-status{min-height:20px;color:var(--muted);font-size:12px;margin-top:9px}
.online-status.error{color:var(--bad)}
.online-status.good{color:var(--good)}
.lobby{max-width:1050px;margin:4vh auto;padding:24px}
.lobby-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.lobby-head h2{font-size:34px;letter-spacing:.14em;margin:3px 0}
.eyebrow{font-size:11px;color:var(--muted);letter-spacing:.16em}
.lobby-grid{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(340px,1.1fr);gap:22px}
.lobby-player{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid #3a2b46;border-radius:11px;margin-bottom:7px;background:#121018}
.seat{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#2a2032;font-weight:900}
.player-tags{display:flex;gap:5px;flex-wrap:wrap}
.player-tag{font-size:9px;border:1px solid #5b4568;border-radius:999px;padding:3px 6px}
.player-tag.host{color:#ffd27d}.player-tag.ready{color:var(--good)}.player-tag.offline{color:var(--bad)}
.chat-box{border-left:1px solid var(--line);padding-left:22px}
.chat-messages{height:330px;overflow:auto;background:#0d0b10;border:1px solid #362a40;border-radius:12px;padding:10px;margin-bottom:9px}
.chat-message{padding:7px 4px;border-bottom:1px solid #211a27;font-size:13px}
.chat-message strong{color:#e7b8ff}.chat-time{color:#776c7e;font-size:10px;margin-left:7px}
.system-message{color:var(--muted);font-style:italic}
@media(max-width:800px){.lobby-grid{grid-template-columns:1fr}.chat-box{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:16px}}


/* ================= v0.5.1 COMPACT TABLE ================= */
html,body{height:100%;overflow:hidden}
body{background:
radial-gradient(circle at 50% -10%,rgba(45,88,255,.18),transparent 35%),
radial-gradient(circle at 0 100%,rgba(255,72,0,.13),transparent 30%),#070611}
#app{height:100vh;display:flex;flex-direction:column;padding:8px 12px;box-sizing:border-box}
.topbar{height:54px;min-height:54px;padding:0 8px;border-bottom:1px solid #3a2357}
.topbar h1{font-size:22px;letter-spacing:.12em}.subtitle{font-size:10px}
.compact-game{height:calc(100vh - 70px);display:grid;grid-template-rows:auto 118px minmax(0,1fr) 210px;gap:7px;overflow:hidden}
.walkthrough-panel{position:fixed;z-index:80;top:66px;left:18px;max-width:430px;background:#130d1f;border:1px solid #ff4bb8;box-shadow:0 0 22px #ff4bb833;border-radius:10px;padding:9px 12px;font-size:12px}
.walkthrough-panel strong{color:#ff74c9;margin-right:8px}
.opponents{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px;overflow:hidden}
.opponent{min-width:0;height:110px;padding:7px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:6px;border:1px solid #533a7a;border-radius:10px;background:linear-gradient(180deg,#151020,#0c0a12)}
.opponent.current{border-color:#ff7a1a;box-shadow:0 0 14px #ff7a1a44}
.opp-avatar img{width:36px;height:52px;object-fit:cover;border-radius:6px}
.opp-main{min-width:0}.opponent .player-header{padding:0;margin:0}.opponent .player-header strong{font-size:12px}.opponent .player-header span{font-size:9px}
.mini-tableau{margin-top:4px;gap:4px}.mini-read{width:30px;height:42px;font-size:7px}.mini-read img{width:100%;height:100%;object-fit:cover}
.mini-merch{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}.merch-dot{height:22px;padding:2px;font-size:7px}.merch-dot strong{font-size:7px}
.opp-handbacks{display:flex;align-items:center;width:42px;overflow:hidden}.opp-handbacks img{width:24px;height:34px;object-fit:cover;margin-left:-15px;border-radius:3px}.opp-handbacks img:first-child{margin-left:0}
.middle-row{display:grid;grid-template-columns:165px minmax(0,1fr) 220px;gap:7px;min-height:0}
.identity-panel,.side-panel,.table-core{border:1px solid #523471;border-radius:12px;background:#0d0a14;min-height:0}
.identity-panel{padding:8px;display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto 1fr;gap:7px}
.identity-avatar img{width:52px;height:52px;border-radius:9px;object-fit:cover;border:1px solid #ff6a21}
.identity-copy span{font-size:9px;color:#ff70ca}.identity-copy strong{display:block;font-size:15px}.identity-copy small{font-size:9px;color:#a99db3}
.identity-panel .flags{grid-column:1/-1}.identity-panel .read-slot{grid-column:1/-1;height:auto;min-height:0;overflow:hidden;border-color:#ff6a21}
.identity-panel .read-slot img{width:100%;height:100%;object-fit:contain}
.table-core{padding:7px;display:grid;grid-template-rows:84px minmax(0,1fr);gap:7px}
.merch-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.merch-slot{min-width:0;height:78px;padding:3px;display:flex;align-items:center;gap:3px;border-radius:7px}
.merch-slot img{width:39px;height:58px;object-fit:cover;border-radius:4px}.merch-slot .meta{font-size:7px;line-height:1.1;overflow:hidden}.merch-slot .meta strong{font-size:8px}.merch-slot .count{font-size:10px}
.shared-table{display:grid;grid-template-columns:minmax(250px,1.2fr) 130px 86px 150px;gap:8px;align-items:center;min-height:0}
.pickup-zone{min-width:0}.pickup-hint{font-size:9px}.pickup-options{gap:5px}.market-row{gap:5px}.market-card{width:68px}.market-card img{width:58px;height:84px}.market-card span{font-size:7px}
.pile{width:68px;height:96px}.pile.card-back{padding:0;position:relative;overflow:visible}.pile.card-back img{width:100%;height:100%;object-fit:cover;border-radius:8px}.pile.card-back strong{position:absolute;right:-6px;bottom:-6px;background:#0b0b18;border:1px solid #4b7cff;border-radius:50%;width:25px;height:25px;display:grid;place-items:center}
.played-card-tray{text-align:center;min-width:0}.played-card-tray span,.played-card-tray strong{display:block;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.played-card-tray img{height:122px;max-width:90px;object-fit:contain;border-radius:7px;box-shadow:0 0 14px #ff4eb544}.played-card-tray.empty img{opacity:.18}.played-card-tray.flash img{animation:cardFlash .7s ease}
@keyframes cardFlash{0%{transform:scale(.75);filter:brightness(2)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
.discard-pile{height:108px;width:76px}.game-info{font-size:9px;padding:6px}.game-info div{padding:4px}.game-info strong{font-size:10px}
.side-panel{display:flex;flex-direction:column;overflow:hidden}.side-tabs{padding:7px 9px;border-bottom:1px solid #38234d;color:#6adfff;font-size:10px}.compact-log{overflow:auto;padding:6px;font-size:9px;flex:1}.log-line{padding:5px 3px;border-bottom:1px solid #211829}
.compact-human{border:1px solid #f33fb3;border-radius:12px;padding:6px 8px;min-height:0;overflow:hidden;background:#0d0912}.hand-header{margin:0 0 4px;font-size:11px}
.hand{display:flex;gap:7px;overflow-x:auto;overflow-y:visible;padding:2px 4px 8px;height:172px}
.hand-card{flex:0 0 96px;height:150px;overflow:visible;background:transparent;border:0;padding:0;position:relative}
.hand-card>img{width:96px;height:140px;object-fit:cover;border-radius:7px;border:1px solid #6c4c82;transition:.16s ease;transform-origin:bottom center}
.hand-card:hover{z-index:70}.hand-card:hover>img{transform:translateY(-105px) scale(2.15);box-shadow:0 10px 35px #000,0 0 20px #4fdfff;position:relative}
.card-actions{position:absolute;left:0;right:0;bottom:0;z-index:72;display:flex;gap:2px}.card-actions button{font-size:8px;padding:4px 3px}
.market-card:hover img,.played-card-tray:hover img,.merch-slot:hover img,.mini-read:hover img{position:relative;z-index:90;transform:scale(2.4);box-shadow:0 10px 35px #000,0 0 18px #5edfff;transition:.14s}
.setup-options{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}.toggle-row{display:flex!important;flex-direction:row!important;align-items:center;gap:7px!important}
.profile-field input{padding:8px;background:#17121d;border:1px solid #473456;border-radius:8px;color:#fff}
body.walkthrough-on #pickupHint{color:#ffe16c;font-weight:800}
@media(max-width:1050px){.middle-row{grid-template-columns:130px minmax(0,1fr) 160px}.shared-table{grid-template-columns:minmax(210px,1fr) 105px 70px 120px}.merch-slot .meta{display:none}.merch-slot img{width:100%;height:68px;object-fit:contain}}


/* ================= v0.5.2 LOCKED ORANGE + BLUE TABLE ================= */
:root{--orange:#ff7a18;--blue:#17a8ff;--ink:#050812;--panel:rgba(5,9,18,.93);--line:#284b70}
html,body{height:100%;margin:0;background:#03050a;color:#fff;overflow:hidden}
body{background:radial-gradient(circle at 50% 45%,#0a2745 0,#050914 40%,#020307 80%)}
#app{height:100vh;box-sizing:border-box;padding:0 12px}
.topbar{height:58px;display:flex;align-items:center;border-bottom:1px solid #23415e;background:rgba(2,5,11,.92);z-index:20}
.topbar h1{font-size:22px;letter-spacing:.08em}.subtitle{font-size:10px;color:#b8c9dc}
.locked-table{height:calc(100vh - 62px);position:relative;overflow:hidden;padding-top:42px;box-sizing:border-box}
.table-toolbar{position:absolute;top:5px;left:205px;right:10px;height:32px;display:flex;gap:10px;align-items:center;z-index:30}
.table-toolbar button,.walk-switch{height:31px;background:#070b14;border:1px solid #244766;border-radius:8px;color:#fff;padding:0 13px;font-size:11px}
#togglePlayersBtn{margin-left:auto}.walk-switch{display:flex;align-items:center;gap:7px}.walk-switch input{accent-color:var(--orange)}
.table-shell{height:100%;position:relative;border-radius:28px 28px 0 0;overflow:hidden;background:
linear-gradient(rgba(3,8,17,.35),rgba(3,7,14,.84)),
radial-gradient(ellipse at center,#102f4d 0,#07101e 48%,#03060c 80%);
box-shadow:inset 0 0 0 2px #0c4772,inset 0 0 70px #ff6a0015}
.table-shell:before{content:"";position:absolute;inset:7% 4% 4%;border:2px solid #5c321e;border-radius:50%;box-shadow:0 0 0 8px #07121e,0 0 26px #ff6a0033,inset 0 0 25px #168dff22;pointer-events:none}
.island-horizon{position:absolute;top:8%;left:20%;right:20%;height:31%;background:url("assets/island_table.jpg") center/cover no-repeat;border-radius:50%;opacity:.88;filter:saturate(1.2);mask-image:linear-gradient(to bottom,#000 55%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.table-opponents{position:absolute;z-index:5;inset:8px 10px auto;display:flex;justify-content:center;gap:12px;height:150px;overflow:visible;pointer-events:none}
.opponent{pointer-events:auto;width:min(265px,18vw);height:128px;display:grid;grid-template-columns:55px 1fr;grid-template-rows:auto auto 1fr;gap:3px 8px;padding:8px;border:1px solid var(--blue);border-radius:14px;background:linear-gradient(145deg,rgba(5,11,22,.96),rgba(11,7,17,.94));box-shadow:0 0 18px #0c8cff24;box-sizing:border-box}
.opponent:nth-child(odd){border-color:var(--orange);box-shadow:0 0 18px #ff6a0024}.opponent.current{box-shadow:0 0 20px var(--orange);border-color:#ffb25b}
.opp-avatar{grid-row:1/3}.bot-face{height:48px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#13243c,#070b12);border:1px solid #315f89;color:#36c3ff;font-weight:900;font-size:15px}
.opp-name{min-width:0}.opp-name strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.opp-name small{font-size:9px;color:#aebbc9}.opp-name b{display:block;color:var(--orange);font-size:17px}
.opp-stats{display:flex;justify-content:space-between;font-size:9px;color:#b8c8d8}.opp-stats b{color:#fff}
.opp-handbacks{grid-column:1/2;display:flex;width:62px;overflow:visible}.opp-handbacks img{width:24px;height:34px;object-fit:cover;margin-left:-14px;border-radius:3px;border:1px solid #1779bd}.opp-handbacks img:first-child{margin-left:0}
.opp-merch{grid-column:2/3;display:flex;gap:3px;flex-wrap:wrap;align-content:start}.opp-merch span{font-size:8px;padding:2px 4px;border:1px solid #36506b;border-radius:4px;background:#10151d}.opp-read{position:absolute;width:28px;height:42px;margin:77px 0 0 13px}.opp-read img{width:100%;height:100%;object-fit:cover}
.opponent .flags{position:absolute;margin:104px 0 0 60px}
.table-center{position:absolute;z-index:6;left:15%;right:16%;top:31%;height:29%;display:grid;grid-template-columns:150px minmax(430px,1fr) 150px;gap:18px;align-items:center}
.pickup-stack,.discard-stack{text-align:center;font-size:10px}.pickup-stack>span,.discard-stack>span{display:block;margin-top:5px}
.pile{border:0;background:transparent;position:relative}.pile img{width:110px;height:154px;object-fit:cover;border-radius:10px;box-shadow:0 8px 24px #000,0 0 12px #149cff55}.pile strong{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);background:#071322;border:1px solid #1f86c9;border-radius:999px;padding:2px 7px;color:#fff}
.faceup-zone{min-width:0;text-align:center}.pickup-hint{font-size:11px;font-weight:800;margin-bottom:6px;color:#e7f4ff}.market-row{display:flex;justify-content:center;gap:7px;overflow:visible}.market-card{width:92px;background:transparent;border:0;padding:0}.market-card img{width:90px;height:126px;object-fit:cover;border-radius:7px;border:1px solid #d9b08a}.market-card span{display:none}
.last-play{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);min-width:280px;text-align:center;border:1px solid #2d668e;border-radius:18px;padding:5px 18px;background:#07101d}.last-play span{display:block;color:var(--orange);font-size:9px}.last-play strong{font-size:10px}.last-play em{font-size:9px;color:#9fb6ca}.last-play img{display:none}
.lower-table{position:absolute;z-index:8;left:8px;right:8px;bottom:7px;height:39%;display:grid;grid-template-columns:225px minmax(0,1fr) 225px;gap:10px;align-items:stretch}
.identity-panel,.right-rail .side-panel,.player-table{background:rgba(4,8,16,.94);border:1px solid #175d8f;border-radius:13px}
.identity-panel{padding:10px;border-color:var(--orange);display:grid;grid-template-columns:68px 1fr;grid-auto-rows:min-content;gap:7px;box-shadow:0 0 18px #ff6a001d}
.identity-avatar img{width:64px;height:78px;object-fit:cover;border-radius:9px;border:1px solid var(--orange)}.identity-copy span{font-size:9px;color:var(--orange)}.identity-copy strong{display:block;font-size:19px}.identity-panel small{grid-column:1/-1;color:#9fb3c6;font-size:9px}
.identity-stat{grid-column:1/-1;border-top:1px solid #29384a;padding-top:6px}.identity-stat span{display:block;font-size:8px;color:#aab9c7}.identity-stat strong{font-size:18px;color:var(--orange)}
.player-table{padding:6px;display:grid;grid-template-rows:58% 42%;min-width:0;border-color:#9b3b76}.tableau-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:6px;min-height:0}.slot-title{font-size:9px;color:#ff9a4d;font-weight:800;margin:1px 0 4px}
.read-column{min-width:0}.read-slot{height:calc(100% - 18px);border:1px solid var(--orange);border-radius:9px;display:grid;place-items:center;overflow:hidden;background:#070b13}.read-slot img{width:100%;height:100%;object-fit:contain}.read-slot span{font-size:10px;color:#8da4b9}
.merch-column{min-width:0}.merch-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;height:calc(100% - 18px)}
.merch-slot{min-width:0;position:relative;border:1px solid #4b3d39;border-radius:6px;background:#0c0d12;padding:2px;text-align:center;overflow:hidden}.merch-slot img{width:100%;height:65%;object-fit:contain;border-radius:4px}.merch-value{font-size:8px;font-weight:800}.merch-name{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.merch-count{position:absolute;right:3px;bottom:2px;font-size:9px;font-weight:800;color:#fff}
.human-area{min-height:0;border-top:1px solid #603059;padding-top:4px}.hand-header{display:flex;justify-content:space-between;font-size:9px;color:#ff9a4d}.hand{height:calc(100% - 18px);display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;padding:2px}
.hand-card{flex:0 0 83px;height:118px;position:relative;background:transparent;border:0;padding:0}.hand-card>img{width:83px;height:116px;object-fit:cover;border-radius:6px;border:1px solid #8c684e}.card-actions{position:absolute;left:0;right:0;bottom:0;display:flex;gap:1px;z-index:3}.card-actions button{font-size:7px;padding:3px 2px;flex:1}
.right-rail{display:grid;grid-template-rows:1fr 1fr auto auto;gap:6px;min-height:0}.side-panel{display:flex;flex-direction:column;min-height:0}.side-tabs{padding:5px 8px;color:var(--orange);font-size:9px;border-bottom:1px solid #26435c}.compact-log,.local-chat-messages{overflow:auto;min-height:0;padding:5px;font-size:9px}.log-line,.chat-line{padding:4px;border-bottom:1px solid #172434}.local-chat form{display:flex;padding:4px;gap:4px}.local-chat input{min-width:0;flex:1;background:#070b12;border:1px solid #274963;color:#fff;border-radius:6px;padding:5px;font-size:9px}.local-chat button{background:#0d4776;border:1px solid #178ee8;color:#fff;border-radius:6px}
.phase-card{border:1px solid #245275;border-radius:8px;padding:5px 8px;background:#060c15;display:flex;justify-content:space-between;font-size:9px}.escape-btn{background:linear-gradient(#ff8b24,#bd4b00);border:1px solid #ffb060;color:#fff;font-weight:900}
.card-preview{position:fixed;z-index:999999;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.12)}.card-preview.hidden{display:none}.card-preview img{height:min(68vh,720px);max-width:42vw;object-fit:contain;border-radius:14px;box-shadow:0 20px 80px #000,0 0 30px #168eff,0 0 16px #ff6a00}.card-preview div{position:absolute;bottom:8vh;background:#030711e8;border:1px solid #2c668e;border-radius:999px;padding:7px 16px;font-size:12px}
.walkthrough-panel{position:fixed;z-index:100;top:65px;left:20px;background:#06101c;border:1px solid var(--orange);border-radius:9px;padding:8px 12px;font-size:10px}
body.players-collapsed .table-opponents{height:30px;overflow:hidden;opacity:.28}body.players-collapsed .opponent{height:28px;padding:4px;width:180px;display:block}body.players-collapsed .opponent>*{display:none}body.players-collapsed .opponent .opp-name{display:block}body.players-collapsed .opponent .opp-name strong{display:block;font-size:10px}body.players-collapsed .opponent .opp-name small,body.players-collapsed .opponent .opp-name b{display:none}body.players-collapsed .table-center{top:20%;height:37%}
@media(max-width:1250px){.opponent{width:18vw}.lower-table{grid-template-columns:170px minmax(0,1fr) 180px}.table-center{left:12%;right:13%}.merch-name{display:none}.hand-card{flex-basis:72px}.hand-card>img{width:72px}}


/* ===== v0.5.3 TRUE TABLE LAYOUT OVERRIDE ===== */
html,body{overflow:hidden!important}
#app{height:100vh!important;padding:0 18px!important;background:#02050a!important}
.topbar{height:56px!important;min-height:56px!important;padding:0 8px!important}
.locked-table{height:calc(100vh - 56px)!important;padding-top:42px!important;overflow:hidden!important}
.table-toolbar{top:4px!important;left:200px!important;right:8px!important}
.table-shell{position:relative!important;height:100%!important;overflow:hidden!important;border:1px solid #126a9f!important;border-radius:28px 28px 10px 10px!important;background:radial-gradient(ellipse at 50% 44%,rgba(11,48,78,.94) 0,rgba(5,17,30,.96) 48%,#03070d 82%)!important}
.table-shell:before{inset:11% 4% 8%!important;border:2px solid #b65a19!important;border-radius:50%!important;box-shadow:0 0 0 5px #07111c,0 0 30px #ff790022,inset 0 0 34px #168fff20!important}
.island-horizon{top:15%!important;left:18%!important;right:18%!important;height:30%!important;opacity:.82!important;background-position:center 38%!important}

/* Opponents live around the outer rim, never behind it. */
.table-opponents{position:absolute!important;z-index:40!important;inset:10px 10px auto 10px!important;height:138px!important;display:flex!important;justify-content:center!important;gap:10px!important;overflow:visible!important;pointer-events:none!important}
.opponent{position:relative!important;pointer-events:auto!important;width:260px!important;height:126px!important;flex:0 1 260px!important;display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;grid-template-rows:auto auto 1fr!important;gap:3px 8px!important;padding:8px!important;box-sizing:border-box!important;background:linear-gradient(145deg,rgba(5,12,23,.98),rgba(8,7,14,.98))!important;border:1px solid #1189d1!important;border-radius:13px!important;overflow:hidden!important}
.opponent:nth-child(odd){border-color:#ec741e!important}.opponent.current{border-color:#ffb15b!important;box-shadow:0 0 18px #ff7a18!important}
.bot-avatar{grid-row:1/3;width:48px;height:48px;display:grid;place-items:center;border:1px solid #237bb1;border-radius:9px;background:#081827;color:#42c7ff;font-weight:900;font-size:13px}
.opp-name strong{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.opp-name small{font-size:8px;color:#a7bac8}.opp-name b{display:block;font-size:16px;color:#ff8129}
.opp-info{display:flex;gap:12px;font-size:8px}.opp-info b{color:#fff}
.opp-handbacks{grid-column:1/2;display:flex!important;width:66px;height:35px;overflow:visible!important}.opp-handbacks img{width:24px!important;height:34px!important;margin-left:-14px!important;object-fit:cover!important;border-radius:3px!important}.opp-handbacks img:first-child{margin-left:0!important}
.opp-merch{grid-column:2/3;display:flex;gap:3px;flex-wrap:wrap;align-content:start}.opp-merch span{font-size:7px;border:1px solid #34536d;border-radius:4px;padding:2px 4px;background:#0c141d}.opp-read{position:absolute;right:7px;bottom:7px;width:27px;height:39px}.opp-read img{width:100%;height:100%;object-fit:cover}.opponent .flags{position:absolute;right:38px;bottom:8px}
/* 4–7 opponents: last two move to the left/right edges like the approved mockup. */
.opponents-4 .seat-left,.opponents-5 .seat-left,.opponents-6 .seat-left,.opponents-7 .seat-left{position:absolute!important;left:-4px!important;top:154px!important;width:205px!important;height:170px!important}
.opponents-4 .seat-right,.opponents-5 .seat-right,.opponents-6 .seat-right,.opponents-7 .seat-right{position:absolute!important;right:-4px!important;top:154px!important;width:205px!important;height:170px!important}
.opponents-4 .seat-left,.opponents-4 .seat-right,.opponents-5 .seat-left,.opponents-5 .seat-right,.opponents-6 .seat-left,.opponents-6 .seat-right,.opponents-7 .seat-left,.opponents-7 .seat-right{grid-template-columns:54px 1fr!important}

/* The actual shared table lives in the centre. */
.table-center{position:absolute!important;z-index:20!important;left:15%!important;right:15%!important;top:25%!important;height:30%!important;display:grid!important;grid-template-columns:150px minmax(420px,1fr) 150px!important;align-items:center!important;gap:16px!important}
.pickup-stack,.discard-stack{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}.pile img{width:112px!important;height:158px!important;object-fit:cover!important}.pickup-stack>span,.discard-stack>span{margin-top:6px!important;font-size:10px!important}
.faceup-zone{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important}.pickup-hint{font-size:11px!important;margin-bottom:7px!important}.market-row{display:flex!important;gap:7px!important;justify-content:center!important;overflow:visible!important}.market-card{width:88px!important;flex:0 0 88px!important}.market-card img{width:86px!important;height:121px!important}
.last-play{bottom:-28px!important;z-index:21!important;min-width:300px!important}

/* Bottom HUD occupies only the bottom third instead of swallowing the table. */
.lower-table{position:absolute!important;z-index:30!important;left:9px!important;right:9px!important;bottom:8px!important;height:38%!important;display:grid!important;grid-template-columns:218px minmax(0,1fr) 218px!important;gap:8px!important}
.identity-panel{height:auto!important;overflow:hidden!important}.player-table{min-height:0!important;display:grid!important;grid-template-rows:56% 44%!important;overflow:hidden!important}.tableau-row{min-height:0!important;grid-template-columns:118px minmax(0,1fr)!important}.read-slot{height:calc(100% - 18px)!important;min-height:120px!important}.read-slot img{object-fit:contain!important}
.merch-grid{height:calc(100% - 18px)!important;grid-template-columns:repeat(10,minmax(0,1fr))!important}.merch-slot{height:auto!important;min-height:0!important}.merch-slot img{height:65%!important}
.human-area{min-height:0!important;overflow:visible!important}.hand{height:calc(100% - 18px)!important;overflow-x:auto!important;overflow-y:hidden!important}.hand-card{flex:0 0 78px!important;height:110px!important}.hand-card>img{width:78px!important;height:108px!important}
.right-rail{min-height:0!important;overflow:hidden!important}.compact-log,.local-chat-messages{font-size:8px!important}

/* Hover always above the entire app. */
.card-preview{z-index:2147483647!important;background:rgba(0,0,0,.34)!important}.card-preview img{height:min(72vh,700px)!important;max-width:48vw!important}

body.players-collapsed .table-opponents{height:30px!important;opacity:.25!important;overflow:hidden!important}body.players-collapsed .opponent{height:26px!important;width:170px!important;padding:4px 8px!important;display:block!important}body.players-collapsed .opponent>*{display:none!important}body.players-collapsed .opponent .opp-name{display:block!important}body.players-collapsed .opponent .opp-name strong{display:block!important;font-size:9px!important}body.players-collapsed .table-center{top:18%!important;height:36%!important}

@media(max-width:1450px){.opponent{width:220px!important;flex-basis:220px!important}.lower-table{grid-template-columns:185px minmax(0,1fr) 190px!important}.table-center{left:12%!important;right:12%!important}.hand-card{flex-basis:70px!important}.hand-card>img{width:70px!important}}


/* ================= v0.5.4 FULL TABLE BACKGROUND FIX ================= */
/* Use the existing island artwork as the full tabletop surface instead of a narrow horizon strip. */
.table-shell{
  background:
    linear-gradient(rgba(2,7,14,.30), rgba(2,7,14,.58)),
    url("assets/island_table.jpg") center center / cover no-repeat !important;
  background-attachment: local !important;
}

/* The old separate island strip caused the "floating banner" effect. */
.island-horizon{
  display:none !important;
}

/* Keep the glowing oval/table rim above the full background. */
.table-shell:before{
  z-index:2 !important;
}

/* All actual game UI must remain above the table artwork/rim. */
.table-opponents,
.table-center,
.lower-table{
  z-index:10 !important;
}


/* ================= v0.5.5 CLEAN ISLAND TABLE BACKGROUND ================= */
.table-shell{
  background-image:
    linear-gradient(rgba(2,7,14,.22), rgba(2,7,14,.46)),
    url("assets/island_table.jpg") !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}

/* Prevent any older decorative island/banner layer from showing through. */
.island-horizon{
  display:none !important;
  background:none !important;
}

/* Keep the actual table content readable without hiding the scenery. */
.table-center,
.lower-table,
.table-opponents{
  background:transparent !important;
}


/* ================= v0.5.6 USER-SUPPLIED TABLE BACKGROUND ================= */
.table-shell{
  background-image:
    linear-gradient(rgba(2,5,10,.20), rgba(2,5,10,.42)),
    url("assets/island_seduction.png") !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}
.island-horizon{display:none !important;}


/* ================= v0.5.7 READABLE IN-GAME RULEBOOK ================= */
.rules-modal{
  position:fixed;
  inset:0;
  z-index:1000000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(7px);
}
.rules-modal.hidden{display:none!important}
.rules-document{
  width:min(900px,94vw);
  height:min(86vh,920px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#f7f3ea;
  color:#171717;
  border-radius:14px;
  border:2px solid #ff7a18;
  box-shadow:0 24px 100px #000,0 0 34px rgba(23,168,255,.35);
}
.rules-document-head{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  color:#fff;
  background:linear-gradient(90deg,#0a65a8,#101827 48%,#bd4d00);
  border-bottom:1px solid rgba(255,255,255,.25);
}
.rules-document-head strong{font-size:22px}
.rules-kicker{font-size:10px;letter-spacing:.18em;color:#d8ebff}
#closeRulesBtn{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.25);color:#fff;font-size:18px;cursor:pointer;
}
.rules-document-body{
  flex:1;
  overflow:auto;
  padding:28px 34px 42px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;
  line-height:1.55;
}
.rules-document-body h1{
  margin:0 0 5px;
  text-align:center;
  font:800 34px/1.1 Arial,sans-serif;
  letter-spacing:.08em;
  color:#13233a;
}
.rules-document-body h2{
  margin:28px 0 9px;
  padding-bottom:5px;
  font:800 23px/1.2 Arial,sans-serif;
  color:#0a5791;
  border-bottom:2px solid #ff7a18;
}
.rules-document-body h3{
  margin:20px 0 7px;
  font:800 18px/1.2 Arial,sans-serif;
  color:#a94100;
}
.rules-document-body p{margin:8px 0}
.rule-bullet{padding-left:20px;position:relative}
.rule-bullet:before{content:"•";position:absolute;left:3px;color:#e65f00;font-weight:900}
.rule-flow{
  margin:16px auto;
  padding:12px 18px;
  max-width:430px;
  text-align:center;
  border-radius:10px;
  font:900 20px Arial,sans-serif;
  letter-spacing:.08em;
  color:#fff;
  background:linear-gradient(90deg,#086eb8,#e65f00);
}
.rule-callout{
  margin:20px 0;
  padding:14px 16px;
  border-left:5px solid #ff7a18;
  border-radius:8px;
  background:#fff4e9;
  font-family:Arial,sans-serif;
  line-height:1.45;
}
.rules-table-wrap{overflow-x:auto;margin:12px 0 20px}
.rules-table{
  width:100%;
  border-collapse:collapse;
  font-family:Arial,sans-serif;
  font-size:13px;
  background:#fff;
}
.rules-table th{
  padding:9px;
  text-align:left;
  color:#fff;
  background:#0b5d98;
}
.rules-table td{padding:9px;border:1px solid #d2d2d2;vertical-align:top}
.rules-table tr:nth-child(even) td{background:#f3f7fa}
@media(max-width:650px){
  .rules-modal{padding:8px}
  .rules-document{width:98vw;height:94vh}
  .rules-document-body{padding:20px 16px 30px;font-size:15px}
  .rules-document-body h1{font-size:26px}
}

/* The user-supplied card back is used directly on all hidden cards/decks. */
.pile.card-back img,
.opp-handbacks img{
  object-fit:cover !important;
}


/* ================= v0.5.8 OPPONENT PLAYER AREA REDESIGN ================= */

/* Keep opponents clearly outside the central play area. */
.table-opponents{
  position:absolute !important;
  top:10px !important;
  left:18px !important;
  right:18px !important;
  height:142px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:12px !important;
  overflow:visible !important;
  pointer-events:none !important;
  z-index:20 !important;
}

.opponent{
  pointer-events:auto !important;
  width:290px !important;
  height:132px !important;
  display:grid !important;
  grid-template-rows:auto auto auto !important;
  gap:6px !important;
  padding:8px 10px !important;
  box-sizing:border-box !important;
  border-radius:12px !important;
  background:rgba(3,8,15,.94) !important;
  border:1px solid var(--blue) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 14px rgba(23,168,255,.18) !important;
  overflow:hidden !important;
}
.opponent:nth-child(odd){
  border-color:var(--orange) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 14px rgba(255,122,24,.18) !important;
}
.opponent.current{
  border-color:#ffd166 !important;
  box-shadow:0 0 20px rgba(255,177,74,.65) !important;
}

.opp-head{
  display:grid !important;
  grid-template-columns:48px 1fr 40px !important;
  gap:8px !important;
  align-items:center !important;
  min-width:0 !important;
}
.opp-avatar{display:block !important}
.bot-face{
  width:44px !important;
  height:44px !important;
  border-radius:9px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(145deg,#10213a,#050a11) !important;
  border:1px solid #2b6d9d !important;
  color:#59cfff !important;
  font-weight:900 !important;
  font-size:12px !important;
}
.opp-id{min-width:0 !important}
.opp-id strong{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-size:12px !important;
}
.opp-id small{
  display:block !important;
  color:#91a4b6 !important;
  font-size:8px !important;
}
.opp-score{
  margin-top:2px !important;
  color:var(--orange) !important;
  font-size:15px !important;
  font-weight:900 !important;
}
.opp-read-badge,.opp-read-empty{
  width:36px !important;
  height:48px !important;
  border:1px dashed #48627a !important;
  border-radius:6px !important;
  display:grid !important;
  place-items:center !important;
  font-size:7px !important;
  color:#75889a !important;
  overflow:hidden !important;
}
.opp-read-badge img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.opp-mid{
  display:grid !important;
  grid-template-columns:1fr 72px !important;
  gap:8px !important;
  align-items:center !important;
}
.opp-hand-summary{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
}
.opp-hand-summary>span,.opp-merch-total span{
  font-size:8px !important;
  color:#9eb0c0 !important;
}
.opp-hand-summary>span b{color:#fff !important}
.opp-handbacks{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  overflow:visible !important;
}
.opp-handbacks img{
  width:23px !important;
  height:32px !important;
  object-fit:cover !important;
  border-radius:3px !important;
  border:1px solid #1c6ea5 !important;
  margin-left:-11px !important;
}
.opp-handbacks img:first-child{margin-left:0 !important}
.opp-merch-total{
  text-align:right !important;
}
.opp-merch-total b{
  display:block !important;
  color:#fff !important;
  font-size:12px !important;
}

.opp-chips{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:3px !important;
}
.opp-chip{
  min-width:0 !important;
  padding:2px 3px !important;
  border:1px solid #2b3d4e !important;
  border-radius:4px !important;
  background:#0b1119 !important;
  color:#728596 !important;
  font-size:7px !important;
  text-align:center !important;
}
.opp-chip b{
  display:block !important;
  font-size:7px !important;
}
.opp-chip.owned{
  color:#fff !important;
  border-color:#46779a !important;
}
.opponent:nth-child(odd) .opp-chip.owned{
  border-color:#9d5b24 !important;
}
.opponent .flags{
  position:absolute !important;
  margin:0 !important;
  right:8px !important;
  bottom:6px !important;
  display:flex !important;
  gap:3px !important;
}

/* With only a few opponents, keep them across the top and out of the island centre. */
.table-center{
  top:30% !important;
}

/* More players: allow compact wrapping along the outer edge without covering the centre. */
@media(max-width:1350px){
  .opponent{width:245px !important}
  .table-opponents{gap:7px !important}
}
@media(max-width:1050px){
  .opponent{width:205px !important}
  .opp-chips{grid-template-columns:repeat(5,1fr) !important}
}

/* Collapsed players become slim nameplates rather than half-rendered cards. */
body.players-collapsed .table-opponents{
  height:34px !important;
  opacity:1 !important;
}
body.players-collapsed .opponent{
  width:185px !important;
  height:30px !important;
  padding:5px 8px !important;
  display:block !important;
}
body.players-collapsed .opponent>*{display:none !important}
body.players-collapsed .opponent .opp-head{display:block !important}
body.players-collapsed .opponent .opp-head>*{display:none !important}
body.players-collapsed .opponent .opp-id{display:block !important}
body.players-collapsed .opponent .opp-id strong{
  display:block !important;
  font-size:10px !important;
}
body.players-collapsed .table-center{
  top:21% !important;
}


/* ================= v0.5.9 SPLAYED OPPONENT HANDS ================= */

.table-opponents{
  height:150px !important;
  align-items:flex-start !important;
  gap:18px !important;
}

.opponent.opponent-fan{
  width:245px !important;
  height:142px !important;
  display:grid !important;
  grid-template-rows:28px 76px 30px !important;
  gap:2px !important;
  padding:5px 8px 6px !important;
  overflow:visible !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  position:relative !important;
}

.opponent.opponent-fan.current .opp-fan-name{
  box-shadow:0 0 16px rgba(255,145,45,.8) !important;
  border-color:#ffb25b !important;
}

.opp-fan-name{
  justify-self:center !important;
  min-width:150px !important;
  max-width:220px !important;
  padding:4px 10px !important;
  border-radius:7px !important;
  border:1px solid var(--blue) !important;
  background:rgba(2,7,14,.95) !important;
  text-align:center !important;
  transform:perspective(400px) rotateX(4deg) !important;
  box-shadow:0 4px 10px rgba(0,0,0,.45) !important;
}
.opponent.opponent-fan:nth-child(odd) .opp-fan-name{
  border-color:var(--orange) !important;
}
.opp-fan-name strong{
  display:block !important;
  font-size:11px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.opp-fan-name span{
  display:block !important;
  margin-top:1px !important;
  color:#9eb0c0 !important;
  font-size:7px !important;
}

.opp-card-fan{
  position:relative !important;
  width:150px !important;
  height:72px !important;
  justify-self:center !important;
  overflow:visible !important;
}
.opp-card-fan img{
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:44px !important;
  height:64px !important;
  object-fit:cover !important;
  border-radius:5px !important;
  border:1px solid #1f8fda !important;
  transform-origin:50% 100% !important;
  transform:
    translateX(calc(-50% + var(--fan-x)))
    translateY(var(--fan-y))
    rotate(var(--fan-rot)) !important;
  z-index:var(--fan-z) !important;
  box-shadow:0 3px 9px rgba(0,0,0,.5) !important;
}
.opponent.opponent-fan:nth-child(odd) .opp-card-fan img{
  border-color:#ff7a18 !important;
}

.opp-status-tiles{
  display:grid !important;
  grid-template-columns:1.45fr .8fr .9fr !important;
  gap:4px !important;
  justify-self:center !important;
  width:210px !important;
}

.opp-status{
  min-width:0 !important;
  height:28px !important;
  display:grid !important;
  grid-template-rows:10px 1fr !important;
  place-items:center !important;
  border-radius:6px !important;
  background:rgba(4,9,16,.96) !important;
  border:1px solid #2e4f68 !important;
  box-shadow:0 2px 7px rgba(0,0,0,.4) !important;
  padding:2px 4px !important;
}
.opp-status span{
  font-size:6px !important;
  letter-spacing:.05em !important;
  color:#9baebe !important;
}
.opp-status strong{
  font-size:11px !important;
  line-height:1 !important;
}
.merch-status{
  border-color:#bd7a17 !important;
}
.merch-status strong{
  color:#ffbf52 !important;
}
.read-status.yes{
  border-color:#ff4d86 !important;
}
.read-status.yes strong{
  color:#ff5f8f !important;
}
.read-status.no strong{
  color:#a9b4bd !important;
}
.escape-status.yes{
  border-color:#75b62c !important;
}
.escape-status.yes strong{
  color:#91d83e !important;
}
.escape-status.no strong{
  color:#a9b4bd !important;
}

/* No old opponent internals should leak into the splayed layout. */
.opponent-fan .opp-head,
.opponent-fan .opp-mid,
.opponent-fan .opp-chips,
.opponent-fan .flags,
.opponent-fan .opp-avatar,
.opponent-fan .opp-id,
.opponent-fan .opp-read-badge,
.opponent-fan .opp-read-empty{
  display:none !important;
}

/* Hide Players keeps only small name tabs. */
body.players-collapsed .opponent.opponent-fan{
  width:170px !important;
  height:28px !important;
  display:block !important;
  padding:0 !important;
}
body.players-collapsed .opponent.opponent-fan>*{
  display:none !important;
}
body.players-collapsed .opponent.opponent-fan .opp-fan-name{
  display:block !important;
  min-width:0 !important;
  width:160px !important;
  height:24px !important;
  padding:4px 7px !important;
  box-sizing:border-box !important;
}
body.players-collapsed .opp-fan-name span{
  display:none !important;
}


/* ================= v0.6.0 VERIFIED SPLAYED OPPONENTS ================= */
.table-opponents{
  position:absolute !important;
  top:8px !important;
  left:18px !important;
  right:18px !important;
  height:150px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:22px !important;
  overflow:visible !important;
  z-index:30 !important;
  pointer-events:none !important;
}
.table-opponents .opponent.opponent-fan{
  pointer-events:auto !important;
  position:relative !important;
  width:235px !important;
  height:145px !important;
  display:grid !important;
  grid-template-rows:28px 80px 31px !important;
  gap:2px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.table-opponents .opp-fan-name{
  justify-self:center !important;
  width:175px !important;
  height:27px !important;
  box-sizing:border-box !important;
  padding:4px 8px !important;
  border:1px solid #17a8ff !important;
  border-radius:7px !important;
  background:rgba(2,7,14,.96) !important;
  text-align:center !important;
  box-shadow:0 4px 11px rgba(0,0,0,.55) !important;
}
.table-opponents .opponent-fan:nth-child(odd) .opp-fan-name{border-color:#ff7a18 !important}
.table-opponents .opponent-fan.current .opp-fan-name{
  border-color:#ffd06c !important;
  box-shadow:0 0 17px rgba(255,157,48,.8) !important;
}
.table-opponents .opp-fan-name strong{
  display:block !important;
  font-size:11px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.table-opponents .opp-fan-name span{
  display:block !important;
  margin-top:2px !important;
  font-size:7px !important;
  color:#9eb2c3 !important;
}
.table-opponents .opp-card-fan{
  position:relative !important;
  justify-self:center !important;
  width:170px !important;
  height:78px !important;
  overflow:visible !important;
}
.table-opponents .opp-card-fan img{
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:47px !important;
  height:68px !important;
  max-width:none !important;
  object-fit:cover !important;
  border-radius:5px !important;
  border:1px solid #168fdc !important;
  margin:0 !important;
  transform-origin:50% 100% !important;
  transform:translateX(calc(-50% + var(--fan-x))) translateY(var(--fan-y)) rotate(var(--fan-rot)) !important;
  z-index:var(--fan-z) !important;
  box-shadow:0 4px 10px rgba(0,0,0,.62) !important;
}
.table-opponents .opponent-fan:nth-child(odd) .opp-card-fan img{border-color:#ff7a18 !important}
.table-opponents .opp-status-tiles{
  justify-self:center !important;
  width:218px !important;
  display:grid !important;
  grid-template-columns:1.5fr .8fr .9fr !important;
  gap:4px !important;
}
.table-opponents .opp-status{
  height:30px !important;
  padding:2px 4px !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-rows:10px 1fr !important;
  place-items:center !important;
  background:rgba(3,8,15,.97) !important;
  border:1px solid #314c63 !important;
  border-radius:6px !important;
  box-shadow:0 3px 8px rgba(0,0,0,.5) !important;
}
.table-opponents .opp-status span{font-size:6px !important;color:#9db0c0 !important}
.table-opponents .opp-status strong{font-size:11px !important;line-height:1 !important;color:#fff !important}
.table-opponents .merch-status{border-color:#c77a16 !important}
.table-opponents .merch-status strong{color:#ffc15d !important}
.table-opponents .read-status.yes{border-color:#ec4779 !important}
.table-opponents .read-status.yes strong{color:#ff739c !important}
.table-opponents .escape-status.yes{border-color:#6fa62d !important}
.table-opponents .escape-status.yes strong{color:#9cda50 !important}
.table-opponents .read-status.no strong,
.table-opponents .escape-status.no strong{color:#a7b2bb !important}

/* Suppress all legacy opponent layout pieces. */
.table-opponents .opp-avatar,
.table-opponents .opp-main,
.table-opponents .player-header,
.table-opponents .mini-tableau,
.table-opponents .mini-read,
.table-opponents .mini-merch,
.table-opponents .merch-dot,
.table-opponents .opp-handbacks,
.table-opponents .opp-head,
.table-opponents .opp-mid,
.table-opponents .opp-chips,
.table-opponents .flags{display:none !important}

/* Collapsed mode: name tabs only. */
body.players-collapsed .table-opponents{height:32px !important}
body.players-collapsed .table-opponents .opponent.opponent-fan{
  width:180px !important;height:28px !important;display:block !important
}
body.players-collapsed .table-opponents .opponent-fan>*{display:none !important}
body.players-collapsed .table-opponents .opponent-fan .opp-fan-name{
  display:block !important;width:170px !important;height:26px !important
}
body.players-collapsed .table-opponents .opp-fan-name span{display:none !important}


/* ================= v0.6.1 OPPONENT FAN / TILE SPACING FIX ================= */

/* Give each opponent more height so the fan and tiles have separate lanes. */
.table-opponents{
  height:172px !important;
}

.table-opponents .opponent.opponent-fan{
  height:166px !important;
  grid-template-rows:28px 96px 34px !important;
  gap:4px !important;
}

/* Raise the fan slightly and contain its visual footprint. */
.table-opponents .opp-card-fan{
  width:176px !important;
  height:92px !important;
  align-self:start !important;
  margin-top:0 !important;
}

/* Make the cards finish well above the status tiles. */
.table-opponents .opp-card-fan img{
  bottom:10px !important;
}

/* Push the tiles down into their own row with breathing room. */
.table-opponents .opp-status-tiles{
  align-self:end !important;
  margin-top:2px !important;
  position:relative !important;
  z-index:40 !important;
}

/* Ensure cards can never visually sit on top of the tiles. */
.table-opponents .opp-card-fan{
  z-index:20 !important;
}
.table-opponents .opp-status-tiles{
  z-index:50 !important;
}

/* Keep the centre of the table from creeping up into the taller opponent band. */
.table-center{
  top:32% !important;
}


/* ================= v0.6.2 SHIFT PLAY AREA UP ================= */

/* Lift the central piles/choices slightly so the Last Play bar clears the lower HUD. */
.table-center{
  top:27% !important;
  height:27% !important;
}

/* Lift the entire lower player section and give it a little more usable height. */
.lower-table{
  bottom:18px !important;
  height:42% !important;
}

/* Keep the player's tableau and hand balanced inside the raised lower section. */
.player-table{
  grid-template-rows:57% 43% !important;
}

/* Slightly reduce the hand card height so the full row stays visible at common 1080p/900p resolutions. */
.hand-card{
  height:112px !important;
}
.hand-card>img{
  height:110px !important;
}

/* Give the right rail enough room so Phase doesn't fall off the bottom. */
.right-rail{
  padding-bottom:2px !important;
}

/* Opponents remain where they are; only the playable centre/lower area is lifted. */


/* ================= v0.6.3 SECOND UPWARD SHIFT ================= */

/* One more controlled lift: preserve sizing, just reclaim bottom clearance. */
.table-center{
  top:24.5% !important;
  height:27% !important;
}

.lower-table{
  bottom:34px !important;
  height:42% !important;
}

/* Keep the last-play indicator clearly above the player tableau. */
.last-play{
  transform:translateY(-8px);
}