/* Shared game viewport. Controls belong inside it, never below a miniature board. */
body[data-page=draft] .hub-main{max-width:1120px;min-height:0;padding:8px 14px 12px!important}
.draft-top{margin:0 2px 6px;font-size:10px}.draft-note{margin:8px 0 0;font-size:10px}
.draft-stage{--stage-h:clamp(340px,calc(100svh - 230px),740px);height:var(--stage-h);min-height:0;max-width:none;width:100%;display:block;padding:0;container-type:size;border-radius:21px;isolation:isolate}
.draft-rule{position:absolute;top:10px;left:16px;right:16px;max-width:none;margin:0;font-size:12px;line-height:1.4;z-index:4;pointer-events:none}
.draft-player{position:absolute;top:34px;right:16px;z-index:7;font-size:11px;display:flex;gap:7px;align-items:center}.draft-player select{min-height:34px;padding:3px 9px}
.draft-big{position:absolute;top:46px;left:18px;right:18px;min-height:0;height:54px;line-height:1.2;display:grid;place-items:center;font-size:clamp(23px,4vw,40px);z-index:3;pointer-events:none}
.draft-result{position:absolute;bottom:10px;left:16px;right:16px;min-height:24px;font-size:12px;line-height:1.4;z-index:8;pointer-events:none}
.draft-start-overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;pointer-events:none}
.draft-stage .draft-start{pointer-events:auto;min-width:130px;min-height:50px;font-size:17px;padding:9px 24px;border-radius:16px;box-shadow:inset 0 1px 0 #fff9,0 4px 0 #a87a29,0 10px 25px #0006;transition:transform .18s,box-shadow .18s}
.draft-stage .draft-start:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff9,0 1px 0 #a87a29}
.draft-stage.is-ready .draft-board,.draft-stage.is-ready .draft-canvas{pointer-events:none;filter:brightness(.55)}
.draft-stage.is-ready .draft-big{opacity:.4}.draft-stage.is-finished .draft-board,.draft-stage.is-finished canvas{filter:brightness(.5);pointer-events:none}
.draft-board{position:absolute;left:50%;transform:translateX(-50%);top:108px;bottom:48px;width:calc(100% - 36px);max-width:820px;height:auto;gap:10px;grid-auto-rows:minmax(0,1fr);align-content:stretch}
.draft-board button{padding:4px;min-height:44px;min-width:0;font-size:clamp(18px,4vw,31px);border-radius:15px;background:linear-gradient(145deg,#334562,#1b2a43);border:1px solid #63728b;box-shadow:inset 0 1px 0 #ffffff29,inset 0 -4px 0 #0002,0 3px 0 #080e1d}
.draft-stage[data-type=sequence] .draft-board,.draft-stage[data-type=stroop] .draft-board{grid-template-columns:repeat(2,minmax(0,1fr))}
.draft-stage[data-type=mole] .draft-board{grid-template-columns:repeat(3,minmax(0,1fr));top:72px}
.draft-stage[data-type=memory] .draft-board{top:72px}.draft-memory button{font-size:clamp(25px,5vw,50px)}
.draft-stage[data-game=wires] .draft-board{grid-template-columns:repeat(3,minmax(0,1fr))}
.draft-stage[data-game=caps] .draft-board button{border-radius:35%;background:radial-gradient(ellipse at 35% 25%,#8fb7cc,#37566f 65%,#192c43);text-shadow:0 2px 0 #0004;font-size:36px;color:#ffe1a0}
.draft-stage[data-type=zones] .draft-board{top:108px}.draft-stage[data-type=zones] .draft-player{top:38px}
.draft-wheel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100cqw - 44px),calc(100cqh - 114px),570px);height:auto;aspect-ratio:1;border-width:7px;background:repeating-conic-gradient(#476c80 0deg 45deg,#223952 45deg 90deg);box-shadow:inset 0 0 0 7px #17273d,0 10px 28px #0006}
.draft-arrow{width:58%;font-size:clamp(60px,20cqh,180px);transform-origin:center;display:grid;place-items:center}.draft-arrow img{width:100%;height:100%;max-height:250px;object-fit:contain;filter:drop-shadow(0 7px 4px #0005)}
.draft-stage[data-type=spinner] .draft-big,.draft-stage[data-type=race] .draft-big{top:auto;bottom:37px;height:42px;font-size:clamp(22px,3vw,35px)}
.draft-hazard{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(60cqw,55cqh,370px);height:min(60cqw,55cqh,370px);font-size:clamp(90px,24cqh,210px);display:grid;place-items:center;pointer-events:none}
.draft-hazard img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 7px #0005)}
.draft-big img{height:48px;width:76px;object-fit:contain}
.draft-meter{position:absolute;left:10%;bottom:66px;width:80%;height:14px}
.draft-stage > button.primary{position:absolute;bottom:62px;left:50%;translate:-50% 0;min-width:145px;min-height:46px;font-size:15px;z-index:5}
.draft-stage #hazard-tap{top:94px;bottom:89px;left:18px;right:18px;translate:none;width:auto;min-width:0;background:transparent!important;border:0!important;box-shadow:none!important;color:#eed49c;display:flex;align-items:flex-end;justify-content:center;min-height:44px;font-size:13px;padding:0;z-index:6}
.draft-signal{position:absolute;left:18px;right:18px;top:54px;bottom:109px;width:calc(100% - 36px);height:auto;min-height:44px!important;font-size:clamp(20px,4vw,38px)!important;white-space:normal;padding:12px}
.draft-stage[data-type=reaction] .draft-big,.draft-stage[data-type=hold] .draft-big{top:auto;bottom:43px;height:51px}
.draft-timer,.draft-score-row{position:absolute;top:38px;left:18px;right:18px;text-align:center;font-size:15px;z-index:3}
.draft-stage[data-type=tap] #tap-target{left:18px;right:18px;top:125px;bottom:52px;translate:none;width:calc(100% - 36px);height:auto;min-width:0;font-size:clamp(30px,7vw,65px)}
.draft-stage[data-type=tap] .draft-big{top:65px;height:48px;font-size:42px}
.draft-stage[data-type=ten] .draft-big{top:50%;translate:0 -65%;height:130px;font-family:'Martian Mono',monospace;font-size:clamp(43px,11vw,100px)}
.draft-stage[data-type=mission] .draft-big{top:50%;translate:0 -50%;height:auto;min-height:110px;max-width:650px;margin:auto;font-size:clamp(23px,5vw,42px);padding:10px;word-break:keep-all;background:#17253ae8;border:1px solid #52617b;border-radius:18px}
.draft-stage[data-type=mission] .draft-hazard{opacity:.18}
.draft-canvas{position:absolute;left:16px;right:16px;top:67px;bottom:42px;max-width:none;width:calc(100% - 32px);height:calc(100% - 109px);aspect-ratio:auto;border:1px solid #3c526b;background:#0f1c30}
@media(max-width:360px){.draft-board{gap:7px;top:100px}.draft-board button{min-height:40px}.draft-rule{font-size:11px}.draft-stage .draft-start{min-width:118px;min-height:46px}}
@media(orientation:landscape) and (max-height:550px){body[data-page=draft] .hub-main{padding:3px 10px 8px!important}.draft-top{display:none}.draft-stage{--stage-h:calc(100svh - 84px);min-height:200px}.draft-note{display:none}.draft-rule{top:5px;font-size:10px}.draft-player{top:25px;right:10px}.draft-big{top:26px;height:37px;font-size:25px}.draft-board{top:69px;bottom:34px;max-width:900px;gap:7px}.draft-board button{min-height:35px;font-size:20px;padding:2px}.draft-result{bottom:4px;font-size:10px;min-height:19px}.draft-wheel{width:min(calc(100cqw - 150px),calc(100cqh - 65px),500px)}.draft-stage[data-type=spinner] .draft-big,.draft-stage[data-type=race] .draft-big{bottom:21px;height:29px;font-size:22px}.draft-stage[data-type=spinner] .draft-result,.draft-stage[data-type=race] .draft-result{font-size:9px}.draft-hazard{width:min(58cqw,60cqh);height:min(58cqw,60cqh);top:49%}.draft-meter{bottom:32px;height:10px}.draft-stage > button.primary{bottom:30px;min-height:35px;padding:4px 13px}.draft-stage #hazard-tap{top:52px;bottom:49px;font-size:11px}.draft-signal{top:30px;bottom:67px}.draft-stage[data-type=reaction] .draft-big,.draft-stage[data-type=hold] .draft-big{bottom:21px;height:35px}.draft-timer,.draft-score-row{top:24px;font-size:12px}.draft-stage[data-type=tap] .draft-big{top:42px;height:35px;font-size:30px}.draft-stage[data-type=tap] #tap-target{top:83px;bottom:31px}.draft-stage[data-type=memory] .draft-board,.draft-stage[data-type=mole] .draft-board{top:47px}.draft-stage[data-type=zones] .draft-board{top:74px}.draft-stage[data-type=zones] .draft-player{top:28px}.draft-canvas{top:47px;bottom:29px;height:calc(100% - 76px)}.draft-stage .draft-start{min-height:42px;padding:6px 20px;font-size:16px}.draft-stage[data-type=mission] .draft-big{max-width:520px;min-height:76px;font-size:25px}}
@media(prefers-reduced-motion:reduce){.draft-stage .draft-start{transition:none}}
.draft-stage[data-type=race] .draft-arrow{width:24%}.draft-stage[data-type=race] .draft-arrow img{max-height:125px}.draft-stage[data-type=zones] .draft-big{top:74px;height:30px;font-size:22px}.draft-stage[data-type=zones] .draft-board{top:116px}@media(orientation:landscape) and (max-height:550px){.draft-stage[data-type=zones] .draft-player{top:26px;left:12px;right:auto}.draft-stage[data-type=zones] .draft-big{top:29px;left:185px;right:12px;height:30px;font-size:20px}.draft-stage[data-type=zones] .draft-board{top:74px}}
.draft-seat{position:absolute;transform:translate(-50%,-50%);z-index:2;display:grid;place-items:center;min-width:23px;height:23px;border-radius:50%;background:#17273dd9;color:#ffe5a8;font:600 12px/1 'IBM Plex Sans KR',sans-serif;border:1px solid #dec17a55;pointer-events:none}.draft-arrow{z-index:3}@media(orientation:landscape) and (max-height:550px){.draft-seat{min-width:18px;height:18px;font-size:10px}}
.draft-stage[data-type=spinner] .draft-big,.draft-stage[data-type=race] .draft-big{display:none}.draft-stage.is-finished[data-type=spinner] .draft-big,.draft-stage.is-finished[data-type=race] .draft-big{display:grid;top:calc(50% - 112px);bottom:auto;height:52px;left:24px;right:24px;background:#13213be8;border:1px solid #9f8c5d;border-radius:13px;max-width:400px;margin:auto;font-size:30px}.draft-stage.is-finished[data-type=ten] .draft-big{top:25%;translate:0 -50%;height:90px;font-size:clamp(30px,8vw,80px)}@media(orientation:landscape) and (max-height:550px){.draft-stage.is-finished[data-type=spinner] .draft-big,.draft-stage.is-finished[data-type=race] .draft-big{top:calc(50% - 82px);height:38px;font-size:23px}.draft-stage.is-finished[data-type=ten] .draft-big{top:24%;height:50px;font-size:36px}}

/* Bottle flip: separate the power meter, action and result lanes. */
.draft-stage[data-type=flip] .draft-meter{bottom:119px;left:12%;width:76%;z-index:6}
.draft-stage[data-type=flip] > button.primary{bottom:58px;max-width:calc(100% - 36px)}
.draft-stage[data-type=flip] .draft-hazard{top:44%;width:min(47cqw,40cqh,280px);height:min(47cqw,40cqh,280px)}
@media(orientation:landscape) and (max-height:550px){
.draft-stage[data-type=flip] .draft-meter{left:55%;width:38%;bottom:96px}
.draft-stage[data-type=flip] > button.primary{left:74%;bottom:46px;min-height:38px}
.draft-stage[data-type=flip] .draft-hazard{left:27%;top:53%;width:min(30cqw,54cqh);height:min(30cqw,54cqh)}
.draft-stage[data-type=flip] .draft-big{left:50%;right:12px;top:38px;font-size:20px}
}

.draft-stage[data-type=flip] .draft-meter:after{content:"";position:absolute;left:42%;width:16%;top:-5px;bottom:-5px;border:2px solid #fff0b9;border-radius:4px;pointer-events:none;box-shadow:0 0 7px #fff0b944}