/* Native Dofus HUD skin and responsive layout. Game actions and state remain
   owned by the HUD modules. Original art: assets/hud/source.json. */
:root {
  --hud-panel:#343630;
  --hud-ink:#efeee1;
  --hud-muted:#b9bcac;
  --hud-accent:#b6ca49;
  --hud-surface:linear-gradient(145deg,#45473f,var(--hud-panel) 58%);
  --hud-shadow:inset 0 1px 0 #8184759c,inset 1px 0 0 #69705a55,inset 0 -2px 0 #1c1f19,0 3px 8px #11170b77;
  background:#24271f;
}
.topbar,.live-match .topbar { background:#292c25; border-bottom-color:#777b5b44; }
.brand { width:36px; height:37px; justify-content:center; border:1px solid #181b17; border-radius:6px; background:var(--hud-surface); box-shadow:var(--hud-shadow); }
.brand img { display:block; width:26px; height:28px; object-fit:contain; }
#leave-match { color:var(--hud-muted); }
#leave-match:hover { color:var(--hud-ink); }
.team-capacity img { width:24px; height:24px; object-fit:contain; }
.team-capacity { font-size:18px; }

/* Slice the native frame so its curved edges cannot overlap the contents. */
.topbar,.live-match .topbar { height:76px; flex:0 0 76px; padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left)); flex-wrap:nowrap; }
.round-panel { --round-ink:#343630; --round-accent:var(--hud-accent); top:4px; left:50%; width:min(660px,calc(100% - 132px)); max-width:none; transform:translateX(-50%); display:block; }
.round-frame { height:66px; padding:0 4px; clip-path:none; background:none; border:solid transparent; border-width:8px 44px 12px; border-image:url('./assets/hud/header.png') 18 128 28 128 fill / 8px 44px 12px stretch; }
.round-face { height:100%; min-width:0; padding:0; display:grid; grid-template-columns:max-content minmax(0,1fr) max-content 32px; align-items:center; gap:8px; background:none; clip-path:none; box-shadow:none; }
.round-stage,.round-stage strong,#phase-timer { color:var(--hud-ink); }
.round-stage { gap:7px; white-space:nowrap; }
.round-stage strong { font-size:21px; letter-spacing:0; }
.round-phase-icon img { display:block; width:23px; height:25px; object-fit:contain; }
.round-sequence { min-width:0; height:36px; align-items:center; border:0; padding:0; margin:0; gap:3px; }
.round-step { height:32px; min-width:0; max-width:32px; padding:0; border-radius:4px; }
.round-step img { width:21px; max-width:100%; height:21px; object-fit:contain; filter:grayscale(1); opacity:.24; }
.round-step.complete { opacity:1; }
.round-step.complete img { opacity:.5; }
.round-step.current { background:#b6c94a22; box-shadow:inset 0 -2px var(--hud-accent); }
.round-step.current img { filter:none; opacity:1; }
.round-step.current::after { display:none; }
.round-step:hover img,.round-step:focus-visible img { opacity:1; }
.round-step:focus-visible { outline:1px solid #d5e58b; outline-offset:1px; }
.round-clock { padding:0; gap:6px; color:var(--hud-ink); white-space:nowrap; }
.round-clock img { width:14px; height:18px; object-fit:contain; flex:none; }
#phase-timer { min-width:2ch; font-size:22px; text-align:center; }
.round-details-toggle { position:static; width:32px; height:36px; color:var(--hud-muted); }
.round-details-toggle:hover { color:var(--hud-ink); }
.round-panel .phase-track { position:absolute; bottom:9px; left:48px; right:48px; height:3px; margin:0; border:0; background:#23281e; box-shadow:none; }
.round-panel #phase-progress,.round-panel[data-phase=combat] #phase-progress,.round-panel[data-phase=arrival] #phase-progress { background:var(--hud-accent); box-shadow:none; }
.round-panel.urgent #phase-timer { color:#edc184; }
.round-panel.urgent #phase-progress { background:#e4ba75; }
.round-panel[data-waiting=true] .round-clock img { opacity:.5; }
.round-details { top:calc(100% + 5px); max-width:100%; text-align:center; overflow-wrap:anywhere; color:var(--hud-ink); border:1px solid #181b17; border-radius:7px; background:var(--hud-surface); box-shadow:var(--hud-shadow); }
.round-details strong { color:#d1d8ab; }
.round-details span { color:var(--hud-muted); }

/* Shared stone surfaces. Decoration never intercepts cell or HUD interaction. */
.shop-inner,.wallet,.streak-indicator,.turn-order,.current-turn,.monster-inspector,.player-portrait,.hud-notice,.connection-notice {
  color:var(--hud-ink); border:1px solid #181b17; border-radius:7px;
  background:var(--hud-surface); box-shadow:var(--hud-shadow);
}
.shop-inner::after,.turn-order::after,.current-turn::after,.monster-inspector::after {
  content:''; position:absolute; inset:0; pointer-events:none; border:7px solid transparent;
  border-image:url('./assets/hud/panel-border.png') 14 fill stretch; opacity:.08;
}
.shop { --gold:#e8e4bc; --shop-ink:#242b22; --shop-brass:#73795c; }
.shop-inner { border-bottom:1px solid #181b17; }
.shop-toolbar { left:0; right:0; }
.level-panel,.level-face { clip-path:none; background:none; box-shadow:none; }
.level-panel { width:calc(var(--shop-actions-width) + 10px); padding:0; }
.level-face { padding:3px 7px 2px; }
.level-info { color:var(--hud-ink); }
.level-info strong { color:var(--hud-ink); }
.xp-label { color:#c6c9b8; font-size:10px; }
.xp-track { background:#161b13; box-shadow:none; }
#xp-fill { background:var(--hud-accent); box-shadow:none; }
.wallet { width:96px; left:calc(50% - 24px); height:32px; padding:0 10px; clip-path:none; border-radius:7px 0 0 7px; }
.wallet::before { display:none; }
.wallet svg { width:21px; height:22px; filter:none; }
#kamas-count { color:var(--hud-ink); font-size:22px; }
.streak-indicator { left:calc(50% + 24px); top:0; height:32px; min-width:48px; padding:0 9px 0 6px; border-left:1px solid #73796377; border-radius:0 7px 7px 0; font-size:15px; color:var(--hud-muted); }
.streak-indicator img { width:19px; height:21px; object-fit:contain; }
.streak-indicator[data-kind=none] img { filter:grayscale(1); opacity:.5; }
.streak-indicator[data-kind=win] { color:#e9cc8b; }
.streak-indicator[data-kind=loss] { color:#a0c3d6; }
.streak-indicator[data-kind=loss] img { filter:hue-rotate(170deg) saturate(.6); }
.streak-loss-mark { position:absolute; left:12px; bottom:3px; font-size:13px; line-height:10px; font-weight:800; color:#283638; }
.shop-action,.xp-action,.return-to-arena {
  color:#f3f3d4; border:1px solid #181e12; border-radius:7px;
  background-color:#606b46; background-image:url('./assets/hud/button.png');
  background-size:100% 100%; background-blend-mode:multiply;
  box-shadow:0 1px 2px #0008; text-shadow:0 1px 2px #151c0a;
}
.xp-action { background-color:#a0b33f; }
.shop-action:hover:not(:disabled),.xp-action:hover:not(:disabled),.return-to-arena:hover {
  border-color:#8c985e; background-color:#606b46; background-image:url('./assets/hud/button-hover.png');
  box-shadow:0 1px 3px #0008; filter:brightness(1.12); transform:none;
}
.xp-action:hover:not(:disabled) { background-color:#a0b33f; }
.shop-action:active:not(:disabled) { transform:translateY(1px); }
.shop-action .action-icon { width:25px; height:25px; color:#dae1b2; filter:none; }
.shop-action .action-label { font-size:13px; font-weight:600; }
.shop-action .action-cost { color:#f1edca; }
.shop-action:disabled,.xp-action:disabled { opacity:.45; filter:grayscale(.7); }
.shop-action kbd,.return-to-arena kbd { position:absolute; right:5px; bottom:3px; font:10px/1.2 Arial,sans-serif; color:#eff1cf; opacity:.8; text-shadow:none; pointer-events:none; }
.shop-action:focus-visible,.return-to-arena:focus-visible { outline:2px solid #d5e58b; outline-offset:2px; }
.return-to-arena { width:180px; }
.return-to-arena img { width:35px; height:35px; object-fit:contain; }
.return-to-arena:hover { transform:translateX(-50%); }
.return-to-arena:active { transform:translate(-50%,1px); }
.return-to-arena kbd { right:9px; bottom:5px; font-size:11px; }
.shop-card,.shop-card.completes-merge { border-color:#858a71; border-radius:4px; background:#242b22; box-shadow:inset 0 0 0 1px #171d14,inset 0 2px 0 #b2b59c66; }
.shop-card::before { background:#b2b59c; opacity:.35; height:1px; }
.card-art,.tofu-card .card-art,.bouftou-card .card-art { background:radial-gradient(ellipse at 50% 25%,#72755a,#424838 80%); }
.card-art::after { background:linear-gradient(0deg,#252b2244,transparent 45%); box-shadow:none; }
.card-art img { transform:scale(1); filter:drop-shadow(0 3px 2px #181e1588); }
.card-info { background:#242b22; border-top:1px solid #777d5d66; box-shadow:none; }
.card-copy strong { color:var(--hud-ink); }
.card-cost { color:#e8e4bc; }
.shop-card:hover:not(:disabled) { border-color:#d2ddb2; transform:translateY(-2px); box-shadow:inset 0 0 0 1px #c9daa055,0 0 7px #bdce7244; }
.shop-card:hover:not(:disabled) .card-art img { transform:scale(1.04); }
.shop-card:disabled .card-art img { transform:scale(1); }
.shop-card:focus-visible { outline:2px solid #d5e58b; outline-offset:-3px; }
.sold-card,.sold-card:hover { background:#252b21; border-color:#60695466; box-shadow:inset 0 0 15px #151c1055; transform:none; }
/* Existing silver/gold perimeter animations remain; no artwork recoloring. */
.shop-card.completes-merge:hover:not(:disabled) { border-color:rgb(var(--rim-rgb) / .65); box-shadow:inset 0 0 0 1px #c9daa033,0 0 7px rgb(var(--rim-rgb) / .16); }
.merge-hint { left:6px; right:auto; top:4px; font-size:15px; line-height:20px; letter-spacing:1px; text-align:left; }
.sell-drop-zone { border:1px solid #b6ca49; border-radius:6px; color:var(--hud-ink); background:radial-gradient(ellipse at center,#4b523df5,#30372bf7 80%); box-shadow:inset 0 1px 0 #8d987366,0 3px 8px #1118; }
.sell-eyebrow { color:#d2d8b8; }
.sell-refund { color:#ebdb9f; }
.sell-hover .sell-drop-zone,.sell-drop-zone:hover,.sell-drop-zone:focus-visible { border:1px solid #d5e58b; background:radial-gradient(ellipse at center,#606b40f5,#35432bf7 80%); box-shadow:inset 0 0 0 2px #b6ca4933,0 0 16px #b6ca4922; }

/* Player buttons keep the existing scouting behavior and right-hand rail. */
.player-perspectives { scrollbar-color:#7c8469 transparent; }
.player-portrait { padding:4px 6px 4px 10px; height:54px; flex-basis:54px; isolation:auto; }
.player-portrait::before,.player-portrait::after { display:none; }
.player-info { padding:0 5px 0 0; gap:3px; }
.player-name { color:#d2d4c5; font-size:11px; line-height:13px; }
.player-portrait .player-hp { color:var(--hud-ink); font-size:18px; }
.player-health>img { display:block; width:15px; height:15px; object-fit:contain; }
.player-avatar { width:40px; height:40px; flex-basis:40px; padding:0; border:1px solid #83856e; border-radius:5px; background:#23281f; box-shadow:inset 0 0 6px #10150c99; }
.player-portrait .player-avatar img { width:37px; height:37px; padding:0; border:0; border-radius:0; background:none; }
.player-portrait[aria-pressed=true] { border:1px solid #181b17; background:var(--hud-surface); box-shadow:inset 3px 0 0 var(--hud-accent),inset 0 1px 0 #878e63,0 2px 7px #1118; }
.player-portrait[aria-pressed=true] .player-avatar { background:#23281f; box-shadow:inset 0 0 6px #10150c99; }
.player-portrait[aria-pressed=true] .player-name { color:var(--hud-ink); }
.player-portrait:hover:not(:disabled) { background:#4d5341; filter:none; }
.player-portrait:focus-visible { outline:2px solid #d5e58b; outline-offset:1px; }
.player-portrait .player-connection { width:6px; height:6px; right:-2px; bottom:-2px; border-color:#24291f; }

/* Compact native combat frames. Existing information is retained. */
.turn-order { padding:7px 9px 9px; }
.turn-order-heading { padding-bottom:4px; border-bottom:1px solid #74766444; }
.turn-order-heading>span:first-child { display:flex; align-items:center; gap:5px; color:#d1d4c4; font-size:9px; letter-spacing:.5px; }
.turn-order-heading img { width:15px; height:15px; object-fit:contain; }
.turn-order-heading strong,.combat-speed { color:#d1d4c4; font-size:10px; }
.combat-speed { color:#d6dda9; }
.turn-order-list { padding:4px 2px 2px; gap:5px; scrollbar-color:#7c8469 #282e25; }
.initiative-unit,.initiative-unit[data-side=red] { width:49px; height:57px; padding:3px 3px 3px 7px; border:1px solid #717c6d; border-radius:2px; background:#292e28; box-shadow:none; isolation:isolate; }
.initiative-unit::before { content:''; position:absolute; left:2px; top:3px; bottom:3px; width:3px; background:#80bdc9; pointer-events:none; }
.initiative-unit[data-side=red]::before { background:#c96c68; }
.initiative-unit img { width:32px; height:33px; }
.initiative-name { color:var(--hud-ink); font-size:9px; }
.initiative-number { left:7px; color:#d6dacb; font-size:8px; }
.initiative-unit.current,.initiative-unit.current[data-side=red] { border-color:transparent; background:url('./assets/hud/active-frame.png') center / 100% 100% no-repeat; box-shadow:0 0 5px #e4cf9855; }
.initiative-unit.current .initiative-name { color:#f3e7c9; }
.initiative-unit:focus-visible { outline:2px solid #d5e58b; }
.current-turn-heading { font-size:9px; color:#d1d8ab; letter-spacing:.4px; }
.turn-live-dot { background:var(--hud-accent); }
.current-turn-monster h2,.inspector-title h2 { color:var(--hud-ink); }
#turn-behavior { color:var(--hud-muted); font-size:10px; }
.turn-resources { border:0; border-block:1px solid #74766444; background:none; }
.turn-resource { padding:6px 3px; gap:5px; }
.turn-resource+.turn-resource { border:0; }
.turn-resource>span img { display:block; width:20px; height:20px; object-fit:contain; }
.turn-resource>strong { color:var(--hud-ink); font-size:12px; }
.turn-action { color:var(--hud-ink); }
#turn-action-detail { color:var(--hud-muted); font-size:10px; }
.inspector-close { color:var(--hud-muted); }
.inspector-close:hover { color:var(--hud-ink); }
.inspector-stars { color:#e8d08a; }
.monster-inspector[data-stars="2"] .inspector-stars { color:#e1ebf3; }
.inspector-health { border:0; box-shadow:none; height:4px; background:#1b1d18; }
.inspector-health span { background:#a6c64b; }
.inspector-hp { display:flex; align-items:center; gap:5px; color:var(--hud-ink); font-size:11px; margin:5px 0 9px; }
.inspector-hp img { width:16px; height:16px; object-fit:contain; }
.inspector-stats { border:0; border-bottom:1px solid #74766444; background:none; padding-bottom:7px; gap:4px; }
.inspector-stats div { display:flex; align-items:center; justify-content:center; gap:4px; padding:3px 0; }
.inspector-stats div+div { border:0; }
.inspector-stats dt { margin:0; line-height:0; }
.inspector-stats dt img { width:20px; height:20px; object-fit:contain; }
.inspector-stats dd { color:var(--hud-ink); font-size:12px; white-space:nowrap; }
.inspector-attack { color:var(--hud-ink); }
.inspector-damage { color:#d3d7c7; font-size:11px; }
.inspector-damage::before { content:''; display:inline-block; width:16px; height:16px; margin-right:4px; vertical-align:middle; background:url('./assets/hud/damage.png') center/contain no-repeat; }
.inspector-behavior,[data-behavior=kiting] .inspector-behavior { color:var(--hud-muted); font-size:10px; }
.inventory-item { border-color:#6e765a; background:var(--hud-surface); color:var(--hud-ink); box-shadow:var(--hud-shadow); }
.inventory-item[aria-pressed="true"] { border-color:var(--hud-accent); box-shadow:inset 0 0 0 1px #b6ca4955,0 0 8px #b6ca4922; }
.inventory-item:focus-visible { outline:2px solid #d5e58b; outline-offset:2px; }
.hud-notice,.connection-notice #match-status { color:#e3e4d2; }

@media (max-width:650px) {
  .team-capacity img { width:21px; height:21px; }
  .team-capacity { font-size:15px; }
  .level-panel { width:136px; }
  .level-face { padding:3px 6px 2px; }
  .wallet { left:auto; right:47px; transform:none; width:87px; }
  .streak-indicator { left:auto; right:0; min-width:47px; }
  .shop-action kbd { right:3px; bottom:2px; font-size:9px; }
  .player-portrait { height:48px; flex-basis:48px; padding:4px 5px 4px 8px; }
  .player-name { font-size:9px; }
  .player-portrait .player-hp { font-size:16px; }
  .player-info { padding:0 4px 0 0; }
  .player-avatar { width:33px; height:35px; flex-basis:33px; }
  .player-portrait .player-avatar img { width:31px; height:32px; padding:0; }
  .player-health>img { width:13px; height:13px; }
  .initiative-unit,.initiative-unit[data-side=red] { width:44px; height:53px; }
  .initiative-unit img { width:29px; height:29px; }
  .inspector-stats { gap:3px; }
  .inspector-stats div { gap:3px; }
  .inspector-stats dt img { width:16px; height:16px; }
  .inspector-stats dd { font-size:11px; }
  .merge-hint { font-size:13px; top:4px; left:5px; right:auto; }
}

/* Narrow screens retain every round icon in a second row inside the frame. */
@media (max-width:600px) {
  .topbar,.live-match .topbar { height:132px; flex-basis:132px; padding:4px 12px 88px; }
  .brand { height:34px; width:34px; }
  .round-panel { top:42px; left:50%; width:calc(100% - 12px); max-width:none; }
  .round-frame { height:84px; border-width:8px 30px 12px; border-image-width:8px 30px 12px; padding:0 4px; }
  .round-face { grid-template-columns:minmax(0,1fr) max-content 36px; grid-template-rows:36px 24px; gap:2px 8px; }
  .round-stage { grid-area:1 / 1; }
  .round-stage strong,#phase-timer { font-size:20px; }
  .round-clock { grid-area:1 / 2; }
  .round-details-toggle { grid-area:1 / 3; width:36px; height:36px; }
  .round-sequence { grid-area:2 / 1 / 3 / -1; height:24px; gap:5px; }
  .round-step { height:24px; max-width:32px; }
  .round-step img { width:20px; height:20px; }
  .round-panel .phase-track { left:34px; right:34px; bottom:8px; }
  .connection-notice { top:138px; }
}
/* Let HUD controls fit without shrinking the map to an empty strip. */
.shop { flex-shrink:0; padding-bottom:env(safe-area-inset-bottom); }
.monster-inspector { max-width:calc(100% - 24px); }
#item-inventory { flex-wrap:wrap; justify-content:flex-end; }
.loot-tray { max-width:calc(100% - var(--player-rail-width) - 110px); }
@media (min-width:601px) and (max-width:850px) {
  .round-face { gap:5px; }
  .round-stage { gap:4px; }
  .round-stage strong,#phase-timer { font-size:19px; }
  .round-phase-icon img { width:21px; height:23px; }
  .round-step img { width:19px; height:19px; }
}
@media (max-height:500px) and (min-width:601px) {
  body { height:100vh; height:100dvh; min-height:0; overflow:hidden; }
  main { flex:1; min-height:0; }
  .topbar,.live-match .topbar { height:56px; flex-basis:56px; }
  .round-panel { top:0; }
  .round-frame { height:54px; border-top-width:5px; border-bottom-width:9px; border-image-width:5px 44px 9px; }
  .round-panel .phase-track { bottom:6px; }
  .round-stage strong,#phase-timer { font-size:18px; }
  .round-details-toggle { height:32px; }
  .connection-notice { top:60px; }
  .shop { --shop-height:80px; --shop-actions-width:108px; width:calc(100% - 16px); padding-top:28px; }
  .shop-inner { padding:4px; }
  .shop-actions { gap:4px; }
  .shop-action { padding:3px 7px; row-gap:0; }
  .shop-action .action-label { font-size:11px; line-height:14px; }
  .shop-action .action-icon { width:20px; height:20px; }
  .card-info { min-height:22px; padding:3px 4px; }
  .card-copy strong,.card-cost { font-size:10px; }
  .arena { --player-rail-width:122px; --player-rail-gap:8px; }
  .map-viewport,.live-match .map-viewport,body[data-phase=combat] .map-viewport { inset:8px calc(var(--player-rail-width) + 18px) 8px 6px; }
  .player-perspectives { top:4px; gap:4px; max-height:calc(100% - 92px); }
  .player-portrait { height:44px; flex-basis:44px; padding:3px 5px; }
  .player-portrait .player-hp { font-size:15px; }
  .player-name { font-size:9px; }
  .player-avatar { width:32px; height:34px; flex-basis:32px; }
  .player-portrait .player-avatar img { width:30px; height:32px; }
  .team-capacity { top:8px; left:10px; font-size:14px; }
  .turn-order { right:8px; bottom:6px; max-width:40%; padding:5px 6px; gap:2px; }
  .turn-order-heading { gap:6px; padding-bottom:2px; }
  .turn-order-heading>span:first-child { font-size:8px; }
  .turn-order-heading strong,.combat-speed { font-size:9px; }
  .initiative-unit,.initiative-unit[data-side=red] { width:42px; height:47px; }
  .initiative-unit img { width:27px; height:27px; }
  .monster-inspector { top:36px; max-height:calc(100% - 44px); }
}
@media (max-width:600px) and (max-height:700px) {
  body { height:100vh; height:100dvh; min-height:0; overflow:hidden; }
  main { flex:1; min-height:0; }
  .topbar,.live-match .topbar { height:114px; flex-basis:114px; padding:3px 12px 79px; }
  .brand { width:28px; height:28px; }
  .brand img { width:22px; height:24px; }
  .round-panel { top:34px; }
  .round-frame { height:74px; }
  .round-face { grid-template-rows:30px 22px; gap:0 8px; }
  .round-stage strong,#phase-timer { font-size:18px; }
  .round-details-toggle { height:30px; }
  .round-sequence,.round-step { height:22px; }
  .round-step img { width:18px; height:18px; }
  .connection-notice { top:118px; }
  .shop { --shop-height:90px; }
  .shop-actions { height:34px; grid-template-rows:34px; }
  .shop-action .action-label { font-size:12px; }
  .map-viewport,.live-match .map-viewport,body[data-phase=combat] .map-viewport { inset:16px 6px 88px; }
  .player-perspectives { top:7px; gap:4px; max-height:calc(100% - 92px); }
  .player-portrait { height:42px; flex-basis:42px; }
  .turn-order { bottom:5px; padding:5px 6px; gap:2px; }
  .turn-order-heading { padding-bottom:2px; }
  .initiative-unit,.initiative-unit[data-side=red] { width:40px; height:44px; }
  .initiative-unit img { width:25px; height:25px; }
  .monster-inspector { top:38px; max-height:calc(100% - 46px); }
}