:root{color-scheme:dark;--bg:#10131c;--panel:#191e2a;--line:#303747;--muted:#949eaf;--ink:#f5f6fa;--accent:#f5a343;--blue:#88aaff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{color:var(--ink);background:#242b3a;border:1px solid #3b4559;border-radius:8px;padding:10px 15px;cursor:pointer;font-weight:600}button:hover{background:#323d50}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.primary{background:var(--accent);border-color:var(--accent);color:#201a13}.primary:hover{background:#ffb967}.wide{width:100%;display:flex;align-items:center;justify-content:space-between}.text-button{background:none;border:0;justify-content:center;color:var(--accent)}a{color:#cbd2df;text-decoration:none}a:hover{color:var(--accent)}header{height:94px;padding:0 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #262c39}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:1.6px;font-size:17px;color:var(--ink)}.brand b{font-weight:400;color:#a3acba}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:3px;color:var(--muted)}.brand-mark{height:39px;width:39px;display:grid;place-items:center;background:var(--accent);color:#111;transform:skew(-8deg);font-style:italic;font-size:28px}.header-right{display:flex;gap:24px;align-items:center;font-size:12px}.pill{border:1px solid var(--line);padding:6px 12px;border-radius:30px;color:var(--muted)}main{max-width:1600px;margin:auto;padding:36px 5%}h1,h2,p{margin-top:0}h2{font-size:27px;letter-spacing:-.8px}p{color:var(--muted)}.eyebrow,.section-label{font-size:10px;letter-spacing:2px;font-weight:750;color:var(--accent)}.lobby{display:grid;grid-template-columns:1.25fr 1fr;gap:9%;max-width:1180px;margin:35px auto 10px}.intro h1{font-size:clamp(40px,4.6vw,65px);line-height:1.09;letter-spacing:-2.8px;margin:22px 0}.intro h1 em{font-style:normal;color:var(--accent)}.intro>p{font-size:16px;max-width:430px;line-height:1.8}.feature-row{display:flex;gap:24px;margin-top:28px;font-size:11px;color:var(--accent)}.feature-row b{display:block;color:#c5cbd6;margin-top:4px;font-weight:500}.lobby-panel{background:linear-gradient(145deg,#202634,#181d28);border:1px solid var(--line);padding:32px;border-radius:16px;align-self:start}.lobby-panel h2{margin:12px 0 2px}.lobby-panel>p{font-size:13px}label{display:block;font-size:12px;font-weight:600;color:#c1c9d6;margin:18px 0}input,textarea,select{display:block;width:100%;padding:12px;color:var(--ink);background:#10151f;border:1px solid #394255;border-radius:7px;margin-top:7px}input::placeholder,textarea::placeholder{color:#7d8799}select option{background:#151b26;color:#f5f6fa}.divider{display:flex;align-items:center;gap:15px;color:#818b9e;font-size:9px;letter-spacing:1.5px;margin:23px 0 0}.divider:before,.divider:after{content:'';height:1px;background:var(--line);flex:1}.fine{font-size:11px;line-height:1.7;color:#929cad}.lobby-panel .fine{margin:16px 0 0}.table-art{height:240px;position:relative;margin-top:30px;overflow:hidden}.art-card{position:absolute;left:100px;top:20px;width:124px;height:180px;border-radius:10px;border:2px solid #bd7c3d;box-shadow:0 12px 40px #0005;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(130deg,#352b28 0,#352b28 1px,#202430 1px,#202430 14px);font-style:italic;font-weight:900;font-size:64px;color:#dc964c}.art-card span{position:absolute;bottom:17px;font-size:8px;letter-spacing:2px;font-style:normal}.art-card.one{transform:rotate(-20deg);left:45px;top:30px}.art-card.two{transform:rotate(-1deg)}.art-card.three{left:165px;transform:rotate(18deg);top:32px}.table-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.table-heading h1{font-size:28px;margin:4px 0 0;letter-spacing:-1px}.toolbar{display:flex;gap:8px;flex-wrap:wrap}.toolbar button{font-size:12px;padding:8px 12px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px}.turn-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#202638;border:1px solid #354058;padding:14px 18px;border-radius:10px 10px 0 0}.turn-bar h2{font-size:16px;margin:0;letter-spacing:0}.turn-bar p{font-size:11px;margin:2px 0 0}.turn-bar button{font-size:12px}.setup-bar{background:#332a21;color:#f6c58b;padding:12px 16px;font-size:12px}.setup-bar:empty{display:none}.setup-bar button{margin:5px;font-size:12px}.player-field{background:#171d28;border:1px solid var(--line);padding:14px;margin-bottom:1px}.player-field.opponent{background:#141b29}.player-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:12px}.player-meta strong{font-size:13px}.player-meta span{color:var(--muted)}.field-grid{display:grid;grid-template-columns:100px minmax(0,1fr) 110px;gap:10px}.zone{background:#0e141e88;border:1px dashed #343e50;border-radius:7px;padding:9px;min-height:92px}.zone-label{display:flex;justify-content:space-between;font-size:9px;color:#9ca8ba;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}.zone.drop-target{border-color:var(--accent);background:#3a2e22}.zone-stack{display:flex;flex-direction:column;gap:8px}.zone-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.zone .cards{min-height:65px}.cards{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-start}.card{position:relative;flex-shrink:0;width:70px;min-height:100px;border:1px solid #666075;border-radius:6px;background:linear-gradient(145deg,#344464,#202a40);padding:7px 5px;font-size:9px;display:flex;flex-direction:column;justify-content:space-between;gap:4px;overflow:hidden;transition:transform .15s,box-shadow .15s;text-align:left}.card:hover{transform:translateY(-3px);box-shadow:0 3px 12px #0008}.card strong{overflow-wrap:anywhere}.card small{font-size:8px;color:#cbd4e5}.card.rested{transform:rotate(8deg);border-color:#e6a86d;opacity:.8}.card.selected{outline:2px solid var(--accent);outline-offset:2px}.card img{width:100%;border-radius:3px}.card.has-image{padding:0;min-height:0}.card.has-image strong,.card.has-image small{padding:0 4px}.card.back{background:repeating-linear-gradient(135deg,#26344b,#26344b 2px,#182233 2px,#182233 9px);border-color:#515f79;align-items:center;justify-content:center;color:#a9b7cf;font-size:28px;font-style:italic}.card.back small{font-style:normal}.pile{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:700}.pile .card{width:35px;min-height:49px;font-size:20px}.pile-caption{font-size:10px;color:var(--muted)}.empty{color:#667185;font-size:11px;align-self:center;margin:auto}.controls{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0}.controls button{font-size:11px;padding:8px 10px}.hand-panel{background:#1c2330;border:1px solid var(--line);border-radius:10px;padding:15px}.hand-panel .section-label{margin-bottom:12px}.hand-panel .card{width:85px;min-height:120px}.side-panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}.side-panel .section-label{margin-bottom:12px}.side-panel p{font-size:12px}.inspector .preview-image{width:100%;max-height:320px;object-fit:contain}.inspector h3{font-size:15px;overflow-wrap:anywhere}.inspector select{font-size:12px}.inspector .toolbar{margin-top:10px}.inspector .toolbar button{flex:1}.inspector .large-placeholder{height:100px;background:linear-gradient(140deg,#334365,#202b40);display:grid;place-items:center;border:1px solid #566582;border-radius:8px;color:#b7c7e3;font-weight:800;font-size:28px}.log-panel ol{padding:0;list-style:none;max-height:220px;overflow:auto;font-size:11px;color:#aab4c4}.log-panel li{border-bottom:1px solid #ffffff08;padding:7px 0;overflow-wrap:anywhere}.log-panel time{font-size:9px;color:#6d7a90;margin-right:6px}#chat-form{display:flex;gap:6px}#chat{min-width:0;font-size:11px;margin:0;padding:9px}#chat-form button{padding:7px 12px}.inspector label{margin:10px 0}dialog{color:var(--ink);background:var(--panel);border:1px solid #47516a;border-radius:14px;padding:25px;width:min(600px,94vw);max-height:90vh}dialog::backdrop{background:#000b}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading h2{margin:7px 0 0}dialog p{font-size:13px;margin-top:12px}textarea{resize:vertical;font-family:ui-monospace,monospace;font-size:12px}.file-label input{font-size:11px}#deck-error{color:#ffa7a7}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:14px 22px;background:#f5a343;color:#211c16;box-shadow:0 6px 30px #0009;max-width:90vw;border-radius:8px;z-index:20;font-size:13px}footer{text-align:center;padding:25px;font-size:10px;color:#69758a}[hidden]{display:none!important}
@media(min-width:1450px){.card{width:85px;min-height:120px}.field-grid{grid-template-columns:115px minmax(0,1fr) 125px}}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr)}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.log-panel{grid-column:1/-1}.inspector .preview-image{max-height:220px}.lobby{gap:5%}.lobby-panel{padding:24px}.header-right .pill{display:none}}@media(max-width:650px){header{height:78px;padding:0 5%}.brand{font-size:13px}.header-right{font-size:10px;gap:5px}.brand small{font-size:6px;letter-spacing:1px}.brand-mark{width:30px;height:34px}main{padding:23px 4%}.lobby{grid-template-columns:1fr;margin:8px auto;gap:24px}.intro h1{font-size:42px;letter-spacing:-2px}.intro>p{font-size:14px}.table-art{display:none}.feature-row{gap:30px;margin-top:18px}.lobby-panel{padding:22px}.table-heading{align-items:flex-start;flex-direction:column;gap:10px}.table-heading h1{font-size:25px}.toolbar{gap:5px}.toolbar button{padding:7px 9px;font-size:11px}.field-grid{grid-template-columns:60px minmax(0,1fr) 64px;gap:5px}.player-field{padding:9px 6px}.zone{padding:5px;min-height:67px}.zone-label{font-size:7px;letter-spacing:.6px}.zone-row{gap:5px}.card{width:49px;min-height:72px;font-size:7px;padding:4px 3px}.card small{font-size:6px}.cards{gap:5px}.pile{gap:4px;font-size:15px}.pile .card{width:23px;min-height:34px;font-size:15px}.pile-caption{font-size:8px}.hand-panel .card{width:65px;min-height:92px}.turn-bar{padding:12px}.turn-bar h2{font-size:14px}.side-panel{padding:12px}.controls button{font-size:10px;padding:8px}.zone-stack{gap:5px}.player-meta{font-size:10px}.player-meta strong{font-size:11px}dialog{padding:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.counter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.counter{display:flex;align-items:center;gap:6px;background:#242c3c;padding:5px 8px;border-radius:6px;font-size:10px}.counter strong{font-size:17px;color:var(--accent)}.counter button{padding:2px 7px}.sensei-choices{padding:10px}.sensei-choices label{margin:4px;font-size:11px}.sensei-choices input{display:inline;width:auto;margin:0}.setup-bar select{max-width:240px}.zone-label{overflow-wrap:anywhere}.zone-stack .zone{min-width:0}@media(max-width:650px){.counter-row{gap:4px}.counter{padding:3px 5px;font-size:8px;gap:4px}.counter button{padding:2px 5px}.counter strong{font-size:14px}}

/* Shared static card artwork: one download for every hidden card. */
.art-card,.card.back{background:#10131c url("/assets/dragon-ball-online-card-back.webp?v=burnt-red-1") center/100% 100% no-repeat;border:1px solid #080b12;box-shadow:0 3px 9px #0008;padding:0;aspect-ratio:5/7;min-height:0;height:auto}
.art-card{height:180px;box-shadow:0 12px 30px #0009}
.card.back:hover{background:#10131c url("/assets/dragon-ball-online-card-back.webp?v=burnt-red-1") center/100% 100% no-repeat}
.pile .card.back{border-radius:3px}

/* Open tabletop, with separate starting slots and private piles. */
.starting-slots{display:flex;gap:12px;margin:12px 0}.starting-slot{width:110px;min-height:156px;border-style:solid}.starting-slot .zone-label{min-height:26px;letter-spacing:.7px}.starting-slot .card{width:80px;min-height:114px}.free-table{position:relative;height:370px;border:1px solid #695136;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#4b3625,#211b19 85%);box-shadow:inset 0 0 60px #0005}.free-table .card{position:absolute;width:80px;height:114px;min-height:0;z-index:1}.free-table .card.has-image img{height:100%;object-fit:cover}.free-table .card.has-image strong,.free-table .card.has-image small{display:none}.free-zone{display:contents}.table-hint{position:absolute;bottom:12px;left:14px;color:#c2ab8a;font-size:10px;pointer-events:none}.pile-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}.card[data-movable]{touch-action:none;cursor:grab}.drag-ghost{position:fixed!important;width:80px!important;height:114px!important;z-index:1000!important;pointer-events:none;opacity:.9;transform:rotate(3deg)!important}.opponent .free-table{background:radial-gradient(ellipse at 50% 90%,#343142,#171923 85%)}
@media(max-width:650px){.starting-slots{gap:7px}.starting-slot{width:100px;padding:7px;min-height:150px}.starting-slot .zone-label{font-size:8px}.free-table{height:350px}.pile-row{grid-template-columns:repeat(2,minmax(0,1fr))}}