/* Interface layer: keep the world and character artwork untouched. */
:root {
  color-scheme: light;
  --ink: #49382f;
  --cream: #49382f;
  --gold: #bf7d43;
  --mint: #83966b;
  --ui-panel: #fff7e6f0;
  --ui-panel-soft: #fff2dfe8;
  --ui-line: #9672522d;
  --ui-muted: #8b7561;
  --ui-shadow: 0 4px 14px #805b3b33;
}
body { background: #f5ead5; color: var(--cream); }
button { font-weight: 500; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
svg { flex-shrink: 0; }
.ui-symbols { position: absolute; inset: 0 auto auto 0; display: block; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.hud {
  top: max(14px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  right: max(20px, env(safe-area-inset-right));
  height: 42px; gap: 10px; z-index: 10;
}
.hud .brand { gap: 9px; font-size: 17px; line-height: 1.3; font-weight: 750; color: #fff3dc; text-shadow: 0 1px 2px #3d291fa6; margin-right: 12px; }
.brand small { font-size: 9px; letter-spacing: 2px; color: #f5e7c8; text-shadow: inherit; margin-top: 2px; }
.brand .paw { width: 36px; height: 36px; padding: 7px; background: #bf7d4314; border: 1px solid #bf7d4340; border-radius: 11px; color: var(--gold); box-shadow: none; }
.chip, .icon {
  background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 11px;
  box-shadow: 0 2px 8px #805b3b20; color: var(--cream);
}
.hud .chip { height: 40px; padding: 0 13px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.hud .icon { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.hud .icon svg { width: 19px; height: 19px; }
#region-open { gap: 8px; }
#region-open .chevron, #region-open svg { width: 11px; height: 11px; color: var(--ui-muted); }
#region-label { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.round { margin: 0 auto; padding: 6px 14px; height: 40px; gap: 10px; border-color: var(--ui-line); background: var(--ui-panel); border-radius: 11px; box-shadow: 0 2px 8px #805b3b20; }
.round span { font-size: 10px; color: var(--ui-muted); }
.round strong { font-size: 20px; letter-spacing: 1px; font-weight: 650; }
#score-open { color: #80634c; }
#points { color: var(--gold); font-weight: 750; font-variant-numeric: tabular-nums; }
.player-card {
  top: 72px; left: max(20px, env(safe-area-inset-left)); width: 238px; min-width: 0;
  align-items: center; gap: 10px; padding: 10px; background: var(--ui-panel);
  border: 1px solid var(--ui-line); border-radius: 13px; box-shadow: var(--ui-shadow); z-index: 7;
}
.player-card img { width: 46px; height: 46px; border: 1px solid #bf7d436b; border-radius: 9px; image-rendering: auto; }
.player-card > div { min-width: 0; }
.card-name { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.25; }
.player-card #my-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.player-card #my-cat { flex-shrink: 0; max-width: 64px; margin: 0; padding: 2px 5px; border-radius: 4px; background: #bf7d4316; color: #9f764c; font-size: 9px; line-height: 1.25; font-weight: 500; white-space: nowrap; }
.health { width: 100%; height: 5px; margin-top: 6px; border-radius: 3px; background: #d3b89199; }
.health i { border-radius: 3px; background: #9eaf82; }
.player-card #my-status { display: block; margin-top: 5px; font-size: 10px; line-height: 1.3; color: #806a58; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-card #connection { display: block; margin: 3px 0 0; padding: 0; background: none; border: 0; box-shadow: none; font-size: 9px; line-height: 1.25; color: var(--ui-muted); }
body[data-zone=lounge] .health { opacity: .6; }
#coop-objective {
  left: auto; right: max(20px, env(safe-area-inset-right)); top: 72px; transform: none;
  width: 160px; padding: 11px 13px; background: var(--ui-panel); border: 1px solid var(--ui-line);
  border-radius: 12px; box-shadow: var(--ui-shadow); color: var(--cream); font-size: 12px; z-index: 7;
}
#coop-objective strong { display: block; font-size: 13px; font-weight: 650; line-height: 1.4; }
#coop-objective small { display: block; margin-top: 5px; color: var(--ui-muted); font-size: 10px; line-height: 1.4; }
#event-banner {
  top: 76px; left: 50%; max-width: min(520px, calc(100% - 590px)); transform: translateX(-50%);
  padding: 8px 13px; border: 1px solid #bf7d4355; border-radius: 10px; background: #fff3dbf2;
  box-shadow: var(--ui-shadow); color: #8b6740; font-size: 12px; font-weight: 550; line-height: 1.55; z-index: 8;
}
#more-menu {
  position: absolute; top: 64px; right: max(16px, env(safe-area-inset-right)); width: 250px;
  padding: 9px; background: #fff7e6fa; border: 1px solid #b991663a; border-radius: 15px;
  box-shadow: 0 8px 24px #79553626; z-index: 30;
}
.menu-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 5px 9px; border-bottom: 1px solid var(--ui-line); margin-bottom: 5px; }
.menu-head strong, .menu-head h3 { font-size: 12px; font-weight: 650; color: #73563e; }
#more-close { width: 30px; height: 30px; border: 0; background: #bf996d12; color: var(--ui-muted); border-radius: 8px; padding: 0; font-size: 21px; }
#more-menu .menu-entry {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 53px; padding: 9px 10px;
  margin: 0; text-align: left; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--cream);
}
#more-menu .menu-entry > span:nth-child(2) { flex: 1; min-width: 0; }
#more-menu .menu-entry > span:nth-child(n+3) { flex: 0; font-size: 15px; color: var(--ui-muted); }
#more-menu #emote-toggle-hint { flex: 0 0 auto; min-width: 28px; white-space: nowrap; text-align: right; font-size: 11px; }
#more-menu .menu-entry b { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; }
#more-menu .menu-entry small { display: block; font-size: 10px; color: var(--ui-muted); line-height: 1.4; margin-top: 2px; }
#more-menu .menu-symbol { width: 20px; height: 20px; color: #977250; }
#more-menu #photo-open { position: static; left: auto; top: auto; color: var(--cream); }
#more-menu #logout { color: #b56b4e; border-top: 1px solid var(--ui-line); border-radius: 0 0 9px 9px; margin-top: 5px; }
#more-menu #logout .menu-symbol { color: #b56b4e; }
.bottom-tools { left: 50%; right: auto; bottom: 85px; transform: translateX(-50%); pointer-events: none; z-index: 6; }
.keyboard-hint { font-size: 10px; color: #806751b3; background: #fff7e67a; padding: 5px 9px; border: 1px solid #9672521a; border-radius: 7px; white-space: nowrap; }
body[data-zone=lounge] #arena .keyboard-hint { font-size: 10px; }
body[data-zone=lounge] #arena .keyboard-hint::after { content: none; }
#arena #emote-menu, body[data-zone=lounge] #arena #emote-menu, body[data-zone=lounge].lounge-extra-actions #arena #emote-menu {
  left: 50%; right: auto; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: 5px; padding: 5px; background: #fff7e6e6; border: 1px solid #b9916633;
  border-radius: 13px; box-shadow: var(--ui-shadow); z-index: 7;
}
#arena #emote-menu button {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 74px; height: 42px;
  padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: #bf996d0b;
  color: var(--cream); font-weight: 500;
}
#arena #emote-menu canvas { width: 28px; height: 28px; image-rendering: auto; }
#arena #emote-menu .emote-name { display: inline; margin: 0; color: #755c45; font-size: 10px; }
#arena #emote-menu .emote-key { display: inline; margin: 0; color: #987f66; font-size: 9px; }
#arena #emote-menu button:disabled { opacity: .55; }
#joystick {
  width: 118px; height: 118px; left: max(28px, env(safe-area-inset-left)); bottom: max(28px, env(safe-area-inset-bottom));
  border: 1px solid #b991665e; border-radius: 50%; background: #fff2d973;
  box-shadow: inset 0 0 0 17px #bd936508; z-index: 6;
}
#stick { width: 42px; height: 42px; left: calc(50% - 21px); top: calc(50% - 21px); background: #e2c69ebc; border: 1px solid #cbaa81ad; box-shadow: 0 3px 7px #9474545c; }
.combat, #lounge-actions { right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 9px; z-index: 8; }
.battle {
  width: 68px; height: 68px; padding: 6px; gap: 2px; background: #fff2dfe6;
  border: 1px solid #b9916670; border-radius: 50%; color: var(--cream); font-size: 15px;
  font-weight: 650; box-shadow: 0 3px 9px #805b3b42; position: relative;
}
.battle b, .battle.hiss b, .battle.gum b { font-size: 13px; line-height: 1.2; white-space: nowrap; font-weight: 650; }
.battle span, .battle.hiss span, .battle.gum span { font-size: 9px; line-height: 1.25; color: #8b7159; font-weight: 400; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.skill-symbol { width: 18px; height: 18px; color: #846449; }
.keycap { position: absolute; right: -1px; top: -1px; min-width: 18px; height: 18px; padding: 1px 4px; border: 1px solid #b991664d; border-radius: 5px; background: #fff7e6f5; color: #8b7159; font: 10px/14px system-ui,sans-serif; }
.battle.attack { width: 88px; height: 88px; border-color: #bf7d4388; background: #e4aa72ef; color: #49382f; box-shadow: 0 4px 11px #805b3b4d; }
.battle.attack b { font-size: 17px; }
.battle.attack .skill-symbol { width: 22px; height: 22px; color: #624931; }
.battle.attack span { color: #72543a; }
.battle.ultimate { width: 74px; height: 74px; background: #eadcc5eb; border-color: #b9a78a3d; color: #9b8a75; box-shadow: 0 3px 9px #805b3b42; }
.battle.ultimate:not(:disabled) { background: #efd38ff0; color: #49382f; border-color: #bf7d4388; box-shadow: 0 3px 10px #805b3b4d; }
.battle.ultimate:not(:disabled) .skill-symbol { color: #624931; }
.battle.ultimate:not(:disabled) span { color: #72543a; }
.battle.gum { background: #f4ead7e8; border-color: #b9a78a66; }
.battle.hiss { background: #f4eedce8; border-color: #b9a78a66; }
.battle.hiss.charged { background: #c3d4b8e8; border-color: #99ae7caa; color: #49382f; }
.battle.gum.charged { background: #d5d2bae8; border-color: #b6b28faa; color: #49382f; }
.battle:disabled, .battle.hiss:disabled, .battle.gum:disabled { opacity: .65; }
.battle.ultimate:disabled { opacity: .8; }
.battle.pressed { transform: translateY(2px) scale(.97); box-shadow: 0 1px 3px #805b3b33; }
#lounge-actions .battle { width: 74px; height: 74px; border: 1px solid #b991666b; background: #fff2dfe8; color: var(--cream); }
#lounge-actions b { font-size: 13px; font-weight: 600; }
#lounge-actions span { font-size: 9px; }
#lounge-actions #lounge-jump { background: #efdbb8e8 !important; color: #49382f !important; }
#lounge-actions #lounge-door { background: #eee8d9e8 !important; }
#lounge-actions #lounge-eat { background: #f0dec0e8 !important; }
#toast { bottom: 160px; padding: 9px 14px; max-width: min(460px, 86%); background: #fff7e6f5; border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); color: var(--cream); border-radius: 10px; font-size: 12px; z-index: 18; }
#spectator { top: 163px; left: max(20px, env(safe-area-inset-left)); max-width: 238px; padding: 12px; background: var(--ui-panel); border-color: var(--ui-line); border-radius: 12px; box-shadow: var(--ui-shadow); z-index: 9; }
#spectator strong { font-size: 13px; }
#spectator span { font-size: 11px; color: var(--ui-muted); line-height: 1.55; }
#spectator button { padding: 7px 10px; background: #f0dfbf; border-color: var(--ui-line); font-size: 11px; border-radius: 7px; }
.rotate-hint { display: none; }
#network-overlay { background: #f6e7c973; color: var(--cream); z-index: 25; }
#network-overlay strong { font-size: 16px; font-weight: 650; }
#network-overlay span { color: #806a58; font-size: 12px; }
/* Dialogs share the same quieter material, spacing and typography. */
dialog { width: min(780px, 92vw); max-height: min(85dvh, 800px); padding: 24px; overflow: auto; background: #fff7e6; color: var(--cream); border: 1px solid #b9916647; border-radius: 20px; box-shadow: 0 12px 32px #79553626; scrollbar-width: thin; scrollbar-color: #c5ae8c #fff7e6; }
dialog::backdrop { background: #654a3157; backdrop-filter: none; }
.dialog-head { margin-bottom: 20px; gap: 12px; }
.dialog-head small { color: #a2774b; font-size: 10px; letter-spacing: 1.5px; }
.dialog-head h2 { margin-top: 6px; color: var(--cream); font-size: 24px; line-height: 1.3; font-weight: 700; }
.dialog-head button { flex-shrink: 0; width: 36px; height: 36px; background: #bf996d14; border: 1px solid #b9916624; border-radius: 10px; color: #816851; font-size: 23px; }
dialog p { color: #806a58; font-size: 12px; line-height: 1.8; }
.wide { padding: 12px; margin-top: 18px; border: 1px solid #bf8b5373; border-radius: 10px; background: #d5a16c; color: #49382f; font-size: 13px; font-weight: 600; box-shadow: none; }
#account-dialog { width: min(420px, 92vw); }
#account-form label { color: #72563d; font-size: 12px; margin-top: 16px; }
#account-form input { margin-top: 7px; padding: 12px; background: #fffaf0; border: 1px solid #b991663b; border-radius: 10px; color: var(--cream); font-size: 16px; outline-color: var(--gold); }
#account-form input::placeholder { color: #ab967e; font-size: 12px; }
#account-error { color: #b86d4e; font-size: 11px; }
#account-switch { font-size: 12px; color: #9c6b3f; text-underline-offset: 4px; }
#roster { gap: 12px; }
.cat-option { padding: 12px; border: 1px solid #b991662f; border-radius: 13px; background: #fffaf0; box-shadow: none; }
.cat-option.selected { border: 1px solid #bf7d43b3; background: #f8ead2; box-shadow: inset 0 0 0 1px #bf7d4326; }
.cat-option strong { font-size: 14px; font-weight: 650; margin: 6px 0; }
.cat-option small { font-size: 11px; color: #8c755e; line-height: 1.45; }
.cat-option .avatar-mini { width: 29px; height: 29px; border-color: #bf8b5370; }
.cat-role { background: #bf7d4314; color: #9f764c; font-size: 9px; border-radius: 4px; padding: 3px 6px; }
.cat-trait { color: #8c755e !important; }
#region-dialog { width: min(900px, 94vw); }
.region-intro { color: #806a58; margin: 0 0 18px; }
#region-list { gap: 12px; }
.region-card { padding: 20px; min-height: 315px; background: #fff2dc; border: 1px solid #b991663a; border-radius: 14px; color: var(--cream); box-shadow: none; }
.region-brawl { background: #f7e4d3; }
.region-coop { background: #eee8d9; }
.region-card.current { border: 1px solid #bf7d43b3; box-shadow: inset 0 0 0 1px #bf7d4326; }
.region-card h3 { font-size: 22px; font-weight: 700; }
.region-card small { color: #8c755e; font-size: 10px; }
.region-card p { color: #806a58; font-size: 12px; }
.region-count { color: #8c755e; font-size: 10px; }
.region-action { background: #b9916614; color: #73563e; border: 1px solid #b9916626; border-radius: 8px; padding: 9px 11px; font-size: 12px; }
.region-foot { color: #987f66; border-color: var(--ui-line); font-size: 11px; padding-top: 13px; }
.wallet { padding: 14px 16px; background: #fff2dc; border: 1px solid #bf8b5339; border-radius: 12px; }
.wallet strong, .wallet strong span { color: #a16e36; }
.wallet strong { font-size: 13px; }
.wallet strong span { font-size: 22px; font-variant-numeric: tabular-nums; }
.wallet > span { color: #8c755e; font-size: 11px; }
#shop-dialog h3 { margin-top: 23px; font-size: 14px; font-weight: 650; }
.shop-help { font-size: 11px; }
.emote-slot { background: #fffaf0; border: 1px solid #b9916631; border-radius: 11px; padding: 11px; gap: 7px; }
.emote-slot.selected { border: 1px solid #bf7d43a3; background: #f8e7c8; }
.emote-slot strong { font-size: 12px; font-weight: 600; }
#shop-items { gap: 12px; }
.shop-item { background: #fffaf0; border: 1px solid #b991662b; border-radius: 12px; padding: 16px 10px; gap: 9px; }
.shop-item strong { font-size: 13px; font-weight: 600; }
.shop-item small { font-size: 10px; color: #987f66; }
.shop-item button { padding: 8px 5px; border: 1px solid #b9916645; border-radius: 8px; background: #ead4b1; color: var(--cream); font-size: 11px; }
#shop-status { color: #a16e36; }
#skill-cat-list { gap: 6px; margin-bottom: 18px; }
#skill-cat-list button { padding: 8px 11px; border: 1px solid #b9916631; border-radius: 9px; background: #fffaf0; font-size: 11px; }
#skill-cat-list button.selected { background: #edd9b8; border-color: #bf7d438f; color: #765031; }
.skill-hero { gap: 16px; padding: 16px; background: #f6ead4; border: 1px solid #b9916629; border-radius: 13px; }
.skill-hero img { border: 1px solid #bf7d437a; border-radius: 12px; }
.skill-hero h3 { font-size: 22px; font-weight: 650; }
.skill-hero small { font-size: 11px; color: #a2774b; }
.skill-hero p { color: #806a58; font-size: 12px; }
.passive-card { border-left: 2px solid #bf7d4388; background: #c599680b; border-radius: 0 9px 9px 0; padding: 12px 14px; }
.passive-card strong { color: #8e704e; font-size: 12px; }
.passive-card p { font-size: 11px; }
.skill-grid { gap: 12px; }
.skill-grid article { padding: 16px; border: 1px solid #b9916629; border-radius: 12px; background: #fffaf0; }
.skill-grid small { color: #987f66; font-size: 10px; }
.skill-grid h4 { color: #a16e36; font-size: 14px; font-weight: 650; }
.skill-grid p { color: #806a58; font-size: 11px; line-height: 1.8; }
.score-row { padding: 12px 10px; border-color: var(--ui-line); font-size: 13px; }
.score-row.me { background: #bf7d4310; border-radius: 8px; }
.score-row small { color: #987f66; font-size: 10px; }
.score-row span:last-child { color: #a16e36; }
.result-line { border-color: var(--ui-line); color: #72563d; font-size: 13px; padding: 12px; }
#photo-controls { top: max(16px, env(safe-area-inset-top)); border: 1px solid #bf7d435c; border-radius: 12px; background: #fff7e6f5; box-shadow: var(--ui-shadow); font-size: 12px; z-index: 30; }
#photo-controls button { background: #efd9b6; border-color: #b9916642; border-radius: 7px; font-size: 11px; }
@media (hover: hover) {
  .hud button:hover, #more-menu .menu-entry:hover, #arena #emote-menu button:hover { background-color: #f2e2c6; }
  .cat-option:not(:disabled):hover, .emote-slot:hover, #skill-cat-list button:hover { border-color: #b9916675; }
}
@media (max-width: 950px) {
  .hud { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); gap: 7px; height: 38px; }
  .hud .brand { font-size: 14px; margin-right: 4px; gap: 7px; }
  .brand .paw { width: 32px; height: 32px; padding: 6px; }
  .brand small { font-size: 8px; letter-spacing: 1px; }
  .hud .chip { height: 36px; font-size: 11px; padding: 0 10px; }
  .hud .icon { width: 36px; height: 36px; font-size: 20px; border-radius: 10px; }
  .hud .icon svg { width: 18px; height: 18px; }
  .round { height: 36px; padding: 5px 11px; gap: 7px; }
  .round strong { font-size: 18px; }
  .round span { font-size: 9px; }
  .player-card { top: 64px; left: max(12px, env(safe-area-inset-left)); width: 210px; padding: 8px; gap: 8px; }
  .player-card img { width: 40px; height: 40px; }
  .player-card #my-name { font-size: 12px; }
  .player-card #my-cat { font-size: 8px; max-width: 56px; }
  .player-card #my-status { font-size: 9px; margin-top: 4px; }
  .player-card #connection { font-size: 8px; margin-top: 2px; }
  .health { height: 4px; margin-top: 5px; }
  #coop-objective { top: 64px; right: max(12px, env(safe-area-inset-right)); width: 138px; padding: 10px 11px; }
  #coop-objective strong { font-size: 12px; }
  #coop-objective small { font-size: 9px; }
  #event-banner { top: 68px; max-width: calc(100% - 470px); font-size: 11px; padding: 7px 10px; }
  .keyboard-hint, body[data-zone=lounge] #arena .keyboard-hint { display: none; }
  #more-menu { top: 58px; }
  dialog { padding: 18px; border-radius: 17px; }
  .dialog-head { margin-bottom: 17px; }
  .dialog-head h2 { font-size: 22px; }
  .cat-option { padding: 9px; }
  .cat-option img { height: 88px; }
}
@media (max-width: 1100px) and (orientation: landscape), (max-height: 500px) and (orientation: landscape) {
  .hud .brand { font-size: 13px; }
  .hud .brand small { display: none; }
  .hud { top: max(10px, env(safe-area-inset-top)); }
  .player-card { top: 60px; }
  #coop-objective { top: 60px; width: 128px; padding: 8px 10px; }
  #event-banner { top: 62px; max-width: calc(100% - 460px); }
  #joystick { width: 100px; height: 100px; left: max(16px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); box-shadow: inset 0 0 0 14px #bd936508; }
  #stick { width: 36px; height: 36px; left: calc(50% - 18px); top: calc(50% - 18px); }
  .combat, #lounge-actions { right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); gap: 5px; }
  .combat .battle { width: 60px; height: 60px; }
  .combat .battle.attack { width: 74px; height: 74px; }
  .combat .battle.ultimate { width: 64px; height: 64px; }
  .combat .battle b { font-size: 12px; }
  .combat .battle.attack b { font-size: 15px; }
  .combat .skill-symbol { width: 16px; height: 16px; }
  .combat .battle.attack .skill-symbol { width: 20px; height: 20px; }
  .combat .battle span { font-size: 8px; }
  .keycap { display: none; }
  #lounge-actions .battle { width: 64px; height: 64px; }
  #lounge-actions b { font-size: 12px; }
  #lounge-actions span { font-size: 8px; }
  #arena #emote-menu, body[data-zone=lounge] #arena #emote-menu, body[data-zone=lounge].lounge-extra-actions #arena #emote-menu {
    left: max(138px, calc(env(safe-area-inset-left) + 122px)); bottom: max(20px, env(safe-area-inset-bottom)); transform: none;
    padding: 4px; gap: 4px; width: 164px; border-radius: 11px;
  }
  #arena #emote-menu button { width: 48px; min-width: 48px; height: 46px; padding: 3px; flex-direction: column; gap: 1px; }
  #arena #emote-menu canvas { width: 27px; height: 27px; }
  #arena #emote-menu .emote-name { display: block; font-size: 8px; line-height: 1.15; }
  #arena #emote-menu .emote-key { display: none; }
  #toast, body[data-zone=lounge].lounge-extra-actions #toast { bottom: 118px; font-size: 11px; }
  #spectator { top: 148px; left: 12px; max-width: 210px; padding: 9px; }
  #more-menu { top: 54px; max-height: calc(100dvh - 66px); overflow-y: auto; touch-action: pan-y; }
  #more-menu .menu-entry { min-height: 43px; padding: 6px 9px; }
  #more-menu .menu-entry small { font-size: 9px; }
  dialog { max-height: 91dvh; padding: 16px; }
  .dialog-head { margin-bottom: 13px; }
  .dialog-head h2 { font-size: 20px; }
  .region-card { min-height: 226px; padding: 13px; }
  .region-card canvas { width: 48px !important; height: 48px !important; margin: 8px auto; }
  .region-card h3 { font-size: 19px; }
  .region-card p { font-size: 11px; margin: 7px 0 10px; }
  .region-intro { margin-bottom: 11px; }
}
@media (orientation: portrait) {
  .hud { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); gap: 6px; height: 36px; }
  .hud .brand { display: none; }
  .hud #region-open { padding: 0 8px; height: 36px; font-size: 11px; gap: 5px; flex-shrink: 1; min-width: 0; }
  #region-label { max-width: 78px; }
  .hud .round { padding: 5px 9px; gap: 4px; height: 36px; min-width: 72px; margin: 0 auto; flex-shrink: 1; }
  .hud .round span { display: none; }
  .hud .round strong { font-size: 17px; letter-spacing: .5px; }
  .hud #score-open { padding: 0 8px; height: 36px; font-size: 10px; gap: 4px; }
  .hud .icon { width: 34px; height: 36px; font-size: 20px; }
  .player-card { top: 66px; left: 12px; width: 210px; padding: 8px; gap: 8px; border-radius: 11px; }
  .player-card img { width: 40px; height: 40px; }
  .player-card #connection { display: block; }
  #coop-objective { top: 66px; left: auto; right: 12px; width: 128px; padding: 9px 10px; border-radius: 11px; }
  #coop-objective strong { font-size: 11px; }
  #coop-objective small { font-size: 9px; line-height: 1.35; margin-top: 5px; }
  #event-banner, body[data-zone=coop] #event-banner { top: 151px; max-width: calc(100% - 28px); width: max-content; font-size: 11px; padding: 7px 11px; }
  #joystick { left: max(18px, env(safe-area-inset-left)); bottom: max(34px, env(safe-area-inset-bottom)); width: 108px; height: 108px; box-shadow: inset 0 0 0 15px #bd936508; }
  #stick { width: 38px; height: 38px; left: calc(50% - 19px); top: calc(50% - 19px); }
  .combat, #lounge-actions {
    display: grid; grid-template-columns: 74px 74px; grid-auto-rows: 74px; align-items: center; justify-items: center; gap: 10px;
    right: max(16px, env(safe-area-inset-right)); bottom: max(76px, env(safe-area-inset-bottom));
  }
  .combat .battle, .combat .battle.gum, .combat .battle.hiss, .combat .battle.attack, .combat .battle.ultimate, #lounge-actions .battle { width: 74px; height: 74px; }
  .combat .attack { grid-column: 1; }
  .combat .ultimate { grid-column: 2; }
  .combat .battle b, #lounge-actions b { font-size: 13px; }
  .combat .battle.attack b { font-size: 16px; }
  .combat .skill-symbol, #lounge-actions .skill-symbol { width: 19px; height: 19px; }
  .combat .battle.attack .skill-symbol { width: 22px; height: 22px; }
  .combat .battle span, #lounge-actions span { font-size: 8px; max-width: 62px; }
  .keycap { display: none; }
  #arena #emote-menu, body[data-zone=lounge] #arena #emote-menu, body[data-zone=lounge].lounge-extra-actions #arena #emote-menu {
    left: max(14px, env(safe-area-inset-left)); right: auto; bottom: max(174px, env(safe-area-inset-bottom)); transform: none;
    display: flex; flex-direction: column; width: 58px; padding: 4px; gap: 3px; border-radius: 12px;
  }
  #arena #emote-menu button { width: 48px; min-width: 48px; height: 52px; padding: 3px; gap: 2px; flex-direction: column; border-radius: 8px; }
  #arena #emote-menu canvas { width: 28px; height: 28px; }
  #arena #emote-menu .emote-name { display: block; font-size: 8px; line-height: 1.2; max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #arena #emote-menu .emote-key { display: none; }
  #toast, body[data-zone=lounge].lounge-extra-actions #toast { bottom: 267px; max-width: 80%; font-size: 11px; }
  #spectator { left: 12px; top: 204px; max-width: 210px; padding: 10px; }
  #more-menu { top: 58px; right: 12px; width: min(250px, calc(100vw - 24px)); max-height: calc(100dvh - 80px); overflow-y: auto; touch-action: pan-y; }
  .bottom-tools, .rotate-hint { display: none; }
  dialog { padding: 18px 15px; width: 94vw; max-height: 86dvh; border-radius: 17px; }
  #roster { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cat-option { padding: 8px; }
  .cat-option img { height: 85px; }
  .cat-option strong { font-size: 12px; }
  .cat-option small { font-size: 10px; }
  #region-list { grid-template-columns: 1fr; gap: 11px; }
  .region-card { display: block; min-height: 170px; padding: 16px; }
  .region-card h3 { font-size: 20px; margin-top: 9px; }
  .region-card canvas { float: right; width: 58px !important; height: 58px !important; margin: 0 0 0 8px; }
  .region-card p { font-size: 11px; margin: 10px 0 13px; }
  .region-action { font-size: 12px; }
  .region-foot { font-size: 9px; gap: 8px; }
  .wallet { display: block; padding: 12px; }
  .wallet > span { display: block; font-size: 10px; margin-top: 6px; }
  #emote-slots { gap: 7px; }
  .emote-slot { flex-direction: column; padding: 9px 3px; gap: 5px; }
  .emote-slot strong { font-size: 10px; }
  #shop-items { gap: 7px; }
  .shop-item { padding: 12px 5px; gap: 7px; }
  .shop-item canvas { width: 48px !important; height: 48px !important; }
  .shop-item strong { font-size: 11px; }
  .shop-item small { font-size: 9px; }
  .shop-item button { font-size: 10px; padding: 8px 3px; }
  .skill-grid { grid-template-columns: 1fr; gap: 10px; }
  .skill-hero { padding: 12px; gap: 11px; }
  .skill-hero img { width: 60px; height: 60px; }
  .skill-hero h3 { font-size: 19px; }
  .skill-hero p { font-size: 11px; }
  .score-row { grid-template-columns: 25px 1fr 50px 55px; font-size: 12px; gap: 7px; padding: 10px 6px; }
  #photo-controls { width: 94%; justify-content: center; gap: 7px; padding: 10px 7px; font-size: 11px; }
  #photo-controls label { font-size: 9px; }
  #photo-controls button { font-size: 10px; padding: 7px; }
}
@media (max-width: 370px) and (orientation: portrait) {
  .hud { gap: 4px; left: 10px; right: 10px; }
  #region-label { max-width: 64px; }
  .hud .round { min-width: 65px; padding: 5px 7px; }
  .hud #score-open { padding: 0 6px; }
  .hud .icon { width: 32px; }
  .player-card { width: 190px; }
  #coop-objective { width: 114px; }
}
/* Preserve state-controlled visibility and the uncluttered photo view. */
button[hidden], div[hidden], #network-overlay[hidden], #more-menu[hidden] { display: none !important; }
body[data-zone=lounge] .combat { display: none; }
body.photo-mode .hud, body.photo-mode .player-card, body.photo-mode .bottom-tools,
body.photo-mode .combat, body.photo-mode #lounge-actions, body.photo-mode #emote-menu,
body.photo-mode #joystick, body.photo-mode #event-banner, body.photo-mode #more-menu,
body.photo-mode #coop-objective, body.photo-mode .rotate-hint { display: none !important; }
body.feeding-flight .player-card { opacity: .18; }
@media (prefers-reduced-motion: reduce) {
  .player-card, .health i { transition: none; }
}





/* Server-owned battle records and short cooperative arrival notices. */
#battle-stats { position:absolute; top:72px; right:max(20px,env(safe-area-inset-right)); width:222px; z-index:9; }
#battle-stats-toggle { display:flex; align-items:center; gap:9px; width:100%; height:53px; padding:8px 11px; border:1px solid var(--ui-line); border-radius:12px; background:var(--ui-panel); color:var(--cream); box-shadow:var(--ui-shadow); text-align:left; }
#battle-stats-toggle > span:not(.battle-feed-caret) { flex:1; min-width:0; }
#battle-stats-toggle small { display:block; color:var(--ui-muted); font-size:9px; line-height:1.3; }
#battle-stats-toggle b { display:block; font-size:17px; font-weight:700; line-height:1.25; font-variant-numeric:tabular-nums; }
.battle-feed-caret { color:#a27950; font-size:16px; width:12px; text-align:center; }
#battle-stats.is-expanded .battle-feed-caret { transform:rotate(180deg); }
#battle-feed { position:absolute; top:61px; right:0; width:270px; max-height:195px; overflow:auto; padding:5px; border:1px solid var(--ui-line); border-radius:11px; background:var(--ui-panel); box-shadow:var(--ui-shadow); touch-action:pan-y; scrollbar-width:thin; scrollbar-color:#c5ae8c #fff7e6; }
.battle-feed-row { display:flex; align-items:center; gap:8px; min-height:32px; margin:3px; padding:6px 8px; border:1px solid transparent; border-radius:7px; color:#806a58; font-size:11px; line-height:1.5; }
.feed-source,.feed-target { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed-target { text-align:right; }
.feed-arrow { flex-shrink:0; color:#aa8760; font-size:13px; }
.battle-feed-row.is-my-kill { background:#e9be7626; border-color:#bc7d4a45; color:#8b5d31; }
.battle-feed-row.is-my-death { background:#d68c6c1f; border-color:#bd826a38; color:#9e6147; }
.battle-feed-empty { margin:0; padding:10px; color:var(--ui-muted); font-size:10px; text-align:center; }
#coop-intrusion { position:absolute; top:164px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; width:292px; min-height:79px; padding:9px 18px 9px 12px; border:1px solid #bf7d435c; border-radius:13px; background:#fff3dcf5; box-shadow:0 5px 18px #79553630; pointer-events:none; z-index:15; }
.intrusion-cat { width:64px; height:61px; flex-shrink:0; object-fit:contain; image-rendering:pixelated; }
.intrusion-copy { min-width:0; }
.intrusion-copy small { display:block; color:#ad713e; font-size:10px; letter-spacing:2px; line-height:1.3; }
.intrusion-copy strong { display:block; color:#634831; font-size:18px; font-weight:750; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.intrusion-copy span { display:block; color:#9d7c59; font-size:10px; line-height:1.4; margin-top:2px; }
#coop-intrusion.is-arriving { animation:coop-arrival 2.8s ease both; }
@keyframes coop-arrival { 0% { opacity:0; transform:translate(-50%,-6px); } 8%,84% { opacity:1; transform:translate(-50%,0); } 100% { opacity:0; transform:translate(-50%,-3px); } }
#result-dialog { width:min(620px,94vw); }
.result-mvp { display:grid; grid-template-columns:210px minmax(0,1fr); gap:22px; align-items:center; padding:15px; margin-bottom:16px; border:1px solid #bf7d4338; border-radius:16px; background:linear-gradient(145deg,#fff2d6,#f7e5c6); }
.result-mvp-cat { width:100%; height:220px; object-fit:contain; image-rendering:pixelated; }
.result-mvp-copy { min-width:0; }
.result-mvp-label { display:block; color:#a16e36; font-size:11px; letter-spacing:1px; line-height:1.5; }
.result-mvp h3 { margin:7px 0 18px; font-size:24px; color:#68462d; line-height:1.3; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.result-stat-grid > div { padding:8px 5px; text-align:center; border:1px solid #bf7d4324; border-radius:9px; background:#fffaf083; }
.result-stat-grid b { display:block; font-size:22px; line-height:1.3; font-variant-numeric:tabular-nums; font-weight:700; color:#785335; }
.result-stat-grid small { display:block; font-size:10px; color:#9c7c5c; line-height:1.4; }
.result-mvp-own { margin:9px 0 0; font-size:11px; color:#a2774b; }
.result-personal { padding:15px; border:1px solid var(--ui-line); border-radius:12px; background:#fffaf080; }
.result-personal h3 { margin:0 0 10px; font-size:12px; font-weight:600; color:#806a58; }
.result-personal .result-stat-grid b { font-size:18px; }
.result-rank-line { margin:11px 0 5px; font-size:12px; font-weight:600; color:#8b633e; }
.result-score-note { display:block; color:#9e8770; font-size:10px; line-height:1.6; }
.result-failure-note { padding:9px 11px; margin:0 0 12px; background:#b86d4e0d; border:1px solid #b86d4e29; border-radius:8px; font-size:12px; color:#a0684a; line-height:1.6; }
.result-personal .result-failure-note { margin:12px 0 0; }
.result-spectator-note { margin:10px 0 0; color:#9c8267; font-size:12px; text-align:center; }
#result-dialog.result-failed #result-title { color:#a05f43; }
body.photo-mode #battle-stats,body.photo-mode #coop-intrusion { display:none!important; }
@media(max-width:1100px) and (orientation:landscape), (max-height:500px) and (orientation:landscape) {
  #battle-stats { top:60px; right:12px; width:164px; }
  #battle-stats-toggle { height:44px; padding:6px 10px; gap:6px; }
  #battle-stats-toggle b { font-size:15px; }
  #battle-stats-toggle small { font-size:8px; }
  #battle-feed { top:52px; right:0; width:230px; max-height:110px; }
  .battle-feed-row { min-height:28px; padding:4px 7px; font-size:10px; }
  #coop-intrusion { top:104px; width:274px; min-height:68px; gap:9px; padding:7px 12px; }
  .intrusion-cat { width:53px; height:52px; }
  .intrusion-copy strong { font-size:16px; }
  #result-dialog { width:min(620px,94vw); }
  .result-mvp { grid-template-columns:132px minmax(0,1fr); min-height:126px; gap:15px; padding:10px; margin-bottom:10px; }
  .result-mvp-cat { height:122px; }
  .result-mvp h3 { font-size:20px; margin:4px 0 9px; }
  .result-stat-grid > div { padding:5px; }
  .result-stat-grid b { font-size:18px; }
  .result-personal { padding:10px; }
  .result-personal h3 { margin-bottom:7px; }
  .result-personal .result-stat-grid b { font-size:16px; }
  .result-rank-line { margin-top:7px; font-size:11px; }
  .result-score-note { font-size:9px; }
}
@media(orientation:portrait) {
  #battle-stats { top:66px; right:12px; width:178px; }
  #battle-stats-toggle { height:44px; padding:5px 8px; gap:4px; border-radius:10px; }
  #battle-stats-toggle b { font-size:15px; }
  #battle-stats-toggle small { font-size:8px; }
  #battle-stats-toggle .battle-feed-caret { width:10px; font-size:13px; }
  #battle-feed { top:78px; right:0; width:min(246px,calc(100vw - 24px)); max-height:110px; }
  .battle-feed-row { min-height:28px; padding:4px 7px; font-size:10px; }
  body[data-zone=brawl]:has(#battle-stats.is-expanded:not([hidden])) #event-banner { left:12px; top:144px; transform:none; max-width:calc(100% - min(246px,calc(100vw - 24px)) - 36px); text-align:left; white-space:normal; overflow-wrap:anywhere; }
  #coop-intrusion { top:198px; width:min(302px,calc(100vw - 28px)); min-height:73px; padding:8px 12px; gap:10px; }
  .intrusion-cat { width:58px; height:56px; }
  .intrusion-copy strong { font-size:17px; }
  #result-dialog { width:94vw; }
  .result-mvp { grid-template-columns:1fr; gap:2px; padding:12px 14px 15px; margin-bottom:12px; text-align:center; }
  .result-mvp-cat { height:170px; }
  .result-mvp h3 { font-size:21px; margin:4px 0 12px; }
  .result-mvp-label { font-size:10px; }
  .result-stat-grid > div { padding:7px 4px; }
  .result-stat-grid b { font-size:20px; }
  .result-mvp-own { margin-top:7px; }
  .result-personal { padding:12px; }
  .result-rank-line { font-size:11px; }
  .result-score-note { font-size:9px; }
}
@media(max-width:500px) and (orientation:portrait) {
  #battle-stats { width:min(142px,calc(100vw - 234px)); }
}
@media(prefers-reduced-motion:reduce) {
  #coop-intrusion.is-arriving { animation:none; opacity:1; }
}
.result-auto-note { display:block; margin:12px 0 0; color:#9c8267; font-size:10px; line-height:1.6; text-align:center; }

/* World-boss HUD stays above the play field; ground warnings use world geometry. */
#world-boss-hud { position:absolute; top:72px; left:50%; transform:translateX(-50%); width:min(520px,calc(100vw - 600px)); height:44px; padding:5px 9px; border:1px solid #bb815344; border-radius:9px; background:#fff4dff2; color:var(--cream); box-shadow:0 2px 7px #805b3b22; z-index:9; }
.world-boss-heading { display:flex; align-items:center; gap:7px; height:19px; }
.world-boss-heading > strong { flex-shrink:0; font-size:11px; line-height:1.2; font-weight:700; white-space:nowrap; }
#world-boss-stage { color:#a87346; font-size:9px; margin-left:4px; font-weight:550; }
#world-boss-help-open { flex-shrink:0; min-width:32px; height:19px; padding:1px 5px; border:1px solid #a77c5440; border-radius:5px; background:#f5dfb7; color:#795536; font-size:9px; }
#world-boss-hp { flex:1; min-width:64px; position:relative; height:12px; overflow:hidden; border:1px solid #a8684740; border-radius:4px; background:#d8bea2; }
#world-boss-hp::after { content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#fff1d8aa; }
#world-boss-hp-fill { display:block; height:100%; width:100%; background:#ef5350; transition:width .12s linear; }
#world-boss-hud[data-stage="2"] #world-boss-hp-fill { background:#ef5350; }
#world-boss-hud.is-broken #world-boss-hp-fill { background:#ef5350; }
#world-boss-hp-value { position:absolute; inset:0; text-align:center; color:#fff9ed; text-shadow:0 1px 1px #643923; font-size:9px; font-weight:650; line-height:10px; font-variant-numeric:tabular-nums; }
.world-boss-meta { display:flex; justify-content:space-between; align-items:center; gap:7px; height:12px; margin-top:2px; }
.world-boss-meta small { font-size:9px; line-height:12px; color:#947050; white-space:nowrap; }
#world-boss-window { min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:right; color:#a06a39; }
#world-boss-mechanic { position:absolute; top:150px; right:max(20px,env(safe-area-inset-right)); display:flex; align-items:center; gap:8px; width:300px; min-height:50px; padding:6px 9px; background:#fff4def2; border:1px solid #b77d494a; border-radius:9px; box-shadow:0 2px 7px #805b3b22; z-index:9; }
.world-boss-mechanic-copy { flex:1; min-width:0; }
.world-boss-mechanic-copy strong { display:block; font-size:11px; line-height:15px; font-weight:700; color:#795335; }
.world-boss-mechanic-copy small { display:block; font-size:10px; line-height:14px; margin-top:2px; color:#947457; overflow-wrap:anywhere; }
#world-boss-mechanic > aside { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-shrink:0; text-align:right; }
#world-boss-mechanic-clock { min-width:32px; font-size:11px; color:#b07540; line-height:15px; font-variant-numeric:tabular-nums; }
#world-boss-mechanic[data-phase="explode"] { background:#ffeadcf2; border-color:#c67b5666; }
#world-boss-mechanic[data-phase="explode"] .world-boss-mechanic-copy strong { color:#a0573e; }
#world-boss-grid-map { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; width:58px; height:32px; }
#world-boss-grid-map span { position:relative; display:grid; place-items:center; border:1px solid #bd897333; border-radius:2px; background:#d47c5b24; color:#ac7155; font-size:7px; line-height:1; }
#world-boss-grid-map .is-safe { background:#c8dfb4; border-color:#819e60; color:#46603b; }
#world-boss-grid-map .is-next { border-style:dashed; border-color:#b7863c; background:#ead19c66; }
#world-boss-grid-map .is-you::after { content:''; position:absolute; right:-1px; bottom:-1px; width:5px; height:5px; border:1px solid #fff5de; border-radius:50%; background:#654831; }
#world-boss-death { position:absolute; top:auto; bottom:max(130px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:7px; width:max-content; max-width:244px; height:29px; padding:5px 10px; border:1px solid #b66d4f44; border-radius:16px; background:#fff1e5f2; box-shadow:0 2px 7px #805b3b22; z-index:10; }
#world-boss-death strong { flex-shrink:0; color:#a56c4b; font-size:10px; line-height:17px; font-weight:600; }
#world-boss-death-copy { display:block; min-width:0; color:#8d664c; font-size:10px; line-height:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.battle.hiss.mechanic-ready { border-color:#b98941; background:#f5dc9fea; color:#6d4c2e; }
.battle.hiss.mechanic-confirmed { box-shadow:0 0 0 3px #efc66a65,0 3px 9px #805b3b35; }
#world-boss-help { width:min(580px,94vw); }
#world-boss-help > p { margin-top:0; }
.world-boss-rules { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:15px; }
.world-boss-rules > section { padding:12px; border:1px solid var(--ui-line); border-radius:10px; background:#fffaf0; }
.world-boss-rules strong { font-size:12px; color:#795738; }
.world-boss-rules p { margin:5px 0 0; font-size:11px; line-height:1.7; }
body.world-boss-active #event-banner { display:none!important; }
#world-boss-hud[hidden],#world-boss-mechanic[hidden],#world-boss-grid-map[hidden],#world-boss-death[hidden],body.photo-mode #world-boss-hud,body.photo-mode #world-boss-mechanic,body.photo-mode #world-boss-death { display:none!important; }
@media(max-width:1100px) and (orientation:landscape), (max-height:500px) and (orientation:landscape) {
  #world-boss-hud { top:60px; width:min(360px,calc(100vw - 480px)); }
  #world-boss-mechanic { top:114px; right:12px; width:278px; }
  #world-boss-death { bottom:max(26px,env(safe-area-inset-bottom)); }
  body.world-boss-active #coop-intrusion { top:148px; width:252px; min-height:62px; }
}
@media(orientation:portrait) {
  #world-boss-hud { top:144px; left:12px; right:12px; transform:none; width:auto; }
  #world-boss-mechanic { top:196px; left:12px; right:12px; width:auto; }
  #world-boss-death { bottom:max(26px,env(safe-area-inset-bottom)); }
  body.world-boss-active #coop-intrusion { top:266px; width:min(284px,calc(100vw - 28px)); min-height:58px; padding:6px 10px; }
  body.world-boss-active .intrusion-cat { width:43px; height:43px; }
  body.world-boss-active .intrusion-copy strong { font-size:14px; }
  body.world-boss-active .intrusion-copy small,body.world-boss-active .intrusion-copy span { font-size:9px; }
  #world-boss-help { padding:17px; }
  .world-boss-rules { grid-template-columns:1fr; gap:8px; }
  .world-boss-rules > section { padding:10px; }
}
@media(max-width:500px) and (orientation:portrait) {
  #world-boss-death { bottom:max(244px,env(safe-area-inset-bottom)); max-width:calc(100vw - 160px); }
}
@media(prefers-reduced-motion:reduce) { #world-boss-hp-fill { transition:none; } }

/* Compact cooperative combat chrome keeps the arena visible on short screens. */
body.world-boss-active {
  --battle-top:env(safe-area-inset-top,0px);
  --boss-top:calc(var(--battle-top) + 50px);
  --mechanic-top:calc(var(--battle-top) + 88px);
}
body.world-boss-active .hud { top:var(--battle-top); left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); height:44px; gap:4px; }
body.world-boss-active .hud .brand,
body.world-boss-active .hud .round,
body.world-boss-active .hud #score-open { display:none; }
body.world-boss-active .hud #region-open { margin-right:auto; min-width:68px; }
body.world-boss-active .hud .chip,
body.world-boss-active .hud .icon { height:44px; min-height:44px; border:0; border-radius:7px; background:#163d4552; color:#fff0d8; box-shadow:none; text-shadow:0 1px 2px #17323b; }
body.world-boss-active .hud .chip { padding:0 8px; font-size:11px; }
body.world-boss-active .hud .icon { width:44px; min-width:44px; }
body.world-boss-active .hud .icon svg { width:17px; height:17px; }
body.world-boss-active #region-open svg { color:#e5d7be; width:9px; height:9px; }
body.world-boss-active .player-card { top:calc(var(--battle-top) + 10px); left:88px; width:min(220px,calc(100vw - 328px)); height:24px; min-width:0; padding:0; gap:6px; border:0; border-radius:0; background:none; box-shadow:none; color:#fff0d8; }
body.world-boss-active .player-card img { width:24px; height:24px; border:0; border-radius:50%; }
body.world-boss-active .player-card > div { display:flex; align-items:center; gap:7px; min-width:0; }
body.world-boss-active .player-card .card-name { flex:1; min-width:0; }
body.world-boss-active .player-card #my-name { font-size:11px; line-height:18px; text-shadow:0 1px 2px #15343d; }
body.world-boss-active .player-card #my-cat,
body.world-boss-active .player-card #my-status,
body.world-boss-active .player-card #connection { display:none!important; }
body.world-boss-active .player-card .health { flex:0 0 54px; width:54px; height:3px; margin:0; background:#f1dcc441; border-radius:2px; }
body.world-boss-active .player-card .health i { background:#c9db9f; }
body.world-boss-active #coop-objective { top:calc(var(--battle-top) + 11px); right:104px; left:auto; display:flex; align-items:center; gap:8px; width:max-content; max-width:128px; height:22px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:#fff0d8; text-shadow:0 1px 2px #15343d; }
body.world-boss-active #coop-objective strong,
body.world-boss-active #coop-objective small { display:inline; margin:0; font-size:9px; line-height:18px; white-space:nowrap; font-weight:500; color:inherit; }
body.world-boss-active #coop-objective small { color:#e1ddcc; }
body.world-boss-active #world-boss-hud { top:var(--boss-top); left:50%; right:auto; transform:translateX(-50%); width:min(620px,calc(100vw - 20px)); height:32px; padding:4px 8px; border:0; border-radius:5px; background:#173c46a6; color:#fff0dc; box-shadow:none; }
body.world-boss-active .world-boss-heading { position:relative; height:24px; gap:7px; padding-right:40px; }
body.world-boss-active .world-boss-heading > strong { font-size:11px; font-weight:600; }
body.world-boss-active #world-boss-stage { margin-left:4px; color:#e6bf9d; font-size:9px; }
body.world-boss-active #world-boss-help-open { position:absolute; right:-8px; top:-10px; min-width:44px; width:44px; height:44px; padding:0; border:0; border-radius:5px; background:none; color:#f8e7c9; font-size:10px; }
body.world-boss-active #world-boss-help-open::before { content:''; position:absolute; inset:11px 3px; border-radius:4px; background:#edc68d28; z-index:-1; }
body.world-boss-active #world-boss-hp { height:17px; min-width:60px; overflow:visible; border:0; border-radius:0; background:none; }
body.world-boss-active #world-boss-hp::after { display:none; }
body.world-boss-active #world-boss-hp-fill { position:absolute; bottom:0; left:0; height:4px; border-radius:2px; background:#ef5350; }
body.world-boss-active #world-boss-hp-value { inset:0 0 auto; line-height:11px; font-size:9px; text-align:right; color:#ffeed5; text-shadow:none; font-weight:600; }
body.world-boss-active .world-boss-meta { display:none; }
body.world-boss-active #world-boss-mechanic { top:var(--mechanic-top); left:50%; right:auto; transform:translateX(-50%); width:min(460px,calc(100vw - 20px)); height:32px; min-height:0; padding:4px 8px; gap:6px; border:0; border-radius:5px; background:#173d4696; box-shadow:none; }
body.world-boss-active .world-boss-mechanic-copy { display:flex; align-items:center; gap:9px; }
body.world-boss-active .world-boss-mechanic-copy strong { flex:1; min-width:0; font-size:11px; line-height:20px; color:#fff0d8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.world-boss-active .world-boss-mechanic-copy small { flex:0 1 auto; max-width:120px; margin:0; font-size:10px; line-height:20px; color:#decdb4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.world-boss-active #world-boss-mechanic > aside { gap:5px; }
body.world-boss-active #world-boss-mechanic-clock { min-width:29px; font-size:10px; line-height:20px; color:#f1d09e; }
body.world-boss-active #world-boss-mechanic[data-phase="explode"] { background:#503e3eab; }
body.world-boss-active #world-boss-mechanic[data-phase="explode"] .world-boss-mechanic-copy strong { color:#ffdbbc; }
body.world-boss-active #world-boss-grid-map { width:48px; height:22px; gap:1px; }
body.world-boss-active #world-boss-grid-map span { font-size:6px; border:0; color:#ecccb0; background:#bb775543; }
body.world-boss-active #world-boss-grid-map .is-safe { background:#bedb99; color:#294638; }
body.world-boss-active #world-boss-grid-map .is-next { background:#bf9b565e; outline:1px dashed #e6c275; outline-offset:-1px; }
body.world-boss-active #world-boss-grid-map .is-you::after { width:4px; height:4px; }
body.world-boss-active #coop-intrusion { top:calc(var(--mechanic-top) + 38px); width:max-content; max-width:min(280px,calc(100vw - 24px)); min-height:32px; padding:3px 8px; gap:6px; border:0; border-radius:5px; background:#1e4047b8; box-shadow:none; }
body.world-boss-active .intrusion-cat { width:26px; height:26px; }
body.world-boss-active .intrusion-copy strong { font-size:11px; color:#fff0d8; }
body.world-boss-active .intrusion-copy small,
body.world-boss-active .intrusion-copy span { display:none; }
body.world-boss-active #toast { top:calc(var(--mechanic-top) + 38px); bottom:auto; max-width:min(320px,calc(100vw - 28px)); padding:4px 8px; border:0; border-radius:5px; background:#1e4047bd; color:#f6ead6; font-size:10px; box-shadow:none; }
body.world-boss-active #world-boss-death { bottom:max(100px,env(safe-area-inset-bottom)); height:26px; padding:4px 9px; border:0; background:#1d414bbb; box-shadow:none; }
body.world-boss-active #world-boss-death strong { color:#ebbf99; }
body.world-boss-active #world-boss-death-copy { color:#f4e5d0; }
body.world-boss-active #joystick { width:96px; height:96px; left:max(20px,env(safe-area-inset-left)); bottom:max(20px,env(safe-area-inset-bottom)); border:1px solid #f4e9d64a; background:#e2e5d61c; box-shadow:none; }
body.world-boss-active #stick { width:34px; height:34px; left:calc(50% - 17px); top:calc(50% - 17px); border:1px solid #eee2c859; background:#e4ddc55c; box-shadow:none; }
body.world-boss-active .combat { right:max(16px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); gap:8px; }
body.world-boss-active .combat .battle { width:60px; height:60px; padding:4px; gap:2px; border:1px solid #e4ddbc45; background:#183e4875; box-shadow:none; color:#fff0d8; }
body.world-boss-active .combat .battle.attack { width:74px; height:74px; background:#be8c50b0; border-color:#edc48379; }
body.world-boss-active .combat .battle.ultimate { width:64px; height:64px; background:#21445175; }
body.world-boss-active .combat .battle.ultimate:not(:disabled) { background:#ba9c56b5; border-color:#edcc876f; }
body.world-boss-active .combat .battle b,
body.world-boss-active .combat .battle.hiss b,
body.world-boss-active .combat .battle.gum b { font-size:12px; color:#fff0d8; }
body.world-boss-active .combat .battle.attack b { font-size:15px; }
body.world-boss-active .combat .battle span { font-size:8px; color:#e5ddc8; }
body.world-boss-active .combat .skill-symbol { width:17px; height:17px; color:#f0dfc4; }
body.world-boss-active .combat .battle.attack .skill-symbol { width:21px; height:21px; color:#f7e3c2; }
body.world-boss-active .combat .keycap { background:#254954a6; border:0; color:#d4d1bd; }
body.world-boss-active .combat .battle.hiss.mechanic-ready { border-color:#e6bc7585; background:#a17b4299; color:#fff1d8; }
body.world-boss-active .combat .battle.hiss.mechanic-confirmed { box-shadow:0 0 0 2px #eec77a40; }
body.world-boss-active #arena #emote-menu { width:auto; left:50%; right:auto; bottom:max(20px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; flex-direction:row; gap:4px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
body.world-boss-active #arena #emote-menu button { width:44px; min-width:44px; height:44px; padding:5px; border:0; border-radius:7px; background:#173d4670; }
body.world-boss-active #arena #emote-menu canvas { width:26px; height:26px; }
body.world-boss-active #arena #emote-menu .emote-name,
body.world-boss-active #arena #emote-menu .emote-key { display:none; }
body.world-boss-active .bottom-tools { bottom:72px; }
body.world-boss-active .keyboard-hint { padding:2px 4px; border:0; background:none; color:#f1e5c999; font-size:9px; }

@media(orientation:portrait) {
  body.world-boss-active .combat { grid-template-columns:66px 66px; grid-auto-rows:66px; gap:8px; right:max(14px,env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom)); }
  body.world-boss-active .combat .battle,
  body.world-boss-active .combat .battle.attack,
  body.world-boss-active .combat .battle.ultimate { width:66px; height:66px; }
  body.world-boss-active #joystick { left:max(14px,env(safe-area-inset-left)); }
  body.world-boss-active #arena #emote-menu { left:max(14px,env(safe-area-inset-left)); bottom:max(130px,env(safe-area-inset-bottom)); transform:none; flex-direction:column; gap:3px; }
  body.world-boss-active #world-boss-death { bottom:max(184px,env(safe-area-inset-bottom)); max-width:min(244px,calc(100vw - 150px)); }
}
@media(max-width:479px) and (orientation:portrait) {
  body.world-boss-active { --boss-top:calc(var(--battle-top) + 72px); --mechanic-top:calc(var(--battle-top) + 110px); }
  body.world-boss-active .player-card { top:calc(var(--battle-top) + 44px); left:8px; width:calc(100vw - 156px); height:22px; }
  body.world-boss-active .player-card img { width:22px; height:22px; }
  body.world-boss-active #coop-objective { top:calc(var(--battle-top) + 44px); right:8px; height:22px; }
  body.world-boss-active #world-boss-grid-map { display:none; }
  body.world-boss-active .world-boss-mechanic-copy small { max-width:105px; }
}

/* Cooperative assist uses the gap between movement, emotes and combat controls. */
#coop-feed,#coop-assist-status { display:none; }
body[data-zone=coop].world-boss-active #coop-feed:not([hidden]) {
  position:absolute; left:max(134px,calc(env(safe-area-inset-left,0px) + 120px)); bottom:max(20px,env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  width:112px; min-width:112px; height:44px; min-height:44px; padding:5px 9px;
  border:1px solid #ddc69759; border-radius:7px; background:#254853b3; box-shadow:none; color:#fff0d8; z-index:9;
}
body[data-zone=coop].world-boss-active #coop-feed .keycap {
  display:block; position:absolute; left:5px; right:auto; top:4px; min-width:12px; width:12px; height:13px;
  padding:0; border:0; border-radius:0; background:none; color:#dcd6bd; font:9px/13px system-ui,sans-serif;
}
body[data-zone=coop].world-boss-active #coop-feed .skill-symbol { display:none; }
body[data-zone=coop].world-boss-active #coop-feed b,
body[data-zone=coop].world-boss-active #coop-feed-label { font-size:11px; line-height:15px; font-weight:600; white-space:nowrap; }
body[data-zone=coop].world-boss-active #coop-feed-hint { font-size:9px; line-height:12px; color:#d7d9bc; white-space:nowrap; font-weight:400; }
body[data-zone=coop].world-boss-active #coop-feed:disabled { opacity:.5; }
body[data-zone=coop].world-boss-active #coop-feed:not(:disabled):active { background:#3c6165d9; border-color:#e5cf9e91; }
body[data-zone=coop].world-boss-active #coop-assist-status:not([hidden]) {
  position:absolute; left:max(134px,calc(env(safe-area-inset-left,0px) + 120px)); bottom:max(70px,env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; justify-content:center; gap:7px; width:max-content; max-width:208px; height:20px;
  padding:2px 6px; border:0; border-radius:4px; background:#193e486e; box-shadow:none;
  color:#eee5cf; font-size:9px; line-height:16px; white-space:nowrap; pointer-events:none; z-index:8;
}
body[data-zone=coop].world-boss-active #coop-assist-status b,
body[data-zone=coop].world-boss-active #coop-assist-status strong { font-size:9px; font-weight:600; color:#f8e7c5; }
body[data-zone=coop].world-boss-active #coop-assist-status small,
body[data-zone=coop].world-boss-active #coop-assist-status span { font-size:9px; line-height:16px; color:inherit; }
body.photo-mode #coop-feed,body.photo-mode #coop-assist-status { display:none!important; }
@media(orientation:portrait) {
  body[data-zone=coop].world-boss-active #coop-feed:not([hidden]) { left:calc(50% - 22px); bottom:max(36px,env(safe-area-inset-bottom)); transform:translateX(-50%); }
  body[data-zone=coop].world-boss-active #coop-feed .keycap { display:none; }
  body[data-zone=coop].world-boss-active #coop-assist-status:not([hidden]) { left:calc(50% - 22px); bottom:max(86px,env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:116px; gap:5px; padding:2px 5px; }
}

/* Boss warnings share Erpang's warm, readable event-banner surface. */
body.world-boss-active { --mechanic-clearance:74px; }
body.world-boss-active #world-boss-mechanic {
  top:var(--mechanic-top); left:50%; right:auto; transform:translateX(-50%);
  width:min(620px,calc(100vw - 24px)); height:auto; min-height:52px;
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border:1px solid #bf7d4355; border-left:4px solid #c99743; border-radius:10px;
  background:#fff3dbf2; box-shadow:0 3px 10px #49361c24; color:#795335;
  pointer-events:none; z-index:9;
}
body.world-boss-active .world-boss-mechanic-copy {
  display:flex; flex:1; min-width:0; flex-direction:column; align-items:flex-start; gap:1px;
}
body.world-boss-active .world-boss-mechanic-copy strong {
  flex:none; width:100%; font-size:13px; font-weight:700; line-height:18px;
  color:#795335; white-space:normal; overflow:visible; text-overflow:clip;
}
body.world-boss-active .world-boss-mechanic-copy small {
  flex:none; width:100%; max-width:none; margin:0; font-size:12px; line-height:16px;
  color:#8c6947; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere;
}
body.world-boss-active #world-boss-mechanic > aside { flex:0 0 auto; gap:0; align-self:center; }
body.world-boss-active #world-boss-mechanic-clock {
  display:block; min-width:53px; padding:4px 5px; border:1px solid #c997432e; border-radius:6px;
  background:#f1dbb670; color:#946529; font-size:14px; line-height:22px;
  text-align:center; font-variant-numeric:tabular-nums;
}
body.world-boss-active #world-boss-mechanic-clock:empty { display:none; }
body.world-boss-active #world-boss-grid-map { display:none!important; }
body.world-boss-active #world-boss-mechanic[data-tone="danger"],
body.world-boss-active #world-boss-mechanic[data-phase="explode"] {
  background:#ffeadff2; border-color:#b669454f; border-left-color:#bf6849;
}
body.world-boss-active #world-boss-mechanic[data-tone="danger"] .world-boss-mechanic-copy strong,
body.world-boss-active #world-boss-mechanic[data-phase="explode"] .world-boss-mechanic-copy strong { color:#964837; }
body.world-boss-active #world-boss-mechanic[data-tone="danger"] #world-boss-mechanic-clock,
body.world-boss-active #world-boss-mechanic[data-phase="explode"] #world-boss-mechanic-clock { color:#a75337; background:#edc1a966; }
body.world-boss-active #world-boss-mechanic[data-tone="safe"] {
  background:#eef4e6f2; border-color:#839b5144; border-left-color:#89a05f;
}
body.world-boss-active #world-boss-mechanic[data-tone="safe"] .world-boss-mechanic-copy strong { color:#5b733f; }
body.world-boss-active #world-boss-mechanic[data-tone="safe"] #world-boss-mechanic-clock { color:#5b733f; background:#cddbaf70; }
body.world-boss-active #coop-intrusion { top:calc(var(--mechanic-top) + var(--mechanic-clearance)); }
body.world-boss-active #toast { top:calc(var(--mechanic-top) + var(--mechanic-clearance) + 38px); }
@media(max-width:479px) {
  body.world-boss-active #world-boss-mechanic { padding:7px 10px; gap:8px; }
  body.world-boss-active .world-boss-mechanic-copy small { max-width:none; font-size:11px; line-height:16px; }
}

/* Timed counter and the short team burst stay visible above the arena blackout. */
body.world-boss-active .battle.dark-counter-ready { background:#fff8dc; border:2px solid #fffdf0; box-shadow:0 0 0 3px #f7d98188; }
body.world-boss-active .battle.dark-counter-ready .skill-symbol { color:#9a6b35; }
body.world-boss-active .battle.burst-ready { border-color:#d7a651; box-shadow:inset 0 0 0 1px #ffe3a5; }
body.world-boss-active #world-boss-mechanic[data-kind="darkness"][data-phase="beat"] { background:#fff9e7; border-left-color:#e1b34d; }

body.world-boss-active #gum.dark-counter-ready, body.world-boss-active #gum.dark-counter-ready b, body.world-boss-active #gum.dark-counter-ready span { color:#6d4d2d; }

/* Clear, contained battle notices. The feed uses existing cat portraits. */
.region-card .region-entry-icon { object-fit:contain; image-rendering:auto; }
#battle-feed { width:324px; max-height:228px; padding:5px; }
#battle-feed.is-auto { pointer-events:none; max-height:153px; border:none; padding:0; background:transparent; box-shadow:none; overflow:hidden; }
.battle-feed-row { display:grid; grid-template-columns:32px 25px minmax(0,1fr) 26px 25px minmax(0,1fr); gap:5px; min-height:38px; margin:3px 0; padding:5px 7px; background:#fff5e6ed; border:1px solid #c4a77c55; border-radius:8px; }
.battle-feed-row.is-my-kill { background:#fff0d8f5; border-color:#bc7d4a65; color:#78502d; }
.battle-feed-row.is-my-death { background:#ffeadff5; border-color:#bd826a65; color:#91553f; }
.feed-avatar { width:25px; height:25px; border-radius:50%; object-fit:cover; border:1px solid #b99563; }
.feed-victim { border-color:#c8806b; opacity:.85; }
.feed-source,.feed-target { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.feed-time { font-variant-numeric:tabular-nums; font-size:9px; color:#9d846a; }
.feed-kill-mark { color:#a7793e; font-size:10px; font-weight:600; text-align:center; white-space:nowrap; }
#multikill-notice { position:absolute; top:72px; left:50%; transform:translateX(-50%); width:max-content; max-width:min(340px,calc(100vw - 32px)); padding:0; display:flex; gap:8px; align-items:baseline; justify-content:center; z-index:14; pointer-events:none; border:0; background:none; box-shadow:none; color:#fff6e6; font-size:18px; line-height:1.5; text-shadow:0 1px 3px #16313ded,0 0 2px #16313db0; }
#multikill-notice[hidden] { display:none; }
.multikill-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.multikill-label { flex-shrink:0; color:#ffdb82; font-weight:800; }
#multikill-notice[data-count="5"] .multikill-label { color:#ffe8a7; }
#multikill-notice.is-announcing { animation:kill-announcement var(--notice-ms,3600ms) ease both; }
@keyframes kill-announcement { 0%{opacity:0;transform:translate(-50%,-3px)} 7%,85%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0;transform:translate(-50%,-2px)} }
.multikill-active #event-banner { top:113px; }
body.photo-mode #multikill-notice { display:none!important; }
@media(max-width:1100px) and (orientation:landscape),(max-height:500px) and (orientation:landscape) {
 #battle-feed { width:268px; max-height:128px; top:52px; }
 .multikill-active #battle-feed:not(.is-auto) { top:94px; }
 .multikill-active #battle-feed.is-auto { visibility:hidden; }
 .battle-feed-row { grid-template-columns:29px 21px minmax(0,1fr) 22px 21px minmax(0,1fr); gap:4px; min-height:31px; padding:3px 5px; font-size:9px; }
 .feed-avatar { width:21px;height:21px; }.feed-time{font-size:8px;}
 #multikill-notice { top:64px; max-width:min(270px,calc(100vw - 32px)); font-size:16px; }
 .multikill-active #event-banner { top:100px; }
}
@media(orientation:portrait) {
 #battle-stats { width:142px; }
 #battle-feed { top:78px; width:min(294px,calc(100vw - 24px)); max-height:183px; }
 #battle-feed.is-auto { max-height:86px; }
 .battle-feed-row{grid-template-columns:28px 23px minmax(0,1fr) 24px 23px minmax(0,1fr);gap:4px;font-size:10px;padding:4px 6px;min-height:35px}
 .feed-avatar{width:23px;height:23px}.feed-time{font-size:8px}
 #multikill-notice { top:155px; max-width:min(292px,calc(100vw - 32px)); font-size:16px; }
 .multikill-active #event-banner { top:196px; }
 .multikill-active #battle-feed.is-auto { visibility:hidden; }
 .multikill-active #battle-feed:not(.is-auto) { top:202px; }
 body.multikill-active[data-zone=brawl]:has(#battle-stats.is-expanded:not([hidden])) #event-banner { top:118px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
}
@media(prefers-reduced-motion:reduce){#multikill-notice.is-announcing{animation:none}}

#emote-menu button.is-auto-emote{position:relative;outline:2px solid #c4842f;outline-offset:1px}#emote-menu button.is-auto-emote::after{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:#c4842f;box-shadow:0 0 0 2px #fff6e5}