/* Personal climb plate and a separate bottom-edge ability dock. */
#runHud{position:absolute;left:max(24px,calc(env(safe-area-inset-left) + 12px));right:auto;top:auto;bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));width:230px;max-width:none;display:grid;gap:0;padding:14px 17px 12px;background:linear-gradient(140deg,#292624ef,#141413f2);transform:rotate(-.6deg);text-shadow:0 2px 2px #0005;pointer-events:none}
.climb-heading{display:flex;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1px solid #f3d27635}
.climb-heading .ui-icon{width:25px;height:25px;transform:rotate(-9deg)}
.climb-heading h2{font-family:var(--display);font-size:22px;letter-spacing:1px;line-height:1;color:#f7edd5;margin:0}
.climb-current{padding:12px 0 10px}.climb-label{display:block;font-size:7px;line-height:1.2;letter-spacing:1.3px;font-weight:800;color:#bfb49a}
.climb-value{display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.climb-current .climb-value strong{font-family:var(--display);font-size:49px;line-height:1.05;color:#ffe184;font-weight:800;letter-spacing:.5px}
.climb-value small{font-size:11px;color:#bfb49a;font-weight:700}
.climb-best{display:flex;align-items:center;gap:7px;padding-top:10px;border-top:1px solid #ffffff13}
.climb-best .ui-icon{width:20px;height:20px;flex:none;filter:drop-shadow(0 2px 0 #0007)}
.climb-best .climb-value{margin-left:auto}.climb-best strong{font-family:var(--display);font-size:25px;line-height:1;color:#f0e7cf;letter-spacing:.5px}
#gameFrame[data-mode=ready] #runHud{display:none}

/* Quiet charcoal frame: the card artwork carries the colour. */
#cardHandPanel{position:absolute;z-index:5;top:auto;left:50%;right:auto!important;bottom:0!important;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);display:block;padding:10px 22px max(7px,env(safe-area-inset-bottom));border:2px solid #ffffff14;border-bottom:0;border-radius:12px 12px 0 0;background:#0c0c0cec;box-shadow:0 -4px 16px #0003;overflow:visible;filter:none;isolation:isolate}
#cardHandPanel .card-quick-slots{position:static;display:flex;align-items:stretch;gap:9px;left:auto!important;right:auto!important;top:auto;bottom:auto!important;transform:none;filter:none}
#cardHandPanel .quick-card{position:relative;display:block;width:92px;height:auto;min-height:0;padding:0;border:1px solid #ffffff1a;border-radius:7px;background:#101010;box-shadow:none;overflow:hidden;transition:transform .15s,box-shadow .15s}
#cardHandPanel .quick-card .card-face{margin:0}
#cardHandPanel .quick-card kbd,#cardHandPanel .hand-empty kbd{position:absolute;z-index:2;top:6px;right:6px;left:auto;bottom:auto;display:grid;place-items:center;width:23px;height:23px;margin:0;padding:0;border:1px solid #ffffff30;border-radius:4px;background:#111111ed;box-shadow:none;color:#fff0cd;font-family:var(--display);font-size:16px;line-height:1;text-shadow:none}
#cardHandPanel .quick-card:hover:not(:disabled){transform:translateY(-5px);box-shadow:0 0 0 1px var(--card),0 0 18px color-mix(in srgb,var(--card),transparent 65%)}
#cardHandPanel .quick-card:focus-visible{outline:2px solid #ffe184;outline-offset:3px}
#cardHandPanel .quick-card.in-use{border-color:var(--card);box-shadow:0 0 0 1px var(--card),0 0 16px color-mix(in srgb,var(--card),transparent 65%)}
#cardHandPanel .quick-card.in-use .card-face{filter:none}
#cardHandPanel .quick-card.in-use kbd{color:var(--card);border-color:var(--card)}
#cardHandPanel .quick-card.in-use:after{left:6%;right:6%;bottom:5px;height:3px;box-shadow:0 0 5px var(--card)}
#cardHandPanel .hand-empty{position:relative;display:block;width:92px;aspect-ratio:5/7;padding:0;border:1px dashed #ffffff20;border-radius:7px;background:#ffffff03;box-shadow:none}
.toast{bottom:178px}

@media(max-width:1100px) and (min-width:601px) and (min-height:471px){#runHud{top:90px;bottom:auto;left:18px;width:200px;padding:12px 14px}.climb-current .climb-value strong{font-size:43px}.active-card-hud,.game-frame:fullscreen .active-card-hud{top:290px}.return-armed{top:370px}#cardHandPanel .quick-card,#cardHandPanel .hand-empty{width:74px}#gameFrame:not([data-mode=ready]):not([data-chat-keyboard=true]) .chat-panel{bottom:158px}.toast{bottom:154px}}
@media(max-width:1100px) and (min-width:601px) and (min-height:471px) and (max-height:800px){#gameFrame:not([data-mode=ready]):not([data-chat-keyboard=true]) .chat-messages{height:36px}}
@media(pointer:coarse) and (min-width:601px) and (min-height:471px){#gameFrame .touch-controls{bottom:max(20px,env(safe-area-inset-bottom))}}
@media(max-width:600px){
 #runHud{top:236px;bottom:auto;left:14px;width:min(144px,calc(42vw - 10px));padding:10px;transform:none}
 .climb-heading{gap:6px;padding-bottom:8px}.climb-heading h2{font-size:15px;letter-spacing:.5px}.climb-heading .ui-icon{width:20px;height:20px;flex:none}
 .climb-current{padding:9px 0 8px}.climb-current .climb-value strong{font-size:37px}.climb-label{font-size:6px;letter-spacing:1px}.climb-value small{font-size:9px}
 .climb-best{gap:5px;padding-top:8px}.climb-best .ui-icon{width:16px;height:16px}.climb-best strong{font-size:22px}
 #cardHandPanel{padding:7px 12px max(5px,env(safe-area-inset-bottom));border-radius:10px 10px 0 0}
 #cardHandPanel .card-quick-slots{gap:6px}#cardHandPanel .quick-card,#cardHandPanel .hand-empty{width:62px}
 #cardHandPanel .quick-card kbd,#cardHandPanel .hand-empty kbd{top:4px;right:4px;width:20px;height:20px;font-size:14px}
 #cardHandPanel .quick-card:hover:not(:disabled){transform:none}
 #gameFrame .touch-controls{bottom:max(116px,calc(env(safe-area-inset-bottom) + 108px))}
 #gameFrame:not([data-mode=ready]):not([data-chat-keyboard=true]) .chat-panel{right:14px;max-width:52vw;bottom:246px}
 .toast{bottom:225px}
}
@media(max-width:600px) and (max-height:740px){#runHud{top:222px}.climb-current .climb-value strong{font-size:33px}.climb-current{padding-block:7px}.climb-heading{padding-bottom:6px}.climb-best{padding-top:6px}#gameFrame:not([data-mode=ready]):not([data-chat-keyboard=true]) .chat-panel{bottom:194px}#gameFrame .touch-controls{bottom:max(108px,calc(env(safe-area-inset-bottom) + 108px))}}
@media(max-height:470px) and (min-width:601px){
 #runHud{top:78px;bottom:auto;left:18px;width:150px;padding:9px 11px}.climb-heading h2{font-size:16px}.climb-heading{gap:6px;padding-bottom:7px}.climb-heading .ui-icon{width:19px;height:19px}.climb-current{padding:8px 0}.climb-current .climb-value strong{font-size:35px}.climb-best{padding-top:7px}.climb-best strong{font-size:22px}
 #cardHandPanel{padding:6px 15px max(5px,env(safe-area-inset-bottom));border-radius:10px 10px 0 0}#cardHandPanel .card-quick-slots{gap:6px}#cardHandPanel .quick-card,#cardHandPanel .hand-empty{width:64px}
 #cardHandPanel .quick-card kbd,#cardHandPanel .hand-empty kbd{top:4px;right:4px;width:20px;height:20px;font-size:14px}
 #gameFrame .touch-controls{left:18px;right:18px;bottom:max(20px,env(safe-area-inset-bottom))}
 #gameFrame:not([data-mode=ready]):not([data-chat-keyboard=true]) .chat-panel{bottom:100px;padding:5px 12px}
 #gameFrame:not([data-mode=ready]):not([data-chat-keyboard=true]) .chat-heading{padding-bottom:5px;margin-bottom:4px}
 #gameFrame:not([data-mode=ready]):not([data-chat-keyboard=true]) .chat-messages{height:0;padding:0}
 .toast{bottom:123px}
}
@media(prefers-reduced-motion:reduce){#cardHandPanel .quick-card{transition:none}}