#rewardFeed, #bossBanner {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}
#rewardFeed {
  left: max(10px, env(safe-area-inset-left));
  bottom: 12px;
  display: grid;
  gap: 3px;
  max-width: min(420px, 80%);
  max-height: 40%;
  overflow: hidden;
  align-content: end;
}
#rewardFeed > div, #bossBanner {
  width: fit-content;
  border: 1px solid #716657;
  background: #10151bed;
  color: #f1e3c9;
  padding: 5px 10px;
  border-radius: 4px;
}
#bossBanner { top: 8px; left: 50%; transform: translateX(-50%); color: #ffd58b; text-align: center; }
#touchMoveControls { display: none; }
.gather-commands { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.gather-commands small { color: #cfc4ae; }
.gather-commands kbd { color: #ead5ad; }
.gather-commands button { min-height: 40px; padding: 3px 12px; color: #ffe0a7; border: 1px solid #ab8854; background: #373026; }
#resumePrompt { padding: 12px; }
#resumeInfo { margin: 12px 0; }
.resume-actions { display: flex; justify-content: center; gap: 10px; }
.resume-actions button { padding: 9px 18px; min-height: 44px; }
.ingredients li > button[data-material], .ingredient-list button[data-material] { display: flex; width: 100%; align-items: center; gap: 6px; justify-content: space-between; }
button[data-material] { text-align: left; color: inherit; background: transparent; border: 0; cursor: pointer; }
button[data-material]:hover, button[data-material]:focus-visible { background: #494335; }
#touchRecipeBack { flex: none; }
#touchRecipeTitle { min-width: 0; flex: 1; }
#touchRecipe .touch-material { width: 100%; min-height: 36px; }
#touchRecipe .touch-material.missing { color: #edb398; }
.compact-ui, .compact-ui * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.compact-ui input, .compact-ui textarea, .compact-ui [contenteditable=true] { -webkit-user-select: text; user-select: text; }
.compact-ui, .compact-ui button, .compact-ui summary, .compact-ui label { touch-action: manipulation; }
.compact-ui #field { touch-action: none; }
.compact-ui #touchMoveControls {
  display: flex; gap: 4px; position: absolute; z-index: 12; right: max(8px, env(safe-area-inset-right)); bottom: 8px;
}
.compact-ui #touchMoveControls button {
  min-height: 40px; min-width: 70px; color: #efd8a8; background: #242b30eb; border: 1px solid #95856b;
}
.compact-ui #touchClear:disabled { opacity: .4; cursor: default; }
@media (max-width: 360px) {
 .compact-ui #touchMoveControls button { min-width: 60px; padding: 3px 6px; font-size: 11px; }
}
.compact-ui #touchMoveToggle[aria-pressed=false] { color: #eee; border-style: dashed; }
.compact-ui #rewardFeed { bottom: 54px; }
.battle-ui #playerViews { flex: 0 1 clamp(105px, 21vw, 222px); min-width: 90px; max-width: none; overflow: auto hidden; }
.compact-ui #playerViews button { flex: none; }
.compact-ui .arena-top:has(#comboDropdown[open]) { z-index: 1560; }
.compact-ui #comboDropdown .rts-dropdown-body {
  display: block; overflow: auto; overscroll-behavior: contain;
  max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 12px);
  right: max(6px, env(safe-area-inset-right)); box-sizing: border-box;
}
.compact-ui #comboDropdown .hud-library,
.compact-ui #comboDropdown .hud-inspector,
.compact-ui #comboDropdown .library-body {
  display: block; height: auto; min-height: 0; max-height: none; overflow: visible;
}
.compact-ui #comboDropdown .side-tabs,
.compact-ui #comboDropdown .inspector-tabs,
.compact-ui #comboDropdown .library-toolbar,
.compact-ui #comboDropdown .filters {
  position: static; display: flex; align-items: center; flex-wrap: wrap;
  height: auto; min-height: min-content; max-height: none; overflow: visible; gap: 4px;
}
.compact-ui #comboDropdown .search-wrap { flex: 1 1 185px; height: auto; min-height: 44px; padding: 0; margin: 0; position: relative; }
.compact-ui #comboDropdown #search { box-sizing: border-box; height: 44px; width: 100%; min-width: 0; font-size: 16px; }
.compact-ui #comboDropdown .filters input[type=checkbox] { width: auto; min-height: 0; }
.compact-ui #comboDropdown .catalog { height: auto; max-height: 32dvh; overflow-y: auto; }
.compact-ui #comboDropdown .hud-detail { height: auto; max-height: none; min-height: 0; overflow: visible; }
.compact-ui #comboDropdown .inspector-tabs button { flex: 1 1 auto; height: auto; min-height: 44px; white-space: nowrap; }
.compact-ui input:not([type=checkbox]), .compact-ui textarea { font-size: 16px; }
.compact-ui.battle-info-open #selectionInfo { overflow-y: auto; box-sizing: border-box; }
.compact-ui #touchRecipeBody { min-height: 0; overflow-y: auto; }
.battle-ui #touchMoveControls { bottom: 8px; }
.battle-ui #rewardFeed { bottom: 8px; }
@media (max-width: 620px) {
 .compact-ui .arena-top { overflow: visible; }
 .compact-ui #playerViews { min-width: 62px; }
 .compact-ui .arena-top #findShops { display: none !important; }
}


