:root{
  --bg0:#ffffff;
  --bg1:rgba(15,23,42,.04);
  --bd:rgba(15,23,42,.12);
  --bd2:rgba(15,23,42,.18);
  --txt:rgba(15,23,42,.92);
  --muted:rgba(15,23,42,.68);
  --danger:#e11d48;
  --ok:#0d9488;
  --shadow: 0 14px 40px rgba(2,6,23,.12);
  --shadow2: 0 10px 24px rgba(2,6,23,.10);
  --r:20px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background:
    radial-gradient(900px 540px at 12% 8%, rgba(45,212,191,.22), transparent 60%),
    radial-gradient(860px 520px at 86% 12%, rgba(99,102,241,.20), transparent 60%),
    radial-gradient(980px 640px at 52% 96%, rgba(225,29,72,.14), transparent 60%),
    radial-gradient(14px 14px at 18% 38%, rgba(15,23,42,.07), transparent 55%),
    radial-gradient(16px 16px at 72% 62%, rgba(15,23,42,.06), transparent 55%),
    radial-gradient(18px 18px at 44% 22%, rgba(15,23,42,.05), transparent 55%),
    var(--bg0);
  color:var(--txt);
  /* iOS safe area */
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow-x: hidden;
}
a{color:inherit}
.container{max-width:980px;margin:0 auto;padding:16px;padding-bottom:32px}
.header{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.70));
  border-bottom:1px solid rgba(15,23,42,.10);
}
.header-inner{max-width:980px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:42px;height:42px;border-radius:14px;flex:0 0 42px;
  background: linear-gradient(135deg, rgba(45,212,191,.35), rgba(99,102,241,.35), rgba(255,77,109,.35));
  border:1px solid rgba(15,23,42,.12);
  box-shadow: var(--shadow2);
  display:grid;place-items:center;
}
.logo svg{opacity:.95}
.h1{font-size:18px;font-weight:900;letter-spacing:.2px}
.sub{font-size:12px;color:var(--muted)}
.pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{
  padding:5px 10px;border-radius:999px;
  border:1px solid var(--bd);
  background: rgba(255,255,255,.72);
  font-size:12px;color:var(--muted);
}
.pill strong{color:var(--txt);font-weight:800}
.grid{display:grid;grid-template-columns: 1.15fr .85fr;gap:12px}
@media(max-width:900px){.grid{grid-template-columns: 1fr}}
.card{
  border:1px solid var(--bd);
  background: rgba(255,255,255,.85);
  border-radius: var(--r);
  padding:14px;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .18s ease;
}
.card:hover{transform: translateY(-1px); box-shadow: 0 18px 50px rgba(2,6,23,.14)}
.card.soft{background: rgba(255,255,255,.65)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sep{height:1px;background:rgba(15,23,42,.10);margin:12px 0}

/* ─── Buttons ─── */
.btn{
  border:1px solid var(--bd2);
  background: rgba(255,255,255,.75);
  color:var(--txt);
  padding:10px 14px;
  border-radius: 14px;
  cursor:pointer;
  font-size:15px;
  min-height:44px;
  min-width:44px;
  transition: transform .10s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  user-select:none;
  touch-action: manipulation;
  -webkit-user-select:none;
}
.btn:active{transform:scale(.96)}
.btn:hover{background: rgba(255,255,255,.92)}
.btn:hover{box-shadow: 0 10px 24px rgba(2,6,23,.10)}
.btn.primary{
  border-color: rgba(45,212,191,.35);
  background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(99,102,241,.14));
  font-weight:900;
}
.btn.danger{
  border-color: rgba(255,77,109,.45);
  background: linear-gradient(135deg, rgba(225,29,72,.18), rgba(99,102,241,.10));
  font-weight:900;
}
.btn.big{padding:16px 14px;border-radius:18px;font-size:16px;min-height:54px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ─── Inputs ─── */
.input, select, input[type="text"], input[type="number"], input{
  border:1px solid var(--bd2);
  background: rgba(255,255,255,.80);
  color:var(--txt);
  padding:10px 12px;
  border-radius: 14px;
  outline:none;
  min-height:46px;
  font-size:16px; /* prevents iOS auto-zoom */
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(15,23,42,.5)' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
input[type="number"]{-moz-appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.label{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:4px}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas; font-size:12px; opacity:.9}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--bd);
  background: rgba(255,255,255,.72);
  font-size:13px;
}
.badge.ok{border-color: rgba(45,212,191,.35)}
.badge.bad{border-color: rgba(255,77,109,.45)}
.notice{
  border:1px solid rgba(255,77,109,.45);
  background: rgba(225,29,72,.08);
  border-radius: var(--r);
  padding:12px 14px;
  color: var(--txt);
}
.muted{color:var(--muted)}
.title{font-size:18px;font-weight:900;margin:0 0 4px 0}
.reveal{
  min-height: 440px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;gap:12px;padding:8px;
}
.role{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:900
}
.word{
  font-size:28px;font-weight:950;letter-spacing:.4px;
  padding:12px 18px;border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
  text-align:center;
  word-break:break-word;
}
.timer{
  font-size:56px;font-weight:950;letter-spacing:.6px;
  line-height:1;
  background: linear-gradient(135deg, rgba(45,212,191,1), rgba(99,102,241,1));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.timer.urgent{
  background: linear-gradient(135deg, #e11d48, #f97316);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.small{font-size:13px}
.log{
  max-height: 640px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.log-item{padding:10px 0;border-bottom:1px solid rgba(15,23,42,.08)}
.log-time{font-size:11px;color:var(--muted)}
.footer-tip{margin-top:10px;color:var(--muted);font-size:12px}
.toggle{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:14px;border:1px solid var(--bd2);
  background: rgba(255,255,255,.78);
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
}
.switch{
  width:46px;height:26px;border-radius:999px;border:1px solid var(--bd2);
  background: rgba(15,23,42,.06); position:relative; flex:0 0 46px;
}
.switch::after{
  content:""; position:absolute; top:3px; left:3px;
  width:18px;height:18px;border-radius:999px;
  background: rgba(255,255,255,.95);
  transition:left .18s ease, background .18s ease;
}
.switch.on{border-color: rgba(45,212,191,.45); background: rgba(45,212,191,.12)}
.switch.on::after{left:23px; background: rgba(45,212,191,.95)}

/* ─── Flip card ─── */
.flip-wrap{perspective:1200px;width:100%;max-width:620px}
.flip{
  position:relative;
  width:100%;
  min-height:300px;
  transform-style:preserve-3d;
  transition: transform .75s cubic-bezier(.2,.9,.2,1);
}
.flip.flipped{transform: rotateY(180deg);}
.face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius: 20px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
  padding:20px 16px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;
}
.face.back{transform: rotateY(180deg);}
.spark{
  width:64px;height:64px;border-radius:18px;
  background: linear-gradient(135deg, rgba(45,212,191,.35), rgba(99,102,241,.25), rgba(255,77,109,.25));
  border:1px solid rgba(15,23,42,.12);
  box-shadow: var(--shadow2);
  display:grid;place-items:center;
}

/* Make the top logo SVG readable on white */
.logo svg path{stroke: rgba(255,255,255,.95)}

/* ─── Player badges with remove ─── */
.player-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 6px 6px 12px;border-radius:999px;
  border:1px solid var(--bd);
  background: rgba(255,255,255,.72);
  font-size:13px;font-weight:600;
}
.player-badge .remove-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(225,29,72,.3);
  background: rgba(225,29,72,.08);
  color: var(--danger);
  font-size:14px;font-weight:900;line-height:1;
  cursor:pointer;touch-action:manipulation;
  padding:0;
  transition: background .15s;
}
.player-badge .remove-btn:hover{background: rgba(225,29,72,.18)}
.player-badge .remove-btn:active{transform:scale(.9)}

/* ─── Vote card ─── */
.vote-card{
  border:2px solid var(--bd);
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,.72);
  display:flex;flex-direction:column;gap:10px;
  width:100%;
}
.vote-card.selected{border-color: rgba(45,212,191,.5);background: rgba(45,212,191,.06)}

