/* Crystal battle panels: static reflections avoid repainting the iPad battlefield. */
.game-shell .hud,#battle .hud{
 color:#f1faff;
 background:linear-gradient(118deg,#c2f3ff1c 0%,transparent 28%,#a6bbff0a 65%,#bcefff18),linear-gradient(165deg,#162d42ed,#101c32e8 60%,#172538ed);
 border:1px solid #b3e9ffc2;border-radius:12px 4px 12px 4px;
 clip-path:none;
 box-shadow:inset 0 1px 0 #f1fdff80,inset 0 -1px 0 #a1d5ff35,inset 1px 0 0 #daf8ff24,0 4px 12px #030b1c66;
 padding:8px 10px;text-shadow:0 1px 2px #020916;
}
.game-shell .hud:focus-visible,#battle .hud:focus-visible{outline:2px solid #e2fbff;outline-offset:3px}
.game-shell .hud-name,#battle .hud b{color:#f4fcff;letter-spacing:.025em;line-height:1.25}
#battle .hud b{white-space:normal;overflow-wrap:anywhere}
.hud .hud-name-group,.hud .hud-name-row{flex-wrap:nowrap;gap:10px;align-items:center}
.hud .hud-name-row .attack-boost,.hud .hud-name-group .attack-boost{flex-shrink:0}
.hud .hud-mon-portrait{
 width:52px!important;height:52px!important;flex:0 0 52px;
 border:1px solid #b7efffcc;border-radius:9px;padding:0!important;
 background-color:#0b192d;background-repeat:no-repeat;
 box-shadow:inset 0 0 0 2px #04102255,0 0 10px #74ceff20;
}
.hud .scrolls{color:#a5cddd}
.hud small,.hud .hp-numbers{color:#d0e8f4}
.hud .type-emblem{background:#071322b8;border-color:color-mix(in srgb,var(--type-color) 55%,transparent);box-shadow:inset 0 1px 0 #ffffff15;border-radius:5px}
/* Smooth luminous HP replaces the heavy segmented meter. */
.game-shell .hud .hp-track,#battle .hud .hp{
 height:12px!important;margin:9px 0 6px!important;
 border:1px solid #a8defa66!important;border-radius:4px!important;
 background:#050e1ebd!important;box-shadow:inset 0 2px 5px #0009,0 1px 0 #d7f6ff20;
}
.hud .hp::after,.hud .hp-track::after{background:linear-gradient(180deg,#e5ffff28,transparent 50%,#00000018);border-radius:3px}
.game-shell .hud .hp-fill,#battle .hud .hp>i{
 border-radius:3px;background-image:linear-gradient(180deg,#e0fff980 0%,#ffffff12 35%,#001d3440 100%)!important;
 box-shadow:inset 0 1px 0 #efffff9c,inset -2px 0 0 #ecffffb3,0 0 8px #71ffc866;
 transition:width .65s cubic-bezier(.2,.8,.2,1);
}
.hud .finisher-meter,#battle .hud .finisher-meter{
 height:14px;line-height:12px;border:1px solid #afc5ff69;border-radius:4px;
 background:#090f26b8;color:#e5eaff;box-shadow:inset 0 1px 3px #0006;margin-top:5px;
}
.hud .finisher-meter>i{background:linear-gradient(90deg,#5755a9,#b69be8);box-shadow:inset 0 1px 0 #ede2ff70}
.hud .finisher-meter.ready{border-color:#ffe59a;color:#fff1bd}
.hud .finisher-meter.ready>i{background:linear-gradient(90deg,#9a6f2b,#d9b967)}
@media(max-width:700px){
 .game-shell .hud,#battle .hud{padding:5px 6px;border-radius:9px 3px 9px 3px}
 .hud .hud-mon-portrait{width:36px!important;height:36px!important;flex-basis:36px}
 .hud .hud-name-group,.hud .hud-name-row{gap:6px;flex-wrap:wrap}
 .game-shell .hud .hp-track,#battle .hud .hp{height:10px!important;margin:6px 0 4px!important}
 #battle .hud b{font-size:clamp(10px,1.55cqw,16px)}
}
@media(prefers-reduced-motion:reduce){.game-shell .hud .hp-fill,#battle .hud .hp>i{transition:none}}

/* A single island opponent needs one compact card, not the two-opponent row. */
#battle .arena[data-arena="island"] .enemy-huds{width:min(420px,46%)}
#battle .hud>small,.game-shell .hud .hp-numbers{display:block;font-size:16px;line-height:1.4;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em;margin:4px 0;color:#ecf8ff}
#battle .arena[data-arena="island"] .enemy-huds .hud b{font-size:clamp(14px,1.55cqw,20px)}
@media(max-width:700px){
 #battle .arena[data-arena="island"] .enemy-huds{width:48%}
 #battle .hud>small,.game-shell .hud .hp-numbers{font-size:14px;line-height:1.3}
 #battle .arena[data-arena="island"] .enemy-huds .hud b{font-size:12px}
}

/* Name and current HP stay legible over both filled and depleted meter areas. */
.game-shell .hud .hp-track,#battle .hud .hp{height:auto!important;min-height:44px;border-radius:6px!important;isolation:isolate}
.game-shell .hud .hp-fill,#battle .hud .hp>i{position:absolute;left:0;top:0;bottom:0;height:100%;z-index:0}
.hud .hp::after,.hud .hp-track::after{z-index:1;background:linear-gradient(180deg,#04122442,#03101b88)}
.hud .meter-copy{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px 10px;padding:9px 10px;text-shadow:0 1px 3px #000,1px 0 2px #000}
#battle .hud .meter-name,.game-shell .hud .meter-name,#battle .arena[data-arena="island"] .enemy-huds .hud .meter-name{flex:1 1 120px;font-size:16px;line-height:1.3;font-weight:900;color:#fff;white-space:normal;overflow-wrap:anywhere;min-width:0}
.hud .meter-hp,.game-shell .hud .meter-hp{flex:0 0 auto;display:block;font:800 16px/1.3 Arial,sans-serif;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;margin:0;min-height:0;letter-spacing:.02em}
.hud .meter-hp::before{content:none}
#battle .hud .hud-owner{font-size:12px;font-weight:500;margin:3px 0;color:#c4dce9}
#battle .hud .hud-owner:empty{display:none}
.hud .hud-types,#battle .hud-types{gap:6px;margin:6px 0;flex-wrap:wrap}
.hud .hud-types .type-emblem,#battle .hud-types .type-emblem{font-size:14px;line-height:1.25;padding:4px 7px;gap:5px;border-radius:6px}
.hud .hud-types svg,#battle .hud-types svg{width:17px;height:17px;flex-shrink:0}
@media(max-width:700px){
 .hud .meter-copy{padding:7px;gap:2px 6px}
 #battle .hud .meter-name,.game-shell .hud .meter-name,#battle .arena[data-arena="island"] .enemy-huds .hud .meter-name{font-size:14px;flex-basis:100%}
 .hud .meter-hp,.game-shell .hud .meter-hp{font-size:14px}
 .hud .hud-types .type-emblem,#battle .hud-types .type-emblem{font-size:13px;padding:3px 5px;gap:4px}
 .hud .hud-types svg,#battle .hud-types svg{width:15px;height:15px}
}

/* Ready charge breathes gold without hiding the label or restarting sprites. */
.hud .finisher-meter.ready{animation:finisher-ready-glow 1.2s ease-in-out infinite}
.hud .finisher-meter.ready>i{animation:finisher-ready-flash 1.2s ease-in-out infinite}
@keyframes finisher-ready-glow{0%,100%{border-color:#d6ae55;box-shadow:0 0 2px #ffcf6240}50%{border-color:#fff2b2;box-shadow:0 0 10px #ffd65a99,inset 0 0 4px #fff4b84d}}
@keyframes finisher-ready-flash{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.hud .finisher-meter.ready,.hud .finisher-meter.ready>i{animation:none}.hud .finisher-meter.ready{border-color:#fff2b2;box-shadow:0 0 6px #ffd65a66}}

/* Larger face portraits with the species name beside them; meters identify the tamer. */
.hud .hud-mon-portrait{width:68px!important;height:68px!important;flex:0 0 68px}
.hud .hud-name-row,.hud .hud-name-group{flex-wrap:nowrap}
@media(max-width:700px){.hud .hud-mon-portrait{width:48px!important;height:48px!important;flex-basis:48px}.hud .hud-name-row,.hud .hud-name-group{gap:6px}}
/* Readable finisher status at desktop and tablet sizes. */
.hud .finisher-meter,#battle .hud .finisher-meter{height:auto;min-height:28px;padding:4px 6px;box-sizing:border-box;font:800 13px/1.4 var(--pixel);margin-top:6px;overflow:hidden}
.hud .finisher-meter>span{display:block;white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){.hud .finisher-meter,#battle .hud .finisher-meter{min-height:26px;font-size:11px;padding:4px}}