/* ================================================================
   CritZone - Game Board Stylesheet
   ================================================================ */

:root {
    --accent:          #eb924d;
    --accent-dark:     #a3501e;
    --board-overlay:   rgba(0, 0, 0, 0.45);
    --zone-bg:         rgba(0, 0, 0, 0.22);
    --divider:         rgba(235, 146, 77, 0.35);
    --card-slot-bg:    rgba(0, 0, 0, 0.28);
    --card-slot-border:rgba(255, 255, 255, 0.12);
    --text-primary:    #f5e6c8;
    --text-dim:        rgba(245, 230, 200, 0.55);
    --header-bg:       rgba(0, 0, 0, 0.55);
    --footer-bg:       rgba(0, 0, 0, 0.60);
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--text-primary);
}

body {
    background: url('/assets/battleground_background.jpg') center / cover no-repeat fixed;
}

/* ── SVG Sprite (hidden) ─────────────────────────────────────── */
#svg-sprites {
    position: absolute;
    left: -1px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* ── Board container ─────────────────────────────────────────── */
#board {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--board-overlay);
}

/* ── Header ──────────────────────────────────────────────────── */
#board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 1rem;
    background: var(--header-bg);
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
    gap: 1rem;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.header-center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.ui-title-bar {
    width: 200px;
    height: auto;
    display: block;
}

.title-text {
    position: absolute;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: 0 1px 6px #000;
    pointer-events: none;
}

/* ── UI icons ────────────────────────────────────────────────── */
.ui-btn {
    width: 38px;
    height: 38px;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 0.15s;
}
.ui-btn:hover  { filter: brightness(1.25); }
.ui-btn:active { filter: brightness(0.85); }

.ui-nav {
    width: 32px;
    height: 38px;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 0.15s;
}
.ui-nav:hover  { filter: brightness(1.25); }
.ui-nav:active { filter: brightness(0.85); }

.ui-star {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* ── Zones ───────────────────────────────────────────────────── */
#opponent-zone,
#player-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1.5rem;
    gap: 0.4rem;
    min-height: 0;
}

#opponent-zone {
    justify-content: flex-start;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent);
}

#player-zone {
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.15), transparent);
}

/* ── Health bars ─────────────────────────────────────────────── */
.health-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.player-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    min-width: 72px;
}

.health-indicators {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stars {
    display: flex;
    gap: 2px;
}

.shields {
    display: flex;
    gap: 3px;
    padding-left: 2px;
}

.ui-shield {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── Card rows ───────────────────────────────────────────────── */
.card-row {
    display: flex;
    gap: clamp(0.4rem, 1vw, 1rem);
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 0;
}

/* ── Card slots ──────────────────────────────────────────────── */
.card-slot {
    height: 90%;
    max-height: 90%;
    aspect-ratio: 500 / 704;
    background: var(--card-slot-bg);
    border: 1px dashed var(--card-slot-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}

.card-slot:hover {
    border-color: rgba(235, 146, 77, 0.45);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 12px rgba(235, 146, 77, 0.2);
}

.card-slot.active {
    border-color: var(--accent);
    box-shadow: 0 0 18px rgba(235, 146, 77, 0.5);
}

.card-slot img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
}

/* ── Deck stack ──────────────────────────────────────────────── */
.deck-stack {
    position: relative;
    height: 63%;
    max-height: 63%;
    aspect-ratio: 500 / 581;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deck-stack img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 6px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
    transition: filter 0.15s, transform 0.15s;
}

.player-deck {
    cursor: pointer;
}

.player-deck:hover img {
    filter: drop-shadow(0 6px 14px rgba(235,146,77,0.5));
    transform: translateY(-3px);
}

.player-deck:active img {
    transform: translateY(0);
}

.opponent-deck {
    opacity: 0.75;
    cursor: default;
    transform: rotate(180deg);   /* face away from player */
}

@keyframes deck-draw {
    0%   { transform: translateY(0)    scale(1); }
    40%  { transform: translateY(-10px) scale(1.08); }
    100% { transform: translateY(0)    scale(1); }
}

.player-deck.drawing img {
    animation: deck-draw 0.35s ease-out forwards;
}

.deck-count {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.72);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid var(--accent-dark);
    pointer-events: none;
    min-width: 28px;
    text-align: center;
}

/* ── Battle divider ──────────────────────────────────────────── */
#board-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--divider), transparent);
    flex-shrink: 0;
    margin: 0 2rem;
}

/* ── Footer ──────────────────────────────────────────────────── */
#board-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 1rem;
    background: var(--footer-bg);
    border-top: 1px solid var(--divider);
    flex-shrink: 0;
    gap: 1rem;
}

.footer-left,
.footer-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.footer-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* ── Deploy counter ──────────────────────────────────────────── */
.deploy-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    min-width: 48px;
}

.deploy-label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
}

.deploy-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent);
}

/* ── Targeting arrow overlay ─────────────────────────────────── */
#arrow-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: visible;
}

