/* =======================
   Hidden Cask – game.css (audited cleanup drop-in)
   Notes:
   - Removes duplicate vars / rules
   - Fixes input styling for type="email"
   - Removes conflicting .winner-row definitions (adds .winner-row--highlight)
   - Consolidates duplicate mobile @media blocks
   - Scopes wrapping to .setup-checkbox (not all labels)
   - Prevents email-toggle inheriting global button padding
========================== */

/* =======================
   Theme variables
========================== */
:root{
  --paper:#f8f6f1;         /* parchment */
  --ink:#222;
  --card:#fff;
  --accent:#8B4513;        /* rich brown */
  --accent-200:#bfae98;    /* light brown border */
  --tip:#fff8dc;           /* parchment-yellow tip */
  --muted:#ddd;
  --shadow:0 2px 6px rgba(0,0,0,.08);

  --gold:#e1c36c;          /* soft gold */
  --hc-bg: url('/images/bg/hidden-cask-bg1.jpg');
}

*,*::before,*::after{ box-sizing:border-box; }

/* =========================================================
   ROUND UI TIDY-UP LAYER
   Paste near end of game.css
========================================================= */

.hc-round-badge{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hc-round-main{
  display: flex;
  align-items: center;
  gap: 14px;
}

.hc-round-icon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  flex: 0 0 54px;
}

.hc-round-title{
  font-size: 1.85rem;
  line-height: 1.1;
  font-weight: 800;
  color: #fff;
  text-align: left;
}

.hc-round-sub{
  margin-top: 4px;
  font-size: 1rem;
  line-height: 1.35;
  color: rgba(255,255,255,.88);
  text-align: left;
}

/* Focus control strip */
.hc-focus-bar{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.36);
  color: #f4ece1;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hc-focus-bar a,
.hc-focus-bar a:link,
.hc-focus-bar a:visited{
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
}

.hc-focus-bar a:hover{
  text-decoration: underline;
}

#focusBar{
  text-align: center;
}

/* Stronger round card around the table */
.hc-round-wrap{
  background: rgba(255,255,255,.97);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  border: 1px solid rgba(0,0,0,.06);
}

.hc-round-wrap.hc-round-smell{
  border-top: 6px solid #5d6b7d;
}

.hc-round-wrap.hc-round-taste{
  border-top: 6px solid #9a5a22;
}

/* Make table feel less spreadsheet-like */
.hc-round-wrap table{
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  background: #fff;
}

.hc-round-wrap th{
  background: #f3f3f3;
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
}

.hc-round-wrap td,
.hc-round-wrap th{
  border-color: #e4e1dc;
  padding: 12px 10px;
}

.hc-round-wrap tr:nth-child(odd){
  background: #fcfcfc;
}

.hc-round-wrap tr:nth-child(even){
  background: #f8f8f8;
}

/* Improve bottle column */
.hc-round-wrap td.bottle-col{
  min-width: 74px;
  background: #fbfaf8;
}

/* Larger score selector */
.score-select{
  width: 98px;
  min-width: 98px;
  height: 38px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  background: #fff;
}

/* Make note inputs feel softer and more intentional */
input.note-input-smell,
input.note-input-taste{
  min-height: 40px;
  border-radius: 8px !important;
  font-size: 14px;
}

input.note-input-smell{
  background: #eef2f5 !important;
  border-color: #b9c4cf !important;
}

input.note-input-taste{
  background: #f5eee8 !important;
  border-color: #cdb39d !important;
}

/* Improve submit button emphasis */
#submitRoundBtn{
  min-width: 210px;
  height: 40px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
}

.hc-round-wrap.hc-round-smell #submitRoundBtn{
  background: #556577;
}

.hc-round-wrap.hc-round-smell #submitRoundBtn:hover{
  background: #495868;
}

.hc-round-wrap.hc-round-taste #submitRoundBtn{
  background: #8B4513;
}

.hc-round-wrap.hc-round-taste #submitRoundBtn:hover{
  background: #6f3710;
}

/* Active focused player heading */
.player-head.active{
  background: #fff4df !important;
  outline: 2px solid #d8a05c;
  outline-offset: -2px;
}

/* Better dimming balance */
.dim{
  opacity: .28;
}

/* Responsive tidy-up */
@media (max-width: 720px){
  .hc-round-head{
    padding: 12px 14px;
    border-radius: 14px;
  }

  .hc-round-main{
    align-items: flex-start;
  }

  .hc-round-icon{
    width: 46px;
    height: 46px;
    font-size: 1.5rem;
    border-radius: 12px;
    flex: 0 0 46px;
  }

  .hc-round-title{
    font-size: 1.4rem;
  }

  .hc-round-sub{
    font-size: .92rem;
  }

  .hc-focus-bar{
    border-radius: 16px;
    padding: 8px 10px;
    gap: 8px;
    justify-content: center;
  }

  .hc-round-wrap{
    padding: 12px;
    border-radius: 14px;
  }

  .score-select{
    width: 88px;
    min-width: 88px;
  }

  #submitRoundBtn{
    min-width: 180px;
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 520px){
  .hc-round-main{
    gap: 10px;
  }

  .hc-round-title{
    font-size: 1.2rem;
  }

  .hc-round-sub{
    font-size: .88rem;
  }

  .hc-round-wrap td,
  .hc-round-wrap th{
    padding: 8px 6px;
  }

  .score-select{
    width: 78px;
    min-width: 78px;
    font-size: 14px;
  }

  input.note-input-smell,
  input.note-input-taste{
    min-height: 36px;
    font-size: 13px;
  }
}

