:root{--cream:#fff6d2;--panel:#27214c;--line:#7568ac;--yellow:#ffdc55;--shadow:#090716}

*{box-sizing:border-box}

[hidden]{display:none!important}

html{background:#0c091c}

body{margin:0;min-height:100vh;color:var(--cream);font-family:"Courier New",monospace;background:radial-gradient(circle at 50% -15%,#403873,#17132f 48%,#0b091a);image-rendering:pixelated}

button,select,input,a{font:inherit}

.topbar{min-height:74px;padding:9px max(12px,calc((100vw - 1440px)/2));display:flex;align-items:center;justify-content:space-between;background:#18142f;border-bottom:4px solid #6658a0;box-shadow:0 4px #080612}

.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}

.brand>b{width:48px;height:48px;display:grid;place-items:center;background:#ffd64d;color:#382900;border:3px solid #fff0a6;box-shadow:4px 4px #86541d;font-size:29px}

.brand small,.title small,.toolbar small,.result>small{display:block;color:#75dcff;font-size:11px;font-weight:900;letter-spacing:1.4px}

.brand strong{display:block;font-size:21px;text-shadow:3px 3px #000}

.topbar nav,.toolbar>div:last-child{display:flex;gap:8px}

.topbar a:not(.brand),.topbar button,.toolbar button{border:2px solid #8277ba;background:#322a5c;color:#fff;padding:10px 12px;text-decoration:none;box-shadow:3px 3px #080612;font-weight:900;cursor:pointer}

.shell{width:min(1440px,100%);margin:auto;padding:22px 17px 40px}

.panel{background:linear-gradient(#2c2653,#211c40);border:4px solid var(--line);box-shadow:7px 7px var(--shadow),inset 0 0 0 3px #3b3468}

.setup{padding:22px}

.title,.box-head{display:flex;justify-content:space-between;align-items:center;gap:12px}

.title{margin-bottom:18px}

.title h1,.toolbar h1{margin:3px 0;font-size:clamp(22px,3vw,34px);text-shadow:4px 4px #000}

.title>span{background:#58d88b;color:#112416;border:3px solid #a9ffca;padding:7px 10px;box-shadow:3px 3px #166b43;font-weight:900}

.setup-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:16px}

.box{background:#18152f;border:3px solid #50477d;box-shadow:4px 4px #0a0819;padding:16px}

.box h2,.rank h2,.feed h2,.result-grid h2{margin:0 0 13px;color:var(--yellow);font-size:17px;text-shadow:2px 2px #674000}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.fields label{color:#b8afe3;font-size:12px;font-weight:900}

.fields select{margin-top:6px}

select,input{width:100%;min-height:42px;border:3px solid #655a98;background:#0e0c22;color:#fff;padding:7px 9px;outline:none;font-weight:900}

.help{color:#aaa4ca;font-size:12px;line-height:1.5}

.roster{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}

.horse-chip{display:flex;align-items:center;gap:8px;padding:8px;background:#252047;border:2px solid #50487d;font-size:12px;font-weight:900}

.horse-chip i,.odd i{width:20px;height:20px;border:3px solid #fff;box-shadow:2px 2px #000}

.box-head button{border:2px solid #efd56a;background:#58451c;color:#fff1af;padding:7px 9px;box-shadow:3px 3px #100c04;font-weight:900;cursor:pointer}

.bet-head,.bettor{display:grid;grid-template-columns:1fr 1.2fr 34px;gap:6px;align-items:center}

.bet-head{color:#a9a0d2;font-size:11px;margin-bottom:6px}

.bettors{display:grid;gap:7px;max-height:275px;overflow:auto}

.bettor input,.bettor select{font-size:12px;min-height:39px}

.bettor button{height:37px;border:2px solid #9f5667;background:#512637;color:#ffd7dc;font-weight:900}

.pool{display:flex;justify-content:space-between;margin-top:12px;padding-top:11px;border-top:2px dashed #575078;color:#bcb6db}

.pool strong{color:var(--yellow);font-size:20px}

.odds{margin-top:16px}

.odds .box-head small{color:#aaa4ca}

.odds-grid,#oddsGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}

.odd{padding:9px 6px;text-align:center;background:#252047;border:2px solid #524980;box-shadow:3px 3px #0d0a1d}

.odd i{display:block;margin:0 auto 5px}

.odd strong,.odd b,.odd small{display:block}

.odd strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.odd b{color:var(--yellow);font-size:18px;margin-top:3px}

.odd small{color:#aaa3c9}

.actions{display:flex;justify-content:center;gap:11px;margin-top:20px}

.primary,.secondary{min-height:49px;padding:11px 20px;border:3px solid;color:#fff;font-weight:1000;box-shadow:5px 5px #080612;cursor:pointer}

.primary{background:#d94653;border-color:#ff99a2}

.secondary{background:#393164;border-color:#8176b5}

.error{min-height:18px;text-align:center;color:#ff8d97;font-weight:900}

.toolbar{padding:13px 15px;display:flex;align-items:center;justify-content:space-between}

.toolbar h1{font-size:21px}

.toolbar p{margin:4px 0;color:#bcb5dc;font-size:12px}

.race-grid{position:relative;display:block;margin-top:13px}

.track{padding:7px;position:relative;overflow:hidden;background:#100d22}

.hud{display:flex;justify-content:space-between;padding:9px 11px;background:#0d0b1b;border:2px solid #4c4475;color:#9be8ff;font-weight:900}

.hud strong{color:#ffe56e}

canvas{display:block;width:100%;height:auto;min-height:420px;max-height:calc(100vh - 190px);object-fit:contain;background:#2d8e57;border:3px solid #090716;image-rendering:pixelated}

.race-grid aside{position:absolute;z-index:4;right:18px;top:66px;width:260px;display:grid;grid-template-rows:auto auto;gap:10px}

.rank,.feed{padding:12px;min-height:0}

.rank ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}

.rank-item{display:grid;grid-template-columns:24px 16px 1fr auto;gap:6px;align-items:center;padding:7px;background:#17132d;border:2px solid #49406f;font-size:11px}

.rank-item.leader{border-color:#ffd84f;background:#403519}

.rank-item i{width:15px;height:15px;border:2px solid #fff}

.rank-item em{font-style:normal;color:#aaa3c9}

.feed>div{display:flex;flex-direction:column-reverse;gap:6px;max-height:300px;overflow:auto}

.feed-line{padding:7px;background:#17132d;border-left:4px solid #5ec9f3;font-size:11px;line-height:1.4}

.feed-line.skill{border-color:#ffdd54;color:#fff1a7}

.countdown{position:absolute;inset:47px 7px 7px;display:grid;place-items:center;background:#090615bb;color:#ffe35c;font-size:clamp(75px,16vw,180px);font-weight:1000;text-shadow:8px 8px #d73d4a;z-index:10}

.reveal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;width:min(760px,calc(100% - 22px));display:grid;grid-template-columns:minmax(250px,42%) 1fr;background:#17132d;border:6px solid #ffda4d;box-shadow:12px 12px #070511}

.skill-picture{aspect-ratio:1;background:url('assets/horse-racing/skill-atlas.png') no-repeat;background-size:200% 200%;border-right:6px solid #ffda4d}

.skill-picture.trip{background-position:0 0}

.skill-picture.biped{background-position:100% 0}

.skill-picture.carry{background-position:0 100%}

.skill-picture.rocket{background-position:100% 100%}

.skill-picture.taxi{background-image:url('assets/horse-racing/taxi-skill.png');background-size:cover;background-position:center}

.skill-picture.taxi-empty,.skill-picture.self-trip,.skill-picture.crushed,.skill-picture.burrow{background-image:url('assets/horse-racing/twist-atlas.png');background-size:200% 200%}

.skill-picture.taxi-empty{background-position:0 0}

.skill-picture.self-trip{background-position:100% 0}

.skill-picture.crushed{background-position:0 100%}

.skill-picture.burrow{background-position:100% 100%}

.skill-picture.long,.skill-picture.biker,.skill-picture.barrel,.skill-picture.barrel-roll{background-image:url('assets/horse-racing/special-atlas.png');background-size:200% 200%}

.skill-picture.long{background-position:0 0}

.skill-picture.biker{background-position:100% 0}

.skill-picture.barrel{background-position:0 100%}

.skill-picture.barrel-roll{background-position:100% 100%}

.skill-copy{padding:23px 19px;display:flex;flex-direction:column;justify-content:center}

.skill-copy small{color:#ff7482;font-weight:1000;letter-spacing:2px}

.skill-copy strong{margin:11px 0;color:#ffe46a;font-size:clamp(25px,4.5vw,44px);line-height:1.15;text-shadow:5px 5px #000}

.skill-copy span{font-size:clamp(13px,1.6vw,18px);line-height:1.5;font-weight:900}

.result{text-align:center;padding:20px;max-height:calc(100svh - 118px);display:flex;flex-direction:column;overflow:hidden}

.trophy{font-size:48px;line-height:1}

.result h1{font-size:34px;color:#ffe164;text-shadow:5px 5px #000;margin:5px}

.result>p{color:#bcb6da;margin:5px 0 8px}

.result-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px;text-align:left;margin-top:10px;flex:1;min-height:0;overflow:hidden}

.result-grid>section{background:#17132d;border:3px solid #504779;padding:11px;min-height:0;display:flex;flex-direction:column;overflow:hidden}

.result ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;overflow:auto}

#payoutList{overflow:auto;min-height:0}

.result .actions{flex:0 0 auto;margin-top:11px}

.finish-row,.payout-row{display:flex;justify-content:space-between;padding:9px;background:#272149;border:2px solid #504779}

.finish-row:first-child{border-color:#ffd64c;background:#453719}

.payout-row.win strong{color:#64efa0}

.payout-row.lose strong{color:#ff8b96}

footer{text-align:center;padding:21px;color:#afa8cc;font-size:12px}

footer b{color:#fff0a8;margin-left:10px}


@media(max-width:980px){.setup-grid,.result-grid{grid-template-columns:1fr}

.result-grid{grid-template-rows:repeat(2,minmax(0,1fr))}

.odds-grid,#oddsGrid{grid-template-columns:repeat(3,1fr)}

.race-grid aside{position:static;width:auto;margin-top:13px;grid-template-columns:1fr 1fr;grid-template-rows:auto}

.toolbar{align-items:flex-start}

canvas{min-height:360px;max-height:none}

}


@media(max-width:620px){.topbar{padding:8px}

.brand strong{font-size:16px}

.brand>b{width:41px;height:41px}

.topbar button{display:none}

.topbar a:not(.brand){padding:8px;font-size:12px}

.shell{padding:11px 8px 30px}

.setup{padding:11px}

.title{align-items:flex-start}

.title h1{font-size:20px}

.box{padding:11px}

.bet-head,.bettor{grid-template-columns:1fr 1.15fr 29px;gap:4px}

.bettor input,.bettor select{padding:5px 3px;font-size:10px}

.odds-grid,#oddsGrid{grid-template-columns:repeat(2,1fr)}

.actions{flex-direction:column}

.toolbar{display:block}

.toolbar>div:last-child{margin-top:9px;flex-wrap:wrap}

.toolbar button{padding:8px;font-size:11px}

.race-grid aside{grid-template-columns:1fr}

.hud{font-size:10px}

canvas{min-height:300px}

.reveal{grid-template-columns:42% 58%;border-width:3px}

.skill-picture{border-right-width:3px}

.skill-copy{padding:9px}

.skill-copy span{font-size:11px}

.result{padding:17px 10px}

}

/* v2 경기 중계 화면 */
.track{padding:0;border-color:#78d4ff;background:#07152d;box-shadow:8px 8px #050715,inset 0 0 0 3px #14385d}
.track canvas{border:0;min-height:0;max-height:none;aspect-ratio:1200/680;object-fit:cover;background:#4a9e54}
.race-info-overlay,.timer-overlay,.leader-overlay,.race-state-overlay{position:absolute;z-index:5;background:linear-gradient(180deg,#071a38f2,#020b1bef);border:3px solid #77d8ff;box-shadow:4px 4px #030817,inset 0 0 0 2px #1d5681;color:#fff}
.race-info-overlay{left:15px;top:15px;width:310px;padding:10px 15px;display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:center}
.race-info-overlay small{grid-row:1/3;color:#c7efff;font-size:18px;font-weight:1000}
.race-info-overlay strong{font-size:25px;text-shadow:3px 3px #000}
.race-info-overlay span{color:#e5f4ff;font-size:13px;font-weight:900}
.race-info-overlay b{color:#ffe356}
.timer-overlay{left:50%;top:15px;transform:translateX(-50%);min-width:205px;padding:6px 18px;text-align:center}
.timer-overlay small{display:block;color:#b8eaff;font-size:13px;font-weight:900}
.timer-overlay strong{display:block;color:#ffe339;font-size:33px;line-height:1.05;letter-spacing:2px;text-shadow:3px 3px #5b4500}
.leader-overlay{left:15px;bottom:17px;width:295px;padding:9px 14px}
.leader-overlay small{display:block;color:#bdeeff;font-weight:900}
.leader-overlay strong{display:block;color:#fff;font-size:22px;margin:3px 0;text-shadow:3px 3px #000}
.leader-overlay i{display:block;height:11px;background:#101425;border:2px solid #9bdfff}
.leader-overlay i span{display:block;width:0;height:100%;background:linear-gradient(90deg,#27d9ff,#56f095);transition:width .25s linear}
.race-state-overlay{right:15px;bottom:17px;padding:10px 17px;display:flex;align-items:center;gap:9px;font-weight:1000;font-size:18px}
.race-state-overlay b{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#6fe4ff;color:#06203c}
.race-grid aside{right:10px;top:10px;width:176px;gap:5px}
.race-grid aside .panel{border-width:3px;background:linear-gradient(#081a37ee,#020b1bee);box-shadow:4px 4px #030817,inset 0 0 0 2px #153e66}
.race-grid aside .rank{padding:7px}
.race-grid aside .rank h2{margin-bottom:4px;color:#fff;text-shadow:none;text-align:center;font-size:11px}
.race-grid aside .feed{display:none}
.rank-item{grid-template-columns:16px 8px 1fr auto;gap:3px;padding:3px 4px;background:#07152bd9;border-width:1px;border-color:#31547b;font-size:8px}
.rank-item i{width:8px;height:8px;border-width:1px;box-shadow:none}
.rank-item.leader{background:#61470de8;border-color:#ffe45d}
.countdown{inset:0;background:#020817a8}
.reveal{left:50%;top:auto;bottom:14px;transform:translateX(-50%);width:min(500px,calc(100% - 30px));grid-template-columns:150px 1fr;border-width:3px;box-shadow:7px 7px #020613}
.skill-picture{aspect-ratio:3/2;align-self:center;border-right-width:3px;background-repeat:no-repeat;background-color:#08152c}
.skill-copy{padding:10px 12px}
.skill-copy strong{font-size:clamp(17px,2.5vw,27px);margin:5px 0}
.skill-copy span{font-size:11px}
.horse-intro{--entry-color:#2f6fe4;position:absolute;z-index:7;left:6%;right:6%;bottom:6%;height:118px;display:grid;grid-template-columns:125px 1fr 260px;align-items:stretch;color:#fff;border:4px solid #d8f2ff;background:linear-gradient(90deg,var(--entry-color),#274f9e 48%,#142858);box-shadow:9px 9px #020817;overflow:hidden}
.intro-number{display:grid;place-items:center;background:var(--entry-color);border-right:5px solid #fff;color:var(--entry-ink,#fff);font-size:82px;font-weight:1000;line-height:1;text-shadow:3px 3px rgba(0,0,0,.45)}
.intro-copy{padding:13px 18px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#203f84e8,#213a72d6)}
.intro-copy small{font-size:12px;color:#bde9ff;font-weight:900;letter-spacing:1.5px}
.intro-copy strong{font-size:35px;line-height:1.1;text-shadow:4px 4px #000}
.intro-copy span{margin-top:5px;color:#dbeaff;font-size:13px;font-weight:900}
.intro-mark{display:grid;place-items:center;text-align:center;padding:2px 5px;background:radial-gradient(ellipse at center,#eaf8ff 0,#a4d8ff 58%,#173b78 100%);border-left:5px solid #fff;overflow:hidden}
.byeongmat-logo{position:relative;display:block;width:100%;height:100%;isolation:isolate;font-family:Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif}
.byeongmat-logo img{position:absolute;z-index:3;left:-2%;top:50%;display:block;width:45%;height:auto;object-fit:contain;transform:translateY(-50%);filter:drop-shadow(3px 4px 0 #06142b)}
.byeongmat-logo__type{position:absolute;z-index:2;left:34%;right:0;top:23%;display:block;color:#ffd932;font-size:39px;font-weight:1000;line-height:1;letter-spacing:-.11em;white-space:nowrap;transform:skew(-4deg);-webkit-text-stroke:3px #07152f;paint-order:stroke fill;text-shadow:0 3px 0 #ef8500,0 7px 0 #07152f,2px 9px 0 #43cfff}
.byeongmat-logo__type::before{content:attr(data-text);position:absolute;z-index:-1;inset:0;color:transparent;-webkit-text-stroke:7px #57d8ff;paint-order:stroke fill}
.byeongmat-logo__type::after{content:"";position:absolute;left:7%;right:8%;top:11%;height:14%;border-radius:50%;background:rgba(255,255,255,.7);filter:blur(.4px);opacity:.75}
.byeongmat-logo__ribbon{position:absolute;z-index:1;left:37%;right:2%;bottom:12%;display:block;padding:3px 7px;border:2px solid #ffd94e;background:repeating-linear-gradient(90deg,#fff 0 9px,#16213a 9px 18px);box-shadow:0 4px 0 #06142b;color:#fff;font-family:monospace;font-size:9px;font-weight:1000;letter-spacing:2px;line-height:1;text-align:center;text-shadow:1px 1px 0 #000}
.introducing .race-info-overlay,.introducing .timer-overlay,.introducing .leader-overlay,.introducing .race-state-overlay,.introducing .race-grid aside{opacity:0;pointer-events:none}

@media(max-width:980px){.race-grid aside{position:absolute;right:8px;top:8px;width:158px;margin:0;display:block}.race-grid aside .rank{display:block}.race-info-overlay{left:8px;top:8px;width:250px}.race-info-overlay strong{font-size:19px}.timer-overlay{top:82px;left:12px;transform:none;min-width:170px}.timer-overlay strong{font-size:24px}.leader-overlay{left:8px;bottom:8px;width:230px}.race-state-overlay{right:8px;bottom:8px}.horse-intro{left:3%;right:3%;grid-template-columns:105px 1fr 205px}.intro-number{font-size:68px}}
@media(max-width:620px){.track canvas{min-height:360px}.race-info-overlay{width:185px;padding:6px 8px;gap:0 7px}.race-info-overlay small{font-size:12px}.race-info-overlay strong{font-size:14px}.race-info-overlay span{font-size:9px}.timer-overlay{top:64px;min-width:133px;padding:5px 8px}.timer-overlay small{font-size:9px}.timer-overlay strong{font-size:18px}.race-grid aside{width:118px}.race-grid aside .rank h2{font-size:9px}.rank-item{grid-template-columns:14px 7px 1fr auto;padding:2px;font-size:7px}.rank-item i{width:7px;height:7px;border-width:1px;box-shadow:none}.leader-overlay{width:175px;padding:6px 8px}.leader-overlay strong{font-size:14px}.race-state-overlay{padding:6px 8px;font-size:11px}.race-state-overlay b{width:22px;height:22px}.horse-intro{height:82px;left:2%;right:2%;bottom:4%;grid-template-columns:72px 1fr 120px;border-width:3px}.intro-number{font-size:48px;border-right-width:3px}.intro-copy{padding:7px 9px}.intro-copy small{font-size:8px}.intro-copy strong{font-size:21px}.intro-copy span{font-size:9px}.intro-mark{padding:1px 3px;border-left-width:3px}.byeongmat-logo__type{left:32%;top:25%;font-size:20px;-webkit-text-stroke:2px #07152f;text-shadow:0 2px 0 #ef8500,0 4px 0 #07152f,1px 5px 0 #43cfff}.byeongmat-logo__type::before{-webkit-text-stroke:4px #57d8ff}.byeongmat-logo__ribbon{left:35%;bottom:13%;padding:2px 3px;border-width:1px;box-shadow:0 2px 0 #06142b;font-size:6px;letter-spacing:1px}.reveal{bottom:8px;width:calc(100% - 18px);grid-template-columns:105px 1fr;border-width:2px}.skill-copy{padding:6px 8px}.skill-copy strong{font-size:14px}.skill-copy span{display:none}.result{height:calc(100svh - 88px);max-height:none;padding:9px}.trophy{font-size:29px}.result h1{font-size:23px;margin:3px}.result>small{font-size:8px}.result>p{font-size:10px;line-height:1.25;margin:3px 0 6px}.result-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,.8fr) minmax(0,1.2fr);gap:6px;margin-top:3px}.result-grid>section{padding:6px;border-width:2px}.result-grid h2{font-size:12px;margin-bottom:5px}.finish-row,.payout-row{padding:5px;font-size:10px}.result .actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.result .actions button{min-height:42px;padding:6px 4px;font-size:10px;box-shadow:3px 3px #080612}}
@media(max-width:620px){.topbar button{display:inline-flex;padding:7px 8px;font-size:10px}.topbar nav{gap:4px}.topbar a:not(.brand){padding:7px 8px;font-size:10px}}

body[data-view="horse-racing"] #jukdolBgmControl .jbgm-fab,
body[data-view="horse-racing"] #jukdolAudioControl .jv-btn{display:none!important}
body[data-view="horse-racing"] #jukdolBgmControl .jbgm-panel,
body[data-view="horse-racing"] #jukdolAudioControl .jv-panel{position:fixed!important;right:12px!important;top:78px!important;bottom:auto!important}