/* Implenia 2025 — v4 (Synology-ready) */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,Inter,Roboto,sans-serif}
a{color:#f6b500;text-decoration:none}
.hidden{display:none !important}
.banner{position:sticky;top:0;z-index:50;background:#000;border-bottom:1px solid rgba(246,181,0,.25);display:flex;align-items:center;gap:12px;padding:10px 12px}
.banner img{height:28px;width:28px}
.banner-title{font-weight:800;letter-spacing:.2px}
.banner-title .brand{color:#f6b500}
.banner-sub{opacity:.8;font-size:12px}
.container{max-width:1024px;margin:0 auto;padding:12px}
.button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;padding:10px 14px;border-radius:999px;font-weight:700;cursor:pointer}
.button.primary{background:#f6b500;color:#000;border-color:#f6b500}
.button.ghost{background:transparent}
.badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);padding:6px 10px;border-radius:999px;font-size:12px;backdrop-filter:blur(8px)}
.card{background:#0c0c0c;border:1px solid #141414;border-radius:16px;padding:12px}
.input,select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #262626;background:#0d0d0d;color:#fff}
.label{font-size:12px;opacity:.9;margin-bottom:6px;display:block}
.grid{display:grid;gap:12px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.kicker{opacity:.7;font-size:12px}
.countdown{color:#f6b500;font-weight:800;border-color:rgba(246,181,0,.35);}
.app{position:relative;width:100%;height:calc(100vh - 56px);touch-action:none;-webkit-user-select:none;user-select:none}
.video-stack{position:absolute;inset:0;overflow:hidden}
.video-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .25s ease-out;will-change:transform;background:#000}
.video-slide video{height:100vh;width:auto;max-width:100%;object-fit:contain;background:#000;border-radius:0}
.meta{position:absolute;bottom:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:12px;align-items:end;z-index:5}
.meta .info{background:rgba(0,0,0,.55);backdrop-filter:blur(8px);padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
.meta .actions{display:flex;gap:8px}
.counter{position:absolute;top:12px;right:12px}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:#111;border:1px solid #222;border-radius:12px;padding:10px 14px}
.tv-root{height:calc(100vh - 56px);position:relative}
.tv-grid{position:relative;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:12px;height:100%}
.tv-cell{position:relative;background:#000;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #121212}
.tv-video{height:100%;width:auto;object-fit:contain;display:block}
.tv-overlay{position:absolute;top:10px;left:10px;right:10px;z-index:5;display:flex;justify-content:center}
.tv-chip{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 10px;font-size:14px;font-weight:700;backdrop-filter:blur(8px)}
.qr-badge{position:fixed;right:18px;bottom:18px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:10}
.qr-badge img{height:140px;width:140px}
.qr-text{font-size:12px;opacity:.9}
.logo-badge{position:fixed;left:18px;bottom:18px;z-index:10}
.logo-badge img{height:140px;width:140px;display:block;filter: drop-shadow(0 0 6px rgba(0,0,0,.4));}
.rank-panel{position:absolute;inset:0;background:rgba(0,0,0,.85);display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;z-index:6}
.rank-card{background:#0b0b0b;border:1px solid #202020;border-radius:16px;padding:12px;min-width:60%;max-width:85%}
.rank-title{font-weight:800;margin-bottom:6px}
.rank-item{display:flex;align-items:center;gap:8px;margin:6px 0}
.rank-medal{width:24px;text-align:center}
.rank-bar{height:8px;background:#151515;border-radius:999px;overflow:hidden;flex:1}
.rank-bar > span{display:block;height:100%;background:#f6b500;width:40%}
.tabbar{display:flex;gap:8px;margin-bottom:12px}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th,.table td{text-align:left;padding:8px 10px}
.table tr{background:#0e0e0e}
.table tr td:first-child{border-radius:10px 0 0 10px}
.table tr td:last-child{border-radius:0 10px 10px 0}
.form-section{margin:12px 0}
.notice{background:#0b0b0b;border:1px solid #1f1f1f;border-radius:12px;padding:10px}
.switch{display:flex;align-items:center;gap:8px}

/* --- MOBILE CENTERED META (keeps desktop unchanged) --- */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 640px) {
  /* Keep content visible under iOS bottom bar */
  .app {
    overflow: visible !important;
    padding-bottom: calc(110px + var(--safe-bottom));
  }

  /* Center the meta bar above the safe area, fixed, without changing desktop */
  .meta {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(10px + var(--safe-bottom)) !important;
    z-index: 9999 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    max-width: calc(100vw - 24px);
  }

  /* Ensure internal layout wraps nicely at small widths */
  .meta .info { 
    text-align: center; 
    margin-right: 8px;
  }
  .meta .actions { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
  }

  /* Keep videos below the overlayed meta */
  .video-stack, .video-slide, .video-slide video { z-index: 1; }

  /* Make sure the toast stays above meta on mobile */
  .toast {
    bottom: calc(130px + var(--safe-bottom)) !important;
    z-index: 10000 !important;
  }
}