/* =======================
   Background + page frame
========================== */
html, body{
  height: 100%;
  background-color: #0b0a09; /* fallback tone at page edges */
}

body{
  font-family: Tahoma, Verdana, sans-serif;
  max-width: 950px;
  margin: 0 auto;
  padding: 20px;
  background: transparent;
  color: var(--ink);
  position: relative;
}

/* One full-bleed image behind everything */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: var(--hc-bg) center center / cover no-repeat;
  z-index: 0;
  transform: translateZ(0);
  pointer-events: none;
}

/* Soft dark overlay for readability */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
  pointer-events: none;
}

/* Ensure page content sits above the overlay */
header, main, footer{
  position: relative;
  z-index: 2;
}

/* iOS Safari fallback (avoid fixed background jank on small screens) */
@media (max-width: 768px){
  body::before,
  body::after{
    position: absolute;
  }
}

/* =======================
   Typography / headings
========================== */
header h1{
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}

h1{
  font-family: Verdana, Tahoma, sans-serif;
  letter-spacing: 1px;
  font-weight: 600;
  text-shadow: 1px 1px 4px rgba(0,0,0,.2);
}
h1, h2, h3{ text-align:center; }

#roundTitle{
  color:#f7f3ec;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

.hc-round-head{
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  color: #fff;
}

