/* Sakura, red bridge, river and grass. Existing character assets keep their original colors. */
:root{--kart-ink:#284c43;--kart-pink:#bc4f76;--kart-red:#ba4944;--kart-river:#368b96;--kart-grass:#759857;--kart-paper:#fff8ed}
button:focus-visible,select:focus-visible{outline:3px solid #bd477a;outline-offset:3px}
.modal:not(#overlay){background:#244b4b61;backdrop-filter:blur(3px)}
.modal:not(#overlay) .box{background:linear-gradient(145deg,#fff7f1f2,#edf5dff2);color:var(--kart-ink);border:2px solid #e3a7b5;border-radius:24px;box-shadow:0 12px 35px #264d4033}
.modal:not(#overlay) .box p,.modal:not(#overlay) .box .small{color:#4d695d}
.menuList button{color:var(--kart-ink);background:#fffbf1d9;border:1px solid #9eb48c;border-radius:12px;box-shadow:0 2px 0 #8fa77733}
.menuList button:hover,.menuList button.selected{background:linear-gradient(105deg,#f8cfda,#fff0d9);border-color:#bb5275;box-shadow:0 0 0 2px #f3b7ce;color:#60354b}
#testSettings{border-color:#9bb78d}#testSettings select,#npcCountDraft{color:var(--kart-ink);background:#fffaf1;border:1px solid #8fa895;border-radius:9px;padding:9px;font:inherit}
#testSettings button,#npcCountCancel{color:var(--kart-ink);background:#f6f4df;border-color:#8fa895}
#testApply,#npcCountConfirm{background:linear-gradient(120deg,#d96c8a,#b74b6e)!important;color:#fff!important;border-color:#a44367!important;box-shadow:0 3px 0 #8f3d5966}
html:not([data-kart-display-mode="test"]) #pause>.box>#testSettings{display:none!important}
#npcCountDialog{z-index:15}#npcCountDialog .box{width:min(420px,94vw);padding:28px}
#npcCountDraft{display:block;width:100%;margin-top:10px;min-height:48px}
.npc-count-actions{display:flex;gap:12px;margin-top:22px}.npc-count-actions button{flex:1;min-height:44px;font-size:16px}
/* The scenery and translucent preview card are separate layers. */
.character-select-active #overlay .front-backdrop,body.front-stage-active #overlay:not(.title-cinema) .front-backdrop{background-image:url('pc3-assets.5f34bf4e9a13/selection-sakura-river.webp');background-position:center;opacity:1;transform:none}
.character-select-active #overlay:not(.title-cinema) .front-vignette{background:linear-gradient(90deg,#fff8ed77,#fff8ed29 50%,#fff8ed77)}
/* Native B3 owns the white12% panel and its24px corners. Avoid a second opaque/translucent card. */
#overlay .front-character-layout #frontStage,#overlay .front-gag-stage{background:transparent!important;border:0;border-radius:24px;box-shadow:none}
body.front-stage-active #canvas{background:transparent!important}
#overlay .front-character-layout .front-kicker{color:#8b3659}#overlay #frontCharacterHeading{color:#31584a;text-shadow:2px 2px #fff9ef,0 3px #a8c69a}
#overlay .front-preview-caption h3{color:#284b40;text-shadow:1px 2px #fff7ec}#overlay .front-preview-number{color:#3f6354}
#overlay .front-cast{background:linear-gradient(145deg,#fffaee,#deedc9);border-color:#93ad79}
#overlay .front-cast.selected{background:linear-gradient(145deg,#fff1ee,#f2c3d3);border-color:#ba5078}
#overlay .front-cast.selected span{background:#ffe0eb;color:#6f3656}
/* HUD positions use a central4:3 frame, with complete units kept square-safe. */
#minimap{background:#194d4dcc!important;border-color:#f5ccd8!important;box-shadow:0 4px 12px #173c3426!important}
#raceRank{min-width:0!important;padding:5px!important;border-radius:15px;border-color:#ffe6d5!important;background:linear-gradient(145deg,#e999b2ee,#a73f66ee)!important;color:white;text-shadow:0 1px 2px #5e243366;box-shadow:0 4px 12px #642a3b33}
#raceRankCaption{font-size:clamp(8px,.7vw,12px);letter-spacing:0}#raceRankNumber{font-size:var(--hud-rank-number,44px);color:#fff4b7;line-height:1.04}.race-rank-unit{font-size:12px;margin-left:1px}#raceRankTotal{font-size:10px;margin-left:2px}#raceRankDetail{font-size:10px;line-height:1.1}
#raceRankTotal{display:block;font-size:9px;line-height:1.1;margin-left:0}.hud-compact #raceRankCaption,.hud-compact #raceRankDetail{font-size:8px}.hud-compact #raceRankTotal{display:none}.hud-compact .race-rank-unit{font-size:10px}
#itemPanel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:var(--hud-cell-height) 28px;gap:6px!important;align-items:stretch}
#item,#itemNext{width:100%!important;height:var(--hud-cell-height)!important;min-height:0!important;min-width:0;padding:4px!important;gap:1px;border-radius:16px;background:linear-gradient(145deg,#fff6e9eb,#d9edc9eb)!important;border:2px solid #bad1a4!important;color:#345548;box-shadow:0 4px 10px #224c3226!important}
#item.item-selected,#itemNext.item-selected{background:linear-gradient(145deg,#ffecedeF,#f6d2deef)!important;border-color:#c9527c!important;box-shadow:0 0 0 2px #fff3b4,0 4px 10px #73334c26!important}
#itemIcon,#itemIcon2{width:var(--hud-icon)!important;height:var(--hud-icon)!important;flex:none}
#itemIcon img,#itemIcon2 img,#itemIcon svg,#itemIcon2 svg{display:block;width:100%;height:100%;object-fit:contain}
#itemIcon img,#itemIcon2 img{filter:drop-shadow(0 2px 1px #23452b55)}
#itemName,#itemName2{font-size:clamp(8px,.7vw,12px)!important;white-space:nowrap;line-height:1.2}
#itemName,#itemName2{max-width:100%;overflow:hidden;text-overflow:ellipsis}.hud-compact #itemPanel{grid-template-rows:var(--hud-cell-height) 22px}.hud-compact #itemUse{height:22px}
.hud-compact #itemUse{padding:2px}.hud-compact #itemUse::after{font-size:11px!important}
#itemNext .slotOrder{display:none}#itemUse{grid-column:1/-1;min-height:0!important;height:28px;padding:3px;background:#b7476ce6;color:white;border:1px solid #ffe5d9;border-radius:10px}
#controls button{background:#eff7e6db!important;border-color:#9fba8c!important;color:#315246!important}#controls .accelerator{background:#d76586e8!important;color:#fff!important;border-color:#ffc9d7!important}
#menuButton{background:#fff7e6de;color:#33574c;border-color:#a2bea6}#sound{background:#e5f4f1de;color:#2c6266;border-color:#87b3b8}
#skipIntro{right:auto!important;width:max-content!important;max-height:26px;min-height:24px;min-width:0!important;font-size:11px!important;line-height:16px;padding:4px 7px!important;border-radius:8px;color:#234b42;border:1px solid #f6e1af;background:linear-gradient(90deg,#f1c2d6 var(--hold-progress,0%),#fff7e8ed var(--hold-progress,0%));white-space:nowrap}
/* Native presentation state owns HUD entrance; countdown begins a gentle fade. */
body.race-hud-managed #minimap,body.race-hud-managed #raceRank,body.race-hud-managed #itemPanel{opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;transition:opacity .6s ease-out,transform .6s ease-out}
body.race-hud-managed.race-hud-visible #minimap,body.race-hud-managed.race-hud-visible #raceRank,body.race-hud-managed.race-hud-visible #itemPanel{opacity:1;visibility:visible;transform:none}
body.race-hud-managed.race-hud-visible #itemPanel{pointer-events:auto}
@media(prefers-reduced-motion:reduce){body.race-hud-managed #minimap,body.race-hud-managed #raceRank,body.race-hud-managed #itemPanel{transition:none;transform:none}}
@media(prefers-reduced-motion:reduce){#item,#itemNext,.front-cast{transition:none}.rolling #itemIcon,.rolling #itemIcon2{animation:none}}

/* The same real PNG elements are captured by the recording compositor. */
/* Back shells precede the full-size foreground design in DOM and paint order. */
#itemIcon .red-shell-stack,#itemIcon2 .red-shell-stack{position:relative;display:block;width:100%;height:100%;isolation:isolate}
#itemIcon .red-shell-stack img,#itemIcon2 .red-shell-stack img{position:absolute;top:0;width:60%;height:60%;object-fit:contain}
.red-shell-back-left{left:0;z-index:0}.red-shell-back-right{right:0;z-index:1}
#itemIcon .red-shell-stack .red-shell-front,#itemIcon2 .red-shell-stack .red-shell-front{left:4%;top:8%;width:92%;height:92%;z-index:2}
#itemIcon .red-shell-stack-2 .red-shell-front,#itemIcon2 .red-shell-stack-2 .red-shell-front{left:0}
#itemIcon .red-shell-stack-1 .red-shell-front,#itemIcon2 .red-shell-stack-1 .red-shell-front{left:0;top:0;width:100%;height:100%}