/* Shared Card Club visual language. Loaded after legacy component styles. */
:root{--m-bg:#f4f7f6;--m-card:#fff;--m-sunk:#e7eeec;--m-ink:#183842;--m-ink2:#5c737b;--m-ink3:#73868c;--m-line:#dce5e3;--m-acc:#247769;--m-acc-dk:#195e53;--m-acc-lt:#e4f2ed;--fh:var(--font-ui);--fb:var(--font-ui);--bd-fn:var(--font-ui);--bd-fd:var(--font-ui);--bd-bg:#eaf1ef;--bd-ink:#183842;--bd-ink2:#58727a;--bd-line:#dce6e3;--bd-me-d:#247769;--bd-me:#75b8a9;--bd-opp-d:#a75b49;--bd-glow:#7bbbab;--bd-back:url('../assets/ui/card-back.svg') center/100% 100%;}
body,#s-app{background:radial-gradient(ellipse at 15% 10%,#e1ece8,transparent 55%),#eef3f2;}
button,input{font:inherit;}button{touch-action:manipulation;}button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:3px solid #399c8b;outline-offset:3px;}
.app-col{max-width:480px;background:var(--m-bg);box-shadow:0 0 80px #1c4a4010;}
.app-scroll{padding:24px 24px 20px;}
.a-title,.h-logo{font-size:26px;letter-spacing:-1px;font-weight:700;line-height:1.2;}
.a-lbl{font-size:10px;letter-spacing:1.3px;line-height:1.5;}.a-sub{line-height:1.6;}
.panel{border:1px solid var(--m-line);border-radius:20px;padding:18px;box-shadow:0 4px 14px #173e3503;}
.pill{border:1px solid var(--m-line);font-size:12px;padding:8px 10px;}.pill .av{border:0;}
.btn{font:600 14px/1.4 var(--fb);letter-spacing:0;text-transform:none;border-radius:14px;padding:15px;min-height:48px;}
.btn-acc{background:var(--m-acc);box-shadow:0 4px 10px #24776918;}.btn-acc:hover{background:var(--m-acc-dk);}.btn small{font-size:11px;margin-top:4px;}
.btn-ol{border:1px solid var(--m-line);background:white;}.btn[disabled]{opacity:.5;}.btn-row{flex-wrap:wrap;}
.a-nav{padding:8px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--m-line);background:#ffffffed;gap:6px;}
.a-nav button{font:500 11px var(--fb);letter-spacing:0;gap:5px;min-height:54px;color:var(--ui-muted);border-radius:12px;}
.a-nav .ni{border:0;background:none;filter:none;height:27px;width:40px;border-radius:12px;}.ni svg{width:22px;height:22px;}
.a-nav button.on .ni{background:#e0eee8;color:var(--m-acc);}.a-nav button.on{font-weight:700;}
.club-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;}.club-brand{display:flex;gap:10px;align-items:center;font-size:12px;letter-spacing:2px;font-weight:700;}.club-brand>div>span{display:block;font-size:8px;letter-spacing:3px;margin-top:4px;color:var(--m-ink2);}.club-mark{position:relative;width:36px;height:40px;border:1px solid #aec4ba;border-radius:40% 40% 48% 48%;display:grid;place-content:center;font:700 25px Georgia;color:var(--m-acc);}.club-mark span{position:absolute;font:7px var(--fb);bottom:3px;right:7px;}
.profile-button{width:40px;height:40px;border:1px solid #d5dfda;border-radius:50%;background:#e3ebe6;color:var(--m-ink);font-size:13px;font-weight:600;cursor:pointer;}
.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:var(--m-acc);margin-bottom:10px;}.home-greeting h1{font-size:29px;letter-spacing:-1.2px;line-height:1.2;font-weight:600;margin-bottom:23px;}
.pack-hero{background:radial-gradient(ellipse at 50% 30%,#fff 0%,#ecf2ed 65%,#e6eee7);border:1px solid #dde7df;border-radius:24px;padding:18px 20px 15px;text-align:center;position:relative;overflow:hidden;}
.edition-label{font-size:8px;letter-spacing:1.9px;color:var(--ui-muted);}.pack-display{height:222px;display:flex;align-items:center;justify-content:center;position:relative;}.pack-display:before{content:'';position:absolute;width:230px;height:230px;border:1px solid #cbdccf77;border-radius:50%;top:2px;}.pack-display:after{content:'';position:absolute;bottom:14px;width:110px;height:10px;background:#284c3b26;filter:blur(10px);border-radius:50%;}
.pack{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible;position:relative;}.pack:before,.pack:after{display:none!important;}.pack>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(4px 10px 8px #143b352b);}.pack .pk-shine{display:none;}.pack-display .pack{width:132px;height:189px;transform:rotate(-8deg);z-index:1;}
.hero-caption h2{font-size:16px;letter-spacing:-.5px;font-weight:600;margin:3px 0 7px;}.hero-caption p{font-size:11px;color:var(--m-ink2);line-height:1.5;margin-bottom:18px;}.pack-hero .btn span{float:right;}.pack-status{display:flex;justify-content:center;align-items:center;gap:5px;font-size:10px;color:var(--ui-muted);margin-top:12px;}.status-dot{width:5px;height:5px;background:#4b9d7d;border-radius:50%;}
.home-play,.mode-card{width:100%;display:flex;gap:13px;align-items:center;text-align:left;border:1px solid var(--m-line);background:#fff;border-radius:17px;padding:17px;margin:14px 0 0;color:var(--m-ink);cursor:pointer;}.home-play>span:nth-child(2),.mode-card>span:nth-child(2){flex:1;}.home-play b,.mode-card b{display:block;font-size:14px;font-weight:600;}.home-play small,.mode-card small{display:block;font-size:11px;color:var(--m-ink2);margin-top:5px;line-height:1.4;}.play-symbol,.mode-icon{display:grid;place-items:center;background:#e9f1ec;border-radius:13px;width:42px;height:42px;color:var(--m-acc);flex:none;}.play-symbol svg,.mode-icon svg{width:22px;height:22px;}.home-links{display:flex;justify-content:space-between;margin-top:12px;gap:8px;}.home-links button{display:flex;gap:6px;align-items:center;justify-content:center;border:0;background:transparent;color:var(--m-ink2);font-size:10px;padding:10px 0;cursor:pointer;min-height:40px;}.home-links svg{width:16px;height:16px;}.reward-count{border-radius:12px;padding:2px 5px;background:var(--m-acc-lt);color:var(--m-acc);}
.page-intro{font-size:13px;color:var(--m-ink2);line-height:1.6;margin:12px 0 26px;}.h-top{gap:7px;}.h-top .pill:last-child{max-width:115px;overflow:hidden;}.h-deck{padding:20px;}.h-deck-name{font-size:19px;line-height:1.3;letter-spacing:-.5px;margin:7px 0;}.h-rank{padding:0 20px 18px;}.h-qm{border-radius:0;padding:18px;}.h-tip{margin-top:18px;}.h-tip b{font-size:12px;}.h-tip .ic{font-size:18px;}.bar{border:0;height:5px;}
.grid4{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}.mc{border-width:1px;border-radius:10px;box-shadow:0 4px 10px #203e3514;}.mc.r-legendary{box-shadow:0 4px 10px #203e3514;}.mc-name{font-size:12px;line-height:1.2;padding:24px 8px 8px;}.mc-tag{font-size:8px;letter-spacing:.4px;padding:3px 5px;}.mc-pip{width:6px;height:6px;top:8px;right:7px;}.search-row{flex-wrap:wrap;gap:7px;margin-bottom:16px;}.search-row .search{flex-basis:100%;min-height:44px;background:#fff;border:1px solid var(--m-line);border-radius:12px;}.search input{font-size:13px;}.chip{font-size:11px;min-height:32px;border-width:1px;padding:5px 10px;}.chip.on{background:var(--m-acc);border-color:var(--m-acc);}.chip.sm{min-height:24px;font-size:10px;}.dk{border-width:1px;border-radius:15px;}.dk.active{border-color:var(--m-acc);}.dk-badge{background:var(--m-acc);}.dk-name{font-size:12px;line-height:1.4;}.txt-in{font-size:15px;border:1px solid var(--m-line);border-radius:12px;padding:14px;}.starter{border-width:1px;border-radius:18px;padding:16px;}.starter.sel{border-color:var(--m-acc);background:var(--m-acc-lt);}.starter b{font-size:16px;}.ob-logo{font-size:38px;letter-spacing:-2px;color:var(--m-ink);}.ob-sub{font-size:13px;line-height:1.6;}.f-foot{padding:18px 24px;border-top:1px solid var(--m-line);}.a-full.dark .f-foot{border-color:#ffffff18;}.f-hdr{padding:20px;}.f-hdr .a-title{font-size:21px;}.a-sheet{border-radius:24px 24px 0 0;}.a-sheet .a-title{font-size:21px;}
/* Arena: subdued surface, visible zones, and a full-width instruction panel. */
#s-board{background:radial-gradient(ellipse at center,#f5f8f5,#e3ece8);}.bd-frame{background:linear-gradient(#edf3f0,#e7eeea);}
#s-board .scorebar{height:96px;border-radius:0 0 22px 22px;box-shadow:0 3px 12px #284e3510;}.sb-who{font-size:10px;font-weight:600;max-width:100px;}#s-board .score-num{font-size:26px;font-weight:700;}#s-board .ball-badge{font-size:8px;font-weight:600;}.sb-mid{bottom:10px;}#s-board .score-vs{font-size:9px!important;}
.opp-hand{height:30px;padding-top:2px;}.opp-hand .card.back{width:24px;height:34px;border-width:1px;box-shadow:none;opacity:.7;}
.bd-arena{gap:12px;padding:15px 0 8px;justify-content:space-between;}.bd-arena>.bd-ground{left:10px;right:10px;top:2px;bottom:4px;border-radius:120px;background:none;border:1px solid #cadad080;padding:14px;}.bd-grass{background:none;box-shadow:none;border:1px solid #cadad055;}
#s-board .field:before{background:#dae5db88;box-shadow:none;border:1px solid #cad9cb99;border-radius:18px;}#s-board .field:after{border-color:#ffffff80;border-width:1px;}
#s-board .wizard{height:auto;min-height:91px;padding:11px 12px;border:1px solid #d9e4df;border-radius:16px;flex-direction:column;gap:10px;box-shadow:0 4px 15px #244a3610;order:4;margin-top:3px;}
#s-board .wsteps{display:flex;width:100%;gap:0;border:0;margin:0;padding:0;background:none;}#s-board .wstep{flex:1;display:block;border:0;border-bottom:2px solid #e4ebe7;border-radius:0;padding:0 0 7px;background:none;color:var(--ui-muted);font:500 9px var(--fb);text-align:center;letter-spacing:0;cursor:default;}#s-board .wstep.active{color:#1b6657;border-color:#247769;background:none;font-weight:700;}#s-board .wstep.done{color:var(--ui-text);border-color:#a9cbbb;cursor:pointer;}
#s-board .wbody{width:100%;gap:8px;}#s-board .winstr{font:500 11px/1.5 var(--fb);display:block;overflow:visible;}#s-board .wbtn{font:600 11px var(--fb);height:38px;padding:0 12px;}#s-board .wbtn.lock,#s-board .wbtn.go{background:#247769;box-shadow:none;}#s-board .timer-pill{width:30px;height:30px;padding:2px;}#s-board .timer-num{font-size:10px;}
#s-board .hzone{height:157px;margin-top:5px;}#s-board .hand-header{display:flex;justify-content:space-between;padding:0 18px;height:20px;align-items:center;}#s-board .hand-lbl,#s-board .hand-count{font:500 9px var(--fb);letter-spacing:.3px;color:var(--bd-ink2);text-transform:none;}#s-board .hand-scroll{height:135px;}#hand-scroll>[id^="hw"]{top:6px;}
#s-board .deck-tile{border:2px solid #fff;box-shadow:0 2px 5px #163c3520;}#s-board .deck-cnt,.pile-cnt{background:#35564f;font-size:9px;}#s-board .deck-tile:after{content:'Deck';position:absolute;top:-14px;left:0;right:0;text-align:center;font:500 8px var(--fb);color:var(--bd-ink2);}.discard-pile:after{content:'Discard';position:absolute;top:-14px;left:0;right:0;text-align:center;font:500 8px var(--fb);color:var(--bd-ink2);}.discard-pile.empty{border:1px dashed #a7bdb1;opacity:.7;}
#s-board .bench-row{position:relative;}#s-board .bench-row:before{content:'Bench';position:absolute;left:0;right:0;top:-14px;text-align:center;font:500 8px var(--fb);color:var(--bd-ink2);}#s-board .empty-active{border:1.5px dashed #92b2a0;background:#f2f7f080;}#s-board .empty-active-txt{font-size:11px;padding:12px;line-height:1.5;}#s-board .card.empty-slot,#s-board .card.locked-slot{border:1px dashed #a8bfb0;background:#f7faf680;}
#s-board .active-lbl{font-size:8px;font-weight:600;letter-spacing:.3px;padding:4px 9px;}#s-board .sup-lbl,#s-board .opp-sup-lbl{display:block;font:500 8px var(--fb);color:var(--bd-ink2);margin-bottom:4px;text-align:center;}#s-board .sup-slot{border:1px dashed #8faa99;background:#f7fbf499;}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card{border-width:2px;border-radius:8px;box-shadow:0 3px 7px #214e3626;}:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .cfoot{background:#24464b!important;}.card .type-strip{font-weight:600;font-size:8px;letter-spacing:.3px;}.card .wk-line{font-weight:500;}.card .cst b{font-size:23px;}.card .cst .pips{display:none;}.card .cst{background:#183b43d9;border-radius:6px;top:4px;right:4px;padding:1px 5px;}.card .cst b{-webkit-text-stroke:0;text-shadow:none;font-size:20px;}.cact .cst b{font-size:24px;}
#s-board .focus-dim,#s-board .card.grayed{opacity:.55;}#s-board .active-shine,#s-board .bench-shine,#s-board .sup-shine{animation:none!important;box-shadow:0 0 0 2px #3c937b,0 4px 12px #244e3622!important;}
@media(min-width:700px){.app-col{border-left:1px solid #dce5df;border-right:1px solid #dce5df;}.app-scroll{padding-top:30px;}}
@media(max-height:760px){.club-header{margin-bottom:18px;}.home-greeting h1{font-size:26px;margin-bottom:17px;}.pack-display{height:180px;}.pack-display .pack{width:108px;height:154px;}.pack-display:before{width:180px;height:180px;}.hero-caption p{margin-bottom:13px;}}
@media(max-width:360px){.app-scroll{padding:18px 16px;}.h-top .pill{font-size:10px;}.grid4{gap:8px;}.home-greeting h1{font-size:25px;}}
:root{--bw:56px;--bh:78px;--aw:100px;--ah:140px;--hh:140px;}
#s-board .hzone{height:174px;}
#s-board .hand-scroll{height:154px;}
.match-menu-button{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:38px;height:32px;border:1px solid var(--m-line);border-radius:12px;background:#f3f7f4;color:var(--m-ink2);letter-spacing:2px;cursor:pointer;z-index:2;}
#club-match-menu{margin:auto;width:calc(100% - 32px);max-width:380px;max-height:90dvh;overflow:auto;padding:26px;border:1px solid var(--m-line);border-radius:24px;background:#f6faf7;color:var(--m-ink);font:13px/1.6 var(--fb);box-shadow:0 20px 70px #12382d33;}
#club-match-menu::backdrop{background:#102f3b88;backdrop-filter:blur(5px);}
#club-match-menu h2{font-size:24px;letter-spacing:-.8px;margin-bottom:16px;}
#club-match-menu ol{padding-left:18px;margin-bottom:16px;}
#club-match-menu li{padding:5px 0;}
#club-match-menu p{margin-bottom:16px;}
#club-match-menu .btn{margin-top:12px;}
#club-match-menu small{display:block;color:var(--m-ink2);font-size:10px;margin-top:12px;text-align:center;}
.bd-arena{gap:8px;padding-top:12px;padding-bottom:8px;}
#card-actions{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px;width:100%;}
.card-action-hint{font:12px/1.6 var(--fb);color:var(--bd-ink2);}
#modal-overlay .msheet{background:#f7faf8;color:var(--m-ink);border:1px solid var(--m-line);border-radius:24px 24px 0 0;max-height:90dvh;overflow:auto;}
#modal-overlay .mname{font:700 23px/1.2 var(--fb);color:var(--m-ink);}
#modal-overlay .mtype,#modal-overlay .mstat-l{color:var(--m-ink2);font-family:var(--fb);}
#modal-overlay .mstat-v{color:var(--m-ink);font-family:var(--fb);}
#modal-overlay .mability{background:#e9f1eb;border:1px solid var(--m-line);border-radius:14px;}
#modal-overlay .mab-name{color:#247769;font:600 14px var(--fb);}
#modal-overlay .mab-text{color:var(--m-ink2);font:13px/1.6 var(--fb);}
#modal-overlay .mbtn{background:white;border:1px solid var(--m-line);color:var(--m-ink);font:600 13px var(--fb);border-radius:12px;min-height:44px;}
.pack.rivals>img{filter:hue-rotate(38deg) drop-shadow(4px 10px 8px #143b352b);}
.club-header{gap:10px;}.club-brand{flex:1;}.balance-button{display:flex;align-items:center;gap:5px;background:white;border:1px solid var(--m-line);border-radius:20px;padding:9px 12px;font:600 11px var(--fb);color:var(--m-ink);cursor:pointer;}
.collection-scope{border:0;background:none;color:var(--m-acc);font:500 11px var(--fb);padding:0 0 14px;min-height:32px;cursor:pointer;text-align:left;}
#dice-overlay.full{background:#18343bf5;}
#dice-overlay .field:before{background:#cedcd088;border-radius:18px;box-shadow:none;}
#dice-overlay .btn-cont{background:#247769;color:white;box-shadow:none;border:1px solid #75b8a960;border-radius:14px;font:600 14px var(--fb);letter-spacing:0;text-transform:none;min-height:48px;}
#dice-overlay .d-event-lbl{transform:none;background:none;font-size:42px;-webkit-text-stroke:0;text-shadow:none;}
#dice-overlay .d-dice-who,#dice-overlay .d-phase-label{font-weight:600;letter-spacing:.6px;}
#dice-overlay .dbox.winner{box-shadow:0 3px 0 #9ac4b9,0 0 0 2px #91c6b4;}
.ball-explainer{width:100%;color:#c6dcd4;font:11px/1.5 var(--fb);text-align:left;border:1px solid #b2d2c326;border-radius:12px;padding:10px 12px;margin:6px 0;}
.ball-explainer summary{cursor:pointer;min-height:24px;line-height:24px;}
.ball-explainer[open] summary{margin-bottom:8px;}
.ball-explainer .d-ladder{margin:0;}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}