/* ============================================================
   HUD.uss — Match HUD stylesheet
   Layout mirrors wintermaul_ui_v4.html; visual style is
   placeholder and will be replaced in Phase 2.
   ============================================================ */

/* Root: covers full screen, transparent so the 3D scene shows through.
   PickingMode.Ignore is set in C# so clicks in the map area reach the scene. */
.hud-root {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0);
}

/* ---- TOP BAR ------------------------------------------------ */

.top-bar {
    height: 28px;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    padding: 0 10px;
    background-color: rgba(22, 20, 10, 0.92);
    border-bottom-width: 1px;
    border-bottom-color: rgba(90, 80, 32, 1);
}

.res-group {
    flex-direction: row;
    align-items: center;
}

.gold-label,
.income-label,
.wave-label,
.dimmed-label {
    margin-right: 10px;
}

.top-spacer {
    flex: 1;
}

.gold-label {
    color: rgb(255, 224, 102);
    font-size: 12px;
    -unity-font-style: bold;
}

.income-label {
    color: rgb(136, 204, 255);
    font-size: 11px;
}

.wave-label {
    color: rgb(255, 170, 170);
    font-size: 11px;
    -unity-font-style: bold;
    background-color: rgba(58, 26, 26, 0.85);
    border-width: 1px;
    border-color: rgba(138, 58, 58, 1);
    border-radius: 3px;
    padding: 1px 7px;
}

.dimmed-label {
    color: rgb(136, 136, 136);
    font-size: 11px;
}

/* ---- MAIN AREA ---------------------------------------------- */

.main-area {
    flex: 1;
    flex-direction: row;
    min-height: 0;
}

/* Transparent viewport area. PickingMode set to Ignore in C#. */
.map-area {
    flex: 1;
    background-color: rgba(0,0,0,0);
}

.rejection-label {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    -unity-text-align: upper-center;
    color: rgb(255, 90, 90);
    font-size: 14px;
    -unity-font-style: bold;
    background-color: rgba(0, 0, 0, 0.65);
    padding: 4px 14px;
    border-radius: 4px;
    display: none;
}

/* ---- RIGHT SCOREBOARD PANEL --------------------------------- */

.right-panel {
    width: 172px;
    flex-shrink: 0;
    align-self: flex-start;
    flex-direction: column;
    background-color: rgb(22, 22, 16);
    border-left-width: 1px;
    border-left-color: rgba(58, 58, 32, 1);
    border-bottom-width: 1px;
    border-bottom-color: rgba(58, 58, 32, 1);
    border-radius: 0 0 0 3px;
}

.panel-header {
    padding: 4px 6px;
    font-size: 10px;
    color: rgb(255, 224, 102);
    -unity-font-style: bold;
    -unity-text-align: upper-center;
    background-color: rgb(42, 36, 16);
    border-bottom-width: 1px;
    border-bottom-color: rgba(58, 58, 32, 1);
}

.section-label {
    padding: 4px 6px 2px;
    font-size: 9px;
    color: rgb(102, 102, 80);
}

.player-list {
    flex-direction: column;
}

.income-row {
    flex-direction: row;
    justify-content: space-between;
    padding: 2px 6px;
}

.income-key {
    font-size: 10px;
    color: rgb(136, 136, 112);
}

.income-val {
    font-size: 10px;
    color: rgb(255, 224, 102);
}

/* ---- BOTTOM UI STRIP ---------------------------------------- */
/* Five separate framed sections, left to right:
   1. Minimap        — tall frame, 180w x 220h
   2. Portrait       — short frame, 90w x 165h  (bottom-aligned)
   3. Info Panel     — short frame, 280w x 165h
   4. Tool Tip       — short frame, 120w x 165h
   5. Action Menu    — tall frame, 320w x 220h  (hides via display:none
                       when no actions are available for the selection)
   Sections sit on a transparent strip with 100px margins on each side; the
   3D scene shows through above and beside them.                              */

.bottom-ui {
    height: 220px;                  /* matches the tall sections */
    flex-shrink: 0;
    flex-direction: row;
    align-items: flex-end;          /* short sections hug the bottom */
    justify-content: flex-start;
    padding: 0 100px;               /* margin on either side — the X regions */
    background-color: rgba(0, 0, 0, 0);
}

/* ----- Section 1: Minimap (tall) ----- */
.minimap-frame {
    width: 180px;
    height: 220px;
    flex-shrink: 0;
    padding: 4px;
    background-color: rgb(35, 30, 15);
    border-width: 3px;
    border-color: rgb(120, 100, 50);
    border-radius: 4px;
}

/* MinimapView injects .minimap-terrain and .minimap-entities into this. */
.minimap {
    flex: 1;
    background-color: rgb(8, 10, 12);
    overflow: hidden;
}

.minimap-terrain {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    -unity-background-scale-mode: stretch-to-fill;
}

