/* Draft WARs mode (#draft screen in the main app). Uses the site's theme tokens from style.css, so every look applies here too. */
#draft{color:var(--text-primary); font:20px/1.25 'VT323',ui-monospace,monospace; padding-bottom:60px;}
#draft *{box-sizing:border-box;}
#draft [hidden]{display:none !important;}
.dw-wrap{max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:18px;}
#draft button, #draft input, #draft select, #draft textarea{font-family:inherit; font-size:inherit; color:inherit;}
#draft button{cursor:pointer;}
#draft button:focus-visible, #draft input:focus-visible, #draft select:focus-visible, #draft a:focus-visible{outline:2px solid var(--accent-cyan, var(--text-primary)); outline-offset:2px;}
#draft a{color:var(--accent-amber);}
#draft .num{font-variant-numeric:tabular-nums;}
#draft .muted{color:var(--text-muted);}
#draft .up{color:var(--success);} #draft .down{color:var(--danger);}
#draft h2:not(.section-head h2), #draft h3{font-family:'Press Start 2P',monospace; font-weight:400; margin:0; line-height:1.5; text-wrap:balance;}
#draft h2:not(.section-head h2){font-size:13px;} #draft h3{font-size:10px; color:var(--text-muted); letter-spacing:.04em;}
#draft p{margin:0; max-width:70ch;}

