/* HUD skin layered over style.css (see hud-skin.js). Scoped by html.hud-skin, added once the game HUD exists.
   TL = touch phone in landscape (same query style.css uses for its phone-landscape layout). */
#mwheel,#sysdock{display:none}

/* ---------- shared look: dark bronze plates, gold rims ---------- */
html.hud-skin{--rim:#b8913a;--rim2:#6b5530;--plate:linear-gradient(180deg,rgba(38,30,18,.86),rgba(14,11,7,.86))}
html.hud-skin #vitals{background:var(--plate);border:1px solid var(--rim2);border-radius:30px 10px 10px 30px;box-shadow:0 2px 10px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,220,140,.08)}
html.hud-skin #avatar{border-color:var(--rim);box-shadow:0 0 0 2px #1a140c,0 0 10px rgba(228,189,105,.45)}
html.hud-skin #avatar b{right:50%;transform:translateX(50%);bottom:1px;border-radius:7px;padding:0 5px;background:linear-gradient(180deg,#ffe28a,#b8862a);color:#2b1c05;font-weight:800}
html.hud-skin .bar{border-radius:2px;background:#120d08;box-shadow:inset 0 1px 2px #000,0 0 0 1px var(--rim2)}
html.hud-skin .bar.hp i{background:linear-gradient(180deg,#ff6a52,#b0241a 55%,#7a140e)}
html.hud-skin .bar.mp i{background:linear-gradient(180deg,#6ab4ff,#2560b8 55%,#163c7a)}
html.hud-skin .bar.xp i{background:linear-gradient(180deg,#9fe07a,#3f9a3a 55%,#24601f)}
html.hud-skin #minimap{background:var(--plate);border:1px solid var(--rim);box-shadow:0 2px 10px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,0,0,.6)}
html.hud-skin #targetf{background:var(--plate);border:1px solid #7a3a30}
html.hud-skin #questtrack{background:var(--plate);border-color:var(--rim2)}
html.hud-skin #expbar{background:#0c0905;border-top:1px solid var(--rim2)}
html.hud-skin #expbar i{background:linear-gradient(90deg,#7a5a12,#ffd23a)}

/* ================= desktop ================= */
@media (pointer:fine) and (min-width:901px) and (min-height:561px){
  /* one slim top bar: system buttons move to the dock */
  html.hud-skin header{padding:3px 12px;gap:10px;flex-wrap:nowrap;background:linear-gradient(180deg,#241c12,#14100a);border-bottom:1px solid var(--rim2)}
  html.hud-skin header nav{display:flex;flex-wrap:nowrap;gap:6px;align-items:center}
  html.hud-skin header nav>button[data-win],html.hud-skin #btn-share{display:none}
  html.hud-skin header nav select,html.hud-skin header nav button{padding:2px 8px;font-size:12px}
  html.hud-skin #hud{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
  html.hud-skin #skills-fab,html.hud-skin #res-toggle{display:none!important}

  html.hud-skin #vitals{width:280px;padding:6px 10px 6px 6px}
  html.hud-skin #avatar{width:60px;height:60px}
  html.hud-skin #vitals .bar{height:14px}html.hud-skin #vitals .bar span{line-height:14px}

  /* hotbar: a single row bottom-centre; ⚔ shows rows ⇧ ⌥ ⇧⌥ above it */
  html.hud-skin #hotbar{left:50%;right:auto;bottom:22px;transform:translateX(-50%);background:var(--plate);border:1px solid var(--rim2);border-radius:10px;padding:5px 6px;box-shadow:0 3px 14px rgba(0,0,0,.6)}
  html.hud-skin body:not(.hb-open) #hotbar .hrow:not(:last-child){display:none}
  html.hud-skin #hotbar .slot{width:44px;height:44px;border:1px solid var(--rim2);border-radius:7px;background:radial-gradient(circle at 50% 35%,#2e2416,#110d08);box-shadow:inset 0 0 0 1px rgba(0,0,0,.7)}
  html.hud-skin #hotbar .slot img{width:40px;height:40px}
  html.hud-skin #hotbar .slot:hover{border-color:var(--rim)}
  html.hud-skin #hotbar .slot .cdov{line-height:44px}
  html.hud-skin #hb-toggle{display:block;position:absolute;left:calc(50% + 228px);bottom:28px;z-index:4;width:38px;height:38px;padding:0;border-radius:50%;font-size:18px;color:#ffd23a;background:radial-gradient(circle at 40% 30%,#5a4220,#1a120a);border:2px solid var(--rim)}
  html.hud-skin body.hb-open #hb-toggle{box-shadow:0 0 10px #ffd23a}
  html.hud-skin #selskill{right:10px;bottom:78px;background:var(--plate);border-color:var(--rim2)}
  html.hud-skin #gasbar{right:auto;left:calc(50% - 46px);bottom:84px}
  html.hud-skin body.hb-open #gasbar{bottom:226px}

  /* chat + actions: bottom-left, actions under the chat */
  html.hud-skin #side{bottom:62px;height:220px;background:linear-gradient(180deg,rgba(10,8,6,.35),rgba(10,8,6,.7));border-color:var(--rim2)}
  html.hud-skin #actions{left:10px;bottom:22px;background:var(--plate);border-color:var(--rim2)}
  html.hud-skin #footnote{bottom:290px}
  html.hud-skin body.chat-min #footnote{bottom:100px}

  /* system dock: icon buttons bottom-right, like the PC client's menu row */
  html.hud-skin #sysdock{display:flex;position:absolute;right:10px;bottom:22px;z-index:4;gap:4px;padding:5px;background:var(--plate);border:1px solid var(--rim2);border-radius:10px;box-shadow:0 3px 14px rgba(0,0,0,.6)}
  #sysdock button{position:relative;width:40px;height:40px;padding:0;border-radius:8px;border:1px solid var(--rim2);background:radial-gradient(circle at 50% 30%,#3a2d18,#140f09);display:flex;align-items:center;justify-content:center}
  #sysdock button i{font-style:normal;font-size:20px;line-height:1}
  #sysdock button span{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:5px;background:#0e0a06;border:1px solid var(--rim);color:#f3e7c4;font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
  #sysdock button:hover{border-color:#ffd23a;filter:brightness(1.2)}#sysdock button:hover span{opacity:1}
}
/* narrower desktops: the dock would hit the hotbar -> stack it above the hotbar's right end */
@media (pointer:fine) and (min-width:901px) and (max-width:1279px) and (min-height:561px){
  html.hud-skin #sysdock{flex-wrap:wrap;width:184px;bottom:22px}
  html.hud-skin #selskill{bottom:128px}
  html.hud-skin #hotbar{left:auto;right:206px;transform:none}
  html.hud-skin #hb-toggle{left:auto;right:206px;bottom:84px}
}

/* Mobile: gameplay fills the viewport; HUD floats around its edges. */
@media (pointer:coarse) and (max-width:1400px), (max-width:760px) {
  html.hud-skin { --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px); --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); }
  html.hud-skin body { height:100dvh; overflow:hidden; overscroll-behavior:none; }
  html.hud-skin #app { position:fixed; inset:0; height:100dvh; padding:0; overflow:hidden; }
  html.hud-skin main { position:absolute; inset:0; overflow:hidden; }
  html.hud-skin header { position:fixed; inset:0 0 auto; height:0; min-height:0; padding:0!important; border:0; background:none; z-index:30; overflow:visible; pointer-events:none; }
  html.hud-skin header>.brand,html.hud-skin header>#hud { display:none; }
  html.hud-skin header nav { display:none; position:fixed; top:calc(60px + var(--st)); right:calc(8px + var(--sr)); left:auto; width:min(380px,calc(100vw - 16px - var(--sl) - var(--sr))); max-height:calc(100dvh - 80px - var(--st)); overflow:auto; padding:12px; border:1px solid var(--rim); border-radius:12px; background:rgba(22,17,11,.97); flex-wrap:wrap; flex-direction:row; pointer-events:auto; }
  html.hud-skin body.nav-open header nav { display:flex; }
  html.hud-skin header nav button,html.hud-skin header nav select { min-height:42px; flex:1 1 40%; }
  html.hud-skin header nav #audio-ctl { flex:1 1 100%; flex-wrap:wrap; }
  html.hud-skin #sysdock { display:none; }
  html.hud-skin #vitals { left:calc(8px + var(--sl)); top:calc(6px + var(--st)); width:250px; max-width:calc(100vw - 170px - var(--sl) - var(--sr)); padding:4px 8px 4px 4px; }
  html.hud-skin #avatar { width:48px; height:48px; }
  html.hud-skin #vitals .who { font-size:11px; height:18px; margin:0; }
  html.hud-skin #vitals .bar { height:11px; margin-top:2px; }
  html.hud-skin #vitals .bar span { font-size:9px; line-height:11px; }
  html.hud-skin #vitals>#buffbar { top:calc(100% + 4px); left:0; max-width:250px; }
  html.hud-skin #buffbar .bf { width:24px; height:24px; }
  html.hud-skin #buffbar .bf img { width:22px; height:22px; }
  html.hud-skin #targetf { top:calc(8px + var(--st)); left:50%; transform:translateX(-50%); width:170px; }
  html.hud-skin #minimap { right:calc(8px + var(--sr)); top:calc(6px + var(--st)); width:140px; padding:3px; z-index:9; }
  html.hud-skin #minimap:not(.mm-big) canvas { width:132px!important; height:82px!important; }
  html.hud-skin #minimap .mm-bar { height:24px; font-size:10px; }
  html.hud-skin #minimap #mm-size,html.hud-skin #minimap #mm-world { min-height:24px; padding:0 4px; }
  html.hud-skin #minimap .cam-zoom { display:none; }
  html.hud-skin #na-mini { font-size:9px!important; padding:1px 3px!important; }
  html.hud-skin #minimap.mm-big { width:min(70vw,420px); }
  html.hud-skin #minimap.mm-big canvas { width:100%!important; height:min(45dvh,300px)!important; }
  html.hud-skin #nav-toggle,html.hud-skin #dock-toggle,html.hud-skin #skills-fab,html.hud-skin #res-toggle,html.hud-skin #bag-fab,html.hud-skin #gm-fab { position:absolute; display:flex!important; flex-direction:column; justify-content:center; align-items:center; width:48px!important; height:48px!important; min-height:48px!important; padding:2px!important; border:1px solid var(--rim2)!important; border-radius:12px!important; background:var(--plate)!important; font-size:9px!important; line-height:1.1!important; color:#fff0cc; gap:2px; left:auto!important; z-index:12; box-shadow:0 2px 5px #0007; }
  html.hud-skin #nav-toggle i,html.hud-skin #dock-toggle i,html.hud-skin #skills-fab i,html.hud-skin #res-toggle i,html.hud-skin #bag-fab i,html.hud-skin #gm-fab i { font-size:20px!important; font-style:normal; }
  html.hud-skin #nav-toggle,html.hud-skin #dock-toggle,html.hud-skin #bag-fab { right:calc(156px + var(--sr))!important; }
  html.hud-skin #skills-fab,html.hud-skin #res-toggle,html.hud-skin #gm-fab { right:calc(208px + var(--sr))!important; }
  html.hud-skin #nav-toggle,html.hud-skin #skills-fab { top:calc(6px + var(--st))!important; }
  html.hud-skin #dock-toggle,html.hud-skin #res-toggle { top:calc(58px + var(--st))!important; }
  html.hud-skin #bag-fab,html.hud-skin #gm-fab { top:calc(110px + var(--st))!important; }
  html.hud-skin #dock { display:none; left:calc(8px + var(--sl)); right:calc(8px + var(--sr)); top:calc(82px + var(--st)); width:auto; max-width:440px; max-height:calc(100dvh - 100px - var(--st)); overflow:auto; padding:8px; background:rgba(20,16,10,.97); z-index:20; }
  html.hud-skin body.dock-open #dock { display:flex; }
  html.hud-skin #dock .mapsel { flex:1 1 100%; min-width:0; }
  html.hud-skin #dock select { max-width:100%; }
  html.hud-skin #questtrack { left:calc(8px + var(--sl)); right:auto; top:calc(106px + var(--st)); width:160px; max-height:70px; overflow:auto; font-size:10px; padding:3px 6px; }
  html.hud-skin #perf { right:auto!important; left:50%!important; top:calc(42px + var(--st))!important; transform:translateX(-50%); font-size:8px!important; opacity:.65; }
  html.hud-skin #stage #joy { display:block; left:calc(22px + var(--sl)); bottom:calc(24px + var(--sb)); width:112px; height:112px; background:radial-gradient(circle,#15110c11,#15110c55); border:2px solid #e9d49a77; }
  html.hud-skin #joy i { width:48px; height:48px; margin:-24px 0 0 -24px; opacity:.8; }
  html.hud-skin #actions { left:calc(12px + var(--sl)); right:auto; bottom:calc(150px + var(--sb)); padding:0; gap:4px; background:none; border:0; max-width:200px; flex-wrap:wrap; }
  html.hud-skin #actions button { flex:none; width:40px; height:40px; min-height:40px; padding:0 0 0 8px; overflow:hidden; white-space:nowrap; text-align:left; border-radius:50%; border:1px solid var(--rim); background:var(--plate); font-size:17px; }
  html.hud-skin #actions kbd { display:none; }
  html.hud-skin #side { left:calc(150px + var(--sl)); right:calc(286px + var(--sr)); bottom:calc(12px + var(--sb)); width:auto; height:74px; border:1px solid #b8913a55; background:#110d0980; }
  html.hud-skin body.chat-min #side { height:40px; }
  html.hud-skin body.hb-open #side { display:flex; }
  html.hud-skin #chat-toggle { width:36px; height:36px; top:0; left:0; font-size:18px; }
  html.hud-skin #side #chat { min-height:0; padding:3px 4px 3px 38px; font-size:10px; }
  html.hud-skin #chat-in { min-height:28px; }
  html.hud-skin #chat-in input { min-width:0; }
  html.hud-skin #hotbar,html.hud-skin #hb-toggle,html.hud-skin #selskill { display:none!important; }
  html.hud-skin #gasbar { right:calc(240px + var(--sr)); bottom:calc(100px + var(--sb)); width:64px; font-size:9px; }
  html.hud-skin #expbar { height:6px; bottom:0; }
  html.hud-skin #expbar span,html.hud-skin #footnote { display:none; }
  html.hud-skin #mwheel { display:block; position:absolute; z-index:7; width:76px; height:76px; right:calc(12px + var(--sr)); bottom:calc(14px + var(--sb)); pointer-events:none; }
  #mwheel button { position:absolute; pointer-events:auto; touch-action:manipulation; padding:0; border-radius:50%; color:#fff0cc; -webkit-tap-highlight-color:transparent; }
  #mwheel button:focus-visible { outline:2px solid white; outline-offset:2px; }
  #mwheel .mw-atk { inset:0; border:3px solid #d7ad58; background:radial-gradient(circle at 40% 30%,#ffe49b,#b48023 60%,#49300f); font-size:34px; box-shadow:0 0 0 2px #342611,0 3px 10px #0008; }
  #mwheel .mw-atk i { font-style:normal; }
  #mwheel .mw-s { left:50%; top:50%; width:48px; height:48px; margin:-24px; transform:translate(var(--x),var(--y)); overflow:hidden; border:2px solid rgba(205,205,205,.42); background:radial-gradient(circle,#2d2a26cc,#0d0c0bcc); box-shadow:0 2px 7px #0006; font-size:10px; }
  #mwheel .mw-s span { display:flex; width:100%; height:100%; align-items:center; justify-content:center; overflow:hidden; }
  #mwheel .mw-s img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  #mwheel .mw-s.empty { background:rgba(24,24,24,.38); }
  #mwheel .mw-s.empty span::before { content:'+'; font-size:24px; color:rgba(235,235,235,.75); }
  /* attack button = the left-mouse skill (PC client): its icon in the gold ring; hold to choose */
  #mwheel .mw-atk { overflow:hidden; -webkit-touch-callout:none; user-select:none; }
  #mwheel .mw-atk .mw-ico { position:absolute; inset:6px; border-radius:50%; overflow:hidden; pointer-events:none; }
  #mwheel .mw-atk .mw-ico img { width:100%; height:100%; object-fit:cover; display:block; }
  #mwheel .mw-atk.has-ico i { display:none; }
  #mwheel .mw-atk em { display:none; position:absolute; inset:6px; border-radius:50%; background:#000a; align-items:center; justify-content:center; font:700 15px system-ui; font-style:normal; color:white; pointer-events:none; }
  #mwheel .mw-atk.cd em { display:flex; }
  html.hud-skin #mwheel.picking { z-index:30; }
  #mw-left { position:absolute; right:-4px; bottom:172px; width:min(276px,calc(100vw - 28px)); pointer-events:auto; padding:8px; border:1px solid rgba(205,205,205,.35); border-radius:12px; background:#15120ef0; box-shadow:0 6px 20px #000a; color:#eadfc7; font:12px system-ui; }
  #mw-left[hidden] { display:none; }
  #mw-left .mwl-head { display:flex; align-items:center; justify-content:space-between; margin:0 2px 6px; color:#f0c96a; font-weight:700; }
  #mw-left .mwl-head small { color:#9a8d75; font-weight:400; }
  #mw-left .mwl-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
  #mwheel #mw-left button { position:static; width:auto; height:auto; padding:4px 2px; border:1px solid rgba(205,205,205,.25); border-radius:8px; background:#221c15; color:#eadfc7; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; line-height:1.15; }
  #mwheel #mw-left button.on { border-color:#e8c76e; background:#3a2d17; }
  #mw-left button img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
  #mw-left p { margin:4px 2px 0; color:#9a8d75; font-size:11px; line-height:1.35; }
  #mwheel .mw-s em { display:none; position:absolute; inset:0; border-radius:50%; background:#000a; align-items:center; justify-content:center; font:700 14px system-ui; color:white; }
  #mwheel .mw-s.cd em { display:flex; }
  #mwheel .mw-pg { left:-188px; bottom:-4px; width:58px; height:40px; border:1px solid #c9a152; border-radius:20px; background:#17120ae8; font-size:12px; font-weight:700; }
  #mwheel .hit { animation:mw-hit .2s ease-out; }
  @keyframes mw-hit { from { filter:brightness(1.7); } to { filter:none; } }
  html.hud-skin .modal { z-index:100; }
  html.hud-skin .dlg-dock { z-index:90; }
  html.hud-skin .fwin { z-index:100; }
}
@media (pointer:coarse) and (max-width:1400px) and (orientation:portrait), (max-width:760px) and (orientation:portrait) {
  html.hud-skin #vitals { width:calc(100vw - 140px - var(--sl) - var(--sr)); max-width:280px; }
  html.hud-skin #avatar { width:40px; height:40px; }
  html.hud-skin #minimap { width:120px; }
  html.hud-skin #minimap:not(.mm-big) canvas { width:112px!important; height:76px!important; }
  html.hud-skin #nav-toggle,html.hud-skin #dock-toggle,html.hud-skin #skills-fab,html.hud-skin #res-toggle,html.hud-skin #bag-fab,html.hud-skin #gm-fab { top:calc(180px + var(--st))!important; }
  html.hud-skin #nav-toggle { left:calc(8px + var(--sl))!important; right:auto!important; }
  html.hud-skin #dock-toggle { left:calc(60px + var(--sl))!important; right:auto!important; }
  html.hud-skin #skills-fab { left:calc(112px + var(--sl))!important; right:auto!important; }
  html.hud-skin #res-toggle { left:calc(164px + var(--sl))!important; right:auto!important; }
  html.hud-skin #bag-fab { left:calc(216px + var(--sl))!important; right:auto!important; }
  html.hud-skin #gm-fab { left:calc(268px + var(--sl))!important; right:auto!important; }
  html.hud-skin #targetf { left:calc(8px + var(--sl)); top:calc(118px + var(--st)); transform:none; width:170px; }
  html.hud-skin #questtrack { top:calc(234px + var(--st)); width:170px; }
  html.hud-skin #perf { display:none; }
  html.hud-skin #side { left:calc(8px + var(--sl)); right:calc(8px + var(--sr)); bottom:calc(250px + var(--sb)); height:76px; }
  html.hud-skin #stage #joy { left:calc(14px + var(--sl)); width:100px; height:100px; }
  html.hud-skin #actions { bottom:calc(140px + var(--sb)); max-width:90px; }
  html.hud-skin #gasbar { left:calc(8px + var(--sl)); right:auto; bottom:calc(202px + var(--sb)); }
  html.hud-skin #dock { top:calc(234px + var(--st)); }
  html.hud-skin #mwheel .mw-pg { left:-168px; bottom:132px; }
}
@media (prefers-reduced-motion:reduce) { #mwheel .hit { animation:none; } }

@media (pointer:coarse) and (max-height:500px) and (orientation:landscape), (max-width:760px) and (max-height:500px) and (orientation:landscape) {
  html.hud-skin #mw-left { bottom:84px; width:min(330px,calc(100vw - 28px)); }
  html.hud-skin #mw-left .mwl-grid { grid-template-columns:repeat(5,1fr); }
  html.hud-skin #minimap:not(.mm-big) canvas { height:52px!important; }
  html.hud-skin #minimap .mm-bar { height:20px; }
  html.hud-skin #targetf { left:calc(8px + var(--sl)); top:calc(106px + var(--st)); transform:none; width:160px; }
  html.hud-skin #stage:has(#targetf:not([hidden])) #questtrack { display:none; }
  html.hud-skin #questtrack { max-height:48px; }
}
@media (pointer:coarse) and (max-height:350px) and (orientation:landscape), (max-width:760px) and (max-height:350px) and (orientation:landscape) {
  html.hud-skin #mwheel { transform:scale(.85); transform-origin:bottom right; }
  html.hud-skin #minimap:not(.mm-big) canvas { height:32px!important; }
  html.hud-skin #stage #joy { width:90px; height:90px; }
  html.hud-skin #actions { bottom:calc(118px + var(--sb)); }
  html.hud-skin #questtrack { max-height:32px; }
}