/* ==========================================================================
   Titanlord Emblem — UI styling
   Dark, manga-ish, with a hint of GBA Fire Emblem warm gold + steel blue.
   ========================================================================== */

:root {
    --bg-deep:    #0a0a0e;
    --bg-mid:     #14141c;
    --bg-card:    #1a1f2c;
    --border:     #3a3f55;
    --border-hi:  #b89860;
    --gold:       #d4b375;
    --gold-soft:  #8a7244;
    --steel:      #5a7a9a;
    --ink:        #e9e2d1;
    --ink-soft:   #a59a83;
    --red:        #c64545;
    --green:      #5fa86c;
    --blue:       #4477aa;
    --warning:    #d97a2c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--bg-deep);
    color: var(--ink);
    font-family: 'Courier New', 'Lucida Console', monospace;
    user-select: none;
    -webkit-user-select: none;
}

.hidden { display: none !important; }

/* ===========================================================
   Boot screen
=========================================================== */
#boot-screen {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse at center, rgba(180,140,80,0.12) 0%, transparent 60%),
        linear-gradient(180deg, #0a0a0e 0%, #14141c 100%);
    z-index: 1000;
}
.boot-frame {
    text-align: center;
    border: 2px solid var(--border-hi);
    background: rgba(20, 20, 28, 0.85);
    padding: 48px 64px;
    box-shadow: 0 0 0 4px var(--bg-deep), 0 0 40px rgba(180,140,80,0.15);
}
.boot-title {
    font-size: 42px;
    letter-spacing: 8px;
    color: var(--gold);
    text-shadow: 2px 2px 0 #000, 0 0 12px rgba(180,140,80,0.5);
    font-weight: bold;
}
.boot-amp { color: var(--ink-soft); margin: 0 6px; }
.boot-sub {
    margin-top: 12px;
    font-size: 18px;
    color: var(--ink);
    font-style: italic;
    letter-spacing: 4px;
}
.boot-credit {
    margin-top: 24px;
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 2px;
}
.boot-btn {
    margin-top: 36px;
    background: var(--gold-soft);
    color: var(--bg-deep);
    border: 2px solid var(--border-hi);
    padding: 12px 36px;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s;
}
.boot-btn:hover {
    background: var(--gold);
    box-shadow: 0 0 20px rgba(212,179,117,0.5);
}
.boot-hint {
    margin-top: 24px;
    font-size: 11px;
    color: var(--ink-soft);
}
.boot-hint b { color: var(--gold); }

/* ===========================================================
   Game shell layout
=========================================================== */
#game-shell {
    position: fixed; inset: 0;
    display: grid;
    grid-template-columns: 1fr 240px;
    background: var(--bg-deep);
}

#game-stage {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.015) 0,
            rgba(255,255,255,0.015) 1px,
            transparent 1px,
            transparent 4px
        ),
        var(--bg-mid);
    overflow: hidden;
}

#game-canvas, #ui-canvas {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    border: 2px solid var(--border-hi);
    background: #000;
    /* Scale up the 480x320 internal resolution */
    width: min(96vw, calc(96vh * 1.5));
    height: min(64vw, calc(96vh - 8px));
    max-width: 960px;
    max-height: 640px;
    aspect-ratio: 3/2;
}
#ui-canvas {
    position: absolute;
    pointer-events: none;
    background: transparent;
    border-color: transparent;
}

/* ===========================================================
   Side HUD
=========================================================== */
#hud-side {
    background: var(--bg-mid);
    border-left: 2px solid var(--border);
    padding: 12px;
    display: flex; flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.hud-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 10px 12px;
    font-size: 12px;
}

.hud-label {
    font-size: 10px;
    color: var(--ink-soft);
    letter-spacing: 1px;
    margin-top: 6px;
}
.hud-label:first-child { margin-top: 0; }

.hud-big {
    font-size: 18px;
    color: var(--gold);
    font-weight: bold;
}
.hud-small {
    font-size: 12px;
    color: var(--ink);
}