.dw-btn{background:var(--accent-amber); color:var(--on-accent, #170B0A); border:0; padding:7px 16px; font-size:20px; box-shadow:3px 3px 0 var(--border);}
.dw-btn:disabled{opacity:.45; cursor:not-allowed;}
.dw-btn.ghost{background:transparent; color:var(--text-primary); border:2px solid var(--border); box-shadow:none;}
.dw-btn.small{padding:3px 10px; font-size:18px;}
.dw-btn.warn{background:transparent; color:var(--text-primary); border:2px solid var(--border); box-shadow:none;}
.dw-btn.warn:hover{color:var(--danger); border-color:var(--danger);}

.dw-ticker{overflow:hidden; border-block:2px solid var(--border); white-space:nowrap; background:var(--bg-panel); min-height:34px;}
.dw-ticker > div{display:inline-block; padding:6px 0; animation:dwtick 50s linear infinite;}
.dw-ticker span.t{margin-right:28px;}
@keyframes dwtick{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* the ticker always scrolls (slowly), even with Motion off: it is the mode's live price board */
:root.no-motion .dw-ticker > div{animation:dwtick 60s linear infinite !important;}
.dw-ticker .t.up{color:var(--success, #3ad17a);}
.dw-ticker .t.down{color:var(--danger, #E8362B);}
.dw-ticker .t .ch{font-size:.9em;}
.dw-ticker:hover > div{animation-play-state:paused !important;}
.dw-banner{border:2px dashed var(--border); padding:10px 14px; color:var(--text-muted);}
.dw-banner b{color:var(--text-primary); font-weight:400;}

#dwMain{display:flex; flex-direction:column; gap:18px; min-width:0;}

.dw-panel{background:var(--bg-panel); border:2px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0;}
.dw-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.dw-between{justify-content:space-between;}
.dw-cols{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;}
.dw-kv{display:flex; justify-content:space-between; gap:10px; font-size:19px;}
.dw-kv > span:first-child{color:var(--text-muted);}
.dw-tag{display:inline-block; padding:0 8px; border:2px solid var(--border); font-size:17px; color:var(--text-muted);}
.dw-tag.free{border-color:var(--success); color:var(--success);}
.dw-tag.paid{border-color:var(--gold, #FFD24A); color:var(--gold, #FFD24A);}
.dw-tag.live{border-color:var(--accent-amber); color:var(--accent-amber);}
.dw-tag.done{border-color:var(--text-muted);}

.dw-hero{display:grid; grid-template-columns:1.3fr 1fr; gap:18px;}
.dw-big{font-family:'Press Start 2P',monospace; font-size:20px; line-height:1.55; text-shadow:3px 3px 0 var(--accent-amber);}
.dw-clock{display:flex; gap:8px; flex-wrap:wrap;}
.dw-clock div{background:var(--bg); border:2px solid var(--border); padding:6px 8px; text-align:center; min-width:58px;}
.dw-clock b{display:block; font-family:'Press Start 2P',monospace; font-size:14px; color:var(--gold, #FFD24A); font-weight:400;}
.dw-clock span{font-size:16px; color:var(--text-muted);}

.dw-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px;}
.dw-card{background:var(--bg-panel-alt); border:2px solid var(--border); padding:12px; display:flex; flex-direction:column; gap:6px; text-align:left;}
.dw-card:hover{border-color:var(--text-muted);}
.dw-card .nm{font-size:23px; overflow-wrap:anywhere;}
.dw-empty{border:2px dashed var(--border); padding:18px; color:var(--text-muted); text-align:center;}

.dw-draft{display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start;}
.dw-pool{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px;}
.dw-tok{background:var(--bg-panel-alt); border:2px solid var(--border); padding:9px; text-align:left; display:flex; flex-direction:column; gap:3px; position:relative; min-width:0;}
.dw-tok:hover:not(:disabled){border-color:var(--text-muted);}
.dw-tok.picked{border-color:var(--accent-amber); background:color-mix(in srgb, var(--accent-amber) 14%, var(--bg-panel-alt));}
.dw-tok.cap{border-color:var(--gold, #FFD24A); background:color-mix(in srgb, var(--gold, #FFD24A) 12%, var(--bg-panel-alt));}
.dw-tok .sym{font-family:'Press Start 2P',monospace; font-size:11px;}
.dw-tok .grp{font-size:16px; color:var(--text-muted);}
.dw-tok .badge{position:absolute; top:6px; right:8px; font-family:'Press Start 2P',monospace; font-size:9px; color:var(--gold, #FFD24A);}
.dw-tok:disabled{cursor:default;}
.dw-slots{display:flex; flex-direction:column; gap:8px;}
.dw-slot{border:2px dashed var(--border); padding:6px 10px; display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:42px;}
.dw-slot.filled{border-style:solid; background:var(--bg-panel-alt);}
.dw-slot button{background:none; border:2px solid var(--border); padding:0 8px; font-size:17px; color:var(--text-muted);}
.dw-slot button.on{border-color:var(--gold, #FFD24A); color:var(--gold, #FFD24A);}
.dw-rules{font-size:18px; display:flex; flex-direction:column; gap:3px;}
.dw-ok{color:var(--success);} .dw-bad{color:var(--danger);}

.dw-table{overflow-x:auto;}
#draft table{width:100%; border-collapse:collapse; font-size:20px; min-width:520px;}
#draft th{font-weight:400; color:var(--text-muted); text-align:left; padding:6px 8px; border-bottom:2px solid var(--border); font-size:16px; letter-spacing:.04em; text-transform:uppercase;}
#draft td{padding:5px 8px; border-bottom:1px solid var(--border); vertical-align:top;}
#draft td.r, #draft th.r{text-align:right;}
#draft tr.me td{background:color-mix(in srgb, var(--accent-amber) 16%, transparent);}
#draft tr.cut td{border-bottom:2px dashed var(--gold, #FFD24A);}
.dw-picks{display:flex; gap:5px; flex-wrap:wrap;}
.dw-picks i{font-style:normal; font-size:16px; border:1px solid var(--border); padding:0 5px;}
.dw-picks i.c{border-color:var(--gold, #FFD24A); color:var(--gold, #FFD24A);}
.dw-feeds{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px;}
.dw-feed{background:var(--bg-panel-alt); border:2px solid var(--border); padding:6px 10px; display:flex; justify-content:space-between; gap:6px; font-size:19px;}

.dw-form{display:flex; flex-direction:column; gap:10px;}
.dw-form label{display:flex; flex-direction:column; gap:4px; font-size:18px; color:var(--text-muted);}
.dw-form input, .dw-form select, .dw-form textarea{background:var(--bg); border:2px solid var(--border); color:var(--text-primary); padding:5px 8px; font-size:20px; width:100%; min-width:0;}
.dw-form textarea{min-height:70px; resize:vertical;}
.dw-form .inline{flex-direction:row; align-items:center; gap:8px; color:var(--text-primary);}
.dw-form .inline input{width:auto;}
.dw-form .inline input[type="checkbox"]{flex:none; width:22px; height:22px; margin:0; accent-color:var(--accent-amber); cursor:pointer;}
.dw-grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.dw-ticks{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px;}
.dw-ticks label{flex-direction:row; align-items:center; gap:6px; border:2px solid var(--border); padding:3px 8px; color:var(--text-primary); background:var(--bg-panel-alt);}
.dw-ticks label.on{border-color:var(--accent-amber);}
.dw-ticks input{width:auto;}
.dw-note{font-size:18px; color:var(--text-muted);}
.dw-good{border:2px solid var(--success); color:var(--success); padding:6px 10px;}
.dw-warnbox{border:2px solid var(--danger); color:var(--danger); padding:6px 10px;}
#draft ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px;}
#draft code{font-family:inherit; background:var(--bg); padding:0 5px; border:1px solid var(--border);}
.dw-steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px;}
.dw-steps div{background:var(--bg); border:2px solid var(--border); padding:10px; font-size:18px;}
.dw-steps div b{display:block; color:var(--gold, #FFD24A); font-weight:400;}
.dw-foot{font-size:17px; color:var(--text-muted); margin:0;}

@media (max-width:820px){
  .dw-hero, .dw-draft, .dw-cols, .dw-grid2{grid-template-columns:1fr;}
  .dw-big{font-size:16px;}
}

/* Host a league: the coin picker (every coin with a live price feed) and its summary */
.dw-pickwrap{display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:16px; align-items:start; margin-top:18px;}
@media (max-width:860px){ .dw-pickwrap{grid-template-columns:minmax(0,1fr);} }
.dw-picker{display:flex; flex-direction:column; gap:10px; min-width:0;}
.dw-search{flex:1 1 220px; min-width:0;}
.dw-chips{gap:6px;}
.dw-chip{background:var(--bg-panel-alt); border:2px solid var(--border); color:var(--text-muted); padding:2px 10px; font-size:19px; white-space:nowrap;}
.dw-chip.on{background:var(--accent-amber); border-color:var(--accent-amber); color:var(--on-accent, #170B0A);}
.dw-chip .n{opacity:.7; margin-left:8px; font-size:16px;}
.dw-glabel{font-family:'Press Start 2P',monospace; font-size:8px; color:var(--text-muted); letter-spacing:.06em;}
.dw-cgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(165px, 1fr)); gap:6px; max-height:560px; overflow-y:auto; border-top:2px solid var(--border); padding-top:10px;}
.dw-ctile{display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:8px; align-items:center; padding:5px 8px; background:var(--bg-panel-alt); border:2px solid var(--border); color:var(--text-primary); cursor:pointer;}
.dw-ctile input{grid-row:span 2; width:18px !important; height:18px; margin:0; accent-color:var(--accent-amber);}
.dw-ctile .sym{font-size:22px; line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dw-ctile .tg{text-align:right; line-height:1;}
.dw-ctile .meta{font-size:15px; color:var(--text-muted); display:flex; gap:6px; align-items:center; white-space:nowrap; overflow:hidden;}
.dw-ctile .rk{font-size:15px; color:var(--text-muted); text-align:right;}
.dw-ctile.on{border-color:var(--accent-amber); background:color-mix(in srgb, var(--accent-amber) 14%, var(--bg-panel-alt));}
.dw-ctile .dot{width:7px; height:7px; border-radius:50%; background:var(--success); flex:none;}
.dw-ctile .dot.watch{background:var(--accent-magenta);}
.dw-ctag{font-size:14px; padding:0 5px; border:1px solid var(--border); color:var(--text-muted);}
.dw-ctag.meme{color:var(--accent-magenta); border-color:var(--accent-magenta);}
.dw-ctag.own{color:var(--accent-amber); border-color:var(--accent-amber);}
.dw-sumbox{position:sticky; top:12px; display:flex; flex-direction:column; gap:10px;}
.dw-big{font-family:'Press Start 2P',monospace; font-size:22px;}
.dw-count{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.dw-count .dw-n{font-family:'Press Start 2P',monospace; font-size:24px; line-height:1.3; color:var(--text-primary); text-shadow:none;}
.dw-count .dw-of{font-family:'VT323',monospace; font-size:20px; line-height:1.1; color:var(--text-muted);}
.dw-share{display:flex; flex-direction:column; gap:4px;}
.dw-share input[type=range]{width:100%; accent-color:var(--accent-amber);}
.dw-share b{color:var(--accent-amber);}
.dw-meter{height:10px; background:var(--bg-panel-alt); border:2px solid var(--border); position:relative;}
.dw-meter i{position:absolute; inset:0 auto 0 0; background:var(--accent-amber);}
.dw-meter b{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--text-muted);}
.dw-info{color:var(--text-muted);}
.dw-picked{display:flex; flex-wrap:wrap; gap:4px; max-height:180px; overflow-y:auto;}
.dw-pk{display:inline-flex; align-items:center; gap:2px; background:var(--bg-panel-alt); border:1px solid var(--border); padding:0 2px 0 7px; font-size:17px;}
.dw-pk button{background:none; border:0; color:var(--text-muted); padding:0 4px;}
.dw-pk button:hover{color:var(--danger);}
.dw-poolsearch{max-width:320px;}

/* hosting tiers table (Host a league) */
.dw-tiers { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 10px; }
.dw-tiers th, .dw-tiers td { text-align: left; padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.dw-tiers th { font-size: 11px; letter-spacing: .06em; opacity: .7; }
#draft .dw-tiers th { font-size: 10px; padding: 3px 4px; letter-spacing: 0; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.dw-tablewrap { overflow-x: auto; max-width: 100%; }
#draft table.dw-tiers { min-width: 0; }
#draft .dw-tiers td { white-space: nowrap; font-size: 15px; padding: 4px; }
#draft .dw-tiers td:nth-child(2) { white-space: normal; }
#draft .dw-sum h3.dw-sep { margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--border); }
#draft .dw-sum .dw-btn.ghost { font-size: 13px; padding: 6px 10px; margin-top: 8px; }
.dw-tiers tr.me td { color: var(--accent, #5BC0EB); font-weight: 700; }
.dw-kv.dw-need > span:last-child{color:var(--accent-amber);}

/* The main view, laid out like Up or Down: leagues on the left, the open league in the middle, your team docked on the right.
   A phone shows the list first (data-phone=list), then the league with a "← Leagues" button. */
.dw-c{display:grid; grid-template-columns:250px minmax(0,1fr) 320px; grid-template-areas:"list head dock" "list body dock"; grid-template-rows:auto 1fr; gap:14px; align-items:start;}
.dw-list{grid-area:list; display:flex; flex-direction:column; gap:10px; min-width:0;}
.dw-c .dw-head{grid-area:head;} .dw-c .dw-body{grid-area:body;} .dw-c .dw-dock{grid-area:dock;}
.dw-c .dw-panel{border-radius:14px; box-shadow:0 5px 0 color-mix(in srgb, var(--bg) 70%, #000), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);}
#draft .dw-k{font-family:'Press Start 2P',monospace; font-size:8px; line-height:1.6; color:var(--text-muted); letter-spacing:.06em;}
#draft .dw-k.hi{color:var(--accent-gold, #F5C542);}
.dw-fine{font-size:16px; color:var(--text-muted);}
#draft .dw-lg{width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; text-align:left; padding:10px 12px 8px; border-radius:14px;
  background:linear-gradient(180deg, var(--bg-panel-alt), var(--bg-panel)); border:2px solid var(--border); box-shadow:0 5px 0 color-mix(in srgb, var(--bg) 70%, #000); transition:transform .12s, box-shadow .12s, border-color .12s;}
#draft .dw-lg:hover{transform:translateY(-2px);}
#draft .dw-lg:active{transform:translateY(3px); box-shadow:0 2px 0 color-mix(in srgb, var(--bg) 70%, #000);}
#draft .dw-lg.on{border-color:var(--accent-gold, #F5C542); box-shadow:0 5px 0 color-mix(in srgb, var(--accent-gold, #F5C542) 35%, #000), 0 0 18px color-mix(in srgb, var(--accent-gold, #F5C542) 35%, transparent);}
#draft .dw-lg.old{opacity:.72;}
.dw-lg .nm{font-family:'Press Start 2P',monospace; font-size:9px; line-height:1.6; overflow-wrap:anywhere;}
.dw-lg .pot{font-size:18px; color:var(--accent-gold, #F5C542); text-align:right; white-space:nowrap;}
.dw-lg .s{font-size:16px; color:var(--text-muted);} .dw-lg .r{text-align:right; white-space:nowrap;}
.dw-lg .st{grid-column:1/-1; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.dw-lg .dw-in{grid-column:1/-1; font-size:16px; color:var(--success);}
.dw-stt{font-family:'Press Start 2P',monospace; font-size:7px; padding:3px 6px; border-radius:6px; border:1px solid currentColor;}
.dw-stt.draft{color:var(--accent-gold, #F5C542);} .dw-stt.run{color:var(--success);} .dw-stt.done{color:var(--text-muted);}
#draft .dw-name{font-family:'Press Start 2P',monospace; font-size:14px; line-height:1.5; color:var(--text-primary); letter-spacing:0; overflow-wrap:anywhere;}
.dw-top{align-items:flex-start; flex-wrap:nowrap;} .dw-titles{display:flex; flex-direction:column; gap:4px; min-width:0;}
.dw-facts{display:grid; grid-template-columns:repeat(auto-fit, minmax(104px, 1fr)); gap:8px;}
.dw-fact{background:var(--bg-panel-alt); border:1px solid var(--border); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:4px; min-width:0;}
.dw-fact b{font-weight:400; font-size:20px; line-height:1.05; overflow-wrap:anywhere;}
.dw-fact b.gold{color:var(--accent-gold, #F5C542);} .dw-fact b.hi{color:var(--accent-amber);}
.dw-needs{color:var(--accent-amber);}
.dw-backm{display:none !important; align-self:flex-start;}
.dw-chart{width:100%; height:200px; display:block; background:color-mix(in srgb, var(--bg) 85%, #000); border:1px solid var(--border); border-radius:10px;}
.dw-prizes{display:flex; flex-direction:column; gap:8px;}
.dw-podium{display:flex; align-items:flex-end; gap:4px; height:86px;}
.dw-podium .p{flex:1; min-width:0; border-radius:6px 6px 2px 2px; background:color-mix(in srgb, var(--text-muted) 35%, var(--bg-panel-alt)); display:flex; align-items:flex-start; justify-content:center; overflow:hidden;}
.dw-podium .p b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:7px; padding-top:5px; color:#000; white-space:nowrap;}
.dw-podium .p:not(.p1):not(.p2):not(.p3) b{color:var(--text-primary);}
.dw-podium .p1{background:linear-gradient(180deg,#ffe28a,#ffb800); box-shadow:0 0 14px rgba(255,190,40,.4);}
.dw-podium .p2{background:linear-gradient(180deg,#f1f1f7,#a9a9be);}
.dw-podium .p3{background:linear-gradient(180deg,#ffb98a,#c96a2b);}
.dw-mtabs{display:flex; gap:14px; border-bottom:1px solid var(--border); padding-bottom:6px; flex-wrap:wrap;}
#draft .dw-mtab{background:none; border:0; padding:0 0 5px; font-family:'Press Start 2P',monospace; font-size:8px; color:var(--text-muted); border-bottom:3px solid transparent;}
#draft .dw-mtab.on{color:var(--text-primary); border-bottom-color:var(--accent-gold, #F5C542);}
.dw-tabbody{display:flex; flex-direction:column; gap:8px; min-width:0;}
.dw-board{display:flex; flex-direction:column; gap:6px;}
.dw-trow{display:grid; grid-template-columns:28px minmax(0,1fr) minmax(40px,70px) auto; gap:10px; align-items:center; padding:6px 10px; border-radius:10px; background:var(--bg-panel-alt); border:1px solid transparent;}
.dw-trow.me{border-color:var(--accent-amber); background:color-mix(in srgb, var(--accent-amber) 12%, var(--bg-panel-alt));}
.dw-trow.cut{box-shadow:0 3px 0 -1px var(--accent-gold, #F5C542);}
.dw-rk{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:'Press Start 2P',monospace; font-size:9px; background:var(--bg); border:1px solid var(--border);}
.dw-rk.g{background:linear-gradient(180deg,#ffe28a,#ffb800); color:#000; border:0;} .dw-rk.s{background:linear-gradient(180deg,#f1f1f7,#a9a9be); color:#000; border:0;} .dw-rk.b{background:linear-gradient(180deg,#ffb98a,#c96a2b); color:#000; border:0;}
.dw-tn{display:flex; flex-direction:column; gap:3px; min-width:0;}
.dw-tn .who{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dw-cs{display:flex; flex-wrap:wrap; gap:3px;}
.ud-coinb.dw-cb{grid-row:auto; width:22px; height:22px; font-size:7px; flex:none;}
.dw-cs .dw-cb{width:18px; height:18px; font-size:6px; box-shadow:none;}
.dw-cs .dw-cb.cap{outline:2px solid var(--accent-gold, #F5C542); outline-offset:1px;}
.dw-perf{height:8px; border-radius:4px; background:var(--bg); overflow:hidden;}
.dw-perf i{display:block; height:100%; background:var(--success); box-shadow:0 0 8px var(--success);}
.dw-perf.neg i{background:var(--danger); box-shadow:0 0 8px var(--danger);}
.dw-sc{text-align:right; white-space:nowrap; display:flex; flex-direction:column; align-items:flex-end; line-height:1.05;} .dw-pz{color:var(--accent-gold, #F5C542); font-size:16px;}
.dw-feeds .dw-feed{align-items:center; border-radius:10px;}
.dw-feed .sy{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;}
.dw-feed.mine{border-color:var(--accent-gold, #F5C542);}

.dw-dock{border-top:3px solid var(--accent-gold, #F5C542) !important; position:sticky; top:calc(env(safe-area-inset-top, 0px) + 12px); gap:10px !important;}
.dw-dock .dw-slots{gap:6px;}
.dw-dock .dw-slot{border-radius:10px; min-height:38px; padding:4px 8px; justify-content:flex-start;}
.dw-dock .dw-slot .sym{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;}
.dw-dock .dw-slot.cap{border-color:var(--accent-gold, #F5C542); box-shadow:0 0 12px color-mix(in srgb, var(--accent-gold, #F5C542) 30%, transparent);}
#draft .dw-capb{background:none; border:1px solid var(--border); border-radius:8px; padding:0 8px; font-size:16px; color:var(--text-muted); white-space:nowrap;}
#draft .dw-capb.on{border-color:var(--accent-gold, #F5C542); color:var(--accent-gold, #F5C542);}
#draft .dw-rm{background:none; border:0; color:var(--text-muted); padding:0 4px; font-size:20px;}
#draft .dw-rm:hover{color:var(--danger);}
.dw-dock .dw-rules{font-size:17px;}
.dw-find{flex-wrap:nowrap; gap:8px;}
.dw-find input, .dw-find select{background:var(--bg); border:2px solid var(--border); border-radius:10px; padding:4px 8px; min-width:0; font-size:19px;}
.dw-find input{flex:1;} .dw-find select{flex:none; max-width:120px;}
.dw-dock .dw-chips{gap:5px;}
#draft .dw-dock .dw-chip{border-radius:8px; font-size:17px; padding:1px 8px;}
.dw-dock .dw-pool{grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; max-height:360px; overflow-y:auto; padding:2px 4px 2px 0;}
#draft .dw-dock .dw-tok{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:8px; row-gap:0; align-items:center; border-radius:10px; padding:6px 8px;}
.dw-dock .dw-tok .dw-cb{grid-row:span 2; width:28px; height:28px; font-size:8px;}
.dw-dock .dw-tok .sym{font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dw-dock .dw-tok .ch{font-size:16px; line-height:1.1;}
.dw-dock .dw-tok .grp{grid-column:2; font-size:15px;}
.dw-dock .dw-tok .badge{top:4px; right:6px;}
.dw-dock .dw-tok.cap{box-shadow:0 0 12px color-mix(in srgb, var(--gold, #FFD24A) 35%, transparent);}
#draft .dw-enter{display:flex; flex-direction:column; align-items:center; gap:4px; border:0; border-radius:14px; padding:12px 8px 10px; position:relative; overflow:hidden;
  font-family:'Press Start 2P',monospace; font-size:12px; color:#000; background:linear-gradient(180deg, color-mix(in srgb, var(--success) 55%, #fff), var(--success) 50%);
  box-shadow:0 6px 0 color-mix(in srgb, var(--success) 50%, #000), 0 0 22px color-mix(in srgb, var(--success) 35%, transparent);}
#draft .dw-enter small{font-family:'VT323',monospace; font-size:17px;}
#draft .dw-enter:active:not(:disabled){transform:translateY(5px); box-shadow:0 1px 0 #000;}
#draft .dw-enter:disabled{opacity:.5; cursor:not-allowed; filter:saturate(.4);}
#draft .dw-enter:not(:disabled)::before{content:''; position:absolute; top:-60%; left:-40%; width:36%; height:220%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform:rotate(20deg); animation:udShine 3.4s ease-in-out infinite;}
.dw-me{display:grid; grid-template-columns:78px minmax(0,1fr); gap:12px; align-items:center;}
.dw-ring .fg.paid{stroke:var(--success); filter:drop-shadow(0 0 5px var(--success));}
.dw-mes{display:flex; flex-direction:column; gap:4px;}
.dw-bignum{font-family:'Press Start 2P',monospace; font-size:18px;}
.dw-myc{display:flex; flex-direction:column; gap:5px;}
.dw-mycr{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; padding:4px 8px; border-radius:10px; background:var(--bg-panel-alt);}
.dw-mycr.cap{box-shadow:inset 0 0 0 1px var(--accent-gold, #F5C542);}
.dw-x2{color:var(--accent-gold, #F5C542);}
.dw-ifnow{display:flex; flex-direction:column; gap:4px; padding:8px 10px; border-radius:10px; border:1px dashed var(--border);}
.dw-ifnow b{font-weight:400; font-size:20px;} .dw-ifnow.up{border-color:var(--success);} .dw-ifnow.up b{color:var(--success);}
:root.no-motion #draft .dw-enter::before{animation:none;}
@media (prefers-reduced-motion:reduce){ #draft .dw-enter::before{animation:none;} #draft .dw-lg{transition:none;} }
@media (max-width:1000px){ .dw-lg .s{font-size:15px;} .dw-c{grid-template-columns:220px minmax(0,1fr); grid-template-areas:"list head" "list dock" "list body"; grid-template-rows:auto;} .dw-dock{position:static;} }
@media (max-width:760px){
  .dw-c{grid-template-columns:minmax(0,1fr); grid-template-areas:"list" "head" "dock" "body";}
  .dw-c[data-phone=list] .dw-head, .dw-c[data-phone=list] .dw-body, .dw-c[data-phone=list] .dw-dock{display:none;}
  .dw-c[data-phone=league] .dw-list{display:none;}
  .dw-backm{display:inline-flex !important;}
  .dw-dock{border-radius:22px 22px 14px 14px !important;}
  .dw-chart{height:160px;}
  .dw-trow{grid-template-columns:28px minmax(0,1fr) auto;}
  .dw-trow > :nth-child(3){display:none;}
}

/* ---- long or short (features 8): the ▲ / ▼ switch beside a picked coin, ▼ marks on the board, the ▲▼ tag on leagues */
.dw-side{display:inline-flex; flex:none; border:2px solid var(--border); border-radius:9px; overflow:hidden; vertical-align:middle}
.dw-slot .dw-side button, .dw-side button{width:36px; height:32px; padding:0; border:0; border-radius:0; background:var(--bg); color:var(--text-muted); font:14px/1 system-ui, sans-serif; cursor:pointer}
.dw-side button + button{border-left:2px solid var(--border)}
.dw-side button.on:first-child{background:var(--success, #33C17A); color:#06180e}
.dw-side button.on:last-child{background:var(--danger, #E8362B); color:#fff}
.dw-side button:focus-visible{outline:2px solid var(--accent-gold, #F5C542); outline-offset:-2px}
.dw-dock .dw-slot .sym{flex:0 0 64px}
.dw-dock .dw-slot .dw-side + .dw-capb{padding:0 6px}
.dw-dock .dw-slot:has(.dw-side){gap:6px}
.dw-dock .dw-slot .dw-capb{margin-left:auto}
.dw-dock .dw-slot.sh{border-color:var(--danger, #E8362B)}
.dw-cb{position:relative}
.dw-cb.sh{box-shadow:0 0 0 2px var(--danger, #E8362B)}
.dw-cb.sh::after{content:'▼'; position:absolute; right:-5px; bottom:-6px; font:9px/1 system-ui, sans-serif; color:var(--danger, #E8362B); text-shadow:0 0 3px #000}
.dw-lstag{font-family:'Press Start 2P', monospace; font-size:7px; line-height:1; padding:4px 5px; border-radius:5px; border:1px solid color-mix(in srgb, var(--danger, #E8362B) 55%, transparent); color:var(--text)}
.dw-sidetag{display:inline-block; min-width:16px; margin-right:5px; font:12px/1 system-ui, sans-serif}
.dw-sidetag.L{color:var(--success, #33C17A)} .dw-sidetag.S{color:var(--danger, #E8362B)}
.dw-coinmv{display:block; font-size:13px; color:var(--text-muted); white-space:nowrap}