/* Pirate Planet HUD: party cards, island banner, objectives, minimap and settings. Drawn over
   the canvas; only buttons take the pointer. Sizes scale with the viewport. */
:root{
  --hud-font:'Arial Rounded MT Bold','Trebuchet MS','Avenir Next',system-ui,sans-serif;
  --hud-ink:#fff7e3;--hud-dim:#c9d7ef;--hud-gold:#f5c862;--hud-gold-deep:#b9822a;
  --hud-panel:linear-gradient(180deg,rgba(23,37,70,.93),rgba(10,18,40,.93));
  --hud-edge:rgba(245,200,98,.62);--hud-shadow:0 8px 26px rgba(0,8,30,.45);
  --hud-gap:clamp(8px,1.2vw,16px);--hud-u:1;
  --p1:#3d8bff;--p2:#43d35c;--p3:#a65cff;--p4:#ff4f9a;--p5:#ffb02e;--p6:#2fd6e8;
}
#hud{position:fixed;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none;font-family:var(--hud-font);color:var(--hud-ink);z-index:5}
#hud button{font:inherit;color:inherit;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
#hud .panel{background:var(--hud-panel);border:2px solid var(--hud-edge);border-radius:14px;box-shadow:var(--hud-shadow),inset 0 1px 0 rgba(255,255,255,.12)}
#hud [hidden]{display:none!important}

/* Island banner (top middle) */
#hud-place{position:absolute;top:var(--hud-gap);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 22px 8px 10px;max-width:calc(100vw - 150px);min-width:min(320px,calc(100vw - 150px));box-sizing:border-box}
#hud-place .emblem{flex:none;width:calc(48px * var(--hud-u));height:calc(48px * var(--hud-u));border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--biome,#3fae3a) 55%,#fff),var(--biome,#3fae3a) 60%,color-mix(in srgb,var(--biome,#3fae3a) 60%,#000));border:2px solid var(--hud-gold);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 14px color-mix(in srgb,var(--biome,#3fae3a) 60%,transparent)}
#hud-place .emblem svg{width:62%;height:62%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
#hud-place .text{min-width:0}
#hud-place .name{font-size:calc(26px * var(--hud-u));font-weight:800;letter-spacing:.01em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 0 rgba(0,0,0,.45)}
#hud-place .sub{font-size:calc(14px * var(--hud-u));color:var(--hud-dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud-place.arrive{animation:hud-arrive .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes hud-arrive{0%{transform:translateX(-50%) scale(.82);opacity:.2}100%{transform:translateX(-50%) scale(1);opacity:1}}

/* Settings button (top right) and panel */
#hud-settings{position:absolute;top:var(--hud-gap);right:var(--hud-gap);width:calc(52px * var(--hud-u));height:calc(52px * var(--hud-u));border-radius:50%;display:grid;place-items:center;padding:0;background:radial-gradient(circle at 35% 30%,#3a5a9c,#14234a 70%);border:2px solid var(--hud-gold);box-shadow:var(--hud-shadow),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .2s}
#hud-settings:hover{transform:rotate(30deg) scale(1.06)}
#hud-settings svg{width:58%;height:58%}
#hud-settings-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:18px 20px 16px;pointer-events:auto;box-sizing:border-box}
#hud-settings-panel h2{margin:0 0 12px;font-size:22px;display:flex;align-items:center;gap:10px}
#hud-settings-panel h3{margin:16px 0 8px;font-size:14px;color:var(--hud-gold);text-transform:uppercase;letter-spacing:.08em}
#hud-settings-panel label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.08);font-size:16px;cursor:pointer}
#hud-settings-panel input{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:24px;border-radius:999px;background:#2a3656;border:2px solid rgba(255,255,255,.18);position:relative;cursor:pointer;transition:background .2s;margin:0}
#hud-settings-panel input::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#dfe7f7;transition:transform .2s}
#hud-settings-panel input:checked{background:linear-gradient(#ffd877,#e8a83a);border-color:#ffe2a0}
#hud-settings-panel input:checked::after{transform:translateX(20px);background:#fff}
#hud-settings-panel .controls{display:grid;grid-template-columns:auto 1fr auto;gap:6px 12px;font-size:14px;color:var(--hud-dim);align-items:center}
#hud-settings-panel .controls b{color:var(--hud-ink);font-weight:800}
#hud-settings-panel .close{margin-top:16px;width:100%;padding:11px;border-radius:12px;border:2px solid #ffe2a0;background:linear-gradient(#ffd877,#e8a83a);color:#3a2408;font-weight:800;font-size:17px;box-shadow:0 3px 0 #a86f1c}
#hud kbd{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 5px;border-radius:6px;background:linear-gradient(#ffe39a,#f2b84b);color:#3a2408;font:800 12px var(--hud-font);box-shadow:0 2px 0 #a86f1c;box-sizing:border-box}

/* Island objectives (right) */
#hud-objectives{position:absolute;right:var(--hud-gap);top:calc(var(--hud-gap) + 64px * var(--hud-u));width:calc(270px * var(--hud-u));padding:10px 14px 12px;box-sizing:border-box;transition:transform .45s cubic-bezier(.3,1.3,.5,1),opacity .3s}
#hud-objectives.away{transform:translateX(calc(100% + 30px));opacity:0}
#hud-objectives .head{display:flex;align-items:center;gap:10px;width:100%;padding:0 0 8px;border:0;border-bottom:1px solid rgba(245,200,98,.3);background:none;text-align:left}
#hud-objectives .head>span:last-child{display:grid}
#hud-objectives .head svg{flex:none;width:calc(30px * var(--hud-u));height:calc(30px * var(--hud-u))}
#hud-objectives .title{font-size:calc(19px * var(--hud-u));font-weight:800;line-height:1.05}
#hud-objectives .island{font-size:calc(12px * var(--hud-u));color:var(--hud-dim)}
#hud-objectives ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
#hud-objectives li{display:flex;align-items:center;gap:10px;font-size:calc(15px * var(--hud-u));line-height:1.15}
#hud-objectives .box{flex:none;width:calc(20px * var(--hud-u));height:calc(20px * var(--hud-u));border-radius:5px;border:2px solid rgba(245,200,98,.75);background:rgba(0,0,0,.25);display:grid;place-items:center;box-sizing:border-box}
#hud-objectives li.done .box{background:linear-gradient(#5be36f,#23a83e);border-color:#b9ffc4}
#hud-objectives li.done span{color:var(--hud-dim);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.4)}
#hud-objectives .hint{display:block;margin-top:2px;font-size:.78em;font-weight:600;color:#a8f5cf;line-height:1.15}
#hud-objectives .count{margin-left:auto;color:var(--hud-gold);font-size:.9em;white-space:nowrap}
#hud-objectives.collapsed ul{display:none}
#hud-objectives.collapsed .head{border-bottom:0;padding-bottom:0}

