/* live-surface.css — Gemeinsame Regeln der Live-Ansicht (Web + Desktop 1:1 identisch).
 * Gehört zu live-render.js: Titelleiste (Marke, Laufschrift, Infobox, Gesamtzeit), die drei
 * Spalten, Timer, Blinds, Statistik, Auszahlungen. Enthält KEINE Steuerleiste, keine
 * Dialoge, keine Formulare (die stehen in der jeweiligen style.css).
 * Entscheidungen 11.10.2026: Trennlinien in Rahmenfarbe (Web-Variante), Seitenspalten
 * höchstens 30 % der Fensterbreite. */

  /* ---------- Titelleiste der Live-Ansicht ---------- */
  #liveTopBar { display: flex; align-items: center; gap: 1.2rem; padding: .5rem 1.2rem 0; }
  #liveTopBar .brand { margin-right: 0; font-size: var(--title-font-size, 22px); }
  #liveTopBar .brand svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
  #liveTopBar .brand img { max-height: 4.5em; object-fit: contain; flex-shrink: 0; }
  #liveTopBar .brand a, #liveTopBar .brand span { font-size: inherit; color: inherit; text-decoration: none; }
  #liveTopBar .brand a:hover { text-decoration: underline; }
  #tickerWrap { flex: 0 0 auto; overflow: hidden; position: relative; height: 1.2em; border-radius: 8px; display: none; font-size: var(--ticker-font-size, 16px); }
  #tickerWrap.has-bg { background: var(--ticker-bg, #000000); }
  #tickerTrack { position: absolute; left: 0; top: 0; white-space: pre; will-change: transform; font-weight: 600; line-height: 1.2em; padding: 0 .4em; }
  @keyframes ticker-scroll { from { transform: translateX(var(--ticker-start, 100%)); } to { transform: translateX(var(--ticker-end, -100%)); } }
  #infoBoxWrap { flex: 0 0 auto; overflow: hidden; display: none; align-items: center; justify-content: center; }
  #topBarTotalTime { flex: 1; min-width: 0; text-align: right; font-family: var(--font-payouts, inherit); }
  #topBarTotalTime .payout-pool-value { font-size: clamp(1.15rem, var(--stat-value-font-size, 32px), 2.3rem); }
  #infoBoxBadge {
    max-width: 100%; overflow: hidden; border-radius: 8px; box-sizing: border-box;
    padding: .02em 1.2em; text-align: center; white-space: nowrap;
    font-weight: 600; font-size: var(--ticker-font-size, 16px); line-height: 1.2;
  }
  #infoBoxBadge.has-bg { background: var(--infobox-bg, #000000); }
  #infoBoxText { display: inline-block; max-width: 100%; }

  /* ---------- Live-Ansicht: Spalten, Timer, Statistik, Auszahlungen ---------- */
  .live-layout{
    display:grid;
    grid-template-columns: clamp(160px, min(var(--side-col-width, 320px), 30vw), 720px) minmax(0, 1fr) clamp(160px, min(var(--side-col-width, 320px), 30vw), 720px);
    grid-template-rows: 1fr auto;
    grid-template-areas: "left center right" "controls controls controls";
    gap: .75rem;
    flex:1; min-height:0; padding: .75rem 0;
    transition: grid-template-rows .4s ease;
  }
  @media (max-width: 860px) and (min-height: 500px){
    .live-layout{
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto;
      grid-template-areas: "center" "controls" "left" "right";
    }
    #tab-live.active{ overflow-y:auto; }
    body.tab-live-active{ overflow:auto; height:auto; min-height:100vh; }
  }

  .live-left{ grid-area:left; display:flex; flex-direction:column; gap:.6rem; min-height:0; min-width:0; overflow:hidden; }
  .live-center{ grid-area:center; display:flex; flex-direction:column; align-items:center; min-height:0; min-width:0; text-align:center; position:relative; z-index:5; }
  .live-right{ grid-area:right; display:flex; flex-direction:column; gap:.5rem; min-height:0; min-width:0; overflow:hidden; }
  .stage-label{
    display:inline-block; padding:.3rem .9rem; border-radius:999px; background: none;
    font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--font);
    font-family: var(--font-level, inherit);
    font-size: clamp(.7rem, var(--level-font-size, 28px), min(16vh, 12vw));
    margin: 0 0 .2rem; flex-shrink:0;
  }
  .timer-wrap{ flex: 1.1; width:100%; min-height:0; display:flex; align-items:flex-end; justify-content:center; }
  .timer{
    font-family: var(--font-timer-custom, var(--font-mono)); font-variant-numeric: tabular-nums; font-weight:800;
    font-size: clamp(2.5rem, var(--timer-size), var(--timer-max-safe, 62vh));
    line-height:1; margin: 0; letter-spacing:-.02em;
  }
  .timer.has-bg{
    background: var(--timer-bg, transparent);
    padding: .04em .12em;
    border-radius: .16em;
  }
  .timer.has-custom-font-color{ color: var(--timer-font, inherit); }
  .timer.warn{ color: var(--danger); }
  @keyframes timer-pulse{ 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.16); opacity: .82; } }
  .timer.pulse{ animation: timer-pulse 1s ease-in-out infinite; transform-origin: center; }

  .info-wrap{ flex:1; width:100%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.35em; }
  .blinds-table, .next-level-table{
    border-collapse: collapse; font-family: var(--font-level, inherit); max-width: 94vw;
  }
  .blinds-table{ font-weight:800; font-size: clamp(1.15rem, var(--blinds-font-size, 28px), min(20vh, 7vw)); letter-spacing:-.01em; }
  .blinds-table td.bt-label{ text-align:left; padding:0 .4em 0 0; opacity:.85; }
  .blinds-table td.bt-value{ text-align:right; padding:0; }
  .blinds-table td.bt-pause{ text-align:center; padding:0; }
  .next-level-table{
    font-weight:700; opacity:.85; margin-top: .6em;
    font-size: clamp(1rem, var(--next-level-font-size, 20px), min(3.2rem, 7vw));
  }
  .next-level-table td.nt-label{ text-align:left; padding:0 .4em 0 0; }
  .next-level-table td.nt-value{ text-align:right; padding:0; }
  .stat-card{ background: var(--panel); border:1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem; flex-shrink:0; font-family: var(--font-stat, inherit); }
  .stat-card .stat-divider{ height:1px; background: var(--border); margin: .6rem 0; }
  .stat-card-plain{ background: var(--bg); border:none; }
  .next-pause-plain{ padding: .8rem 1rem; font-family: var(--font-stat, inherit); flex-shrink:0; }
  /* Am unteren Rand angepinnt (linke Spalte) - Bodenpadding entfernen, damit der Text
     buendig mit der "Naechstes Level"-Zeile am Boden der Mittelspalte abschliesst
     (die dort keinerlei Bodenpadding hat). */
  .next-pause-plain.push-bottom{ margin-top:auto; padding-bottom:0; }
  .stat-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; opacity:.65; margin-bottom:.25rem; }
  .stat-value{ font-variant-numeric: tabular-nums; font-weight:800; font-size: clamp(1.1rem, var(--stat-value-font-size, 32px), 2.6rem); }
  .stat-value.text-value{ font-size: clamp(.85rem, 2.8vh, 1.8rem); }
  .stat-sub{ font-size:.72rem; font-style:italic; opacity:.65; margin-top:.2rem; }

  .payout-header{
    font-family: var(--font-payouts, inherit);
    flex-shrink:0;
    padding:.55rem .8rem; background: var(--bg); border:none;
    text-align: right;
  }
  .payout-header.multi{ display:flex; flex-direction:column; gap:.55rem; }
  .payout-pool-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; opacity:.65; margin-bottom:.2rem; }
  .payout-pool-value{ font-variant-numeric: tabular-nums; font-weight:800; font-size: clamp(1.15rem, var(--stat-value-font-size, 32px), 2.3rem); }
  .payout-places-line{ font-size: clamp(.85rem, 2vh, 1.05rem); font-weight:700; opacity:.85; }
  .payout-list-wrap{
    flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column;
  }
  .payout-list-box{
    flex:0 0 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column;
    padding:.5rem; background: var(--bg); border:none;
  }
  #payoutList{ flex:0 0 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:0; }
  .payout-row{
    display:flex; justify-content:space-between; align-items:center; gap:.5rem;
    padding:.5rem .6rem;
    font-family: var(--font-payouts, inherit);
    font-size: var(--payout-font-size, 0.9rem); flex: 0 0 auto;
  }
  .payout-row-first{
    border-bottom: 1px solid var(--border);
    padding-bottom:.7rem; margin-bottom:.3rem;
  }
  .payout-place{ font-weight:800; color: var(--font); }
  .payout-amount{ font-variant-numeric: tabular-nums; font-weight:700; }
  .payout-hidden-msg{
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:.9rem .6rem; opacity:.75;
    font-family: var(--font-payouts, inherit);
    font-size: var(--payout-font-size, 0.9rem);
  }