/* hud.css — Anzeigen, die über der Szene schweben: Fähigkeitsleiste und Auftrags-Tracker.
   (Bis 16.10.2026 baute app.js diese Regeln als <style> per JavaScript ein.) */

/* ── Fähigkeitsleiste (widgets/buffBar.js, Umbau 20.10.2026) ──
   Große Knöpfe wie in Action-RPGs: Bild, Abklingzeit-Zeiger im Kreis (--p = Anteil, der
   noch fehlt; gleitet per Übergang über die Sekunde), Restzeit, leuchtender Rand wenn
   bereit, grüner Ring solange eine Verstärkung wirkt, Aufblitzen beim Zünden. */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
#buffbar {
    position: fixed; left: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 8;
    display: flex; gap: 10px;
}
#buffbar .sk {
    --c: 90, 200, 255;
    position: relative; width: 56px; height: 56px; padding: 0; border-radius: 12px; cursor: pointer;
    background: radial-gradient(circle at 50% 40%, rgba(var(--c), .18), rgba(10, 12, 20, .92) 70%);
    border: 2px solid rgba(var(--c), .55);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
    overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .1s;
}
#buffbar .sk[data-look="orange"] { --c: 255, 150, 60; }
#buffbar .sk[data-look="red"]    { --c: 255, 80, 80; }
#buffbar .sk[data-look="cyan"]   { --c: 80, 240, 230; }
#buffbar .sk:active { transform: scale(.94); }
#buffbar .sk:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#buffbar .sk-img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px);
    object-fit: contain; image-rendering: pixelated; pointer-events: none; }
#buffbar .sk-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: rgb(var(--c)); text-shadow: 0 0 6px rgba(var(--c), .6); pointer-events: none; }
/* Abklingzeit: dunkler Kreissektor, der im Uhrzeigersinn abläuft. */
#buffbar .sk-cd { position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: conic-gradient(rgba(5, 6, 12, .78) calc(var(--p) * 360deg), transparent 0);
    transition: --p 1s linear; }
#buffbar .sk.cd .sk-cd { opacity: 1; }
#buffbar .sk.cd { border-color: rgba(var(--c), .25); }
#buffbar .sk-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font: 800 20px/1 ui-monospace, Menlo, Consolas, monospace; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000;
    pointer-events: none; }
#buffbar .sk-e { position: absolute; right: 3px; bottom: 1px; font-size: 14px; display: none; pointer-events: none; }
#buffbar .sk.nrg { filter: saturate(.4) brightness(.75); }
#buffbar .sk.nrg .sk-e { display: block; }
/* Bereit: Rand leuchtet sanft in der Farbe der Fähigkeit. */
#buffbar .sk.ready { border-color: rgba(var(--c), .95);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .55), 0 0 10px rgba(var(--c), .55); }
/* Leistung (23.10.2026): statt des pulsierenden Außenschattens (jedes Bild neu gemalt)
   pulsiert ein innerer Schein nur in der Deckkraft — das macht die Grafikkarte allein. */
#buffbar .sk.ready:not(.on)::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 14px rgba(var(--c), .9); opacity: .2; animation: skPulse 1.6s ease-in-out infinite; }
@keyframes skPulse { 50% { opacity: 1; } }
@keyframes skReady {
    0%, 100% { box-shadow: 0 3px 10px rgba(0, 0, 0, .55), 0 0 6px rgba(var(--c), .35); }
    50%      { box-shadow: 0 3px 10px rgba(0, 0, 0, .55), 0 0 16px rgba(var(--c), .8); }
}
/* Wirkt: grüner Ring, der mit der Restzeit abläuft. */
#buffbar .sk.on { border-color: #5fe08a; box-shadow: 0 0 14px rgba(95, 224, 138, .7); }
#buffbar .sk.on::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: conic-gradient(transparent calc(var(--p) * 360deg), rgba(95, 224, 138, .28) 0);
    transition: --p 1s linear; }
#buffbar .sk.on .sk-n { color: #c8ffd9; }
/* Ausgebaute Fähigkeit (z. B. Doppelgewitter): goldener Rand, warmer Schein und ein
   Glanzstreifen, der alle paar Sekunden darüberläuft — man soll sehen, dass sie besonders
   ist (Jens 21.10.2026). Steht NACH den Zustands-Regeln, damit Gold auch beim Laden bleibt. */
#buffbar .sk.gold { border: 3px solid #ffcf4a;
    background: radial-gradient(circle at 50% 40%, rgba(255, 196, 64, .26), rgba(22, 16, 8, .94) 72%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .55), 0 0 12px rgba(255, 196, 64, .6), inset 0 0 0 1px rgba(255, 244, 190, .55);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .55), 0 0 16px rgba(255, 205, 80, .75), inset 0 0 0 1px rgba(255, 244, 190, .65); }
#buffbar .sk.gold.cd { border-color: #c9a03a; }
#buffbar .sk.gold.ready { border-color: #ffe07a; }
@keyframes skGold {
    0%, 100% { box-shadow: 0 3px 10px rgba(0, 0, 0, .55), 0 0 8px rgba(255, 196, 64, .45), inset 0 0 0 1px rgba(255, 244, 190, .5); }
    50%      { box-shadow: 0 3px 10px rgba(0, 0, 0, .55), 0 0 22px rgba(255, 210, 90, .95), inset 0 0 0 1px rgba(255, 244, 190, .8); }
}
/* Glanzstreifen: schräger heller Lichtstreif, läuft alle ~3 s einmal über das Feld. */
#buffbar .sk.gold::before { content: ''; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 45%;
    z-index: 2; pointer-events: none; transform: skewX(-22deg); mix-blend-mode: screen;
    background: linear-gradient(90deg, rgba(255, 236, 170, 0), rgba(255, 250, 225, .95) 50%, rgba(255, 236, 170, 0));
    animation: skShine 3s ease-in-out infinite; }