.minimap-entities {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

/* ----- Section 2: Portrait (short, bottom-aligned) ----- */
.portrait-frame {
    width: 90px;
    height: 165px;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    background-color: rgb(35, 30, 15);
    border-width: 2px;
    border-color: rgb(80, 65, 35);
    border-radius: 3px;
}

.portrait-image {
    width: 74px;
    height: 110px;
    background-color: rgb(13, 26, 13);
    border-width: 1px;
    border-color: rgb(58, 90, 58);
    border-radius: 3px;
    flex-shrink: 0;
}

.level-label {
    font-size: 11px;
    color: rgb(220, 220, 200);
    -unity-text-align: upper-center;
    margin-top: 6px;
    flex-shrink: 0;
}

/* ----- Section 3: Info Panel (short, name + stat lines) ----- */
.info-frame {
    width: 280px;
    height: 165px;
    flex-shrink: 0;
    flex-direction: column;
    padding: 8px 10px;
    background-color: rgb(15, 15, 15);
    border-width: 2px;
    border-color: rgb(80, 65, 35);
    border-radius: 3px;
}

.portrait-name {
    font-size: 14px;
    color: rgb(255, 224, 102);
    -unity-font-style: bold;
    -unity-text-align: upper-left;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.stat-lines {
    flex-direction: column;
}

.stat-line {
    font-size: 11px;
    color: rgb(220, 220, 200);
    -unity-text-align: upper-left;
    margin-bottom: 2px;
}

/* Build-progress block — shown in the info panel only when a BuildSiteVisual
   is selected. Thin horizontal bar with a left-anchored fill, percent below. */
.build-progress {
    flex-direction: column;
    margin-top: 6px;
}

.build-progress-bg {
    height: 10px;
    background-color: rgb(30, 30, 24);
    border-width: 1px;
    border-color: rgb(80, 65, 35);
    border-radius: 2px;
    margin-bottom: 4px;
    overflow: hidden;
}

/* The fill is anchored to the LEFT side via absolute positioning + 0 right
   margin set in code (width is driven each frame from progress). Color is the
   same green family as the selection ring for visual consistency. */
.build-progress-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0%;
    background-color: rgb(120, 220, 120);
}

.build-progress-percent {
    font-size: 11px;
    color: rgb(220, 220, 200);
    -unity-text-align: upper-left;
}

/* ----- Section 4: Tool Tip (short, hover-driven) ----- */
.tooltip-frame {
    width: 120px;
    height: 165px;
    flex-shrink: 0;
    flex-direction: column;
    padding: 8px;
    background-color: rgb(15, 15, 15);
    border-width: 2px;
    border-color: rgb(80, 65, 35);
    border-radius: 3px;
}

.tt-title {
    font-size: 12px;
    color: rgb(255, 224, 102);
    -unity-font-style: bold;
    margin-bottom: 4px;
    white-space: normal;
}

.tt-desc {
    font-size: 10px;
    color: rgb(170, 168, 144);
    white-space: normal;
}

.tt-stats {
    font-size: 10px;
    color: rgb(136, 170, 136);
    margin-top: 3px;
    white-space: normal;
}

.tt-cost {
    font-size: 10px;
    color: rgb(255, 224, 102);
    margin-top: 4px;
}

/* ----- Section 5: Action Menu (tall, hides when no actions are available) ----- */
.action-frame {
    width: 320px;
    height: 220px;
    flex-shrink: 0;
    padding: 6px;
    background-color: rgb(35, 30, 15);
    border-width: 3px;
    border-color: rgb(120, 100, 50);
    border-radius: 4px;
}

/* Command grid: 3 row-containers injected at runtime, each holding 5 buttons. */
.command-grid {
    flex: 1;
    flex-direction: column;
}

.cmd-row {
    flex: 1;
    flex-direction: row;
    margin-bottom: 3px;
}

/* Button is the cell. The icon-placeholder fills the cell; hotkey and cost
   labels are absolute-positioned overlays in the top-left and bottom-left
   corners. (Name label was removed — name lives in the Tool Tip box on hover.) */
.cmd-btn {
    flex: 1;
    align-items: stretch;
    justify-content: flex-start;
    padding: 3px;
    background-color: rgb(26, 26, 10);
    border-width: 1px;
    border-color: rgb(58, 58, 26);
    border-radius: 3px;
    margin-right: 3px;
}

/* Placeholder icon — flat grey square with embossed borders (light top/left,
   dark bottom/right) to suggest a raised 3D button. Swap for background-image
   when art exists. */
.cmd-icon-placeholder {
    flex: 1;
    background-color: rgb(140, 140, 140);
    border-top-width: 2px;
    border-left-width: 2px;
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-top-color: rgb(220, 220, 220);
    border-left-color: rgb(220, 220, 220);
    border-bottom-color: rgb(70, 70, 70);
    border-right-color: rgb(70, 70, 70);
    border-radius: 2px;
}

.cmd-btn:hover {
    background-color: rgb(42, 42, 21);
    border-color: rgb(106, 106, 48);
}

.cmd-btn.active {
    background-color: rgb(42, 38, 16);
    border-color: rgb(255, 224, 102);
}

.cmd-btn.unaffordable {
    opacity: 0.4;
}

.cmd-btn.empty-slot {
    opacity: 0.12;
}

/* Hotkey badge — top-left corner of the button, overlapping the icon. */
.cmd-hotkey {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 11px;
    color: rgb(255, 255, 255);
    -unity-font-style: bold;
    /* Drop-shadow-ish backdrop via semi-opaque text background for legibility. */
    background-color: rgba(0, 0, 0, 0.55);
    padding: 0 3px;
    border-radius: 2px;
}

/* Cost badge — bottom-left corner of the icon. */
.cmd-cost {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 10px;
    color: rgb(255, 224, 102);
    -unity-font-style: bold;
    background-color: rgba(0, 0, 0, 0.55);
    padding: 0 3px;
    border-radius: 2px;
}