* { box-sizing: border-box; }

:root {
  --study-bg: #f5f8fc;
  --study-surface: #ffffff;
  --study-surface-soft: #f8faff;
  --study-border: #e3e9f2;
  --study-border-strong: #d3ddec;
  --study-text: #15213b;
  --study-muted: #68758c;
  --study-accent: #1268e8;
  --study-accent-2: #4e8df2;
  --study-green: #27b678;
  --study-red: #e45866;
  --study-orange: #f29a3f;
  --study-shadow: 0 16px 45px rgba(42, 68, 108, .08);

  --arcade-bg: #030817;
  --arcade-bg-soft: #071024;
  --arcade-panel: rgba(10, 20, 44, .92);
  --arcade-panel-2: #0d1933;
  --arcade-panel-3: #111f3f;
  --arcade-border: rgba(144, 166, 235, .18);
  --arcade-border-strong: rgba(157, 184, 255, .31);
  --arcade-text: #f7f9ff;
  --arcade-muted: #9eacc7;
  --arcade-accent: #6d5cff;
  --arcade-accent-2: #d039ff;
  --arcade-cyan: #37d7ff;
  --arcade-good: #3de795;
  --arcade-danger: #ff5e82;
  --arcade-warn: #ffb54a;
  --arcade-shadow: 0 28px 80px rgba(0, 0, 0, .38);
}