/* Party (bottom left) */
#hud-party{position:absolute;left:var(--hud-gap);bottom:var(--hud-gap);display:flex;align-items:flex-end;gap:calc(8px * var(--hud-u));max-width:calc(100vw - 260px * var(--hud-u) - 3 * var(--hud-gap))}
.hud-card{position:relative;display:flex;align-items:center;gap:calc(10px * var(--hud-u));padding:calc(8px * var(--hud-u)) calc(12px * var(--hud-u)) calc(8px * var(--hud-u)) calc(8px * var(--hud-u));border-color:color-mix(in srgb,var(--pc) 70%,var(--hud-gold))!important;flex:none}
.hud-card .avatar{position:relative;flex:none;width:calc(100px * var(--hud-u));height:calc(100px * var(--hud-u))}
.hud-card .face{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--pc) 45%,#fff) 0,var(--pc) 45%,color-mix(in srgb,var(--pc) 45%,#000) 100%);border:3px solid var(--pc);box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 16px color-mix(in srgb,var(--pc) 70%,transparent);overflow:hidden;box-sizing:border-box}
.hud-card .face img{width:100%;height:100%;object-fit:cover;display:block}
.hud-card .tag{position:absolute;top:-6px;right:-10px;padding:2px 9px;border-radius:999px;background:var(--pc);border:2px solid #fff;font-size:calc(17px * var(--hud-u));font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.4);text-shadow:0 1px 0 rgba(0,0,0,.35)}
.hud-card .level{position:absolute;left:-6px;bottom:-4px;width:calc(34px * var(--hud-u));height:calc(34px * var(--hud-u));border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#2c3f6e,#0c1430);border:2px solid var(--hud-gold);font-size:calc(16px * var(--hud-u));font-weight:800}
.hud-card .stats{display:grid;gap:calc(5px * var(--hud-u))}
.hud-card .hearts{display:flex;gap:3px}
.hud-card .hearts svg{width:calc(24px * var(--hud-u));height:calc(24px * var(--hud-u));filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.hud-card .hearts .empty path{fill:#3a2633;stroke:#8a5a6a}
.hud-card .bar{height:calc(9px * var(--hud-u));width:calc(170px * var(--hud-u));border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15);overflow:hidden}
.hud-card .bar i{display:block;height:100%;width:40%;border-radius:inherit;background:linear-gradient(90deg,#ffd24a,#ffef9a);box-shadow:0 0 8px rgba(255,210,74,.7)}
.hud-card .moves{display:flex;gap:calc(8px * var(--hud-u));margin-top:2px}
.hud-move{position:relative;display:grid;justify-items:center;gap:4px}
.hud-move .slot{position:relative;padding:0;cursor:pointer;width:calc(54px * var(--hud-u));height:calc(54px * var(--hud-u));border-radius:12px;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--mc) 55%,#1a2648),#0d1530 75%);border:2px solid color-mix(in srgb,var(--mc) 80%,#fff);box-shadow:inset 0 0 10px rgba(0,0,0,.6),0 0 10px color-mix(in srgb,var(--mc) 45%,transparent);overflow:hidden}
.hud-move .slot svg{width:82%;height:82%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.hud-move .slot::after{content:'';position:absolute;inset:0;background:conic-gradient(rgba(5,10,25,.72) calc(var(--cd,0) * 360deg),transparent 0);pointer-events:none}
.hud-move.fired .slot{animation:hud-fire .32s ease-out}
@keyframes hud-fire{0%{transform:scale(.86);filter:brightness(1.8)}100%{transform:scale(1);filter:none}}
.hud-move kbd{font-size:calc(11px * var(--hud-u))!important}
.hud-open{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:calc(80px * var(--hud-u));height:calc(110px * var(--hud-u));border:2px dashed color-mix(in srgb,var(--pc) 55%,transparent);border-radius:14px;background:rgba(8,14,32,.5);box-sizing:border-box;flex:none}
.hud-open .ghost{width:calc(44px * var(--hud-u));height:calc(44px * var(--hud-u));border-radius:50%;border:2px solid color-mix(in srgb,var(--pc) 70%,transparent);display:grid;place-items:center;color:color-mix(in srgb,var(--pc) 85%,#fff);font-size:calc(26px * var(--hud-u));line-height:1;background:rgba(255,255,255,.04)}
.hud-open .who{padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--pc) 80%,#000);font-size:calc(12px * var(--hud-u));font-weight:800}
.hud-open .open{font-size:calc(11px * var(--hud-u));color:var(--hud-dim)}

/* Minimap (bottom right) */
#hud-minimap{position:absolute;right:calc(var(--hud-gap) + 10px);bottom:var(--hud-gap);width:calc(220px * var(--hud-u));height:calc(220px * var(--hud-u))}
#hud-minimap .globe{position:absolute;inset:0;border-radius:50%;padding:6px;background:conic-gradient(from 20deg,#ffe7a3,#b9822a,#ffe7a3,#9c6a1e,#ffe7a3,#b9822a,#ffe7a3);box-shadow:0 0 0 2px rgba(0,0,0,.55),0 0 26px rgba(80,170,255,.55),var(--hud-shadow);box-sizing:border-box}
#hud-minimap .disc{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 40% 35%,#0e3f7a,#030b1f 75%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.6)}
#hud-minimap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#hud-minimap .overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#hud-minimap .marker{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
#hud-minimap .marker svg{position:absolute;transform:translate(-50%,-50%)}
#hud-minimap .zoom{position:absolute;right:calc(-8px * var(--hud-u));display:grid;gap:6px;bottom:calc(10px * var(--hud-u))}
#hud-minimap .zoom button{width:calc(30px * var(--hud-u));height:calc(30px * var(--hud-u));border-radius:50%;padding:0;display:grid;place-items:center;font-size:calc(20px * var(--hud-u));font-weight:800;line-height:1;background:radial-gradient(circle at 35% 30%,#3a5a9c,#14234a 70%);border:2px solid var(--hud-gold);box-shadow:0 2px 6px rgba(0,0,0,.45)}
#hud-minimap .zoom button:disabled{opacity:.45;cursor:default}

/* Player tag above the pirate's head */
.hud-overhead{position:absolute;left:0;top:0;padding:1px 8px;border-radius:999px;background:var(--pc);border:2px solid #fff;font-size:13px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.4);transform:translate(-50%,-100%);will-change:transform}
.hud-overhead::after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-5px;border:5px solid transparent;border-top-color:#fff;border-bottom:0}

/* Touch screens: no key hints; the attack slots are tapped instead. */
@media (hover:none) and (pointer:coarse){.hud-move kbd{display:none}}

/* Hidden by settings */
#hud.no-minimap #hud-minimap,#hud.no-objectives #hud-objectives,#hud.no-party #hud-party{display:none}

/* Narrower screens */
@media (max-width:1100px){.hud-open .open{display:none}.hud-open{height:calc(78px * var(--hud-u));width:calc(56px * var(--hud-u))}}
@media (max-width:820px){.hud-open{display:none}#hud-place .sub{display:none}}
@media (max-width:560px){
  #hud-minimap{width:120px;height:120px}
  #hud-party{max-width:calc(100vw - 150px)}
  .hud-card .bar{width:96px}.hud-card .avatar{width:58px;height:58px}.hud-move .slot{width:38px;height:38px}
  #hud-objectives{width:200px}
  #hud-place{min-width:0;padding:6px 14px 6px 8px}
}

/* Fights: toasts, knocked out, floating numbers and enemy health bars */
#hud-toasts{position:absolute;top:calc(var(--hud-gap) + 78px * var(--hud-u));left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;pointer-events:none;width:min(520px,calc(100vw - 32px))}
.hud-toast{display:grid;justify-items:center;gap:3px;padding:10px 22px 11px;text-align:center;border-color:var(--hud-gold)!important;background:linear-gradient(180deg,rgba(64,40,10,.94),rgba(30,18,6,.94))!important;animation:hud-toast-in .45s cubic-bezier(.2,1.5,.4,1)}
.hud-toast b{font-size:calc(24px * var(--hud-u));color:#ffe08a;text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 18px rgba(255,200,80,.6)}
.hud-toast span{font-size:calc(15px * var(--hud-u));color:var(--hud-ink)}
.hud-toast.out{opacity:0;transform:translateY(-10px);transition:opacity .4s,transform .4s}
@keyframes hud-toast-in{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
#hud-knockout{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;background:radial-gradient(circle,rgba(40,0,0,.15),rgba(30,0,0,.55));pointer-events:none;animation:hud-ko .5s ease-out}
#hud-knockout b{font-size:calc(46px * var(--hud-u));color:#fff;text-shadow:0 3px 0 #7a1010,0 0 24px rgba(255,60,60,.7)}
#hud-knockout span{font-size:calc(18px * var(--hud-u));color:#ffe0e0}
@keyframes hud-ko{0%{opacity:0}100%{opacity:1}}
.hud-world{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hud-float{position:absolute;left:0;top:0;font-weight:800;font-size:calc(22px * var(--hud-u));color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.65),0 0 6px rgba(0,0,0,.5);white-space:nowrap;will-change:transform,opacity}
.hud-float.xp{color:#ffd84a;font-size:calc(20px * var(--hud-u))}
.hud-float.hurt{color:#ff5a5a;font-size:calc(24px * var(--hud-u))}
.hud-float.heal{color:#7dff8a}
.hud-hp{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:2px;will-change:transform}
.hud-hp .label{font-size:12px;font-weight:800;color:#ffd0c8;text-shadow:0 1px 0 #000}
.hud-hp .label:empty{display:none}
.hud-hp .track{display:block;width:46px;height:6px;border-radius:999px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.35);overflow:hidden}
.hud-hp.boss .track{width:84px;height:8px;border-color:#ffcf6a}
.hud-hp i{display:block;height:100%;background:linear-gradient(90deg,#ff3b3b,#ff8a5a);transition:width .15s}
.hud-move.new .slot{animation:hud-new 1.2s ease-in-out 3}
@keyframes hud-new{50%{box-shadow:0 0 0 3px #fff,0 0 22px var(--mc)}}
#hud-settings-panel .reset{margin-top:16px;width:100%;padding:9px;border-radius:12px;border:2px solid rgba(255,120,120,.6);background:rgba(120,20,20,.35);color:#ffd8d8;font-weight:800;font-size:15px}

/* Co-op seats: join prompt, character picker, knocked-out cards, edge arrows, compact layout */
.hud-seat{display:flex;align-items:flex-end}
.hud-seat .hud-card .ko{display:none;position:absolute;right:-4px;bottom:-4px;font-size:calc(22px * var(--hud-u))}
.hud-seat.knocked .hud-card{filter:grayscale(.85) brightness(.75)}
.hud-seat.knocked .hud-card .ko{display:block;animation:hud-ko-spin 1.2s linear infinite}
@keyframes hud-ko-spin{to{transform:rotate(360deg)}}
.hud-open.join{border-style:solid;border-color:color-mix(in srgb,var(--pc) 70%,transparent);background:rgba(8,14,32,.7);width:calc(92px * var(--hud-u))}
/* A controller is plugged in and not playing yet (or one is expected back after a refresh): pulse. */
.hud-open.join.waiting,.hud-open.join.back{border-color:var(--pc);background:rgba(8,14,32,.78);animation:hud-join 1.4s ease-in-out infinite}
.hud-open.join .pad{width:calc(40px * var(--hud-u));color:var(--pc);display:block}
.hud-open.join .open{display:block!important;text-align:center;font-size:calc(11px * var(--hud-u));line-height:1.5;color:var(--hud-ink)}
.hud-open.join kbd{font-size:10px;height:16px;min-width:20px}
@keyframes hud-join{50%{box-shadow:0 0 0 2px var(--pc),0 0 18px var(--pc)}}
.hud-pick{position:relative;display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto auto;align-items:center;justify-items:center;gap:2px 4px;padding:8px 10px;border-color:var(--pc)!important;animation:hud-toast-in .35s cubic-bezier(.2,1.5,.4,1)}
.hud-pick .tag{position:absolute;top:-8px;left:8px;padding:1px 8px;border-radius:999px;background:var(--pc);border:2px solid #fff;font-weight:800;font-size:calc(14px * var(--hud-u))}
.hud-pick .face{width:calc(88px * var(--hud-u));height:calc(88px * var(--hud-u));border-radius:50%;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--pc) 45%,#fff),var(--pc) 45%,color-mix(in srgb,var(--pc) 45%,#000));border:3px solid var(--pc);overflow:hidden}
.hud-pick .face img{width:100%;height:100%;object-fit:cover;display:block}
.hud-pick .arrow{border:0;background:none;color:var(--hud-gold);font-size:calc(22px * var(--hud-u));padding:0 2px;animation:hud-nudge 1s ease-in-out infinite}
.hud-pick .arrow:last-of-type{animation-direction:reverse}
@keyframes hud-nudge{50%{transform:translateX(-3px)}}
.hud-pick .who{grid-column:1/-1;display:grid;justify-items:center;line-height:1.15}
.hud-pick .who b{font-size:calc(15px * var(--hud-u))}
.hud-pick .who span{font-size:calc(11px * var(--hud-u));color:var(--hud-dim)}
.hud-pick .who em{font-style:normal;font-size:calc(11px * var(--hud-u));color:var(--hud-gold)}
.hud-pick .hint{grid-column:1/-1;font-size:calc(11px * var(--hud-u));color:var(--hud-dim);display:flex;gap:4px;align-items:center}
.hud-pick .hint kbd{font-size:10px;height:16px;min-width:18px}
.hud-edge{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--pc);border:3px solid #fff;display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.45);font-weight:800;font-size:12px;will-change:transform;animation:hud-join 1s ease-in-out infinite}
.hud-edge i{position:absolute;inset:-12px;display:block}
.hud-edge i::after{content:'';position:absolute;right:-2px;top:50%;margin-top:-7px;border:7px solid transparent;border-left:10px solid #fff;border-right:0}
#hud-party.crowded{gap:calc(5px * var(--hud-u))}
#hud-party.crowded .hud-card{gap:calc(6px * var(--hud-u));padding:calc(5px * var(--hud-u)) calc(8px * var(--hud-u)) calc(5px * var(--hud-u)) calc(5px * var(--hud-u))}
#hud-party.crowded .hud-card .avatar{width:calc(58px * var(--hud-u));height:calc(58px * var(--hud-u))}
#hud-party.crowded .hud-card .tag{font-size:calc(12px * var(--hud-u));top:-6px;right:-8px;padding:1px 6px}
#hud-party.crowded .hud-card .level{width:calc(24px * var(--hud-u));height:calc(24px * var(--hud-u));font-size:calc(12px * var(--hud-u))}
#hud-party.crowded .hud-card .hearts svg{width:calc(15px * var(--hud-u));height:calc(15px * var(--hud-u))}
#hud-party.crowded .hud-card .hearts{gap:1px;max-width:calc(100px * var(--hud-u));flex-wrap:wrap}
#hud-party.crowded .hud-card .bar{width:calc(96px * var(--hud-u));height:calc(6px * var(--hud-u))}
#hud-party.crowded .hud-move .slot{width:calc(30px * var(--hud-u));height:calc(30px * var(--hud-u));border-radius:8px}
#hud-party.crowded .hud-move kbd{display:none}
#hud-party.crowded .hud-open{width:calc(48px * var(--hud-u));height:calc(66px * var(--hud-u))}
#hud-party.crowded .hud-open .open{display:none}
#hud-party.crowded .hud-open.join{width:calc(70px * var(--hud-u))}
#hud-party.crowded .hud-open.join .open{display:block!important}
#hud-party.crowded .hud-pick .face{width:calc(60px * var(--hud-u));height:calc(60px * var(--hud-u))}

/* Ghosts, picking up, assists and half hearts */
.hud-card .hearts .half{display:inline-grid}
.hud-card .hearts .half svg{grid-area:1/1}
.hud-card .hearts .half svg:last-child{clip-path:inset(0 50% 0 0)}
.hud-seat.knocked .hud-card{filter:grayscale(.7) brightness(.8) sepia(.2) hue-rotate(160deg)}
.hud-seat.knocked .hud-card .ko{animation:hud-ghost-bob 1.6s ease-in-out infinite}
@keyframes hud-ghost-bob{50%{transform:translateY(-5px) rotate(-8deg)}}
.hud-card .avatar .assist{position:absolute;right:-8px;bottom:-6px;padding:0 6px;border-radius:999px;background:#2fbf71;border:2px solid #fff;font-size:calc(11px * var(--hud-u));font-weight:800;line-height:1.5;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.hud-card .avatar .assist[hidden]{display:none}
.hud-overhead .rv,.hud-overhead .hold{display:none}
.hud-overhead.ghost{display:grid;justify-items:center;gap:2px;padding:2px 8px 4px;background:color-mix(in srgb,var(--pc) 30%,#a8ecff);border-color:#e6fbff;color:#0d2a3a}
.hud-overhead.ghost .who::before{content:'👻 '}
.hud-overhead.ghost .rv{display:block;width:46px;height:6px;border-radius:999px;background:rgba(0,0,0,.4);overflow:hidden}
.hud-overhead.ghost .rv i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fe07a,#d8ffa0)}
.hud-overhead.ghost .hold{display:flex;gap:3px;align-items:center;font-size:11px}
.hud-overhead.ghost .hold kbd{font-size:10px;height:15px;min-width:16px}
.hud-overhead.ghost.helped .hold{display:none}
.hud-overhead.ghost.helped{animation:hud-join .5s ease-in-out infinite}
.hud-pick .assist{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 6px;padding:3px 8px;border-radius:10px;background:rgba(255,255,255,.08);max-width:calc(176px * var(--hud-u))}
.hud-pick .assist kbd{grid-row:span 2;font-size:10px;height:16px;min-width:22px}
.hud-pick .assist b{font-size:calc(13px * var(--hud-u));color:#9fffb8;line-height:1.2}
.hud-pick .assist span{font-size:calc(10px * var(--hud-u));color:var(--hud-dim);line-height:1.2}
#hud-party.crowded .hud-pick .assist span{display:none}
#hud-knockout{background:radial-gradient(circle,rgba(0,20,60,.2),rgba(0,12,40,.68))}
#hud-knockout b{text-shadow:0 3px 0 #0b2a5a,0 0 24px rgba(90,170,255,.7)}
#hud-knockout span{color:#dcecff;max-width:min(520px,90vw);text-align:center}

/* Lands and bosses: danger skulls, "Defeated" badges, the boss's health bar */
#hud-place .danger{display:flex;align-items:center;gap:2px;margin-top:3px;font-size:calc(12px * var(--hud-u));color:var(--hud-dim)}
#hud-place .danger span{margin-right:4px;text-transform:uppercase;letter-spacing:.08em;font-size:calc(10px * var(--hud-u));font-weight:800}
#hud-place .danger i{font-style:normal;opacity:.28;filter:grayscale(1)}
#hud-place .danger i.on{opacity:1;filter:none;color:#ff6a5a;text-shadow:0 0 6px rgba(255,80,60,.6)}
#hud-place .won{position:absolute;right:-14px;top:-10px;padding:2px 10px;border-radius:8px;background:linear-gradient(#5be36f,#1f9a38);border:2px solid #eaffef;color:#fff;font-weight:900;font-size:calc(12px * var(--hud-u));letter-spacing:.08em;text-transform:uppercase;transform:rotate(8deg);box-shadow:0 3px 8px rgba(0,0,0,.45);text-shadow:0 1px 0 rgba(0,0,0,.4)}
#hud-place .won:not([hidden]){animation:hud-stamp .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes hud-stamp{0%{opacity:0;transform:rotate(8deg) scale(2.2)}100%{opacity:1;transform:rotate(8deg) scale(1)}}
#hud-objectives .won{margin:8px 0 2px;padding:3px 10px;border-radius:8px;text-align:center;background:linear-gradient(#5be36f,#1f9a38);color:#fff;font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:calc(13px * var(--hud-u))}
#hud-objectives li.boss:not(.done) span:nth-child(2){color:#ffb4a8;font-weight:800}
#hud-boss{position:absolute;top:calc(var(--hud-gap) + 92px * var(--hud-u));left:0;right:0;margin:0 auto;width:min(500px,calc(100vw - 2 * (270px * var(--hud-u) + 2 * var(--hud-gap))));min-width:220px;display:grid;gap:4px;justify-items:center;pointer-events:none}
#hud-boss.in{animation:hud-toast-in .45s cubic-bezier(.2,1.5,.4,1)}
#hud-boss .who{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 10px;text-align:center}
#hud-boss b{font-size:calc(22px * var(--hud-u));color:#fff;text-shadow:0 2px 0 #5a0b0b,0 0 14px rgba(255,70,50,.6)}
#hud-boss .who span{font-size:calc(13px * var(--hud-u));color:#ffd9cf;font-style:italic}
#hud-boss .track{width:100%;height:calc(16px * var(--hud-u));border-radius:999px;background:rgba(10,4,4,.75);border:2px solid #ffcf6a;box-shadow:0 3px 10px rgba(0,0,0,.5);overflow:hidden}
#hud-boss .track i{display:block;height:100%;background:linear-gradient(180deg,#ff8a5a,#d81e1e);transition:width .2s}
#hud-boss.enraged .track{border-color:#ff5a3a;animation:hud-rage .6s ease-in-out infinite}
#hud-boss .hull{display:flex;align-items:center;gap:8px;font-size:calc(12px * var(--hud-u));font-weight:800;color:#ffe9b8;text-shadow:0 1px 0 #3a2208;letter-spacing:.04em;text-transform:uppercase}
#hud-boss .hull[hidden]{display:none}
#hud-boss .planks{display:flex;gap:3px}
#hud-boss .planks i{width:calc(14px * var(--hud-u));height:calc(10px * var(--hud-u));border-radius:2px;background:#3b2a1e;border:1.5px solid #1e130c;box-shadow:inset 0 -2px 0 rgba(0,0,0,.35)}
#hud-boss .planks i.on{background:linear-gradient(180deg,#d89a52,#9a5a26);border-color:#5a3412}
#hud-boss .hull.hit .planks{animation:hud-rage .35s ease-in-out 2}
#hud-boss.enraged .who span{color:#ff6a4a;font-weight:800;font-style:normal}
@keyframes hud-rage{50%{box-shadow:0 0 0 3px rgba(255,60,30,.5),0 0 22px rgba(255,60,30,.8)}}
#hud.boss-on #hud-toasts{top:calc(var(--hud-gap) + 152px * var(--hud-u))}
#hud.boss-on:has(#hud-boss .hull:not([hidden])) #hud-toasts{top:calc(var(--hud-gap) + 180px * var(--hud-u))}

/* Treasure: the dig meter, the big "treasure!" popup and the treasure book */
.hud-overhead.digging .rv{display:block;width:46px;height:6px;border-radius:999px;background:rgba(0,0,0,.45);overflow:hidden;margin-top:2px}
.hud-overhead.digging .rv i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c58a3c,#ffd76a)}
.hud-overhead.digging{display:grid;justify-items:center;padding-bottom:4px}
#hud-treasure{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;padding:18px 34px 16px;min-width:min(380px,86vw);border-radius:22px;text-align:center;pointer-events:none;
 background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--rc) 40%,#2a1a06),rgba(20,12,4,.94) 70%);border:3px solid var(--rc);box-shadow:0 0 0 3px rgba(0,0,0,.35),0 0 40px color-mix(in srgb,var(--rc) 70%,transparent),0 10px 30px rgba(0,0,0,.5);
 animation:hud-treasure-in .6s cubic-bezier(.2,1.6,.4,1);overflow:hidden}
#hud-treasure .rays{position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rc) 35%,transparent) 0 10deg,transparent 10deg 20deg);animation:hud-rays 6s linear infinite;opacity:.55;z-index:-1}
#hud-treasure .rar{font-size:calc(15px * var(--hud-u));font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--rc);text-shadow:0 2px 0 rgba(0,0,0,.6)}
#hud-treasure b{font-size:calc(34px * var(--hud-u));color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.55),0 0 22px color-mix(in srgb,var(--rc) 80%,transparent)}
#hud-treasure em{font-style:normal;font-weight:800;color:#ffe08a;font-size:calc(16px * var(--hud-u))}
#hud-treasure small{color:var(--hud-dim);font-size:calc(13px * var(--hud-u))}
#hud-treasure.out{opacity:0;transform:translate(-50%,-60%) scale(.9);transition:opacity .45s,transform .45s}
@keyframes hud-treasure-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-6deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes hud-rays{to{transform:rotate(360deg)}}
#hud-settings-panel .change,#hud-settings-panel .book{margin-top:8px;width:100%;padding:9px;border-radius:12px;border:2px solid var(--hud-gold);background:rgba(120,80,10,.35);color:#ffe9b0;font-weight:800;font-size:15px}
#hud-book{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,92vw);max-height:80vh;overflow:auto;padding:16px 20px;box-sizing:border-box;z-index:5}
#hud-book h2{margin:0 0 10px;font-size:22px;display:flex;justify-content:space-between;align-items:baseline}
#hud-book h2 span{font-size:15px;color:var(--hud-gold)}
#hud-book .lands{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
#hud-book section{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06)}
#hud-book h3{margin:0 0 6px;font-size:14px;color:var(--hud-dim)}
#hud-book ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#hud-book li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;font-size:13px}
#hud-book li i{grid-row:span 2;width:14px;height:14px;border-radius:4px;background:var(--rc,#555);box-shadow:0 0 8px var(--rc,transparent)}
#hud-book li span{font-size:11px;color:var(--rc)}
#hud-book li.unknown{opacity:.45}
#hud-book .close{margin-top:12px;width:100%;padding:9px;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:var(--hud-ink);font-weight:800}

/* Juicier numbers: big hits, and the level-up shout */
.hud-float.dmg{font-size:calc(24px * var(--hud-u));color:#fff;-webkit-text-stroke:1.2px #2a1306;paint-order:stroke fill}
.hud-float.dmg.big{font-size:calc(34px * var(--hud-u));color:#ffe14a;text-shadow:0 3px 0 #7a3a00,0 0 14px rgba(255,180,40,.8)}
.hud-float.level{font-size:calc(36px * var(--hud-u));font-weight:900;letter-spacing:.04em;color:#ffe14a;-webkit-text-stroke:2px #6a3a00;paint-order:stroke fill;text-shadow:0 4px 0 #6a3a00,0 0 24px rgba(255,210,60,.9)}
#hud-settings-panel input[type=range]{width:120px;accent-color:var(--hud-gold)}

/* The free trial: the unlock popup, begging emojis and the edition line in Settings */
#hud-unlock{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle,rgba(10,20,40,.35),rgba(5,10,25,.72));z-index:8}
#hud-unlock[hidden]{display:none}
#hud-unlock .card{position:relative;width:min(460px,90vw);padding:22px 26px 18px;display:grid;gap:10px;justify-items:center;text-align:center;border:3px solid var(--hud-gold)!important;box-shadow:0 0 40px rgba(255,200,80,.45),0 14px 40px rgba(0,0,0,.55)}
#hud-unlock.in .card{animation:hud-pop .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes hud-pop{0%{opacity:0;transform:scale(.4) rotate(-4deg)}100%{opacity:1;transform:none}}
#hud-unlock .card.panel{background:linear-gradient(180deg,#1d2a4a,#101833)!important}
#hud-unlock .flag{font-size:42px;line-height:1;animation:hud-ghost-bob 1.6s ease-in-out infinite}
#hud-unlock h2{margin:0;font-size:calc(28px * var(--hud-u));color:#ffe08a;text-shadow:0 3px 0 rgba(0,0,0,.5)}
#hud-unlock .why{margin:0;color:var(--hud-ink);font-size:15px}
#hud-unlock ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:15px;text-align:left}
#hud-unlock li::before{content:'⭐ '}
#hud-unlock .beg{font-weight:800;color:#ff9ad5;font-size:16px}
#hud-unlock .beg.pulse{animation:hud-beg .25s ease-out}
@keyframes hud-beg{40%{transform:scale(1.25)}}
#hud-unlock .buttons{display:flex;gap:10px;margin-top:4px}
#hud-unlock button{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;font-weight:900;font-size:17px;border:2px solid rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.08)}
#hud-unlock button.buy{background:linear-gradient(#5be36f,#1f9a38);border-color:#eaffef;box-shadow:0 4px 0 #136326,0 0 18px rgba(90,230,120,.5);animation:hud-join 1.4s ease-in-out infinite}
#hud-unlock button kbd{font-size:11px;height:18px;min-width:18px}
#hud-unlock .note{color:var(--hud-dim);min-height:1em}
#hud-emojis{position:absolute;inset:0;pointer-events:none;z-index:9;overflow:hidden}
.hud-emoji{position:absolute;font-size:34px;transform:translate(-50%,0);animation:hud-emoji 1.6s cubic-bezier(.2,.8,.3,1) forwards;filter:drop-shadow(0 0 6px var(--pc))}
@keyframes hud-emoji{0%{opacity:0;transform:translate(-50%,10px) scale(.4)}12%{opacity:1;transform:translate(-50%,-20px) scale(1.2)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-260px) scale(1) rotate(var(--rot))}}
#hud-settings-panel .edition{margin-top:12px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06);display:grid;gap:6px;font-size:14px}
#hud-settings-panel .edition span{color:var(--hud-gold);font-weight:800}
#hud-settings-panel .edition .actions{display:flex;flex-wrap:wrap;gap:6px}
#hud-settings-panel .edition button{padding:6px 10px;border-radius:10px;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:var(--hud-ink);font-weight:800;font-size:13px}

/* Level-up celebration (2026-11-14) */
#hud-levelup{position:absolute;inset:0;display:grid;align-content:start;justify-content:center;padding-top:max(14px,9vh);box-sizing:border-box;justify-items:center;gap:calc(10px * var(--hud-u));pointer-events:none;z-index:8;background:radial-gradient(ellipse at 50% 46%,transparent 35%,rgba(12,6,0,.5) 100%);animation:lu-fade .35s ease-out}
#hud-levelup[hidden]{display:none}
#hud-levelup.out{animation:lu-out .6s ease-in forwards}
.lu-skip{font:700 calc(14px * var(--hud-u)) system-ui,sans-serif;color:#fff3cf;background:rgba(20,12,4,.72);border:1px solid rgba(255,215,120,.45);border-radius:999px;padding:6px 16px;letter-spacing:.03em;opacity:0;animation:lu-show .4s ease-out forwards;animation-delay:var(--skip)}
@keyframes lu-show{to{opacity:1}}
.lu-title{font:900 calc(60px * var(--hud-u))/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#ffe27a;-webkit-text-stroke:2px #5a3300;text-shadow:0 4px 0 #8a4b00,0 0 34px rgba(255,190,60,.85);animation:lu-pop .7s cubic-bezier(.2,1.6,.4,1) both}
.lu-cards{display:flex;gap:calc(14px * var(--hud-u));justify-content:center;flex-wrap:wrap;max-width:96vw}
.lu-card{width:calc(244px * var(--hud-u));padding:0 0 calc(12px * var(--hud-u));border-radius:22px;background:linear-gradient(180deg,rgba(62,40,10,.97),rgba(26,16,6,.97));border:3px solid var(--hud-gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 75%,transparent),0 18px 40px rgba(0,0,0,.5),0 0 44px color-mix(in srgb,var(--pc) 50%,transparent);display:grid;justify-items:center;gap:6px;overflow:hidden;animation:lu-card .75s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--d)}
.lu-cards.n4 .lu-card,.lu-cards.n5 .lu-card,.lu-cards.n6 .lu-card{width:calc(196px * var(--hud-u))}
.lu-card.max{border-color:#fff1a8;box-shadow:0 0 0 3px #ffcf4a,0 18px 40px rgba(0,0,0,.5),0 0 60px rgba(255,210,80,.8)}
.lu-hero{--hh:calc(190px * var(--hud-u));position:relative;width:100%;height:var(--hh);display:grid;place-items:end center;overflow:hidden;background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--pc) 45%,#fff3c0) 0,color-mix(in srgb,var(--pc) 35%,transparent) 42%,transparent 72%)}
.lu-rays{position:absolute;inset:-45%;background:repeating-conic-gradient(from 0deg,rgba(255,232,150,.38) 0 7deg,transparent 7deg 18deg);animation:lu-spin 10s linear infinite;-webkit-mask:radial-gradient(circle,#000 22%,transparent 60%);mask:radial-gradient(circle,#000 22%,transparent 60%)}
.lu-hero img{position:relative;height:calc(var(--hh) * 1.12);width:auto;margin-bottom:calc(var(--hh) * -.06);opacity:0;transform:translateY(24px) scale(.85);transition:opacity .35s,transform .7s cubic-bezier(.2,1.6,.4,1);filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.lu-hero img.in{opacity:1;transform:none}
.lu-who{font:800 calc(19px * var(--hud-u))/1.1 system-ui,sans-serif;color:#fff6dc;display:flex;gap:8px;align-items:center;margin-top:4px}
.lu-seat{background:var(--pc);color:#fff;border-radius:999px;padding:2px 9px;font-size:.72em;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.lu-level{font:800 calc(15px * var(--hud-u)) system-ui,sans-serif;color:#ffd77a;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:baseline;gap:8px}
.lu-level b{font-size:2.1em;color:#fff2b0;text-shadow:0 0 16px rgba(255,200,80,.95);display:inline-block;animation:lu-pop .6s cubic-bezier(.2,1.8,.4,1) both;animation-delay:calc(var(--d) + .35s)}
.lu-unlock{width:88%;box-sizing:border-box;display:grid;gap:2px;text-align:center;padding:7px 10px;border-radius:12px;background:rgba(255,215,120,.12);border:1px solid rgba(255,215,120,.4);animation:lu-rise .5s ease-out both;animation-delay:calc(var(--d) + .5s)}
.lu-unlock em{font:900 calc(11px * var(--hud-u)) system-ui,sans-serif;font-style:normal;color:#3a2408;background:linear-gradient(#ffe39a,#f2b84b);border-radius:999px;justify-self:center;padding:2px 10px;letter-spacing:.1em;text-transform:uppercase}
.lu-unlock.new{background:rgba(255,120,60,.2);border-color:#ff9a5a;animation:lu-rise .5s ease-out both,lu-glow 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--d) + .5s),calc(var(--d) + 1s)}
.lu-unlock.new em{background:linear-gradient(#ffb36b,#ff6a3d);color:#fff}
.lu-unlock b{font:800 calc(16px * var(--hud-u)) system-ui,sans-serif;color:#fff2c4}
.lu-unlock span{font-size:calc(12.5px * var(--hud-u));color:#e9dcc0;line-height:1.25}
.lu-stats{list-style:none;margin:0;padding:0 12px;width:100%;box-sizing:border-box;display:grid;gap:4px}
.lu-stats li{display:grid;grid-template-columns:calc(24px * var(--hud-u)) 1fr auto auto auto;align-items:center;gap:6px;font:700 calc(12.5px * var(--hud-u)) system-ui,sans-serif;color:#f3e6c8;opacity:0;animation:lu-rise .4s ease-out forwards;animation-delay:calc(var(--d) + .8s + var(--k) * .28s)}
.lu-stats li svg{width:100%;height:auto;display:block}
.lu-stats .l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lu-stats .f{color:#b9a988}
.lu-stats i{font-style:normal;color:#7fe07a}
.lu-stats .t{color:#9dff8f;font-weight:900}
.lu-stats .t.new{color:#ffb36b}
@keyframes lu-pop{0%{transform:scale(.2);opacity:0}100%{transform:none;opacity:1}}
@keyframes lu-card{0%{transform:translateY(40px) scale(.6) rotate(-4deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes lu-rise{0%{transform:translateY(10px);opacity:0}100%{transform:none;opacity:1}}
@keyframes lu-spin{to{transform:rotate(360deg)}}
@keyframes lu-glow{to{box-shadow:0 0 18px rgba(255,140,60,.75)}}
@keyframes lu-fade{from{opacity:0}}
@keyframes lu-out{to{opacity:0;transform:translateY(-30px)}}
body.lu-on #prompt{visibility:hidden}

/* Treasure map scroll (2026-11-14) */
#hud-map{position:absolute;inset:0;display:grid;place-items:center;pointer-events:auto;z-index:9;background:radial-gradient(ellipse at center,rgba(20,10,0,.25),rgba(10,5,0,.6))}
#hud-map[hidden]{display:none}
#hud-map .scroll{position:relative;display:grid;justify-items:center;padding:0;transform-origin:50% 50%;transform:scaleY(.04);opacity:0;transition:transform .55s cubic-bezier(.2,1.2,.4,1),opacity .2s}
#hud-map.open .scroll{transform:none;opacity:1}
#hud-map.rolled .scroll{transform:scaleY(.04);opacity:0;transition:transform .3s ease-in,opacity .3s .1s}
#hud-map img{width:min(440px,76vmin);height:auto;display:block;border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 0 40px rgba(90,50,10,.5);filter:sepia(.15)}
#hud-map .rod{width:calc(min(440px,76vmin) + 34px);height:18px;border-radius:9px;background:linear-gradient(#8a5a2a,#5a3410 60%,#3a2008);box-shadow:0 4px 8px rgba(0,0,0,.4);margin:-4px 0;position:relative;z-index:1}
#hud-map .note{margin:14px 0 0;font:700 calc(15px * var(--hud-u)) system-ui,sans-serif;color:#ffe9b0;text-shadow:0 2px 0 rgba(0,0,0,.6)}
#hud-mapbtn{position:static;width:100%;margin-top:10px;justify-content:center;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:12px;border:2px solid var(--hud-gold);background:linear-gradient(180deg,rgba(64,40,10,.94),rgba(30,18,6,.94));color:#ffe9b0;font:800 calc(14px * var(--hud-u)) system-ui,sans-serif;cursor:pointer;pointer-events:auto;animation:lu-glow 1.4s ease-in-out infinite alternate}
#hud-mapbtn[hidden]{display:none}
#hud-mapbtn kbd{display:grid;place-items:center;min-width:22px;height:22px;border-radius:6px;background:linear-gradient(#ffe39a,#f2b84b);color:#3a2408;font:800 12px system-ui}
body.map-on #prompt{visibility:hidden}

/* Assists in Settings (2026-11-14) */
#hud-settings-panel .assists h3{margin:10px 0 6px}
#hud-settings-panel .assists .list{display:grid;gap:6px}
#hud-settings-panel .assists button{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'who name lvl' 'note note note';align-items:center;gap:2px 8px;padding:7px 10px;border-radius:12px;border:2px solid color-mix(in srgb,var(--pc) 70%,#000);background:rgba(20,14,6,.6);color:#fff6dc;text-align:left;cursor:pointer;font:700 calc(14px * var(--hud-u)) system-ui,sans-serif}
#hud-settings-panel .assists button:hover{background:rgba(60,40,10,.75)}
#hud-settings-panel .assists .who{grid-area:who;background:var(--pc);color:#fff;border-radius:999px;padding:1px 8px;font-size:.8em}
#hud-settings-panel .assists b{grid-area:name}
#hud-settings-panel .assists .lvl{grid-area:lvl;color:#ffd77a}
#hud-settings-panel .assists .lvl::after{content:' ▸'}
#hud-settings-panel .assists small{grid-area:note;color:#d8c9a6;font-weight:600;font-size:.82em}

/* Join cards: L + R, or SL + SR while Joy-Cons are connected (2026-11-15). */
.hud-open.join .jc{display:none}
#hud[data-join="jc"] .hud-open.join .jc,#hud[data-join="both"] .hud-open.join .jc{display:inline}
#hud[data-join="jc"] .hud-open.join .std{display:none}
#hud[data-join="both"] .hud-open.join .jc::before{content:' or '}
/* Settings: the controller check. */
#hud-settings-panel .padcheck{display:grid;gap:8px;font-size:13px}
#hud-settings-panel .padcheck .none{margin:0;color:var(--hud-dim)}
#hud-settings-panel .pc{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
#hud-settings-panel .pc .top{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
#hud-settings-panel .pc .who{color:var(--hud-dim);white-space:nowrap}
#hud-settings-panel .pc .who.on{color:var(--hud-gold);font-weight:800}
#hud-settings-panel .pc .row{display:flex;gap:10px;align-items:flex-start}
#hud-settings-panel .pc .stick{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);display:grid;place-items:center}
#hud-settings-panel .pc .stick i{width:8px;height:8px;border-radius:50%;background:var(--hud-gold)}
#hud-settings-panel .pc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
#hud-settings-panel .pc li{display:flex;align-items:center;gap:4px;padding:2px 6px 2px 2px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--hud-dim);transition:background .08s}
#hud-settings-panel .pc li kbd{font-size:10px;min-width:18px;height:16px}
#hud-settings-panel .pc li.on{background:#f0b429;color:#2a1a00;font-weight:800;box-shadow:0 0 0 2px #ffe2a0}
/* The Map button by the minimap and the big world map (world-map.js, 2026-11-15). */
#hud-worldbtn{position:absolute;left:calc(-6px * var(--hud-u));top:calc(-4px * var(--hud-u));z-index:2;pointer-events:auto;display:flex;align-items:center;gap:5px;padding:4px 8px 4px 10px;border-radius:999px;font:800 calc(13px * var(--hud-u)) var(--hud-font);color:var(--hud-ink);background:radial-gradient(circle at 35% 30%,#3a5a9c,#14234a 70%);border:2px solid var(--hud-gold);box-shadow:0 2px 6px rgba(0,0,0,.45);cursor:pointer}
#hud-worldbtn kbd{font-size:10px;height:16px;min-width:16px}
#hud-worldmap{position:absolute;inset:0;z-index:7;pointer-events:auto;background:radial-gradient(ellipse at 38% 50%,rgba(8,24,58,.86),rgba(2,6,18,.95) 70%);touch-action:none;--wm-size:min(86vh,calc(100vw - 440px));--wm-x:calc((100vw - 380px) / 2)}
#hud.bigmap #hud-minimap{position:fixed;z-index:8;display:block!important;left:var(--wm-x);top:50%;right:auto;bottom:auto;width:var(--wm-size);height:var(--wm-size);transform:translate(-50%,-50%);pointer-events:auto;touch-action:none;cursor:grab}
#hud.bigmap{--wm-size:min(86vh,calc(100vw - 440px));--wm-x:calc((100vw - 380px) / 2)}
#hud.bigmap #hud-minimap .zoom,#hud.bigmap #hud-worldbtn{display:none}
#hud.bigmap #hud-minimap .globe{box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 60px rgba(80,170,255,.45)}
#hud-worldmap .wm-side{position:absolute;right:16px;top:16px;bottom:16px;width:340px;display:flex;flex-direction:column;padding:16px 16px 12px;box-sizing:border-box}
#hud-worldmap h2{margin:0;font-size:22px;color:var(--hud-gold)}
#hud-worldmap .wm-sum{margin:4px 0 10px;font-size:13px;color:var(--hud-dim)}
#hud-worldmap .wm-lands{list-style:none;margin:0;padding:0 4px 0 0;overflow:auto;flex:1;display:grid;gap:5px;align-content:start}
#hud-worldmap .wm-lands button{width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 8px;text-align:left;padding:7px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:var(--hud-ink);font:inherit;cursor:pointer}
#hud-worldmap .wm-lands button:hover{background:rgba(255,255,255,.1)}
#hud-worldmap .wm-lands .nm{font-weight:800;font-size:14px}
#hud-worldmap .wm-lands .nm em{font-style:normal;font-size:11px;color:#9dffc9;margin-left:4px}
#hud-worldmap .wm-lands .todo{grid-column:1 / -1;font-size:12px;color:var(--hud-dim)}
#hud-worldmap .wm-lands li.beaten button{border-color:rgba(240,180,41,.5);background:rgba(240,180,41,.1)}
#hud-worldmap .wm-lands li.beaten .todo{color:var(--hud-gold)}
#hud-worldmap .wm-lands li.here button{box-shadow:inset 3px 0 0 #9dffc9}
#hud-worldmap .wm-lands li.unseen .nm{color:var(--hud-dim)}
#hud-worldmap .dg{white-space:nowrap;font-size:11px;color:var(--hud-dim)}
#hud-worldmap .dg i,.wm-label .dg i{font-style:normal;opacity:.28}
#hud-worldmap .dg i.on,.wm-label .dg i.on{opacity:1;color:#ff8a6a}
#hud-worldmap .dg b{margin-left:4px;color:var(--hud-ink)}
#hud-worldmap .wm-actions{display:flex;gap:8px;margin-top:10px}
#hud-worldmap .wm-actions button{flex:1;padding:9px 10px;border-radius:12px;font:800 14px var(--hud-font);cursor:pointer;color:#2a1a00;background:linear-gradient(#ffd877,#e8a83a);border:2px solid #ffe2a0}
#hud-worldmap .wm-actions .tmap{color:var(--hud-ink);background:radial-gradient(circle at 35% 30%,#3a5a9c,#14234a 70%);border-color:var(--hud-gold)}
#hud-worldmap .wm-help{margin:8px 0 0;font-size:11px;color:var(--hud-dim);text-align:center}
#hud-worldmap .wm-legend{position:absolute;left:var(--wm-x);bottom:12px;transform:translateX(-50%);display:flex;gap:14px;font-size:12px;color:var(--hud-dim);white-space:nowrap}
#hud-worldmap .wm-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
#hud-worldmap .wm-legend .you{background:var(--hud-gold)}#hud-worldmap .wm-legend .flag{background:#1d1b22;box-shadow:0 0 0 2px #f0b429}
#hud-worldmap .wm-legend .dig{border:2px dashed #ff5a4a;width:8px;height:8px}#hud-worldmap .wm-legend .fog{background:#2a3040}
.wm-labels{position:absolute;inset:6px;pointer-events:none}
.wm-labels[hidden]{display:none}
.wm-label{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:10px;translate:-50% 0;padding:2px 7px 3px;border-radius:8px;background:rgba(6,12,30,.72);border:1px solid rgba(255,255,255,.18);white-space:nowrap;font-size:12px;line-height:1.15;color:#fff;text-shadow:0 1px 2px #000}
.wm-label b{font-weight:800}
.wm-label .dg{font-size:10px;color:#ffd2c4}
.wm-label.island{font-size:11px}
.wm-label.beaten{border-color:#f0b429;color:#ffe2a0}
.wm-label.here{border-color:#9dffc9;box-shadow:0 0 0 1px #9dffc9}
.wm-label.unseen{opacity:.75}
@media (max-width:900px){#hud-worldmap,#hud.bigmap{--wm-size:min(80vh,92vw);--wm-x:50vw}#hud-worldmap .wm-side{top:auto;left:16px;right:16px;width:auto;height:min(30vh,240px);bottom:10px}#hud-worldmap .wm-legend{display:none}#hud.bigmap #hud-minimap{top:calc(50% - 15vh)}}

/* Level-up cards: each new weapon or upgrade shows the weapon itself, big (2026-11-15). */
.lu-unlock.has-pic{padding-top:4px}
.lu-pic{position:relative;justify-self:center;width:calc(140px * var(--hud-u));height:calc(140px * var(--hud-u));display:grid;place-items:center;margin-bottom:2px}
.lu-cards.n3 .lu-pic,.lu-cards.n4 .lu-pic,.lu-cards.n5 .lu-pic,.lu-cards.n6 .lu-pic{width:calc(104px * var(--hud-u));height:calc(104px * var(--hud-u))}
.lu-burst{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--wc) 70%,#fff) 0,color-mix(in srgb,var(--wc) 45%,transparent) 38%,transparent 70%),repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--wc) 40%,transparent) 0 9deg,transparent 9deg 22deg);-webkit-mask:radial-gradient(circle,#000 35%,transparent 70%);mask:radial-gradient(circle,#000 35%,transparent 70%);animation:lu-spin 9s linear infinite}
.lu-pic img{position:relative;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.4) rotate(-25deg);transition:opacity .3s,transform .8s cubic-bezier(.2,1.7,.4,1);filter:drop-shadow(0 6px 8px rgba(0,0,0,.55)) drop-shadow(0 0 10px color-mix(in srgb,var(--wc) 70%,transparent))}
.lu-pic img.in{opacity:1;transform:none;animation:lu-bob 2.4s ease-in-out .9s infinite}
.lu-pic svg{position:relative;width:62%;height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));animation:lu-pop .6s cubic-bezier(.2,1.8,.4,1) both;animation-delay:calc(var(--d) + .55s)}
.lu-unlock small{font:800 calc(12px * var(--hud-u)) system-ui,sans-serif;color:var(--wc);letter-spacing:.04em}
@keyframes lu-bob{50%{transform:translateY(-5px) rotate(3deg)}}
/* Treasure finds: the open chest and its treasure, big, over the rays. */
#hud-treasure .pic{position:relative;width:calc(210px * var(--hud-u));height:calc(210px * var(--hud-u));margin:-6px 0 -4px}
#hud-treasure .pic::before{content:'';position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 75%,#fff) 0,color-mix(in srgb,var(--rc) 40%,transparent) 40%,transparent 70%)}
#hud-treasure .pic img{position:relative;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(30px) scale(.6);transition:opacity .35s,transform .8s cubic-bezier(.2,1.6,.4,1);filter:drop-shadow(0 10px 12px rgba(0,0,0,.6))}
#hud-treasure .pic img.in{opacity:1;transform:none}
/* Several unlocks at once (a big jump in levels): side by side in a wider card, so it fits. */
.lu-unlocks{width:88%;display:grid;gap:calc(6px * var(--hud-u))}
.lu-unlocks .lu-unlock{width:100%}
.lu-card.multi{width:min(94vw,calc((172px * var(--n) + 30px) * var(--hud-u)))}
.lu-card.multi .lu-unlocks{width:94%;grid-template-columns:repeat(var(--n),1fr)}
.lu-card.multi .lu-hero{--hh:calc(150px * var(--hud-u))}
.lu-card.multi .lu-pic{width:calc(104px * var(--hud-u));height:calc(104px * var(--hud-u))}
.lu-card.multi .lu-unlock span{font-size:calc(11.5px * var(--hud-u))}
#hud-treasure{z-index:8}