/* TodoPorras Design V3 — visual hierarchy, clarity and mobile-first polish */
:root{
  --bg:#07100c;--panel:#0d1813;--panel2:#122119;--line:#22362b;--text:#f7faf8;--muted:#9aada3;--brand:#67e8ad;--danger:#ff9d9d;
  --tp-bg:#07100c;--tp-panel:#0d1813;--tp-panel-2:#122119;--tp-panel-3:#172b21;--tp-line:#22362b;--tp-text:#f7faf8;--tp-muted:#9aada3;--tp-green:#67e8ad;--tp-green-2:#43cf91;--tp-warn:#f2bf61;--tp-danger:#ff9292;--tp-blue:#86cfff;
  --tp-radius:18px;--tp-radius-sm:13px;--tp-shadow:0 24px 70px rgba(0,0,0,.28);--tp-shadow-soft:0 10px 32px rgba(0,0,0,.16);
}
*{scrollbar-width:thin;scrollbar-color:#314a3d transparent}
html{background:var(--tp-bg)}
body{background:
  radial-gradient(circle at 82% -8%,rgba(103,232,173,.11),transparent 25rem),
  radial-gradient(circle at 8% 26%,rgba(52,114,81,.08),transparent 30rem),
  linear-gradient(180deg,#08130e 0,#07100c 35%,#060e0a 100%);line-height:1.45}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 72%)}
button,input,select{font:inherit}button{transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease,opacity .16s ease}button:not(:disabled):active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(103,232,173,.24);outline-offset:2px;border-color:var(--brand)!important}
.btn,.tp-btn{min-height:42px;border-radius:12px}.btn.primary,.tp-btn.primary{box-shadow:0 8px 24px rgba(64,205,141,.16)}
.btn.primary:hover,.tp-btn.primary:hover{filter:brightness(1.045)}
.input,.select{min-height:46px;border-color:#294034;background:#09150f}.input:focus,.select:focus{box-shadow:0 0 0 3px rgba(103,232,173,.09)}
.notice{border:1px solid rgba(103,232,173,.16)}.notice.err{border-color:rgba(255,146,146,.18)}

/* Legacy shell used by builder / gameplay / pool admin */
.wrap{max-width:1320px;padding:22px 28px 80px}.top{min-height:58px;margin-bottom:22px;padding:6px 0 15px;border-bottom:1px solid rgba(255,255,255,.055)}
.top .brand{font-size:23px;letter-spacing:-.04em}.top .brand:before{content:"TP";display:inline-grid;place-items:center;width:31px;height:31px;margin-right:10px;border-radius:10px;background:var(--brand);color:#052116;font-size:10px;letter-spacing:.04em;vertical-align:middle;box-shadow:0 7px 22px rgba(60,202,137,.15)}
.top>.row>.muted{font-size:12px}.hero{padding:22px 0 24px}.hero h1{font-size:clamp(31px,4vw,45px);line-height:1.02;max-width:800px}.card{border-color:var(--tp-line);border-radius:var(--tp-radius);background:linear-gradient(180deg,rgba(16,30,23,.96),rgba(12,24,18,.96));box-shadow:0 1px 0 rgba(255,255,255,.018) inset}

/* App shell */
.tp-shell-v2{grid-template-columns:222px minmax(0,1fr);min-height:100vh}
.tp-sidebar{padding:22px 14px 18px;background:rgba(6,14,10,.92);border-right-color:rgba(255,255,255,.06);box-shadow:14px 0 50px rgba(0,0,0,.08)}
.tp-brand-v2{padding:2px 10px 25px;font-size:19px}.tp-brand-mark{width:32px;height:32px;border-radius:10px;box-shadow:0 8px 22px rgba(72,216,150,.16)}
.tp-mode-switch{margin:0 5px 20px;border-color:#21362a;background:#08130e;padding:3px}.tp-mode-switch button{font-size:12px;padding:8px}.tp-mode-switch button.active{background:#183024;color:#fff}
.tp-nav{gap:4px}.tp-nav-item{min-height:43px;padding:10px 11px;border-radius:12px;font-size:13px}.tp-nav-item span{font-size:16px}.tp-nav-item.active{background:linear-gradient(90deg,rgba(103,232,173,.14),rgba(103,232,173,.06));color:#8ff3c2;box-shadow:inset 3px 0 0 var(--brand)}
.tp-sidebar-foot{border-top-color:rgba(255,255,255,.06)}.tp-user-card{border-radius:12px;padding:7px}.tp-user-card:hover{background:rgba(255,255,255,.025)}.tp-avatar{background:linear-gradient(145deg,#83f2c2,#4dce91)}
.tp-main-v2{width:min(1220px,100%);padding:32px 38px 84px;position:relative}
.tp-page-head{align-items:center;margin-bottom:24px}.tp-page-head h1{font-size:clamp(31px,3.3vw,43px);line-height:1.02;margin-top:5px}.tp-page-head p{font-size:14px;max-width:610px}.tp-kicker{letter-spacing:.15em;font-size:10px}
.tp-head-actions .tp-btn{min-height:44px;padding:10px 16px}

/* Player: action first */
.tp-focus-card{position:relative;overflow:hidden;border-radius:22px;padding:25px 27px;margin-bottom:14px;background:linear-gradient(125deg,#173d2b 0,#10281d 55%,#0d1d16 100%);border-color:#31684c;box-shadow:0 22px 55px rgba(0,0,0,.20)}
.tp-focus-card:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-90px;top:-120px;background:radial-gradient(circle,rgba(103,232,173,.16),transparent 65%);pointer-events:none}.tp-focus-card h2{font-size:clamp(23px,3vw,30px);margin:6px 0}.tp-focus-card p{font-size:13px}.tp-focus-card .tp-btn.primary{padding:12px 18px;min-width:128px}.tp-focus-progress strong{font-size:29px}
.tp-metrics{gap:10px;margin:14px 0 27px}.tp-metric{border-radius:14px;padding:14px 16px;background:rgba(13,25,19,.72);border-color:#20352a}.tp-metric span{font-size:10px;text-transform:uppercase;letter-spacing:.07em}.tp-metric strong{font-size:24px;margin-top:5px}
.tp-section{margin-top:27px}.tp-section-head{margin-bottom:12px}.tp-section-head h2{font-size:19px}.tp-section-head p{font-size:12px}
.tp-card-list{gap:11px}.tp-pool-card{position:relative;border-radius:17px;padding:17px;background:linear-gradient(160deg,#0f1d16,#0b1711);border-color:#21362b;box-shadow:var(--tp-shadow-soft)}.tp-pool-card:hover{transform:translateY(-2px);border-color:#3b5f4b;box-shadow:0 16px 42px rgba(0,0,0,.21)}.tp-pool-card h3{font-size:18px;margin:9px 0 2px}.tp-pool-card p{font-size:12px}.tp-pool-meta{margin:16px 0 8px}.tp-pool-foot{border-top:1px solid rgba(255,255,255,.045);padding-top:12px;margin-top:13px}.tp-round-btn{width:35px;height:35px;border-radius:11px}.tp-progress,.tp-mini-progress{background:#16271e}.tp-progress{height:6px}
.tp-status{padding:4px 8px;font-size:9px;letter-spacing:.08em}.tp-status.good{background:rgba(103,232,173,.09)}.tp-status.warn{background:rgba(242,191,97,.08)}

/* Admin home */
.tp-metrics.four{margin-bottom:24px}.tp-admin-grid{grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);gap:12px}.tp-panel{border-radius:17px;border-color:#21362b;background:linear-gradient(165deg,#0e1c15,#0b1711);box-shadow:var(--tp-shadow-soft)}
.tp-action-row{min-height:58px;border:1px solid transparent;background:#0a1610;border-radius:12px}.tp-action-row:hover{border-color:#2d4939;background:#102018}.tp-action-icon{border:1px solid rgba(255,255,255,.045)}
.tp-economic>div{border:1px solid rgba(255,255,255,.04);background:#09150f}.tp-economic strong{font-size:22px}
.tp-admin-pools{gap:7px}.tp-admin-pool-row{grid-template-columns:minmax(210px,1.75fr) .58fr .8fr .65fr .88fr auto;gap:14px;border-radius:14px;padding:13px 14px;background:#0d1913;border-color:#20342a}.tp-admin-pool-row:hover{border-color:#345541;background:#0f1e17}.tp-admin-pool-main h3{font-size:14px}.tp-admin-stat strong{font-size:12px}.tp-icon-btn{width:35px;height:35px;border-radius:10px}.tp-filter-pills{gap:6px}.tp-filter-pills button{font-size:12px;padding:7px 10px;cursor:pointer}
.tp-admin-promo{border-radius:16px;background:linear-gradient(125deg,rgba(41,94,66,.42),rgba(12,25,18,.8))}

/* Builder: make choices look like a guided product flow */
#builderBody>.grid.g3,#builderBody .tp-template-grid{gap:12px}.templateBtn,.tp-template-card{min-height:150px!important;border-radius:18px!important;position:relative;overflow:hidden!important}.templateBtn:hover,.tp-template-card:hover{transform:translateY(-2px);border-color:#426a53!important}.templateBtn strong,.tp-template-card strong{font-size:17px}.templateBtn p,.tp-template-card p{line-height:1.45}.fixture{border-color:#23382d;background:#0a1610;border-radius:13px}.fixture:hover{border-color:#365745}.tabs{gap:2px;overflow:auto}.tab{white-space:nowrap;font-weight:750}

/* Gameplay: sports-ticket feel with stronger selection states */
.tp-gameplay-shell{max-width:1210px;padding:22px 24px 96px}.tp-gameplay-head{margin:14px 0 20px;align-items:center}.tp-gameplay-head h1{font-size:clamp(30px,4vw,43px);line-height:1.04}.tp-gameplay-layout{grid-template-columns:minmax(0,1.7fr) minmax(255px,.62fr);gap:14px}.tp-gameplay-main{gap:12px}.tp-gameplay-aside{gap:10px;top:16px}.tp-fixture-group,.tp-question-card,.tp-progress-card,.tp-round-state,.tp-season-card{border-color:#21372b;border-radius:17px;background:linear-gradient(165deg,#0e1b15,#0b1711);box-shadow:var(--tp-shadow-soft)}
.tp-fixture-head{padding:14px 16px;background:linear-gradient(90deg,rgba(103,232,173,.045),transparent);border-bottom-color:#21372b}.tp-fixture-title strong{font-size:14px}.tp-fixture-title small{font-size:11px}.tp-question-row{padding:15px 16px;border-bottom-color:#20342a}.tp-question-row-head{margin-bottom:10px}.tp-question-row-head strong{font-size:13px}.tp-pick-three{gap:7px}.tp-pick-three span,.tp-team-pick span{min-height:48px;border-radius:11px;background:#09150f;border-color:#294033}.tp-pick-three span:hover,.tp-team-pick span:hover{border-color:#426651;background:#0e1d16}.tp-pick-three input:checked+span,.tp-team-pick input:checked+span{border-color:#67e8ad;background:linear-gradient(145deg,rgba(103,232,173,.18),rgba(103,232,173,.09));box-shadow:0 0 0 1px rgba(103,232,173,.10) inset}.tp-score-grid input{font-size:22px}.tp-save-dock{bottom:14px;border-radius:15px;border-color:#3d7356;background:rgba(8,20,14,.94);box-shadow:0 18px 50px rgba(0,0,0,.35)}.tp-save-dock .tp-btn.primary{min-width:128px}.tp-gameplay-stat{padding:14px}.tp-gameplay-stat strong{font-size:25px}.tp-board-row,.tp-race-game,.tp-locked-value{background:#09150f}.tp-race-hero{border-radius:18px;background:linear-gradient(125deg,#183b2b,#0f241a)}

/* Pool admin detail: clearer command center */
.tp-pool-admin-v3{max-width:1210px;padding:20px 24px 100px}.tp-pool-admin-head{align-items:center;margin:14px 0 20px}.tp-pool-admin-head h1{font-size:clamp(30px,4vw,43px);line-height:1.04;margin:6px 0}.tp-admin-v3-actions .tp-btn{min-height:43px}.tp-admin-v3-metrics{gap:9px;margin-bottom:14px}.tp-admin-v3-metric{border-radius:14px;padding:14px 15px;background:#0d1a14;border-color:#21362b}.tp-admin-v3-metric span{font-size:9px;letter-spacing:.08em}.tp-admin-v3-metric strong{font-size:23px}.tp-admin-round-banner{border-radius:15px;padding:14px 16px;background:linear-gradient(125deg,#173b2a,#0f251a);border-color:#35684c}
.tp-admin-v3-tabs{position:sticky;top:0;z-index:12;margin:18px 0 16px;padding:5px 3px 6px;background:rgba(7,16,12,.92);backdrop-filter:blur(14px);border-bottom-color:#22362b}.tp-admin-v3-tab{border:1px solid transparent;border-radius:10px;padding:9px 11px;font-size:12px}.tp-admin-v3-tab.active{border-color:#315642;background:#13271d;color:#8df0bf}.tp-admin-v3-body{gap:12px}.tp-admin-v3-grid{gap:11px}.tp-admin-v3-panel{border-radius:16px;background:linear-gradient(165deg,#0e1b15,#0b1711);border-color:#21362b}.tp-admin-v3-table-wrap{border-radius:14px;border-color:#21362b;background:#0c1812}.tp-admin-v3-table th{position:sticky;top:0;z-index:2;background:#09150f;color:#9fb0a7}.tp-admin-v3-table tbody tr:hover{background:rgba(103,232,173,.025)}.tp-admin-v3-table th,.tp-admin-v3-table td{padding:11px 12px;border-bottom-color:#1d3126}.tp-admin-v3-fixture,.tp-block-row,.tp-admin-rank-row,.tp-admin-progression-row,.tp-admin-readonly{background:#09150f}.tp-admin-settings-card{background:#0d1913;border-color:#21362b}

/* Login */
.login{max-width:430px;margin:9vh auto;border-radius:23px;padding:28px;background:linear-gradient(155deg,#102019,#0a1510);box-shadow:0 30px 90px rgba(0,0,0,.35)}.login>.brand{font-size:25px}.login h1{font-size:31px;letter-spacing:-.04em;margin-top:25px}.login .btn{min-width:118px}

/* Loading feels intentional instead of frozen */
.boot{position:relative;margin:18vh auto;text-align:center}.boot:before{content:"";display:block;width:34px;height:34px;margin:0 auto 16px;border:3px solid #20372b;border-top-color:var(--brand);border-radius:50%;animation:tpSpin .8s linear infinite}@keyframes tpSpin{to{transform:rotate(360deg)}}
.tp-pool-admin-head h1:has(+ p),.tp-gameplay-head h1{max-width:850px}

@media(max-width:1100px){
  .tp-shell-v2{grid-template-columns:205px minmax(0,1fr)}.tp-main-v2{padding-left:28px;padding-right:28px}.tp-admin-pool-row{grid-template-columns:1.5fr .62fr .8fr .7fr auto}.tp-admin-pool-row .tp-admin-stat:nth-of-type(4){display:none}.tp-admin-grid{grid-template-columns:1fr}.tp-card-list{grid-template-columns:1fr}
}
@media(max-width:820px){
  body{padding-bottom:72px}.wrap{padding:15px 14px 92px}.top{min-height:48px;margin-bottom:12px}.top>.row>.muted{display:none}.top .brand{font-size:18px}.top .brand:before{width:27px;height:27px;border-radius:9px}.top .btn{min-height:37px;padding:8px 11px}
  .tp-main-v2{padding:20px 14px 96px}.tp-bottom-nav{background:rgba(6,14,10,.96);border-top-color:#23372d;padding-top:7px}.tp-bottom-nav button{min-height:48px;border-radius:10px}.tp-bottom-nav button.active{background:rgba(103,232,173,.07)}
  .tp-page-head{margin-bottom:18px}.tp-page-head h1{font-size:32px}.tp-page-head p{font-size:13px}.tp-head-actions{width:100%}.tp-head-actions .tp-btn{flex:1}
  .tp-focus-card{padding:20px;align-items:flex-start;flex-direction:column}.tp-focus-card>div:last-child{width:100%;justify-content:space-between}.tp-focus-card .tp-btn.primary{flex:1}.tp-metrics.three,.tp-metrics.four{grid-template-columns:repeat(3,1fr);overflow:auto}.tp-metric{min-width:100px;padding:12px}.tp-metric strong{font-size:21px}
  .tp-pool-card{padding:15px}.tp-admin-promo{align-items:flex-start;flex-direction:column}
  .tp-gameplay-shell,.tp-pool-admin-v3{padding:14px 12px 100px}.tp-gameplay-head,.tp-pool-admin-head{align-items:flex-start;flex-direction:column}.tp-gameplay-head h1,.tp-pool-admin-head h1{font-size:31px}.tp-gameplay-layout{grid-template-columns:1fr}.tp-gameplay-aside{position:static}.tp-save-dock{bottom:76px;padding:11px}.tp-save-dock>div:first-child{max-width:60%}.tp-save-dock .tp-btn.primary{min-width:110px}.tp-pick-three{grid-template-columns:1fr 1fr 1fr}.tp-pick-three span{min-height:50px;padding:8px 5px;font-size:12px}.tp-season-grid{grid-template-columns:1fr}
  .tp-admin-v3-metrics{grid-template-columns:repeat(2,1fr)}.tp-admin-v3-metric strong{font-size:21px}.tp-admin-v3-grid{grid-template-columns:1fr}.tp-admin-v3-tabs{top:0;margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;scrollbar-width:none}.tp-admin-v3-tabs::-webkit-scrollbar{display:none}.tp-admin-v3-tab{font-size:11px}.tp-admin-v3-table{min-width:640px}
  #builderBody>.grid.g3{grid-template-columns:1fr}.templateBtn,.tp-template-card{min-height:112px!important}
}
@media(max-width:520px){
  .tp-metrics.three,.tp-metrics.four{grid-template-columns:repeat(3,minmax(96px,1fr));margin-left:-2px;margin-right:-2px}.tp-metric span{font-size:9px}.tp-metric strong{font-size:20px}.tp-pool-foot{align-items:flex-end}.tp-pool-foot>span{max-width:64%}.tp-admin-v3-metrics{grid-template-columns:1fr 1fr}.tp-admin-v3-actions{width:100%}.tp-admin-v3-actions .tp-btn{flex:1}.tp-pick-three{gap:5px}.tp-score-grid{gap:8px}.tp-score-dash{font-size:22px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}