body { display: flex; flex-direction: column; min-height: 100dvh; font-size: 20px;
  background: var(--noise), var(--wall), radial-gradient(900px 600px at 50% 20%, rgba(255,150,90,.18), transparent 70%), linear-gradient(180deg, #5a2a1a, #2a120a); }
body.probation { filter: saturate(.75); }
#bar { position: sticky; top: 0; z-index: 5; background: #1e0e08; border-bottom: 3px solid var(--gold); color: var(--gold); font-size: 22px; text-transform: uppercase; padding: 4px 12px 0; display: flex; justify-content: center; align-items: center; gap: 12px; }
#bar:empty { display: none; }
#bar .standing { font-size: 16px; padding: 1px 8px 0; border-radius: 4px; background: #3a8a68; color: #fff; }
#bar .standing.st-probation { background: #8a6a5a; }
#bar .standing.st-out { background: #555; }
#bar .pts { color: var(--cream); }
#bar .secs { color: #fff; min-width: 2ch; }
#app { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 18px; width: 100%; max-width: 760px; margin: 0 auto; }
.timerbar { margin: -14px -16px 0; }

h1 { margin: 0; font-weight: 400; font-size: 34px; text-transform: uppercase; text-align: center; line-height: 1; }
h2 { margin: 0; font-weight: 400; font-size: 24px; text-transform: uppercase; text-align: center; opacity: .9; }
.muted { opacity: .8; text-transform: uppercase; text-align: center; }
.muted.small { font-size: 16px; }
.center { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.center > .statuette, .mystat .statuette { width: 70px; height: 170px; }
.logo { font-family: var(--chunky); font-size: 96px; line-height: .85; text-align: center; color: #ffd27a; text-shadow: 0 .04em 0 #c2451d, 0 .08em 0 #6e1d0c, 0 .14em .3em rgba(255,90,20,.5); }
.logo small { display: block; font-family: var(--display); font-size: .3em; letter-spacing: .1em; color: var(--gold); text-shadow: none; text-transform: uppercase; }
.logo em { display: block; font-family: var(--display); font-style: normal; font-size: .2em; letter-spacing: .06em; color: var(--cream); text-shadow: none; text-transform: uppercase; margin-top: .3em; }

label { display: block; text-transform: uppercase; font-size: 18px; margin: 0 0 4px; opacity: .85; }
.field { width: 100%; border: 0; border-radius: 6px 10px 7px 11px; background: var(--sand) var(--mottle); box-shadow: inset 0 3px 0 rgba(0,0,0,.15); color: var(--ink); font-size: 30px; padding: 10px 12px 4px; text-transform: uppercase; outline: none; }
.field::placeholder { color: rgba(0,0,0,.35); }
.field:focus { box-shadow: inset 0 3px 0 rgba(0,0,0,.15), 0 0 0 3px var(--gold); }
.field.code { text-align: center; letter-spacing: .3em; font-size: 40px; }
.check { display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-size: 20px; }
.check input { width: 22px; height: 22px; accent-color: var(--go); }
.err { color: var(--gold); min-height: 1.1em; text-transform: uppercase; text-align: center; }
.wide { width: 100%; font-size: 32px; padding: .4em; }
.btn.tiny { font-size: 16px; padding: .2em .6em .1em; }

/* the admissions form */
.formhead { text-align: center; background: #efe2c4; color: var(--ink); border-radius: 4px; padding: 10px 12px 6px; transform: rotate(-1deg); box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.formhead small { display: block; font-size: 15px; text-transform: uppercase; color: #8a2a2a; letter-spacing: .05em; }
.formhead h1 { font-size: 30px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.option { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 6px; border: 0; border-radius: 8px 12px 9px 11px; background: rgba(20,10,6,.6); color: var(--cream); text-transform: uppercase; font-size: 20px; line-height: 1; box-shadow: inset 0 -5px 8px rgba(0,0,0,.4), 0 4px 0 rgba(0,0,0,.35); }
.option .particon { width: 100%; height: 88px; }
.option.fresh { animation: pop .3s both; }
.option.chosen { background: var(--gold); color: var(--ink); }
.filed { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.fileditem { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 0 10px; text-align: left; background: rgba(20,10,6,.5); border-radius: 8px; padding: 6px 10px 4px; }
.fileditem small { font-size: 14px; opacity: .7; text-transform: uppercase; grid-column: 1; }
.fileditem b { font-weight: 400; font-size: 22px; text-transform: uppercase; grid-column: 1; }
.fileditem .btn { grid-column: 2; grid-row: 1 / span 2; }

/* answering */
.qcard { background: #efe2c4; color: var(--ink); border-radius: 6px 12px 8px 10px; padding: 14px 14px 10px; font-family: var(--chunky); font-size: 24px; line-height: 1.15; text-align: center; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.answers { display: flex; flex-direction: column; gap: 10px; }
.answer { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px 6px; border: 0; border-radius: 8px 12px 9px 11px; text-align: left; color: var(--ink); background: var(--sand) var(--mottle);
  font-size: 24px; text-transform: uppercase; line-height: 1.05; box-shadow: inset 0 -5px 8px rgba(40,20,10,.25), 0 4px 0 rgba(0,0,0,.4); }
.answer b { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--lapis-dk); color: var(--gold); font-family: var(--chunky); font-size: 26px; }
.answer.picked { background-color: var(--gold); outline: 4px solid #fff; }
.answer:disabled { opacity: .4; }
.locked { text-align: center; text-transform: uppercase; color: var(--gold); min-height: 1.2em; }

/* detention */
.lanegrid { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 10px; }
.lanegrid.bets { grid-template-columns: 1fr 1fr; }
.lanebtn { min-height: 90px; border: 0; border-radius: 10px; background: rgba(20,10,6,.6); color: var(--cream); font-family: var(--chunky); font-size: 44px; box-shadow: inset 0 -5px 8px rgba(0,0,0,.4), 0 4px 0 rgba(0,0,0,.35); }
.lanebtn.bet { font-family: var(--display); font-size: 28px; text-transform: uppercase; min-height: 70px; }
.lanebtn.picked { background: #c0563a; color: #fff; outline: 4px solid #fff; }
.lanebtn:disabled { opacity: .35; }

/* the oral exam */
.eitems { display: flex; flex-direction: column; gap: 10px; }
.eitem { min-height: 64px; border: 0; border-radius: 8px 12px 9px 11px; background: var(--sand) var(--mottle); color: var(--ink); font-size: 28px; text-transform: uppercase; box-shadow: inset 0 -5px 8px rgba(40,20,10,.25), 0 4px 0 rgba(0,0,0,.4); }
.eitem.on { background-color: #8fd0a0; outline: 4px solid #fff; }
.eitem.on::before { content: "✓ "; }
.pet { text-align: center; background: #e0b8c8; color: var(--ink); border-radius: 6px; padding: 4px 8px 2px; text-transform: uppercase; }

.invite { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; font-size: 22px; text-transform: uppercase; }
.invite b { color: var(--gold); letter-spacing: .08em; font-size: 28px; font-weight: 400; }
.invite .btn { font-size: 20px; padding: .3em .9em .2em; }
#toast { position: fixed; left: 50%; bottom: 80px; translate: -50% 0; background: var(--coral-hot); color: #fff; text-transform: uppercase; font-size: 22px; padding: 8px 16px 4px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 10; white-space: nowrap; }
#toast.show { opacity: 1; }