/* ================= HUD widgets (mirror of the in-game client) ================= */
:root[data-theme='dark'] { --hud-caution: #c2a05c; --hud-danger: #b94a4a; }
:root[data-theme='light'] { --hud-caution: #fdb93a; --hud-danger: #fc5b53; }

.hud { display: inline-flex; align-items: center; font: 700 14px/1.2 'EtInter', system-ui, sans-serif; color: var(--g-fg); background: var(--g-surface); border-radius: 10px;
  white-space: nowrap; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--g-border) 45%, transparent); flex: none; }
.hud .ic { font-family: 'EtIcons'; font-style: normal; line-height: 1; display: inline-block; }
.hud .mc { width: 18px; height: 18px; image-rendering: pixelated; flex: none; display: block; }
.num { display: inline-block; font-variant-numeric: tabular-nums; text-align: right; }
.n2 { min-width: 2ch; } .n3 { min-width: 3ch; } .n4 { min-width: 4ch; }

/* watermark */
.hud-wm { gap: 7px; padding: 6px 10px 6px 6px; font-size: 17px; }
.wm-seg { display: inline-flex; align-items: center; gap: 6px; }
.wm-box { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--g-primary); background: color-mix(in srgb, var(--g-surface) 93%, var(--g-fg) 7%); }
.wm-t { color: var(--g-fg); }
.wm-t.m { color: var(--g-muted); }
.wm-div { width: 1px; height: 13px; background: var(--g-border); display: block; }