.hc-round-smell.hc-round-head{
  background: linear-gradient(135deg, #d96f0b, #ffb347);
}

.hc-round-taste.hc-round-head{
  background: linear-gradient(135deg, #8B4513, #a35a22);
}


/* =======================
   Buttons
========================== */
button{
  background: var(--accent);
  color:#fff;
  padding:12px 20px;
  border:none;
  border-radius:6px;
  font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition: transform .06s ease, background .15s ease;
  cursor:pointer;
}
button:hover{ background:#6f3710; }
button:active{ transform: translateY(1px); }

/* Results toolbar buttons */
.results-actions button{
  background: var(--accent);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.results-actions button:hover{ background:#6f3710; }

/* =======================
   Header/Footer readability band
========================== */
header, footer{ position: relative; }

/* Disable header band (dark shadow behind the title) */
header::after{
  content: none !important;
  background: none !important;
}

/* Keep footer band for readability */
footer::before{
  content:"";
  position:absolute;
  left:0; right:0;
  height:100%;
  bottom:0;
  background: linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0));
  z-index:-1;
}

main{ padding-bottom: 56px; }

footer{
  color:#eee;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  opacity:.95;
  margin-top: 28px;
  padding: 14px 0 28px;
}


/* =======================
   Cards / panels
========================== */
#setup, #roundSection, #results{ margin-top:30px; }

.input-card{
  background: var(--card);
  border:1px solid var(--muted);
  border-radius:12px;
  padding:20px;
  margin-bottom:30px;
  box-shadow: var(--shadow);
}

.input-card h3{
  text-align:left;
  color:var(--accent);
  font-weight:bold;
  display:flex;
  align-items:center;
  gap:8px;
}
.input-card h3 .icon{ font-size:1.3em; }

/* =======================
   Tables
========================== */
table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:20px;
  background:var(--card);
  box-shadow: var(--shadow);
}
th, td{
  border:1px solid #ddd;
  padding:12px;
  text-align:center;
}
tr:nth-child(even){ background:#fdfdfd; }
tr:nth-child(odd){  background:#f7f7f7; }
th{ position:sticky; top:0; background:#fff; z-index:1; }

/* =======================
   Inputs
========================== */
.bottle-autocomplete .ac-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bottle-autocomplete .ac-item.is-duplicate {
  background: #fff7ed;
}

.bottle-autocomplete .duplicate-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #9a3412;
  background: #ffedd5;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 3px 7px;
  white-space: nowrap;
}

.bottle-autocomplete input,
input[type="number"],
input[type="text"],
input[type="password"],
input[type="email"]{
  width:100%;
  padding:10px;
  font-size:16px;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fff;
  transition:all .2s ease-in-out;
  text-align:center;
}

input:focus{
  outline:none;
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 4px rgba(139,69,19,.5);
}
input::placeholder{
  font-size:.85rem;
  color:#888;
  opacity:.6;
  transition:opacity .2s;
}
input:focus::placeholder{ opacity:0; }

.input-error {
  border: 2px solid #c75b58 !important;
  background: #fff7f1 !important;
  box-shadow: 0 0 0 3px rgba(199, 91, 88, 0.14) !important;
}

/* Remove number spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type="number"]{ -moz-appearance:textfield; }

/* Smell vs Taste rounds */
input.note-input-smell,
input.note-input-taste{
  background:#f2f1ec !important;
  border:1px solid var(--accent-200) !important;
  transition:background-color .4s, border-color .4s;
}
input.note-input-smell:focus,
input.note-input-taste:focus{
  background:#fff !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 4px rgba(139,69,19,.3);
}

/* =======================
   Setup: players + email toggle
========================== */
.players-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.player-row{
  display:grid;
  grid-template-columns: 1fr 44px;
  align-items:center;
  gap: 8px;
  position:relative;
}

/* Email toggle mode */
.player-row .email-input{ display:none; }
.player-row.mode-email .name-input{ display:none; }
.player-row.mode-email .email-input{ display:block; }

.player-row .email-toggle{
  height:40px;
  width:44px;
  padding:0;               /* stop inheriting global button padding */
  line-height:1;
  border:1px solid #ddd;
  background:#f7f7f7;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  box-shadow:none;         /* avoid “primary button” look */
  font-weight:600;
  transition: background .12s ease;
}
.player-row .email-toggle:hover{ background:#eee; }

/* Email toggle should not do the global button press animation */
.player-row .email-toggle:active{
  transform: none;
}

.player-row .email-toggle .tick{
  display:none;
  position:absolute;
  right:6px;
  bottom:4px;
  font-weight:700;
  font-size:.85rem;
  color:#2c7a2c;
}

/* Setup checkbox / actions */
.setup-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0 12px 0;
  flex-wrap: wrap; /* allow wrapping on small screens */
}


.start-game-btn{ margin-top:20px; }

/* =======================
   Bottle selection + autocomplete
========================== */
.type-filter{
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.type-filter label{ font-weight:700; font-size:.95em; color:#333; }
#typeFilter{ background:#f9f9f9; }

.grid-inputs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:20px;
}
#bottleSelection{ margin-top:10px; }

.bottle-autocomplete{
  position:relative;
  border:1px solid #ddd;
  border-radius:8px;
  padding:10px;
  background:#fafafa;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
}

/* Slot header */
.bottle-autocomplete .slot-head .icon{ display:none; font-size:18px; line-height:1; }
.bottle-autocomplete.slot-selected .slot-head .icon{ display:inline-block; }

.bottle-autocomplete .slot-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:24px;
  padding:4px 8px;
  border-radius:8px;
  background:#efefef;
  color:#5a3a15;
  font-weight:600;
}
.bottle-autocomplete:not(.slot-selected) .slot-head{
  background:transparent;
  font-weight:500;
  color:#7a6a55;
}
.bottle-autocomplete .slot-status{ font-weight:600; color:#5a3a15; }

.bottle-autocomplete.slot-selected input[readonly]{
  background:#f2f1ec;
  border:1px solid var(--accent-200);
  cursor:default;
}
.bottle-autocomplete .clear{ margin-top:8px; margin-left:auto; display:inline-block; }

/* Overlay dropdown */
.bottle-autocomplete .autocomplete-list{
  position:absolute;
  top:calc(100% + 6px);
  left:0; right:0;
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  max-height:260px;
  overflow-y:auto;
  z-index:9999;
}
.bottle-autocomplete .autocomplete-list > div{
  padding:8px 12px;
  cursor:pointer;
  white-space:normal;
  line-height:1.3;
}
.bottle-autocomplete .autocomplete-list > div:hover{ background:#f6f6f6; }

/* Hide header when selected */
.bottle-autocomplete.slot-selected .slot-head{ display:none; }

/* Selected “pill” */
.selected-pill{
  display:none;
  height:44px;
  padding:0 12px;
  border:1px solid var(--accent-200);
  background:#f2f1ec;
  border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
  color:#5a3a15;
  text-align:center;
}
.bottle-autocomplete.slot-selected .selected-pill{ display:flex; }
.selected-pill .pill-icon{ font-size:18px; line-height:1; }

/* Hide brand input unless verification toggle is ON */
#bottleSelection:not(.show-names) .bottle-autocomplete.slot-selected input[type="text"]{ display:none; }
#bottleSelection.show-names .bottle-autocomplete.slot-selected input[type="text"]{ display:block; }


/* Compact dropdown scoring */
.score-select{
  width:64px;
  height:36px;
  text-align:center;
  font-weight:700;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fff;
}
.score-select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 4px rgba(139,69,19,.35);
}

/* Setup should be block when visible… */
#setup:not(.hidden){
  display: block !important;
}

/* =======================
   Utility / medals
========================== */
.hidden{ display:none !important; }


/* Bottle icon + number badge */
.bottle-icon{
  position:relative;
  display:inline-block;
  width:40px;
  height:40px;
  margin:auto;
}
.bottle-icon .icon{ font-size:36px; display:block; line-height:1; }
.bottle-number{
  position:absolute;
  top:0; left:0;
  background:var(--accent);
  color:#fff;
  font-size:.75rem;
  font-weight:700;
  border-radius:50%;
  width:20px;
  height:20px;
  line-height:20px;
  text-align:center;
  transform:translate(-30%,-30%);
  box-shadow:0 0 4px rgba(0,0,0,.2);
}


/* =======================
   Focus-by-player (UI)
========================== */
.player-head{ cursor:pointer; user-select:none; }
.player-head.active{ background:#fff9ed; outline:2px solid #d8a05c; }
.dim{ opacity:.35; }


/* =======================
   Results – Winner tiles & awards
========================== */
#winnerArea .winner-tile,
#results .winner-tile{
  color:var(--ink) !important;
  background:#fff;
  border:1px solid #e5e5e5;
}
#results .winner-tile .tile-text,
#results .winner-tile .tile-sub{ color:inherit !important; }
.winner-tile{ align-items:flex-start; }
.winner-tile .tile-text{ text-align:left; width:100%; }


/* Smell/Taste column leaders */
.score-win{
  background:#f3eee7 !important;
  font-weight:700 !important;
}


/* =======================
   Modal – details panel
========================== */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.modal{
  background: #fff;
  width: min(860px, 95vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  position: relative;
}

.modal-body{
  display: flex;
  gap: 16px;
  padding: 22px 22px 18px;
}

.modal-left{
  flex: 0 0 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-left img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #eee;
}
.modal-left .noimg{ font-size: 72px; opacity: .6; }

.modal-right{ flex: 1; text-align: left; }

.modal-right h3.modal-title{
  margin: 0 0 6px 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.modal-right .hsub{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  opacity: .75;
  font-weight: 600;
}
.modal-right .kv{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
}
.modal-right .kv span{ width: 130px; opacity: .7; }
.modal-right .kv b{ font-weight: 600; }
.modal-right .desc{ margin-top: 10px; white-space: pre-wrap; }
.modal-right .src{ margin-top: 10px; }

/* Clear, centred close button */
.modal-x{
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .12s ease, background .12s ease;
}
.modal-x:hover{ background: #222; transform: scale(1.1); }
.modal-x:active{ transform: scale(0.95); }
.modal-x:focus{
  outline: 2px solid #888;
  outline-offset: 2px;
}

/* =======================
   Player notes vs distiller characters
========================== */
.notes-compare-wrap{ margin-top:18px; }
.notes-compare-wrap h4{ margin:0 0 10px; }

.notes-compare{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  box-shadow:var(--shadow);
}
.notes-compare th, .notes-compare td{
  border:1px solid #ddd;
  padding:10px;
  text-align:left;
  vertical-align:top;
}
.notes-compare thead th{
  background:#f7f7f7;
  font-weight:700;
}
.notes-bottle-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 8px;
  font-weight:700;
  color:#2b1a0c;
}
.notes-bottle-head .num{ display:inline-flex; align-items:center; gap:6px; }

.notes-distiller-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.notes-tag{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.notes-tag.hit{
  background:#fff3bf;
  border-color:#e6c44a;
  font-weight:700;
}
.note-text .hit{ background:#fff3bf; border-radius:4px; padding:0 2px; }
.notes-muted{ opacity:.7; }

/* =======================
   SweetAlert2
========================== */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-backdrop-hide{
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.swal2-popup{ border-radius: 16px; }

/* =======================
   Setup instructions helper
========================== */
.setup-step-title{ text-align:left; }

/* =======================
   True hover zoom (pan + zoom inside the SAME image)
========================== */
.hc-zoom{
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto;
  border-radius: 14px;
  overflow: hidden;      /* crop the zoomed image */
  cursor: zoom-in;
}
.hc-zoom__img{
  display: block;
  max-width: 100%;
  height: auto;
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
  transition: transform .12s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine){
  .hc-zoom:hover .hc-zoom__img{
    transform: scale(var(--zoom, 2.2));
  }
}
.hc-zoom__hint{ margin-top: 8px; opacity: .75; }
@media (hover: none){
  .hc-zoom{ cursor: pointer; }
}
.hc-zoom-overlay[hidden]{ display:none !important; }

/* =======================
   Responsive
========================== */
@media (max-width: 600px){
  body{ padding:10px; }
  th, td{ padding:8px; font-size:14px; }
  input[type="number"],
  input[type="text"],
  input[type="password"],
  input[type="email"]{ font-size:16px !important; }
  button{ font-size:14px; padding:10px 15px; }
}

@media (max-width: 720px){
  body{ padding: 10px; }
  .players-grid{ grid-template-columns: 1fr; }

  /* Bottle selection: collapse to 1 column */
  #bottleSelection.grid-inputs{ grid-template-columns: 1fr !important; }

  /* Type filter stacks */
  .type-filter{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .type-filter select{
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 420px){
  body{ padding: 8px; }
  .input-card{ padding: 14px !important; }
  .input-card h3{ font-size: 1.05rem; }
}

/* =======================
   Print
========================== */
@media print{
  button, input, .hidden, #setup, #roundSection{ display:none !important; }
  body{ background:#fff; color:#000; }
  table{ box-shadow:none; border:1px solid #000; }
  th, td{ border:1px solid #000; }
}

/* --- SAFETY: prevent .winner-row grid rules from breaking table rows --- */
tr.winner-row{
  display: table-row !important;
  background:#ffeb3b !important;
  font-weight:700 !important;
}
tr.winner-row > th,
tr.winner-row > td{
  background: inherit;
}

/* Only apply the winner-row grid layout to non-table elements */
#winnerArea .winner-row:not(tr),
#results .winner-row:not(tr){
  display:grid;
  grid-template-columns: 1fr minmax(280px, 34%);
  gap:12px;
  padding:2px 6px 8px;
  background: transparent;
  align-items:start;
}
@media (max-width: 820px){
  #winnerArea .winner-row:not(tr),
  #results .winner-row:not(tr){
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SETUP LAYOUT HOTFIX + SMALLER SHOW-NAMES TEXT + TOOLTIP
   Paste at very end of game.css
========================================================= */

/* 1) Fix broken setup layout (prevents side-by-side card + button) */
#setup:not(.hidden){
  display: block !important;
}

#setup > .input-card,
#setup > .setup-actions{
  width: 100% !important;
  max-width: 100% !important;
}

/* Keep the Start button below and centred */
#setup > .setup-actions{
  text-align: center;
  margin-top: 0;
  margin-bottom: 30px;
}

/* (Optional) make the Start button look consistent / not “floating” */
.start-game-btn{
  display: inline-flex;
  justify-content: center;
  min-width: 260px;
}

/* 2) Make the “Temporarily reveal bottles…” label smaller and nicer */
.setup-checkbox{
  font-size: 0.92rem;
  line-height: 1.25;
  align-items: flex-start;
  flex-wrap: nowrap;                 /* stops checkbox dropping above text */
}

.setup-checkbox input[type="checkbox"]{
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Allow wrapping again only on small screens */
@media (max-width: 720px){
  .setup-checkbox{ flex-wrap: wrap; }
}

/* 3) Instant tooltip — scoped to the EMAIL ICON ONLY (not the whole row)
      Requires HTML change: use data-tip on the .email-toggle button,
      and remove title="" attributes (native tooltip delay).
*/
.email-toggle[data-tip]{
  position: relative;
}

/* bubble */
.email-toggle[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translate(-50%, -100%);
  background: rgba(0,0,0,.88);
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  padding: 8px 10px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}

/* arrow */
.email-toggle[data-tip]::before{
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0,0,0,.88);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}

/* show instantly */
.email-toggle[data-tip]:hover::after,
.email-toggle[data-tip]:hover::before,
.email-toggle[data-tip]:focus-visible::after,
.email-toggle[data-tip]:focus-visible::before{
  opacity: 1;
  visibility: visible;
}

/* Summary modal polish */
.swal2-popup .swal2-title{
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
  margin-bottom: 14px !important;
  color: #3a3a3a;
}

.swal2-html-container{
  font-size: 0.96rem !important;
  line-height: 1.4;
}

/* Summary table */
.swal2-html-container table{
  margin-bottom: 14px;
  box-shadow: none;
  border: 1px solid #e6e6e6;
}

.swal2-html-container th{
  font-size: 0.95rem;
  font-weight: 600;
  color: #4a4a4a;
  background: #f7f7f7;
  padding: 8px 10px !important;
}

.swal2-html-container td{
  font-size: 0.95rem;
  color: #444;
  padding: 8px 10px !important;
}

.swal2-html-container th,
.swal2-html-container td{
  border-color: #e7e7e7;
}

/* Summary helper lines */
.swal2-html-container .hc-summary-meta,
.swal2-html-container .hc-summary-footnote{
  font-size: 0.9rem;
  color: #666;
}

/* Primary / secondary action sections */
.hc-summary-heading{
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 8px;
  color: #2f2f2f;
}

.hc-summary-warning{
  max-width: 540px;
  margin: 0 auto 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #8a4a4a;
}

.hc-summary-actions{
  margin-top: 14px;
  gap: 16px;
}

.hc-summary-actions{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.hc-summary-card{
  border-radius: 16px;
  padding: 16px 14px;
  text-align: center;
  border: 1px solid #e5e5e5;
  background: #fafafa;
}

.hc-summary-card--next{
  background: #f7f3ee;
  border-color: #dbc5b2;
}

.hc-summary-card--end{
  background: #fff4f4;
  border-color: #e7bcbc;
}

.hc-summary-card-title{
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #2f2f2f;
}

.hc-summary-card--end .hc-summary-card-title{
  color: #8a2f2f;
}

.hc-summary-card-copy{
  font-size: 0.86rem;
  line-height: 1.4;
  color: #666;
  margin-bottom: 12px;
}

.hc-summary-card--end .hc-summary-card-copy{
  color: #8a4a4a;
}

.hc-summary-next-btn,
.hc-summary-end-btn{
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 700;
}

.hc-summary-next-btn{
  background: #8B4513;
  color: #fff;
}

.hc-summary-end-btn{
  background: #c94a4a;
  color: #fff;
}

.hc-summary-end-btn:hover{
  background: #b53f3f;
}

@media (max-width: 700px){
  .hc-summary-actions{
    grid-template-columns: 1fr;
  }
}

.hc-round-actions {

  text-align: center;

  margin-top: 2rem;

}

/* =========================================================
   HIDDEN CASK — POLISHED SETUP / HERO LAYOUT
   Paste at the very end of game.css
========================================================= */

/* -----------------------
   Page width adjustment
------------------------ */
body {
  max-width: 980px;
}

/* -----------------------
   Hero / intro area
------------------------ */
.hc-hero {
  padding: 30px 0 12px;
  text-align: center;
}

.hc-hero-inner {
  width: 100%;
  margin: 0 auto;
}

.hc-hero .hc-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px;
  padding: 6px 13px;
  border: 1px solid rgba(225, 195, 108, 0.55);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  color: #f4e4bd;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hc-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.75);
}

.hc-subtitle {
  margin: 10px 0 18px;
  color: #f4e4bd;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}

.hc-intro-card {
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid rgba(225, 195, 108, 0.38);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(28, 20, 13, 0.88), rgba(70, 38, 17, 0.72));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  color: #fff8e8;
  text-align: left;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.hc-intro-card > p {
  margin: 0 0 14px;
  text-align: center;
  color: #fff8e8;
  font-size: 1rem;
  line-height: 1.5;
}

.hc-feature-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.hc-feature-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 248, 232, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  color: #fff8e8;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.hc-intro-card .reveal-box {
  margin-top: 4px;
  color: #fff8e8;
}

.hc-intro-card .reveal-box summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: #f4e4bd;
  font-weight: 800;
}

.hc-intro-card .reveal-box p,
.hc-intro-card .setup-instructions {
  color: #fff8e8;
}

.hc-intro-card .setup-instructions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hc-intro-card .setup-instructions h2,
.hc-intro-card .setup-instructions h3 {
  color: #f4e4bd;
  text-align: left;
}

.hc-cta-btn {
  margin-top: 12px;
}

/* -----------------------
   Setup heading
------------------------ */
.hc-setup {
  margin-top: 26px !important;
}

.hc-setup-heading {
  max-width: 760px;
  margin: 0 auto 18px;
  text-align: center;
  color: #fff;
}

.hc-setup-heading .hc-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(225, 195, 108, 0.16);
  border: 1px solid rgba(225, 195, 108, 0.34);
  color: #f4e4bd;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.hc-setup-heading h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.15;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.75);
}

.hc-setup-heading p {
  margin: 0;
  color: rgba(255, 248, 232, 0.92);
  font-size: 1rem;
  text-shadow: 0 2px 9px rgba(0, 0, 0, 0.75);
}

/* -----------------------
   Step cards
------------------------ */
.hc-step-card,
.hc-ready-card {
  padding: 24px;
  border: 1px solid rgba(217, 195, 163, 0.75);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(248, 246, 241, 0.985));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

.hc-step-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.hc-step-title-group {
  min-width: 0;
}

.hc-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f1e3d0;
  color: #71400f;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hc-step-card h3,
.hc-ready-card h3 {
  margin: 0;
  color: var(--accent);
  font-size: 1.28rem;
  line-height: 1.2;
  text-align: left;
}

.hc-help-text {
  margin: 0 0 18px;
  color: #4b4238;
  font-size: 0.98rem;
  line-height: 1.45;
}

/* -----------------------
   Form controls
------------------------ */
.player-count-row,
.type-filter {
  display: grid;
  gap: 5px;
  min-width: 210px;
  margin: 0;
}

.player-count-row label,
.type-filter label {
  color: #4a3320;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.player-count-row select,
.type-filter select,
#playerCount,
#typeFilter {
  width: 100%;
  min-height: 42px;
  padding: 9px 38px 9px 12px;
  border: 1px solid #d8c7ad;
  border-radius: 12px;
  background-color: #fffaf0;
  color: #2b2118;
  font-size: 0.96rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(36, 52, 71, 0.04);
}

/* -----------------------
   Player rows - fixes squeezed inputs
------------------------ */
.players-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.player-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #eadfce;
  border-radius: 14px;
  background: #fffaf3;
}

.player-slot-label {
  color: #5b3a1d;
  font-size: 0.92rem;
  font-weight: 900;
  white-space: nowrap;
}

.player-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.player-input-wrap .name-input,
.player-input-wrap .email-input {
  min-width: 0;
  height: 42px;
  text-align: left;
  padding-left: 13px;
  padding-right: 13px;
  border-radius: 12px;
}

.player-row .email-toggle {
  width: 46px;
  height: 42px;
  border-radius: 12px;
  background: #f4efe8;
  border: 1px solid #e2d5c5;
  color: #5b3a1d;
  opacity: 1;
}

.player-row .email-toggle:hover {
  background: #eee2d4;
}

.player-row.has-email .email-toggle {
  background: #ecf8ec;
  border-color: #a9d7a9;
  color: #236b23;
}

.player-row .email-input {
  display: none;
}

.player-row.mode-email .name-input {
  display: none;
}

.player-row.mode-email .email-input {
  display: block;
}

/* Disable the old full-row tooltip because the tooltip should sit on the email icon only */
.player-row[data-tip]::before,
.player-row[data-tip]::after {
  display: none !important;
}

/* -----------------------
   Bottle setup polish
------------------------ */
.hc-blind-toggle {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 10px 12px;
  border: 1px solid #eadfce;
  border-radius: 14px;
  background: #fffaf3;
  color: #3e3127;
}

.hc-blind-toggle input {
  margin-top: 3px;
}

.hc-blind-toggle span {
  display: grid;
  gap: 2px;
}

.hc-blind-toggle strong {
  color: #3b2a1e;
  font-size: 0.94rem;
}

.hc-blind-toggle small {
  color: #6f6258;
  font-size: 0.8rem;
  line-height: 1.25;
}

.hc-bottle-grid {
  gap: 14px;
}

.hc-bottle-grid .bottle-autocomplete {
  padding: 14px;
  border: 1px solid #e2d7c9;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #fff, #fbf8f4);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.055);
}

.hc-bottle-grid .bottle-autocomplete .slot-head {
  margin-bottom: 9px;
  color: #5b3a1d;
  font-size: 1rem;
  font-weight: 900;
}

.hc-bottle-grid .bottle-autocomplete input[type="text"] {
  height: 43px;
  border-radius: 12px;
}

.hc-bottle-grid .bottle-autocomplete .clear {
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 10px;
}

/* -----------------------
   Ready card
------------------------ */
.hc-ready-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.hc-ready-copy {
  min-width: 0;
}

.hc-ready-card p {
  margin: 8px 0 0;
  color: #4b4238;
  line-height: 1.45;
}

/* Primary Start Game CTA */
.hc-ready-card .start-game-btn {
  min-width: 280px;
  min-height: 58px;
  padding: 16px 30px;
  border-radius: 18px;

  background: linear-gradient(135deg, #c46b16, #e09a2d);
  color: #fff;

  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: 0.02em;

  border: 1px solid rgba(255,255,255,.18);

  text-shadow: 0 1px 2px rgba(0,0,0,.35);

  box-shadow:
    0 12px 28px rgba(196,107,22,.38),
    inset 0 1px 0 rgba(255,255,255,.28);

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    filter .12s ease;

  position: relative;
  overflow: hidden;
}

/* Hover */
.hc-ready-card .start-game-btn:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(135deg, #d77718, #f0aa34);

  box-shadow:
    0 16px 34px rgba(196,107,22,.48),
    inset 0 1px 0 rgba(255,255,255,.35);

  filter: brightness(1.03);
}

/* Press */
.hc-ready-card .start-game-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 6px 14px rgba(196,107,22,.28);
}

/* Optional subtle animated glow */
.hc-ready-card .start-game-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,.16) 45%,
      transparent 70%
    );
  transform: translateX(-120%);
  transition: transform .6s ease;
}

.hc-ready-card .start-game-btn:hover::after {
  transform: translateX(120%);
}

/* -----------------------
   Round actions
------------------------ */
.hc-round-actions {
  text-align: center;
  margin-top: 2rem;
}

/* -----------------------
   Responsive polish
------------------------ */
@media (max-width: 820px) {
  .hc-step-header {
    display: grid;
    gap: 14px;
  }

  .player-count-row,
  .type-filter {
    min-width: 0;
    width: 100%;
  }

  .players-grid {
    grid-template-columns: 1fr;
  }

  .hc-ready-card {
    display: grid;
    text-align: left;
  }

  .hc-ready-card .start-game-btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  body {
    padding: 10px;
  }

  .hc-hero {
    padding-top: 28px;
  }

  .hc-intro-card {
    padding: 15px;
    border-radius: 16px;
  }

  .hc-feature-pills {
    justify-content: flex-start;
  }

  .hc-feature-pills span {
    width: 100%;
    justify-content: center;
  }

  .hc-step-card,
  .hc-ready-card {
    padding: 18px;
    border-radius: 16px;
  }

  .player-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .player-input-wrap {
    grid-template-columns: minmax(0, 1fr) 46px;
  }

  .player-slot-label {
    font-size: 0.86rem;
  }

  .hc-bottle-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Start button emphasis - make final action stand out
========================================================= */

.hc-ready-card .start-game-btn {
  min-width: 260px;
  min-height: 54px;
  padding: 15px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, #d8a12f, #b87816);
  color: #1f1408;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    0 10px 24px rgba(184, 120, 22, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.hc-ready-card .start-game-btn:hover {
  background: linear-gradient(135deg, #e4b13e, #c98517);
  color: #1f1408;
  transform: translateY(-1px);
  box-shadow:
    0 13px 28px rgba(184, 120, 22, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hc-ready-card .start-game-btn:active {
  transform: translateY(1px);
}

@media (max-width: 820px) {
  .hc-ready-card .start-game-btn {
    width: 100%;
    font-size: 1rem;
  }
}

/* =========================================================
   Mobile hero feature pills - 2 column grid
========================================================= */

@media (max-width: 560px) {
  .hc-feature-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .hc-feature-pills span {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    padding: 8px 10px;
  }
}

/* =========================================================
   Footer link polish
========================================================= */

.hc-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hc-footer-link,
.hc-footer-link:link,
.hc-footer-link:visited {
  color: #f4e4bd;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 228, 189, 0.55);
}

.hc-footer-link:hover {
  color: #fff8e8;
  border-bottom-color: #fff8e8;
}

.hc-footer-sep {
  color: rgba(255, 255, 255, 0.65);
}

/* =========================================================
   Player row spacing fix
   Prevents label/input overlap after email toggle fix
========================================================= */

#playersGrid .player-row {
  grid-template-columns: 82px minmax(0, 1fr) !important;
  padding: 10px 10px !important;
}

#playersGrid .player-slot-label {
  min-width: 0 !important;
  padding-right: 8px !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#playersGrid .player-input-wrap {
  min-width: 0 !important;
  width: 100% !important;
}

#playersGrid .player-row .name-input,
#playersGrid .player-row .email-input,
#playersGrid .player-row input[id^="emailInput"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Slightly tighter desktop layout so fields breathe */
@media (min-width: 821px) {
  #playersGrid .player-input-wrap {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 7px !important;
  }

  #playersGrid .player-row .email-toggle {
    width: 44px !important;
  }
}

/* Mobile: stack label above input/button */
@media (max-width: 700px) {
  #playersGrid .player-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #playersGrid .player-slot-label {
    padding-right: 0 !important;
  }
}

/* =========================================================
   FINAL — Single-input player/email toggle
   Matches current index.html
========================================================= */

#playersGrid.players-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

#playersGrid .player-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #eadfce;
  border-radius: 14px;
  background: #fffaf3;
}

#playersGrid .player-slot-label {
  min-width: 0;
  color: #5b3a1d;
  font-size: 0.9rem;
  line-height: 1.2;
  font-weight: 900;
  white-space: nowrap;
}

#playersGrid .player-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-areas: "field button";
  align-items: center;
  gap: 7px;
  min-width: 0;
  width: 100%;
}

#playersGrid .player-visible-input {
  grid-area: field;
  display: block !important;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 10px 13px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  box-sizing: border-box;
}

