/* altered-game-engine — virtual tabletop layout.
   Geometry only; colours come from the site palette variables so themes/dark mode work. */

#age-board { --age-card-w: 64px; --age-gap: 5px; position: relative; }

.age-bar { font-size: .85rem; }

/* Board = table (left) + log column (right). */
#age-main { display: flex; gap: 8px; align-items: stretch; }

/* The table fits on one page: opponent / adventure / you stacked, hands at the outer edges. */
#age-table { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* Right sidebar: action log (top) + chat (bottom). */
#age-side-panel {
    flex: 0 0 auto; width: 210px; align-self: stretch;
    display: flex; flex-direction: column; gap: 8px; max-height: 86vh; min-height: 0;
}
#age-log  { flex: 1 1 45%; overflow-y: auto; background: var(--sand-50, #fbf8f2); border: 1px solid var(--panel-border, rgba(0,0,0,.12)); border-radius: 10px; padding: 8px; }
#age-chat { flex: 1 1 55%; display: flex; flex-direction: column; min-height: 0; background: var(--sand-50, #fbf8f2); border: 1px solid var(--panel-border, rgba(0,0,0,.12)); border-radius: 10px; padding: 8px; }
#age-chat-list { flex: 1 1 auto; overflow-y: auto; min-height: 60px; }
.age-chat-input { display: flex; gap: 4px; margin-top: 6px; }

