/*
 * Game.Mobile.css — Mobile landscape UI for Dominion.
 *
 * Only active when #mobile-game is displayed (position:fixed overlay).
 * Scaling.js's body transform is patched out when this UI is active
 * (see MobileGame.js), so position:fixed correctly fills the viewport.
 *
 * Design canvas: phone-width × phone-height (device viewport).
 * The layout mirrors mobile-landscape-v3.html rev4.
 *
 * All class names are prefixed mg- to avoid collisions with the
 * desktop game classes.  Card-structure classes (expandedBorder,
 * outerBorder, etc.) and color classes come from Card.css and
 * Color.Dark.css; the dark-mode colour rules below are scoped to
 * #mobile-game so cards always render in dark mode here regardless
 * of the user's global theme setting.
 */

/* ════════════════════════════════════════════════════════════════
   DARK-MODE CARD COLOUR SCOPING
   Ensures cards inside #mobile-game always use dark-mode classes
   even if the user chose Light in Settings.
   ════════════════════════════════════════════════════════════════ */
#mg-inner .actionDark,
#mg-inner .guildDark     { background-color: #B4B4B4; }
#mg-inner .attackDark    { background-color: #FF4040; }
#mg-inner .reactionDark,
#mg-inner .defenseDark   { background-color: #88C4FF; }
#mg-inner .durationDark  { background-color: #FFCB6A; }
#mg-inner .treasureDark,
#mg-inner .TreasureDark,
#mg-inner .goldDark      { background-color: #FFDF2B; }
#mg-inner .victoryDark   { background-color: #65DA65; }
#mg-inner .curseDark     { background-color: #DCA9E9; }
#mg-inner .shelterDark   { background-color: #FFB6C1; }
#mg-inner .prizeColor,
#mg-inner .looterDark,
#mg-inner .knightDark    { background-color: #B4B4B4; }
#mg-inner .ruinsDark     { background-color: #8B4513; }
#mg-inner .ancientoneDark{ background-color: #63D1F4; }
#mg-inner .eventDark     { background-color: #b35900; }

#mg-inner .BeginnerDark     { background-image: url('../../DominionImages/Beginner.DARK.png');     background-size: cover; }
#mg-inner .IntermediateDark { background-image: url('../../DominionImages/Intermediate.DARK.png'); background-size: cover; }
#mg-inner .AdvancedDark     { background-image: url('../../DominionImages/Advanced.DARK.png');     background-size: cover; }
#mg-inner .ExpertDark       { background-image: url('../../DominionImages/Expert.DARK.png');       background-size: cover; }
#mg-inner .MasterDark       { background-image: url('../../DominionImages/Master.DARK.png');       background-size: cover; }

/* Text colour classes — ensure card names/types always read correctly */
#mg-inner .background    { background-color: #202020; }
#mg-inner .action,
#mg-inner .guild         { color: #B4B4B4; }
#mg-inner .attack        { color: #FF4040; }
#mg-inner .reaction,
#mg-inner .defense       { color: #88C4FF; }
#mg-inner .duration      { color: #FFCB6A; }
#mg-inner .treasure,
#mg-inner .gold          { color: #FFDF2B; }
#mg-inner .victory       { color: #65DA65; }
#mg-inner .curse         { color: #DCA9E9; }
#mg-inner .ruins,
#mg-inner .looter,
#mg-inner .knight        { color: #B4B4B4; }

/* ════════════════════════════════════════════════════════════════
   PALETTE  (custom properties scoped to #mobile-game)
   ════════════════════════════════════════════════════════════════ */
#mobile-game {
    --mg-bg:     #202020;
    --mg-surf:   #2a2a2a;
    --mg-surf2:  #333;
    --mg-text:   #DFDFDF;
    --mg-dim:    #888;
    --mg-border: #555;
    --mg-accent: #e5483a;
    --mg-rad:    6px;
}

/* ════════════════════════════════════════════════════════════════
   ROOT CONTAINER + INNER DESIGN CANVAS
   #mobile-game fills the entire viewport.
   #mg-inner is the 844×390 design canvas; JS scales it to fill
   the viewport while maintaining aspect ratio (letterboxed).
   Body transform is cleared by Scaling.js/MobileGame.js when active.
   ════════════════════════════════════════════════════════════════ */
#mobile-game {
    display: none;           /* JS sets display:block to activate */
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--mg-bg); /* letterbox / pillarbox colour */
    box-sizing: border-box;
}

/* JS applies: transform: translate(tx,ty) scale(s)
   where s = min(vw/844, vh/390), tx/ty center the canvas. */
#mg-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 844px;
    height: 390px;
    transform-origin: 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mg-bg);
    color: var(--mg-text);
    font-family: 'Times New Roman', Times, serif;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

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

/* ════════════════════════════════════════════════════════════════
   ROW 1 — HEADER  46px
   ════════════════════════════════════════════════════════════════ */
.mg-hdr {
    flex: 0 0 46px;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #1a1a1a;
    border-bottom: 1px solid var(--mg-border);
    gap: 0;
}
/* NOTE: the #mg-inner prefix is required on any rule that sets margins —
   the `#mg-inner *` reset above has ID specificity and silently zeroes
   margins declared with a bare class selector. */
#mg-inner .mg-hdr-sep {
    width: 1px; height: 28px;
    background: var(--mg-border);
    margin: 0 24px;
    flex-shrink: 0;
}
/* Settings button sits just after the stats row — a roomy touch target,
   slightly taller/larger glyph than the other header buttons */
#mg-inner .mg-hbtn-settings {
    margin-left: 16px;
    padding: 7px 12px;
    min-width: 48px;
    font-size: 16px;
}
/* End Turn — primary action, a bit bigger than the other header buttons */
#mg-inner #mg-end-turn {
    padding: 8px 18px;
    font-size: 14px;
}
/* Center Play Treasure within the header's left section: 10px header
   padding + 14px margin = the separator's 24px gap on the other side. */