/* Über transform statt `left` (23.10.2026): `left` zwingt jedes Bild zu neuem Layout.
   Weg: 210 % der Feldbreite = 467 % der Streifenbreite (45 %). */
@keyframes skShine { 0%, 55% { transform: translateX(0) skewX(-22deg); } 100% { transform: translateX(467%) skewX(-22deg); } }
@media (prefers-reduced-motion: reduce) {
    #buffbar .sk.gold { animation: none; }
    #buffbar .sk.gold::before { display: none; }
}
#skilltip .boost { color: #ffd95e; margin-top: 4px; }
/* Zünden: kurzes Aufblitzen. */
#buffbar .sk.fire::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    width: auto;   /* Gold-Glanzstreifen (::before) hat eine feste Breite — beim Zünden ganze Fläche */
    background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(var(--c), .5) 45%, transparent 75%);
    animation: skFire .6s ease-out forwards; }
@keyframes skFire { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) {
    #buffbar .sk.ready::after { animation: none; }
    #buffbar .sk.fire::before { animation-duration: .01s; }
}
@media (max-width: 700px), (max-height: 500px) {
    #buffbar { gap: 8px; }
    #buffbar .sk { width: 48px; height: 48px; }
    #buffbar .sk-glyph { font-size: 24px; }
    #buffbar .sk-n { font-size: 17px; }
}
/* Info beim Antippen */
#skilltip { position: fixed; z-index: 30; max-width: min(300px, 80vw); padding: 10px 12px; border-radius: 10px;
    background: rgba(10, 12, 20, .95); border: 1px solid rgba(120, 180, 255, .35); color: #dde6f3;
    font-size: 13px; line-height: 1.4; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); pointer-events: auto; }
#skilltip[hidden] { display: none; }
#skilltip b { display: block; font-size: 15px; color: #fff; margin-bottom: 4px; }
#skilltip .st { margin-top: 6px; font-weight: 700; color: #9fd0ff; }
#skilltip .st.ready { color: #8fe3a0; }
#skilltip .st.on { color: #7bf0a4; }
#skilltip .st.nrg { color: #ffd873; }
#skilltip .meta { margin-top: 4px; color: #8b95a6; font-size: 12px; }

/* ── Auftrags-Tracker (widgets/orderTrack.js) ── */
#ordertrack {
    position: fixed; right: 10px; z-index: 7; width: min(240px, 46vw);
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto; overscroll-behavior: contain;   /* Höhe setzt orderTrack.js (bis zur unteren Leiste) */
}
#ordertrack .ot-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
    background: rgba(12, 16, 24, .9); border: 1px solid #3a4655; border-radius: 10px; padding: 7px 11px;
    font-size: 12.5px; font-weight: 800; color: #dfe8f2; box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    -webkit-tap-highlight-color: transparent;
}
#ordertrack .ot-head .ot-cnt { color: #9fb0c4; font-weight: 700; }
#ordertrack .ot-head .ot-rdy { color: #8fe3a0; }
#ordertrack .ot-head .ot-chev { transition: transform .15s; opacity: .8; }
#ordertrack.closed .ot-head .ot-chev { transform: rotate(-90deg); }
#ordertrack .ot-row {
    background: rgba(12, 16, 24, .82); border: 1px solid #33404e; border-radius: 10px; padding: 7px 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
#ordertrack .ot-row.rdy { border-color: #5fe08a; box-shadow: 0 0 10px rgba(95, 224, 138, .4); }
#ordertrack .ot-mat { font-size: 12.5px; font-weight: 700; color: #eef3f8; display: flex; justify-content: space-between; gap: 6px; }
#ordertrack .ot-mat b { color: #e0735a; }
#ordertrack .ot-row.rdy .ot-mat b { color: #8fe3a0; }
#ordertrack .ot-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); margin-top: 5px; overflow: hidden; }
#ordertrack .ot-bar > i { display: block; height: 100%; border-radius: 3px; background: #e0735a; }
#ordertrack .ot-row.rdy .ot-bar > i { background: #5fe08a; }
#ordertrack .ot-src { font-size: 11px; color: #8aa0b8; margin-top: 4px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ordertrack .ot-nums { font-size: 11px; color: #b7c4d2; margin-top: 3px; }
#ordertrack .ot-n { font-style: normal; color: #8aa0b8; font-weight: 700; }
#ordertrack .ot-give {
    margin-top: 6px; width: 100%; font-size: 12px; font-weight: 800; padding: 5px 0; border-radius: 7px;
    border: 1px solid #5fe08a; background: rgba(95, 224, 138, .15); color: #bff0cf; cursor: pointer;
    touch-action: manipulation;
}
#ordertrack .ot-give.busy { cursor: progress; animation: btn-busy .8s ease-in-out infinite alternate; }
#ordertrack .ot-row[data-item] { cursor: pointer; }
#ordertrack .ot-row[data-item]:hover { border-color: rgba(57,215,255,.55); }
#ordertrack .ot-warn {
    background: rgba(224, 115, 90, .16); border: 1px solid #e0735a; border-radius: 10px; padding: 6px 10px;
    font-size: 11.5px; font-weight: 800; color: #ffb59e; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); line-height: 1.3;
}