:root{font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Arial,sans-serif;color:#eff1f4;background:#0a0d13;font-size:14px}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #343d4b;border-radius:7px;color:#e7edf4;background:#1c2430;padding:10px 14px;font-weight:650}button:hover{border-color:#42bad5;background:#243445}button:disabled{opacity:.4;cursor:not-allowed}.primary{background:#05a1c4;border-color:#05a1c4;color:white}.primary:hover{background:#058eab}.outline{background:#161d28}.big{width:100%;display:flex;justify-content:space-between;margin-top:16px;padding:14px}.hidden{display:none!important}.topbar{height:62px;background:#111821;display:flex;align-items:center;justify-content:space-between;padding:0 max(26px,5%);border-bottom:1px solid #273442}.brand{font-size:20px;font-weight:900;letter-spacing:1.2px}.brand span:not(.brandicon){color:#45c3db}.brandicon{color:#e9af65;font-size:26px;margin-right:8px}.brand small{font-size:9px;vertical-align:middle;letter-spacing:1px;padding:4px 6px;margin-left:12px;background:#253041;color:#a0b5c9;border-radius:3px}.status{font-size:12px;color:#91aaa8}.home{min-height:calc(100vh - 62px);background:radial-gradient(ellipse at 50% -15%,#203344 0%,#111922 40%,#0a0d13 75%);padding:64px 7% 28px}.hero{text-align:center;max-width:760px;margin:0 auto 60px}.eyebrow{letter-spacing:3px;color:#59bdd1;font-weight:800;font-size:11px}.hero h1{font-size:clamp(34px,5vw,64px);letter-spacing:-2px;line-height:1.1;margin:19px 0}.hero em{font-style:normal;color:#efb76d}.hero p{max-width:575px;margin:auto;line-height:1.75;color:#a6b5c4;font-size:16px}.homegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1200px;margin:auto}.panel{background:#18212c;border:1px solid #2c3d4d;border-radius:12px;padding:26px;min-height:315px}.panel h2{margin:0 0 10px;font-size:22px}.panel p{color:#a2b2c2;line-height:1.6;min-height:57px}.panel label,.modal label{display:block;font-size:12px;color:#aab9c9;font-weight:700;margin:14px 0 6px}.panel input,.modal input,.modal textarea,.modal select{width:100%;border:1px solid #394655;border-radius:7px;background:#10151d;color:#f8fbff;padding:12px;margin-top:7px;outline:none}.panel input:focus,.modal input:focus,.modal textarea:focus{border-color:#3ac2db}.deckcount{margin:28px 0;color:#e8b66b}.fine{text-align:center;color:#677583;margin-top:50px;font-size:11px}.game{height:calc(100vh - 62px);display:flex;flex-direction:column}.gamebar{height:51px;display:flex;align-items:center;justify-content:space-between;padding:8px 18px;background:#131a24;border-bottom:1px solid #293442;gap:14px}.gamebar strong{letter-spacing:1.3px}.tag{background:#252f3d;color:#b7cada;border-radius:5px;padding:4px 7px;margin-left:10px;font-size:11px}.barbuttons{display:flex;gap:7px}.barbuttons button{padding:7px 10px;font-size:12px}.tableArea{position:relative;flex:1;overflow:hidden;background-color:#202329;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:25px 25px}.playmat{position:absolute;inset:0 170px 165px 0;overflow:hidden;background:radial-gradient(ellipse at center,#25343b55,transparent 70%)}.centerhint{position:absolute;top:49%;left:50%;transform:translate(-50%,-50%);color:#ffffff12;letter-spacing:3px;font-weight:800;pointer-events:none}.boardcard{position:absolute;width:clamp(77px,8vw,125px);aspect-ratio:63/88;background:#0b0d11;border:2px solid #252627;border-radius:7px;box-shadow:0 8px 15px #0009;cursor:grab;user-select:none;touch-action:none}.boardcard.selected{outline:2px solid #eab665}.boardcard.tapped{transform:rotate(90deg)}.boardcard img,.handcard img,.smallcard img{width:100%;height:100%;object-fit:cover;border-radius:5px;pointer-events:none}.placeholder{height:100%;display:grid;place-items:center;text-align:center;padding:6px;color:#e0c090;background:linear-gradient(135deg,#2a243a,#131c22);font-size:12px;font-weight:bold}.counter{position:absolute;bottom:-11px;right:-10px;background:#d3aa59;color:#17191e;border:1px solid black;border-radius:50%;padding:4px 8px;font-weight:800}.players{position:absolute;right:8px;top:8px;width:153px;display:flex;flex-direction:column;gap:7px;max-height:45%;overflow:auto}.player{background:#111722e8;border:1px solid #40536b;border-radius:7px;padding:8px}.player.me{border-color:#d0a05a}.player .name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player .life{font-size:19px;font-weight:900}.player small{display:block;color:#9aafc0;font-size:10px}.myLife{position:absolute;left:10px;top:10px;background:#0d131ce8;border:1px solid #3f4f60;border-radius:7px;padding:8px;min-width:125px}.lifeRow{display:flex;align-items:center;justify-content:space-between;gap:6px}.lifeRow strong{font-size:26px}.lifeRow button{padding:2px 8px}.smallstats{display:flex;flex-direction:column;gap:2px;margin-top:7px}.smallstats>div{display:flex;align-items:center;gap:7px;font-size:11px;color:#a7bbcf}.smallstats button{padding:0 5px}.smallstats b{margin-left:auto;color:white}.actions{position:absolute;bottom:136px;left:12px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 200px);z-index:4}.actions button{font-size:11px;padding:7px 10px;background:#0e1721e8}.actions .primary{background:#059dc0}.actions kbd{font-size:9px;color:#9eb7c6;margin-left:5px}.hand{position:absolute;bottom:-65px;left:6%;right:23%;height:190px;display:flex;justify-content:center;align-items:flex-start;z-index:3;pointer-events:none}.handcard{position:relative;flex:0 0 103px;height:144px;margin-left:-16px;border:2px solid #0b0c10;border-radius:6px;background:#161621;box-shadow:0 3px 10px #000a;transform:rotate(var(--angle,0deg));transition:transform .12s;cursor:pointer;pointer-events:auto}.handcard:hover{z-index:10;transform:translateY(-65px) scale(1.7) rotate(0);box-shadow:0 9px 20px #000}.handcard span{position:absolute;top:-17px;left:0;font-size:10px;background:#151e27;padding:2px 4px;border-radius:3px;max-width:110px;overflow:hidden;white-space:nowrap}.zones{position:absolute;bottom:6px;right:8px;display:flex;gap:5px;height:145px;z-index:5}.zone{width:89px;min-width:0;background:#0c1018dd;border:1px solid #374452;border-radius:6px;cursor:pointer;position:relative}.zone span{display:block;color:white;font-size:10px;font-weight:900;text-align:center;background:#121822;padding:3px 1px;white-space:nowrap}.zone .backcard,.zone .smallcard{width:70px;height:102px;margin:5px auto;border:1px solid #64798b;border-radius:5px}.backcard{display:grid;place-items:center;font-size:40px;font-weight:900;color:#d5a45d;background:radial-gradient(circle,#39566e,#111d29 65%)}.log{position:absolute;left:9px;bottom:171px;width:215px;max-height:100px;overflow:auto;font-size:10px;color:#8da5b6;pointer-events:none}.log div{margin:3px 0}.overlay{position:fixed;inset:0;background:#000b;display:flex;justify-content:center;align-items:center;z-index:50;padding:20px}.modal{background:#171d27;border:1px solid #394758;border-radius:12px;width:min(750px,95vw);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 80px #000b}.modalhead{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #344251;padding:18px 23px}.modalhead h2{margin:0;font-size:19px}.close{border:0;background:transparent}.modal #modalBody{padding:22px;overflow:auto}.modal p{color:#a8b7c8;line-height:1.5}.modal textarea{height:190px;resize:vertical;font-family:monospace;font-size:12px}.modalactions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.deckentry{border:1px solid #364353;border-radius:7px;background:#202a36;margin:8px 0;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.deckentry small{display:block;color:#a1b3c4;margin-top:5px}.deckentry button{margin-left:5px;padding:7px 9px;font-size:11px}.muted{color:#9aabbc;font-size:12px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#172b35;color:#effaff;border:1px solid #25a6c5;border-radius:8px;padding:13px 20px;z-index:70;box-shadow:0 10px 30px #000a}.cardmenu{position:fixed;z-index:30;background:#10151c;border:1px solid #495663;border-radius:8px;padding:5px;min-width:190px;box-shadow:0 12px 25px #000a}.cardmenu button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:9px;color:#e5edf4;font-size:12px}.cardmenu button:hover{background:#283443}.split{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pill{display:inline-block;border-radius:4px;padding:3px 6px;background:#263846;font-size:11px;color:#85cee1}.helper{background:#202b35;border-radius:6px;padding:10px;font-size:12px;color:#adc2d2}@media(max-width:800px){.homegrid{grid-template-columns:1fr}.hero{margin-bottom:28px}.home{padding:30px 5%}.gamebar{height:auto;flex-wrap:wrap}.barbuttons button{font-size:10px}.players{width:110px}.playmat{right:115px}.actions{bottom:155px;max-width:calc(100% - 125px)}.actions button{padding:5px}.hand{left:0;right:20%;bottom:-85px}.handcard{flex-basis:72px;height:105px}.zones{height:110px;gap:2px}.zone{width:64px}.zone span{font-size:8px}.zone .backcard,.zone .smallcard{width:49px;height:73px}.log{display:none}}
/* Alpha 0.2: EDH-style dark charcoal / restrained cyan, uncluttered tabletop */
:root{color:#f3f5f8;background:#12171d;font-family:Inter,Segoe UI,Arial,sans-serif}
body{background:#12171d}
.topbar{height:45px;background:#10161e;border-bottom:1px solid #272d35;padding:0 max(15px,4%)}
.brand{font-size:16px;letter-spacing:1px}.brand span:not(.brandicon){color:#f5f6f8}.brandicon{color:#0b9bc2}.brand small{color:#7c939e;background:#1a232c}
.navlinks{display:flex;gap:5px;margin-left:25px;margin-right:auto}.navlinks button{border:0;background:transparent;color:#b2bbc8;font-size:12px;padding:8px 16px}.navlinks button:hover{color:white;background:#222b35}.status{color:#6e8390}
button{border-color:#323a44;background:#252b34;color:#f6f7f9;border-radius:5px}button:hover{background:#323c46;border-color:#668394}
.primary{background:#0699bd;border-color:#0699bd}.primary:hover{background:#0a86a8}
.home{min-height:calc(100vh - 45px);background:linear-gradient(0deg,#111820e8,#111820dc),radial-gradient(ellipse at center,#344955,#131b25 70%);padding:65px 7%}
.hero em{color:#18aaca}.eyebrow{color:#11a8cb}.panel{background:#19232d;border:1px solid #303944}.fine{color:#77828d}
.lobby{height:calc(100vh - 45px);display:grid;grid-template-columns:305px minmax(0,1fr);background:#121820}
.lobby-side{border-right:1px solid #29303a;background:#151c25;padding:14px 13px;overflow:auto}
.side-heading{font-size:10px;font-weight:800;letter-spacing:1px;color:#879caf;border-bottom:1px solid #283240;padding:7px 0 13px;margin-bottom:10px;margin-top:9px}.side-heading small{float:right;font-weight:400}
.lobby-side label{display:block;font-size:11px;color:#a8b7c5;margin:13px 0}.lobby-side input:not([type=checkbox]),.lobby-side select{display:block;width:100%;margin-top:6px;padding:9px 10px;border:1px solid #333b47;border-radius:5px;color:#edf4f9;background:#202731;outline:none}
.lobby-side .toggleline{display:flex;justify-content:space-between;align-items:center}.toggleline input{accent-color:#078fb0;width:16px;height:16px}
.lobby-side>button{width:100%;font-size:12px}
.lobby-main{position:relative;padding:22px 35px 100px;display:flex;flex-direction:column;align-items:center;min-width:0;overflow:auto}
.lobby-top{width:100%;display:flex;justify-content:space-between;align-items:center;color:#7e919f;font-size:10px;letter-spacing:1.2px}.lobby-top button{padding:8px 11px;font-size:11px}
.lobby-main h1{font-size:23px;margin:7vh 0 8px}.lobby-code{font-size:12px;color:#8d9daa}.lobby-code strong{color:#dce5eb;letter-spacing:2px}.lobby-code button{font-size:10px;padding:4px 8px;margin-left:6px}
.lobby-seats{display:grid;grid-template-columns:repeat(2,minmax(185px,270px));grid-auto-rows:166px;gap:16px;margin:28px auto;align-content:start;justify-content:center;width:100%}
.seat{border-radius:10px;position:relative;overflow:hidden;border:1px solid #2b3540;background:#202731;display:flex;justify-content:center;align-items:center;flex-direction:column}
.seat.filled{border:1px solid #177fa1;background:linear-gradient(145deg,#1c323d,#1c2631)}.seat-image{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.46;display:grid;place-items:center}.seat-image img{height:75px;width:75px;object-fit:cover;border:2px solid #69a9be;border-radius:50%;opacity:1}.avatar-empty{font-size:60px;color:#d0e4eb}.seat-info{position:absolute;bottom:0;left:0;right:0;padding:11px;background:linear-gradient(transparent,#071018e9);display:flex;flex-direction:column;text-shadow:0 1px 5px #000}.seat-info strong{font-size:14px}.seat-info span,.seat-info small{font-size:11px;color:#bdcbd5;margin-top:3px}.seat-info small{color:#64d2aa}.seat.empty{border-style:dashed;color:#a4b0bd;font-size:12px;gap:12px}.invite-icon{font-size:27px;color:#6c8290}
.lobby-bottom{position:fixed;left:305px;right:0;bottom:0;display:flex;justify-content:center;align-items:center;gap:8px;padding:15px 20px;background:#131922;border-top:1px solid #313a43;flex-wrap:wrap}.lobby-bottom select{background:#222b35;color:white;padding:10px;min-width:160px;max-width:255px;border:1px solid #3b4551;border-radius:5px}.ready-btn,.is-ready{background:#199a52;border-color:#199a52}.ready-btn:hover{background:#1a8549}
.opening{height:calc(100vh - 45px);background:radial-gradient(ellipse at center,#131920,#080c10);display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:auto;padding:35px}.opening-title{text-align:center;margin:0 0 55px}.opening-title h1{font-size:42px;margin:0}.opening-title p{font-size:13px;color:#9db0c1}.opening-cards{display:flex;justify-content:center;align-items:center;min-height:275px;max-width:100%;padding:0 40px}.opening-card{height:clamp(185px,23vw,300px);aspect-ratio:63/88;min-width:0;flex:0 1 210px;margin-left:-2.2vw;border:2px solid #0d1418;border-radius:10px;overflow:hidden;box-shadow:0 12px 35px #0008;transform:rotate(calc((var(--i,0) - 3) * 2deg))}.opening-card img{width:100%;height:100%;object-fit:cover}.opening-actions{display:flex;gap:12px;margin-top:48px}.opening-actions button{padding:13px 28px}.mulligan-btn{background:#e76313;border-color:#e76313}.opening>.muted{margin-top:20px}
.game{height:calc(100vh - 45px)}.gamebar{height:0;min-height:0;position:relative;padding:0;border:none;background:transparent;z-index:15}.gamebar>div:first-child{position:absolute;top:7px;left:50%;transform:translateX(-50%);display:flex;align-items:center;white-space:nowrap}.gamebar strong{display:none}.gamebar .tag{background:#0d1117e8;color:white;font-weight:bold}.barbuttons{position:absolute;right:11px;top:13px;display:block}.barbuttons #gameMenu{font-size:22px;width:36px;height:36px;line-height:1;padding:4px;border:none;background:#121923d9}.game-menu{position:absolute;right:0;top:40px;background:#151c24;border:1px solid #3d4753;border-radius:8px;padding:5px;min-width:170px;box-shadow:0 12px 30px #0009;display:flex;flex-direction:column}.game-menu button{border:none;text-align:left;background:transparent}.game-menu button:hover{background:#293442}
.tableArea{background:#25262d;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:16px 16px;border:1px solid #857540;border-radius:10px;margin:2px}
.playmat{inset:0;background:transparent;background-size:cover;background-position:center}.players{z-index:7;right:13px;top:55px;width:150px;max-height:35%}.player{padding:7px;background:#111720c9;border-color:#2c3744}.player .life{font-size:15px}.tiny-avatar{width:24px;height:24px;object-fit:cover;border-radius:50%;margin-right:6px;vertical-align:middle}
.myLife{top:5px;left:5px;padding:0;min-width:94px;width:94px;border:1px solid #3a4550;background:#11161fcf}.lifeRow strong{font-size:20px}.lifeRow button{padding:0 7px;border:0;background:transparent}.smallstats{display:none;position:absolute;top:34px;left:0;min-width:224px;padding:10px;background:#131820;border:1px solid #323a44;border-radius:7px}.myLife:hover .smallstats,.myLife:focus-within .smallstats{display:flex}.smallstats>div{padding:4px 1px}.smallstats button{margin-left:5px}
.actions{bottom:157px;left:10px;max-width:320px;opacity:.15;transition:opacity .2s;z-index:7}.actions:hover,.actions:focus-within{opacity:1}.actions button{padding:5px 8px;background:#131923e8;font-size:10px}.actions .primary{background:#078bad}
.hand{left:8%;right:25%;bottom:-71px;height:171px;align-items:flex-start}.handcard{flex:0 0 clamp(70px,7vw,116px);height:clamp(104px,10vw,159px);margin-left:-15px}.handcard span{display:none}.handcard:hover{transform:translateY(-68px) scale(1.5) rotate(0deg)}.hand-label{position:absolute;bottom:4px;left:48%;font-size:10px;color:#a5b3bc;font-weight:800;z-index:7}
.zones{right:5px;bottom:-20px;height:101px;gap:3px}.zone{width:93px;border-color:#303b46;background:#0e1318a8}.zone span{padding:3px 0;background:#0d1119;font-size:9px}.zone .backcard,.zone .smallcard{height:110px;width:76px;margin:2px auto}.log{display:none}.boardcard{width:clamp(76px,6.2vw,118px)}
@media(max-width:850px){.lobby{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 45px)}.lobby-side{order:2}.lobby-main{order:1;padding-bottom:110px}.lobby-bottom{left:0}.lobby-main h1{margin-top:20px}.lobby-seats{grid-template-columns:repeat(2,minmax(130px,1fr))}.navlinks{margin-left:6px}.navlinks button{padding:5px}.opening-card{height:180px}.zones .zone{width:65px}.zones .zone .backcard,.zones .zone .smallcard{width:52px;height:75px}}

.backcard.custom-sleeve{background-size:cover;background-position:center;font-size:0}.actions.pinned{opacity:1}.opening-card img{display:block}.uploadline{color:#8295a3!important;margin-top:-8px!important}.uploadline input{font-size:11px;padding:5px!important;background:#141b23!important}.game-menu.hidden{display:none!important}

/* Alpha 0.3 — friendly lobby previews and visible deck navigation */
.appearance-preview{display:flex;align-items:center;justify-content:center;background:#20242b;border:1px dashed #46515e;border-radius:7px;margin:3px 0 12px;color:#a4b1be;font-size:11px;overflow:hidden}
.appearance-preview img{display:block;width:100%;height:100%;object-fit:cover}
.avatar-preview{height:88px;width:88px;border-radius:50%;margin:8px auto 10px}
.mat-preview{height:122px;width:100%;aspect-ratio:16/9}
.sleeve-preview{height:126px;width:90px;margin:8px auto}
.playtest-hint{font-size:11px;line-height:1.5;color:#9ed4e1;background:#19303a;padding:8px;border-radius:5px}
.seat-image img{height:90px;width:90px;z-index:1;filter:drop-shadow(0 4px 6px #0009)}
.seat.filled .seat-image{opacity:.9}.seat-image:has(img){background-blend-mode:multiply}
.seat-image:has(img)::before{content:'';position:absolute;inset:0;background:#090d14a0}.seat-image img{position:relative}

/* Alpha 0.4: clean, direct-manipulation tabletop */
.actions{display:none!important}.actions.pinned{display:flex!important;opacity:1!important}
.handcard:hover{transform:rotate(var(--angle,0deg))!important;z-index:6;box-shadow:0 3px 10px #000a!important}
.handcard{touch-action:none;user-select:none}
.boardcard{z-index:1}.pt-badge{position:absolute;right:-4px;bottom:-8px;color:#eef4fc;background:#0c1320;border:2px solid #05080e;border-radius:5px;font-size:13px;font-weight:850;letter-spacing:1px;padding:2px 7px;z-index:4;transform:none}.boardcard.tapped .pt-badge{transform:rotate(-90deg)}
.hand-label{position:relative!important;bottom:auto!important;left:auto!important;align-self:flex-start;margin:4px 6px 0 0;padding:3px 4px;background:#0c1019;border-radius:4px;white-space:nowrap;z-index:8}
.zone-view{display:inline-block!important;vertical-align:middle;font-size:9px!important;background:#27323e!important;border:1px solid #586473!important;border-radius:3px;padding:1px 3px!important;line-height:1.1}
.card-hover{position:fixed;z-index:25;left:14px;top:52px;width:clamp(175px,19vw,285px);aspect-ratio:63/88;pointer-events:none;filter:drop-shadow(0 12px 26px #000c)}.card-hover img{width:100%;height:100%;object-fit:contain;border-radius:11px}
.drag-ghost{position:fixed;z-index:100;pointer-events:none;width:125px;height:176px;transform:translate(-50%,-55%);filter:drop-shadow(0 10px 15px #000c);opacity:.88}.drag-ghost img{width:100%;height:100%;border-radius:6px}
.library-drawer{position:fixed;right:0;top:45px;bottom:0;width:min(365px,94vw);z-index:26;background:#10151e;border-left:1px solid #354250;box-shadow:-10px 0 36px #0009;display:flex;flex-direction:column}.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 15px;border-bottom:1px solid #334052}.drawer-head button{background:transparent;border:none;font-size:17px}.drawer-top{padding:14px;display:flex;flex-direction:column;align-items:center;gap:10px}.drawer-top>img{width:205px;aspect-ratio:63/88;object-fit:contain;border-radius:11px}.library-filter{display:flex;width:100%;gap:6px}.library-filter input{flex:1;min-width:0}.library-filter select{width:115px;flex-shrink:0}.library-rows{flex:1;min-height:0;overflow-y:auto}.library-row{width:100%;display:flex;justify-content:space-between;text-align:left;border:0;border-bottom:1px solid #252e3b;border-radius:0;background:#10151e;padding:12px 14px;font-size:13px}.library-row.selected,.library-row:hover{background:#26313c}.library-row span{color:#9ca8b6}
.backcard.custom-sleeve{background-size:100% 100%;background-position:center;background-repeat:no-repeat;color:transparent}
.playmat{background-size:cover!important;background-position:center!important}

/* Alpha 0.5 polish: card preview size & positioning, robust drag visuals, and host action */
.card-hover{left:auto!important;right:24px!important;top:clamp(115px,23vh,215px)!important;width:clamp(245px,19vw,330px)!important;max-height:60vh;aspect-ratio:63/88}
.drag-ghost{transform:none!important}
.danger{color:#ffb5b5!important;border-color:#a44747!important;background:#3a1b21!important}
.danger:hover{background:#692531!important}
.library-row{touch-action:none;user-select:none;cursor:grab}

/* Alpha 0.6: client-side size, multi select, and zone tools */
.boardcard{width:clamp(66px,calc(6.2vw * var(--local-card-scale,1)),190px)!important}
.handcard{flex-basis:clamp(65px,calc(7vw * var(--local-card-scale,1)),180px)!important;height:clamp(90px,calc(10vw * var(--local-card-scale,1)),245px)!important}
.boardcard.selected{outline:3px solid #38b5d3;box-shadow:0 0 0 4px #10394daa,0 10px 19px #0009}
.selection-actions{position:absolute;left:50%;top:46px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:#10151ef0;border:1px solid #4a6374;border-radius:8px;padding:8px;z-index:15;font-size:12px}
.selection-actions.hidden{display:none!important}.selection-actions button{padding:6px}
.size-setting{display:flex;align-items:center;gap:8px;color:#c5d3de;font-size:12px;padding:9px}.size-setting input{width:85px}
.drawer-actions{display:flex;gap:8px;align-items:center}.drawer-actions .drawer-shuffle{font-size:12px!important;background:#273847!important;padding:7px 12px;border-radius:5px}
.tax-badge{position:absolute;bottom:2px;right:2px;border-radius:4px;color:#f3dcaa;background:#151e2af0;border:1px solid #997649;padding:2px 5px;cursor:pointer;font-size:12px}
.zone-view{cursor:pointer}

/* Alpha 0.7: right-button marquee selection on the battlefield */
.selection-rectangle{position:absolute;border:1px solid #5fd0ec;background:#23a0d536;pointer-events:none;z-index:12;box-shadow:inset 0 0 12px #38c6e522}
.boardcard.selected{outline:3px solid #61d9f4!important;box-shadow:0 0 0 4px #16465ecf,0 8px 15px #0009!important}

/* Alpha 0.8: lower-resolution 1280×1024 usability */
.tax-badge{position:absolute!important;top:31px!important;bottom:auto!important;right:0!important;z-index:15!important;background:#f4c56b!important;color:#161719!important;border:2px solid #18120b!important;font-size:14px!important;padding:3px 7px!important;box-shadow:0 2px 9px #000!important}
.reveal-choice{display:flex!important;align-items:center;gap:10px}.reveal-choice input{width:auto!important}
.reveal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;max-height:55vh;overflow:auto}.reveal-grid img{width:100%;aspect-ratio:63/88;object-fit:contain;border-radius:6px}.reveal-grid small{display:block;text-align:center}
.order-row{display:flex;align-items:center;gap:6px;padding:6px;border-bottom:1px solid #3b454e}.order-row span{flex:1;min-width:0}.order-row button{padding:5px 10px}
.token-search{display:flex;gap:8px}.token-search input{flex:1;min-width:0}.token-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px;max-height:280px;overflow:auto;padding:8px 0}.token-results button{padding:5px;font-size:11px}.token-results img{width:100%;aspect-ratio:63/88;object-fit:cover}.token-custom{border-top:1px solid #3b4857;margin-top:12px;padding-top:10px}
@media(max-width:1350px){.gamebar{padding:4px 8px}.zones{right:2px;gap:2px}.zone{width:78px!important}.zone .backcard,.zone .smallcard{width:65px!important;height:95px!important}.hand{right:27%;left:9%}.myLife{max-width:115px;font-size:11px}.card-hover{width:clamp(190px,18vw,280px)!important;top:75px!important}}

/* Alpha 0.9: hand drop safety, commander slots and counter layering */
.command-zones{display:flex;gap:3px;align-items:stretch}
.command-slot{flex:none;overflow:visible}
.command-slot .smallcard .muted{padding:10px 3px;font-size:10px;text-align:center}
.command-slot .tax-badge{top:auto!important;bottom:4px!important;right:2px!important;font-size:12px!important;z-index:21!important;pointer-events:auto}
.boardcard .counter{bottom:23px!important;right:-6px!important;z-index:6!important;border-radius:5px!important;padding:2px 7px!important;box-shadow:0 2px 8px #000b}
.boardcard.tapped .counter{transform:rotate(-90deg)}
/* Reserve a clear visual band for the hand; cards cannot be played inside it. */
.hand{z-index:8!important}
@media(max-width:1350px){.zone{width:61px!important}.zone .backcard,.zone .smallcard{width:50px!important;height:73px!important}.zones{bottom:2px!important;height:104px!important}.hand{left:2%!important;right:32%!important}.tax-badge{font-size:11px!important}}

#boardCards{position:absolute;inset:0 0 190px 0;overflow:visible}

/* Alpha 1.0: make permanent card zones readable at 1280px and preserve drop targets. */
.zones{height:152px!important;bottom:4px!important;right:6px!important;gap:5px!important;max-width:min(60vw,650px);overflow-x:auto;overflow-y:hidden;align-items:stretch;scrollbar-width:thin;padding-bottom:3px;z-index:11!important}
.zones>.zone,.zones>.command-zones>.zone{width:91px!important;min-width:91px!important;flex-shrink:0!important;height:142px!important}
.zones .backcard,.zones .smallcard,.zones .zone .backcard,.zones .zone .smallcard{width:70px!important;height:99px!important;margin:5px auto!important}
.command-zones{flex:0 0 auto;gap:5px!important}
.zones .zone span{font-size:9px!important;line-height:1.35;overflow:hidden;text-overflow:clip}
.zones .command-slot .tax-badge{top:auto!important;bottom:6px!important;right:5px!important;font-size:14px!important;cursor:pointer;padding:3px 6px!important}
.hand{right:min(61vw,665px)!important;left:5%!important;bottom:-66px!important}
.hand-label{min-width:42px;align-self:flex-start;margin-top:4px!important}
.counter-control{cursor:pointer;user-select:none;touch-action:manipulation}
.active-turn{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;font-size:12px}
.active-turn img,.turn-fallback{width:23px;height:23px;object-fit:cover;border-radius:50%;background:#26303c;display:inline-grid;place-items:center}
.active-turn strong{color:#fff;max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#playerCount{display:inline-flex;align-items:center;background:#121821;padding:3px 8px;border-radius:6px}
#boardCards{bottom:170px!important}
@media(max-width:1350px){.zones{max-width:56vw!important}.zones>.zone,.zones>.command-zones>.zone{width:87px!important;min-width:87px!important}.zones .zone .backcard,.zones .zone .smallcard{width:69px!important;height:99px!important}.hand{right:58vw!important;left:1%!important}}
@media(max-width:900px){.zones{max-width:60vw!important}.hand{right:61vw!important}.zones>.zone,.zones>.command-zones>.zone{width:85px!important;min-width:85px!important}}

/* Alpha 1.1: stable hand layout, full-length zone dragging, independent P/T */
/* Keep the entire hand inside its allotted region at 1280px, with overlap instead of overflow. */
.hand{left:0!important;right:auto!important;bottom:0!important;width:calc(100% - min(60vw,660px) - 14px)!important;min-width:0!important;max-width:100%!important;height:148px!important;justify-content:flex-start!important;align-items:flex-end!important;padding:0 4px 0 8px!important;overflow:visible!important;pointer-events:none}
.handcard{flex:0 1 110px!important;min-width:0!important;width:110px!important;height:auto!important;aspect-ratio:63/88!important;margin-left:0!important;margin-right:-13px!important;align-self:flex-end;position:relative}
.handcard:first-child{margin-left:0!important}
.handcard:last-child{margin-right:0!important}
.handcard img{display:block}
@media(max-width:1350px){.hand{width:calc(100% - 57vw - 10px)!important;left:0!important;right:auto!important}.handcard{flex:0 1 100px!important;margin-right:-14px!important}}
@media(max-width:900px){.hand{width:calc(100% - 61vw - 5px)!important}.handcard{margin-right:-17px!important}}
/* The upper play area is not the visible bounds for a dragged card. */
.board-drag-ghost{z-index:1000!important;transform:none!important;opacity:.92!important;width:clamp(66px,calc(6.2vw * var(--local-card-scale,1)),190px)!important;height:auto!important;aspect-ratio:63/88;}
.board-drag-ghost img{width:100%;height:100%;object-fit:cover}
.drag-count{position:absolute;top:-24px;left:0;white-space:nowrap;background:#192e40;color:white;padding:2px 8px;border-radius:5px}
.zone,.zone *,.boardcard,.boardcard *,.handcard,.handcard *{user-select:none!important;-webkit-user-select:none!important;-webkit-user-drag:none}
.zone img,.boardcard img,.handcard img{pointer-events:none}
.pt-badge{display:flex;align-items:center;gap:1px;padding:1px 3px!important;touch-action:manipulation;user-select:none}
.pt-badge [data-pt-id]{display:inline-block;padding:3px 5px;cursor:pointer;border-radius:3px;min-width:17px;text-align:center}
.pt-badge [data-pt-id]:hover{background:#2d526a}
.pt-separator{pointer-events:none}

/* Alpha 1.2: center the hand without allowing its cards to be clipped. */
.hand{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(780px,calc(100vw - 170px))!important;max-width:calc(100% - 14px)!important;justify-content:center!important;padding:0 12px!important;z-index:9!important}
.handcard{flex:0 1 clamp(68px,8.1vw,112px)!important;margin-right:-21px!important}
.handcard:last-child{margin-right:0!important}
@media(max-width:900px){.hand{width:calc(100vw - 65px)!important}.handcard{margin-right:-27px!important}}
.group-drag-ghost{width:auto;height:auto;aspect-ratio:auto!important;filter:drop-shadow(0 12px 18px #0009)}
.group-ghost-card{position:absolute;border:1px solid #79d6f5;border-radius:5px;overflow:hidden;background:#111920;box-shadow:0 4px 12px #0008}
.group-ghost-card img{width:100%;height:100%;object-fit:fill}
.boardcard.attached-card{box-shadow:0 0 0 2px #aab9c2,0 4px 10px #0008}
.boardcard.attach-drop-target{outline:4px solid #4fdf95!important;box-shadow:0 0 23px #4fdf9588!important}
.attach-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;max-height:380px;overflow:auto}
.attach-choice{display:flex;align-items:center;gap:8px;text-align:left;min-width:0}
.attach-choice img{width:34px;height:48px;object-fit:cover;border-radius:3px}

/* Alpha 1.2 final layout tweaks */
.hand{left:43%!important;width:min(740px,calc(100vw - 430px))!important}
@media(max-width:900px){.hand{left:42%!important;width:calc(100vw - 270px)!important}}
.board-drag-ghost.group-drag-ghost{width:var(--group-width,auto)!important;height:var(--group-height,auto)!important;aspect-ratio:auto!important;max-width:none!important}

/* Alpha 1.4 — locally controlled Focus / Split viewing modes. */
.view-menu-label{font-size:10px;color:#8098a9;font-weight:800;padding:9px 10px 3px;letter-spacing:.1em}
.view-option{display:flex;align-items:center;gap:8px;font-size:11px;color:#c5d1dc;padding:6px 10px;cursor:pointer}
.view-option input{accent-color:#13aaca;width:15px;height:15px}
.game-menu button.view-selected{background:#183947;color:#8fddf1}
.focus-sidebar{position:absolute;right:0;top:0;bottom:0;width:205px;background:#0c1118;border-left:1px solid #4d5764;z-index:9;display:flex;flex-direction:column;overflow:hidden}
.focus-sidebar-head{display:flex;justify-content:space-between;align-items:center;padding:10px;font-size:10px;color:#9fb3c4}
.focus-sidebar-head button{padding:2px 8px;font-size:13px}
.focus-player-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:5px;padding:3px 5px}
.focus-player{padding:0;border:1px solid #374250;position:relative;background:#181c24;color:white;text-align:left;overflow:hidden;border-radius:5px;min-height:112px;flex-shrink:0}
.focus-player.focused{border-color:#35c1dc;box-shadow:inset 0 0 0 1px #35c1dc}
.focus-player.turn-active{border-left:3px solid #f7b938}
.focus-player-heading,.split-name{display:flex;align-items:center;gap:5px;background:#090e14dc;color:#dce7ee;font-size:10px;padding:4px 5px;min-height:25px}
.focus-player-heading strong,.split-name strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.focus-player-heading span,.split-name span{white-space:nowrap}
.view-avatar,.view-avatar-fallback{height:18px;width:18px;border-radius:50%;object-fit:cover;background:#293541;display:inline-grid;place-items:center;font-size:10px;flex-shrink:0}
.focus-mini{height:89px;position:relative;overflow:hidden}
.focus-mini .snapshot-mat,.split-player-board .snapshot-mat{position:absolute;inset:0 0 20px;background-size:cover;background-position:center}
.focus-mini .snapshot-card{width:clamp(10px,1.1vw,19px)}
.focus-mini .snapshot-life,.focus-mini .snapshot-zones,.focus-mini .snapshot-hand{display:none}
.focus-turn-tag{position:absolute;top:24px;left:4px;background:#f3bb38;color:#151923;font-size:8px;font-weight:900;padding:2px 4px;border-radius:2px}
.expand-sidebar{position:absolute;right:8px;top:44%;z-index:12;background:#111c27ec;padding:10px 7px}
.tableArea:not(.sidebar-collapsed):not(.split-viewing) .playmat{right:205px!important}
.tableArea:not(.sidebar-collapsed):not(.split-viewing) .zones{right:210px!important}
.tableArea:not(.sidebar-collapsed):not(.split-viewing) .hand{left:calc(50% - 102px)!important}
.tableArea:not(.sidebar-collapsed):not(.split-viewing) .card-hover{right:220px!important}
.tableArea.remote-viewing #boardCards,.tableArea.remote-viewing #hand,.tableArea.remote-viewing .zones,.tableArea.remote-viewing #myLife,.tableArea.remote-viewing #gameActions{display:none!important}
.tableArea .players{display:none!important}
.remote-board{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.remote-snapshot{position:absolute;inset:0;overflow:hidden}
.remote-snapshot .snapshot-mat{position:absolute;inset:0;background-position:center;background-size:cover}
.snapshot-card{position:absolute;width:clamp(38px,6.2vw,116px);aspect-ratio:63/88;border:1px solid #1a1b1e;border-radius:4px;box-shadow:0 4px 8px #0009}
.snapshot-card img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.snapshot-card.snapshot-tapped{transform:rotate(90deg)}
.snapshot-life{position:absolute;top:12px;left:12px;background:#111927ee;padding:8px;border-radius:6px;font-weight:800}
.snapshot-hand{position:absolute;bottom:-43px;left:50%;transform:translateX(-50%);height:115px;display:flex;justify-content:center}
.snapshot-hand img{width:66px;height:92px;object-fit:cover;transform:rotate(calc((var(--hand-index) - 3)*3deg));margin-right:-17px;border:1px solid #040608;border-radius:4px}
.snapshot-zones{position:absolute;right:7px;bottom:8px;display:flex;gap:5px;align-items:end}
.snapshot-zones span{background:#0d141df2;font-size:10px;padding:4px;border-radius:4px;white-space:nowrap}.snapshot-zones img{width:31px;height:44px;object-fit:cover;vertical-align:middle}
.remote-toolbar{position:absolute;top:45px;left:50%;transform:translateX(-50%);z-index:10;background:#111924ed;border:1px solid #445565;border-radius:7px;padding:6px 9px;display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:12px;pointer-events:auto}
.remote-toolbar span{color:#94a3af;font-size:10px}.remote-toolbar button{padding:5px 8px;font-size:11px}
.split-board-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:2px;background:#05080c;z-index:12}
.split-player-board{position:relative;padding:0;background:#22262c;border:2px solid #383d43;border-radius:3px;min-width:0;min-height:0;overflow:hidden;text-align:left}
.split-player-board.active-split{border-color:#edb638;box-shadow:inset 0 0 0 2px #edb638}
.split-player-board .split-name{position:absolute;top:0;left:0;right:0;z-index:4;justify-content:center;height:27px}
.split-player-board .split-name em{font-size:9px;color:#e8b84b;font-style:normal}
.split-player-board .snapshot-mat{inset:27px 0 0;}
.split-player-board .snapshot-card{width:clamp(17px,2.3vw,52px)}
.split-player-board .snapshot-life{top:32px;left:6px;font-size:12px;padding:3px 6px}
.split-player-board .snapshot-hand{bottom:-34px;height:75px}.split-player-board .snapshot-hand img{width:40px;height:56px;margin-right:-13px}
.split-player-board .snapshot-zones{bottom:4px;right:4px;gap:3px}.split-player-board .snapshot-zones span{font-size:8px;padding:2px}.split-player-board .snapshot-zones img{height:20px;width:14px}
@media(max-width:700px){.focus-sidebar{width:145px}.tableArea:not(.sidebar-collapsed):not(.split-viewing) .playmat{right:145px!important}.tableArea:not(.sidebar-collapsed):not(.split-viewing) .zones{right:145px!important}.tableArea:not(.sidebar-collapsed):not(.split-viewing) .hand{left:calc(50% - 72px)!important}.focus-player{min-height:94px}.focus-mini{height:70px}}

.snapshot-mat{background-color:#26272e;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:18px 18px}
.focus-mini .snapshot-mat,.split-player-board .snapshot-mat{background-size:cover}

/* Alpha 1.4.2 — remote player battlefield and public zones */
.remote-board{pointer-events:auto!important}
.remote-snapshot{width:100%;height:100%}
.remote-snapshot .snapshot-mat{inset:0!important;background-size:cover!important;background-position:center!important}
.remote-snapshot .snapshot-card{pointer-events:none}
.remote-snapshot .snapshot-zones{right:10px;bottom:8px;display:flex;gap:5px;align-items:flex-end;max-width:62%;overflow-x:auto;pointer-events:auto}
.remote-zone{min-width:77px;width:77px;height:125px;flex:0 0 77px;display:flex;flex-direction:column;gap:4px;padding:4px;background:#111820b8;border:1px solid #54606c;border-radius:5px;color:#eff8ff;cursor:pointer}
.remote-zone b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.remote-zone-art{flex:1;min-height:0;border:1px solid #60748377;border-radius:4px;display:grid;place-items:center;overflow:hidden}
.remote-zone-art img{width:auto!important;max-width:100%;height:100%!important;object-fit:contain}
.remote-zone.library-zone{cursor:default}
.remote-snapshot .snapshot-hand{left:35%;bottom:-37px}
.remote-snapshot .snapshot-life{z-index:3}
.remote-snapshot .snapshot-mat{background-repeat:no-repeat}
.focus-mini .remote-zone{display:none}
.focus-mini .snapshot-zones{display:none}
.split-player-board .remote-zone{width:38px;min-width:38px;height:50px;flex-basis:38px;padding:2px;gap:1px}
.split-player-board .remote-zone b{font-size:6px}
.split-player-board .snapshot-zones{max-width:65%;overflow:hidden}
.split-player-board .remote-zone-art img{height:100%!important;width:auto!important}
.public-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;max-height:60vh;overflow-y:auto;padding:8px}
.public-card img{width:100%;aspect-ratio:63/88;object-fit:contain}.public-card small{display:block;line-height:1.3}
.tableArea .playmat{background-size:cover;background-position:center;background-repeat:no-repeat}
#collapseFocusSidebar{position:relative;z-index:15;display:block!important;cursor:pointer;font-size:17px;background:#263544;color:white}
#expandFocusSidebar{z-index:30!important}
/* The remote Focus view occupies the full available table height, including the zone tray. */
.tableArea.remote-viewing .playmat{bottom:0!important}
.tableArea.sidebar-collapsed .playmat{right:0!important}
.tableArea.sidebar-collapsed .zones{right:6px!important}
.tableArea.remote-viewing .remote-board{inset:0!important}

/* 1.4.3: enable card hover previews in opponent snapshots. */
.remote-snapshot .snapshot-card{pointer-events:auto;cursor:zoom-in}
.snapshot-card{user-select:none;-webkit-user-select:none}