html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--study-text);
  background: var(--study-bg);
  transition: background .45s ease, color .35s ease;
}
body.study-mode {
  background:
    radial-gradient(circle at 80% -10%, rgba(117, 166, 244, .16), transparent 27rem),
    linear-gradient(180deg, #fafdff 0, var(--study-bg) 420px, #f4f7fb 100%);
}
body.arcade-mode {
  color: var(--arcade-text);
  background:
    radial-gradient(circle at 12% 2%, rgba(94, 49, 255, .18), transparent 32rem),
    radial-gradient(circle at 91% 21%, rgba(28, 128, 255, .16), transparent 30rem),
    radial-gradient(circle at 72% 88%, rgba(204, 44, 255, .13), transparent 31rem),
    linear-gradient(155deg, #030715 0%, #050b1b 52%, #061126 100%);
  background-attachment: fixed;
}
body.arcade-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(47, 118, 235, .28);
  outline-offset: 2px;
}
body.arcade-mode button:focus-visible,
body.arcade-mode a:focus-visible,
body.arcade-mode input:focus-visible,
body.arcade-mode textarea:focus-visible,
body.arcade-mode select:focus-visible {
  outline-color: rgba(144, 115, 255, .6);
}
.hidden { display: none !important; }

/* =========================================================
   SHARED HEADER
========================================================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  padding: 12px max(24px, calc((100% - 1440px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(213, 222, 235, .9);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
body.arcade-mode .topbar {
  border-bottom-color: rgba(143, 164, 224, .14);
  background: rgba(3, 8, 23, .82);
  box-shadow: 0 10px 35px rgba(0,0,0,.16);
}
.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  font-size: 21px;
  font-weight: 950;
  background: linear-gradient(145deg, #1973ee, #0d5fd5);
  box-shadow: 0 10px 22px rgba(23, 104, 226, .22);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
body.arcade-mode .brand-mark {
  background: linear-gradient(145deg, #655cff, #a840ff);
  box-shadow: 0 0 0 1px rgba(193, 154, 255, .23), 0 0 28px rgba(122, 73, 255, .35);
  transform: rotate(-4deg);
}
.brand-copy { display: grid; gap: 2px; min-width: 0; }
.brand-copy > strong { font-size: 18px; letter-spacing: -.35px; white-space: nowrap; }
.brand-copy small { color: var(--study-muted); font-size: 11px; }
.arcade-brand-subtitle { display: none; }
body.arcade-mode .study-brand-subtitle { display: none; }
body.arcade-mode .arcade-brand-subtitle { display: block; color: var(--arcade-muted); }
.study-top-actions { display: flex; align-items: center; gap: 10px; }
body.arcade-mode .study-top-actions { display: none; }
.study-sync-pill, .study-date-pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--study-border);
  border-radius: 999px;
  padding: 7px 12px;
  color: #56647d;
  background: rgba(255,255,255,.76);
  font-size: 12px;
  font-weight: 700;
}
.study-sync-pill i { width: 8px; height: 8px; border-radius: 50%; background: #a5b0c3; }
.study-sync-pill.online i { background: var(--study-green); box-shadow: 0 0 0 4px rgba(39,182,120,.1); }
.top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--arcade-border);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(11, 20, 42, .7);
  color: #c9d4ea;
  font-size: 11px;
  font-weight: 800;
}
.status-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.status-chip.online { color: #62eaa2; }
.status-chip.offline { color: #ff7a96; }
.toolbar-button, .home-exit-button {
  min-height: 36px;
  border-radius: 10px;
  padding: 8px 11px;
  border: 1px solid var(--arcade-border);
  color: #dce6f8;
  background: rgba(17, 29, 57, .72);
  box-shadow: none;
  font-size: 11px;
  font-weight: 800;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.toolbar-button:hover:not(:disabled) { transform: translateY(-1px); background: rgba(36, 47, 86, .88); border-color: rgba(173, 153, 255, .35); }
.support-toolbar-button { border-color: rgba(187, 103, 255, .32); color: #e8d7ff; }
.home-exit-button { background: linear-gradient(135deg, #5f5dff, #903bff); border-color: transparent; }
.home-exit-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.1); }

/* =========================================================
   MESSAGES / ANNOUNCEMENTS / TRANSITION
========================================================= */
.app-message {
  position: relative;
  z-index: 12;
  max-width: 1200px;
  min-height: 0;
  margin: 0 auto;
  padding: 0 24px;
  color: #3c5d92;
  font-size: 13px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, padding .18s ease;
}
.app-message.visible, body.arcade-mode .app-message:not(:empty) { opacity: 1; transform: none; padding-top: 9px; }
body.arcade-mode .app-message { color: #c9d4eb; }
.announcement-stack { position: relative; z-index: 25; display: grid; gap: 1px; }
.announcement-card {
  padding: 10px max(18px, calc((100% - 1200px)/2));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #fff;
  background: linear-gradient(90deg, #2f62b5, #4979c9);
  font-size: 13px;
}
.announcement-card strong { letter-spacing: .7px; font-size: 10px; text-transform: uppercase; }
.announcement-card.important { background: linear-gradient(90deg,#76521f,#9a6d2e); }
.announcement-card.warning { background: linear-gradient(90deg,#8c3345,#aa4056); }
.mode-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: rgba(2, 5, 16, 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, background .18s ease, visibility .18s step-end;
}
.mode-transition.show {
  opacity: 1;
  visibility: visible;
  background: rgba(2, 5, 16, .88);
  transition: opacity .18s ease, background .18s ease;
}
.mode-transition-card {
  min-width: min(330px, calc(100% - 36px));
  padding: 28px 32px;
  display: grid;
  place-items: center;
  gap: 7px;
  text-align: center;
  border-radius: 24px;
  color: #fff;
  border: 1px solid rgba(170, 123, 255, .4);
  background: radial-gradient(circle at 50% 0, rgba(142,70,255,.28), transparent 9rem), #081126;
  box-shadow: 0 0 80px rgba(116, 57, 255, .35);
  transform: scale(.88) translateY(10px);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.mode-transition.show .mode-transition-card { transform: scale(1) translateY(0); }
.transition-lock { font-size: 30px; color: #bd76ff; filter: drop-shadow(0 0 12px #8c50ff); }
.mode-transition-card strong { font-size: 22px; }
.mode-transition-card span:last-child { color: #9daaca; font-size: 12px; }

/* =========================================================
   STUDY MODE
========================================================= */
.study-page { width: 100%; }
.study-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
}
.study-sidebar {
  min-height: calc(100vh - 73px);
  padding: 28px 18px 32px;
  border-right: 1px solid var(--study-border);
  background: rgba(255,255,255,.72);
}
.study-sidebar nav { display: grid; gap: 7px; }
.study-nav-link {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 11px;
  text-decoration: none;
  color: #5e6b80;
  font-size: 13px;
  font-weight: 700;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.study-nav-link span { width: 22px; text-align: center; color: #75839b; font-size: 17px; }
.study-nav-link:hover { background: #f1f6fe; color: #245fae; transform: translateX(2px); }
.study-nav-link.active { color: #0e61dc; background: #e9f2ff; }
.study-nav-link.active span { color: #0e61dc; }
.study-sidebar-note {
  margin-top: 34px;
  padding: 16px;
  border: 1px solid #dce8f7;
  border-radius: 15px;
  background: linear-gradient(145deg, #f7fbff, #f0f6ff);
}
.sidebar-note-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #2876e8; font-weight: 900; margin-bottom: 10px; }
.study-sidebar-note strong { font-size: 13px; }
.study-sidebar-note p { margin: 6px 0 0; color: #79879b; line-height: 1.45; font-size: 11px; }
.study-content { min-width: 0; padding: 34px 36px 54px; }
.study-welcome {
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
  padding: 8px 10px 10px;
}
.study-welcome h1 { max-width: 700px; margin: 7px 0 9px; color: #14203a; font-size: clamp(31px, 4vw, 48px); line-height: 1.06; letter-spacing: -1.6px; }
.study-welcome p { max-width: 690px; margin: 0; color: #6f7c91; font-size: 15px; line-height: 1.65; }
.study-kicker { color: #4382d6; font-size: 10px; letter-spacing: 1.55px; font-weight: 900; }
.study-illustration { position: relative; width: 230px; height: 125px; flex: 0 0 auto; }
.paper { position: absolute; width: 105px; height: 122px; border-radius: 14px; border: 1px solid #d9e5f5; background: #fff; box-shadow: var(--study-shadow); }
.paper::before, .paper::after { content: ""; position: absolute; left: 20px; right: 20px; height: 5px; border-radius: 999px; background: #dfe8f5; }
.paper::before { top: 42px; box-shadow: 0 18px #dfe8f5, 0 36px #dfe8f5; }
.paper-a { right: 49px; top: 3px; transform: rotate(8deg); }
.paper-b { right: 82px; top: 14px; transform: rotate(-8deg); background: #f6faff; }
.study-check { position: absolute; right: 15px; top: 31px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg,#317cea,#1467dd); box-shadow: 0 14px 30px rgba(39,111,222,.28); font-size: 25px; font-weight: 950; }
.study-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.study-main-column, .study-right-column { min-width: 0; display: grid; gap: 18px; }
.study-card {
  border: 1px solid var(--study-border);
  border-radius: 17px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--study-shadow);
  padding: 21px;
}
.study-section-title { display: flex; align-items: center; gap: 11px; }
.study-section-title > div { display: grid; gap: 2px; }
.study-section-title strong { color: #1e2941; font-size: 15px; }
.study-section-title small { color: #8a96a8; font-size: 11px; }
.study-section-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #1268e8; background: #e9f2ff; font-size: 18px; font-weight: 800; }
.assignment-icon { color: #6e58d7; background: #f0ecff; }
.homework-form { margin-top: 18px; display: grid; grid-template-columns: 1.5fr 1fr .9fr auto; gap: 11px; align-items: end; }
.form-field { min-width: 0; display: grid; gap: 7px; }
.form-field > span, .ticket-form label > span, .stack-form label > span, .inline-form label > span { color: #637188; font-size: 11px; font-weight: 800; }
.study-mode input, .study-mode textarea, .study-mode select {
  width: 100%;
  min-height: 45px;
  border: 1px solid var(--study-border-strong);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--study-text);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.study-mode input:hover, .study-mode textarea:hover, .study-mode select:hover { border-color: #bdcbe0; }
.study-mode input:focus, .study-mode textarea:focus, .study-mode select:focus { border-color: #75a6eb; box-shadow: 0 0 0 3px rgba(56,125,224,.1); }
.study-mode input::placeholder, .study-mode textarea::placeholder { color: #a3adbc; }
.add-homework-button {
  min-height: 45px;
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  color: #fff;
  background: linear-gradient(145deg, #1873ec, #0f62d9);
  box-shadow: 0 11px 24px rgba(22, 104, 220, .2);
  font-size: 12px;
  font-weight: 850;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.add-homework-button:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 15px 28px rgba(22,104,220,.24); }
.section-title-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
.study-secondary-button {
  min-height: 36px;
  border: 1px solid var(--study-border);
  border-radius: 9px;
  padding: 7px 11px;
  color: #5e6c82;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 800;
}
.study-secondary-button:hover { background: #f0f4f9; }
.homework-item {
  position: relative;
  margin-top: 11px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px 13px 18px;
  overflow: hidden;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  background: #fff;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.homework-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #5e8ff0; }
.homework-item:hover { transform: translateY(-1px); border-color: #d7e1ef; box-shadow: 0 9px 22px rgba(39,69,110,.07); }
.homework-item.done { opacity: .56; background: #fafcfb; }
.homework-item.done::before { background: #4fbe82; }
.homework-item.done h3 { text-decoration: line-through; }
.homework-info { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.homework-info h3 { margin: 0 0 4px; max-width: 100%; color: #253149; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; }
.homework-info p { margin: 2px 0; color: #7b8799; font-size: 11px; overflow-wrap: anywhere; }
.homework-item.overdue::before { background: #e66b73; }
.homework-item.overdue .homework-info p { color: #b14e5b; font-weight: 750; }
.homework-sync-mark { display: inline-block; margin-top: 4px; color: #94a0b2; font-size: 10px; font-weight: 700; }
.homework-actions { display: flex; gap: 7px; flex-wrap: wrap; flex: 0 0 auto; flex-shrink: 0; align-self: center; }
.homework-actions button { min-height: 34px; border-radius: 8px; padding: 6px 10px; border: 0; font-size: 10px; font-weight: 850; }
.done-button { color: #16714b; background: #e9f8f1; }
.delete-button { color: #a03b48; background: #fff0f2; }
.empty-state { margin: 15px 0 0; padding: 26px 18px; text-align: center; border: 1px dashed #d9e2ee; border-radius: 12px; color: #8c97a8; background: #fafcff; font-size: 12px; }
.week-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 13px; }
.week-card-head strong { color: #26324a; font-size: 14px; }
.week-card-head span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #327be1; background: #edf5ff; }
.week-days { display: grid; }
.week-days div { min-height: 42px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #edf0f5; color: #66748a; font-size: 11px; }
.week-days b { padding: 4px 7px; border-radius: 999px; color: #5280c1; background: #f0f5fc; font-size: 9px; }
.progress-card { overflow: hidden; background: linear-gradient(145deg,#fff,#f8fbff); }
.progress-stat-row { margin: 10px 0 8px; display: flex; align-items: center; justify-content: space-between; }
.progress-stat-row > div:first-child { display: grid; }
.progress-stat-row > div:first-child strong { color: #17243f; font-size: 40px; letter-spacing: -1px; }
.progress-stat-row > div:first-child span { color: #8994a7; font-size: 11px; }
.progress-ring { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#2b79e5 0 72%, #e5ecf5 72% 100%); position: relative; }
.progress-ring::after { content: ""; width: 47px; height: 47px; border-radius: 50%; background: #fff; position: absolute; }
.progress-ring span { position: relative; z-index: 1; color: #2b79e5; font-weight: 900; }
.progress-card p { margin: 6px 0 0; color: #7d899c; line-height: 1.55; font-size: 11px; }
.study-tip-card { padding: 18px; border-radius: 16px; color: #5b6270; background: linear-gradient(145deg,#fff9e9,#fffdf7); border: 1px solid #f0e4c2; }
.study-tip-card > span { color: #b57d1c; font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 900; }
.study-tip-card strong { display: block; margin-top: 7px; color: #5a4a2d; font-size: 13px; }
.study-tip-card p { margin: 6px 0 0; line-height: 1.5; font-size: 11px; }

/* =========================================================
   ARCADE SHELL
========================================================= */
.arcade-page { position: relative; z-index: 1; width: min(1240px, 100%); margin: 0 auto; padding: 24px 24px 54px; }
body.arcade-mode .panel {
  border: 1px solid var(--arcade-border);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(13, 25, 51, .94), rgba(7, 16, 35, .95));
  box-shadow: var(--arcade-shadow);
  backdrop-filter: blur(15px);
}
.eyebrow { color: #a98dff; font-size: 9px; letter-spacing: 1.65px; font-weight: 950; }
.arcade-hero {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background:
    radial-gradient(circle at 12% 18%, rgba(47, 204, 255, .16), transparent 17rem),
    radial-gradient(circle at 72% 30%, rgba(173, 43, 255, .22), transparent 19rem),
    linear-gradient(135deg, rgba(8,17,38,.98), rgba(15,15,44,.98)) !important;
}
.arcade-hero::before, .arcade-hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 1px;
  right: 22%;
  top: 52%;
  background: linear-gradient(90deg, transparent, rgba(95, 95, 255, .7), rgba(236, 74, 255, .65), transparent);
  transform: rotate(-11deg);
  box-shadow: 0 0 12px rgba(145, 66, 255, .55), 0 42px 0 rgba(57,210,255,.23), 0 -48px 0 rgba(223,78,255,.2);
}
.arcade-hero::after { right: -5%; top: 30%; transform: rotate(18deg); opacity: .45; }
.arcade-hero-copy { position: relative; z-index: 2; }
.arcade-hero h1 { margin: 4px 0 5px; font-size: clamp(36px, 6vw, 66px); line-height: .96; letter-spacing: -2.5px; }
.arcade-hero h1 span { color: transparent; background: linear-gradient(90deg,#7ce8ff,#9f86ff,#e764ff); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(125, 95, 255, .28)); }
.arcade-hero p { margin: 0; color: #a6b4d0; font-size: 13px; }
.arcade-hero-pills { margin-top: 15px; display: flex; gap: 8px; flex-wrap: wrap; }
.arcade-hero-pills span, .featured-br-tags span {
  border: 1px solid rgba(137, 165, 231, .18);
  border-radius: 999px;
  padding: 6px 9px;
  color: #c5d2ea;
  background: rgba(12,24,49,.55);
  font-size: 9px;
  font-weight: 800;
}
.arcade-rank-card {
  position: relative;
  z-index: 2;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border: 1px solid rgba(144, 126, 255, .25);
  border-radius: 16px;
  background: rgba(9, 17, 38, .75);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.rank-emblem { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #c7b4ff; background: linear-gradient(145deg,rgba(78,91,255,.26),rgba(159,55,255,.23)); font-size: 25px; box-shadow: 0 0 25px rgba(107,68,255,.2); }
.arcade-rank-card div { display: grid; gap: 2px; }
.arcade-rank-card small { color: #7183a8; font-size: 8px; letter-spacing: 1px; font-weight: 900; }
.arcade-rank-card strong { font-size: 16px; }
.arcade-rank-card span:last-child { color: #91a0bd; font-size: 9px; }
.featured-br {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  margin-top: 18px;
  padding: 27px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  align-items: end;
  gap: 24px;
  background:
    linear-gradient(90deg,rgba(5,12,27,.97) 0%,rgba(5,12,27,.82) 40%,rgba(6,13,29,.35) 72%),
    radial-gradient(circle at 70% 30%, rgba(182, 47, 255, .34), transparent 14rem),
    radial-gradient(circle at 80% 72%, rgba(45, 129, 255, .33), transparent 18rem),
    linear-gradient(145deg,#081329,#10153a) !important;
}
.featured-br::before {
  content: "";
  position: absolute;
  width: 510px;
  height: 510px;
  right: -80px;
  top: -155px;
  border-radius: 50%;
  border: 2px solid rgba(229, 79, 255, .7);
  box-shadow: 0 0 38px rgba(207, 56, 255, .44), inset 0 0 42px rgba(70,108,255,.18);
}
.featured-br::after {
  content: "";
  position: absolute;
  right: 70px;
  bottom: 45px;
  width: 360px;
  height: 150px;
  opacity: .28;
  background-image:
    linear-gradient(30deg, rgba(92,119,200,.6) 12%, transparent 12.5%, transparent 87%, rgba(92,119,200,.6) 87.5%),
    linear-gradient(150deg, rgba(92,119,200,.6) 12%, transparent 12.5%, transparent 87%, rgba(92,119,200,.6) 87.5%);
  background-size: 34px 58px;
  transform: perspective(250px) rotateX(50deg);
  filter: blur(.3px);
}
.featured-br-copy, .featured-br-action { position: relative; z-index: 2; }
.featured-live { display: inline-flex; align-items: center; gap: 7px; color: #d7e5ff; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.featured-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--arcade-good); box-shadow: 0 0 12px var(--arcade-good); }
.featured-br h2 { margin: 10px 0 8px; font-size: clamp(34px,5vw,56px); letter-spacing: -2px; }
.featured-br p { max-width: 650px; margin: 0; color: #9ba9c6; line-height: 1.55; font-size: 13px; }
.featured-br-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.featured-br-action { display: grid; gap: 10px; align-self: center; }
.featured-br-action button {
  min-height: 52px;
  border: 1px solid rgba(226, 128, 255, .38);
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg,#6d48ff,#be32ff);
  box-shadow: 0 14px 35px rgba(118,52,255,.27), 0 0 24px rgba(202,50,255,.13);
  font-size: 12px;
  font-weight: 900;
  transition: transform .17s ease, filter .17s ease, box-shadow .17s ease;
}
.featured-br-action button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 18px 42px rgba(118,52,255,.34),0 0 31px rgba(202,50,255,.2); }
.featured-br-action small { color: #7889ad; text-align: center; font-size: 9px; }
.featured-br-mini-map { position: relative; width: 120px; height: 92px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(153,177,235,.24); border-radius: 13px; background: linear-gradient(145deg,#162245,#091329); }
.featured-br-mini-map::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; border: 2px solid #d54bff; box-shadow: 0 0 14px rgba(213,75,255,.5); }
.featured-br-mini-map span { position: absolute; width: 7px; height: 7px; left: 48%; top: 49%; border-radius: 50%; background: #6af4ff; box-shadow: 0 0 9px #6af4ff; }
.featured-br-mini-map i, .featured-br-mini-map b { position: absolute; width: 26px; height: 9px; background: #283c68; border-radius: 3px; transform: rotate(22deg); }
.featured-br-mini-map i { left: 12px; top: 25px; }.featured-br-mini-map b { right: 10px; bottom: 17px; }
.arcade-section-row { margin: 25px 2px 10px; display: flex; justify-content: space-between; align-items: end; gap: 18px; flex-wrap: wrap; }
.arcade-section-row h2 { margin: 4px 0 0; font-size: 25px; }
.escape-tip { display: flex; align-items: center; gap: 9px; color: #7789aa; font-size: 9px; }
.escape-tip > span { font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
kbd { min-width: 27px; min-height: 25px; display: inline-grid; place-items: center; padding: 2px 6px; border-radius: 6px; border: 1px solid #455575; border-bottom-width: 3px; color: #e8efff; background: #101a31; font-size: 9px; }
.escape-tip b { color: #546684; font-weight: 500; }

/* =========================================================
   GAME CARDS / GAME STAGE
========================================================= */
.game-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(205px,1fr)); gap: 14px; margin-top: 14px; }
.game-card {
  --game-hue: 220;
  --card-delay: 0ms;
  min-height: 298px;
  position: relative;
  overflow: hidden;
  padding: 0 15px 15px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(138,159,214,.18);
  border-radius: 17px;
  background: linear-gradient(155deg,rgba(12,23,48,.98),rgba(7,15,32,.98));
  box-shadow: 0 18px 43px rgba(0,0,0,.2);
  transform: translateY(0);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
}
.library-enter .game-card { animation: cardReveal .52s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--card-delay); }
@keyframes cardReveal { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.game-card:hover { transform: translateY(-5px); border-color: hsla(var(--game-hue),80%,70%,.38); box-shadow: 0 26px 60px rgba(0,0,0,.31), 0 0 28px hsla(var(--game-hue),90%,60%,.08); }
.game-card-visual {
  position: relative;
  height: 112px;
  margin: 0 -15px 13px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, hsla(var(--game-hue),88%,65%,.32), transparent 5.5rem),
    linear-gradient(135deg,hsla(var(--game-hue),70%,25%,.8),rgba(5,10,25,.96));
  border-bottom: 1px solid rgba(143,165,220,.13);
}
.game-card-visual::before, .game-card-visual::after { content: ""; position: absolute; inset: 0; }
.game-card-visual::before { opacity: .35; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 18px 18px; transform: perspective(180px) rotateX(55deg) scale(1.5); transform-origin: center bottom; }
.game-card-visual::after { background: linear-gradient(180deg,transparent 40%,rgba(5,10,25,.5)); }
.game-card-big-icon { position: relative; z-index: 2; font-size: 46px; filter: drop-shadow(0 9px 18px rgba(0,0,0,.42)); transition: transform .25s ease, filter .25s ease; }
.game-card:hover .game-card-big-icon { transform: translateY(-4px) scale(1.08) rotate(-2deg); filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }
.game-card-visual i { position: absolute; z-index: 1; width: 110px; height: 22px; bottom: 15px; border-radius: 50%; background: hsla(var(--game-hue),85%,60%,.18); filter: blur(8px); }
.game-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mode-badge, .player-pill { border-radius: 999px; padding: 4px 7px; border: 1px solid var(--arcade-border); color: #8fa0bf; background: rgba(6,13,28,.62); font-size: 8px; font-weight: 900; letter-spacing: .6px; }
.mode-badge.online-mode { color: #56e89b; border-color: rgba(69,223,143,.24); background: rgba(37,131,83,.12); }
.player-pill { letter-spacing: 0; color: #9ba9c3; }
.game-card h3 { margin: 11px 0 5px; font-size: 16px; }
.game-card p { min-height: 50px; margin: 0 0 12px; color: #8796b2; line-height: 1.45; font-size: 10px; }
.game-play-button {
  width: 100%;
  min-height: 39px;
  margin-top: auto;
  border: 1px solid hsla(var(--game-hue),70%,70%,.22);
  border-radius: 10px;
  color: #ecf2ff;
  background: linear-gradient(135deg,hsla(var(--game-hue),70%,53%,.34),hsla(calc(var(--game-hue) + 35),70%,47%,.2));
  box-shadow: none;
  font-size: 10px;
  font-weight: 900;
  transition: transform .16s ease, filter .16s ease, background .16s ease;
}
.game-play-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.22); }
.game-stage { margin-top: 18px; padding: 20px; }
.stage-enter { animation: stageIn .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes stageIn { from { opacity: 0; transform: translateY(13px) scale(.992); } to { opacity: 1; transform: none; } }
.game-stage-head { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--arcade-border); }
.game-stage-head h2 { margin: 3px 0 0; font-size: 21px; }
.secondary-button {
  min-height: 38px;
  border: 1px solid var(--arcade-border-strong);
  border-radius: 10px;
  padding: 8px 12px;
  color: #dce6fa;
  background: rgba(35,50,81,.65);
  box-shadow: none;
  font-weight: 800;
}
.secondary-button:hover:not(:disabled) { background: rgba(50,67,106,.8); }
.compact-button { min-height: 33px; padding: 6px 9px; font-size: 10px; }
.game-ui { padding-top: 4px; text-align: center; }
.game-status { min-height: 28px; color: #eff4ff; font-size: 16px; font-weight: 850; }
.controls-line { margin: 9px 0; color: #7f8faa; font-size: 10px; }
.game-canvas {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 12px auto;
  border: 1px solid rgba(158,178,232,.22);
  border-radius: 15px;
  background: #040813;
  box-shadow: 0 22px 60px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.02);
}
.score-row { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
.score-row > span { border: 1px solid var(--arcade-border); border-radius: 999px; padding: 6px 10px; color: #cbd7ed; background: rgba(8,16,34,.65); font-size: 10px; }
.game-button-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.game-button-row button, .online-lobby button, .chat-form button, .voice-actions button, .stack-form button, .inline-form button {
  min-height: 38px;
  border: 1px solid rgba(135,117,255,.27);
  border-radius: 10px;
  padding: 8px 12px;
  color: #fff;
  background: linear-gradient(135deg,#6458e9,#7f49dd);
  font-size: 10px;
  font-weight: 850;
}
.online-lobby { max-width: 620px; margin: 18px auto; padding: 20px; border: 1px solid var(--arcade-border); border-radius: 16px; background: rgba(11,22,44,.76); }

/* Existing local game layouts */
.maze-game { max-width: 850px; margin: 0 auto; }
.maze-toolbar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-width: 714px; margin: 12px auto 0; }
.maze-stat { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; background: rgba(12,23,45,.76); border: 1px solid var(--arcade-border); }
.maze-stat span { color: #7587aa; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; font-weight: 900; }
.maze-stat strong { font-size: 12px; }.player-one-stat strong{color:#8ca8ff}.player-two-stat strong{color:#ff8ca0}
.maze-canvas-shell { position: relative; max-width: 714px; margin: 0 auto; }.maze-canvas{max-width:714px}
.ttt-board { width: min(360px,100%); margin: 14px auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.ttt-cell { aspect-ratio: 1; min-height: 0; border: 1px solid var(--arcade-border); border-radius: 12px; color: #fff; background: #111d39; font-size: 40px; box-shadow: none; }
.reaction-arena { max-width: 650px; margin: 14px auto; padding: 27px 15px; border: 1px solid var(--arcade-border); border-radius: 16px; background: rgba(9,19,39,.74); }
.reaction-light { margin: 7px; font-size: clamp(36px,8vw,72px); }
.connect-board { width:min(490px,100%); margin:14px auto; display:grid; grid-template-columns:repeat(7,1fr); gap:5px; padding:9px; border-radius:14px; background:linear-gradient(#3158ad,#27488b); }
.connect-cell { aspect-ratio:1; min-height:0; padding:0; border-radius:50%; border:2px solid rgba(127,158,217,.32); background:#0b162b; box-shadow:inset 0 7px 13px rgba(0,0,0,.22); }.connect-cell.R{background:#ef5e68}.connect-cell.Y{background:#ffd45d}

/* =========================================================
   SOCIAL / CHAT / ADMIN / SUPPORT (ARCADE ONLY)
========================================================= */
.arcade-mode input, .arcade-mode textarea, .arcade-mode select {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--arcade-border-strong);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--arcade-text);
  background: rgba(5,12,27,.78);
}
.arcade-mode textarea { min-height: 105px; resize: vertical; }
.arcade-mode input::placeholder, .arcade-mode textarea::placeholder { color: #60708e; }
.social-drawer, .ticket-drawer {
  position: fixed;
  z-index: 40;
  top: 84px;
  right: 18px;
  width: min(510px, calc(100% - 36px));
  max-height: calc(100vh - 104px);
  overflow: auto;
  padding: 18px;
  color: var(--arcade-text);
  border: 1px solid rgba(154,176,236,.24);
  border-radius: 20px;
  background: linear-gradient(160deg,rgba(14,27,54,.985),rgba(5,12,27,.985));
  box-shadow: 0 32px 95px rgba(0,0,0,.55),0 0 50px rgba(89,55,255,.08);
  backdrop-filter: blur(20px);
  animation: drawerIn .24s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes drawerIn { from { opacity:0; transform:translateX(18px) scale(.985); } to { opacity:1; transform:none; } }
.social-drawer-head, .ticket-drawer-head, .dm-head, .comms-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.social-drawer-head h2, .ticket-drawer-head h2, .social-panel h3, .comms-heading h3 { margin:3px 0 0; }
.ticket-drawer-head p { margin: 5px 0 0; color:#8394b5; font-size:10px; }
.social-tabs, .ticket-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:14px 0; }
.ticket-tabs { grid-template-columns:1fr 1fr; }
.social-tabs button, .ticket-tabs button, .ranking-controls button {
  min-height: 38px;
  border: 1px solid var(--arcade-border);
  border-radius: 9px;
  color: #aebbd2;
  background: rgba(28,42,72,.6);
  box-shadow:none;
  font-size:10px;
  font-weight:850;
}
.social-tabs button.active, .ticket-tabs button.active { color:#fff; background:linear-gradient(135deg,#6557e8,#8e48e6); border-color:transparent; }
.social-panel { display:grid; gap:11px; }
.identity-card { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--arcade-border); border-radius:14px; background:rgba(20,35,64,.7); }
.identity-avatar { width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,rgba(98,99,255,.2),rgba(181,54,255,.17));font-size:23px; }
.code-card,.recovery-card { display:grid;gap:5px;padding:13px;border:1px solid var(--arcade-border);border-radius:13px;background:rgba(5,12,28,.58); }
.code-card span,.recovery-card span { color:#8192b1;font-size:10px;font-weight:800; }.code-card strong,.recovery-card strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;font-size:16px;overflow-wrap:anywhere}.recovery-card{border-color:rgba(239,170,74,.3);background:rgba(93,62,22,.15)}.recovery-card p{margin:2px 0 0;color:#c6aa7f;font-size:10px}
.stack-form,.ticket-form { display:grid;gap:9px; }.stack-form label,.ticket-form label,.inline-form label{display:grid;gap:5px}.inline-form{display:flex;align-items:end;gap:7px}.grow-field{flex:1;min-width:0}
.mini-message{margin:3px 0;color:#8596b5;font-size:10px;line-height:1.45}.social-list,.ranking-list,.ticket-list{display:grid;gap:7px}.social-row{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px 11px;border:1px solid var(--arcade-border);border-radius:11px;background:rgba(11,23,44,.7)}.social-row>div:first-child{min-width:0;display:grid;gap:2px}.social-row span{color:#8292ae;font-size:9px}.row-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.row-actions button{min-height:29px;padding:5px 8px;border-radius:7px;font-size:9px}.invite-box{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:11px;border-radius:11px;background:rgba(78,81,190,.16);border:1px solid rgba(112,117,255,.25)}
.dm-panel{display:grid;gap:7px;border-top:1px solid var(--arcade-border);padding-top:12px}.chat-log{min-height:105px;max-height:230px;overflow-y:auto;display:grid;align-content:start;gap:6px;padding:8px;border-radius:11px;background:rgba(3,9,20,.65);border:1px solid var(--arcade-border)}.chat-line{display:grid;gap:2px;padding:7px 8px;border-radius:9px;background:rgba(25,40,70,.72)}.chat-line-head{display:flex;align-items:center;justify-content:space-between;gap:7px}.chat-line-head strong{font-size:10px}.chat-line-head span{color:#6f80a1;font-size:8px}.chat-line p{margin:0;color:#e2e9f7;font-size:10px;overflow-wrap:anywhere}.chat-form{display:grid;grid-template-columns:1fr auto;gap:6px}.chat-helper{margin:3px 0;color:#6f80a0;font-size:9px;line-height:1.45}
.ranking-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.ranking-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--arcade-border);border-radius:10px;background:rgba(11,22,42,.7)}.ranking-row>strong{color:#9c8aff}.ranking-row>b{font-size:16px}
.lobby-comms{margin-top:16px;padding-top:15px;border-top:1px solid var(--arcade-border)}.comms-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:11px}.comms-card{padding:13px;border:1px solid var(--arcade-border);border-radius:14px;background:rgba(6,14,29,.58)}.comms-heading{margin-bottom:8px}.voice-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ptt-button{grid-column:1/-1;background:linear-gradient(135deg,#287c66,#329676)!important}.ptt-button.talking{filter:brightness(1.24);box-shadow:0 0 0 3px rgba(75,220,158,.17)}.voice-peer-list{display:grid;gap:5px;margin-top:8px}.voice-peer-row{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:7px 8px;border-radius:9px;background:rgba(25,40,67,.62)}.voice-audio-mount{width:0;height:0;overflow:hidden}
.admin-panel { position: relative; z-index: 30; max-width: 820px; margin: 16px auto; padding: 19px; color:var(--arcade-text); }
.admin-panel h2{margin:0 0 5px}.admin-panel p{color:#8797b4;font-size:10px}.admin-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.admin-announcement-list{display:grid;gap:7px;margin-top:12px}.danger-button{background:rgba(167,48,72,.76)!important;border-color:rgba(255,100,132,.2)!important}.text-button{min-height:0;padding:3px 0;border:0;background:transparent!important;box-shadow:none!important;color:#8da2ca;font-size:9px}
.ticket-submit-button { min-height:43px;border:1px solid rgba(213,105,255,.32);border-radius:10px;color:#fff;background:linear-gradient(135deg,#6758f0,#ae39f2);font-size:10px;font-weight:900;box-shadow:0 12px 28px rgba(103,57,240,.2); }
.ticket-list-head { margin-top:16px;padding-top:14px;border-top:1px solid var(--arcade-border);display:flex;align-items:center;justify-content:space-between;gap:10px}.ticket-list-head h3{margin:2px 0 0;font-size:15px}.ticket-row{padding:11px;border:1px solid var(--arcade-border);border-radius:12px;background:rgba(10,21,42,.74)}.ticket-row-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.ticket-kind,.ticket-status{border-radius:999px;padding:4px 7px;font-size:8px;font-weight:900;letter-spacing:.5px}.ticket-kind{color:#adbdde;background:rgba(74,91,135,.22)}.ticket-kind.game-request{color:#d0aeff;background:rgba(132,66,205,.18)}.ticket-status{color:#8fa1bd;background:rgba(61,76,110,.24)}.status-open{color:#79c8ff;background:rgba(52,126,180,.15)}.status-in-review{color:#ffd477;background:rgba(170,116,41,.15)}.status-planned{color:#c399ff;background:rgba(129,71,192,.16)}.status-fixed{color:#68e89e;background:rgba(45,145,91,.17)}.status-closed,.status-declined{color:#9aa7bd}.ticket-row h3{margin:8px 0 4px;font-size:12px}.ticket-row p{margin:0;color:#8a9ab5;line-height:1.45;font-size:9px}.ticket-row small{display:block;margin-top:7px;color:#647593;font-size:8px;text-transform:capitalize}.ticket-empty{padding:20px 12px;text-align:center;border:1px dashed var(--arcade-border);border-radius:12px;color:#798aa8}.ticket-empty span{display:block;font-size:22px;color:#a461ff}.ticket-empty strong{display:block;margin-top:4px;font-size:11px}.ticket-empty p{margin:4px 0 0;font-size:9px}

/* =========================================================
   BATTLE ROYALE UI
========================================================= */
.br-wrap { user-select:none; }
.br-shell { max-width: 1060px; margin: 0 auto; }
.br-hud { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-bottom:9px; }
.br-hud-card { min-width:0; padding:8px 10px; border:1px solid var(--arcade-border); border-radius:10px; background:rgba(8,17,35,.75); text-align:left; }
.br-hud-card small { display:block;color:#6e7f9e;font-size:7px;letter-spacing:.8px;font-weight:900;text-transform:uppercase }.br-hud-card strong{display:block;margin-top:2px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.br-health-card strong{color:#63e396}.br-shield-card strong{color:#65baff}.br-zone-card strong{color:#df7aff}
.br-arena-shell { position:relative; max-width:960px; margin:0 auto; }
.br-canvas { max-width:960px; margin:0 auto; border-color:rgba(163,132,255,.28); box-shadow:0 25px 70px rgba(0,0,0,.42),0 0 38px rgba(89,68,255,.08); cursor:crosshair; }
.br-minimap { position:absolute; right:12px; top:12px; width:150px; height:102px; border:1px solid rgba(175,190,233,.28); border-radius:11px; background:rgba(4,9,21,.86); box-shadow:0 10px 25px rgba(0,0,0,.3); pointer-events:none; }
.br-bottom-row { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:9px; margin-top:9px; }
.br-feed,.br-help { min-height:74px; padding:9px;border:1px solid var(--arcade-border);border-radius:10px;background:rgba(7,15,31,.66);text-align:left}.br-feed strong,.br-help strong{display:block;margin-bottom:5px;color:#bfcbe2;font-size:8px;letter-spacing:.8px;text-transform:uppercase}.br-feed-lines{display:grid;gap:3px;color:#8494b0;font-size:9px}.br-feed-line b{color:#e8efff}.br-help p{margin:3px 0;color:#7b8ca8;font-size:9px;line-height:1.45}.br-help kbd{font-size:7px;min-width:23px;min-height:20px}.br-status-banner{min-height:25px;margin-top:7px;color:#cbd7ec;font-size:10px}.br-end-card{margin:12px auto 0;max-width:450px;padding:16px;border:1px solid rgba(179,113,255,.25);border-radius:14px;background:rgba(19,18,53,.78);box-shadow:0 0 35px rgba(115,64,255,.1)}.br-end-card h3{margin:0 0 5px;font-size:21px}.br-end-card p{margin:0;color:#8fa0bc;font-size:10px}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1050px) {
  .study-shell { grid-template-columns: 185px minmax(0,1fr); }
  .study-content { padding: 28px 25px 45px; }
  .study-dashboard-grid { grid-template-columns: minmax(0,1fr) 260px; }
  .homework-form { grid-template-columns: 1fr 1fr; }
  .add-homework-button { width:100%; }
  .featured-br { grid-template-columns: minmax(0,1fr) 250px; }
}
@media (max-width: 820px) {
  .topbar { position:relative; padding:12px 16px; }
  .study-shell { grid-template-columns:1fr; }
  .study-sidebar { min-height:0; padding:12px 16px; border-right:0; border-bottom:1px solid var(--study-border); }
  .study-sidebar nav { grid-template-columns:repeat(4,1fr); }
  .study-nav-link { justify-content:center; padding:8px; font-size:0; }.study-nav-link span{font-size:17px}.study-sidebar-note{display:none}
  .study-content { padding:22px 16px 40px; }
  .study-welcome { min-height:0; }.study-illustration{width:170px;transform:scale(.85);transform-origin:right center}
  .study-dashboard-grid { grid-template-columns:1fr; }.study-right-column{grid-template-columns:1fr 1fr}.study-tip-card{grid-column:1/-1}
  .arcade-page { padding:18px 14px 40px; }.arcade-hero{align-items:flex-start;flex-direction:column}.arcade-rank-card{width:100%;min-width:0}.featured-br{grid-template-columns:1fr;min-height:360px}.featured-br-action{max-width:330px}.featured-br::before{right:-220px}.featured-br::after{right:-80px}
  .social-drawer,.ticket-drawer{top:12px;right:10px;width:calc(100% - 20px);max-height:calc(100vh - 24px)}.comms-grid{grid-template-columns:1fr}.ranking-controls{grid-template-columns:1fr}.inline-form{flex-direction:column;align-items:stretch}.social-row{align-items:flex-start;flex-direction:column}.row-actions{justify-content:flex-start}.admin-grid{grid-template-columns:1fr}.chat-form{grid-template-columns:1fr}
  .br-bottom-row{grid-template-columns:1fr}.br-hud{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 620px) {
  .brand-copy small { display:none !important; }.study-top-actions{display:none}.top-actions{width:100%}.topbar:has(.top-actions:not(.hidden)){align-items:flex-start;flex-direction:column}.status-chip{font-size:9px}.toolbar-button,.home-exit-button{flex:1;min-width:70px}
  .study-welcome{align-items:flex-start}.study-illustration{display:none}.study-welcome h1{font-size:34px}.study-content{padding-top:18px}.homework-form{grid-template-columns:1fr}.study-right-column{grid-template-columns:1fr}.study-tip-card{grid-column:auto}.homework-item{align-items:flex-start;flex-direction:column}.homework-actions{width:100%}.homework-actions button{flex:1}
  .arcade-hero{padding:21px}.arcade-hero h1{font-size:44px}.featured-br{padding:21px}.featured-br h2{font-size:38px}.game-grid{grid-template-columns:1fr 1fr}.game-card{min-height:270px}.game-card p{min-height:44px}.br-hud{grid-template-columns:1fr 1fr}.br-minimap{width:110px;height:76px}.maze-toolbar{grid-template-columns:1fr 1fr}.maze-stat:first-child{grid-column:1/-1}
}
@media (max-width: 430px) {
  .study-sidebar nav { grid-template-columns:repeat(4,1fr); }.study-nav-link{min-height:40px}.study-card{padding:16px}.study-welcome h1{font-size:30px}.game-grid{grid-template-columns:1fr}.game-card{min-height:250px}.arcade-section-row{align-items:flex-start;flex-direction:column}.escape-tip{width:100%;justify-content:flex-start}.ticket-tabs{grid-template-columns:1fr}.br-hud{grid-template-columns:1fr 1fr}.br-hud-card:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
.admin-main-head { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px; }
.admin-section-heading { margin-top:10px;padding-top:12px;border-top:1px solid var(--arcade-border); }
.admin-section-heading:first-of-type { border-top:0;padding-top:0; }
.admin-section-heading h3 { margin:3px 0 2px;font-size:15px; }
.admin-section-heading p { margin:0 0 8px; }
.admin-ticket-section { margin-top:17px; }
.admin-ticket-list { display:grid;gap:8px;margin-top:10px; }
.admin-ticket-row { padding:11px;border:1px solid var(--arcade-border);border-radius:12px;background:rgba(8,18,37,.72); }
.admin-ticket-row h4 { margin:8px 0 4px;font-size:12px; }
.admin-ticket-row p { margin:0;color:#8796b2;line-height:1.45;font-size:9px; }
.admin-ticket-profile { color:#7e8faa;font-size:9px; }
.admin-ticket-foot { margin-top:9px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap; }
.admin-ticket-foot select { width:auto;min-width:130px;min-height:34px;font-size:9px; }
.admin-ticket-foot small { color:#687999;font-size:8px;text-transform:capitalize; }

/* Keep the public-facing organizer completely academic until the hidden code unlocks the arcade. */
body.study-mode .announcement-stack { display: none !important; }

/* Shared-cloud social warning */
.social-storage-warning {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(224, 146, 45, .30);
  border-radius: 12px;
  background: rgba(255, 184, 77, .10);
  color: var(--text);
}
.social-storage-warning strong { font-size: 13px; }
.social-storage-warning span { color: var(--muted); font-size: 12px; line-height: 1.45; }