@media (orientation: landscape) and (min-width: 621px) {
  .battle-ui #comboDropdown .library-body {
    display: grid; grid-template-columns: minmax(180px, .85fr) minmax(230px, 1.15fr);
    align-items: start;
  }
  .battle-ui #comboDropdown .catalog { max-height: 38dvh; }
}
@media (orientation: portrait) {
  .compact-ui #comboDropdown .library-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .compact-ui #comboDropdown .filters { width: 100%; flex-flow: row wrap; }
}

[data-consume], .economy-submit { min-height: 40px; margin: 4px 0; padding: 4px 12px; }
[data-consume] { color: #ffc69f; border: 1px solid #996f53; background: #352b28; }
#arena { --record-bottom: 8px; }
.compact-ui:not(.battle-ui) #arena { --record-bottom: 54px; }
.battle-ui.selection-tools-open #arena { --record-bottom: 62px; }
#gambleStatsButton, #battleStats {
  position: absolute; left: max(8px, env(safe-area-inset-left)); z-index: 16;
  background: #18212af2; color: #f4e6c9; border: 1px solid #95856b; border-radius: 4px;
}
#gambleStatsButton { bottom: var(--record-bottom); min-height: 42px; padding: 4px 12px; }
#gambleStatsButton[aria-expanded=true] { background: #59492e; }
#battleStats, #arena #rewardFeed { bottom: calc(var(--record-bottom) + 47px); }
#battleStats {
  padding: 8px 12px; white-space: pre-line; font-size: 13px; line-height: 1.5;
  max-width: min(520px, 80%); max-height: 52%; overflow-y: auto; overscroll-behavior: contain;
}
#rewardFeed > div { white-space: pre-line; }
#arena:has(#battleStats:not([hidden])) #rewardFeed,
#arena:has(.rts-chat.open) #rewardFeed, #arena:has(.rts-chat.open) #gambleStatsButton,
#arena:has(.rts-chat.open) #battleStats { visibility: hidden; }
#dialog .roll-outcomes { padding-inline-start: 1.3em; line-height: 1.55; }
#dialog .roll-outcomes li { margin-block: .4em; }
#dialog .roll-terms { color: #f3d491; }

