:root {
  --sky-top: #58c9ff;
  --sky-bottom: #c8f3ff;
  --ink: #18304f;
  --ink-soft: #3e5875;
  --paper: #fffdf0;
  --paper-2: #fff7c7;
  --blue: #2878e8;
  --blue-dark: #1454b8;
  --yellow: #ffd84a;
  --yellow-dark: #d99a14;
  --green: #45bd4b;
  --green-dark: #23883c;
  --red: #f2574b;
  --red-dark: #b93639;
  --orange: #ff9838;
  --pink: #ff84b7;
  --purple: #8c6ee8;
  --border: #18304f;
  --pixel-shadow: 6px 6px 0 var(--border);
  --pixel-shadow-small: 4px 4px 0 var(--border);
  --radius: 4px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--sky-top); }

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 66%, #b9e98b 66%, #b9e98b 100%);
  background-size: 24px 24px, 24px 24px, auto;
  font-family: "Courier New", "Lucida Console", monospace;
  font-weight: 700;
}

body::after {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  height: 78px;
  border-top: 8px solid var(--green-dark);
  background:
    linear-gradient(135deg, rgba(255,255,255,.16) 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(315deg, rgba(0,0,0,.10) 25%, transparent 25%) 0 0 / 24px 24px,
    #9c6238;
}

button, textarea, select, input { font: inherit; }
button { cursor: pointer; }

button:focus-visible, textarea:focus-visible, select:focus-visible, input:focus-visible {
  outline: 4px solid white;
  outline-offset: 3px;
}

.pixel-scenery {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.pixel-sun {
  position: absolute;
  top: 92px;
  right: 7vw;
  width: 76px;
  height: 76px;
  border: 6px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 8px rgba(255,255,255,.55);
}

.pixel-cloud {
  position: absolute;
  width: 102px;
  height: 30px;
  border: 5px solid var(--ink);
  background: #fff;
  box-shadow: 5px 5px 0 rgba(24,48,79,.2);
}

.pixel-cloud::before, .pixel-cloud::after {
  content: "";
  position: absolute;
  bottom: 20px;
  border: 5px solid var(--ink);
  border-bottom: 0;
  background: #fff;
}

.pixel-cloud::before { left: 15px; width: 32px; height: 26px; }
.pixel-cloud::after { right: 13px; width: 40px; height: 39px; }
.cloud-one { top: 155px; left: 5vw; animation: cloud-bob 5s steps(2,end) infinite; }
.cloud-two { top: 255px; right: 22vw; transform: scale(.72); animation: cloud-bob 6s steps(2,end) 1s infinite; }

.pixel-hill {
  position: absolute;
  bottom: 70px;
  width: 240px;
  height: 115px;
  border: 6px solid var(--ink);
  border-bottom: 0;
  border-radius: 120px 120px 0 0;
  background:
    radial-gradient(circle at 35% 35%, #d9ff96 0 8px, transparent 9px),
    radial-gradient(circle at 68% 55%, #d9ff96 0 8px, transparent 9px),
    #68cb58;
}
.hill-one { left: -55px; }
.hill-two {
  right: -75px;
  width: 300px;
  height: 145px;
  background:
    radial-gradient(circle at 38% 38%, #c8f38f 0 8px, transparent 9px),
    radial-gradient(circle at 70% 57%, #c8f38f 0 8px, transparent 9px),
    #55b94c;
}

@keyframes cloud-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 6px; }
}

.app-shell { min-height: 100vh; position: relative; z-index: 1; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 78px;
  padding: .75rem clamp(.8rem, 3vw, 2rem);
  border-bottom: 6px solid var(--border);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 12px, transparent 12px 24px),
    var(--yellow);
  box-shadow: 0 6px 0 rgba(24,48,79,.22);
}

.brand-button {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}
.brand-button strong, .brand-button small { display:block; }
.brand-button strong {
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  letter-spacing: .08em;
  text-shadow: 2px 2px 0 white;
}
.brand-button small {
  margin-top: .08rem;
  color: var(--ink-soft);
  font-size: .72rem;
  letter-spacing: .04em;
}

.brand-icon {
  display: grid;
  width: 3rem; height: 3rem;
  place-items: center;
  border: 4px solid var(--border);
  border-radius: var(--radius);
  color: white;
  background: var(--purple);
  box-shadow: 4px 4px 0 #5d43b8;
  font-size: 1rem;
  font-weight: 900;
  text-shadow: 2px 2px 0 #5d43b8;
}

.topbar-actions { display:flex; gap:.65rem; }

.icon-button, .primary-button, .secondary-button, .ghost-button, .choice-card, .class-button {
  border: 4px solid var(--border);
  border-radius: var(--radius);
  font-weight: 900;
  box-shadow: var(--pixel-shadow-small);
  transition: transform 80ms steps(1,end), box-shadow 80ms steps(1,end), filter 80ms linear;
}

.icon-button:hover, .primary-button:hover, .secondary-button:hover, .ghost-button:hover,
.choice-card:hover, .class-button:hover, .student-checkbox:hover {
  filter: brightness(1.04);
  transform: translate(-1px,-1px);
}

.icon-button:active, .primary-button:active, .secondary-button:active, .ghost-button:active,
.choice-card:active, .class-button:active {
  transform: translate(4px,4px);
  box-shadow: 0 0 0 var(--border);
}

.icon-button {
  width: 3rem; height: 3rem;
  color: var(--ink);
  background: var(--paper);
  font-size: 1.2rem;
}

.app-content {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1.5rem,4vw,3rem) 0 7rem;
}

.screen-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.4rem;
  padding:1rem 1.15rem;
  border:4px solid var(--border);
  border-radius:var(--radius);
  background:rgba(255,253,240,.94);
  box-shadow:var(--pixel-shadow);
}

.screen-header h1, .screen-header h2, .screen-header p { margin:0; }
.screen-header h1, .screen-header h2 {
  text-transform:uppercase;
  letter-spacing:.03em;
  text-shadow:3px 3px 0 #d8f2ff;
}
.screen-header h1 { font-size:clamp(1.65rem,4vw,2.7rem); line-height:1.08; }
.screen-header h2 { font-size:clamp(1.25rem,3vw,2rem); }
.screen-header p { margin-top:.55rem; color:var(--ink-soft); line-height:1.5; font-size:.91rem; }

.header-badge {
  flex:0 0 auto;
  padding:.65rem .85rem;
  border:3px solid var(--border);
  color:var(--ink);
  background:var(--yellow);
  box-shadow:3px 3px 0 var(--yellow-dark);
  font-size:.82rem;
  text-transform:uppercase;
}

.card {
  padding:clamp(1rem,3vw,1.7rem);
  border:5px solid var(--border);
  border-radius:var(--radius);
  background:
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)),
    repeating-linear-gradient(0deg, #fffdf0 0 20px, #fff8d8 20px 40px);
  box-shadow:var(--pixel-shadow);
}

