:root{--atk:#4868B8;--def:#C85838;--navy:#283868;--char:#182030;--text:#F4F6F8;--muted:#B8C0CC;--disabled:#69727D;--safe-top:max(16px,env(safe-area-inset-top));--safe-bottom:max(16px,env(safe-area-inset-bottom));font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#080d18}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;height:100%;overflow-x:hidden}body{background:radial-gradient(circle at 45% 10%,#2b4274 0,#111a30 43%,#070b14 100%);touch-action:manipulation;-webkit-user-select:none;user-select:none}.screen{min-height:100dvh;padding:var(--safe-top) max(18px,env(safe-area-inset-right)) var(--safe-bottom) max(18px,env(safe-area-inset-left));position:relative;overflow:hidden;background:linear-gradient(125deg,rgba(9,16,31,.88),rgba(25,41,74,.62) 48%,rgba(10,14,25,.9)),repeating-linear-gradient(115deg,transparent 0 110px,rgba(72,104,184,.07) 111px 114px,transparent 115px 220px)}.screen:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,transparent 0 48%,rgba(255,255,255,.025) 48% 49%,transparent 49% 100%),radial-gradient(circle at 20% 75%,rgba(72,104,184,.12),transparent 28%)}.top{position:relative;z-index:1;display:flex;align-items:center;gap:20px;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:12px}.mark{font-weight:900;letter-spacing:.08em;background:#0a1020;padding:12px 16px;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}.mark span{color:var(--def)}.mark b{font-size:.6em;color:var(--muted)}h1{margin:2px 0 0;font-size:clamp(24px,3vw,44px);font-stretch:condensed}.eyebrow,.status,.meta,small{color:var(--muted);letter-spacing:.06em}.icon{display:grid;place-items:center;background:currentColor;width:86px;height:86px;box-shadow:-9px 9px 0 #0b1020;flex:0 0 auto}.icon svg{width:68%;height:68%;fill:var(--text)}.attacker{--role:var(--atk);color:var(--text)}.defender{--role:var(--def);color:var(--text)}.attacker .icon,.icon.attacker{background:var(--atk)}.defender .icon,.icon.defender{background:var(--def)}button,input{font:inherit}button{min-height:48px;border:1px solid rgba(255,255,255,.18);background:#26354f;color:var(--text);font-weight:800;letter-spacing:.05em;padding:12px 18px;cursor:pointer;border-radius:0}button:disabled{background:#313a47;color:var(--disabled);cursor:not-allowed}.primary,.cta{background:linear-gradient(90deg,#315a9d,var(--atk));border:0}.cta{display:block;width:min(620px,100%);font-size:clamp(20px,3vw,30px);margin:24px auto;clip-path:polygon(0 0,97% 0,100% 50%,97% 100%,0 100%)}.setup-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1100px;margin:5vh auto 2vh}.setup-player{padding:24px;background:rgba(16,24,43,.82);border-top:5px solid var(--role);clip-path:polygon(0 0,96% 0,100% 12%,100% 100%,4% 100%,0 88%)}.role-line{display:flex;gap:18px;align-items:center}.role-line>div:last-child{flex:1}.role-name{font-size:clamp(24px,3vw,42px);font-weight:900;font-style:italic}.role-name small{font-size:.42em;font-style:normal;margin-left:8px}.setup-player input{width:100%;background:var(--role);border:0;border-bottom:2px solid rgba(255,255,255,.45);color:#fff;padding:12px;font-size:18px;margin-top:8px}.setup-player input::placeholder{color:#e8e8e8}.speed{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;margin-top:20px;background:#e6e9ee;color:#111;text-align:center}.speed button{background:#cbd0d7;color:#17202d;font-size:34px;border:0}.speed strong{font-size:clamp(18px,2.5vw,28px)}.meta{text-align:center;padding-top:12px}.setup-tools{position:relative;z-index:1;display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap}.setup-tools label{background:#111b2e;padding:14px 18px}.gameplay .role-card{position:relative;z-index:1}.role-card.active{display:flex;align-items:center;gap:28px;width:min(850px,72vw);margin:8vh auto 2vh;padding:28px;background:linear-gradient(90deg,rgba(18,27,47,.92),rgba(18,27,47,.58));border-left:8px solid var(--role);clip-path:polygon(0 0,95% 0,100% 18%,100% 100%,5% 100%,0 82%)}.role-card.active .icon{width:150px;height:150px}.role-card.active .timer{font-size:clamp(72px,11vw,150px);font-variant-numeric:tabular-nums;line-height:.9}.role-card.compact{position:absolute;right:4vw;top:12vh;display:flex;gap:14px;align-items:center;background:rgba(8,12,22,.88);padding:14px 18px;border-left:5px solid var(--role)}.role-card.compact .icon{width:60px;height:60px}.role-card.compact .role-name{font-size:22px}.role-card.compact .timer{font-size:38px;font-variant-numeric:tabular-nums}.controls{position:relative;z-index:1;display:grid;grid-template-columns:160px minmax(280px,650px) 180px;justify-content:center;align-items:center;gap:24px;margin-top:24px}.pause{width:132px;height:132px;border-radius:50%;justify-self:center;background:var(--role);font-size:52px;display:grid;place-items:center}.pause span{font-size:12px}.switch{font-size:clamp(20px,3vw,34px);min-height:88px}.switch.attacker{background:var(--atk)}.switch.defender{background:var(--def)}.phase-end{align-self:end;background:#172238}.ready-grid,.status-board,.summary-board,.recovery-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1050px;margin:6vh auto 2vh}.ready-player,.up-col,.sum-col,.recover{background:rgba(15,23,40,.86);padding:24px;border-top:6px solid var(--role)}.ready-player .icon,.up-head .icon,.recover .icon{margin:auto}.ready-player h2,.recover h2{text-align:center}.big-alloc{text-align:center;font-size:clamp(56px,8vw,100px);font-variant-numeric:tabular-nums}.ready-player small{display:block;text-align:center}.progress{position:relative;z-index:1;text-align:center;font-size:22px}.progress span{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid var(--muted)}.progress .now{background:var(--atk);font-weight:900}.progress i{margin:0 7px;color:var(--muted)}.adjust-panel{position:relative;z-index:1;max-width:900px;margin:12px auto}.adjust-panel h2{text-align:center;font-size:18px}.adjust-panel h2 small{font-size:11px}.adjust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.adjust{border-top:5px solid var(--role)}.adjust.selected{outline:3px solid #fff;background:var(--role)}.adjust small{display:block;margin-top:4px}.timeout{text-align:center}.timeout:after{content:"";position:absolute;inset:0;border:12px solid var(--role,var(--def));pointer-events:none;animation:pulse 1s infinite}.timeout.both:after{display:none}@keyframes pulse{50%{opacity:.2}}.timeout-icon{margin:10vh auto 2vh;width:160px;height:160px}.timeout-time{font-size:clamp(90px,15vw,180px);font-variant-numeric:tabular-nums}.lead{position:relative;z-index:1;text-align:center;color:var(--muted);font-size:18px}.up-head{display:flex;align-items:center;gap:20px}.up-head .icon{margin:0;width:72px;height:72px}.op-control{display:grid;grid-template-columns:58px 1fr 58px;gap:10px;align-items:center;text-align:center;margin:20px 0}.op-control button{font-size:30px}.up-col dl{display:grid;grid-template-columns:1fr auto;gap:10px;margin:0}.up-col dt{color:var(--muted)}.up-col dd{margin:0;font-variant-numeric:tabular-nums;font-weight:800}.progress-actions{position:relative;z-index:1;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.round-row{display:grid;grid-template-columns:50px 1fr 1fr 1fr;gap:8px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.15);font-variant-numeric:tabular-nums}.total{font-size:18px;margin-top:20px;display:flex;justify-content:space-between}.total strong{font-size:30px}.recover-summary{position:relative;z-index:1;max-width:700px;margin:7vh auto 3vh;background:#121d32;padding:24px;display:grid;gap:12px;border-left:6px solid var(--atk)}.modal-wrap{position:fixed;z-index:20;inset:0;background:rgba(2,5,10,.68);display:grid;place-items:center;padding:20px}.modal{width:min(520px,92vw);background:#121b2c;border-top:6px solid var(--atk);box-shadow:0 20px 80px #000;padding:28px}.modal h2{margin-top:0}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.toast{position:fixed;z-index:30;left:50%;bottom:30px;transform:translateX(-50%);background:#111c30;border-left:5px solid var(--def);padding:14px 20px;max-width:90vw}
@media(max-width:760px){.screen{overflow-y:auto}.top{gap:10px}.mark{font-size:13px;padding:9px}.setup-grid,.ready-grid,.status-board,.summary-board,.recovery-grid{grid-template-columns:1fr;margin-top:20px}.setup-player{padding:16px}.role-card.active{width:100%;margin:24px auto 12px;padding:18px;gap:16px}.role-card.active .icon{width:92px;height:92px}.role-card.active .timer{font-size:clamp(62px,21vw,104px)}.role-card.compact{position:relative;right:auto;top:auto;margin:10px 0 16px;width:100%;justify-content:center}.controls{grid-template-columns:1fr;gap:12px}.pause{width:105px;height:105px}.switch{min-height:76px}.phase-end{min-height:54px}.adjust-grid{grid-template-columns:1fr 1fr}.round-row{grid-template-columns:40px 1fr;gap:5px}.round-row span{font-size:13px}.progress i{margin:0 2px}.progress span{width:34px;height:34px}.timeout-icon{margin-top:5vh}.setup-tools button,.setup-tools label{flex:1 1 130px;text-align:center}}
@media(max-height:520px) and (orientation:landscape){.top{padding-bottom:6px}.role-card.active{margin:10px 0;width:66%;padding:12px}.role-card.active .icon{width:86px;height:86px}.role-card.active .timer{font-size:70px}.role-card.compact{top:80px}.controls{position:absolute;right:2vw;bottom:16px;grid-template-columns:100px 220px;gap:10px}.pause{width:90px;height:90px}.phase-end{grid-column:2}.setup-grid{margin:12px auto;gap:12px}.setup-player{padding:10px}.setup-player .icon{width:55px;height:55px}.setup-player .speed{margin-top:8px}.meta{padding-top:5px}.setup-tools{gap:5px}.cta{margin:8px auto}.ready-grid{margin:10px auto}.ready-player{padding:10px}.ready-player .icon{width:55px;height:55px}.big-alloc{font-size:48px}}
/* V1.1 UX refinements */
.role-card.attacker>.icon,.challenge-group.attacker .icon{background:var(--atk)}
.role-card.defender>.icon,.challenge-group.defender .icon{background:var(--def)}
.timer-line{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.pending-time{border-left:4px solid var(--role);background:rgba(8,12,22,.9);padding:8px 12px;display:grid;gap:3px;font-variant-numeric:tabular-nums}
.pending-time b{color:var(--role);font-size:16px}.pending-time span{color:var(--text);font-size:14px;letter-spacing:.04em}
.ready-identity{min-height:74px;text-align:center}.ready-identity h2{margin:12px 0 3px}.ready-name{min-height:22px;color:var(--muted);font-size:15px}
.challenge-groups{display:grid;gap:24px}.challenge-group{display:grid;grid-template-columns:minmax(110px,1fr) 150px minmax(110px,1fr);gap:18px;align-items:center;padding:12px 0}.challenge-group+.challenge-group{border-top:1px solid rgba(255,255,255,.2);padding-top:24px}
.challenge-role{display:grid;place-items:center;gap:9px}.challenge-role .icon{width:70px;height:70px}.challenge-role b{font-size:13px;letter-spacing:.08em}.adjust{font-size:24px}.adjust small{font-size:10px}.adjust.selected{outline:3px solid #fff;background:var(--role)}
.summary .round-row{grid-template-columns:50px repeat(4,1fr)}
@media(max-width:760px){.challenge-group{grid-template-columns:1fr 92px 1fr;gap:9px}.challenge-role .icon{width:56px;height:56px}.pending-time{width:100%}.summary .round-row{grid-template-columns:42px 1fr}.ready-identity{min-height:66px}}

/* V1.2 visual refinements */
.icon{overflow:hidden;background:transparent!important;box-shadow:none}
.role-icon-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.role-card.compact{width:360px;height:108px;min-width:360px;max-width:360px;overflow:hidden}
.role-card.compact .role-copy{display:grid;grid-template-rows:30px 18px 48px;min-width:0;width:250px}
.role-card.compact .role-name{width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:22px;line-height:30px}
.role-card.compact .role-name small{display:inline;font-size:11px;margin-left:6px}
.role-card.compact .status{line-height:18px}
.role-card.compact .timer{font-size:38px;line-height:48px;white-space:nowrap}
.gameplay.is-paused .controls{margin-top:24px}
.gameplay.is-paused .adjust-panel{margin-top:18px}
@media(max-width:760px){.role-card.compact{width:100%;min-width:0;max-width:none;height:100px}.role-card.compact .role-copy{width:auto;flex:1}.gameplay.is-paused .controls{margin-top:12px}}

/* V1.3 layout stabilization and transparent role art */
.icon{background:transparent!important;box-shadow:none!important;overflow:visible}
.role-icon-art{object-fit:contain!important;background:transparent!important}
.role-copy{min-width:0;display:grid;grid-template-rows:auto auto auto;align-content:center}
.role-name{display:grid;grid-template-rows:auto 22px;min-width:0;line-height:1.05}
.role-title{display:block;white-space:nowrap}
.player-name{display:block;min-height:22px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px!important;font-style:normal!important;margin:4px 0 0!important;color:var(--muted)}
.role-card.active{height:250px;box-sizing:border-box}
.role-card.active .role-copy{flex:1;height:190px}
.role-card.compact{width:360px;height:126px;box-sizing:border-box}
.role-card.compact .role-copy{width:260px;min-width:0}
.role-card.compact .role-name{font-size:22px;grid-template-rows:auto 18px}
.role-card.compact .player-name{font-size:12px!important;min-height:18px;margin-top:2px!important}
.role-card.compact .timer-line{display:grid;grid-template-columns:128px 1fr;gap:8px;align-items:center;min-height:48px}
.role-card.compact .timer{font-size:38px;white-space:nowrap}
.role-card.compact .pending-time{width:auto;min-width:0;margin:0;font-size:9px;line-height:1.15}
.role-card.compact .pending-time b,.role-card.compact .pending-time span{white-space:nowrap}
@media(max-width:760px){.role-card.active{height:190px}.role-card.active .role-copy{height:145px}.role-card.compact{width:100%;height:118px}.role-card.compact .role-copy{width:min(72vw,300px)}.role-card.compact .timer-line{grid-template-columns:124px 1fr}}
@media(max-height:520px) and (orientation:landscape){.role-card.active{height:130px}.role-card.active .role-copy{height:105px}.role-card.compact{height:104px;width:330px}.role-card.compact .role-copy{width:240px}}

/* V1.4 challenge projection and control refinements */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.pause{position:relative;display:grid;place-items:center;padding:0}
.pause-glyph{display:flex!important;align-items:center;justify-content:center;gap:16px;width:72px;height:72px}
.pause-glyph i{display:block;width:20px;height:66px;background:currentColor;border-radius:2px}
.play-glyph{display:block!important;width:0;height:0;border-top:36px solid transparent;border-bottom:36px solid transparent;border-left:58px solid currentColor;margin-left:10px}
.timer-line{display:grid!important;grid-template-columns:minmax(0,1fr) 150px;align-items:end;gap:18px;min-height:92px}
.pending-slot{width:150px;height:58px;min-width:150px;overflow:visible;align-self:end}
.pending-time{width:100%!important;height:58px;padding:2px 0!important;border:0!important;background:transparent!important;display:grid!important;grid-template-rows:22px 32px!important;gap:2px!important;align-content:end!important;font-variant-numeric:tabular-nums;text-align:left}
.pending-time b{font-size:16px!important;line-height:22px!important;color:var(--text)!important;white-space:nowrap!important}
.pending-time span{font-size:25px!important;line-height:32px!important;color:#ff5252!important;font-weight:900!important;letter-spacing:.02em!important;white-space:nowrap!important}
.role-card.compact .timer-line{display:grid!important;grid-template-columns:128px 92px!important;gap:8px!important;min-height:50px!important;align-items:end!important}
.role-card.compact .pending-slot{width:92px;min-width:92px;height:48px;overflow:visible}
.role-card.compact .pending-time{height:48px;grid-template-rows:18px 27px!important;gap:1px!important}
.role-card.compact .pending-time b{font-size:12px!important;line-height:18px!important}
.role-card.compact .pending-time span{font-size:20px!important;line-height:27px!important}
@media(max-width:760px){.timer-line{grid-template-columns:minmax(0,1fr) 118px;gap:8px}.pending-slot{width:118px;min-width:118px}.role-card.compact .timer-line{grid-template-columns:124px 88px!important}.role-card.compact .pending-slot{width:88px;min-width:88px}.role-card.compact .pending-time span{font-size:18px!important}.pause-glyph{gap:12px}.pause-glyph i{width:17px;height:56px}.play-glyph{border-top-width:31px;border-bottom-width:31px;border-left-width:50px}}

/* V1.5 challenge framing and tactical round-history HUD */
.pending-slot{display:flex;align-items:flex-end}
.pending-time{box-sizing:border-box!important;border:1px solid var(--role)!important;border-left:5px solid var(--role)!important;background:rgba(8,12,22,.82)!important;padding:4px 9px!important;box-shadow:inset 0 0 18px color-mix(in srgb,var(--role) 12%,transparent)}
.role-card.compact .pending-time{padding:2px 6px!important;border-left-width:4px!important}
.adjust:disabled{border-top-color:#555e69!important;filter:saturate(.25);opacity:.48}
.history-hud{position:relative;z-index:1;max-width:1120px;margin:34px auto 18px;display:grid;gap:18px}
.history-round{background:rgba(10,16,29,.88);border:1px solid rgba(255,255,255,.11);clip-path:polygon(0 0,98.5% 0,100% 14%,100% 100%,1.5% 100%,0 86%)}
.history-head{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:linear-gradient(90deg,#17233a,rgba(23,35,58,.25));border-bottom:1px solid rgba(255,255,255,.13)}
.history-head strong{font-size:18px;letter-spacing:.1em}.history-head span{font-size:11px;color:var(--muted);letter-spacing:.12em}
.history-players{display:grid;grid-template-columns:1fr 1fr}
.history-player{padding:14px 18px 17px;border-top:4px solid var(--role)}
.history-player+.history-player{border-left:1px solid rgba(255,255,255,.13)}
.history-id{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:12px}
.history-id .icon{width:46px;height:46px}.history-id b{display:block;font-size:15px;letter-spacing:.08em}.history-id small{display:block;min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.history-id em{font-style:normal;font-size:12px;color:var(--muted);border:1px solid rgba(255,255,255,.16);padding:5px 7px}
.history-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.history-stats>div{background:rgba(255,255,255,.035);padding:8px 9px;border-left:2px solid rgba(255,255,255,.11)}
.history-stats span{display:block;color:var(--muted);font-size:9px;letter-spacing:.1em;margin-bottom:3px}.history-stats strong{font-size:21px;font-variant-numeric:tabular-nums}
.summary-totals{position:relative;z-index:1;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.summary-total{display:flex;align-items:center;justify-content:space-between;background:rgba(10,16,29,.9);border-left:6px solid var(--role);padding:14px 18px}.summary-total span{font-size:12px;letter-spacing:.1em;color:var(--muted)}.summary-total strong{font-size:30px;font-variant-numeric:tabular-nums}
@media(max-width:760px){.history-hud{margin-top:20px}.history-players{grid-template-columns:1fr}.history-player+.history-player{border-left:0;border-top-width:4px}.history-stats strong{font-size:18px}.summary-totals{grid-template-columns:1fr}.history-id small{max-width:120px}}

/* V1.6 geometry, challenge spacing, and panel consistency */
/* Tactical panel cut convention: top-left and bottom-right, matching role badges. */
.setup-player,
.role-card.active,
.role-card.compact,
.history-round{
  clip-path:polygon(4% 0,100% 0,100% 86%,96% 100%,0 100%,0 14%)!important;
}
.role-card.compact{border-left:5px solid var(--role)}

/* Keep the active Challenge card visually inset from the lower panel edge. */
.role-card.active .timer-line{align-items:center!important}
.role-card.active .pending-slot{align-self:center;transform:translateY(-7px)}
.role-card.active .pending-time{padding:8px 10px 6px!important}
/* Give the adjustment line breathing room inside both projection cards. */
.pending-time b{padding-top:3px;display:block}
.role-card.compact .pending-time{padding:5px 7px 4px!important}
.role-card.compact .pending-time b{padding-top:2px}