/* ==========================================================
   Pokémon Dungeon — ENHANCED STYLES
   Backward-compatible with pokemon_game.html.
   Adds: modal polish, HP bars, animated HUD,
   mobile layout fixes, hover/active juice, new modal styles.
   ========================================================== */

:root {
    --ui-bg: #0a0a0a;
    --ui-fg: #ffcb05;
    --ui-border: #d3a800;
    --ui-border-hl: #ffd93d;
    --danger: #ff4d4d;
    --good: #4ade80;
    --warn: #fbbf24;
    --info: #60a5fa;
    --shiny: #ffe66b;
    --panel: rgba(10, 10, 10, 0.92);
    --panel-bg: rgba(20, 20, 30, 0.9);
    --shadow: 0 6px 24px rgba(0, 0, 0, .35);
    --shadow-deep: 0 10px 40px rgba(0, 0, 0, .6);
    --font: 'Press Start 2P', monospace;
    --fs: 12px;
    --fs-small: 10px;
    --fs-tiny: 9px;
    --btn-pad: 6px 14px;
    --btn-radius: 14px;
    --box-height: 210px;
    --grid-max: 140px;
}

* {
    box-sizing: border-box;
}

html, body {
    overscroll-behavior: none;
    height: 100%;
    margin: 0;
    background: #000;
    color: var(--ui-fg);
    font-family: var(--font);
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: none;
}

body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}

button, input {
    font-family: var(--font);
}

/* ==========================================================
   OVERLAYS / PANELS
   ========================================================== */

.overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 50;
    animation: overlayFade .22s ease-out;
}

.overlay.active {
    display: flex;
}

@keyframes overlayFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.panel {
    min-width: min(92vw, 800px);
    max-width: 96vw;
    max-height: 90vh;
    overflow: auto;
    background: var(--panel);
    border: 3px solid var(--ui-border);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow-deep);
    animation: panelIn .3s cubic-bezier(.2,.9,.3,1.2);
}

.panel.large {
    min-height: 60vh;
}

.panel h1, .panel h2 {
    margin: 0 0 10px 0;
    color: var(--ui-fg);
    text-shadow: 2px 2px 0 #000;
}

.panel h1 { font-size: 18px; }
.panel h2 { font-size: 14px; }

.panel p {
    font-size: var(--fs-small);
    line-height: 1.6;
    color: #eee;
}

.panel .row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.panel .spacer {
    flex: 1 1 auto;
}

@keyframes panelIn {
    from { transform: scale(.92) translateY(8px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);   opacity: 1; }
}

/* Custom scrollbars inside panels */
.panel::-webkit-scrollbar,
.grid::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.panel::-webkit-scrollbar-track,
.grid::-webkit-scrollbar-track {
    background: rgba(255, 203, 5, .08);
    border-radius: 6px;
}
.panel::-webkit-scrollbar-thumb,
.grid::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 6px;
}
.panel::-webkit-scrollbar-thumb:hover,
.grid::-webkit-scrollbar-thumb:hover {
    background: var(--ui-border-hl);
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.pixel-btn {
    background: linear-gradient(180deg, rgba(255,203,5,.05), rgba(255,203,5,0));
    color: var(--ui-fg);
    border: 3px solid var(--ui-border);
    border-radius: var(--btn-radius);
    padding: var(--btn-pad);
    cursor: pointer;
    font-size: var(--fs);
    text-shadow: 1px 1px 0 #000;
    transition: transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
    position: relative;
    overflow: hidden;
}

.pixel-btn:hover {
    border-color: var(--ui-border-hl);
    background: linear-gradient(180deg, rgba(255,203,5,.18), rgba(255,203,5,.06));
    transform: translateY(-1px);
    box-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 10px rgba(255,203,5,.2);
}

.pixel-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.pixel-btn:focus-visible {
    outline: 2px dashed var(--ui-border-hl);
    outline-offset: 3px;
}

.pixel-btn.small {
    padding: 4px 10px;
    font-size: var(--fs-small);
    border-width: 2px;
}

.pixel-btn.danger {
    border-color: var(--danger);
    color: #ffdede;
    background: linear-gradient(180deg, rgba(255,77,77,.1), rgba(255,77,77,0));
}
.pixel-btn.danger:hover {
    border-color: #ff8080;
    background: linear-gradient(180deg, rgba(255,77,77,.22), rgba(255,77,77,.06));
    box-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 10px rgba(255,77,77,.3);
}

.pixel-btn.active {
    box-shadow: 0 0 0 3px rgba(255,203,5,.35) inset, 0 0 10px rgba(255,203,5,.4);
    background: linear-gradient(180deg, rgba(255,203,5,.2), rgba(255,203,5,.08));
}

.pixel-btn.disabled,
.pixel-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    border-color: #555;
    color: #888;
    background: rgba(255,255,255,.02);
}
.pixel-btn.disabled:hover,
.pixel-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ==========================================================
   HUD (top)
   ========================================================== */