.card-arrow {
    position: fixed;
    pointer-events: none;
    transform-origin: center center;
    opacity: 0.9;
    filter: drop-shadow(0 0 6px rgba(235, 146, 77, 0.6));
    transition: opacity 0.15s;
}

/* Opponent slots glow when a player card is selected */
#opponent-cards .card-slot:not(.empty).targetable {
    box-shadow: 0 0 14px rgba(235, 146, 77, 0.55);
    border-color: rgba(235, 146, 77, 0.6);
    cursor: crosshair;
}

#opponent-cards .card-slot:not(.empty).targeted {
    box-shadow: 0 0 20px rgba(235, 146, 77, 0.85);
    border-color: var(--accent);
}

/* ── Card HP overlay ─────────────────────────────────────────── */
/* Positioned over the HP number area of the card (x≈60/500, y≈658/704) */
.card-hp-overlay {
    position: absolute;
    left: 4%;
    bottom: 3.5%;
    width: 16%;
    text-align: center;
    font-size: clamp(0.55rem, 1.2vw, 0.85rem);
    font-weight: 800;
    color: #ff5555;
    text-shadow: 0 0 4px #000, 0 1px 2px #000;
    pointer-events: none;
    z-index: 6;
    line-height: 1;
}

/* ── Card hover darkening ────────────────────────────────────── */
.card-slot:not(.empty) {
    position: relative;
}

.card-slot:not(.empty)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    border-radius: 8px;
    transition: background 0.2s;
    pointer-events: none;
}

.card-slot:not(.empty):hover::after {
    background: rgba(0, 0, 0, 0.45);
}

/* ── Round notification ──────────────────────────────────────── */
@keyframes round-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    35%  { transform: translate(-50%, -50%) scale(1); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

#round-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    background: rgba(10, 5, 0, 0.88);
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 0.8rem 3rem;
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-shadow: 0 0 20px var(--accent);
    box-shadow: 0 0 40px rgba(235, 146, 77, 0.35);
    pointer-events: none;
    opacity: 0;
    z-index: 100;
}

#round-notification.show {
    animation: round-pop 2.4s ease forwards;
}

/* ── Phase badges ────────────────────────────────────────────── */
.phase-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    align-self: flex-start;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    border: 1px solid transparent;
    pointer-events: none;
}

.phase-attack {
    background: rgba(235, 146, 77, 0.18);
    color: #eb924d;
    border-color: rgba(235, 146, 77, 0.45);
}

.phase-defend {
    background: rgba(120, 160, 255, 0.12);
    color: rgba(160, 190, 255, 0.75);
    border-color: rgba(120, 160, 255, 0.25);
}

/* ── Debug panel ─────────────────────────────────────────────── */
#debug-panel {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 210px;
    height: 600px;
    background: rgba(5, 3, 0, 0.88);
    border: 1px solid rgba(235, 146, 77, 0.35);
    border-left: none;
    border-radius: 0 6px 6px 0;
    display: flex;
    flex-direction: column;
    z-index: 200;
    font-size: 0.72rem;
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
    overflow: hidden;
}

#debug-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: rgba(235, 146, 77, 0.15);
    border-bottom: 1px solid rgba(235, 146, 77, 0.3);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    flex-shrink: 0;
}

#debug-clear-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.65rem;
    padding: 0 2px;
    line-height: 1;
}
#debug-clear-btn:hover { color: var(--text-primary); }

#debug-state {
    padding: 5px 7px;
    border-bottom: 1px solid rgba(235, 146, 77, 0.2);
    flex-shrink: 0;
}

.ds-row {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    line-height: 1.6;
}
.ds-row b  { color: var(--text-dim); font-weight: 600; }
.ds-row span { color: var(--accent); text-align: right; word-break: break-all; }

#debug-log {
    flex: 1;
    overflow-y: auto;
    padding: 4px 7px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
#debug-log::-webkit-scrollbar { width: 4px; }
#debug-log::-webkit-scrollbar-thumb { background: rgba(235,146,77,0.3); border-radius: 2px; }

.dl { line-height: 1.5; padding: 1px 0; word-break: break-word; }
.dl-section  { color: #eb924d; font-weight: 700; margin-top: 4px; }
.dl-attack   { color: #f0c060; }
.dl-counter  { color: #c0a0ff; }
.dl-direct   { color: #ff6060; font-weight: 600; }
.dl-destroy  { color: #ff4040; font-weight: 700; }
.dl-select   { color: #80d0ff; }
.dl-target   { color: #ffdd80; }
.dl-warn     { color: #ff9900; }
.dl-info     { color: var(--text-dim); }

/* ── End turn button ─────────────────────────────────────────── */
#btn-end-turn {
    padding: 0.45rem 2.2rem;
    background: var(--accent);
    color: #1a0800;
    border: none;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

#btn-end-turn:hover  { filter: brightness(1.12); box-shadow: 0 3px 14px rgba(235,146,77,0.4); }
#btn-end-turn:active { filter: brightness(0.88); }
#btn-end-turn:disabled {
    background: #555;
    color: #999;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}