/* In-world HUD. Everything is nested under #game, so it cannot leak into the menu screens (css/theme.css). */
#game {
  /* undo the menu theme's .frame (css/theme.css) inside the HUD */
  .frame { position: static; border: 0; }
  .frame::before, .frame::after { content: none; }
  /* HUD: classic MMORPG layout (unit frames top-left, round minimap top-right, long action bar bottom-centre,
     chat bottom-left, bags bottom-right) drawn in the Keepers' own style: aged bronze, green enamel, sun motif. */
  & {
    --panel: rgba(14, 16, 22, .78);
    --edge: rgba(214, 178, 110, .55);
    --gold: #e9c873;
    --text: #f1ead9;
    --dim: #b9b3a2;
    --hp: linear-gradient(#7be26c, #2f9a3a 55%, #1f6f2a);
    --mana: linear-gradient(#6fb6ff, #2f6fe0 55%, #1f48a6);
    --rare: #4a9eff;
    --bronze: linear-gradient(#f6dc94, #c79b47 30%, #6b5122 62%, #a9813a);
    --slot: 42px;
    --ts: 0 1px 2px #000, 0 0 3px rgba(0,0,0,.9);
  }
  * { box-sizing: border-box; }
  & { color: var(--text);
    font: 13px/1.35 "Segoe UI", system-ui, sans-serif; user-select: none; }
  & canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
  .serif { font-family: "Palatino Linotype", Palatino, Georgia, serif; }
  .hud { position: fixed; }
  .panel { position: fixed; background: var(--panel); border: 1px solid var(--edge); border-radius: 5px;
    box-shadow: 0 2px 14px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.6); }
  /* bronze frame: a gradient ring around a dark inset */
  .frame { background: var(--bronze); padding: 2px; border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.65), 0 0 0 1px #1a1206; }
  .frame > .in { background: linear-gradient(#20232c, #12141a); border-radius: 4px; box-shadow: inset 0 0 0 1px #000; }

  /* unit frames */
  .unit { display: flex; align-items: center; top: 14px; height: 70px; }
  #playerFrame { left: 14px; }
  #targetFrame { left: 262px; display: none; flex-direction: row-reverse; }
  .portrait { width: 66px; height: 66px; border-radius: 50%; flex: none; position: relative; z-index: 1;
    padding: 4px; background: var(--bronze); box-shadow: 0 2px 8px rgba(0,0,0,.7), 0 0 0 1px #1a1206; }
  .portrait > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font-size: 30px;
    background: radial-gradient(circle at 35% 30%, #86a063, #2c3a22); box-shadow: inset 0 0 0 2px #0b0d12, inset 0 0 12px #000; }
  #targetFrame .portrait > span { background: radial-gradient(circle at 35% 30%, #63bfd0, #1c3340); }
  #targetFrame .portrait { background: linear-gradient(#f0a48e, #b5553f 35%, #5c2318 65%, #a34a36); }
  .lvl { position: absolute; left: -2px; bottom: -3px; min-width: 23px; height: 23px; border-radius: 50%;
    background: radial-gradient(#2a2d38, #0e1016); border: 2px solid #c79b47; font-size: 11px; line-height: 19px;
    text-align: center; color: var(--gold); font-weight: 600; }
  #targetFrame .lvl { left: auto; right: -2px; }
  .unit .info { margin-left: -14px; width: 176px; }
  #targetFrame .info { margin-left: 0; margin-right: -14px; }
  .unit .info .in { padding: 4px 6px 5px 18px; }
  #targetFrame .info .in { padding: 4px 18px 5px 6px; }
  .unit .name { font-size: 13.5px; letter-spacing: .3px; text-align: center; text-shadow: var(--ts); margin-bottom: 2px; }
  #targetFrame .name { color: #ff9d8c; }
  .bar { height: 13px; background: #07080b; border-radius: 2px; overflow: hidden; margin-top: 2px;
    position: relative; box-shadow: inset 0 0 0 1px #000; }
  .bar > i { display: block; height: 100%; width: 100%; transition: width .25s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.35); }
  .bar.hp > i { background: var(--hp); } .bar.mana > i { background: var(--mana); }
  .bar.enemy > i { background: linear-gradient(#f0766a, #b3352b 55%, #7c1d17); }
  .bar > span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 13px; text-shadow: var(--ts); }

  /* minimap */
  #mapWrap { right: 14px; top: 10px; width: 168px; text-align: center; }
  #zoneName { display: block; margin: 0 6px -9px; position: relative; z-index: 2; }
  #zoneName .in { padding: 1px 6px 2px; color: var(--gold); font-size: 13px; text-shadow: var(--ts); }
  #mapRing { width: 162px; height: 162px; border-radius: 50%; padding: 5px; margin: 0 auto; position: relative;
    background: var(--bronze); box-shadow: 0 3px 12px rgba(0,0,0,.7), 0 0 0 1px #1a1206; }
  #mapClip { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative;
    box-shadow: inset 0 0 0 2px #0b0d12, inset 0 0 18px rgba(0,0,0,.8); }
  #mapClip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 22px rgba(0,0,0,.75); }
  #minimap { width: 100%; height: 100%; display: block; }
  #mapDot { position: absolute; width: 0; height: 0; border: 5px solid transparent; border-bottom: 11px solid #fff;
    margin: -11px 0 0 -5px; filter: drop-shadow(0 0 2px #000); transform-origin: 50% 70%; z-index: 1; }
  #mapN { position: absolute; left: 50%; top: -3px; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%;
    background: radial-gradient(#2a2d38, #0e1016); border: 1px solid #c79b47; color: var(--gold); font-size: 10px; line-height: 16px; }
  #clock { padding: 0 9px 1px; font-size: 11px; color: var(--text); border-radius: 9px; }
  #clockWrap { border-radius: 11px; display: inline-block; margin-top: -10px; position: relative; z-index: 2; }

  /* quest tracker: plain text over the world */
  #quests { right: 18px; top: 226px; width: 210px; text-shadow: 0 1px 1px #000, 0 0 2px #000, 0 0 5px #000, 0 0 9px rgba(0,0,0,.8); }
  #quests h4 { margin: 0; color: #ffd45e; font-weight: normal; font-size: 14px; }
  #quests p { margin: 0 0 0 10px; color: var(--text); font-size: 12.5px; } #quests p::before { content: "– "; }
  #quests p.done { color: #7fe07a; }
  #quests h4:not(:first-child) { margin-top: 7px; }

  /* action bar */
  #barWrap { left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: flex-end; }
  #barMid { margin: 0 -10px; }
  #bar { display: flex; gap: 4px; padding: 5px 16px; }
  .cap { width: 54px; height: 54px; border-radius: 50%; flex: none; position: relative; z-index: 1; padding: 4px;
    background: var(--bronze); box-shadow: 0 2px 8px rgba(0,0,0,.7), 0 0 0 1px #1a1206; }
  .cap::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, #e9c873 0 11.25deg, #6b5122 11.25deg 22.5deg);
    box-shadow: inset 0 0 0 2px #1a1206; }
  .cap::after { content: ""; position: absolute; inset: 15px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #8fe0ae, #2f6b45 55%, #123a24); box-shadow: 0 0 0 2px #1a1206, 0 0 0 4px #c79b47, 0 0 0 5px #1a1206; }
  .slot { width: var(--slot); height: var(--slot); border-radius: 4px; position: relative; flex: none;
    background: linear-gradient(#1c1f28, #0d0f14); display: grid; place-items: center; font-size: 21px;
    box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(201,155,71,.35), inset 0 0 8px #000; }
  .slot.fire { background: radial-gradient(circle at 50% 60%, #ffb24a, #a8320c 70%, #3a0f06); }
  .slot.stone { background: radial-gradient(circle at 50% 40%, #b7b0a2, #5d574e 70%, #2a2622); }
  .slot.dig { background: radial-gradient(circle at 50% 40%, #a6855a, #5b4026 70%, #24170c); }
  .slot.build { background: radial-gradient(circle at 50% 40%, #8fc0d8, #3a6a86 70%, #14242e); }
  .slot.active { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px var(--gold), 0 0 10px rgba(233,200,115,.85); }
  .slot kbd { position: absolute; right: 3px; top: 1px; font: 10px "Segoe UI", sans-serif; color: #e8e2d2; text-shadow: var(--ts); }
  .slot .cd { position: absolute; inset: 1px; pointer-events: none; border-radius: 3px; }
  .slot b { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 3px 8px;
    font: 12px "Segoe UI", sans-serif; color: var(--text); white-space: nowrap; background: var(--panel);
    border: 1px solid var(--edge); border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .15s; }
  .slot:hover b { opacity: 1; }
  #xp { height: 9px; margin: 0 14px 3px; background: #07080b; border-radius: 2px; position: relative; overflow: hidden;
    box-shadow: inset 0 0 0 1px #000; }
  #xp > i { display: block; width: 37%; height: 100%; background: linear-gradient(#c58cff, #7a3fd0 60%, #4f2596); }
  #xp::after { content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), rgba(0,0,0,.75) calc(5% - 1px) 5%); }

  /* micro menu and bags */
  #corner { right: 12px; bottom: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
  #bags, #micro { display: flex; gap: 3px; padding: 4px; }
  #bags .slot { --slot: 34px; font-size: 17px; }
  #micro span { width: 24px; height: 28px; border-radius: 3px; display: grid; place-items: center; font-size: 13px;
    background: linear-gradient(#2a2d38, #12141a); box-shadow: inset 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.12); color: var(--gold); }

  /* chat: text over the world, a faint backdrop only */
  #chat { left: 12px; bottom: 12px; width: 330px; font-size: 12.5px; }
  #chatTabs { display: flex; gap: 3px; margin-left: 6px; }
  #chatTabs span { padding: 1px 10px 2px; font-size: 11px; border-radius: 4px 4px 0 0; background: rgba(14,16,22,.55);
    color: var(--dim); border: 1px solid rgba(214,178,110,.25); border-bottom: 0; }
  #chatTabs span.on { color: var(--gold); background: rgba(14,16,22,.8); border-color: var(--edge); }
  #chatLog { padding: 6px 8px; background: linear-gradient(rgba(8,10,14,.42), rgba(8,10,14,.2)); border-radius: 4px; }
  #chatLog p { margin: 1px 0; text-shadow: var(--ts); }
  #chatIn { display: block; width: 100%; margin-top: 3px; padding: 3px 8px; font: 12px "Segoe UI", system-ui, sans-serif; color: var(--text); outline: none; user-select: text; background: rgba(8,10,14,.7);
    border: 1px solid rgba(214,178,110,.35); border-radius: 3px; }
  .c-say { color: #f1ead9; } .c-guild { color: #5fe86f; } .c-trade { color: #ffb86b; } .c-sys { color: #ffe45e; }
  .c-whisper { color: #f08bea; }

  /* help */
  #help { right: 12px; bottom: 100px; width: 250px; padding: 8px 11px; color: var(--dim); font-size: 12px; }
  #help.hide { display: none; }
  #help b { color: var(--text); font-weight: 600; }
  #help p { margin: 2px 0; }

  /* overlays */
  #banner { position: fixed; left: 0; right: 0; top: 17%; text-align: center; pointer-events: none;
    opacity: 0; transition: opacity 1.6s; text-shadow: 0 2px 12px #000, 0 0 2px #000; }
  #banner.show { opacity: 1; }
  #banner h1 { margin: 0; font-size: 46px; font-weight: normal; color: var(--gold); letter-spacing: 2px; }
  #banner p { margin: 4px 0 0; font-size: 16px; color: var(--text); letter-spacing: 1px; }
  #plate { position: fixed; transform: translate(-50%, -100%); pointer-events: none; text-align: center;
    text-shadow: var(--ts); color: #ff9d8c; font-size: 14px; display: none; }
  #plate .bar { width: 96px; height: 8px; margin: 2px auto 0; }
  .nameplate { position: fixed; transform: translate(-50%, -100%); pointer-events: none; text-align: center; display: none;
    color: #57e85c; font-size: 14px; text-shadow: var(--ts); white-space: nowrap; }
  .nameplate i { display: block; font: 700 34px/1 Georgia, serif; color: #ffd21f; text-shadow: 0 0 2px #5a3a00, 0 2px 3px #000, 0 0 10px rgba(255,200,40,.6); }
  .dmg { position: fixed; transform: translate(-50%, -50%); pointer-events: none; font-size: 24px; font-weight: 700;
    color: #ffd35a; text-shadow: 0 2px 4px #000, 0 0 2px #000; transition: margin-top 1s ease-out, opacity 1s ease-in; }
  #toast { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); padding: 9px 16px;
    opacity: 0; transition: opacity .5s; pointer-events: none; text-align: center; }
  #toast.show { opacity: 1; }
  #toast .item { color: var(--rare); font-size: 15px; } #toast small { color: var(--dim); }
  #loading { position: fixed; inset: 0; background: #0b0d12; display: grid; place-items: center; z-index: 9;
    transition: opacity .8s; font-size: 20px; color: var(--gold); }

  @media (max-width: 1500px) { #chat { width: 290px; } }
  @media (max-width: 1320px) { #chat, #corner { bottom: 92px; } #help { bottom: 184px; } }
  @media (max-width: 1000px) { & { --slot: 34px; } .cap { width: 44px; height: 44px; } .cap::after { inset: 12px; }
    #chat, #corner { bottom: 76px; } #help { display: none; } }
  @media (max-width: 760px) { #quests, #chat, #bags { display: none; } & { --slot: 26px; } }

  #chatIn::placeholder { color: var(--dim); }
  #chatIn:focus { border-color: var(--gold); background: rgba(8,10,14,.9); }
  #money { padding: 3px 9px; font-size: 12px; color: var(--gold); white-space: nowrap; }
  #money:empty { display: none; }
  #micro span.act { cursor: pointer; }
  #micro span.act:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--gold); }
  .nameplate.foe { color: #ff6a5a; }
}