/* Navy and gold HUD: character frame (top left) and skill wheel (bottom right).
   Enabled by src/hud-navy.js, which adds body.hud-navy. */
body.hud-navy{--navy-1:#1c2f56;--navy-2:#0e1a33;--navy-3:#08101f;--gold:#d8b25a;--gold-light:#f6dc92;--gold-dark:#7b5d22;--ink:#eef3ff;--muted:#9fb0d4}

/* ---------- Character frame ---------- */
body.hud-navy .character.panel{left:16px;top:14px;width:392px;display:flex;align-items:stretch;gap:12px;padding:11px 13px 11px 11px;border:2px solid var(--gold);border-radius:10px;background:linear-gradient(160deg,#20355fef,var(--navy-2) 70%);box-shadow:0 0 0 1px var(--navy-3),inset 0 0 0 1px #f6dc9240,inset 0 12px 24px #ffffff0d,0 8px 20px #000a;color:var(--ink)}
body.hud-navy .character.panel:before,body.hud-navy .character.panel:after{content:'';position:absolute;width:9px;height:9px;background:var(--gold-light);transform:rotate(45deg);box-shadow:0 0 0 2px var(--gold-dark),0 0 6px #f6dc92aa;top:-6px;left:50%;margin-left:-5px}
body.hud-navy .character.panel:after{top:auto;bottom:-6px}
body.hud-navy .character.panel .portrait{flex:none;align-self:center;width:84px;height:96px;border-radius:6px;border:2px solid var(--gold);outline:1px solid var(--navy-3);background:linear-gradient(170deg,#3a5a8e,#15213d);box-shadow:inset 0 0 0 2px #f6dc9255,0 3px 8px #0008}
body.hud-navy .character.panel .portrait img{width:505px;left:-33px;top:5px}
body.hud-navy .character.panel .character-info{flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;padding:0}
body.hud-navy .character.panel .name-row{position:static;display:flex;align-items:baseline;gap:9px;min-width:0}
body.hud-navy .character.panel .name-row strong{font-size:17px;color:#fff;text-shadow:0 1px 2px #000;max-width:none;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.hud-navy .character.panel .name-row>span{position:static;width:auto;padding:0;border:0;background:none;color:var(--gold-light);font:800 13px/1 Tahoma,sans-serif;text-shadow:0 1px 2px #000;white-space:nowrap}
body.hud-navy .navy-meta{display:flex;align-items:center;gap:8px;margin:1px 0 3px;font-size:11px;color:var(--muted);white-space:nowrap;min-width:0}
body.hud-navy .navy-profession{padding:1px 8px;border:1px solid var(--gold-dark);border-radius:4px;background:linear-gradient(#35507f,#1e2f52);color:var(--gold-light);font-weight:700}
body.hud-navy .navy-weight{overflow:hidden;text-overflow:ellipsis}
body.hud-navy .character.panel .stat-row,body.hud-navy .character.panel .character-info>.experience{position:relative;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:7px;width:100%;height:auto;margin:0}
body.hud-navy .character.panel .stat-row>span:first-child{display:block;width:auto;font:800 10px/1 Tahoma,sans-serif;letter-spacing:.3px;text-shadow:0 1px 2px #000}
body.hud-navy .character.panel .stat-row>span:last-child{position:static;min-width:66px;text-align:right;font:700 11px/1 Tahoma,sans-serif;color:var(--ink);text-shadow:0 1px 2px #000;white-space:nowrap}
body.hud-navy .character.panel .stat-row .health{height:12px;padding:1px;border:1px solid var(--navy-3);border-radius:6px;background:linear-gradient(#060c18,#132140);box-shadow:inset 0 1px 2px #000,0 0 0 1px #f6dc9230}
body.hud-navy .character.panel .stat-row .health i{border-radius:5px;box-shadow:inset 0 1px 0 #ffffff66}
body.hud-navy .character.panel .stat-row:not(.mana):not(.stamina):not(.hunger):not(.life):not(.experience)>span:first-child{color:#ff8a86}
body.hud-navy .character.panel .stat-row:not(.mana):not(.stamina):not(.hunger):not(.life):not(.experience) .health i{background:linear-gradient(#ff8f7c,#d23a3a)}
body.hud-navy .character.panel .stat-row.mana>span:first-child{color:#7fcfff}
body.hud-navy .character.panel .stat-row.mana .health i{background:linear-gradient(#7ddcff,#2a7fd6)}
body.hud-navy .character.panel .stat-row.stamina>span:first-child{color:#a6e38c}
body.hud-navy .character.panel .stat-row.stamina .health i{background:linear-gradient(#b8ec96,#4f9b47)}
body.hud-navy .character.panel .stat-row.hunger>span:first-child{color:#ffd27d}
body.hud-navy .character.panel .stat-row.hunger .health i{background:linear-gradient(#ffe08f,#d69133)}
body.hud-navy .character.panel .stat-row.hunger.hungry .health i{background:linear-gradient(#f3a066,#c45235)}
body.hud-navy .character.panel .stat-row.life>span:first-child{color:#f7a9cc}
body.hud-navy .character.panel .stat-row.life .health i{background:linear-gradient(#f7b0cf,#c9558e)}
body.hud-navy .character.panel .stat-row.life.fading .health i{background:linear-gradient(#c98aa6,#7e3a5c)}
body.hud-navy .character.panel .character-info>.experience>span:first-child{color:#b9f5a5}
body.hud-navy .character.panel .character-info>.experience .health i{background:linear-gradient(#c7f59a,#57b04a)}
body.hud-navy .character.panel .stat-row.stamina .health,body.hud-navy .character.panel .stat-row.hunger .health,body.hud-navy .character.panel .stat-row.life .health,body.hud-navy .character.panel .character-info>.experience .health{height:9px}
body.hud-navy .character.panel .stat-row.stamina>span:last-child,body.hud-navy .character.panel .stat-row.hunger>span:last-child,body.hud-navy .character.panel .stat-row.life>span:last-child,body.hud-navy .character.panel .character-info>.experience>span:last-child{font-size:10px;line-height:1}
body.hud-navy .navy-xp-percent{position:absolute;left:37px;top:50%;transform:translateY(-50%);font:700 8px/1 Tahoma,sans-serif;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none}

/* ---------- Skill wheel ---------- */
/* Main attack in the corner; profession skills 6-9 on the inner arc; jump, harvest,
   crafting and bag on the outer arc. Centres are relative to a 330px square. */
body.hud-navy #game>#adventure-hotbar{left:auto;right:18px;bottom:16px;transform:none;display:block;width:330px;height:330px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;pointer-events:none}
body.hud-navy #game>#adventure-hotbar:before,body.hud-navy #game>#adventure-hotbar:after,body.hud-navy #game>#adventure-hotbar .adventure-xp,body.hud-navy #game>#adventure-hotbar .adventure-harvest-label{display:none}
body.hud-navy #game>#adventure-hotbar>button{--size:54px;position:absolute;left:calc(var(--x) - var(--size)/2);top:calc(var(--y) - var(--size)/2);width:var(--size);height:var(--size);max-width:none;padding:0;display:grid;place-items:center;border:2px solid var(--gold);border-radius:50%;background:radial-gradient(circle at 35% 28%,#4f73b5,#1d3160 58%,#0a1428);box-shadow:0 0 0 1px var(--navy-3),inset 0 0 0 2px #f6dc9244,inset 0 -6px 12px #0008,0 4px 8px #000a;color:#fff;pointer-events:auto;aspect-ratio:auto}
body.hud-navy #game>#adventure-hotbar>button>.adventure-icon{width:62%;height:62%;filter:drop-shadow(0 0 4px #bcd9ff99)}
body.hud-navy #game>#adventure-hotbar>button:hover:enabled{box-shadow:0 0 0 1px var(--navy-3),inset 0 0 0 2px #f6dc9288,0 0 14px #f6dc92aa,0 4px 8px #000a}
body.hud-navy #game>#adventure-hotbar>button:active:enabled{transform:scale(.94)}
body.hud-navy #game>#adventure-hotbar>button kbd{top:-7px;bottom:auto;left:50%;transform:translateX(-50%);min-width:18px;height:18px;padding:0 4px;border:1px solid var(--gold);border-radius:9px;background:linear-gradient(#27406f,#0d1830);color:var(--gold-light);font:800 10px/16px Tahoma,sans-serif;text-align:center;box-shadow:0 1px 3px #000a}
body.hud-navy #game>#adventure-hotbar>button[data-cost]:not([data-cost=""]):after{content:attr(data-cost);position:absolute;z-index:4;top:auto;right:auto;left:50%;bottom:4px;transform:translateX(-50%);padding:0 4px;border:0;border-radius:5px;background:#08122ad9;color:#9fd4ff;font:800 8px/11px Tahoma,sans-serif;white-space:nowrap;pointer-events:none}
/* Main attack */
body.hud-navy #game>#adventure-hotbar>.skill-1{--size:100px;--x:278px;--y:278px;border-width:3px;background:radial-gradient(circle at 35% 28%,#ffd08a,#c0532c 52%,#4a1612);box-shadow:0 0 0 2px var(--navy-3),0 0 0 5px #d8b25a55,inset 0 0 0 3px #f6dc9266,inset 0 -10px 18px #0009,0 6px 14px #000b}
body.hud-navy #game>#adventure-hotbar>.skill-1 kbd{top:-4px}
/* Outer arc: jump, harvest, craft, bag (radius 200, 180-270 degrees) */
body.hud-navy #game>#adventure-hotbar>.skill-2{--x:78px;--y:278px}
body.hud-navy #game>#adventure-hotbar>#harvest{--x:105px;--y:178px;background:radial-gradient(circle at 35% 28%,#ffe9a0,#b8801c 55%,#3f2a0c)}
body.hud-navy #game>#adventure-hotbar>.skill-5{--x:178px;--y:105px}
body.hud-navy #game>#adventure-hotbar>.skill-4{--x:278px;--y:78px}
body.hud-navy #game>#adventure-hotbar>.skill-2{background:radial-gradient(circle at 35% 28%,#9fe6ff,#1f7fbf 55%,#0b2547)}
body.hud-navy #game>#adventure-hotbar>.skill-4{background:radial-gradient(circle at 35% 28%,#b9f3a8,#3a8a4d 55%,#10301e)}
/* Inner arc: profession skills 6-9 (radius 118) */
body.hud-navy #game>#adventure-hotbar>[data-skill-slot]{--size:58px}
body.hud-navy #game>#adventure-hotbar>[data-skill-slot="0"]{--x:160px;--y:278px}
body.hud-navy #game>#adventure-hotbar>[data-skill-slot="1"]{--x:176px;--y:219px}
body.hud-navy #game>#adventure-hotbar>[data-skill-slot="2"]{--x:219px;--y:176px}
body.hud-navy #game>#adventure-hotbar>[data-skill-slot="3"]{--x:278px;--y:160px}
body.hud-navy #game>#adventure-hotbar>.skill-profession{background:radial-gradient(circle at 35% 28%,#c7a6ff,#5a3aa8 55%,#1a1040)}
body.hud-navy #game>#adventure-hotbar>.skill-empty{background:radial-gradient(circle at 35% 28%,#3a4a6a,#1a2438 60%,#0b111e);border-color:#8d7a4f;opacity:.7}
body.hud-navy #game>#adventure-hotbar>.skill-empty>.adventure-icon{width:34%;height:34%;filter:none;stroke:#b8c4dc}
/* Disabled buttons stay readable over grass: dimmed, not see-through. */
body.hud-navy #game>#adventure-hotbar>button:disabled:not(.skill-empty){opacity:1;filter:saturate(.35) brightness(.72)}
body.hud-navy #game>#adventure-hotbar .skill-cooldown{border-radius:50%}
/* Touch devices have no right mouse button: hide the "คลิกขวา" badge from styles/context-menu.css
   (its ::after would otherwise merge with the MP label). */
body.hud-navy #game>#adventure-hotbar>button[data-mouse-button="right"]::after{content:none}
/* Items that used to sit above the centre hotbar move down; the connection status moves left. */
body.hud-navy .adventure-resource-hint{bottom:44px}
body.hud-navy.adventure-hud .movement-hud{bottom:18px}
body.hud-navy.adventure-hud #online-status{right:auto;left:22px;bottom:48px!important}
/* Touch devices have no keyboard, so the WASD hint is hidden. */
body.hud-navy .adventure-control-hint{display:none}
/* Top menu: one compact row between the character frame and the minimap.
   --panel-right tracks the frame's scaled right edge in each layout below. */
body.hud-navy{--panel-right:410px;--nav-right:188px}
body.hud-navy .adventure-navigation{top:12px;left:calc(var(--panel-right) + 10px);right:var(--nav-right);width:auto;transform:none;display:flex;justify-content:space-around;gap:2px}
body.hud-navy .adventure-nav-button{flex:1 1 0;min-width:0;max-width:74px;flex-direction:column;gap:2px;padding:2px 0;font-size:11px;white-space:nowrap}
body.hud-navy .adventure-nav-button>.adventure-icon{width:30px;height:30px}

@media(max-height:650px) and (min-width:601px){
 body.hud-navy #game>#adventure-hotbar{transform:scale(.78);transform-origin:right bottom}
 body.hud-navy .character.panel{transform:scale(.86);transform-origin:left top}
 body.hud-navy{--panel-right:356px}
}
@media(max-height:500px) and (min-width:601px){
 /* #game keeps a 400px minimum height, so lift the wheel by any overflow below the screen. */
 body.hud-navy #game>#adventure-hotbar{right:8px;bottom:max(6px,calc(406px - 100dvh));transform:scale(.6)}
 body.hud-navy .character.panel{top:8px;left:8px;transform:scale(.6)}
 body.hud-navy{--panel-right:246px;--nav-right:148px}
 body.hud-navy .adventure-navigation{top:8px}
 body.hud-navy .adventure-nav-button>.adventure-icon{width:26px;height:26px}
}
@media(max-height:500px) and (max-width:760px){
 /* Small phones: icons only so all eight fit beside the frame. */
 body.hud-navy .adventure-nav-button>span:not(.adventure-icon){display:none}
}
@media(max-width:600px){
 body.hud-navy #game>#adventure-hotbar{right:6px;bottom:6px;transform:scale(.66);transform-origin:right bottom}
 body.hud-navy .character.panel{top:8px;left:8px;width:360px;transform:scale(.8);transform-origin:left top}
 /* Portrait is normally blocked by the rotate prompt; keep the menu usable below the frame. */
 body.hud-navy .adventure-navigation{top:150px;left:8px;right:8px}
 /* The wheel fills the bottom right, so the bag note and rest indicator move to the left. */
 body.hud-navy .adventure-resource-hint{left:8px;right:auto;transform:none;bottom:78px;max-width:calc(100vw - 240px)}
 body.hud-navy.adventure-hud .movement-hud{left:8px;right:auto;transform:none;bottom:112px}
}