.hud {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 6px;
    z-index: 10;
    display: none;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.hud > * {
    pointer-events: auto;
}

.hud-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pill {
    border: 3px solid var(--ui-border);
    border-radius: 14px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, .6);
    font-size: var(--fs);
    text-shadow: 1px 1px 0 #000;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hint {
    font-size: var(--fs-small);
    opacity: .8;
}

/* Tiny HUD line (biome/weather/floor) added dynamically */
#tinyHud {
    font-family: var(--font);
    font-size: var(--fs-small);
    color: var(--ui-fg);
    margin-top: 4px;
    text-shadow: 1px 1px 0 #000;
    background: rgba(0, 0, 0, .55);
    border: 2px solid var(--ui-border);
    border-radius: 10px;
    padding: 4px 10px;
    display: inline-block;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: tinyHudFade .4s ease-out;
}

@keyframes tinyHudFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Quest HUD (injected by JS) */
#questHud {
    position: fixed;
    left: 8px;
    top: 86px;
    max-width: 260px;
    z-index: 11;
    background: rgba(0, 0, 0, .72);
    border: 2px solid var(--ui-border);
    border-radius: 10px;
    padding: 8px;
    font-family: var(--font);
    font-size: var(--fs-tiny);
    color: var(--ui-fg);
    text-shadow: 1px 1px 0 #000;
    display: none;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#questHud:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,203,5,.25);
}

/* ==========================================================
   SIM (playfield)
   ========================================================== */

.sim {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--box-height) - 56px);
    margin-top: 52px;
    transition: transform 0s; /* JS shakes via inline transform */
}

#glCanvas, #dungeon2DCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
}

#glCanvas {
    outline: none;
}

.minimap {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 160px;
    height: 160px;
    z-index: 30;
    border: 3px solid var(--ui-border);
    border-radius: 12px;
    background: #111;
    box-shadow: 0 4px 18px rgba(0,0,0,.5), inset 0 0 10px rgba(255,203,5,.12);
    image-rendering: pixelated;
}

/* ==========================================================
   POKÉMON BOX (bottom strip)
   ========================================================== */

.box {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(10,10,10,.88), rgba(10,10,10,.98));
    border-top: 3px solid var(--ui-border);
    padding: 10px 12px;
    z-index: 5;
    height: var(--box-height);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.box .stats {
    margin-bottom: 6px;
    font-size: var(--fs);
    text-shadow: 1px 1px 0 #000;
    line-height: 1.6;
}

.box-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* ==========================================================
   GRIDS (shared by box, team, bag, shop, dex)
   ========================================================== */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    max-height: var(--grid-max);
    overflow-y: auto;
    padding: 2px;
}

/* Modal grids can breathe more */
.panel .grid {
    max-height: 56vh;
    padding: 4px;
}

/* ==========================================================
   POKÉMON / ITEM CARDS
   ========================================================== */

.pokemon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 3px solid var(--ui-border);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(20,20,25,1), rgba(10,10,15,1));
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    position: relative;
}

.pokemon-card:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: var(--ui-border-hl);
    box-shadow: 0 6px 18px rgba(255,203,5,.25);
    z-index: 2;
}

.pokemon-card.favorite {
    border-color: #ff4747;
    box-shadow: 0 0 0 1px #ff4747 inset, 0 0 12px rgba(255,71,71,.25);
}
.pokemon-card.favorite::after {
    content: "❤";
    position: absolute;
    top: 2px;
    right: 6px;
    color: #ff4747;
    font-size: 14px;
    text-shadow: 0 0 4px rgba(255,71,71,.6);
}

/* Shiny marker glow (JS adds " ⭐" to name) */
.pokemon-card .poke-name[data-shiny="true"] {
    color: var(--shiny);
    text-shadow: 0 0 6px rgba(255,230,107,.7), 1px 1px 0 #000;
}

.pokemon-card img {
    width: 80px;
    height: 80px;
    image-rendering: pixelated;
    transition: transform .25s;
}
.pokemon-card:hover img {
    transform: scale(1.08) translateY(-2px);
}

.pokemon-card.selected {
    border-color: var(--ui-border-hl);
    box-shadow: 0 0 0 3px rgba(255,203,5,.4), 0 0 16px rgba(255,203,5,.35);
    transform: translateY(-2px);
}

.poke-name {
    display: block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--fs-small);
    text-align: center;
    margin: 0;
    text-shadow: 1px 1px 0 #000;
}

.small-stat {
    font-size: var(--fs-tiny);
    color: #ccc;
    margin: 0;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
}

.item-card {
    transition: transform .15s, border-color .15s;
}
.item-card:hover {
    transform: translateY(-1px);
    border-color: var(--ui-border-hl) !important;
}
.item-card img {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
}

/* ==========================================================
   MOBILE D-PAD
   ========================================================== */