.hud-name {
    font-size: 16px;
    color: var(--gold);
    font-weight: bold;
    margin-bottom: 2px;
}
.hud-class {
    font-size: 11px;
    color: var(--ink-soft);
    font-style: italic;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.hud-hp {
    font-size: 12px;
    text-align: right;
    margin: 4px 0 8px 0;
    color: var(--ink);
}
.hpbar {
    height: 8px;
    background: #2a2010;
    border: 1px solid var(--border);
}
.hpbar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green) 0%, var(--gold) 70%, var(--red) 100%);
    width: 100%;
    transition: width 0.25s;
}

.hud-stats {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0;
}
.hud-stats td {
    padding: 2px 4px;
    font-size: 11px;
}
.hud-stats td:nth-child(odd) {
    color: var(--ink-soft);
    text-align: left;
}
.hud-stats td:nth-child(even) {
    color: var(--ink);
    text-align: right;
    font-weight: bold;
}
.hud-weapon {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--gold);
}

.hud-btn {
    margin-top: 8px;
    width: 100%;
    background: var(--gold-soft);
    color: var(--bg-deep);
    border: 1px solid var(--border-hi);
    padding: 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
}
.hud-btn:hover { background: var(--gold); }

/* ===========================================================
   Action menu (Attack / Item / Wait)
=========================================================== */
.action-menu {
    position: absolute;
    background: var(--bg-card);
    border: 2px solid var(--border-hi);
    padding: 4px;
    min-width: 100px;
    z-index: 20;
    font-size: 12px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}
.action-menu.hidden {
    display: block !important;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    visibility: hidden;
}
.action-menu .item {
    padding: 6px 12px;
    color: var(--ink);
    cursor: pointer;
}
.action-menu .item.disabled {
    color: #6a6a72;
    font-style: italic;
    text-decoration: line-through;
    text-decoration-color: rgba(106,106,114,0.6);
    cursor: not-allowed;
}
.action-menu .item.selected:not(.disabled) {
    background: var(--gold-soft);
    color: var(--bg-deep);
}

/* ===========================================================
   Battle forecast
=========================================================== */
.forecast {
    position: absolute;
    background: var(--bg-card);
    border: 2px solid var(--border-hi);
    padding: 12px;
    width: 280px;
    z-index: 25;
    font-size: 11px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}
.forecast.hidden {
    display: block !important;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    visibility: hidden;
}
.forecast .row {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 4px;
    align-items: center;
    margin: 2px 0;
}
.forecast .lbl {
    text-align: center;
    color: var(--ink-soft);
    font-size: 10px;
}
.forecast .me { text-align: right; color: var(--blue); font-weight: bold; }
.forecast .you { text-align: left; color: var(--red); font-weight: bold; }
.forecast .me.dead, .forecast .you.dead { color: var(--ink-soft); text-decoration: line-through; }
.forecast .name-row .me { color: var(--gold); }
.forecast .name-row .you { color: var(--red); }
.forecast .hpbar { margin: 2px 0; }
.forecast hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }
.forecast .hint {
    margin-top: 6px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 10px;
    letter-spacing: 1px;
}
.forecast .x2 { color: var(--gold); font-weight: bold; }

/* ===========================================================
   Dialogue
=========================================================== */
.dialogue {
    position: absolute;
    left: 12px; right: 12px; bottom: 12px;
    background: rgba(10,10,14,0.92);
    border: 2px solid var(--border-hi);
    padding: 14px 18px;
    z-index: 30;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}
.dialogue-name {
    color: var(--gold);
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
    letter-spacing: 1px;
}
.dialogue-text { color: var(--ink); }
.dialogue-cont {
    text-align: right;
    color: var(--ink-soft);
    font-size: 10px;
    margin-top: 4px;
}

/* ===========================================================
   Banner (turn change, chapter title)
=========================================================== */
.banner {
    position: absolute;
    left: 0; right: 0; top: 40%;
    text-align: center;
    z-index: 40;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.18s ease-out;
}
.banner.hidden {
    display: block !important;
    opacity: 0;
    visibility: hidden;
}
.banner .banner-bg {
    transform: translateY(0);
    transition: transform 0.22s cubic-bezier(.18,.85,.4,1.16);
}
.banner.hidden .banner-bg {
    transform: translateY(-12px);
}
.banner .banner-bg {
    display: inline-block;
    background: rgba(10,10,14,0.92);
    border-top: 2px solid var(--border-hi);
    border-bottom: 2px solid var(--border-hi);
    padding: 18px 60px;
    color: var(--gold);
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 8px;
    text-shadow: 2px 2px 0 #000;
}
.banner.player .banner-bg { color: var(--blue); }
.banner.enemy  .banner-bg { color: var(--red); }
.banner.chapter .banner-bg { color: var(--gold); font-size: 22px; letter-spacing: 4px; }