/* panels: Potions / Keybinds / Cooldowns */
.hud-panel { flex-direction: column; align-items: stretch; padding: 9px 13px; }
.hp-head { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.hp-head .ic { color: var(--g-primary); }
.hp-div { display: block; height: 1px; background: var(--g-border); margin: 8px 0; opacity: .9; }
.hp-rows { display: flex; flex-direction: column; gap: 6px; }
.hp-row { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.hp-row .nm { flex: 1; color: var(--g-fg); }
.hp-row .vl { margin-left: 10px; color: var(--g-muted); font-variant-numeric: tabular-nums; }
.hp-row .ci { width: 16px; display: flex; justify-content: center; color: var(--g-primary); flex: none; }
.rdiv { width: 1px; height: 12px; background: var(--g-border); flex: none; }

/* tab style */
.hud-tabwrap { display: inline-flex; flex-direction: column; align-items: center; flex: none; font: 700 14px/1.2 'EtInter', system-ui, sans-serif; color: var(--g-fg); white-space: nowrap; }
.ht-tab { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 15px; background: var(--g-surface); border-radius: 9px 9px 0 0; }
.ht-tab::before, .ht-tab::after { content: ''; position: absolute; bottom: 0; width: 16px; height: 16px; }
.ht-tab::before { left: -16px; background: radial-gradient(circle at 0 0, transparent 15.5px, var(--g-surface) 16px); }
.ht-tab::after { right: -16px; background: radial-gradient(circle at 100% 0, transparent 15.5px, var(--g-surface) 16px); }
.ht-box { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--g-primary); background: color-mix(in srgb, var(--g-surface) 93%, var(--g-fg) 7%); }
.ht-box .ic { font-family: 'EtIcons'; font-style: normal; line-height: 1; }
.ht-body { min-width: 200px; background: var(--g-surface); border-radius: 10px; padding: 9px 11px; }
.ht-body .mc { width: 18px; height: 18px; image-rendering: pixelated; flex: none; display: block; }
.ht-body .hp-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ht-body .hp-row .ic, .ht-body .hp-row .ci { font-family: 'EtIcons'; font-style: normal; line-height: 1; }

/* target hud */
.hud-target { position: relative; display: block; width: 225px; height: 77px; border-radius: 10.5px; }
.tg-head { position: absolute; left: 12px; top: 9px; }
.face { display: block; width: calc(var(--s) * 1px); height: calc(var(--s) * 1px); border-radius: 10px; image-rendering: pixelated;
  background-repeat: no-repeat; background-size: calc(var(--s) * 8px) calc(var(--s) * 8px);
  background-position: calc(var(--s) * -5px) calc(var(--s) * -1px), calc(var(--s) * -1px) calc(var(--s) * -1px); }
.tg-name { position: absolute; left: 66px; right: 12px; top: 12px; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.tg-hp { position: absolute; left: 66px; top: 33px; font: 500 12px/1.2 'EtInter'; color: var(--g-muted); }
.tg-bar { position: absolute; left: 12px; right: 12px; bottom: 9px; height: 6px; border-radius: 3px; background: var(--g-elev); overflow: hidden; }
.tg-bar i { display: block; height: 100%; min-width: 6px; border-radius: 3px; background: var(--g-primary); transition: width 1s linear; }
.tg-bar i.warn { background: var(--hud-caution); }
.tg-bar i.danger { background: var(--hud-danger); }

/* notification */
.hud-notif { gap: 8px; padding: 8px 12px; font-weight: 500; }
.hud-notif .bell { color: var(--g-muted); display: flex; }
.hud-notif .nd { width: 1px; height: 16px; background: var(--g-border); display: block; }
.hud-notif .tg { position: relative; width: 26px; height: 16px; border-radius: 8px; background: var(--g-border); flex: none; }
.hud-notif .tg i { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 6px; background: var(--g-bg); }
.hud-notif.on .tg { background: var(--g-primary); }
.hud-notif.on .tg i { transform: translateX(10px); }
.hud-notif .nt { display: inline-flex; align-items: center; gap: 4px; }
.hud-notif .pf { color: var(--g-muted); }
.hud-notif.on .pf { color: var(--g-fg); }
.hud-notif .ci { color: var(--g-primary); display: flex; }
.hud-notif .mn { color: var(--g-fg); }
.hud-notif .wd { color: var(--g-muted); }
.hud-notif.on .wd { color: var(--g-fg); }

/* bound items */
.hud-bound { position: relative; height: 32px; gap: 7px; padding: 0 10px; border-radius: 12px; overflow: hidden; }
.hud-bound > * { position: relative; }
.hud-bound .bfill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: color-mix(in srgb, var(--g-surface) 70%, var(--g-fg) 30%); opacity: 0; }
.hud-bound.cd .bfill { opacity: 1; }
.hud-bound.cd .mc { opacity: .5; }
.hud-bound .bt { color: var(--g-muted); margin-left: 1px; }
.hud-bound .bk { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; margin-left: 1px; background: color-mix(in srgb, var(--g-surface) 91%, var(--g-fg) 9%); }

/* ---------- wall (bento) ---------- */
.bento { display: grid; gap: 16px; }
.bento-card { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--bd); background: var(--card-bg); contain: layout paint; }
.bento-card::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 16px 16px; opacity: .6; pointer-events: none; }
.bento-view { position: relative; overflow: hidden; }
.bento-view.cols { height: 420px; display: flex; justify-content: center; gap: 26px; padding: 0 20px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 76%, transparent); }
.bento-view.rows { padding: 30px 0 30px; display: flex; flex-direction: column; gap: 16px; height: 290px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.wall-col { width: 270px; flex: none; }
.wall-col .wall-track { display: flex; flex-direction: column; align-items: center; animation: wallUp var(--sp, 60s) linear infinite; will-change: transform; }
.wall-col .wall-track > * { margin-bottom: 22px; }
.wall-col.down .wall-track { animation-direction: reverse; }
.wall-row { flex: none; }
.wall-row .wall-track { display: flex; width: max-content; align-items: center; animation: wallLeft var(--sp, 70s) linear infinite; will-change: transform; }
.wall-row .wall-track > * { margin-right: 14px; }
.wall-row.right .wall-track { animation-direction: reverse; }
@keyframes wallUp { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes wallLeft { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.bento-cap { position: relative; padding: 4px 26px 24px; font-size: 15px; line-height: 1.5; color: var(--mut); max-width: 640px; }
.bento-cap b { color: var(--fg); font-weight: 700; }

/* ---------- floating background ---------- */
.float-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transition: opacity .6s; }
.float-layer.dim { opacity: .5; }
.float-item { position: absolute; will-change: transform; transform-origin: center; }
.float-item .hud { box-shadow: none; }
@media (max-width: 760px) {
  .bento-view.cols { height: 380px; gap: 22px; }
  .bento-cap { padding: 2px 20px 20px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-track { animation-duration: 240s !important; }
}