:root{
    --brand-red:#e53935;

    /* View theme variables (default: dark) */
    --view-bg:#111;
    --view-fg:#eee;
    --view-accent:#ff3434;

    --nav-h:64px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }

  html,body{margin:0;height:100%;width:100%;}
  body{background:var(--view-bg); color:var(--view-fg);overflow-x:hidden;}

  /* Tabs */
  .tab{display:none;height:calc(100vh - var(--nav-h));overflow-y:auto;}
  .tab.active{display:block;}
  #view.tab.active{display:flex;}


  /* Bottom nav (settings-only) */
  nav.bottomNav{
    position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);
    display:flex;align-items:center;justify-content:center;
    z-index:10;
    background:#fff;border-top:1px solid #e5e5e5;
  }
  body.tab-view nav.bottomNav{display:none;}
  body.is-fullscreen nav.bottomNav{display:none;}

  .navBtn{
    border:none;background:transparent;cursor:pointer;
    display:flex;align-items:center;gap:0.55rem;
    padding:0.6rem 1rem;border-radius:12px;
    font-size:1.05rem;font-weight:650;color:#111;
  }
  .navBtn:hover{background:#f3f3f3;}
  .navBtn svg{width:22px;height:22px;fill:#111}

  /* ───────────────────────── Settings (Material-ish) ───────────────────────── */
  #settings{
    background:#f5f5f5;
    color:#111;
    padding:1.2rem 1rem calc(var(--nav-h) + 1.2rem);
  }
  .wrap{max-width:1200px;margin:0 auto;}
  .header{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    margin-bottom:0.8rem;
  }
  .brand{display:flex;align-items:center;gap:0.9rem;}
  .brand img{height:56px;width:auto;display:block;}
  .tagline{font-size:1.05rem;font-weight:650;opacity:0.85;text-align:right;}

  .drink-card{
    background:#fff;border-radius:14px;border:1px solid #eee;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
    padding:0.95rem;margin:0.75rem 0 1rem;
  }
  .drink-card h3{margin:0 0 0.4rem;font-size:1.05rem;}
  .drink-card p{margin:0.35rem 0;opacity:0.85;line-height:1.4;}
  .drink-card a{color:var(--brand-red);text-decoration:underline;font-weight:700;}

  /* Admin: keep "Drink Rake" stuck to bottom of the screen */
  body.adminPage #settings{
    /* reserve room for the fixed footer card */
    padding-bottom: calc(240px + env(safe-area-inset-bottom));
  }
  body.adminPage .drink-card{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom: env(safe-area-inset-bottom);
    width: calc(100% - 2rem);
    max-width:1200px;
    margin:0;
    border-radius:14px 14px 0 0;
    z-index:30;
  }
  @media (max-width:900px){
    body.adminPage #settings{ padding-bottom: calc(300px + env(safe-area-inset-bottom)); }
    body.adminPage .drink-card{ width: calc(100% - 1rem); }
  }

  .layout{display:flex;gap:1rem;align-items:flex-start;}
  .mobileNavRow{display:none;}
  .mobileNavLabel{display:none;}
  .mobileMenuIcon{
    display:none;
    border:1px solid #d7d7d7;
    border-radius:16px;
    background:#fff;
    color:#111;
    width:52px;
    height:52px;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
  }
  .mobileMenuIcon svg{
    width:30px;
    height:30px;
    fill:currentColor;
  }
  .mobileNavBackdrop{display:none;}
  .sidebar{
    width:220px;flex:0 0 220px;
    background:#fff;border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
    border:1px solid #eee;
    padding:0.45rem;
    display:flex;
    flex-direction:column;
    position:sticky; top:12px;
  }
  .sideItem{
    width:100%;
    display:flex;align-items:center;gap:0.75rem;
    padding:0.65rem 0.75rem;
    border:none;background:transparent;border-radius:12px;
    cursor:pointer;font-size:0.98rem;text-align:left;
  }
  .sideItem svg{width:22px;height:22px;fill:#555;flex:0 0 auto}
  .sideItem .label{font-weight:650;color:#111}
  .sideItem.active{background:rgba(229,57,53,0.10);}
  .sideItem.active svg{fill:var(--brand-red);}
  .content{flex:1;min-width:0;}
  .panel{display:none;}
  .panel.active{display:block;}

  .card{
    background:#fff;border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
    border:1px solid #eee;
    padding:1rem;margin-bottom:1rem;
  }
  .card h2{margin:0 0 0.85rem;font-size:1.15rem}
  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0.9rem;}
  .col-12{grid-column:span 12;}
  .col-6{grid-column:span 6;}
  .col-4{grid-column:span 4;}
  @media (max-width:980px){
    .sidebarFooter{display:none;}
    .content{width:100%;}
  }
  @media (max-width:900px){
    .col-6,.col-4{grid-column:span 12;}
    .brand img{height:46px;}
  }

  label{display:block;font-size:0.92rem;margin:0 0 0.35rem;opacity:0.85}
  input[type="number"], input[type="text"], select, input[type="file"]{
    width:100%;
    padding:0.55rem 0.6rem;
    border:1px solid #d6d6d6;
    border-radius:10px;
    background:#fff;
    font-size:1rem;
    outline:none;
  }
  input[type="number"]:focus, input[type="text"]:focus, select:focus{
    border-color:var(--brand-red);
    box-shadow:0 0 0 3px rgba(229,57,53,0.15);
  }
  input[type="range"]{width:100%;}
  .btn-row{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:0.6rem}

  /* Buttons (works for <button> and <a>) */
  .btn{
    border:none;
    border-radius:10px;
    padding:0.6rem 0.85rem;
    font-size:0.95rem;
    cursor:pointer;
    background:#eeeeee;
    color:#111;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.4rem;
    text-decoration:none;
    line-height:1.1;
    user-select:none;
  }
  .btn.primary{background:var(--brand-red); color:#fff;}
  .btn.outline{background:#fff;border:1px solid #d6d6d6;color:#111;}
  .btn:disabled,
  .btn[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none;}
  .btn:active{transform:translateY(1px);}

  /* Small helper text links */
  .muted.small{font-size:0.85rem;}
  .status{opacity:0.72;font-size:0.92rem;line-height:1.25;}
  .error{color:#b71c1c;font-weight:800;}

  /* Room Details / links / QR */
  .linkRow{display:flex;flex-wrap:wrap;gap:0.6rem;align-items:center;}
  .linkRow .btn{min-width:140px;}
  .qrWrap{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:14px;
  }
  .qrWrap img{width:220px;max-width:100%;height:auto;display:block;}

  /* Cast + connected screens */
  .castRow{display:flex;flex-wrap:wrap;gap:0.6rem;align-items:center;}
  .peerList{display:flex;flex-direction:column;gap:0.6rem;}
  .peerItem{
    display:flex;
    gap:0.7rem;
    align-items:center;
    justify-content:space-between;
    padding:0.75rem 0.8rem;
    border:1px solid #e6e6e6;
    border-radius:14px;
    background:#fff;
  }
  .peerMain{min-width:0;}
  .peerTitle{font-weight:900;}
  .peerMeta{opacity:0.7;font-size:0.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px;}
  .muted{opacity:0.7;font-size:0.92rem;line-height:1.35}

  .segmented{display:inline-flex;border:1px solid #d6d6d6;border-radius:12px;overflow:hidden;background:#fff;}
  .segmented button{border:none;background:transparent;padding:0.55rem 0.8rem;cursor:pointer;font-size:0.95rem;}
  .segmented button.active{background:rgba(229,57,53,0.12);font-weight:700;}

  table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:12px;border:1px solid #e6e6e6;}
  th,td{padding:0.55rem;text-align:center;border-bottom:1px solid #eee;}
  thead th{background:#fafafa;font-size:0.9rem}
  tbody tr:last-child td{border-bottom:none;}
  td input[type="number"]{padding:0.45rem 0.5rem;border-radius:10px}
  .table-note{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-top:0.55rem;flex-wrap:wrap;}
  .pill{display:inline-flex;gap:0.35rem;align-items:center;padding:0.25rem 0.55rem;border-radius:999px;background:#f0f0f0;font-size:0.9rem;}
  .pill.bad{background:rgba(229,57,53,0.12); color:#b71c1c;}
  .pill.good{background:rgba(46,125,50,0.12); color:#1b5e20;}

  .row-actions{display:flex;gap:0.4rem;justify-content:center;}
  .iconSmall{width:18px;height:18px;display:inline-block;vertical-align:-3px;fill:currentColor;}
  .iconBtnTiny{border:1px solid #d6d6d6;background:#fff;border-radius:10px;padding:0.35rem 0.45rem;cursor:pointer;}
  .iconBtnTiny:hover{background:#f6f6f6;}

  footer{margin-top:0.7rem;padding:0.85rem 0 0.2rem;border-top:1px solid #e6e6e6;font-size:0.95rem;}
  footer a{color:#111;text-decoration:underline;}

  /* ───────────────────────── View ───────────────────────── */
  #view{
    padding:0;background:var(--view-bg);color:var(--view-fg);
    height:100vh;flex-direction:row;position:relative;
  }
  #leftPane,#rightPane{display:flex;flex-direction:column;align-items:center;padding:1rem 1rem 5rem;}
  #leftPane{flex:2;justify-content:center;}
  #rightPane{flex:1;justify-content:flex-start;overflow-y:auto;}

  #timer{font-size:13vw;line-height:0.9;text-align:center;color:var(--view-fg);}
  #roundInfo{font-size:3.4vw;margin-top:1rem;text-align:center;color:var(--view-fg);}
  .next{font-size:0.65em;opacity:0.72;color:var(--view-fg);}

  #pInfo{font-size:2.2vw;margin-bottom:0.7rem;text-align:center;color:var(--view-fg);}
  #payoutBox{width:100%;max-width:520px;color:var(--view-fg);}
  #payoutBox table{font-size:2.0vw;width:100%;border-color:rgba(255,255,255,0.18)}
  #payoutBox th{background:rgba(255,255,255,0.08);color:var(--view-fg);}
  #payoutBox td{border-bottom-color:rgba(255,255,255,0.12);color:var(--view-fg);}

  .viewHint{
    position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);
    background:rgba(0,0,0,0.30);color:var(--view-fg);
    padding:0.5rem 0.75rem;border-radius:12px;font-size:0.98rem;
    opacity:0.9;backdrop-filter: blur(6px);
    z-index:25;user-select:none;white-space:nowrap;
  pointer-events:none;}
  body.is-fullscreen .viewHint{display:none;pointer-events:none;}

  .iconBtn{
    position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));width:44px;height:44px;border:none;border-radius:14px;
    background:rgba(0,0,0,0.30);color:var(--view-fg);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    z-index:25;backdrop-filter: blur(6px);
  }
  .iconBtn svg{width:24px;height:24px;fill:var(--view-fg);}
  .iconBtn:active{transform:translateY(1px);}
  #settingsBtnView{left:14px;}
  #fsBtn{right:14px;}
  body.is-fullscreen #settingsBtnView{display:none;}

  /* Touch (mobile) quick controls */
  #leftPane{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    touch-action:manipulation;
  }
  #touchMenuOverlay{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.45);
    z-index:40;
  }
  #touchMenuOverlay.open{display:flex;}
  #touchMenu{
    width:min(380px, calc(100vw - 32px));
    background:rgba(0,0,0,0.55);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:18px;
    padding:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    backdrop-filter:blur(10px);
  }
  .touchBtn{
    border:1px solid rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.08);
    color:var(--view-fg);
    border-radius:16px;
    padding:14px 12px;
    font-size:1.05rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
  }
  .touchBtn:active{transform:translateY(1px);}
  .touchBtn svg{width:22px;height:22px;fill:var(--view-fg);}
  .touchMenuNote{
    grid-column:1 / -1;
    text-align:center;
    font-size:0.95rem;
    opacity:0.85;
    padding-top:2px;
  }


  #view.flash{animation:flashBg 0.6s}
  @keyframes flashBg{0%{background:var(--view-bg);}50%{background:var(--view-accent);}100%{background:var(--view-bg);}}

  @media (max-aspect-ratio:3/4){
    #view{flex-direction:column}
    #leftPane,#rightPane{width:100%}
    #timer{font-size:18vw}
    #roundInfo{font-size:5vw}
    #pInfo{font-size:3.6vw}
    #payoutBox table{font-size:3.2vw}
    .viewHint{white-space:normal;text-align:center;width:calc(100% - 140px);pointer-events:none;}
  }

/* ───────────────────────── PokerTimer v2.1 tweaks ───────────────────────── */

/* Landing-page layout helpers */
.heroGrid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:1rem;align-items:start;}
@media (max-width:980px){ .heroGrid{grid-template-columns:1fr;} }
.heroCol{min-width:0;}

.howList{margin:0.25rem 0 0.1rem;padding-left:1.1rem;}
.howList li{margin:0.45rem 0;}

.roomCodeBig{font-size:1.55rem;font-weight:950;letter-spacing:0.10em;}

.hintBox{background:#fafafa;border:1px dashed #d6d6d6;border-radius:14px;padding:0.75rem 0.85rem;}

/* Make long URLs wrap on mobile */
.muted.small a{word-break:break-all;}

/* Controls + preview */
.controlsGrid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:1rem;align-items:stretch;}
@media (max-width:980px){ .controlsGrid{grid-template-columns:1fr;} }

.miniDisplay{
  border-radius:14px;
  background:#111;
  color:#eee;
  border:1px solid rgba(0,0,0,0.12);
  padding:14px;
}
.miniDisplay .miniLevel{font-weight:900;letter-spacing:0.08em;opacity:0.9;}
.miniDisplay .miniTimer{font-size:3.0rem;font-weight:950;line-height:0.95;margin-top:8px;}
.miniDisplay .miniMeta{margin-top:10px;opacity:0.88;}
.miniDisplay .miniMeta .line{margin-top:4px;}

/* Tiny info tooltip */
.iconBtn{
  width:26px;height:26px;
  border-radius:999px;
  border:1px solid #d6d6d6;
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  line-height:1;
}
.iconBtn:hover{background:#f6f6f6;}

.tooltip{
  position:relative;
  display:inline-block;
}
.tooltip .tipBox{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:min(520px, calc(100vw - 40px));
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,0.12);
  padding:12px 12px;
  z-index:50;
  display:none;
}
.tooltip.open .tipBox{display:block;}
.tooltip .tipTitle{font-weight:900;margin-bottom:6px;}
.tooltip .tipBox p{margin:6px 0;opacity:0.9;line-height:1.35;}

/* Room Details QR + links */
.roomQrRow{display:grid;grid-template-columns:140px 1fr;gap:0.9rem;align-items:start;}
@media (max-width:900px){ .roomQrRow{grid-template-columns:1fr;} }

.roomQrRow .qrWrap{width:140px;height:140px;margin:0;}

/* Muted helper inside settings */
.muted{opacity:0.72;}

/* Mobile typography and touch sizing */
@media (max-width:900px){
  body.mobile-device #settings{
    font-size:28px;
    line-height:1.35;
  }
  body.mobile-device .card h2{
    font-size:2.25rem;
    line-height:1.18;
  }
  body.mobile-device .tagline{
    font-size:1.85rem;
    line-height:1.2;
  }
  body.mobile-device label{
    font-size:1.5rem;
    font-weight:650;
    opacity:0.9;
  }
  body.mobile-device .muted{
    font-size:1.35rem;
    line-height:1.35;
    opacity:0.84;
  }
  body.mobile-device .muted.small{
    font-size:1.2rem;
    line-height:1.35;
  }
  body.mobile-device .status{
    font-size:1.45rem;
    line-height:1.3;
  }
  body.mobile-device .btn{
    font-size:1.45rem;
    font-weight:700;
    padding:1rem 1.25rem;
    min-height:84px;
    border-radius:16px;
  }
  body.mobile-device .sideItem{
    padding:1rem 1.05rem;
  }
  body.mobile-device .sideItem .label{
    font-size:2.25rem;
    line-height:1.06;
  }
  body.mobile-device input[type="number"],
  body.mobile-device input[type="text"],
  body.mobile-device select,
  body.mobile-device input[type="file"]{
    font-size:28px;
    padding:1rem 1rem;
    border-radius:14px;
  }
  body.mobile-device th,
  body.mobile-device td{
    font-size:1.25rem;
    padding:0.95rem 0.75rem;
  }
  body.mobile-device .howList li{
    font-size:1.4rem;
    line-height:1.35;
  }
  body.mobile-device .roomCodeBig{
    font-size:2.7rem;
    line-height:1.05;
  }
  body.mobile-device .miniDisplay .miniTimer{
    font-size:5.4rem;
  }
  body.mobile-device .miniDisplay .miniLevel{
    font-size:1.35rem;
  }
  body.mobile-device .miniDisplay .miniMeta{
    font-size:1.2rem;
  }
  body.mobile-device .castRow google-cast-launcher{
    transform:scale(1.65);
    transform-origin:left center;
    margin-right:20px;
  }
}

/* Mobile-first landing flow */
@media (max-width:860px){
  body.mobile-device .heroGrid{
    display:flex;
    flex-direction:column;
    gap:0.75rem;
  }
  body.mobile-device .heroGrid > .heroCol{
    display:contents;
  }
  body.mobile-device .homeCard-create{order:1;}
  body.mobile-device .homeCard-how{order:2;}
  body.mobile-device .homeCard-what{order:3;}
  body.mobile-device .homeCard-links{order:4;}
  body.mobile-device .homeCard-room{order:5;}
  body.mobile-device .homeCard-privacy{display:none;}
  body.mobile-device .homeCard-room{display:none !important;}
}

/* Mobile usability pass */
@media (max-width:980px){
  body.adminPage #settings{
    padding-bottom: calc(var(--nav-h) + 1.2rem + env(safe-area-inset-bottom));
  }
  body.adminPage .drink-card{
    position:static;
    transform:none;
    width:auto;
    max-width:none;
    margin:0.75rem 0 1rem;
    border-radius:14px;
  }

  body.adminPage.mobile-device .layout{
    display:block;
    position:relative;
  }
  body.adminPage.mobile-device .header{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap:0.55rem;
  }
  body.adminPage.mobile-device .tagline{
    text-align:left;
    width:auto;
    flex:1;
    margin-top:0.2rem;
  }
  body.adminPage.mobile-device .mobileMenuIcon{
    display:inline-flex;
    flex:0 0 auto;
  }
  body.adminPage.mobile-device .sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:100vw;
    max-width:100vw;
    border-radius:0;
    transform:translateX(-104%);
    transition:transform 0.22s ease;
    z-index:120;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:1.25rem 0.95rem;
    gap:0.45rem;
  }
  body.adminPage.mobile-device .sideItem{
    white-space:normal;
    align-items:flex-start;
    gap:1rem;
  }
  body.adminPage.mobile-device .sideItem svg{
    width:42px;
    height:42px;
  }
  body.adminPage.mobile-device .mobileNavBackdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(17,17,17,0.46);
    z-index:110;
  }
  body.adminPage.mobile-device.mobile-nav-open .sidebar{
    transform:translateX(0);
  }
  body.adminPage.mobile-device.mobile-nav-open .mobileNavBackdrop{
    display:block;
  }
  body.adminPage.mobile-device.mobile-nav-open{
    overflow:hidden;
  }
  body.adminPage.mobile-device.mobile-nav-open .mobileMenuIcon{
    background:#fff4f4;
    border-color:#f0b6b6;
  }
}

@media (max-width:760px){
  #settings{
    padding:0.95rem 0.75rem calc(var(--nav-h) + 0.95rem);
  }
  .header{
    flex-direction:column;
    align-items:flex-start;
    gap:0.55rem;
  }
  .tagline{
    text-align:left;
    font-size:0.96rem;
    width:100%;
  }
  .brand img{height:42px;}
  .card{padding:0.85rem;}
  .btn{min-height:42px;}

  .topControls .btn-row .btn{
    flex:1 1 calc(50% - 0.35rem);
    min-width:0;
  }
  .topControls .btn-row #btnToggle{flex-basis:100%;}

  .linkRow .btn{
    flex:1 1 100%;
    min-width:0;
  }
  .roomQrRow .qrWrap{margin:0 auto;}

  .castRow{
    align-items:stretch;
  }
  .castRow .btn{
    flex:1 1 auto;
  }

  .peerItem{
    flex-direction:column;
    align-items:flex-start;
  }
  .peerItem .btn{width:100%;}
}

@media (max-width:640px){
  body.adminPage.mobile-device .sidebar{
    width:100vw;
  }
  body.mobile-device .card h2{
    font-size:2.05rem;
  }
  body.mobile-device .muted{
    font-size:1.25rem;
  }
  body.mobile-device .btn{
    font-size:1.32rem;
  }
  body.adminPage.mobile-device .sideItem .label{
    font-size:2rem;
  }
}

@media (max-width:900px){
  input[type="number"], input[type="text"], select, input[type="file"]{
    font-size:16px;
  }
}