/* Three live inventory wells inside the illustrated dashboard. */
#race-screen .power-panel{overflow:visible}
#race-screen .power-panel .panel-title{display:flex;position:absolute;left:5%;right:5%;top:9%;font-size:clamp(8px,.8vw,14px);letter-spacing:.14em;color:#b9e8ff;line-height:1}
#race-screen .power-panel .panel-title>span{font-size:inherit;color:#5edfff;letter-spacing:.04em}
#race-screen #power-grid{inset:25% 5% 18%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3%;align-items:stretch}
#race-screen .inventory-slot{--power:#3b7297;position:relative;min-width:0;display:flex;align-items:center;gap:3%;padding:4% 5%;background:linear-gradient(120deg,#081725ec,#020813f5);border:1px solid color-mix(in srgb,var(--power) 70%,#14293c);box-shadow:inset 0 0 16px #0008,0 1px 0 #88d7ff55;clip-path:polygon(6% 0,94% 0,100% 15%,100% 85%,94% 100%,6% 100%,0 85%,0 15%)}
#race-screen .inventory-number{position:absolute;right:6%;top:7%;color:#5f85a2;font-size:clamp(7px,.6vw,11px);font-weight:700}
#race-screen .inventory-slot>.power-art{visibility:visible;display:block;flex:0 0 37%;width:37%;height:auto;aspect-ratio:1;background-image:url('../public/assets/ui-v2/power-badges.png');background-size:400% 200%;background-position:var(--badge-x) var(--badge-y);background-repeat:no-repeat;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--power) 40%,transparent))}
#race-screen .inventory-empty-mark{flex:0 0 37%;font-size:clamp(19px,2.3vw,42px);text-align:center;color:#254c68;font-weight:300;line-height:1}
#race-screen .inventory-copy{min-width:0;display:flex;flex-direction:column;gap:4px;white-space:nowrap}
#race-screen .inventory-copy>b{color:var(--power);font-size:clamp(9px,1vw,19px);font-style:italic;line-height:1}
#race-screen .inventory-copy>small{font-size:clamp(6px,.52vw,10px);letter-spacing:.04em;color:#8ba5bb;line-height:1.2}
#race-screen .inventory-slot.empty{border-color:#284b67;background:linear-gradient(125deg,#07111ee8,#06101bcc)}
#race-screen .inventory-slot.empty .inventory-copy>b{color:#496b86}
#race-screen .inventory-slot.empty .inventory-copy>small{color:#3d5d78}
#race-screen .inventory-charge{position:absolute;left:8%;right:8%;bottom:5%;height:2px;background:#163144;overflow:hidden}
#race-screen .inventory-charge:after{content:'';display:block;height:100%;background:var(--power);transform:scaleX(var(--charge,0));transform-origin:left;box-shadow:0 0 4px var(--power)}
#race-screen .inventory-slot.stored{box-shadow:inset 0 0 15px color-mix(in srgb,var(--power) 10%,transparent),0 0 9px color-mix(in srgb,var(--power) 18%,transparent);animation:inventory-acquire .35s ease-out both}
#race-screen .inventory-slot.ready>.power-art{animation:inventory-ready .32s ease-in-out infinite alternate}
#race-screen .inventory-slot.used{animation:inventory-used .6s ease-out both}
#race-screen .inventory-hint{position:absolute;left:0;right:0;bottom:7%;text-align:center;color:#6ca1c1;font-size:clamp(5px,.48vw,10px);letter-spacing:.18em;line-height:1}
@keyframes inventory-acquire{0%{filter:brightness(2);transform:translateY(-8%) scale(1.08)}100%{filter:brightness(1);transform:none}}
@keyframes inventory-ready{to{filter:brightness(1.5) drop-shadow(0 0 5px var(--power))}}
@keyframes inventory-used{0%{filter:brightness(2);opacity:1}35%{filter:brightness(1.3);opacity:1}100%{filter:brightness(1);opacity:0}}
@media(max-width:600px) and (orientation:portrait){
 #race-screen .power-panel .panel-title{top:12%;font-size:7px;letter-spacing:.04em;left:7%;right:7%}
 #race-screen #power-grid{inset:29% 6% 18%;gap:3%;grid-template-rows:minmax(0,1fr)}
 #race-screen .inventory-slot{min-height:0;overflow:hidden;gap:3%;padding:0 3%}
 #race-screen .inventory-slot>.power-art{flex:0 0 28px;width:28px;height:28px;max-height:100%}
 #race-screen .inventory-copy{gap:2px}
 #race-screen .inventory-copy>b{font-size:9px}
 #race-screen .inventory-copy>small{font-size:5px;letter-spacing:0}
 #race-screen .inventory-number{font-size:6px;top:5%;right:5%}
 #race-screen .inventory-hint{font-size:6px;bottom:9%;letter-spacing:.06em}
}
@media(max-width:600px) and (max-height:740px) and (orientation:portrait){
 #race-screen #power-grid{inset:30% 6% 12%}
 #race-screen .inventory-hint{display:none}
 #race-screen .inventory-slot>.power-art{flex-basis:24px;width:24px;height:24px}
 #race-screen .inventory-empty-mark{flex-basis:24px;font-size:19px}
 #race-screen .inventory-copy>b{font-size:8px}
 #race-screen .inventory-copy>small{font-size:4.5px}
}
@media(max-height:500px) and (orientation:landscape){
 #race-screen .power-panel .panel-title{font-size:6px;top:8%}
 #race-screen .inventory-copy>b{font-size:9px}
 #race-screen .inventory-copy>small{font-size:5px}
 #race-screen .inventory-hint{font-size:5px;bottom:4%}
}
@media(prefers-reduced-motion:reduce){#race-screen .inventory-slot,#race-screen .inventory-slot>.power-art{animation:none!important}}
#app[data-reduced-motion="true"] #race-screen .inventory-slot,#app[data-reduced-motion="true"] #race-screen .inventory-slot>.power-art{animation:none!important}
#app[data-reduced-motion="true"] #pickup-notice{transition:none}

#pickup-notice{position:absolute;left:50%;top:58%;transform:translate(-50%,8px);padding:5px 15px;background:linear-gradient(90deg,transparent,#03101ee6 15%,#03101ee6 85%,transparent);color:#7be5ff;font-size:clamp(10px,1vw,17px);font-weight:700;letter-spacing:.07em;text-shadow:0 1px 4px #000;opacity:0;transition:opacity .15s,transform .15s;white-space:nowrap;pointer-events:none}
#pickup-notice.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:600px) and (orientation:portrait){#pickup-notice{top:64%;font-size:10px}}