:root{--blue:#238bec;--gold:#ffd033;--red:#f24a3e;--ink:#173e6d;--cream:#fff8e8}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Tahoma,"Noto Sans Thai",sans-serif;background:#178de3}button{font:inherit;border:0;cursor:pointer}.game{position:relative;width:100vw;height:100dvh;min-height:560px;background:url('assets/race-bg.png') center/cover no-repeat;overflow:hidden}.hidden{display:none!important}.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:linear-gradient(90deg,#117fcddf,#117fcd99 50%,transparent);padding:4vw}.intro-card{text-align:center;color:white;filter:drop-shadow(0 9px 0 #0864ad)}.cup{font-size:clamp(70px,8vw,130px)}.intro-card small{background:#f54f4c;border:3px solid white;border-radius:99px;padding:.35em 1em;font-weight:bold}.intro-card h1{font-size:clamp(56px,8vw,120px);line-height:.8;margin:.15em 0;text-shadow:0 6px 0 #1558a7}.intro-card h1 span{color:var(--gold)}.intro-card p{font-size:clamp(18px,2vw,30px);font-weight:bold;text-shadow:0 3px 5px #064b85}.primary{background:linear-gradient(#ffe875,#ffb719);color:#643700;border:4px solid white;border-radius:20px;padding:.55em 1.5em;font-size:clamp(17px,1.5vw,25px);font-weight:bold;box-shadow:0 7px 0 #ad6109}.primary:active{transform:translateY(4px);box-shadow:0 3px 0 #ad6109}
.play{position:absolute;inset:0;display:grid;grid-template-columns:1fr minmax(340px,24%);grid-template-rows:auto auto 1fr;gap:10px;padding:clamp(8px,1vw,18px)}header{grid-column:1/-1;display:grid;grid-template-columns:1fr minmax(260px,34%) 1fr;align-items:center;background:#0a63afe8;border:3px solid #dff4ff;border-radius:19px;padding:7px 14px;color:white;box-shadow:0 6px 0 #06437e}.brand{font-size:clamp(15px,1.4vw,24px)}.progress{text-align:center;font-weight:bold}.progress i{display:block;height:12px;background:#ffffff55;border-radius:99px;overflow:hidden}.progress b{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffe239,#ff4e82);transition:.35s}.tools{text-align:right}.tools button{width:44px;height:44px;border-radius:13px;margin-left:6px;background:white;color:var(--ink);font-size:22px;box-shadow:0 4px 0 #88afd0}.mission{grid-column:1/2;justify-self:center;background:var(--cream);color:var(--ink);border:4px solid #65aaff;border-radius:19px;padding:9px 24px;text-align:center;box-shadow:0 6px 0 #1764a9;font-size:clamp(16px,1.5vw,25px)}.mission span{display:block;color:#f14748;font-size:.65em;margin-top:2px}
.arena{grid-column:1/2;position:relative;min-height:0}.finish-label{position:absolute;right:1%;top:34%;background:#fff;color:#333;border:4px solid var(--gold);border-radius:99px;padding:.3em 1em;font-weight:bold;z-index:2}.runners{position:absolute;inset:0 1% 0 0}.runner{position:absolute;left:2%;width:clamp(72px,8.4vw,140px);height:12%;transition:left 1.8s cubic-bezier(.22,.7,.3,1);z-index:1}.runner img{width:100%;height:125%;object-fit:contain;position:absolute;bottom:0;filter:drop-shadow(0 5px 3px #0005)}.runner b{position:absolute;left:-2px;bottom:0;background:white;color:var(--ink);border:3px solid var(--gold);width:31px;height:31px;border-radius:50%;display:grid;place-items:center;z-index:2}.runner.running img{animation:bob .23s infinite alternate}.runner.done img{animation:none}.runner:nth-child(1){top:33%}.runner:nth-child(2){top:43%}.runner:nth-child(3){top:53%}.runner:nth-child(4){top:63%}.runner:nth-child(5){top:73%}@keyframes bob{to{transform:translateY(-7px) rotate(2deg)}}
.panel{grid-column:2;grid-row:2/4;background:#fff6dfed;color:var(--ink);border:5px solid #ffd477;border-radius:28px;padding:clamp(10px,1vw,18px);box-shadow:0 8px 0 #bd761b;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0}.panel.locked{filter:saturate(.5);pointer-events:none}.panel h2{margin:0;font-size:clamp(19px,1.6vw,28px)}.podium{width:100%;display:flex;align-items:flex-end;justify-content:center;gap:7px;height:31%}.slot{width:31%;border:4px dashed #fff;border-radius:18px 18px 8px 8px;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 5px 0 #754a21;position:relative}.slot b{font-size:clamp(30px,3.3vw,58px)}.slot span{font-weight:bold;font-size:clamp(10px,.9vw,15px)}.slot.first{height:100%;background:#eeb524}.slot.second{height:82%;background:#6a9bd0}.slot.third{height:68%;background:#c87939}.slot img{position:absolute;width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 5px 2px #0004)}.slot.filled b,.slot.filled span{opacity:.15}.slot.wrong{animation:shake .4s}.panel>small{text-align:center}.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;min-height:92px}.card{width:clamp(58px,5vw,82px);height:clamp(70px,8vh,95px);border:3px solid white;border-radius:15px;background:linear-gradient(#dff7ff,#7fcdf4);position:relative;box-shadow:0 4px 0 #3785b6}.card img{width:100%;height:100%;object-fit:contain;pointer-events:none}.card b{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);background:#145fa8;color:white;border-radius:6px;padding:1px 4px;font-size:10px;white-space:nowrap}.card.used{opacity:.3}.card.selected{outline:6px solid var(--gold);transform:translateY(-6px)}.panel .primary{margin-top:auto;padding:.35em 1.2em}.result{background:#147bd4df}@keyframes shake{25%{transform:translateX(-9px)}50%{transform:translateX(9px)}75%{transform:translateX(-6px)}}
.runner{width:clamp(88px,10vw,170px)}
.runner img{height:145%}
.runner b{width:34px;height:34px}
@media(max-aspect-ratio:4/3){.play{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto}.panel{grid-column:1;grid-row:4;height:210px;display:grid;grid-template-columns:1fr 1fr auto}.podium{height:150px}.panel>small{display:none}.mission{grid-column:1}.arena{grid-column:1}.cards{align-items:center}.brand{display:none}header{grid-template-columns:1fr auto}}@media(max-height:650px){.play{padding:5px}.panel{padding:7px}.podium{height:29%}.cards{min-height:70px}.card{height:65px}.mission{padding:5px 20px}}

/* Keep the generated 16:9 track and runner coordinates on the same scale. */
html,body{display:grid;place-items:center;background:#1269ae}
.game{width:min(100vw,calc(100dvh * 16 / 9));height:min(100dvh,calc(100vw * 9 / 16));min-height:0;aspect-ratio:16/9}
.arena{position:absolute;inset:0;z-index:1;pointer-events:none}
.runners{position:absolute;inset:0}
.runner:nth-child(1){top:41%}
.runner:nth-child(2){top:47%}
.runner:nth-child(3){top:53%}
.runner:nth-child(4){top:59%}
.runner:nth-child(5){top:65%}
.runner{margin-left:-22%}
.arena::after{content:"";position:absolute;left:69%;top:48%;bottom:14%;width:clamp(8px,1vw,16px);background:repeating-linear-gradient(to bottom,#fff 0 12px,#222 12px 24px);border:2px solid #fff;box-shadow:0 2px 5px #0005;z-index:0}
.finish-label{left:66%;right:auto;top:43%}
header,.mission,.panel{position:relative;z-index:3}
@media(max-aspect-ratio:4/3){
  .play{grid-template-columns:1fr minmax(215px,34%);grid-template-rows:auto auto 1fr}
  .panel{grid-column:2;grid-row:2/4;height:auto;display:flex}
  .mission{grid-column:1}.podium{height:31%}.panel>small{display:block}.brand{display:block}
  header{grid-template-columns:1fr minmax(170px,34%) 1fr}
  .runner{margin-left:-30%}
  .arena::after{left:61%}
  .finish-label{left:57%}
}