/* Brand tokens (darylmilanes.com) */
:root{
  --teal:#006666;
  --ink:#243036;
  --bg:#fafeff;
  --hi:#ffec99;
  --hi-brd:#e0b800;
  --muted:#e7eef0;

  --panel:#ffffffcc;
  --panel-brd:#ffffff80;
  --ring: rgba(0,102,102,0.14);

  --radius-lg:16px;
  --radius-sm:12px;

  --content-shift: 0;
}

/* Reset / baseline */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family: "Montserrat", -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial,sans-serif;
  min-height:100dvh;display:flex;align-items:stretch;justify-content:center;overflow:hidden;
}

/* Stage */
.frame{
  position:relative;
  width:100%;
  height:100dvh;
  max-width:1600px;
  margin:0 auto;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 40%, rgba(0,0,0,0.0) 100%),
    url("background.png") center/cover no-repeat;
  border:1px solid #cfe4e4;
  border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.15);
  overflow:hidden;
}

/* Flip container and pages */
.container{position:absolute;inset:0;perspective:1400px}

/* Grid layout per page */
.page{
  position:absolute; inset:0;
  backface-visibility:hidden; transition:transform .9s ease;
  display:grid;
  grid-template-rows: min-content min-content 1fr;  /* header, controls, board */
  justify-items:center;
  align-items:start;
  padding: clamp(10px, 2.5vmin, 24px);
  gap: clamp(6px, 1.5vmin, 12px);
}

#namesPage{transform:rotateY(0deg)}
#amountsPage{transform:rotateY(180deg)}
.flipped #namesPage{transform:rotateY(-180deg)}
.flipped #amountsPage{transform:rotateY(0deg)}

h1{
  margin: clamp(14px, 4vmin, 28px) 0 4px;
  font-size: clamp(22px, 4.5vmin, 44px);
  line-height:1.12;
  text-align:center;
  color:#fafeff;
  font-weight:800;
  text-shadow: 0 2px 12px rgba(0,0,0,.28), 0 1px 0 rgba(0,0,0,.4);
}

.controls{
  display:flex; gap:8px; align-items:center; justify-content:center;
}

.board{
  width:min(94%, 1400px);
  margin:0 auto;
  display:grid;
  gap: clamp(6px, 1.2vmin, 12px);

  grid-template-columns: repeat(5, minmax(0,1fr));
  grid-auto-rows: clamp(44px, 8.8vmin, 78px);

  align-self:center;
  justify-self:center;
  transform: translateY(var(--content-shift));
}

@media (max-width: 1200px){ .board{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 900px){ .board{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px){ .board{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Cards */
.card{
  background:#fff;
  border:2px solid var(--teal);
  border-radius: var(--radius-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px 6px;text-align:center;font-weight:800;
  font-size: clamp(13px, 1.9vmin, 18px);
  transition:background .18s, transform .12s, border-color .18s, color .18s, box-shadow .18s;
  box-shadow: 0 2px 0 rgba(0,0,0,0.05), 0 6px 20px rgba(0,0,0,0.06);
}
.card.highlight{
  background:var(--hi);
  border-color:var(--hi-brd);
  transform:scale(1.03);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.card.greyed{
  background:var(--muted);
  color:#6f6f6f;
  border-color:#b9c6c9;
}

/* Amount text under name */
.won{
  display:block;
  margin-top:2px;
  font-size:0.72em;
  font-weight:700;
  color:var(--teal);
}

/* Overlays */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center;padding:18px;z-index:1000;
}
.overlay.active{display:flex}
.panel{
  background:var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid var(--panel-brd);
  border-radius: var(--radius-lg);
  padding:18px 20px;max-width:520px;text-align:center;
  box-shadow:0 16px 44px rgba(0,0,0,.28)
}
.panel.wide{max-width:900px}

/* Buttons */
.btn{
  padding:10px 16px;border-radius:12px;background:var(--teal);color:#fff;
  font-weight:800;font-size:15px;border:none;cursor:pointer;
  box-shadow: 0 6px 20px var(--ring);
}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--teal);border:1px solid var(--teal)}
.btn.outline{background:transparent;color:var(--teal);border:1px solid var(--teal)}

/* Winner banner */
.banner{
  background:#fff;
  border-left:6px solid var(--teal);
  padding:14px 16px;border-radius:12px;
  text-align:left;max-width:min(90vw, 560px);font-size:18px;font-weight:700
}

/* Wizard */
.wizard{display:grid; gap:16px}
.step{display:block}
.step.hidden{display:none}

textarea, input[type="number"], select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #cfd8dc;
  font-family:inherit; font-size:14px;
  background:#fff;
}

.prize-list{display:grid; gap:10px; margin-top:10px}
.prize-row{
  display:grid; gap:10px; align-items:end;
  grid-template-columns: 1fr 220px 120px;
}
@media (max-width: 720px){
  .prize-row{ grid-template-columns: 1fr 1fr; }
  .prize-row .row-remove{ grid-column: 1 / -1; justify-self:end; }
}

.row-actions{display:flex; gap:10px; margin-top:8px}
.step-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:14px}

.muted{color:#5a6b73}
.tiny{font-size:12px}

/* Shorter viewports */
@media (max-height:740px){
  h1{ margin: clamp(8px, 2vmin, 16px) 0 2px; }
  .board{ grid-auto-rows: clamp(40px, 7.2vmin, 64px); }
}

/* Ensure scroll never appears in stage */
body, .frame { overscroll-behavior: none; }

/* Label on prize cards showing who won */
.awarded{
  display:block;
  margin-top:2px;
  font-size:0.72em;
  font-weight:700;
  color:#4a4a4a;
  opacity:0.9;
}