#playersGrid .player-row input[type="hidden"] {
  display: none !important;
}

#playersGrid .email-toggle {
  grid-area: button;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 42px;
  padding: 0;
  line-height: 1;
  border: 1px solid #e2d5c5;
  border-radius: 12px;
  background: #f4efe8;
  color: #5b3a1d;
  box-shadow: none;
  cursor: pointer;
  opacity: 1;
  position: relative;
}

#playersGrid .email-toggle:hover {
  background: #eee2d4;
}

#playersGrid .email-toggle:active {
  transform: none;
}

#playersGrid .player-row.mode-email .player-visible-input {
  border-color: #bfae98;
  background: #fffdf8;
}

/* =========================================================
   Stored email state + clean tick
   Uses the real .tick span only.
   Leaves ::before / ::after available for tooltip.
========================================================= */

#playersGrid .player-row.has-email .email-toggle {
  background: #eef8ee !important;
  border-color: rgba(46, 125, 50, 0.38) !important;
  color: #2e7d32 !important;
  overflow: visible;
  position: relative;
}

/* Hide tick unless saved email exists */
#playersGrid .email-toggle .tick {
  display: none !important;
}

/* Saved-email tick */
#playersGrid .player-row.has-email .email-toggle .tick {
  display: flex !important;
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: #2e7d32;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* Tooltip bubble */
#playersGrid .email-toggle[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translate(-50%, -100%);
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  padding: 8px 10px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}