.mobile-pad {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: none;
    flex-direction: column;
    gap: 6px;
    background: rgba(0, 0, 0, .55);
    border: 3px solid var(--ui-border);
    border-radius: 12px;
    padding: 6px;
    z-index: 40;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mobile-pad .mid-row {
    display: flex;
    gap: 6px;
}

.pad-btn {
    width: 48px;
    height: 48px;
    border: 3px solid var(--ui-border);
    border-radius: 12px;
    background: linear-gradient(180deg, #2a2a2a, #181818);
    color: #ffcb05;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .1s, border-color .1s, background .1s;
    text-shadow: 1px 1px 0 #000;
}
.pad-btn:hover { border-color: var(--ui-border-hl); }
.pad-btn:active {
    transform: scale(.92);
    background: linear-gradient(180deg, #3a3a0a, #1f1f0a);
    border-color: var(--ui-border-hl);
}

.mobile-pad .up { align-self: center; }

/* ==========================================================
   INPUTS
   ========================================================== */

input[type="text"] {
    width: 240px;
    padding: 10px 12px;
    font-size: var(--fs);
    background: #111;
    color: #fff;
    border: 2px solid var(--ui-border);
    border-radius: 12px;
    margin-right: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus {
    border-color: var(--ui-border-hl);
    box-shadow: 0 0 0 3px rgba(255,203,5,.2);
}

/* ==========================================================
   BATTLE MODAL — HP BARS (JS injects inline width; we style bar shells)
   ========================================================== */

#__battleModal .panel {
    max-width: 640px;
}

#__wildHpBar,
#__youHpBar {
    transition: width .35s cubic-bezier(.2,.9,.3,1), background .2s;
    box-shadow: 0 0 6px currentColor;
}

#__wildImg,
#__youImg {
    image-rendering: pixelated;
    transition: transform .2s;
}

#__wildImg {
    animation: wildBob 2.2s ease-in-out infinite;
}
#__youImg {
    animation: youBob 2.2s ease-in-out infinite .4s;
}

@keyframes wildBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes youBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

#__bMsg {
    animation: msgFlash .5s ease-out;
}
@keyframes msgFlash {
    from { background: rgba(255,203,5,.25); }
    to   { background: transparent; }
}

/* ==========================================================
   SIMULATION container — touch handling
   ========================================================== */

#simulationContainer {
    touch-action: none;
}

/* ==========================================================
   MOBILE / COMPACT
   ========================================================== */

@media (pointer: coarse), (max-width: 820px) {
    :root {
        --fs: 10px;
        --fs-small: 9px;
        --fs-tiny: 8px;
        --btn-pad: 5px 10px;
        --btn-radius: 10px;
        --box-height: 160px;
        --grid-max: 108px;
    }

    .panel { padding: 12px; }
    .panel h1 { font-size: 15px; }
    .panel h2 { font-size: 12px; }

    .hud { top: 4px; left: 4px; right: 4px; }

    .minimap {
        width: 120px;
        height: 120px;
        right: 8px;
        bottom: 8px;
    }

    .pokemon-card img {
        width: 60px;
        height: 60px;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 6px;
    }

    input[type="text"] {
        width: 200px;
    }

    .mobile-pad {
        display: flex;
    }

    .pad-btn {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }

    #questHud {
        max-width: 180px;
        font-size: 8px;
        top: 78px;
    }

    /* Hide quest hud on very narrow screens to save space */
    @media (max-width: 520px) {
        #questHud { display: none !important; }
    }
}

/* Landscape phone — shrink even more */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --box-height: 120px;
        --grid-max: 76px;
    }
    .minimap {
        width: 96px;
        height: 96px;
    }
}

/* ==========================================================
   SPECIAL: loading shimmer for image placeholders
   ========================================================== */

img {
    background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: imgShimmer 1.4s linear infinite;
}
img[src] {
    /* once src loads, disable shimmer (browsers will still animate until load; acceptable) */
    animation: none;
    background: transparent;
}

@keyframes imgShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ==========================================================
   Welcome overlay extras
   ========================================================== */

#welcomeOverlay .panel {
    text-align: center;
    max-width: 440px;
    min-width: auto;
    background: radial-gradient(circle at 50% 30%, rgba(40,40,60,.95), rgba(10,10,10,.98));
    border-color: var(--ui-border-hl);
}

#welcomeOverlay h1 {
    animation: titleGlow 2.2s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% { text-shadow: 2px 2px 0 #000, 0 0 8px rgba(255,203,5,.4); }
    50%      { text-shadow: 2px 2px 0 #000, 0 0 16px rgba(255,203,5,.9); }
}

#welcomeForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
}

#welcomeForm input[type="text"] {
    margin: 0;
}

/* ==========================================================
   Print-safe hide
   ========================================================== */

@media print {
    body { background: #fff; color: #000; }
    .overlay, .hud, .box, .mobile-pad, .minimap, #questHud { display: none !important; }
}