.choice-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.3rem;
}

.choice-card {
  position:relative;
  min-height:15rem;
  padding:1.6rem;
  overflow:hidden;
  color:var(--ink);
  background:#ccf4ff;
  text-align:left;
}
.choice-card:nth-child(2) { background:#d6ffc0; }
.choice-card::before {
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:18px;
  border-bottom:4px solid var(--border);
  background:
    linear-gradient(135deg, rgba(255,255,255,.22) 25%, transparent 25%) 0 0 / 12px 12px,
    var(--blue);
}
.choice-card:nth-child(2)::before { background-color:var(--green); }

.choice-icon {
  display:grid;
  width:4.4rem; height:4.4rem;
  margin:.65rem 0 1.1rem;
  place-items:center;
  border:4px solid var(--border);
  background:var(--paper);
  box-shadow:4px 4px 0 rgba(24,48,79,.35);
  font-size:2rem;
}
.choice-card strong { display:block; font-size:clamp(1.3rem,3vw,2rem); text-transform:uppercase; }
.choice-card span { display:block; margin-top:.7rem; color:var(--ink-soft); line-height:1.5; }

.primary-button, .secondary-button, .ghost-button {
  min-height:3rem;
  padding:.7rem 1rem;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.primary-button { color:#fff; background:var(--blue); text-shadow:2px 2px 0 var(--blue-dark); }
.secondary-button { color:var(--ink); background:var(--paper); }
.ghost-button { color:var(--ink); background:var(--yellow); }
.primary-button.large { min-height:3.7rem; padding-inline:1.5rem; font-size:1.05rem; }

button:disabled {
  cursor:not-allowed;
  opacity:.42;
  filter:grayscale(.5);
  transform:none !important;
  box-shadow:2px 2px 0 var(--border) !important;
}

.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; }
.toolbar.spread { justify-content:space-between; }

.pixel-select {
  min-height:3rem;
  padding:.65rem .8rem;
  border:4px solid var(--border);
  color:var(--ink);
  background:var(--paper);
  box-shadow:var(--pixel-shadow-small);
}

.school-row {
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1.2rem;
}
.school-row label { color:var(--ink-soft); font-size:.78rem; text-transform:uppercase; }

.grade-block + .grade-block { margin-top:1.4rem; }
.grade-title {
  display:inline-flex;
  margin:0 0 .9rem;
  padding:.55rem .8rem;
  border:4px solid var(--border);
  color:white;
  background:var(--grade-color);
  box-shadow:4px 4px 0 var(--grade-dark);
  text-transform:uppercase;
  text-shadow:2px 2px 0 var(--grade-dark);
}

.class-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}

.class-button {
  position:relative;
  min-height:7rem;
  padding:1.15rem 1rem .9rem;
  overflow:hidden;
  color:var(--ink);
  background:var(--grade-soft);
  text-align:left;
}
.class-button::before {
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:15px;
  border-bottom:4px solid var(--border);
  background:
    linear-gradient(135deg,rgba(255,255,255,.22) 25%,transparent 25%) 0 0 / 12px 12px,
    var(--grade-color);
}
.class-button strong { display:block; margin-top:.45rem; font-size:1.45rem; }
.class-button span { display:block; margin-top:.45rem; color:var(--ink-soft); font-size:.78rem; }

.roster-editor {
  width:100%;
  min-height:25rem;
  resize:vertical;
  padding:1rem;
  border:4px solid var(--border);
  border-radius:var(--radius);
  background:repeating-linear-gradient(0deg,#fffef4 0 28px,#e2f2ff 29px 30px);
  color:var(--ink);
  box-shadow:inset 5px 5px 0 rgba(24,48,79,.08);
  line-height:1.9;
}
.roster-editor:focus { border-color:var(--blue); box-shadow:5px 5px 0 var(--blue-dark); }
.helper-text { color:var(--ink-soft); font-size:.85rem; line-height:1.5; }

.attendance-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.9rem;
  color:var(--ink-soft);
}
.attendance-summary strong {
  display:inline-grid;
  min-width:2.2rem; min-height:2.2rem;
  place-items:center;
  border:3px solid var(--border);
  background:var(--yellow);
  color:var(--ink);
  box-shadow:3px 3px 0 var(--yellow-dark);
}

.student-list {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem;
  margin:1.2rem 0 1.6rem;
}
.student-checkbox {
  display:flex;
  align-items:center;
  gap:.7rem;
  min-height:3.4rem;
  padding:.75rem .85rem;
  border:3px solid var(--border);
  background:#ffd1cf;
  box-shadow:3px 3px 0 rgba(24,48,79,.35);
}
.student-checkbox:has(input:checked) { background:#bdf59f; }
.student-checkbox input { width:1.2rem; height:1.2rem; accent-color:var(--green-dark); }
.student-number {
  display:inline-grid;
  flex:0 0 2rem;
  width:2rem; height:2rem;
  place-items:center;
  border:3px solid var(--border);
  border-radius:50%;
  background:var(--yellow);
  box-shadow:2px 2px 0 var(--yellow-dark);
  font-size:.75rem;
}
.student-name { min-width:0; overflow-wrap:anywhere; }

.roulette-layout {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,.7fr);
  gap:1.5rem;
  align-items:center;
}

.wheel-stage {
  position:relative;
  width:min(72vh, 680px, 100%);
  aspect-ratio:1;
  margin:0 auto;
  display:grid;
  place-items:center;
}

.wheel-pointer {
  position:absolute;
  z-index:5;
  top:-5px;
  left:50%;
  width:0; height:0;
  transform:translateX(-50%);
  border-left:24px solid transparent;
  border-right:24px solid transparent;
  border-top:54px solid var(--red);
  filter:drop-shadow(0 5px 0 var(--border));
}

.wheel-wrap {
  width:92%;
  height:92%;
  border:7px solid var(--border);
  border-radius:50%;
  background:var(--paper);
  box-shadow:9px 9px 0 rgba(24,48,79,.38);
  will-change:transform;
}
#wheelCanvas { display:block; width:100%; height:100%; border-radius:50%; }

.wheel-hub {
  position:absolute;
  z-index:4;
  width:15%;
  aspect-ratio:1;
  border:5px solid var(--border);
  border-radius:50%;
  background:var(--yellow);
  box-shadow:4px 4px 0 var(--yellow-dark);
}

.spin-panel { display:grid; gap:1rem; }
.current-class {
  padding:.8rem 1rem;
  border:4px solid var(--border);
  background:#ccf4ff;
  box-shadow:var(--pixel-shadow-small);
}
.current-class small { display:block; color:var(--ink-soft); text-transform:uppercase; }
.current-class strong { display:block; margin-top:.25rem; font-size:1.3rem; }

.spin-button {
  min-height:6rem !important;
  font-size:clamp(1.4rem,4vw,2.2rem) !important;
}

.result-card {
  min-height:9rem;
  display:grid;
  place-items:center;
  padding:1rem;
  border:5px solid var(--border);
  background:var(--paper);
  box-shadow:var(--pixel-shadow);
  text-align:center;
}
.result-card small { display:block; color:var(--ink-soft); text-transform:uppercase; }
.result-name {
  margin-top:.45rem;
  font-size:clamp(1.55rem,4vw,2.8rem);
  line-height:1.05;
  overflow-wrap:anywhere;
  text-shadow:3px 3px 0 #d8f2ff;
}
.result-card.reveal {
  animation:winner-pop .55s steps(3,end);
  background:#fff6b3;
}
@keyframes winner-pop {
  0% { transform:scale(.94) rotate(-1deg); }
  45% { transform:scale(1.05) rotate(1deg); }
  100% { transform:scale(1) rotate(0); }
}

.spin-note { margin:0; color:var(--ink-soft); font-size:.78rem; line-height:1.45; }
.mini-actions { display:flex; flex-wrap:wrap; gap:.7rem; }

.toast {
  position:fixed;
  right:1rem; bottom:1rem;
  z-index:50;
  max-width:min(25rem,calc(100% - 2rem));
  padding:.9rem 1rem;
  border:4px solid var(--border);
  color:white;
  background:var(--blue);
  box-shadow:var(--pixel-shadow);
  opacity:0;
  transform:translateY(.75rem);
  pointer-events:none;
  transition:opacity 120ms steps(2,end), transform 120ms steps(2,end);
  text-shadow:2px 2px 0 var(--blue-dark);
}
.toast.show { opacity:1; transform:translateY(0); }

.empty-state {
  padding:2rem;
  border:4px dashed var(--border);
  color:var(--ink-soft);
  background:rgba(255,253,240,.92);
  text-align:center;
}

@media (max-width:900px) {
  .class-grid, .student-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roulette-layout { grid-template-columns:1fr; }
  .wheel-stage { width:min(62vh,600px,100%); }
}
@media (max-width:620px) {
  .app-content { width:min(100% - 1rem,1180px); }
  .topbar { min-height:68px; padding-inline:.65rem; }
  .brand-button small, .cloud-two { display:none; }
  .brand-icon { width:2.6rem; height:2.6rem; }
  .choice-grid, .class-grid, .student-list { grid-template-columns:1fr; }
  .screen-header, .attendance-summary, .school-row { align-items:stretch; flex-direction:column; }
  .pixel-scenery { opacity:.55; }
  .wheel-pointer {
    border-left-width:18px;
    border-right-width:18px;
    border-top-width:42px;
  }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; scroll-behavior:auto !important; }
}
@media (min-width:1200px) {
  :fullscreen .app-content { width:min(1450px,calc(100% - 4rem)); }
  :fullscreen .roulette-layout { grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); }
}