/* Tooltip arrow */
#playersGrid .email-toggle[data-tip]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.88);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}

/* Show tooltip */
#playersGrid .email-toggle[data-tip]:hover::after,
#playersGrid .email-toggle[data-tip]:hover::before,
#playersGrid .email-toggle[data-tip]:focus-visible::after,
#playersGrid .email-toggle[data-tip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* Mobile */
@media (max-width: 820px) {
  #playersGrid.players-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  #playersGrid .player-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #playersGrid .player-input-wrap {
    grid-template-columns: minmax(0, 1fr) 44px;
  }
}

/* Safety: hidden email storage fields must never show */
#playersGrid input[id^="email"][type="hidden"] {
  display: none !important;
}

/* =======================
   Hidden Cask - End Game SweetAlert polish
========================== */

.swal2-popup.hc-swal-popup {
  border-radius: 22px;
  padding: 34px 32px 30px;
  max-width: 560px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(139, 69, 19, 0.18);
}

.hc-swal-title {
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.15;
  color: #2b1b12;
  margin-bottom: 14px;
}

.hc-swal-html {
  margin-top: 4px;
}

.hc-endgame-confirm {
  text-align: left;
  color: #2f2a24;
  font-size: 17px;
  line-height: 1.55;
}

.hc-endgame-confirm p {
  margin: 0 0 13px;
}