/* ─── Settings panel (collapsible on mobile) ─── */
.settings-toggle-btn{
  display:none;
  width:100%;padding:12px;border-radius:14px;
  border:1px solid var(--bd2);background: rgba(255,255,255,.75);
  font-weight:700;font-size:14px;color:var(--txt);
  cursor:pointer;touch-action:manipulation;
  text-align:left;justify-content:space-between;
  align-items:center;
}
.settings-body{display:contents}

/* ─── MOBILE ─── */
@media(max-width:680px){
  .header-inner{padding:10px 12px;gap:8px}
  .sub{display:none}
  .pills{display:none}
  .h1{font-size:16px}

  .container{padding:10px;padding-bottom:40px}
  .card{padding:12px;border-radius:16px}

  /* Stack all row children by default on mobile forms */
  .form-row{flex-direction:column}
  .form-row > *{width:100% !important;min-width:0 !important;flex:none !important}

  /* Keep generic rows flexible */
  .row{gap:8px}

  /* Flip card taller on mobile */
  .flip{min-height:360px}
  .face{padding:16px 14px;gap:10px}

  /* Word card */
  .word{font-size:24px;padding:10px 14px}

  /* Timer */
  .timer{font-size:64px}

  /* Reveal section */
  .reveal{min-height:unset;padding:4px}

  /* Buttons */
  .btn{font-size:15px}
  .btn.big{font-size:16px;padding:16px;min-height:56px}

  /* Settings collapsible toggle */
  .settings-toggle-btn{display:flex}
  .settings-body.collapsed{display:none}
  .settings-body{display:block}
  .settings-body > *{margin-bottom:10px}

  /* Voting layout */
  .vote-row{flex-direction:column}
  .vote-row > *{width:100% !important;min-width:0 !important;flex:none !important}

  /* Title bigger */
  .title{font-size:20px}

  /* Log hidden on mobile by default (shown via button) */
  .log-panel{display:none}
  .log-panel.open{display:block}
  .log-toggle{display:flex !important}
}

@media(max-width:400px){
  .word{font-size:20px}
  .timer{font-size:56px}
  .flip{min-height:380px}
}

/* Log toggle button (hidden on desktop) */
.log-toggle{
  display:none;
  width:100%;padding:12px;border-radius:14px;
  border:1px solid var(--bd2);background: rgba(255,255,255,.75);
  font-weight:700;font-size:14px;color:var(--txt);
  cursor:pointer;touch-action:manipulation;
  text-align:center;margin-top:8px;
  align-items:center;justify-content:center;gap:6px;
}