#mg-inner .mg-hbtn-play { margin-left: 14px; }
.mg-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mg-stat {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 15px;
    font-weight: bold;
}
/* Fixed-width value slots: room for 3 digits is reserved up front, so a
   treasure total going 9 -> 24 -> 108 never shifts or widens the bar. */
.mg-stat > span {
    display: inline-block;
    min-width: 26px;
    text-align: left;
}
.mg-stat img {
    width: 20px;
    height: 20px;
}
.mg-stat-coins   { color: #FFDF2B; }
.mg-stat-vp      { color: #65DA65; }
.mg-stat-cointok { color: #FFDF2B; }
.mg-stat-plague  { color: #DCA9E9; }
.mg-stat-turn    { color: var(--mg-dim); }
.mg-stat-btn     { cursor: pointer; }
.mg-stat-btn:active { opacity: .65; }
.mg-opp-info     { font-size: 12px; color: var(--mg-dim); }
.mg-opp-info b { color: var(--mg-text); }
.mg-hdr-spacer { flex: 1; }
.mg-hdr-btns   { display: flex; gap: 6px; align-items: center; }

.mg-hbtn {
    padding: 5px 12px;
    border: 1px solid var(--mg-border);
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    background: var(--mg-surf2);
    color: var(--mg-text);
    white-space: nowrap;
    flex-shrink: 0;
}
.mg-hbtn:active  { opacity: .7; }
.mg-hbtn-pri     { background: var(--mg-accent); color: #fff; border-color: var(--mg-accent); }
.mg-hbtn-icon    { padding: 5px 8px; font-size: 15px; }
.mg-hbtn-play    { padding: 5px 14px; }

/* ════════════════════════════════════════════════════════════════
   ROW 2 — MIDDLE  244px  (supply + log)
   Supply: 580px fixed width.  Log: fills remaining width.
   ════════════════════════════════════════════════════════════════ */
.mg-middle {
    flex: 0 0 244px;
    height: 244px;
    display: flex;
    border-bottom: 1px solid var(--mg-border);
    overflow: hidden;
}

/* ── Supply section ── */
.mg-supply-section {
    flex: 0 0 580px;
    width: 580px;
    height: 244px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--mg-border);
    overflow: hidden;
}

/* View tabs (Kingdom / Standard) — now live in the log column header */
.mg-s-tab {
    padding: 2px 10px;
    border: 1px solid var(--mg-border);
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    background: transparent;
    color: var(--mg-dim);
    font-family: inherit;
    flex-shrink: 0;
    white-space: nowrap;
}
.mg-s-tab-active { background: var(--mg-surf2); color: var(--mg-text); }

/* Tile view containers — full height of supply section, display toggled by JS */
.mg-supply-tiles         { display: none; width: 580px; max-height: 244px; overflow-y: auto; overflow-x: hidden; }
.mg-supply-tiles.mg-visible { display: block; }

/* 5-col kingdom grid — rows auto-generated, scrolls past 3 rows */
.mg-kingdom-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 68px;
    gap: 4px;
    padding: 4px 6px;
    width: 580px;
}
/* 3-col standard grid — rows auto-generated, scrolls past 3 rows */
.mg-standard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 68px;
    gap: 4px;
    padding: 4px 6px;
    width: 580px;
}

/* Supply tile */
.mg-tile {
    border-radius: var(--mg-rad);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--mg-border);
    background: var(--mg-surf);
    transition: transform .08s;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
}
.mg-tile:active:not(.mg-tile-empty) { transform: scale(.93); }

.mg-tile-empty {
    opacity: .12;
    pointer-events: none;
    cursor: default;
}
.mg-tile-depleted { opacity: .55; }

/* Type-tinted borders + background tint */
.mg-tile-action     { border-color: #B4B4B4; background: rgba(180,180,180,.10); }
.mg-tile-guild      { border-color: #B4B4B4; background: rgba(180,180,180,.10); }
.mg-tile-reaction   { border-color: #88C4FF; background: rgba(136,196,255,.13); }
.mg-tile-defense    { border-color: #88C4FF; background: rgba(136,196,255,.13); }
.mg-tile-duration   { border-color: #FFCB6A; background: rgba(255,203,106,.13); }
.mg-tile-treasure   { border-color: #FFDF2B; background: rgba(255,223,43,.16); }
.mg-tile-gold       { border-color: #FFDF2B; background: rgba(255,223,43,.16); }
.mg-tile-victory    { border-color: #65DA65; background: rgba(101,218,101,.13); }
.mg-tile-curse      { border-color: #DCA9E9; background: rgba(220,169,233,.13); }
.mg-tile-attack     { border-color: #FF4040; background: rgba(255,64,64,.11); }
.mg-tile-ruins      { border-color: #B4673C; background: rgba(180,103,60,.13); }
.mg-tile-ancientone { border-color: #63D1F4; background: rgba(99,209,244,.13); }
.mg-tile-event      { border-color: #b35900; background: rgba(179,89,0,.13); }

.mg-tile-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 5px;
    background: rgba(0,0,0,.25);
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex: 0 0 auto;
}
.mg-tile-cost {
    font-size: 11px;
    font-weight: bold;
    color: #FFDF2B;
    background: rgba(255,223,43,.12);
    border-radius: 3px;
    padding: 0 4px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.mg-tile-name {
    font-size: 11px;
    font-weight: bold;
    flex: 1;
    margin: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mg-tile-count { font-size: 10px; color: var(--mg-dim); flex-shrink: 0; }
/* Pile-count depletion colours (mirrors desktop _pileCountColor):
   full = green, below half = orange, empty = red, otherwise default. */
#mg-inner .mg-cnt-victory  { color: #65DA65; }
#mg-inner .mg-cnt-duration { color: #FFCB6A; }
#mg-inner .mg-cnt-attack   { color: #FF4040; font-weight: 700; }
#mg-inner .mg-cnt-action   { color: var(--mg-dim); }
.mg-tile-body  {
    flex: 1;
    min-height: 0;
    padding: 3px 5px;
    font-size: 10px;
    line-height: 1.35;
    overflow: hidden;
    color: var(--mg-text);
}
.mg-tile-type {
    font-size: 9px;
    padding: 2px 5px;
    border-top: 1px solid rgba(255,255,255,.05);
    flex: 0 0 auto;
    letter-spacing: .3px;
}

/* Tile type label colours (bottom strip) */
.mg-type-action,  .mg-type-guild  { color: #B4B4B4; }
.mg-type-attack                   { color: #FF4040; }
.mg-type-reaction,.mg-type-defense{ color: #88C4FF; }
.mg-type-duration                 { color: #FFCB6A; }
.mg-type-treasure,.mg-type-gold   { color: #FFDF2B; }
.mg-type-victory                  { color: #65DA65; }
.mg-type-curse                    { color: #DCA9E9; }
.mg-type-ruins                    { color: #8B4513; }
.mg-type-ancientone               { color: #63D1F4; }
.mg-type-event                    { color: #b35900; }

/* Tile name colours (primary type — mirrors desktop cardName coloring) */
.mg-name-action,  .mg-name-guild  { color: #B4B4B4; }
.mg-name-attack                   { color: #FF4040; }
.mg-name-reaction,.mg-name-defense{ color: #88C4FF; }
.mg-name-duration                 { color: #FFCB6A; }
.mg-name-treasure,.mg-name-gold   { color: #FFDF2B; }
.mg-name-victory                  { color: #65DA65; }
.mg-name-curse                    { color: #DCA9E9; }
.mg-name-ruins                    { color: #8B4513; }
.mg-name-ancientone               { color: #63D1F4; }
.mg-name-event                    { color: #b35900; }

/* ── Log column ── */
.mg-log-col {
    flex: 1;
    height: 244px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mg-log-hdr {
    flex: 0 0 28px;
    height: 28px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    gap: 6px;
    background: #1a1a1a;
    border-bottom: 1px solid var(--mg-border);
}
.mg-log-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 3px 9px 4px;
    scrollbar-width: thin;
}
.mg-log-line {
    font-size: 11px;
    line-height: 1.3;
    color: var(--mg-dim);
}
/* Colour classes used inside game log messages — always dark */
.mg-log-body .action   { color: #B4B4B4; }
.mg-log-body .attack   { color: #FF4040; }
.mg-log-body .reaction { color: #88C4FF; }
.mg-log-body .duration { color: #FFCB6A; }
.mg-log-body .treasure { color: #FFDF2B; }
.mg-log-body .victory  { color: #65DA65; }
.mg-log-body .curse    { color: #DCA9E9; }

/* ════════════════════════════════════════════════════════════════
   ROW 3 — HAND  (flex:1 — fills remaining space below supply)
   Cards at scale(0.6) clipped; hand scrolls right for more.
   ════════════════════════════════════════════════════════════════ */
.mg-hand-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid var(--mg-border);
}
.mg-hand-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 2px 10px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.mg-hand-scroll::-webkit-scrollbar { display: none; }

/* Slot: 150px wide — clips scale(0.6) card (150×126px rendered) to show
   top ~half including name, cost, and art. */
.mg-hand-slot {
    flex: 0 0 150px;
    width: 150px;
    height: 58px;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    cursor: pointer;
    border-radius: 9px;   /* = 15px × 0.6 → matches outerBorder corners */
}
#mg-inner .mg-hand-slot .expandedBorder {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.6);
    transform-origin: top left;
    float: none !important;
    zoom: unset;
}

/* Cards without a pile count (hand cards, dialog choices, Events) still
   render the .cardCount pill as an empty grey stub at the card's top-right,
   which reads as the card being cut off.  Hide the pill when empty —
   visibility (not display) keeps the card's internal layout untouched. */
#mg-inner .cardCount:empty { visibility: hidden; }

/* ════════════════════════════════════════════════════════════════
   ROW 4 — DIALOG TABS  26px
   ════════════════════════════════════════════════════════════════ */
.mg-dialog-tabs {
    flex: 0 0 26px;
    height: 26px;
    display: flex;
    align-items: stretch;
    background: #1a1a1a;
    border-top: 1px solid var(--mg-border);
}
.mg-dtab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: var(--mg-dim);
    cursor: pointer;
    border-right: 1px solid var(--mg-border);
    -webkit-tap-highlight-color: transparent;
}
.mg-dtab:last-child { border-right: none; }
.mg-dtab:active     { background: var(--mg-surf2); }
.mg-dtab.mg-dtab-active {
    background: var(--mg-surf2);
    color: var(--mg-text);
    box-shadow: inset 0 2px 0 var(--mg-accent);
}

/* ════════════════════════════════════════════════════════════════
   DIALOG DISMISS OVERLAY — transparent, sits below the panel,
   above game content; intercepts clicks to close the panel.
   ════════════════════════════════════════════════════════════════ */
.mg-dialog-dismiss {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 196px; /* 26px tab strip + 170px panel */
    z-index: 19;
    display: none;
    cursor: pointer;
}
.mg-dialog-dismiss.active { display: block; }

/* ════════════════════════════════════════════════════════════════
   DIALOG PANEL — slides up from above the tab strip
   position:absolute keeps it inside #mg-inner so it scales with
   the canvas; bottom:26px clears the tab bar.
   ════════════════════════════════════════════════════════════════ */
.mg-dialog-panel {
    position: absolute;
    bottom: 26px;
    left: 0;
    width: 844px;
    height: 0;
    overflow: hidden;
    background: var(--mg-surf);
    border-top: 2px solid var(--mg-accent);
    transition: height 0.18s ease;
    z-index: 20;
}
.mg-dialog-panel.open { height: 170px; }

.mg-dpanel {
    display: none;
    width: 844px;
    height: 170px;
    overflow-x: auto;
    overflow-y: auto;
    padding: 8px 10px;
    box-sizing: border-box;
    scrollbar-width: thin;
}
.mg-dpanel.mg-dpanel-active { display: block; }

/* Horizontal row of player cards (Players + In Play panels) */
.mg-dp-players-row {
    display: flex;
    gap: 6px;
    min-width: max-content;
}
.mg-dp-player {
    flex: 0 0 124px;
    background: var(--mg-surf2);
    border: 1px solid var(--mg-border);
    border-radius: 4px;
    padding: 5px 7px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 80px;
}
.mg-dp-player-active { border-color: var(--mg-accent); }
.mg-dp-name {
    font-size: 11px;
    font-weight: bold;
    color: var(--mg-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mg-dp-name-active { color: var(--mg-accent); }
.mg-dp-stat-row {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: var(--mg-dim);
    flex-wrap: wrap;
}
.mg-dp-stat-row b { color: var(--mg-text); }
.mg-dp-card-row {
    font-size: 10px;
    color: var(--mg-dim);
    line-height: 1.35;
}
.mg-dp-empty { color: var(--mg-dim); font-size: 11px; font-style: italic; }

/* Vertical list panels (Cards, Trash, VP, Deck, Set Aside) */
.mg-dp-list { display: flex; flex-direction: column; gap: 2px; }
.mg-dp-cols { columns: 2; gap: 14px; }
.mg-dp-list-item { font-size: 11px; color: var(--mg-dim); line-height: 1.35; }
.mg-dp-list-item b { color: var(--mg-text); font-weight: bold; }
.mg-dp-section-hdr {
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--mg-dim);
    margin-top: 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--mg-border);
    padding-bottom: 1px;
}
.mg-dp-section-hdr:first-child { margin-top: 0; }

/* ════════════════════════════════════════════════════════════════
   UNIFIED CARD POPUP
   Used for both supply-tile taps (Buy) and hand-card taps (Play).
   Positioned by JS near the tapped element.
   Backdrop is transparent full-screen; tap it to close.
   ════════════════════════════════════════════════════════════════ */
.mg-card-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(0,0,0,.55);
}
.mg-card-backdrop.open { display: block; }

/* ════════════════════════════════════════════════════════════════
   CARD POPUP — card-forward modal centred on the design canvas.
   The card is displayed at scale 1.4 (250×1.4=350 × 210×1.4=294).
   No separate text panel — the card itself carries all information.
   Close by tapping anywhere outside the popup (backdrop).
   ════════════════════════════════════════════════════════════════ */
.mg-card-popup {
    display: none;
    position: absolute;
    z-index: 51;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--mg-surf);
    border: 1px solid var(--mg-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.75);
    flex-direction: column;
    align-items: center;
    padding: 8px 10px 10px;
    gap: 8px;
}
.mg-card-popup.open { display: flex; }

/* Card slot: sized to the scaled card (250*1.4 × 210*1.4) */
.mg-cp-card-slot {
    width: 350px;
    height: 294px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    flex-shrink: 0;
}
#mg-inner .mg-cp-card-slot .expandedBorder {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.4);
    transform-origin: top left;
    float: none !important;
    zoom: unset;
}

.mg-cp-action {
    display: block;
    width: 100%;
    padding: 14px 8px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
}
.mg-cp-buy              { background: var(--mg-accent); color: #fff; }
.mg-cp-play-action      { background: rgba(180,180,180,.2);  color: #B4B4B4; }
.mg-cp-play-treasure    { background: rgba(255,223,43,.18);  color: #FFDF2B; }
.mg-cp-play-victory     { background: var(--mg-surf2); color: var(--mg-dim); }
.mg-cp-play-curse       { background: var(--mg-surf2); color: var(--mg-dim); }
.mg-cp-play-attack      { background: rgba(255,64,64,.18);   color: #FF4040; }
.mg-cp-play-reaction    { background: rgba(136,196,255,.18); color: #88C4FF; }
.mg-cp-play-duration    { background: rgba(255,203,106,.18); color: #FFCB6A; }
.mg-cp-play-ruins       { background: var(--mg-surf2); color: var(--mg-dim); }
.mg-cp-action:disabled  { opacity: .5; cursor: not-allowed; }
.mg-cp-action:active:not(:disabled) { opacity: .72; }

/* ════════════════════════════════════════════════════════════════
   SETTINGS OVERLAY  (tap outside the box to close)
   ════════════════════════════════════════════════════════════════ */
.mg-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 52;
    align-items: center;
    justify-content: center;
}
.mg-overlay.open { display: flex; }

/* Chat button — normal and unread states */
.mg-hbtn-chat { margin-left: 0; }
.mg-hbtn-unread  {
    color: #FFD700;
    border-color: #FFD700;
    animation: mg-chat-pulse 1s ease-in-out infinite;
}
@keyframes mg-chat-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* Chat overlay — same base as .mg-overlay but larger box */
.mg-chat-overlay { z-index: 53; }

.mg-chat-box {
    background: var(--mg-surf);
    border: 1px solid var(--mg-border);
    border-radius: 10px;
    width: 720px;
    height: 310px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.75);
}
.mg-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--mg-text);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mg-chat-msg { line-height: 1.45; }
.mg-chat-input-row {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--mg-border);
    background: var(--mg-surf2);
    flex-shrink: 0;
    align-items: center;
}

.mg-settings-box {
    background: var(--mg-surf);
    border: 1px solid var(--mg-border);
    border-radius: 8px;
    width: 480px;
    max-height: 340px;
    overflow-y: auto;
}
.mg-set-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid var(--mg-border);
    background: #1a1a1a;
    position: sticky;
    top: 0;
}
.mg-set-close {
    background: var(--mg-surf2);
    border: 1px solid var(--mg-border);
    color: var(--mg-text);
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}
.mg-set-section { padding: 10px 16px 4px; }
.mg-set-section h4 {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mg-dim);
    margin-bottom: 8px;
}
.mg-set-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 14px;
    font-size: 13px;
    gap: 8px;
}
.mg-set-row span { color: var(--mg-text); }
.mg-set-grp { display: flex; gap: 8px; flex-wrap: wrap; }

/* Feedback row stays horizontal */
.mg-set-row-fill { flex-direction: row; align-items: center; justify-content: flex-start; }
/* Links row stays horizontal */
.mg-set-links { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }

/* Taller buttons for easier mobile tapping */
.mg-set-btn {
    padding: 10px 16px;
    border: 1px solid var(--mg-border);
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    background: transparent;
    color: var(--mg-dim);
    font-family: inherit;
    white-space: nowrap;
    min-height: 40px;
}
.mg-set-btn:active { opacity: .75; }
.mg-set-btn-on { background: var(--mg-accent); color: #fff; border-color: var(--mg-accent); }
.mg-set-btn-danger { color: #FF6B6B; border-color: #FF6B6B; }
.mg-set-btn-danger:active { background: rgba(255,107,107,.15); }

.mg-set-divider { border: none; border-top: 1px solid var(--mg-border); margin: 4px 16px 2px; }

/* Input fields inside settings rows */
.mg-set-input {
    background: var(--mg-bg);
    border: 1px solid var(--mg-border);
    border-radius: 4px;
    color: var(--mg-text);
    padding: 9px 8px;
    font-size: 12px;
    font-family: inherit;
    width: 110px;
    min-height: 40px;
    box-sizing: border-box;
}
.mg-set-input-grow { flex: 1; width: auto; min-width: 0; }
.mg-set-input::placeholder { color: var(--mg-dim); }

/* Username color swatches */
.mg-set-colors { display: flex; flex-wrap: wrap; gap: 5px; }
.mg-set-colors .settingsColor {
    float: none; margin: 0;
    width: 24px; height: 24px;
    border-radius: 3px;
}

.mg-set-link {
    display: inline-block;
    padding: 9px 12px;
    border: 1px solid var(--mg-border);
    border-radius: 4px;
    color: var(--mg-accent);
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    min-height: 40px;
    box-sizing: border-box;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   FILL SEATS WITH AI  (pre-game, creator only)
   Mobile twin of the desktop #fillWithAIButton: floats centered over
   the (empty, pre-game) board while a PvP game waits for players.
   Shown/hidden by MobileGame.js via the showFillWithAI /
   hideFillWithAI server calls.  Big and dashed so it reads as a
   placeholder action, not part of the board.
   ════════════════════════════════════════════════════════════════ */
.mg-fill-ai {
    display: none;
    position: absolute;
    /* Centered over the LOG column (the mobile message container): the supply
     * occupies the left 580px of the 844px canvas, the log the remaining right
     * side; (580+844)/2 = 712px → 84.4%.  Vertically centered in the middle
     * row (header 46px + middle 244px/2 = 168px → 43%). */
    left: 84.4%;
    top: 43%;
    transform: translate(-50%, -50%);
    z-index: 40;
    padding: 16px 26px;
    font-size: 17px;
    font-weight: bold;
    font-family: inherit;
    color: #FFD75E;
    background: var(--mg-surf);
    border: 2px dashed var(--mg-border);
    border-radius: var(--mg-rad);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mg-fill-ai.open { display: block; }
.mg-fill-ai:active { opacity: .7; }
.mg-fill-ai:disabled { opacity: .5; cursor: default; }
#mobile-game.mg-light .mg-fill-ai { color: #8A6D00; }

/* ════════════════════════════════════════════════════════════════
   REQUEST BANNER & PROMPT OVERLAY
   Shown when the server is waiting for the player to make a choice.
   ════════════════════════════════════════════════════════════════ */

/* Thin banner for hand / supply selection requests */
.mg-req-banner {
    display: none;
    background: rgba(90,143,208,0.18);
    border-top: 1px solid rgba(90,143,208,0.5);
    color: #8fb8e0;
    font-size: 11px;
    padding: 3px 10px;
    text-align: center;
    flex-shrink: 0;
}
.mg-req-banner.open { display: block; }

/* Full-canvas overlay for option / card selection requests */
.mg-req-overlay {
    display: none;
    position: absolute;
    inset: 0;
    /* No full-screen dim — game board stays fully visible for ban-phase decisions */
    background: none;
    z-index: 50;
    align-items: flex-end;
    justify-content: stretch;
    /* Pass taps through the transparent area so supply tabs remain interactive */
    pointer-events: none;
}
.mg-req-overlay.open { display: flex; }

.mg-req-box {
    pointer-events: auto;  /* re-enable for the box itself */
    background: rgba(22,22,38,0.97);
    border-top: 2px solid var(--mg-accent);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 10px 16px 14px;
    width: 100%;
    box-sizing: border-box;
    /* Tall enough for one full row of 0.9-scale cards + message + buttons. */
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.75);
}

/* Minimize control — top-right corner of the request box */
.mg-req-min {
    position: absolute;
    top: 4px;
    right: 10px;
    z-index: 2;
    background: #333;
    border: 1px solid #777;
    border-radius: 4px;
    color: #ccc;
    font-size: 10px;
    padding: 3px 8px;
    cursor: pointer;
    font-family: inherit;
}
.mg-req-min:hover { background: #444; color: #fff; }

/* The box needs position:relative so the minimize button anchors to it. */
.mg-req-box { position: relative; }

/* Tap-to-restore pill (shown while an overlay is minimized) */
.mg-req-restore {
    display: none;
    background: rgba(229,72,58,0.22);
    border-top: 1px solid var(--mg-accent);
    color: #ffb0a8;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
}
.mg-req-restore.open { display: block; }
.mg-eog-pill {
    background: rgba(101,218,101,0.18);
    border-top: 1px solid #4ac06a;
    color: #a8e8b0;
}

.mg-req-msg {
    color: #c0d8f0;
    font-size: 12px;
    margin-bottom: 10px;
    font-style: italic;
    text-align: center;
}

.mg-req-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
    align-items: stretch;
}

/* 1-option + optional: accept centered, decline anchored to far right */
.mg-req-body-split {
    position: relative;
    justify-content: center;
}
.mg-req-decline-side {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(60,20,20,0.85) !important;
    border-color: #a06060 !important;
    color: #e0b0b0 !important;
}
.mg-req-decline-side:hover,
.mg-req-decline-side:active { background: rgba(90,25,25,0.95) !important; }

/* Option buttons */
.mg-req-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 5px 6px;
    padding: 12px 18px;
    min-width: 90px;
    min-height: 54px;
    background: #1e3a5f;
    border: 2px solid #4a7cc0;
    border-radius: var(--mg-rad);
    color: #d0e8ff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, transform 0.08s;
    line-height: 1.3;
}
.mg-req-option:active { transform: scale(.93); }
.mg-req-option:hover,
.mg-req-option.selected { background: #2a5f9f; border-color: #6a9cdf; }

/* Card grid inside overlay */
.mg-req-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
/* Card tiles: full 250×210 card scaled to 0.9 so exactly THREE fit per
   row (3 × 229 + gaps = 699px < 812px usable; 4 would need 934px) and
   card text stays readable.  Most selection dialogs offer 3 cards, so
   the common case needs no scrolling. */
.mg-req-card-wrap {
    cursor: pointer;
    border-radius: 13px;
    border: 2px solid transparent;
    transition: border-color 0.15s;
    width: 229px;
    height: 193px;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
}
#mg-inner .mg-req-card-wrap .expandedBorder {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.9);
    transform-origin: top left;
    float: none !important;
    /* Card.Expanded.css (the production default) puts zoom:1.2 on
       .expandedBorder — without unsetting it the card renders larger than
       this wrap and clips at the right/bottom (ban-phase bug). */
    zoom: unset;
}
.mg-req-card-wrap:hover { border-color: var(--mg-accent); }

/* Toggled-on states for multi-select options / cards */
.mg-req-option.mg-opt-on {
    background: #2a5f9f;
    border-color: #ffdf2b;
    box-shadow: inset 0 0 0 1px #ffdf2b;
}
/* Green border + check badge — readable on every card colour (a yellow
   highlight disappears against Treasure card borders). */
.mg-req-card-wrap.mg-card-on {
    border-color: #4ac06a;
    box-shadow: 0 0 8px rgba(74,192,106,0.8);
}
.mg-req-card-wrap.mg-card-on::after {
    content: '\2713';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: #1e5f2a;
    border: 1px solid #4ac06a;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    z-index: 2;
}

/* Green confirm/accept button */
.mg-req-confirm {
    background: #1e5f2a;
    border-color: #4ac06a;
    color: #d0ffd8;
}
.mg-req-confirm:hover { background: #2a7f3a; border-color: #6adf8a; }
.mg-req-confirm:disabled {
    opacity: .45;
    cursor: default;
    background: #1e5f2a;
    border-color: #4ac06a;
}

/* Number stepper (SelectNumberRequest) */
.mg-num-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    flex-wrap: wrap;
}
.mg-num-btn    { min-width: 64px; }
.mg-num-minmax { min-height: 40px; padding: 6px 12px; font-size: 11px; }
.mg-num-val {
    min-width: 64px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: #ffdf2b;
}

/* Card-name picker (NameCardRequest) */
.mg-name-filter {
    display: block;
    width: 60%;
    margin: 0 auto 8px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    background: #101828;
    border: 1px solid #4a7cc0;
    border-radius: 6px;
    color: #d0e8ff;
    box-sizing: border-box;
}
.mg-name-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-height: 108px;
    overflow-y: auto;
}
.mg-name-opt {
    min-width: 0;
    min-height: 34px;
    margin: 3px 4px;
    padding: 6px 10px;
    font-size: 12px;
}

/* Selection tray (MultipleCardsInHandRequest) */
.mg-req-tray {
    display: none;
    background: rgba(90,143,208,0.14);
    border-top: 1px solid rgba(90,143,208,0.5);
    padding: 3px 8px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}
.mg-req-tray.open { display: flex; }
.mg-tray-label {
    color: #8fb8e0;
    font-size: 11px;
    font-weight: 600;
}
.mg-tray-chip {
    background: #1e3a5f;
    border: 1px solid #4a7cc0;
    border-radius: 10px;
    color: #d0e8ff;
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
}
.mg-tray-chip:active { transform: scale(.93); }
.mg-tray-done {
    background: #1e5f2a;
    border: 1px solid #4ac06a;
    border-radius: 10px;
    color: #d0ffd8;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 14px;
    cursor: pointer;
    font-family: inherit;
}
.mg-tray-done:active { transform: scale(.93); }

/* Decline / skip button */
.mg-req-decline {
    display: block;
    margin: 8px auto 2px;
    padding: 5px 18px;
    background: #2a1515;
    border: 1px solid #a06050;
    border-radius: 4px;
    color: #e0c0b0;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
}
.mg-req-decline:hover { background: #3a1a1a; }

/* ════════════════════════════════════════════════════════════════
   END-OF-GAME OVERLAY — mobile twin of the desktop #endOfGameDialog.
   Starts below the header (46px) so Chat / Settings stay reachable;
   sits above the request overlay (50) and card popup (51) but below
   the settings (52) and chat (53) overlays.
   ════════════════════════════════════════════════════════════════ */
.mg-eog-overlay {
    display: none;
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 51;
    background: rgba(10,10,20,0.92);
    padding: 8px 12px;
    box-sizing: border-box;
    flex-direction: column;
}
.mg-eog-overlay.open { display: flex; }

.mg-eog-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.mg-eog-title {
    flex-shrink: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #f0e8c0;
    padding: 2px 0 8px;
}

.mg-eog-players {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 8px;
    justify-content: center;
}
.mg-eog-player {
    flex: 1 1 0;
    max-width: 260px;
    min-width: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 6px 8px;
    overflow-y: auto;
    font-size: 11px;
    line-height: 1.45;
    color: var(--mg-text);
    text-align: center;
}
.mg-eog-player .mg-eog-name { font-size: 13px; font-weight: 700; }

/* In DARK mode the loaded Color.Dark.css styles the server's name/card
   spans (.victory, .treasure, ...) as coloured TEXT — no override needed
   (an earlier color:#111 rule here made them black-on-dark).  The LIGHT
   theme's chip handling lives in the mg-light section at file end. */
.mg-eog-elo-up   { color: #65da65; font-weight: 700; }
.mg-eog-elo-down { color: #ff6a6a; font-weight: 700; }
.mg-eog-elo-flat { color: #88c4ff; font-weight: 700; }
.mg-eog-vp       { color: #65da65; font-weight: 700; }
.mg-eog-cards-hdr {
    margin-top: 4px;
    color: var(--mg-dim);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: .06em;
}

.mg-eog-btns {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 14px;
    padding-top: 8px;
}
.mg-eog-btns .mg-hbtn { min-height: 34px; padding: 6px 18px; }

/* ════════════════════════════════════════════════════════════════
   CONFIRM DIALOG  (coin-token / end-phase action confirmation)
   ════════════════════════════════════════════════════════════════ */
.mg-confirm-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.70);
    z-index: 60;
    align-items: center;
    justify-content: center;
}
.mg-confirm-overlay.open { display: flex; }

.mg-confirm-box {
    background: #1e1e2e;
    border: 2px solid var(--mg-accent);
    border-radius: 12px;
    padding: 24px 32px;
    min-width: 420px;
    max-width: 560px;
    box-shadow: 0 0 28px rgba(0,0,0,0.85);
}

.mg-confirm-text {
    font-size: 16px;
    color: var(--mg-text);
    margin-bottom: 28px;
    text-align: center;
    line-height: 1.5;
}

/* Buttons on opposite ends so accidental adjacent taps are impossible */
.mg-confirm-btns {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.mg-confirm-btns .mg-hbtn {
    padding: 14px 28px;
    font-size: 14px;
    border-radius: 6px;
    min-width: 110px;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME
   Applied when MobileGame.js adds .mg-light to #mobile-game (keyed on
   the global isDark — the same signal that swaps Color.css in).  The
   dark theme above is the default; every rule here only OVERRIDES what
   is unreadable or visually dark-anchored on a light background.
   Card faces resolve through Color.css / Card.Expanded.css light
   classes automatically (MobileGame emits un-suffixed class names in
   light mode), so they need no rules here.
   ════════════════════════════════════════════════════════════════ */
#mobile-game.mg-light {
    --mg-bg:     #ECE9E0;
    --mg-surf:   #F7F5EF;
    --mg-surf2:  #E2DED4;
    --mg-text:   #222;
    --mg-dim:    #666;
    --mg-border: #A8A296;
}

/* Chrome strips (header, log header, dialog tabs, overlay titles) */
#mobile-game.mg-light .mg-hdr,
#mobile-game.mg-light .mg-log-hdr,
#mobile-game.mg-light .mg-dialog-tabs,
#mobile-game.mg-light .mg-set-title { background: #DCD8CC; }

/* Card inner background follows the light page colour */
#mobile-game.mg-light #mg-inner .background { background-color: ghostwhite; }

/* Type TEXT colours — darker variants readable on light surfaces.
   Covers card names/costs, the game log, the EOG columns and any other
   server HTML using the type classes inside the mobile UI. */
#mobile-game.mg-light #mg-inner .action,
#mobile-game.mg-light #mg-inner .guild,
#mobile-game.mg-light #mg-inner .knight,
#mobile-game.mg-light #mg-inner .looter   { color: #6B6B6B; }
#mobile-game.mg-light #mg-inner .attack   { color: #C43030; }
#mobile-game.mg-light #mg-inner .reaction,
#mobile-game.mg-light #mg-inner .defense  { color: #1560BD; }
#mobile-game.mg-light #mg-inner .duration { color: #B87700; }
#mobile-game.mg-light #mg-inner .treasure,
#mobile-game.mg-light #mg-inner .gold     { color: #8A6D00; }
#mobile-game.mg-light #mg-inner .victory  { color: #1D7A1D; }
#mobile-game.mg-light #mg-inner .curse    { color: #8A4D9E; }
#mobile-game.mg-light #mg-inner .ruins    { color: #8B4513; }
#mobile-game.mg-light #mg-inner .ancientone { color: #0E7FA6; }

/* In light mode Color.css gives those same spans coloured CHIP
   backgrounds; keep them but make sure padding keeps the chip shape. */
#mobile-game.mg-light .mg-log-body span[class],
#mobile-game.mg-light #mg-eog-overlay span:not([class^="mg-"]) {
    color: #111;
    padding: 0 3px;
    border-radius: 3px;
}

/* Supply tile names / type labels — same dark-variant map */
#mobile-game.mg-light .mg-name-action, #mobile-game.mg-light .mg-name-guild,
#mobile-game.mg-light .mg-type-action, #mobile-game.mg-light .mg-type-guild { color: #6B6B6B; }
#mobile-game.mg-light .mg-name-attack, #mobile-game.mg-light .mg-type-attack { color: #C43030; }
#mobile-game.mg-light .mg-name-reaction, #mobile-game.mg-light .mg-name-defense,
#mobile-game.mg-light .mg-type-reaction, #mobile-game.mg-light .mg-type-defense { color: #1560BD; }
#mobile-game.mg-light .mg-name-duration, #mobile-game.mg-light .mg-type-duration { color: #B87700; }
#mobile-game.mg-light .mg-name-treasure, #mobile-game.mg-light .mg-name-gold,
#mobile-game.mg-light .mg-type-treasure, #mobile-game.mg-light .mg-type-gold { color: #8A6D00; }
#mobile-game.mg-light .mg-name-victory, #mobile-game.mg-light .mg-type-victory { color: #1D7A1D; }
#mobile-game.mg-light .mg-name-curse, #mobile-game.mg-light .mg-type-curse { color: #8A4D9E; }
#mobile-game.mg-light .mg-name-ruins, #mobile-game.mg-light .mg-type-ruins { color: #8B4513; }
#mobile-game.mg-light .mg-name-ancientone, #mobile-game.mg-light .mg-type-ancientone { color: #0E7FA6; }
#mobile-game.mg-light .mg-name-event, #mobile-game.mg-light .mg-type-event { color: #A34F00; }

/* Supply tile chrome */
#mobile-game.mg-light .mg-tile-hdr {
    background: rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.10);
}
#mobile-game.mg-light .mg-tile-type { border-top: 1px solid rgba(0,0,0,.08); }
#mobile-game.mg-light .mg-tile-cost {
    color: #8A6D00;
    background: rgba(138,109,0,.10);
}
/* Pale tile borders that wash out on cream get darker variants */
#mobile-game.mg-light .mg-tile-treasure, #mobile-game.mg-light .mg-tile-gold { border-color: #D4B500; }
#mobile-game.mg-light .mg-tile-duration { border-color: #E0A030; }
#mobile-game.mg-light .mg-tile-reaction, #mobile-game.mg-light .mg-tile-defense { border-color: #5B9BD5; }
#mobile-game.mg-light .mg-tile-action, #mobile-game.mg-light .mg-tile-guild { border-color: #8F8F8F; }

/* Pile-count depletion colours */
#mobile-game.mg-light #mg-inner .mg-cnt-victory  { color: #1D7A1D; }
#mobile-game.mg-light #mg-inner .mg-cnt-duration { color: #B87700; }
#mobile-game.mg-light #mg-inner .mg-cnt-attack   { color: #C43030; }

/* Header stats */
#mobile-game.mg-light .mg-stat-coins,
#mobile-game.mg-light .mg-stat-cointok { color: #8A6D00; }
#mobile-game.mg-light .mg-stat-vp      { color: #1D7A1D; }
#mobile-game.mg-light .mg-stat-plague  { color: #8A4D9E; }
#mobile-game.mg-light .mg-hbtn-unread  { color: #8A6D00; border-color: #8A6D00; }

/* Request banner / message / tray */
#mobile-game.mg-light .mg-req-banner { color: #2A5F9F; }
#mobile-game.mg-light .mg-req-msg    { color: #33507A; }
#mobile-game.mg-light .mg-tray-label { color: #2A5F9F; }

/* Request overlay panel */
#mobile-game.mg-light .mg-req-box {
    background: rgba(250,248,242,0.97);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.30);
}
#mobile-game.mg-light .mg-req-min { background: #E6E2D8; border-color: #A8A296; color: #444; }
#mobile-game.mg-light .mg-req-min:hover { background: #D8D4C8; color: #111; }
#mobile-game.mg-light .mg-num-val { color: #8A6D00; }
#mobile-game.mg-light .mg-name-filter { background: #fff; color: #223344; }

/* Tap-to-restore pills */
#mobile-game.mg-light .mg-req-restore { color: #A03028; }
#mobile-game.mg-light .mg-eog-pill    { color: #1D6A2D; }

/* Card popup action buttons — darker text on the pale tints */
#mobile-game.mg-light .mg-cp-play-action   { color: #555; }
#mobile-game.mg-light .mg-cp-play-treasure { color: #8A6D00; }
#mobile-game.mg-light .mg-cp-play-attack   { color: #C43030; }
#mobile-game.mg-light .mg-cp-play-reaction { color: #1560BD; }
#mobile-game.mg-light .mg-cp-play-duration { color: #B87700; }

/* Dimming layers can be lighter over a light board */
#mobile-game.mg-light .mg-overlay        { background: rgba(0,0,0,.40); }
#mobile-game.mg-light .mg-card-backdrop  { background: rgba(0,0,0,.30); }

/* End-of-game overlay */
#mobile-game.mg-light .mg-eog-overlay { background: rgba(245,243,237,0.94); }
#mobile-game.mg-light .mg-eog-title   { color: #4A3F10; }
#mobile-game.mg-light .mg-eog-player  { background: rgba(0,0,0,0.04); border-color: #A8A296; }
#mobile-game.mg-light .mg-eog-elo-up   { color: #1D7A1D; }
#mobile-game.mg-light .mg-eog-elo-down { color: #C43030; }
#mobile-game.mg-light .mg-eog-elo-flat { color: #1560BD; }
#mobile-game.mg-light .mg-eog-vp       { color: #1D7A1D; }

/* Confirm dialog */
#mobile-game.mg-light .mg-confirm-overlay { background: rgba(0,0,0,0.35); }
#mobile-game.mg-light .mg-confirm-box {
    background: #F7F5EF;
    box-shadow: 0 0 28px rgba(0,0,0,0.35);
}

/* Settings danger button */
#mobile-game.mg-light .mg-set-btn-danger { color: #C43030; border-color: #C43030; }