/* ===========================================================
   Tile tooltip — small floater near cursor with terrain info
=========================================================== */
.tile-tip {
    position: absolute;
    background: rgba(10,10,14,0.92);
    border: 1px solid rgba(212,179,117,0.7);
    color: var(--ink);
    padding: 4px 8px;
    z-index: 18;
    font-size: 10px;
    line-height: 1.35;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.10s ease-out;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    letter-spacing: 0.5px;
}
.tile-tip.hidden {
    display: block !important;
    opacity: 0;
    visibility: hidden;
}
.tile-tip .tt-name { color: var(--gold); font-weight: bold; }
.tile-tip .tt-eff  { color: var(--ink-soft); font-size: 9px; }

/* ===========================================================
   Game over screen
=========================================================== */
.game-over {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 50;
}
.game-over-title {
    font-size: 36px;
    color: var(--gold);
    font-weight: bold;
    letter-spacing: 8px;
    margin-bottom: 12px;
}
.game-over.defeat .game-over-title { color: var(--red); }
.game-over-sub {
    color: var(--ink);
    font-size: 14px;
    margin-bottom: 24px;
    text-align: center;
    max-width: 400px;
}
.game-over-btn {
    background: var(--gold-soft);
    color: var(--bg-deep);
    border: 2px solid var(--border-hi);
    padding: 10px 30px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
}
.game-over-btn:hover { background: var(--gold); }

/* ===========================================================
   World map info panel
=========================================================== */
.world-panel {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: min(560px, 72%);
    background:
        linear-gradient(180deg, rgba(9, 16, 27, 0.94), rgba(5, 9, 15, 0.90)),
        rgba(10, 10, 14, 0.92);
    border: 2px solid rgba(212, 179, 117, 0.78);
    color: var(--ink);
    padding: 12px 18px;
    z-index: 25;
    font-size: 12px;
    line-height: 1.5;
    box-shadow:
        0 0 0 4px rgba(4, 8, 14, 0.95),
        0 12px 34px rgba(0,0,0,0.72),
        inset 0 1px 0 rgba(255,255,255,0.08);
}
.world-panel.shake { animation: wm-shake 0.3s ease-out; }
@keyframes wm-shake {
    0%, 100% { transform: translateX(-50%); }
    20% { transform: translateX(calc(-50% - 8px)); }
    40% { transform: translateX(calc(-50% + 8px)); }
    60% { transform: translateX(calc(-50% - 5px)); }
    80% { transform: translateX(calc(-50% + 5px)); }
}
.wm-status {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 2px;
    padding: 2px 8px;
    margin-bottom: 6px;
    border: 1px solid currentColor;
}
.wm-status.available { color: var(--gold); }
.wm-status.cleared   { color: var(--green); }
.wm-status.locked    { color: #888; }
.wm-name {
    font-size: 16px;
    font-weight: bold;
    color: var(--gold);
    letter-spacing: 1px;
    text-shadow: 0 2px 0 #000;
}
.wm-sub {
    font-size: 11px;
    color: var(--ink-soft);
    font-style: italic;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.wm-blurb {
    color: var(--ink);
    margin-bottom: 8px;
}
.wm-hint {
    font-size: 10px;
    color: var(--ink-soft);
    text-align: right;
    letter-spacing: 1px;
}
.wm-go    { color: var(--gold); font-weight: bold; }
.wm-arrow { color: var(--blue); font-weight: bold; }

/* ===========================================================
   Mobile fallback
=========================================================== */
@media (max-width: 720px) {
    #game-shell { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    #hud-side {
        max-height: 35vh;
        flex-direction: row;
        flex-wrap: wrap;
        border-left: none;
        border-top: 2px solid var(--border);
    }
    .hud-card { flex: 1 1 200px; }
}