
:root{
  --red:#b40b16; --dark:#26080a; --cream:#fff2c7; --yellow:#ffd447;
  --green:#2d8a49; --ink:#24170f; --paper:#f7e8b5; --muted:#745a46;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--ink);
  background:
    radial-gradient(circle at 10% 20%,rgba(255,212,71,.18),transparent 18%),
    radial-gradient(circle at 90% 10%,rgba(180,11,22,.15),transparent 22%),
    linear-gradient(180deg,#fff8df 0%,#f6e5ab 100%);
  min-height:100vh;
}
a{color:inherit}
.topbar{background:var(--dark);color:#fff;text-align:center;font-size:.78rem;letter-spacing:.08em;padding:.5rem;text-transform:uppercase}
header{background:linear-gradient(180deg,#c80f1b,#9e0811);color:#fff;padding:1.1rem 1rem 1.5rem;text-align:center;box-shadow:0 6px 0 rgba(71,0,0,.28)}
.logo{display:inline-block;background:var(--yellow);color:var(--red);border:5px solid #fff;border-radius:16px;padding:.25rem .9rem;font-weight:900;font-size:clamp(1.7rem,5vw,3rem);transform:rotate(-2deg);box-shadow:0 5px 0 #6e080e}
header h1{margin:.8rem 0 .25rem;font-size:clamp(1.7rem,4.5vw,3.3rem);line-height:.95;text-transform:uppercase}
.container{width:min(1160px,94vw);margin:1.5rem auto 3rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.2rem;align-items:start}
.panel{background:rgba(255,255,255,.82);border:3px solid #6d160f;border-radius:18px;box-shadow:0 8px 0 rgba(109,22,15,.18);overflow:hidden}
.panel-head{background:var(--red);color:#fff;padding:.75rem 1rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.panel-body{padding:1rem}
.jackpot{text-align:center;background:var(--yellow);border:3px dashed var(--red);border-radius:16px;margin-bottom:1rem;padding:.85rem}
.jackpot .label{font-weight:900;text-transform:uppercase;font-size:.9rem}
.jackpot .amount{font-size:clamp(2rem,8vw,4.8rem);font-weight:1000;color:var(--red);line-height:1;margin:.2rem 0}
.jackpot small{display:block;font-size:.68rem;opacity:.7}
.form-row{display:flex;gap:.55rem;flex-wrap:wrap}
input,select{flex:1;min-width:0;padding:.75rem .8rem;border-radius:10px;border:2px solid #8d4d1a;font-weight:700;background:#fffdf0}
button,.btn{border:0;border-radius:12px;padding:.8rem 1.1rem;font-weight:900;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.18);text-decoration:none;display:inline-block}
.primary{background:var(--red);color:#fff}.secondary{background:var(--yellow);color:#5b150c}.danger{background:#401014;color:#fff}
.status{min-height:1.25rem;margin-top:.55rem;font-size:.85rem;font-weight:800}
.scratch-wrap{display:flex;justify-content:center;padding:1rem 0}
.scratch-card{position:relative;width:min(680px,100%);aspect-ratio:16/8.5;border-radius:22px;overflow:hidden;border:6px solid #5a1110;background:#f8e88b;box-shadow:0 10px 0 rgba(67,10,10,.18)}
.card-bg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:repeating-linear-gradient(-45deg,#f9e995 0 16px,#f4dd70 16px 32px);padding:1rem}
.result-label{font-weight:900;text-transform:uppercase;font-size:clamp(.9rem,2.2vw,1.2rem);color:#61120f}
.result-prize{font-weight:1000;font-size:clamp(1.7rem,6vw,4.2rem);color:var(--red);line-height:1;margin:.4rem 0;text-shadow:2px 2px #fff}
.result-sub{font-size:clamp(.75rem,2vw,1rem);max-width:88%}
#scratchCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.actions{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.odds-table{width:100%;border-collapse:collapse;font-size:.9rem}
.odds-table th,.odds-table td{padding:.55rem .45rem;border-bottom:1px solid rgba(70,30,20,.15);text-align:left}
.odds-table th:last-child,.odds-table td:last-child{text-align:right}
.legal{margin-top:1.2rem;font-size:.76rem;line-height:1.45;background:#fff9df;border:2px solid #a97928;padding:1rem;border-radius:14px}
.ticker{
  margin-top:1rem;
  background:#173f24;
  color:#fff;
  border-radius:12px;
  width:100%;
  max-width:100%;
  min-width:0;
  height:48px;
  padding:0 .85rem;
  line-height:48px;
  font-weight:700;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  box-sizing:border-box;
}
.ticker span{color:#ffe45f}
.fake-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:1rem}
.stat{background:#fff;border:2px solid #a96d24;border-radius:12px;padding:.7rem;text-align:center}
.stat strong{display:block;font-size:1.25rem;color:var(--red)}
.small-note{text-align:center;font-size:.72rem;opacity:.7;margin-top:.75rem}
footer{text-align:center;font-size:.72rem;opacity:.65;padding:1rem 1rem 2rem}
.admin-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:1rem}
.notice{padding:.75rem 1rem;border-radius:10px;margin-bottom:1rem;font-weight:700}
.notice.warn{background:#fff0b9;border:2px solid #c88a00}
.notice.ok{background:#dff4e4;border:2px solid #2d8a49}
.notice.bad{background:#f6d7da;border:2px solid #b40b16}
.table-wrap{overflow:auto}
table.admin{width:100%;border-collapse:collapse;background:#fff;font-size:.82rem}
table.admin th,table.admin td{padding:.55rem;border-bottom:1px solid #ddd;text-align:left;white-space:nowrap}
.muted{color:var(--muted);font-size:.8rem}
.row-actions{display:flex;gap:.35rem}
.row-actions button{padding:.45rem .6rem;font-size:.7rem}
.top-actions{display:flex;justify-content:space-between;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.flash{padding:.75rem 1rem;border-radius:10px;margin-bottom:.7rem;background:#fff;border:2px solid #a97928}
.login-box{width:min(440px,92vw);margin:10vh auto;background:#fff;border:3px solid #6d160f;border-radius:18px;padding:1.25rem;box-shadow:0 8px 0 rgba(109,22,15,.18)}
.login-box h1{margin-top:0;color:var(--red)}
@media(max-width:850px){.hero-grid,.admin-grid{grid-template-columns:1fr}.fake-stats{grid-template-columns:1fr}.scratch-card{aspect-ratio:1.35/1}}


.hero-grid > *, .panel, .panel-body, aside { min-width:0; }

.staff-layout{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:1rem;
  align-items:start;
}
.staff-availability{
  background:var(--yellow);
  border:3px dashed var(--red);
  border-radius:14px;
  padding:1rem;
  text-align:center;
  margin-bottom:1rem;
}
.staff-availability strong{
  display:block;
  color:var(--red);
  font-size:2.6rem;
  line-height:1;
}
.staff-availability span{
  font-weight:900;
  text-transform:uppercase;
}
.issue-button{
  width:100%;
  font-size:1rem;
}
.issue-button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.issued-card{
  margin-top:1rem;
  padding:1rem;
  border-radius:16px;
  border:3px solid #2d8a49;
  background:#e5f5e8;
  text-align:center;
}
.issued-label{
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.issued-code{
  font-size:clamp(1.8rem,6vw,3.1rem);
  font-weight:1000;
  color:var(--red);
  margin:.35rem 0 .8rem;
  letter-spacing:.04em;
}
@media(max-width:850px){
  .staff-layout{grid-template-columns:1fr}
}
