@import "https://fonts.googleapis.com/css2?family=Jua&display=swap";
:root{--sky-top:#80cafb;--sky-mid:#d6efff;--field-top:#9fd176;--field-bottom:#437f2f;--dirt:#d6b07a;--dirt-dark:#ab854f;--panel-bg:#fffaeceb;--panel-border:#32210f;--panel-shadow:0 8px 18px #29150433;--accent:#ef5a2f;--accent-dark:#b9300a;--success:#168c3d;--fail:#b31616;--track-top:#f1dfbf;--track-bottom:#dfbf8e;--lane-top:#d6b07a;--lane-bottom:#c89f67}*{box-sizing:border-box}body{background:radial-gradient(circle at 9% 14%,#ffffff94 0%,#fff0 26%),radial-gradient(circle at 82% 8%,#c994ff38 0%,#c994ff00 24%),linear-gradient(180deg,var(--sky-top)0%,var(--sky-mid)35%,var(--field-top)35%,var(--field-bottom)100%);color:#1e1208;place-items:center;min-height:100svh;margin:0;padding:12px;font-family:Jua,Apple SD Gothic Neo,sans-serif;display:grid;position:relative;overflow:hidden}body:before,body:after{content:"";pointer-events:none;z-index:0;position:fixed}body:before{background:radial-gradient(circle,#ffe29659 0%,#ffe29600 70%);border-radius:50%;width:340px;height:340px;inset:auto auto -140px -100px}body:after{background:radial-gradient(circle,#8e53ff38 0%,#8e53ff00 72%);border-radius:44% 56% 60% 40%;width:300px;height:300px;inset:-120px -80px auto auto}.game-shell{z-index:1;border:4px solid var(--panel-border);background:linear-gradient(#fffdf7f7 0%,#f7ecd3f5 100%);border-radius:22px;grid-template:"title title title""prediction track board"minmax(0,1.22fr)"controls track history"minmax(0,.78fr)"status status status"/minmax(280px,.95fr) minmax(520px,1.7fr) minmax(280px,.95fr);gap:10px;width:min(1500px,100%);height:min(950px,100svh - 18px);padding:12px;display:grid;position:relative;overflow:hidden;box-shadow:0 18px 42px #1a0e054d}.game-shell>*{min-height:0}.title-wrap{text-align:center;background:linear-gradient(#fff9 0%,#fff5e259 100%);border:2px solid #32210f47;border-radius:14px;grid-area:title;margin:0;padding:2px 8px 4px}.kicker{color:#914209;letter-spacing:1.2px;margin:0;font-size:14px}h1{margin:2px 0 0;font-size:clamp(23px,2.6vw,35px);line-height:1.02}.subtitle{color:#3b2a16;margin:3px 0 0;font-size:clamp(13px,1.1vw,16px)}.panel{background:var(--panel-bg);border:3px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:14px;margin:0;padding:9px}.panel h2{margin:0 0 8px;font-size:clamp(20px,1.7vw,25px)}.prediction-panel{flex-direction:column;grid-area:prediction;min-height:0;display:flex;overflow:hidden}.prediction-buttons{grid-template-columns:1fr;gap:6px;min-height:0;display:grid}.pick-btn,.action-btn{font:inherit;cursor:pointer;border:3px solid #24160a;border-radius:12px;font-size:clamp(15px,1.2vw,18px);transition:transform .15s,box-shadow .15s}.pick-btn{text-align:left;background:#fff;grid-template-columns:46px 1fr;grid-template-areas:"avatar title""avatar speed""avatar prob""avatar odds";align-items:center;gap:1px 8px;padding:5px 7px;display:grid}.pick-btn .pick-avatar{grid-area:avatar}.pick-btn .pick-title{grid-area:title}.pick-btn .pick-speed{grid-area:speed}.pick-btn .pick-prob{grid-area:prob}.pick-btn .pick-odds{grid-area:odds}.pick-btn:hover,.action-btn:hover{transform:translateY(-1px);box-shadow:0 5px #0003}.pick-btn.active{background:#fff0cc;border-color:#c56d08}.pick-title{font-size:clamp(15px,1.05vw,18px)}.pick-avatar{filter:drop-shadow(0 2px 1px #1a0c0540);-webkit-user-select:none;user-select:none;width:40px;height:auto;transform:scaleX(-1)}.pick-meta{color:#3f2e1c;font-size:clamp(11px,.78vw,13px);line-height:1.1}.pick-odds{color:#8f260a}.pick-prob{color:#1a4a8c}.pick-btn:disabled,.action-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.controls-panel{grid-area:controls;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:7px;display:grid}.bet-wrap,.coin-wrap,.bgm-wrap,.skin-wrap,.coupon-wrap{grid-column:span 2}.action-btn{padding:7px;font-size:clamp(13px,.95vw,16px)}.action-btn.start{background:var(--accent);color:#fff;border-color:var(--accent-dark)}.action-btn.reset{color:#fff;background:#2f4a78;border-color:#1c2f50}.action-btn.charge{color:#fff;background:#8a5827;border-color:#653c17}.action-btn.sound{color:#fff;background:#20625f;border-color:#14403e}.action-btn.sound.off{background:#7a8585;border-color:#4c5959}.action-btn.bgm{color:#fff;background:#6b3f95;border-color:#4b2a6f}.action-btn.bgm.off{background:#7a8585;border-color:#4c5959}.bet-wrap{flex-direction:column;gap:3px;font-size:16px;display:flex}.bet-wrap input{width:100%;font:inherit;border:2px solid #332112;border-radius:10px;padding:6px 9px;font-size:18px}.bet-wrap input.invalid{border-color:var(--fail);background:#ffe2e2}.coin-wrap{margin:0;font-size:clamp(16px,1.1vw,20px)}.bgm-wrap{flex-direction:column;gap:3px;font-size:16px;display:flex}.bgm-wrap input[type=range]{accent-color:#5c3485;width:100%}.skin-wrap{flex-direction:column;gap:3px;font-size:16px;display:flex}.skin-wrap select{width:100%;font:inherit;background:#fffef7;border:2px solid #332112;border-radius:10px;padding:6px 9px;font-size:18px}.coupon-wrap{background:linear-gradient(#fff9ea 0%,#ffe7be 100%);border:2px solid #5d3a10;border-radius:10px;gap:6px;padding:7px 9px;display:grid}.coupon-title{color:#5a3410;margin:0;font-size:15px}.coupon-text{color:#46280d;margin:0;font-size:clamp(13px,.92vw,16px);font-weight:600}.coupon-text.has-coupon{color:#7b1fa3}.action-btn.coupon-copy{color:#fff;background:#7f2fb5;border-color:#5a2080;padding:6px;font-size:clamp(12px,.88vw,15px)}.board-panel{flex-direction:column;grid-area:board;min-height:0;display:flex}.board-panel .rank-grid{grid-template-columns:1fr;gap:7px;display:grid}.rank-box{text-align:center;background:#fffef9;border:2px dashed #503616;border-radius:12px;place-items:center;min-height:64px;font-size:clamp(17px,1.3vw,23px);display:grid}.coin-ranking{border-top:2px dashed #6e4b24;flex-direction:column;gap:6px;min-height:0;margin-top:8px;padding-top:8px;display:flex}.coin-ranking-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.coin-ranking-head h3{margin:0;font-size:clamp(16px,1.08vw,20px)}.coin-ranking-meta{color:#5c4225;margin:0;font-size:clamp(11px,.74vw,13px)}.coin-ranking-list{gap:4px;max-height:170px;margin:0;padding:0 4px 0 0;list-style:none;display:grid;overflow:auto}.coin-ranking-item{background:#fffdf6;border:2px solid #6c4b2a;border-radius:10px;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:5px 8px;font-size:clamp(12px,.82vw,14px);display:grid}.coin-ranking-item.me{background:#f8efff;border-color:#7f2fb5}.coin-rank-num{color:#4d2a08;font-weight:700}.coin-rank-name{color:#1f1d2a}.coin-rank-coins{color:#3f2a0e;font-weight:700}.ranking-empty{color:#5a4122;background:#fffef9;border:2px dashed #6f5835;border-radius:10px;padding:7px 8px;font-size:clamp(12px,.82vw,14px)}.history-panel{flex-direction:column;grid-area:history;min-height:0;display:flex}.history-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.history-summary{margin:0;font-size:clamp(15px,1vw,18px)}#histProfit{color:#4a2f0f}#histProfit.plus{color:var(--success)}#histProfit.minus{color:var(--fail)}.history-list{gap:6px;min-height:0;margin:8px 0 0;padding:0 4px 0 0;list-style:none;display:grid;overflow:auto}.history-item{background:#fffef7;border:2px solid #664528;border-radius:10px;gap:3px;padding:7px 9px;font-size:clamp(13px,.92vw,16px);display:grid}.history-item.win{background:#f1fff5;border-color:#2c7d3f}.history-item.loss{background:#fff1ee;border-color:#8e3a28}.history-line-main{justify-content:space-between;gap:6px;display:flex}.history-round{font-weight:600}.history-empty{color:#5a4122;background:#fffef9;border:2px dashed #6f5835;border-radius:10px;padding:9px;font-size:clamp(14px,.92vw,16px)}.race-track{background:linear-gradient(180deg,var(--track-top)0%,var(--track-bottom)100%);border:4px solid #6b471d;border-radius:14px;grid-area:track;grid-template-rows:repeat(3,minmax(86px,1fr));gap:6px;min-height:0;padding:8px;display:grid}.lane{border:2px dashed var(--dirt-dark);background:linear-gradient(180deg,var(--lane-top)0%,var(--lane-bottom)100%);border-radius:12px;min-height:86px;position:relative;overflow:hidden}.lane+.lane{margin-top:0}.lane-label{color:#44290e;font-size:15px;position:absolute;top:6px;left:6px}.finish-line{background-image:linear-gradient(45deg,#111 25%,#fff 25% 50%,#111 50% 75%,#fff 75% 100%);background-size:12px 12px;border:1px solid #1d1d1d;width:14px;height:calc(100% - 16px);position:absolute;top:8px;right:10px}.obstacle-pop{opacity:0;pointer-events:none;z-index:4;filter:drop-shadow(0 2px 1px #00000059);font-size:24px;line-height:1;position:absolute;top:50%;left:42px;transform:translateY(-50%)scale(.2)rotate(-16deg)}.obstacle-pop.show{animation:.58s ease-out forwards obstacle-pop}.finish-fan{pointer-events:none;z-index:3;align-items:flex-end;gap:4px;display:flex;position:absolute;top:8px;right:30px}.fan-person{transform-origin:50% 100%;filter:drop-shadow(0 2px #0000003d);font-size:22px;line-height:1;animation:.68s ease-in-out infinite alternate fan-bob}.fan-lettuce{transform-origin:5px 20px;border:2px solid #2b6c28;border-radius:45% 55% 48% 52%;width:18px;height:22px;animation:.36s ease-in-out infinite alternate lettuce-wave;position:relative;box-shadow:inset 0 1px #ffffff59,0 1px #0003}.fan-lettuce:after{content:"";background:#674019;border-radius:2px;width:4px;height:6px;position:absolute;bottom:-5px;left:6px}.fan-1 .fan-lettuce{background:radial-gradient(circle at 35% 28%,#d8ff9c 0%,#5ad548 60%,#2e9d2b 100%);border-color:#2f7f2b}.fan-2 .fan-lettuce{background:radial-gradient(circle at 35% 28%,#f3cbff 0%,#be67e7 60%,#7f39b1 100%);border-color:#703094}.fan-3 .fan-lettuce{background:radial-gradient(circle at 35% 28%,#ffe7b5 0%,#ffab4f 60%,#db6a15 100%);border-color:#ad4c0e}.fan-2 .fan-person{animation-delay:.12s}.fan-2 .fan-lettuce{animation-delay:80ms}.fan-3 .fan-person{animation-delay:.22s}.fan-3 .fan-lettuce{animation-delay:.16s}@keyframes fan-bob{0%{transform:translateY(0)rotate(-3deg)}to{transform:translateY(-1px)rotate(3deg)}}@keyframes lettuce-wave{0%{transform:rotate(-16deg)scale(1)}to{transform:rotate(19deg)scale(1.06)}}@keyframes obstacle-pop{0%{opacity:0;transform:translateY(-50%)scale(.2)rotate(-16deg)}20%{opacity:1;transform:translateY(-70%)scale(1)rotate(10deg)}72%{opacity:1;transform:translateY(-88%)scale(1.12)rotate(-7deg)}to{opacity:0;transform:translateY(-110%)scale(.9)rotate(4deg)}}.snail{filter:drop-shadow(0 3px 2px #1b110859);z-index:2;height:clamp(52px,5.1vh,68px);position:absolute;top:50%;transform:translateY(-50%)}.snail-sprite{-webkit-user-select:none;user-select:none;transform-origin:52% 78%;width:auto;height:100%;animation:.32s ease-in-out infinite alternate snail-run;display:block;transform:scaleX(-1)}.snail.is-boost .snail-sprite{animation-duration:.18s}.snail.is-hit .snail-sprite{animation:.15s ease-in-out infinite alternate snail-hit}.snail.is-jump{animation:.16s ease-in-out infinite alternate snail-jump-bounce}@keyframes snail-run{0%{transform:translateY(1px)rotate(1.1deg)scaleX(-1)}to{transform:translateY(-2px)rotate(-1.1deg)scaleX(-1)}}@keyframes snail-hit{0%{transform:translateY(1px)rotate(3.2deg)scaleX(-1)}to{transform:translateY(-1px)rotate(-3.2deg)scaleX(-1)}}@keyframes snail-jump-bounce{0%{transform:translateY(-50%)}to{transform:translateY(-72%)}}.tag{background:var(--tag-bg,#f7f7f7);min-width:28px;height:26px;color:var(--tag-fg,#111);z-index:3;border:2px solid #312112;border-radius:50%;place-items:center;font-size:15px;font-weight:600;display:grid;position:absolute;top:-7px;right:-8px}.status-text{text-align:center;background:#fffcf4c7;border:2px solid #32210f66;border-radius:12px;grid-area:status;min-height:0;margin:0;padding:8px 12px;font-size:clamp(19px,1.8vw,29px)}.status-text.success{color:var(--success)}.status-text.fail{color:var(--fail)}.event-overlay{pointer-events:none;z-index:86;opacity:0;visibility:hidden;background:radial-gradient(circle at 12% 14%,#ffffff40 0%,#fff0 34%),radial-gradient(circle at 88% 16%,#ffd85d33 0%,#ffd85d00 30%),linear-gradient(135deg,#081024a8 0%,#22083dc2 100%);place-items:center;transition:opacity .12s,visibility .12s step-end;display:grid;position:fixed;inset:0}.event-overlay.show{opacity:1;visibility:visible}.event-overlay:before{content:"";opacity:.32;background:repeating-linear-gradient(-18deg,#ffffff1f 0 14px,#fff0 14px 36px);animation:1.1s linear infinite overlay-lines;position:absolute;inset:0}.event-card{color:#fff;text-align:center;opacity:0;background:linear-gradient(160deg,#70d6ffeb 0%,#956dfff2 100%);border:4px solid #f0f6ff;border-radius:28px;gap:10px;width:min(90vw,760px);padding:clamp(20px,3.7vw,40px) clamp(22px,4.2vw,50px);display:grid;position:relative;transform:scale(.84)translateY(34px);box-shadow:0 20px 42px #06081e70}.event-overlay.show .event-card{animation:.38s cubic-bezier(.14,.82,.28,1.14) forwards event-pop}.event-overlay.tone-danger .event-card{background:linear-gradient(160deg,#ff7575f2 0%,#951212f2 100%);border-color:#ffe6e6}.event-overlay.tone-drink .event-card{background:linear-gradient(160deg,#70dcfff0 0%,#537dfff2 100%);border-color:#ebf9ff}.event-overlay.tone-boost .event-card{color:#381a00;background:linear-gradient(160deg,#ffe26cf2 0%,#ff802ef2 100%);border-color:#fff0d3}.event-badge{letter-spacing:.6px;background:#1216313d;border:2px solid #ffffffd9;border-radius:999px;justify-self:center;margin:0;padding:8px 16px;font-size:clamp(16px,2vw,24px)}.event-icon{text-shadow:0 6px #0000003b;margin:0;font-size:clamp(58px,10vw,116px);line-height:1}.event-title{letter-spacing:.6px;margin:0;font-size:clamp(34px,5vw,66px);line-height:1.05}.event-desc{margin:0;font-size:clamp(18px,2.2vw,32px);line-height:1.2}.coupon-modal{z-index:120;opacity:0;visibility:hidden;pointer-events:none;background:linear-gradient(160deg,#090e1ca8 0%,#2c1646bd 100%);place-items:center;padding:18px;transition:opacity .15s,visibility .15s step-end;display:grid;position:fixed;inset:0}.coupon-modal.show{opacity:1;visibility:visible;pointer-events:auto}.coupon-modal-card{color:#3f1d04;text-align:center;background:linear-gradient(165deg,#ffe989 0%,#ffb254 55%,#ff7e42 100%);border:4px solid #fff4d2;border-radius:24px;gap:10px;width:min(92vw,640px);padding:clamp(22px,3.6vw,36px);animation:.34s ease-out coupon-modal-pop;display:grid;box-shadow:0 24px 46px #08082061}.coupon-modal-kicker{letter-spacing:1.4px;margin:0;font-size:clamp(14px,1vw,16px)}.coupon-modal-title{margin:0;font-size:clamp(30px,4.2vw,52px);line-height:1.08}.coupon-modal-winner{color:#4a250a;margin:0;font-size:clamp(16px,1.3vw,22px)}.coupon-modal-code{color:#4d0d7a;letter-spacing:.8px;background:#fffc;border:3px dashed #6e2d9f;border-radius:14px;margin:4px 0 0;padding:10px 12px;font-size:clamp(19px,2.2vw,31px);font-weight:700}.coupon-modal-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px;display:grid}.action-btn.coupon-modal-close{color:#fff;background:#2f4a78;border-color:#1c2f50}body.screen-shake .game-shell{animation:.34s linear arcade-shake}@keyframes overlay-lines{0%{transform:translate(0)}to{transform:translate(64px)}}@keyframes event-pop{0%{opacity:0;transform:scale(.84)translateY(34px)}45%{opacity:1;transform:scale(1.06)translateY(0)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes arcade-shake{0%{transform:translate(0)rotate(0)}16%{transform:translate(-7px,3px)rotate(-.5deg)}33%{transform:translate(8px,-2px)rotate(.45deg)}50%{transform:translate(-7px,-2px)rotate(-.35deg)}68%{transform:translate(6px,2px)rotate(.3deg)}84%{transform:translate(-4px,1px)rotate(-.2deg)}to{transform:translate(0)rotate(0)}}@keyframes coupon-modal-pop{0%{opacity:0;transform:scale(.86)translateY(24px)}58%{opacity:1;transform:scale(1.03)translateY(0)}to{opacity:1;transform:scale(1)translateY(0)}}.confetti-canvas{pointer-events:none;z-index:90;opacity:0;width:100vw;height:100svh;transition:opacity .2s;position:fixed;inset:0}.confetti-canvas.show{opacity:1}@media (max-height:880px){body{padding:8px}.game-shell{grid-template-rows:auto minmax(0,1.3fr) minmax(0,.7fr) auto;gap:8px;height:calc(100svh - 10px);padding:8px}.title-wrap{padding:1px 8px 2px}.kicker{font-size:12px}h1{margin-top:1px;font-size:clamp(18px,2vw,27px)}.subtitle{display:none}.panel{padding:7px}.panel h2{margin-bottom:6px;font-size:clamp(16px,1.1vw,19px)}.prediction-buttons{gap:4px}.pick-btn{grid-template-columns:38px 1fr;column-gap:6px;padding:4px 6px}.pick-avatar{width:32px}.pick-title{font-size:clamp(13px,.9vw,15px)}.pick-meta{font-size:clamp(10px,.66vw,12px)}.controls-panel{gap:5px}.action-btn{padding:6px;font-size:clamp(11px,.8vw,14px)}.bet-wrap,.bgm-wrap,.skin-wrap{font-size:14px}.bet-wrap input,.skin-wrap select{padding:5px 8px;font-size:16px}.coin-wrap{font-size:clamp(14px,.95vw,18px)}.board-panel .rank-grid{gap:5px}.rank-box{min-height:52px;font-size:clamp(14px,1vw,18px)}.history-list{gap:4px}.history-item{padding:6px 8px;font-size:clamp(11px,.72vw,13px)}.race-track{grid-template-rows:repeat(3,minmax(78px,1fr));gap:5px;padding:7px}.lane{min-height:78px}.snail{height:clamp(46px,4.3vh,56px)}.status-text{padding:6px 10px;font-size:clamp(16px,1.3vw,22px)}}@media (max-width:1220px){body{padding:12px;overflow:auto}.game-shell{grid-template:"title""prediction""controls""board""history""track""status"/1fr;width:min(980px,100%);height:auto;max-height:none}.prediction-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}.pick-btn{text-align:center;grid-template-columns:1fr;grid-template-areas:"avatar""title""speed""prob""odds";justify-items:center;row-gap:2px}.controls-panel{grid-template-columns:repeat(3,minmax(0,1fr))}.bet-wrap,.coin-wrap,.bgm-wrap,.skin-wrap,.coupon-wrap{grid-column:span 3}.board-panel .rank-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.history-list{max-height:260px}.race-track{min-height:320px}.lane{min-height:94px}}@media (max-width:720px){.game-shell{border-width:3px;border-radius:16px;gap:8px;padding:10px}.title-wrap{text-align:center}.prediction-buttons,.controls-panel,.board-panel .rank-grid{grid-template-columns:1fr}.bet-wrap,.coin-wrap,.bgm-wrap,.skin-wrap,.coupon-wrap{grid-column:auto}.history-head{flex-direction:column;align-items:flex-start}.snail{height:68px}.status-text{font-size:clamp(18px,5.8vw,24px)}.event-card{border-radius:22px;gap:8px;width:min(94vw,640px);padding:20px 16px}.event-title{font-size:clamp(26px,7.5vw,44px)}.event-desc{font-size:clamp(16px,4.4vw,24px)}.coin-ranking-head{flex-direction:column;align-items:flex-start;gap:2px}.coin-ranking-list{max-height:220px}.coupon-modal-card{border-radius:18px;gap:8px;padding:20px 14px}.coupon-modal-title{font-size:clamp(26px,7.2vw,40px)}.coupon-modal-code{font-size:clamp(16px,5vw,24px)}.coupon-modal-actions{grid-template-columns:1fr}}