.age-log-title { font-weight: 700; font-size: .8rem; margin-bottom: 6px; color: var(--neutral-700, #444); }
.age-log-line  { font-size: .76rem; padding: 2px 0; border-bottom: 1px solid var(--panel-border, rgba(0,0,0,.06)); color: var(--neutral-600, #666); }
.age-chat-line { font-size: .78rem; padding: 2px 0; color: var(--neutral-700, #444); word-wrap: break-word; }
.age-log-who { font-weight: 700; }
.age-log-s1 { color: #2563eb; }
.age-log-s2 { color: #dc2626; }
.age-log-s0 { color: var(--neutral-500, #888); }
@media (max-width: 880px) { #age-side-panel { display: none; } }

.age-hand-strip { display: flex; justify-content: center; }
.age-hand-strip .age-zone { background: transparent; border-color: transparent; min-height: 0; padding: 2px; }
.age-hand-strip .age-cards { justify-content: center; min-height: calc(var(--age-card-w) * 1.4); }

/* A player's band: two rows.
   Row 1: board_l | hero | board_r (expeditions).
   Row 2: mana | reserve | landmark (50/50) | deck + discard. */
.age-side {
    position: relative;
    background: var(--sand-100, #f4efe6);
    border: 1px solid var(--panel-border, rgba(0,0,0,.12));
    border-radius: 10px;
    padding: 6px;
    display: flex; flex-direction: column; gap: var(--age-gap);
}
/* First-player token, pinned to the top-right of the hero zone. */
.age-first-token { position: absolute; top: 1px; right: 1px; width: 30px; height: 30px; cursor: grab; z-index: 6; }
.age-first-token img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.age-first-token.age-dragging { opacity: .4; }

/* Sidebar swappable views: log+chat (default) OR token / discard drawer (one at a time). */
#age-logchat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
#age-token-tray, #age-discard-tray {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    background: var(--sand-50, #fbf8f2); border: 1px solid var(--panel-border, rgba(0,0,0,.12));
    border-radius: 10px; padding: 8px;
}
#age-token-tray-cards, #age-discard-cards { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.age-token-card { width: 62px; flex: 0 0 auto; border-radius: 5px; overflow: hidden; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.age-token-card img, .age-token-card altered-card { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; display: block; pointer-events: none; }
.age-col { display: flex; flex-direction: column; gap: var(--age-gap); flex: 0 0 auto; }
.age-col-mana .age-zone { width: calc(var(--age-card-w) * 1.45); }

.age-expe-top { display: flex; gap: var(--age-gap); align-items: stretch; }
.age-expe-top .age-zone[data-zone="board_l"], .age-expe-top .age-zone[data-zone="board_r"] { flex: 1 1 0; min-width: 0; }
.age-hero-slot { flex: 0 0 auto; width: calc(var(--age-card-w) + 14px); position: relative; }
/* Active turn: highlight the hero zone. */
.age-hero-slot.age-hero-active { background: rgba(22,163,74,.22); border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.45); }

.age-bottom { display: flex; gap: var(--age-gap); align-items: stretch; }
.age-bottom .age-zone[data-zone="reserve"], .age-bottom .age-zone[data-zone="landmark"] { flex: 1 1 0; min-width: 0; }
.age-piles2 { display: flex; gap: var(--age-gap); }

/* Mana = compact overlapping stack of face-down backs. */
.age-stack { display: flex; flex-direction: column; align-items: center; }
.age-stack-card { width: var(--age-card-w); aspect-ratio: 210 / 297; border-radius: 5px; overflow: hidden; flex: 0 0 auto; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.age-stack-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.age-stack-card:not(:first-child) { margin-top: calc(var(--age-card-w) * -1.15); }

/* Mana counter under the mana stack. */
.age-mana-ctrl { margin-top: 4px; text-align: center; }
.age-mana-count { font-weight: 700; font-size: .85rem; color: var(--neutral-600, #777); }
.age-mana-count.age-mana-has { color: #2563eb; }
.age-mana-btns { display: flex; gap: 3px; justify-content: center; margin-top: 2px; }
.age-mana-btns button { border: 1px solid var(--panel-border, rgba(0,0,0,.2)); background: var(--sand-50, #fbf8f2); border-radius: 5px; width: 24px; height: 22px; font-weight: 700; line-height: 1; cursor: pointer; color: var(--neutral-700, #444); }
.age-mana-btns button:hover { background: var(--sand-100, #efe9df); }

/* Phase bar. */
#age-phasebar { background: var(--sand-100, #f4efe6); border: 1px solid var(--panel-border, rgba(0,0,0,.12)); border-radius: 8px; padding: 3px 10px; }

/* Turn controls + timers moved to the bottom of the chat panel. */
#age-turnbox { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--panel-border, rgba(0,0,0,.1)); }
#age-pass-btn.age-passed { background: var(--neutral-300, #cbb); color: #fff; }
#age-bothpass { color: #b45309; font-weight: 600; }

/* Victory banner. */
#age-victory {
    position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 9500;
    background: #16a34a; color: #fff; font-weight: 800; font-size: 1.4rem; text-align: center;
    padding: 18px 30px; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: pointer;
}

/* Inactivity nudge over the active player's board. */
#age-nag {
    position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); z-index: 9000;
    background: var(--primary-400, #c2185b); color: #fff; font-weight: 700; text-align: center;
    padding: 12px 20px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.4); cursor: pointer; max-width: 80%;
}

/* Opponent's side is mirrored (face-to-face across the table):
   expeditions nearest the centre, and left/right swapped. */
.age-side.age-opp { flex-direction: column-reverse; }
.age-opp .age-expe-top, .age-opp .age-bottom { flex-direction: row-reverse; }

/* A labelled zone container. */
.age-zone {
    position: relative;
    background: var(--sand-50, #fbf8f2);
    border: 1px dashed var(--panel-border, rgba(0,0,0,.15));
    border-radius: 8px;
    padding: 4px 6px 6px;
    min-height: calc(var(--age-card-w) * 1.4 + 14px);
}
.age-zone.age-row .age-cards { display: flex; flex-wrap: wrap; gap: var(--age-gap); min-height: calc(var(--age-card-w) * 1.4); }
.age-zone.age-pile { width: calc(var(--age-card-w) + 14px); text-align: center; }
.age-zone-label {
    font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--neutral-500, #888); display: flex; justify-content: space-between; gap: 6px; margin-bottom: 3px;
}
.age-zone-label .age-count { font-weight: 700; color: var(--neutral-700, #444); }
.age-zone.age-dragover { border-color: var(--primary-400, #c08); background: var(--primary-300, #fde) ; }

/* Card. */
.age-card {
    position: relative;
    width: var(--age-card-w);
    aspect-ratio: 210 / 297;
    border-radius: 5px;
    overflow: hidden;
    background: var(--neutral-200, #ddd) center/cover no-repeat;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    cursor: grab;
    user-select: none;
    flex: 0 0 auto;
}
.age-card img, .age-card altered-card { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.age-card.age-tilted { transform: rotate(90deg); }
.age-card.age-exhausted { transform: rotate(90deg); }
.age-card.age-dragging { opacity: .4; }

/* Pile: stacked look + big count. */
.age-pile .age-card { width: var(--age-card-w); margin: 0 auto; }
.age-pile .age-pile-count {
    position: absolute; inset: auto 0 4px 0; text-align: center;
    font-weight: 700; font-size: 1.1rem; color: #fff;
    text-shadow: 0 1px 4px #000; pointer-events: none;
}
.age-pile-empty {
    width: var(--age-card-w); aspect-ratio: 210/297; margin: 0 auto;
    border: 1px dashed var(--panel-border, rgba(0,0,0,.2)); border-radius: 5px;
}

/* Token badges on a card. */
.age-tokens { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 3px; pointer-events: none; }
.age-token {
    background: var(--overlay-badge-bg, rgba(0,0,0,.75)); color: #fff;
    font-size: .58rem; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 8px;
}
.age-b-boost    { background: #dc2626; }  /* boost — red numeric badge */
/* Status badges are token icons (anchored / fleeting / asleep). */
.age-badge-icon { display: block; width: 17px; height: 17px; }
.age-badge-icon img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }

/* Tumult row: control columns flank a centered track (track stays centered). */
#age-tumult-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; }
#age-tumult-row > .age-tumult { grid-column: 2; }
#age-tumult-left  { grid-column: 1; justify-self: start; }
#age-tumult-right { grid-column: 3; justify-self: end; }
.age-tumult-ctrl { display: flex; flex-direction: column; gap: 4px; }
.age-timer {
    font-size: .78rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
    background: var(--sand-50, #fbf8f2); border: 1px solid var(--panel-border, rgba(0,0,0,.12)); color: var(--neutral-600, #666);
}
.age-timer.age-timer-active { background: #16a34a; color: #fff; border-color: #16a34a; }
#age-endturn-btn.age-myturn { box-shadow: 0 0 0 3px rgba(22,163,74,.45); }

/* Arena view (single centred card, rotated 90° from a portrait source). */
.age-arena { position: relative; width: 214px; height: 150px; }
.age-arena img {
    position: absolute; top: 50%; left: 50%; width: 150px; height: 214px; object-fit: cover;
    transform: translate(-50%, -50%) rotate(90deg); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* Tumult: 5 landscape cards in a row, each split into two half-zones. */
.age-tumult {
    display: flex; align-items: center; gap: 6px; justify-content: center;
    background: var(--sand-200, #ece4d6); border: 1px solid var(--panel-border, rgba(0,0,0,.12));
    border-radius: 10px; padding: 8px; margin: 8px 0; flex-wrap: wrap;
}
/* Landscape card built from a PORTRAIT source image rotated 90°. */
.age-tcard {
    position: relative; width: 150px; height: 105px; border-radius: 6px; overflow: hidden;
    background: var(--neutral-200, #ddd); box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.age-tcard > img {
    position: absolute; top: 50%; left: 50%;
    width: 105px; height: 150px;            /* = cardHeight × cardWidth, so rotate(90°) fills the cell */
    object-fit: cover;
    transform: translate(-50%, -50%) rotate(90deg);
}
.age-adv-flip { cursor: pointer; }          /* face-down middle card: click to reveal */
.age-tcard-180 > img { transform: translate(-50%, -50%) rotate(270deg); } /* left card: +180° */

/* Biome overlay replacing a half of an adventure card (Forest / Mountain / Ocean).
   Image rotated 90° (portrait source) and clipped to its half, aligned with the card art. */
.age-biome { position: absolute; top: 0; height: 100%; width: 50%; overflow: hidden; pointer-events: none; z-index: 1;
    outline: 2px solid #fbbf24; outline-offset: -2px; } /* frame = the half was changed */
.age-biome-l { left: 0; }
.age-biome-r { left: 50%; }
.age-biome img { position: absolute; top: 50%; width: 105px; height: 150px; object-fit: cover; }
.age-biome-l img { left: 75px; transform: translate(-50%, -50%) rotate(90deg); }
.age-biome-r img { left: 0;    transform: translate(-50%, -50%) rotate(90deg); }

/* 2×2 pawn quadrants: top-left / top-right / bottom-left / bottom-right. */
.age-tquad {
    position: absolute; width: 50%; height: 50%;
    display: flex; align-items: center; justify-content: center; gap: 3px;
}
.age-q-tl { top: 0; left: 0; }
.age-q-tr { top: 0; right: 0; }
.age-q-bl { bottom: 0; left: 0; }
.age-q-br { bottom: 0; right: 0; }
.age-tquad.age-dragover { background: var(--primary-300, rgba(200,0,136,.25)); outline: 2px solid var(--primary-400, #c08); outline-offset: -2px; }
.age-marker {
    width: 32px; height: 32px; border-radius: 50%; cursor: grab;
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.age-marker.age-seat1 { background: #2563eb; }
.age-marker.age-seat2 { background: #dc2626; }
/* Faction token image — no circle/border, the artwork stands on its own. */
.age-marker.age-marker-img { background: none; border: none; border-radius: 0; box-shadow: none; }
.age-marker.age-marker-img img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.age-marker.age-dragging { opacity: .4; }

/* Hover preview — enlarged card. */
.age-preview {
    position: fixed; z-index: 9300; width: 300px; pointer-events: none;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,.55));
}
.age-preview img, .age-preview altered-card {
    width: 100%; height: auto; display: block; border-radius: 10px;
}
/* Bigger badges/tokens on the enlarged hover image (centering inherited from .age-tokens). */
.age-preview .age-tokens { gap: 6px; }
.age-preview .age-token { font-size: 1.05rem; padding: 4px 9px; border-radius: 13px; }
.age-preview .age-badge-icon { width: 42px; height: 42px; }

/* Context menu. */
.age-menu {
    position: fixed; z-index: 9200; min-width: 180px;
    background: var(--modal-panel-bg, #fff); border: 1px solid var(--panel-border, rgba(0,0,0,.15));
    border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: 4px; overflow: hidden;
}
.age-menu button {
    display: block; width: 100%; text-align: left; border: 0; background: none;
    padding: 7px 12px; font-size: .85rem; color: var(--neutral-700, #333); border-radius: 5px;
}
.age-menu button:hover { background: var(--sand-100, #f0ece3); }
.age-menu .age-menu-sep { height: 1px; background: var(--panel-border, rgba(0,0,0,.1)); margin: 4px 0; }
.age-menu .age-menu-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--neutral-500, #888); padding: 3px 12px 2px; }

/* Lobby seat cards. */
.age-seat-card { border: 1px solid var(--panel-border, rgba(0,0,0,.12)); border-radius: 10px; padding: 12px; }
.age-seat-card.age-seat-ready { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.25); }
.age-seat-hero { width: 54px; aspect-ratio: 210/297; border-radius: 5px; object-fit: cover; background: var(--neutral-200,#ddd); }

/* Fullscreen: fill the screen and center the table. */
#age-board:fullscreen, #age-board:-webkit-full-screen {
    background: var(--sand-200, #ece4d6); padding: 10px; overflow: auto;
}
#age-board:fullscreen #age-table { max-width: 1400px; margin: 0 auto; }

@media (max-width: 640px) {
    #age-board { --age-card-w: 44px; }
    .age-side { flex-wrap: wrap; }
}