/* UF celestial arena — static materials, clear controls, no animated blur. */
#game-shell{--uf-surface:#0c1728;--uf-gold:#c5a76e;--uf-ally:#79dbc9;--uf-enemy:#d69beb}
#game-shell[data-mode=arena] .hud-top,
#game-shell[data-mode=arena] .quest-panel,
#game-shell[data-mode=arena] .card-bar.hand-bar{backdrop-filter:none;background:linear-gradient(155deg,#172538f5,#08121ff5);border-color:#8f7852;box-shadow:0 8px 24px #0006,inset 0 1px #e8c99426}
#game-shell[data-mode=arena] .hud-top{border-radius:12px}
#game-shell[data-mode=arena] .portrait{background:radial-gradient(circle at 35% 25%,#37637a,#101d30 72%);border-color:var(--uf-gold);box-shadow:0 0 0 3px #081320,inset 0 0 12px #91dfff29}
#game-shell[data-mode=arena] .bar{background:#050d18;border:1px solid #ffffff12;border-radius:3px;overflow:hidden}
#game-shell[data-mode=arena] .hp span{background:linear-gradient(90deg,#913b49,#e8757d)}
#game-shell[data-mode=arena] .mp span{background:linear-gradient(90deg,#25768e,#80d6e7)}
#game-shell[data-mode=arena] .quest-panel{border-radius:12px}
#game-shell[data-mode=arena] .arena-clock strong{font-family:Cinzel,Georgia,serif;color:#e2c68b}
#game-shell[data-mode=arena] .controls-right .skill,
#game-shell[data-mode=arena] .controls-right .attack{backdrop-filter:none;border:1px solid #b9a57d;background:radial-gradient(circle at 35% 25%,#345970,#0b1a2c 75%);box-shadow:0 3px 9px #0009,inset 0 1px #fff3}
#game-shell[data-mode=arena] .controls-right .attack{background:radial-gradient(circle at 35% 25%,#a48747,#352919 78%);border:2px solid #dcc590}
#game-shell[data-mode=arena] .skill span{font:600 10px/1.2 system-ui;color:#f4eedf;background:#071322d9;padding:2px 4px;border-radius:4px}
#game-shell[data-mode=arena] .joystick{background:radial-gradient(circle,#274b6059,#081523aa);border-color:#88bfd04d;box-shadow:inset 0 0 0 8px #0c1c274f}
#game-shell[data-mode=arena] .hand-card{border-width:1px;border-color:color-mix(in srgb,var(--frame-hi) 65%,#ba9c62);border-radius:7px;background:linear-gradient(160deg,var(--frame),#111a28 80%);box-shadow:0 3px 8px #0008,inset 0 1px #fff2}
#game-shell[data-mode=arena] .hand-card-art{border:1px solid #dac79669;border-radius:4px;background:radial-gradient(ellipse at 50% 65%,color-mix(in srgb,var(--frame-hi) 25%,#122032),#081321)}
#game-shell[data-mode=arena] .hand-card-art img{filter:none;height:120%;bottom:-3%}
#game-shell[data-mode=arena] .hand-card-name{background:#102032f2;color:#f1e4c9;border-color:#bfa47466;font-family:system-ui;font-variant:normal;font-weight:700}
#game-shell[data-mode=arena] .hand-card.selected{outline:2px solid #9ee9d6;outline-offset:2px;box-shadow:0 0 0 4px #0b192b,0 5px 14px #0008;animation:none}
#game-shell[data-mode=arena] .hand-card-cost{background:linear-gradient(150deg,#8872ca,#3a2c70);border-color:#cfbddf}
#game-shell[data-mode=arena] .hand-mana-orb{background:radial-gradient(circle at 35% 25%,#9976d4,#403075 65%,#201b40);box-shadow:inset 0 1px 5px #fff3;border-color:#c5ac78}
#game-shell[data-mode=arena] .bottom-nav #btn-arena{background:#182b3c;border:1px solid #b5a07880;border-radius:8px}
@media(max-width:720px) and (orientation:portrait){
 #game-shell[data-mode=arena] .hud-top{height:64px;left:6px;right:6px;top:calc(5px + env(safe-area-inset-top));padding:6px 9px}
 #game-shell[data-mode=arena] .quest-panel{top:calc(74px + env(safe-area-inset-top));height:48px;padding:5px 7px;left:6px;width:calc(100% - 12px)}
 #game-shell[data-mode=arena] .quest strong{font-size:9px}
 #game-shell[data-mode=arena] .quest span{font-size:8px}
 #game-shell[data-mode=arena] .arena-clock span{font-size:15px;font-variant-numeric:tabular-nums}
 #game-shell[data-mode=arena] .arena-legend{top:calc(128px + env(safe-area-inset-top));left:8px;right:auto;border:0;padding:4px 7px;font-size:10px;gap:10px;background:#0b172be8}
 #game-shell[data-mode=arena] .bottom-nav{top:calc(126px + env(safe-area-inset-top));bottom:auto;right:8px;width:62px;height:28px;border:0;background:none;padding:0}
 #game-shell[data-mode=arena] .bottom-nav #btn-arena{flex-direction:row;gap:4px;font-size:14px}
 #game-shell[data-mode=arena] .bottom-nav #btn-arena span{font-size:9px}
 #game-shell[data-mode=arena] .card-bar.hand-bar{left:6px;right:6px;bottom:calc(6px + env(safe-area-inset-bottom));width:auto;max-width:none;gap:5px;padding:6px;grid-template-columns:42px repeat(5,minmax(0,1fr));border-radius:12px;align-items:center}
 #game-shell[data-mode=arena] .hand-card{height:90px;padding:3px;gap:2px}
 #game-shell[data-mode=arena] .hand-card-name{margin:-4px 0 0;font-size:9px;line-height:1.25;padding:3px 1px}
 #game-shell[data-mode=arena] .hand-card-cost{width:19px;height:19px;font-size:10px}
 #game-shell[data-mode=arena] .hand-card-elem{width:16px;height:16px;font-size:9px}
 #game-shell[data-mode=arena] .hand-card.selected{transform:translateY(-4px)}
 #game-shell[data-mode=arena] .hand-mana-orb{width:38px;height:48px;border-radius:12px;border-width:1px}
 #game-shell[data-mode=arena] .hand-mana-orb strong{font-size:22px}
 #game-shell[data-mode=arena] .hand-mana-orb small{font-size:8px}
 #game-shell[data-mode=arena] .controls-left{left:10px;bottom:calc(126px + env(safe-area-inset-bottom))}
 #game-shell[data-mode=arena] .joystick{width:82px;height:82px}
 #game-shell[data-mode=arena] .stick{width:34px;height:34px;left:24px;top:24px}
 #game-shell[data-mode=arena] .controls-right{right:10px;bottom:calc(122px + env(safe-area-inset-bottom));width:164px;height:176px;transform:none}
 #game-shell[data-mode=arena] .controls-right .skill{width:44px;height:44px;min-width:44px;min-height:44px;font-size:22px}
 #game-shell[data-mode=arena] #btn-interact{left:46px;right:auto;top:8px}
 #game-shell[data-mode=arena] #btn-charge{left:0;top:66px}
 #game-shell[data-mode=arena] #btn-spin{left:40px;top:122px}
 #game-shell[data-mode=arena] #btn-potion{left:auto;right:0;top:44px}
 #game-shell[data-mode=arena] #btn-attack{width:64px;height:64px;min-width:64px;min-height:64px;font-size:30px;right:0;bottom:0}
 #game-shell[data-mode=arena] .arena-feedback{bottom:calc(316px + env(safe-area-inset-bottom));padding:8px 12px;font-size:12px;width:calc(100% - 24px)}
 #game-shell[data-mode=arena] .arena-tutorial{top:164px;left:12px}
}
@media(max-height:520px) and (orientation:landscape){
 #game-shell[data-mode=arena] .hand-card{height:64px}
 #game-shell[data-mode=arena] .hand-card-name{font-size:8px}
 #game-shell[data-mode=arena] .arena-legend{top:108px;font-size:9px;padding:3px 7px}
}
@media(prefers-reduced-motion:reduce){#game-shell[data-mode=arena] .hand-card{transition:none}#game-shell[data-mode=arena] .hand-mana.surge .hand-mana-orb{animation:none}}