.hc-endgame-rounds {
  background: #fff8e6;
  border: 1px solid #ead29b;
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 18px;
}

.hc-endgame-warning {
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 14px;
  background: #fff0f0;
  border: 1px solid #e5a3a3;
  color: #8b1e1e;
  font-weight: 700;
  text-align: center;
}

.hc-swal-actions {
  gap: 14px;
  margin-top: 28px;
  width: 100%;
  justify-content: center;
}

.hc-swal-btn {
  border: 0;
  border-radius: 14px;
  padding: 15px 22px;
  min-width: 190px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.hc-swal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.hc-swal-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.hc-swal-btn-continue {
  background: #198754;
  color: #fff;
}

.hc-swal-btn-continue:hover {
  background: #157347;
}

.hc-swal-btn-stop {
  background: #b42318;
  color: #fff;
}

.hc-swal-btn-stop:hover {
  background: #931a12;
}

/* Mobile layout */
@media (max-width: 520px) {
  .swal2-popup.hc-swal-popup {
    width: calc(100% - 28px);
    padding: 28px 20px 24px;
  }

  .hc-endgame-confirm {
    text-align: center;
    font-size: 16px;
  }

  .hc-swal-actions {
    flex-direction: column;
    gap: 10px;
  }

  .hc-swal-btn {
    width: 100%;
    min-width: 0;
    font-size: 17px;
    padding: 16px 18px;
  }
}

/* Mobile horizontal overflow + desktop width correction */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hc-step-card,
.hc-ready-card,
.input-card,
.hc-intro-card {
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 768px) {
  body {
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .hc-hero,
  .hc-hero-inner,
  .hc-intro-card,
  #setup,
  .hc-step-card,
  .hc-ready-card,
  .input-card {
    max-width: 100% !important;
  }

  .hc-hero h1,
  .hc-setup-heading h2,
  .hc-help-text,
  .hc-intro-card p {
    overflow-wrap: anywhere;
  }

  .hc-feature-pills,
  .hc-feature-pills span,
  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  .hc-feature-pills span {
    min-width: 0;
  }
}

/* =========================================================
   Hidden Cask — Autocomplete hover correction
   Prevents .ac-results wrapper from being highlighted as one block
========================================================= */

.bottle-autocomplete .autocomplete-list > div:hover {
  background: transparent !important;
}

.bottle-autocomplete .autocomplete-list > .ac-results:hover {
  background: #fff !important;
}

.bottle-autocomplete .autocomplete-list > .ac-sticky-footer:hover,
.bottle-autocomplete .autocomplete-list > .hc-custom-bottle-footer:hover {
  background: #fbf6ee !important;
}

.bottle-autocomplete .autocomplete-list .ac-item:hover {
  background: #f5eadb !important;
  color: #5b2d0c !important;
}

/* =========================================================
   Hidden Cask — Autocomplete footer layout fix
   Keeps footer below results without forcing hidden lists visible
========================================================= */

/* Only open dropdowns become flex layouts */
.bottle-autocomplete .autocomplete-list[data-open="1"] {
  display: flex !important;
  flex-direction: column !important;
  max-height: 360px !important;
  overflow: hidden !important;
}

/* Results scroll independently above the footer */
.bottle-autocomplete .autocomplete-list[data-open="1"] .ac-results {
  flex: 1 1 auto !important;
  max-height: 285px !important;
  overflow-y: auto !important;
  padding-bottom: 8px !important;
  scroll-padding-bottom: 12px !important;
}

/* Footer should sit after the result list, not float over it */
.bottle-autocomplete .autocomplete-list[data-open="1"] .ac-sticky-footer,
.bottle-autocomplete .autocomplete-list[data-open="1"] .hc-custom-bottle-footer {
  flex: 0 0 auto !important;
  position: relative !important;
  bottom: auto !important;
}

/* Remove the visible horizontal line/ghost divider effect */
.bottle-autocomplete .autocomplete-list[data-open="1"] .ac-sticky-footer {
  margin-top: 0 !important;
}