:root { color-scheme:light; --ink:#253050;--muted:#7b829b;--paper:#fffdf9;--rose:#ff6679;--violet:#675fe7;--sky:#61c9fb;--stroke:#e8e6e8; font-family:ui-rounded,"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { background:linear-gradient(155deg,#fff3cb,#fae7ee 60%,#e1e5ff); color:var(--ink); }
button,input { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
#app { max-width:465px; width:100%; height:100%; height:100dvh; margin:auto; box-shadow:0 0 45px #d0b3c350; background:linear-gradient(155deg,#fff9e9,#fff4ee 53%,#f0efff); overflow:hidden; }
.screen { width:100%; height:100%; padding:max(10px,env(safe-area-inset-top)) 15px max(9px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:clamp(6px,1.3vh,12px); }
.hidden { display:none!important; }
.brand { color:#807ca2; letter-spacing:.21em; font-size:10px; font-weight:900; display:flex; align-items:center; gap:7px; flex:none; }
.brand b { color:#db5a7b; } .brand-dot { width:9px;height:9px;border-radius:3px;background:#ff9a73;transform:rotate(22deg);box-shadow:3px -2px 0 #ffe07f; }
.hero h1 { font-size:clamp(26px,7.5vw,37px); letter-spacing:-.09em; font-weight:1000; line-height:1.11; margin:0; white-space:nowrap; }
.hero h1 span { color:#f05c79; }.hero p { font-size:11.5px; font-weight:700; margin:6px 0 0; color:#70778d; }.hero strong{color:#5155ab;}
.setup-card,.entry-card { border:2px solid #fff; background:#ffffffd9; box-shadow:0 5px 18px #817b9f15; border-radius:19px; padding:10px 12px; }
.setup-card { flex:none; display:flex;flex-direction:column;gap:6px; }
.field-head,.color-head,.stats-head,.entry-label { display:flex;justify-content:space-between;align-items:center;font-weight:1000;font-size:11px;letter-spacing:.02em; }
.field-head span,.stats-head span,.entry-label span{font-size:9px;color:#9a9ab1;font-weight:900;letter-spacing:.06em;}
.input-row{display:flex; gap:10px;align-items:center;}
#glyphInput { width:89px; height:38px; border:2px solid #cfcaff; border-radius:12px; background:#fbfaff; outline:none; text-align:center; font-size:24px;font-weight:900;color:#444bb2; }
#glyphInput:focus { border-color:#7770e7; box-shadow:0 0 0 3px #9087ff2d; }
.field-note{font-size:11px;line-height:1.55;color:#83849c;font-weight:800;}
.field-error { margin:0; font-size:11px;color:#df4167;font-weight:900;min-height:0; }
.field-error:empty{display:none;}
.preview-slab { height:95px;position:relative;border-radius:13px;overflow:hidden; background:repeating-linear-gradient(0deg,#e9f5fa,#e9f5fa 22px,#e1eff7 22px,#e1eff7 23px); }
#previewCanvas{width:100%;height:100%;display:block;}
.preview-tag{position:absolute;right:9px;top:7px;font-size:9px;letter-spacing:.14em;font-weight:1000;color:#91a4b5;pointer-events:none;}
.color-head{font-size:10px; color:#737b93;}.color-head #colorName{color:#514fa3;}
.colors { display:flex; gap:9px; align-items:center; }
.color-dot { width:27px; height:27px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #e7e2e7,0 2px 5px #0001;position:relative; padding:0; }
.color-dot[aria-pressed=true]{box-shadow:0 0 0 2px #625dec,0 2px 5px #0002;transform:scale(1.07);}
.color-dot[aria-pressed=true]:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#253050;font-size:13px;filter:drop-shadow(0 1px #fff);font-weight:1000;}
.stats-head{margin-top:3px;}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;}
.stat{display:flex;gap:5px;align-items:center;justify-content:space-between;min-width:0;}
.stat span{font-size:9px;letter-spacing:.04em;font-weight:900;color:#777f99;white-space:nowrap;}
.stat-bars{display:flex;gap:3px;}
.stat-bars i{width:11px;height:8px;border-radius:2px;background:#e7e8ee;display:block;transform:skewX(-13deg);}
.stat-bars i.on{background:#7675ee;}.stat:nth-child(2) .stat-bars i.on{background:#ff9780;}.stat:nth-child(3) .stat-bars i.on{background:#5bd2aa;}.stat:nth-child(4) .stat-bars i.on{background:#ffbe55;}
.entry-card { padding:9px 12px;flex:none; }
.entrants{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-top:5px;}
.entrant{text-align:center;min-width:0;flex:1;}.entrant span{display:block;color:#9e9aac;font-size:8px;font-weight:1000;letter-spacing:.04em;}.entrant b{font-size:23px;line-height:1.3;color:#6067ac;}.entrant.you b{color:#e9657b;}.vs{font-size:10px;font-weight:1000;color:#b2adbd;}
.primary-button{min-height:47px;width:100%;border:0;border-radius:15px;background:linear-gradient(120deg,#ff657a,#ff9072);color:white;box-shadow:0 5px 0 #e84c65,0 9px 14px #ff758054;font-size:20px;font-weight:1000;letter-spacing:.065em;display:flex;align-items:center;justify-content:center;gap:17px;flex:none;}
.primary-button:active{transform:translateY(3px);box-shadow:0 2px 0 #e84c65;}.primary-button span{font-size:17px;}
.title-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px;color:#8c87a1;font-size:9px;font-weight:900;flex:none;min-height:30px;}
.mute-button{min-width:79px;height:31px;background:#ffffffcb;color:#666584;border:1px solid #e5deeb;border-radius:16px;padding:0 10px;font-size:11px;font-weight:900;white-space:nowrap;}
.race-screen{gap:5px;padding: max(7px,env(safe-area-inset-top)) 8px max(7px,env(safe-area-inset-bottom));}
.race-top{display:flex;justify-content:space-between;gap:7px;align-items:center;flex:none;min-height:49px;padding:0 6px;}
.race-hud-primary{display:flex;gap:9px;align-items:center;}.race-hud-primary #placeBadge{width:51px;height:45px;display:grid;place-content:center;border-radius:13px;background:#fff;border:2px solid #fbd4d5;box-shadow:0 2px 5px #0001;color:#f36476;font-size:27px;font-weight:1000;line-height:1;}
#placeBadge small{display:inline;font-size:11px;}.race-hud-primary div{display:flex;flex-direction:column;gap:2px;}.race-hud-primary b{font-size:16px;font-weight:1000;}.race-hud-primary div span{font-size:11px;color:#8b8da6;font-weight:900;font-variant-numeric:tabular-nums;}
.race-stage{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;position:relative;border:3px solid #fff;border-radius:20px;overflow:hidden;background:#bce9b2;touch-action:manipulation;box-shadow:0 4px 10px #56506b20;}
#raceCanvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:manipulation;}
.countdown{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);color:#fff;font-size:clamp(60px,19vw,110px);font-weight:1000;line-height:1;text-shadow:0 7px 0 #5f5cca,0 12px 22px #44388799;pointer-events:none;-webkit-text-stroke:2px #5d5dc0;}
.countdown:empty{display:none;}.race-toast{pointer-events:none;position:absolute;left:50%;top:14%;transform:translateX(-50%);background:#29264cdb;border-radius:18px;padding:5px 14px;color:white;font-size:12px;font-weight:1000;opacity:0;transition:opacity .1s;white-space:nowrap;}.race-toast.show{opacity:1;}
.race-bottom{display:flex;gap:7px;flex:none;height:67px;}.standings{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:4px;flex:1;}.rank-item{min-width:0;border:1px solid #ebe5eb;border-radius:11px;background:#fffffff2;display:flex;align-items:center;gap:3px;padding:4px 5px;height:31px;font-size:11px;font-weight:1000;}.rank-item.is-player{background:#fff0f0;border-color:#ffabb6;}.rank-num{font-size:10px;color:#aaa2b1;}.rank-char{font-size:15px;line-height:1;color:#434c84;}.rank-item small{font-size:9px;color:#a39cac;margin-left:auto;}.boost-button{width:39%;border:0;border-radius:13px;box-shadow:0 3px 0 #df9140;background:linear-gradient(135deg,#ffdf65,#ffa855);color:#644029;display:flex;flex-direction:column;justify-content:center;gap:0;align-items:center;font-weight:1000;font-size:14px;}.boost-button b{font-size:21px;line-height:1.2;}.boost-button:disabled{opacity:.58;box-shadow:none;}.boost-button.active{background:linear-gradient(135deg,#6ee5fa,#75a5ff);color:#183967;box-shadow:0 3px 0 #527bd1;}.race-caption{height:15px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.025em;font-weight:900;color:#91859a;padding:0 3px;flex:none;}
.result-screen{gap:clamp(5px,1.5vh,13px)}.result-heading{text-align:center;}.result-heading>span{font-size:10px;letter-spacing:.22em;color:#fe8e72;font-weight:1000;}.result-heading h2{margin:0;font-size:clamp(33px,10vw,48px);letter-spacing:.02em;color:#32335f;line-height:1.12;font-weight:1000;}.result-heading p{margin:3px 0 0;color:#8a88a0;font-size:11px;font-weight:800;}.result-podium{height:77px;display:flex;justify-content:center;align-items:end;gap:11px;flex:none;}.podium-item{display:flex;align-items:center;justify-content:center;flex-direction:column;width:25%;min-width:0;gap:2px;}.podium-item .podium-glyph{font-size:33px;text-shadow:0 2px 0 #fff;}.podium-item:first-child .podium-glyph{font-size:39px;}.podium-item small{font-size:9px;font-weight:1000;color:#8d879e;}.podium-item.is-player small{color:#ed6078;}
.result-standings{background:#fffc;border:2px solid white;border-radius:17px;padding:7px 10px;box-shadow:0 4px 14px #65587b12;}.result-row{display:flex;gap:8px;align-items:center;min-height:31px;border-bottom:1px dashed #e7e2ed;font-weight:1000;}.result-row:last-child{border-bottom:0;}.result-row .ordinal{width:33px;color:#7569ac;font-size:12px;}.result-row .car-glyph{font-size:23px;line-height:1;}.result-row .identity{font-size:10px;color:#9290a8;}.result-row .result-time{margin-left:auto;color:#4a5478;font-size:13px;font-variant-numeric:tabular-nums;}.result-row.player-row{background:#fff1ef;border-radius:7px;padding:0 4px;}
.result-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}.result-details>div{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;background:#fff9;border-radius:12px;padding:9px 3px;min-width:0;}.result-details span{font-size:9px;font-weight:1000;letter-spacing:.03em;color:#9992a5;}.result-details strong{font-size:clamp(13px,3.9vw,18px);white-space:nowrap;color:#4e52a7;font-weight:1000;font-variant-numeric:tabular-nums;}
.record-label{text-align:center;font-size:14px;font-weight:1000;letter-spacing:.04em;color:#ef6175;min-height:18px;margin:0;}.record-label:empty{visibility:hidden;}.secondary-button{border:2px solid #ddd9ec;background:#fff9;color:#69688e;font-size:13px;font-weight:1000;width:100%;border-radius:13px;min-height:36px;flex:none;}
@media(max-height:675px){.screen{gap:6px;padding-top:7px;padding-bottom:6px}.setup-card{padding:8px 11px;gap:5px}.preview-slab{height:83px}.color-dot{width:24px;height:24px}.hero h1{font-size:clamp(25px,7.5vw,34px)}.hero p{margin-top:3px}.primary-button{min-height:43px}.entry-card{padding:7px 10px}.entrant b{font-size:21px}.result-podium{height:67px}.result-details>div{padding:7px 2px}.result-row{min-height:28px}}
@media(max-height:555px){.hero p{font-size:10px}.preview-slab{height:62px}.setup-card{gap:3px}.stats{gap:3px 7px}.input-row #glyphInput{height:32px}.entry-card{padding:5px 9px}.entry-label{font-size:9px}.entrant b{font-size:18px}.title-foot{min-height:25px}.result-podium{height:48px}.podium-item .podium-glyph{font-size:24px}.podium-item:first-child .podium-glyph{font-size:28px}.result-heading h2{font-size:30px}}
@media(max-width:340px){.screen{padding-left:10px;padding-right:10px}.hero h1{font-size:27px}.stat-bars i{width:9px}.stats{gap:5px}.color-dot{width:24px;height:24px}.rank-item{padding:3px;gap:2px}}