/* =========================================================
   V15 — sister-app integration with Pair & Group Generator
   ========================================================= */
.site-return-link,.sister-link,.sister-action{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  color:var(--ink);font-weight:900;text-transform:uppercase;letter-spacing:.02em;
}
.site-return-link,.sister-link{min-height:3rem;padding:.65rem .8rem;border:4px solid var(--border);border-radius:var(--radius);background:var(--paper);box-shadow:var(--pixel-shadow-small);font-size:.72rem}
.sister-link{background:#d6ffc0}
.sister-action{min-height:3rem;padding:.7rem 1rem;border:4px solid var(--border);border-radius:var(--radius);background:var(--paper);box-shadow:var(--pixel-shadow-small)}
.shared-roster-bar,.class-management-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem;padding:1rem;border:4px solid var(--border);background:rgba(255,253,240,.94);box-shadow:var(--pixel-shadow-small)}
.shared-roster-bar span,.class-management-row span{color:var(--ink-soft);line-height:1.45}
@media(max-width:760px){.topbar-actions{gap:.4rem}.sister-link,.site-return-link{padding:.55rem .6rem;font-size:.62rem}.shared-roster-bar,.class-management-row{align-items:stretch;flex-direction:column}.sister-action{width:100%;text-align:center}}
@media(max-width:620px){.sister-link{display:none}.site-return-link{font-size:0;width:3rem;padding:0}.site-return-link::after{content:"←";font-size:1rem}}