#hostWaiting:not([hidden]) {
  position: absolute; z-index: 19; top: 15%; left: 50%; transform: translateX(-50%);
  padding: 8px 14px; border: 1px solid #b2a47c; border-radius: 4px; background: #1b222cf2;
  color: #f8e8ba; text-align: center; white-space: nowrap; pointer-events: none;
}
#selectionRoster[hidden], .rts-command-grid[hidden] { display: none !important; }
#selectionRoster { min-height: 0; min-width: 0; display: flex; flex-direction: column; padding: 5px; gap: 4px; background: #1c2428; }
.roster-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 12px; color: #e5cb95; }
.roster-heading button, #touchRosterGather { background: #303734; color: #ead5a8; border: 1px solid #83795e; }
.roster-faces { position: relative; display: flex; flex-wrap: wrap; gap: 3px; align-content: start; overflow: auto; overscroll-behavior: contain; }
.roster-faces button { position: relative; display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 1px; border: 2px solid #62656d; background: #202623; }
.roster-faces button[aria-pressed=true] { border-color: #ffe398; box-shadow: inset 0 0 0 1px #b68f4d; }
.roster-faces .pixel-icon, .roster-faces canvas { width: 100%; height: 100%; }
#touchRosterGather { display: none; }
body:not(.compact-ui) .command-hud.has-roster { grid-template-columns: minmax(0,17fr) minmax(0,9fr) minmax(0,23fr) minmax(0,27fr) minmax(0,24fr); }
body:not(.compact-ui) .has-roster .rts-status { display: none; }
body:not(.compact-ui) .has-roster #selectionRoster { grid-column: 3; grid-row: 1; }
body:not(.compact-ui) .has-roster .hud-selection { grid-column: 4 !important; grid-row: 1; }
body:not(.compact-ui) .has-roster .rts-command-panel { grid-column: 5 !important; grid-row: 1; }
body:not(.compact-ui) #touchFullscreen { display: inline-block; }
.rts-command-slot [data-consume] { min-height: 0; margin: 0; padding: 1px; }
.compact-ui .battle-column.has-roster { grid-template-rows: 48px minmax(0,1fr) 52px; }
.battle-ui .battle-column.has-roster { grid-template-rows: 44px minmax(0,1fr) 52px; }
.compact-ui #selectionRoster { flex-direction: row; align-items: center; padding: 2px 6px; grid-row: 3; }
.compact-ui .roster-heading { flex: none; flex-direction: column; gap: 1px; }
.compact-ui .roster-heading button { min-height: 26px; }
.compact-ui .roster-faces { flex: 1; flex-wrap: nowrap; overflow-x: auto; }
.compact-ui .roster-faces button { width: 44px; height: 44px; }
.compact-ui #touchRosterGather { display: block; min-height: 44px; }
.compact-ui .arena-top #findPakun { display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; }
.compact-ui:not(.recipes-open) .rts-command-slot:empty { display: block; }
.compact-ui .rts-command-grid { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(44px,1fr)); }
.compact-ui .rts-command-slot { min-height: 0; }
.compact-ui .rts-command-slot>button { min-height: 40px; }
.phone-ui:not(.battle-ui) { --touch-deck: 178px; }
.battle-ui.commands-open:not(.recipes-open) .command-hud { height: min(224px,calc(100dvh - 108px)); }
.battle-ui.recipes-open .rts-command-grid { grid-template-rows: auto; }
.battle-ui.battle-info-open:not(.shop-selected):not(.gallery-selected) .command-hud {
 width: min(650px,calc(100vw - 12px)); grid-template-columns: minmax(140px,1fr) minmax(190px,1.25fr);
}
.battle-ui.battle-info-open:not(.shop-selected):not(.gallery-selected) .rts-command-panel { display: grid; grid-column: 2 !important; }
.gamble-tabs { display: flex; flex-wrap: wrap; gap: 3px; }
.gamble-tabs button, [data-gamble-details] { padding: 3px 7px; border: 1px solid #857859; }
.gamble-tabs [aria-pressed=true] { color: #ffe09d; border-color: #d1ad72; }
#selectionInfo .roll-outcomes { margin: 4px 0; padding-left: 1.4em; line-height: 1.55; }
#selectionInfo .roll-terms { margin: 5px 0; color: #efd69b; }
.shop-selected .hud-selection #selectionInfo { overflow-y: auto; }
.compact-ui .gamble-tabs button, .compact-ui [data-gamble-details] { min-height: 40px; }

#pakunResource { color: inherit; font: inherit; background: transparent; border: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 4px; padding: 0; }
#touchResources [data-pakun-resource] { color: #f4dca2; white-space: nowrap; border: 0; background: transparent; padding: 0 4px; font-size: inherit; }
#worldMinimap { touch-action: none; cursor: grab; }
#worldMinimap:active { cursor: grabbing; }
.compact-ui .arena-top, .compact-ui.battle-ui .arena-top { height: 36px; min-height: 36px; padding-block: 0; }
.compact-ui .battle-column,.compact-ui .battle-column.has-roster { position: relative; grid-template-rows: 36px minmax(0,1fr); }
.compact-ui .arena-top button,.compact-ui .arena-top #playerViews button,.compact-ui #comboDropdown>summary,
.compact-ui .arena-top :is(#findShops,#touchMap,#touchMore,#touchFullscreen) { min-height: 32px !important; height: 32px; padding-block: 0; }
.compact-ui #selectionRoster:not([hidden]) { position: absolute; z-index: 18; bottom: 0; left: 0; right: 0; height: 50px; box-sizing: border-box; grid-row: auto; }
.compact-ui .has-roster #touchMoveControls { bottom: 54px; }
.compact-ui .has-roster #rewardFeed { bottom: 54px; }
.compact-ui :is(#zoomIn,#zoomOut),.battle-ui #touchQuickBar>#touchUnitInfo[hidden] {display:none!important}
#gambleStatsButton { position: static; z-index: auto; min-height: 28px; padding: 3px 5px; font: inherit; }
#arena #rewardFeed { bottom: 9px; }
#arena #rewardFeed > div { border: 0; background: transparent; box-shadow: none; padding: 1px 4px; text-shadow: 0 1px 3px #111, 1px 0 2px #111; }
#bossBanner { top: 15%; }
#battleStats { bottom: 8px; z-index: 17; }
body:is(.touch-map-open,.commands-open,.selection-tools-open,.unit-details-open):has(#battleStats:not([hidden])) #battleStats,
body:has(#comboDropdown[open],#touchMenu:not([hidden]),#touchRecipe:not([hidden]),dialog[open],#startOverlay:not([hidden]),#resultOverlay:not([hidden]):not(.victory)) #battleStats {visibility:hidden}
.guest-player :is(#reset,#roomStart,[data-menu-action=reset]),
.online-mode :is(#save,#load,#pause,[data-menu-action=save],[data-menu-action=load],[data-menu-action=pause],[data-menu-action=speed]),
.readonly-unit :is(.rts-command-panel,.upper-combos,#touchQuickAttack,#touchQuickHold,#touchQuickCombo,#touchQuickOrders,#touchRosterGather,#sendBoss,#touchMoveToggle),
.readonly-unit .rts-command-panel, .guest-player #again[hidden] { display:none!important; }
.recipe-possible { color:#e1ca95; font-weight:bold; }
#resultOverlay.victory { display: block; position: absolute; inset: 3% 0 auto; background: none; pointer-events: none; text-align: center; z-index: 20; }
#resultOverlay.victory .start-card { width:fit-content; max-width:86%; margin:auto; padding:6px 18px; background:#252927ec; border:1px solid #e2bf73; box-shadow:0 0 14px #f4bb463d; }
#resultOverlay.victory .seal { display:none; }
#resultOverlay.victory h2 { font-size:clamp(15px,3vw,25px); color:#ffe2a1; margin:0; }
#resultOverlay.victory p { display:inline; margin:0 6px 0 0; }
#resultOverlay.victory button { pointer-events:auto; font-size:12px; padding:4px 8px; }
.victory-sparks { position:absolute; inset:0; z-index:19; overflow:hidden; pointer-events:none; }
.victory-sparks i { position:absolute; width:5px; height:5px; border-radius:50%; opacity:0; animation:victory-burst 1.35s ease-out var(--delay) both; }
@keyframes victory-burst { 0%{opacity:0; transform:scale(.2)} 8%{opacity:1} 75%{opacity:1} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)} }
#resultOverlay[hidden],#again[hidden]{display:none!important}

#skillTooltip { position:fixed; z-index:1100; width:max-content; max-width:min(330px,92vw); max-height:min(54dvh,300px); overflow:auto; padding:11px 14px; border:1px solid #b7a26e; border-radius:6px; background:#25282ffa; color:#eee9d8; box-shadow:0 4px 15px #0006; font:13px/1.45 system-ui,sans-serif; touch-action:pan-y; }
#skillTooltip strong,#skillTooltip small { display:block; } #skillTooltip strong {color:#ffdf94;font-size:15px} #skillTooltip small {color:#c1c4cb} #skillTooltip p {margin:5px 0}
.unit-skill-list {display:flex; gap:4px; flex-wrap:wrap;margin:4px 0}.unit-skill-list button {font-size:11px;padding:3px 6px}
[data-quick-skill],[data-skill-info],.skill-entry>summary,[data-skill]{position:relative;-webkit-touch-callout:none}
button .skill-cooldown,.skill-entry>summary .skill-cooldown {display:grid!important;place-items:center;position:absolute!important;right:1px;bottom:1px;z-index:2;min-width:0;width:26px!important;height:26px;box-sizing:border-box;border-radius:50%;border:1px solid #daca9d;pointer-events:none;background:conic-gradient(from 0deg,#3f444d88 0deg var(--elapsed),#15181deb var(--elapsed) 360deg);color:white!important;text-shadow:0 1px 2px black;font:bold 9px/1 system-ui;overflow:visible;}
#soloSettings:has(#mode option[value="join"]:checked) label:has(#difficulty){display:none}
body.compact-ui:has(#selectionRoster:not([hidden])) #arena #rewardFeed{bottom:53px}
body:not(.compact-ui) #touchRecipe:not([hidden]){display:flex;flex-direction:column;position:fixed;right:15px;bottom:15px;z-index:120;width:min(410px,90vw);max-height:65vh;background:#24272e;color:#e9e4d6;border:1px solid #a49467;border-radius:6px;padding:10px}
body:not(.compact-ui) #touchRecipeBody{overflow:auto}

#skillTimelines>div{color:#ead6a0;font-size:11px;margin:3px 0} #skillTimelines progress{display:block;width:100%;height:4px;accent-color:#98ddc4}

.readonly-unit :is(.craft-button[data-craft-index],.cast-skill,.recipe-commands,[data-add-unit]){display:none!important}

/* Keep menu actions out of the narrow unit-information heading. */
#touchMore { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
#touchMenu #gambleStatsButton { position: static; min-height: 48px; padding: 6px; font-size: 14px; white-space: nowrap; }
.hud-selection > .hud-label { display: flex; align-items: center; gap: 6px; }
.hud-selection > .hud-label > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-selection #followSelection { flex: none; white-space: nowrap; }
#desktopSpeedControl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
#desktopSpeedControl[hidden], .compact-ui #desktopSpeedControl, .guest-player #desktopSpeedControl { display: none; }
#desktopSpeedControl .game-speed-slider { width: 105px; }
#desktopSpeedControl output { min-width: 32px; color: #f0d49b; }
#gameSpeedControls { margin: 14px 0 0; padding: 10px 0 0; border: 0; border-top: 1px solid #675e4e; min-width: 0; }
#gameSpeedControls[hidden], .guest-player #gameSpeedControls { display: none; }
#gameSpeedControls legend { padding: 0 5px 0 0; font-size: 13px; color: #d5c6a6; }
#gameSpeedValue { margin-left: 10px; font-weight: bold; color: #ffe3a2; }
.game-speed-slider { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: linear-gradient(to right, #d6b571 var(--speed-progress, 20%), #5b5f68 var(--speed-progress, 20%)) center / 100% 6px no-repeat; cursor: pointer; touch-action: pan-y; }
.game-speed-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #efce89; border: 2px solid #6d5837; box-shadow: 0 1px 4px #0008; }
.game-speed-slider::-moz-range-thumb { width: 21px; height: 21px; border-radius: 50%; background: #efce89; border: 2px solid #6d5837; }
.game-speed-slider:focus-visible { outline: 2px solid #f4d795; outline-offset: 2px; }
.game-speed-slider:disabled { opacity: .4; cursor: default; }
.game-speed-ticks { display: flex; justify-content: space-between; gap: 6px; padding-inline: 4px; font-size: 12px; color: #c8c3af; }

/* Notices form one stack above the selection tools and selected-unit roster. */
#arena { --notice-controls: 0px; --notice-roster: 0px; }
.compact-ui:not(.battle-ui) #arena, .battle-ui.selection-tools-open #arena { --notice-controls: 64px; }
.compact-ui .has-roster #arena { --notice-roster: 50px; }
.compact-ui .has-roster #touchControls { bottom: 54px; }
#arena .rts-notice {
  position: absolute; left: max(8px, env(safe-area-inset-left));
  bottom: calc(8px + var(--notice-controls) + var(--notice-roster));
  display: flex; flex-direction: column; gap: 4px; max-height: 42%; overflow: hidden;
  width: max-content; max-width: calc(100% - 100px); pointer-events: none; z-index: 16;
}
#arena .rts-notice #rewardFeed {
  position: static; inset: auto; transform: none; width: auto; max-width: 100%; max-height: none;
  flex: 1; min-height: 0; overflow: hidden; font-size: 12px; line-height: 1.4;
}
#arena .rts-notice #rewardFeed > div { padding: 2px 5px; background: transparent; overflow-wrap: anywhere; }
#arena .rts-notice #toast { display: none; background: transparent; text-shadow: 0 1px 3px #111, 1px 0 2px #111; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; }
#arena .rts-notice #toast.show { display: block; flex: none; }
#arena:has(.rts-chat.open) .rts-notice { visibility: hidden; }
.notification-history { min-width: 0; }
.notification-caption { color: #bcb5a6; font-size: 12px; }
#notificationList { list-style: none; padding: 0; margin: 12px 0 0; }
#notificationList li { padding: 9px 2px; border-top: 1px solid #514d43; }
#notificationList small { color: #b4b5ac; font-size: 11px; }
#notificationList p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
#notificationList .notification-error p { color: #ffb7a6; }

.growth-panel { min-width: 0; }
.growth-tabs { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #625b49; }
.growth-tabs button { flex: none; min-height: 40px; padding: 5px 12px; white-space: nowrap; }
.growth-tabs button[aria-pressed=true] { color: #ffe3a2; background: #58482c; border-color: #bea477; }
.growth-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(230px,100%),1fr)); gap: 10px; }
.growth-cards section { min-width: 0; padding: 10px; border: 1px solid #5b5e66; background: #23262c; border-radius: 5px; }
.growth-cards h3 { margin: 3px 0 7px; font-size: 15px; }
.growth-cards p { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#growthContent button { min-height: 42px; margin: 3px 5px 3px 0; padding: 6px 10px; font-size: 12px; }
#growthContent select { min-height: 40px; margin-left: 5px; }
.growth-actor > .pixel-icon { float: left; width: 42px; height: 45px; margin-right: 8px; }

.profile-actions{display:flex;flex-wrap:wrap;gap:8px}#webSaveCode{width:100%;box-sizing:border-box;resize:vertical;color:var(--ink,#eee);background:#101b25;border:1px solid #747b86;padding:10px;overflow-wrap:anywhere}#startProfile{margin-top:10px}.night-mode .viewport-canvas,.night-mode #field{filter:brightness(.72) saturate(.85)}