/* css/ui.css — WP-UI. HUD, minimap frame, menus, panels and toasts inside #ui-root (Aegean blue/white theme). */
.ez-layer { position: absolute; inset: 0; pointer-events: none; }
.ez-hidden { display: none !important; }
.ez-box {
  background: rgba(12, 34, 56, 0.74); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px;
  padding: 8px 10px; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
/* inline SVG icons (EZ.ui.dom.icon): items, weapons, tools, upgrade kinds, sun/moon */
.ez-ico { display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; overflow: visible; }
.ez-box .ez-ico { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }

/* ---- HUD: top-left survival bars */
#ez-hud-tl { position: absolute; left: 12px; top: 12px; width: 250px; }
.ez-stat { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.ez-stat label { width: 52px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; opacity: 0.9; }
.ez-bar { position: relative; flex: 1; height: 16px; background: rgba(0, 0, 0, 0.45); border-radius: 8px; overflow: hidden; }
.ez-bar > i { display: block; height: 100%; width: 0; border-radius: 8px; transition: width 0.12s linear; }
.ez-bar > span {
  position: absolute; inset: 0; text-align: center; font-size: 11px; font-weight: 700; line-height: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.ez-bar.hp > i { background: linear-gradient(#e8574f, #b8302a); }
.ez-bar.hunger > i { background: linear-gradient(#f0a646, #c97a1f); }
.ez-bar.thirst > i { background: linear-gradient(#55b0ec, #2a7cbc); }
.ez-bar.low > i { animation: ez-pulse 0.8s ease-in-out infinite alternate; }
@keyframes ez-pulse { from { opacity: 1; } to { opacity: 0.45; } }
/* D1 R53: helpers indicator under the bars (count + one dot per helper) */
.ez-hhud {
  display: flex; align-items: center; gap: 6px; margin: 5px 0 0; padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 12px; font-weight: 700;
}
.ez-hhud .ez-ico { width: 17px; height: 17px; margin-right: 0; }
.ez-hhud-dots { display: inline-flex; gap: 4px; margin-left: 2px; }
.ez-hdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.55); background: #9aa5ae; }
.ez-hdot.work { background: #4cc46a; } .ez-hdot.warn { background: #f0b440; } .ez-hdot.stop { background: #ff4a3a; }
.ez-hhud.stop { color: #ffb0a6; }
.ez-hhud.stop .ez-hhud-t { animation: ez-pulse 0.8s ease-in-out infinite alternate; }

/* ---- HUD: top-centre clock + toasts */
#ez-hud-tc { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); text-align: center; }
.ez-clock { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; padding: 6px 14px; }
.ez-clock .ez-sep { opacity: 0.5; font-weight: 400; }
.ez-clock .ez-phase, .ez-clock .ez-pico { display: inline-flex; align-items: center; gap: 5px; }
.ez-clock .ez-phase .ez-ico { width: 19px; height: 19px; margin: 0; filter: drop-shadow(0 0 4px rgba(255, 210, 74, 0.7)); }
.ez-clock.night .ez-phase .ez-ico { filter: drop-shadow(0 0 4px rgba(159, 191, 255, 0.8)); }
.ez-clock.blood { border-color: #e03a3a; background: rgba(70, 8, 12, 0.82); }
.ez-clock.blood .ez-phase .ez-ico { filter: drop-shadow(0 0 5px rgba(255, 64, 64, 0.9)); }
.ez-clock .ez-time { font-variant-numeric: tabular-nums; opacity: 0.9; font-weight: 600; min-width: 2.6em; text-align: left; }
.ez-badge {
  display: inline-block; margin-top: 5px; padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; background: #8b0f14; color: #fff; text-transform: uppercase;
}
#ez-toasts {
  position: absolute; top: 76px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ez-toast {
  background: rgba(12, 34, 56, 0.9); color: #fff; border-left: 4px solid #5aa0e6; border-radius: 6px;
  padding: 6px 14px; font-size: 14px; font-weight: 600; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: opacity 0.35s ease;
}
.ez-toast.good { border-color: var(--ez-good); } .ez-toast.warn { border-color: var(--ez-warn); }
.ez-toast.bad { border-color: var(--ez-bad); } .ez-toast.ez-fade { opacity: 0; }

/* ---- HUD: top-right score + pause */
#ez-hud-tr { position: absolute; right: 12px; top: 12px; display: flex; gap: 8px; align-items: flex-start; }
.ez-score { text-align: right; min-width: 110px; }
.ez-score small { display: block; font-size: 11px; font-weight: 700; opacity: 0.75; letter-spacing: 0.06em; text-transform: uppercase; }
.ez-score b { font-size: 24px; font-variant-numeric: tabular-nums; color: var(--ez-gold); }
.ez-offline { display: block; margin-top: 3px; font-size: 10px; font-weight: 700; color: #ffd98a; text-transform: uppercase; }
.ez-hudbtn {
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(31, 95, 168, 0.9); color: #fff; border-radius: 8px;
  padding: 8px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ez-hudbtn:hover { background: rgba(47, 120, 200, 0.95); }

/* ---- HUD: bottom-centre prompt, slots, ammo/heat */
#ez-hud-bc {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ez-prompt {
  background: rgba(247, 245, 239, 0.96); color: #1d2327; border: 2px solid var(--ez-blue); border-radius: 8px;
  padding: 4px 14px; font-weight: 700; font-size: 14px;
}
.ez-weapon-info { display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; padding: 5px 10px; }
.ez-weapon-info .ez-bar { flex: none; width: 130px; height: 10px; }
.ez-bar.reload > i { background: #e8e2c8; } .ez-bar.heat > i { background: linear-gradient(90deg, #f0b440, #e8453a); }
.ez-bar.heat.over > i { background: #ff2a2a; animation: ez-pulse 0.4s infinite alternate; }
.ez-ammo { font-size: 16px; font-variant-numeric: tabular-nums; }
.ez-ammo small { opacity: 0.7; font-size: 12px; margin-left: 4px; }
.ez-slots { display: flex; gap: 6px; align-items: stretch; }
.ez-slot {
  min-width: 78px; background: rgba(12, 34, 56, 0.78); border: 2px solid rgba(255, 255, 255, 0.18); border-radius: 8px;
  padding: 4px 9px; color: #fff; text-align: left; font-size: 11px; cursor: pointer;
}
.ez-slot b { display: flex; align-items: center; font-size: 13px; white-space: nowrap; }
.ez-slot b .ez-ico { width: 18px; height: 18px; margin-right: 5px; }
.ez-slot small { display: block; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.ez-slot.active { border-color: #ffd24a; background: rgba(31, 95, 168, 0.92); }
.ez-setbtn { min-width: 70px; text-align: center; background: rgba(247, 245, 239, 0.92); color: #1d2327; border-color: var(--ez-blue); }
.ez-setbtn b { font-size: 12px; justify-content: center; }
.ez-up-head b { display: inline-flex; align-items: center; }
.ez-up-head b .ez-ico { width: 20px; height: 20px; }
.ez-effect .ez-ico { width: 15px; height: 15px; }

/* ---- HUD: bottom-left backpack summary */
#ez-hud-bl { position: absolute; left: 12px; bottom: 12px; }
.ez-pack { font-size: 13px; font-weight: 600; min-width: 130px; }
.ez-pack div { display: flex; align-items: center; margin: 2px 0; font-variant-numeric: tabular-nums; }
.ez-pack div.full { color: #ffb36b; }
.ez-pack .ez-hudbtn { margin-top: 6px; width: 100%; padding: 5px 8px; font-size: 12px; }
.ez-pack .ez-pack-btns { gap: 4px; margin: 6px 0 0; align-items: stretch; }
.ez-pack .ez-pack-btns .ez-hudbtn { margin-top: 0; flex: 1 1 auto; width: auto; white-space: nowrap; }
.ez-pack .ez-pack-btns .ez-eatbtn { flex: none; display: inline-flex; align-items: center; padding: 4px 6px; background: rgba(47, 138, 74, 0.92); }
.ez-pack .ez-pack-btns .ez-eatbtn:hover { background: rgba(62, 162, 92, 0.96); }
.ez-eatbtn .ez-ico { width: 14px; height: 14px; margin-right: 1px; vertical-align: 0; }
.ez-eatbtn span { margin-left: 3px; }

/* ---- Minimap */
.ez-minimap {
  position: absolute; right: 12px; bottom: 12px; border: 3px solid #f7f5ef; border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); background: #15557e; line-height: 0;
}
.ez-minimap.blood { border-color: #c01820; }
/* step v2: big windows scale the HUD (EZ.ui sets --ez-ui: 1 up to 1280x720, 1.3 at 1920x1080, max 1.4). Centred
   groups zoom their children (their parent keeps centring them); the minimap canvas scales itself in minimap.js. */
#ez-hud-tl, #ez-hud-tr, #ez-hud-bl, #ez-hud-tc > .ez-clock, #ez-hud-tc > .ez-badge, #ez-hud-bc > *, .ez-toast { zoom: var(--ez-ui, 1); }
#ez-toasts { top: calc(76px * var(--ez-ui, 1)); }

/* ---- Screens (menus), pause, confirm */
.ez-screen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(12, 60, 100, 0.35), rgba(6, 24, 44, 0.78));
}
.ez-card {
  background: #f7f5ef; color: #1d2327; border-radius: 14px; border-top: 8px solid var(--ez-blue);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); overflow: auto; padding: 18px 22px 16px;
}
.ez-card.wide { width: min(620px, calc(100vw - 32px)); }
.ez-card h1 { font-family: var(--ez-font-title); color: var(--ez-blue); font-size: 40px; margin: 4px 0 2px; text-align: center; }
.ez-card h2 { font-family: var(--ez-font-title); color: var(--ez-blue); font-size: 26px; margin: 2px 0 10px; text-align: center; }
.ez-card .ez-sub { text-align: center; color: #5b6770; margin: 0 0 14px; font-size: 14px; }
.ez-card .ez-meander { height: 8px; margin: 8px 0 12px; background: repeating-linear-gradient(90deg, var(--ez-blue) 0 12px, transparent 12px 18px); opacity: 0.6; }
.ez-btn {
  display: block; width: 100%; padding: 10px 14px; margin: 8px 0; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--ez-blue); color: #fff; font-size: 16px; font-weight: 700; text-align: center;
}
.ez-btn:hover { background: #245c98; }
.ez-btn small { display: block; font-size: 12px; font-weight: 500; opacity: 0.85; }
.ez-btn.secondary { background: #dfe7ee; color: #1d2327; } .ez-btn.secondary:hover { background: #cfdbe5; }
.ez-btn.danger { background: #c9433a; } .ez-btn.danger:hover { background: #a9352d; }
.ez-btn.good { background: #2f8a4a; } .ez-btn.good:hover { background: #256f3b; }
.ez-btn:disabled, .ez-btn:disabled:hover { background: #c3c9ce; color: #6c757d; cursor: not-allowed; }
.ez-btn.sm { display: inline-block; width: auto; padding: 4px 9px; margin: 2px 2px; font-size: 12px; border-radius: 6px; }
.ez-row { display: flex; gap: 8px; } .ez-row .ez-btn { flex: 1; }
/* EN / ΕΛ language switch (main menu row + pause menu) */
.ez-lang { display: inline-flex; flex: none; align-items: center; margin: 2px 0; border-radius: 7px; overflow: hidden;
  border: 1px solid #b8c6d2; }
.ez-lang .ez-btn.sm { flex: none; margin: 0; border-radius: 0; min-width: 46px; padding: 4px 10px; font-size: 13px; letter-spacing: 0.04em; }
.ez-lang .ez-btn.sm.on { background: var(--ez-blue); color: #fff; cursor: default; }
.ez-langrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
/* Sound settings (main menu + pause): Master / Effects / Ambience sliders */
.ez-vol { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; }
.ez-volrow { display: grid; grid-template-columns: minmax(96px, 38%) 1fr 44px; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #dde4ea; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.ez-volname { font-weight: 700; font-size: 14px; }
.ez-volpct { text-align: right; font-weight: 700; font-size: 13px; color: var(--ez-blue); font-variant-numeric: tabular-nums; }
.ez-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 0; border-radius: 4px; cursor: pointer;
  background: linear-gradient(90deg, var(--ez-blue) 0 var(--ez-fill, 50%), #d3dde6 var(--ez-fill, 50%) 100%); }
.ez-range:focus-visible { outline: 3px solid #ffd24a; outline-offset: 3px; }
.ez-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ez-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.ez-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--ez-blue); }
.ez-range::-moz-range-track { background: transparent; }
.ez-snd-tip { margin: 0 0 6px; text-align: center; font-size: 12px; }
.ez-input {
  width: 100%; padding: 10px 12px; font-size: 18px; border: 2px solid #b8c6d2; border-radius: 8px;
  font-family: inherit; -webkit-user-select: text; user-select: text;
}
.ez-input:focus { outline: none; border-color: var(--ez-blue); }
.ez-error { color: #b3261e; font-size: 13px; min-height: 18px; margin: 4px 0; font-weight: 600; }
.ez-muted { color: #5b6770; font-size: 13px; }
.ez-note { background: #fff4d6; border: 1px solid #f0d58a; color: #6d5310; border-radius: 6px; padding: 6px 10px; font-size: 13px; margin: 8px 0; }
.ez-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ez-table th { text-align: left; font-size: 12px; color: #5b6770; text-transform: uppercase; letter-spacing: 0.04em; }
.ez-table th, .ez-table td { padding: 5px 6px; border-bottom: 1px solid #e1e4e6; }
.ez-table td.num, .ez-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ez-table tr.me td { background: #e4effa; font-weight: 700; }
.ez-table tr.total td { font-weight: 800; font-size: 16px; border-top: 2px solid var(--ez-blue); color: var(--ez-blue); }
.ez-keys { display: inline-block; background: #fff; border: 1px solid #b8c6d2; border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 7px; font-size: 12px; font-weight: 700; font-family: ui-monospace, Consolas, monospace; }
.ez-card .ez-btn:focus-visible { outline: 3px solid #ffd24a; outline-offset: 2px; }

/* ---- Controls screen (click-to-rebind; main menu + pause) */
#ez-layer-toasts.ez-over { z-index: 2; }
.ez-card.ez-ctl-card { width: min(940px, calc(100vw - 32px)); padding: 14px 20px 10px; }
.ez-ctl-card h2 { margin-bottom: 4px; }
.ez-ctl-card .ez-sub { margin-bottom: 6px; font-size: 13px; }
.ez-ctl-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
@media (min-width: 800px) { .ez-ctl-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ez-ctl-col { min-width: 0; }
.ez-ctl-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 262px; align-items: center; gap: 8px;
  min-height: 31px; padding: 2px 0; border-bottom: 1px solid #e6e9eb;
}
.ez-ctl-head { min-height: 22px; border-bottom: 2px solid #d5dde3; font-size: 11px; font-weight: 700; color: #5b6770;
  text-transform: uppercase; letter-spacing: 0.04em; }
.ez-ctl-head .ez-ctl-binds span { text-align: center; }
.ez-ctl-grp { margin: 9px 0 1px; font-size: 12px; color: var(--ez-blue); text-transform: uppercase; letter-spacing: 0.05em; }
.ez-ctl-name { min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.ez-ctl-name .ez-keys { margin-left: 6px; padding: 0 5px; font-size: 11px; cursor: help; color: #5b6770; }
.ez-ctl-binds { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ez-ctl-static { grid-column: 1 / -1; text-align: center; font-size: 12px; font-weight: 700; color: #5b6770; }
.ez-ctl-slot { position: relative; min-width: 0; }
.ez-ctl-bind {
  display: block; width: 100%; height: 27px; padding: 0 17px 0 7px; margin: 0; cursor: pointer;
  background: #fff; color: #1d2327; border: 1px solid #b8c6d2; border-bottom-width: 2px; border-radius: 6px;
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ez-ctl-bind:hover { border-color: var(--ez-blue); background: #eef5fc; }
.ez-ctl-bind:focus { outline: none; }
.ez-ctl-bind:focus-visible { outline: 3px solid #ffd24a; outline-offset: 1px; }
.ez-ctl-bind.empty { background: #f3f4f2; color: #9aa5ad; font-weight: 400; border-style: dashed; }
.ez-ctl-slot.listening { position: absolute; inset: 0; z-index: 1; }
.ez-ctl-slot.listening .ez-ctl-bind {
  height: 100%; padding: 0 8px; white-space: normal; line-height: 1.1; font-size: 11.5px;
  background: #fff4d6; color: #6d5310; border-color: #e0a21a; animation: ez-ctl-listen 0.7s ease-in-out infinite alternate;
}
@keyframes ez-ctl-listen { from { box-shadow: 0 0 0 0 rgba(224, 162, 26, 0.15); } to { box-shadow: 0 0 0 3px rgba(224, 162, 26, 0.5); } }
.ez-ctl-x {
  position: absolute; right: 3px; top: 50%; width: 16px; height: 16px; margin-top: -8px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #8a96a0; font-size: 10px; line-height: 16px;
  cursor: pointer; opacity: 0.8;
}
.ez-ctl-x:hover { background: #c9433a; color: #fff; opacity: 1; }
.ez-ctl-x.locked { opacity: 0.3; }
.ez-ctl-x.locked:hover { background: #9aa5ad; }
.ez-ctl-col .ez-note { margin-top: 12px; }
.ez-ctl-foot { align-items: center; margin-top: 6px; }
/* step v2: short windows scroll the card: the Reset / Back row stays pinned at its bottom edge (-10px = the card's
   bottom padding, which the sticky area leaves out) */
.ez-ctl-card .ez-ctl-foot { position: sticky; bottom: -10px; z-index: 2; background: #f7f5ef; padding: 2px 0 8px; margin-bottom: -8px; border-top: 1px solid #e6e9eb; }
.ez-ctl-foot .ez-btn { margin: 4px 0; }
.ez-ctl-ask { flex: 1.4; font-size: 14px; font-weight: 700; color: #8a3a0e; }

/* ---- Modal panels (building menu, shelter, backpack) */
.ez-modal-dim { position: absolute; inset: 0; background: rgba(6, 24, 44, 0.45); pointer-events: auto; }
.ez-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: auto;
  width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  background: #f1efe8; color: #1d2327; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.ez-panel.narrow { width: min(560px, calc(100vw - 32px)); }
/* step v2: thin theme-coloured scrollbars on the scrolling panels and menu cards (instead of the grey default) */
.ez-panel, .ez-card, .ez-sec { scrollbar-width: thin; scrollbar-color: rgba(31, 95, 168, 0.5) transparent; }
.ez-panel-head {
  position: sticky; top: 0; z-index: 1; background: var(--ez-blue); color: #fff; padding: 10px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 4px solid #f7f5ef;
}
.ez-panel-head h2 { margin: 0; font-family: var(--ez-font-title); font-size: 22px; }
.ez-panel-head .ez-lvl { font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 2px 8px; margin-left: 8px; }
.ez-panel-head .ez-btn { width: auto; margin: 0; background: #f7f5ef; color: var(--ez-blue); }
.ez-panel-body { padding: 12px 14px 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ez-sec { background: #fff; border: 1px solid #dde3e8; border-radius: 10px; padding: 10px 12px; }
.ez-sec h3 { margin: 0 0 8px; font-size: 13px; color: var(--ez-blue); text-transform: uppercase; letter-spacing: 0.05em; }
.ez-sec .ez-desc { font-size: 13px; color: #5b6770; margin: 0 0 8px; }
.ez-up { border: 1px solid #dde3e8; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fbfaf7; }
.ez-up.ok { border-color: #8cc79c; background: #f3fbf5; }
.ez-up-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ez-up-head b { font-size: 15px; } .ez-up-head span { font-size: 12px; color: #5b6770; font-weight: 700; }
.ez-effect { font-size: 12px; color: #3c4a55; margin: 2px 0 4px; }
.ez-cost { font-size: 13px; margin: 2px 0; }
.ez-cost span { margin-right: 10px; white-space: nowrap; }
.ez-cost .miss { color: #b3261e; font-weight: 700; }
.ez-reason { color: #a14a0b; font-size: 12px; font-weight: 700; margin-top: 2px; }
.ez-up .ez-btn { margin: 6px 0 0; padding: 7px 10px; font-size: 14px; }
.ez-meter { position: relative; height: 14px; background: #e3e8ec; border-radius: 7px; overflow: hidden; margin: 4px 0 8px; }
.ez-meter > i { display: block; height: 100%; background: linear-gradient(90deg, #4f9be0, #2f6fb3); }
.ez-meter > span { position: absolute; inset: 0; text-align: center; font-size: 11px; font-weight: 700; line-height: 14px; }
.ez-panel .ez-table td { white-space: nowrap; padding: 4px 3px; }
.ez-panel .ez-table th { padding: 5px 3px; letter-spacing: 0.02em; }
.ez-table td .ez-btn.sm { margin: 1px; padding: 3px 5px; min-width: 24px; }
/* columns never grow past their track (long Greek labels): wide content scrolls inside its own section */
.ez-panel-body > div, .ez-sec { min-width: 0; }
.ez-sec { overflow-x: auto; }
.ez-up-head b { min-width: 0; overflow-wrap: anywhere; } .ez-up-head span { white-space: nowrap; }
.ez-panel-head h2 { min-width: 0; }
.ez-panel-head .ez-lvl { white-space: nowrap; display: inline-block; }
.ez-panel-head .ez-btn { flex: none; white-space: nowrap; }
@media (min-width: 700px) { .ez-panel-body.ez-shelter { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.ez-blocked { background: #fdeee6; border: 1px solid #f2c3a6; color: #8a3a0e; border-radius: 6px; padding: 5px 9px; font-size: 13px; font-weight: 600; }
/* D1 R53: shelter menu 'Helpers' section (hire card, upkeep, assignment table, one row per helper) */
.ez-helpers h4 { margin: 10px 0 3px; font-size: 12px; color: #3c4a55; text-transform: uppercase; letter-spacing: 0.04em; }
.ez-helpers .ez-desc { margin-bottom: 6px; }
.ez-helpers .ez-blocked { margin: 6px 0; }
.ez-upkeep { margin-top: 6px; font-weight: 600; }
.ez-upkeep .ez-ico { margin-right: 2px; }
.ez-upkeep .ez-ico + .ez-ico { margin-right: 6px; }
.ez-assign td { vertical-align: middle; }
.ez-assign tr.ruin td:first-child, .ez-assign tr.ruin td.ez-muted { opacity: 0.55; }
.ez-assign td.ez-muted { font-size: 12px; }
.ez-assign td.ez-assign-ctl .ez-btn.sm { min-width: 28px; padding: 1px 7px; font-size: 16px; font-weight: 800; line-height: 20px; }
.ez-assign-n { display: inline-block; min-width: 22px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.ez-helper {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 1px; align-items: center;
  border: 1px solid #dde3e8; border-left: 4px solid #9aa5ae; border-radius: 8px; padding: 5px 8px; margin: 4px 0; background: #fbfaf7;
}
.ez-helper .ez-btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; white-space: nowrap; }
.ez-helper-main { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.ez-helper-main b { display: inline-flex; align-items: center; font-size: 14px; }
.ez-helper-main .ez-ico { width: 18px; height: 18px; margin-right: 4px; }
.ez-helper-at { font-size: 12px; font-weight: 700; color: #5b6770; }
.ez-helper-st { font-size: 12px; font-weight: 600; color: #5b6770; }
.ez-helper.work { border-left-color: #2f8a4a; } .ez-helper.work .ez-helper-st { color: #2f6b3f; }
.ez-helper.warn { border-left-color: #e0a21a; } .ez-helper.warn .ez-helper-st { color: #a14a0b; }
.ez-helper.stop { border-left-color: #c9433a; background: #fdf1ee; } .ez-helper.stop .ez-helper-st { color: #b3261e; }
.ez-helpers-here { display: flex; align-items: center; margin-top: 8px; font-weight: 600; }
/* web: banner for touch-only devices ("needs a keyboard and mouse"), dismissable, above every layer */
.ez-notice {
  position: absolute; z-index: 5; top: 10px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 20px));
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 8px;
  background: rgba(12, 34, 56, 0.94); border: 1px solid rgba(255, 255, 255, 0.18); border-left: 4px solid var(--ez-warn);
  color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
.ez-notice span { flex: 1; min-width: 0; }
.ez-notice .ez-btn.sm { flex: none; margin: 0; padding: 6px 14px; font-size: 13px; }