/* Toy-brick look, matching Hack Launchpad (placeholder until Neta confirms the style).
   Mobile first: one column, 44px touch targets, sticky header; wider screens get more columns. */
:root {
  --red: #E3000B; --red-edge: #A30008;
  --blue: #006CB7; --blue-edge: #004A80;
  --yellow: #FFD500; --yellow-edge: #C9A400;
  --green: #00A651; --green-edge: #00753A;
  --orange: #FF8A00; --orange-edge: #C46A00;
  --ink: #0F172A; --muted: #5B6B80; --line: #E2E5E9;
  --plate: #FFFFFF; --plate-edge: #C9CDD2;
  --bg: #EEF2F6;
  --brick: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --fun: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --header-h: 62px;
  --tap: 44px;
  --gutter: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 64px); }
body {
  margin: 0; color: var(--ink); font: 600 16px/1.5 var(--fun);
  background-color: var(--bg);
  background-image: radial-gradient(circle at 12px 12px, rgba(15, 23, 42, 0.05) 5px, transparent 6px);
  background-size: 24px 24px;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--blue); }
h1, h2, h3, .brick-font { font-family: var(--brick); font-weight: 400; letter-spacing: 0.02em; margin: 0; line-height: 1.2; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
p { margin: 0.35rem 0; }
ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }
.stack > * + * { margin-top: 18px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Header: one per site, no cross-site menu ---------------------------------------- */
.mock-bar { background: #0F172A; color: #CBD5E1; font-size: 0.8rem; }
.mock-bar .wrap { display: flex; gap: 8px; align-items: center; min-height: 32px; }
.mock-bar span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-bar button { font: 800 0.75rem var(--fun); color: #0F172A; background: #E2E8F0; border: 0; border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.appbar {
  position: sticky; top: 0; z-index: 20; color: #fff; background: var(--red);
  box-shadow: inset 0 -5px 0 var(--red-edge), 0 4px 12px rgba(0, 0, 0, 0.12);
}
.appbar .wrap { min-height: var(--header-h); display: flex; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 13px; }
.appbar .mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--yellow); flex: none;
  box-shadow: inset 0 -3px 0 var(--yellow-edge); display: grid; place-items: center;
}
.appbar .mark::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--yellow-edge) inset, 0 2px 0 var(--yellow-edge); }
.appbar h1 { font-size: 1.25rem; line-height: 1.1; }
.appbar .sub { font-size: 0.8rem; font-weight: 800; opacity: 0.92; }
main { padding: 18px 0 calc(40px + env(safe-area-inset-bottom)); }

/* In-page shortcuts (info site) */
.jump { position: sticky; top: var(--header-h); z-index: 15; background: rgba(238, 242, 246, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.jump .wrap { display: flex; gap: 8px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; }
.jump .wrap::-webkit-scrollbar { display: none; }
.jump a {
  flex: none; min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px 2px; border-radius: 999px;
  background: #fff; color: var(--ink); text-decoration: none; font-family: var(--brick); font-size: 0.95rem;
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -3px 0 #D5D9DE;
}

/* ---- Plates and bricks ------------------------------------------------------------------ */
.plate { background: var(--plate); border-radius: 18px; padding: 18px var(--gutter); box-shadow: 0 5px 0 var(--plate-edge), 0 12px 24px rgba(0, 0, 0, 0.1); }
.plate-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tile { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.tile .icon { width: 20px; height: 20px; vertical-align: 0; }
.tile.blue { background: var(--blue); box-shadow: inset 0 -3px 0 var(--blue-edge); }
.tile.red { background: var(--red); box-shadow: inset 0 -3px 0 var(--red-edge); }
.tile.green { background: var(--green); box-shadow: inset 0 -3px 0 var(--green-edge); }
.tile.yellow { background: var(--yellow); box-shadow: inset 0 -3px 0 var(--yellow-edge); color: var(--ink); }
.tile.orange { background: var(--orange); box-shadow: inset 0 -3px 0 var(--orange-edge); }
.inset { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 #D5D9DE; padding: 14px; }

.btn {
  font-family: var(--brick); font-size: 1rem; letter-spacing: 0.02em; border: 0; border-radius: 12px; cursor: pointer;
  min-height: var(--tap); padding: 0 18px 3px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; color: #fff; transition: transform 0.12s ease, background-color 0.12s ease; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(2px); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }
.btn.red { background: var(--red); box-shadow: inset 0 -4px 0 var(--red-edge), 0 2px 5px rgba(0, 0, 0, 0.18); }
.btn.green { background: var(--green); box-shadow: inset 0 -4px 0 var(--green-edge), 0 2px 5px rgba(0, 0, 0, 0.18); }
.btn.blue { background: var(--blue); box-shadow: inset 0 -4px 0 var(--blue-edge), 0 2px 5px rgba(0, 0, 0, 0.18); }
.btn.white { background: #fff; color: #334155; box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 #C9CDD2; }
.btn.block { width: 100%; }
.btn.link { background: none; color: var(--blue); box-shadow: none; padding: 0 6px; min-height: 36px; font-family: var(--fun); font-weight: 800; }
.btn:disabled { cursor: not-allowed; transform: none; background: #E2E8F0; color: #8A99AD; box-shadow: inset 0 -4px 0 #C9CDD2; }

.chip { display: inline-flex; align-items: center; border-radius: 7px; padding: 0 8px 3px; font-family: var(--brick); font-size: 0.85rem; letter-spacing: 0.03em; white-space: nowrap; line-height: 1.6; }
.chip.dev { background: var(--blue); color: #fff; box-shadow: inset 0 -2px 0 var(--blue-edge); }
.chip.vibe { background: var(--yellow); color: var(--ink); box-shadow: inset 0 -2px 0 var(--yellow-edge); }
.chip.grey { background: #E8EDF2; color: #334155; box-shadow: inset 0 -2px 0 #C9CDD2; }
.chip.green { background: var(--green); color: #fff; box-shadow: inset 0 -2px 0 var(--green-edge); }
.people { display: flex; flex-wrap: wrap; gap: 6px; }
.people span { background: #F1F5F9; border-radius: 999px; padding: 2px 10px; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }
.people .lead { background: #FFF6CC; box-shadow: inset 0 0 0 2px #FFE680; font-weight: 800; }
.people .lead b { font-family: var(--brick); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.03em; color: var(--ink); background: var(--yellow); border-radius: 6px; padding: 0 6px 1px; box-shadow: inset 0 -2px 0 var(--yellow-edge); }
.people .open { background: transparent; color: var(--muted); border: 2px dashed #CBD5E1; padding: 0 8px; }

/* Forms and segmented control */
input[type='search'], select {
  font: 600 16px var(--fun); /* 16px: no zoom-in on iPhone */
  width: 100%; min-height: var(--tap); border-radius: 12px; border: 2px solid #CBD5E1; padding: 0 12px; background: #fff; color: var(--ink);
}
input:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 108, 183, 0.2); }
.segment { display: flex; background: #E8EDF2; border-radius: 12px; padding: 3px; gap: 3px; }
.segment button {
  flex: 1; min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: #334155; cursor: pointer;
  font-family: var(--brick); font-size: 0.95rem; padding: 0 10px 2px;
}
.segment button[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 -2px 0 #D5D9DE; }
.toolbar { display: grid; gap: 10px; }
.jump ~ main .sticky-tools { top: calc(var(--header-h) + 52px); }
.sticky-tools { position: sticky; top: var(--header-h); z-index: 10; background: var(--plate); margin: -6px calc(-1 * var(--gutter)) 12px; padding: 10px var(--gutter); border-bottom: 1px solid var(--line); }
.count { font-size: 0.875rem; color: var(--muted); }

/* "Your hackathon" summary */
.hello { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.facts { display: grid; gap: 0; margin-top: 8px; }
.fact { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.fact .tile { width: 34px; height: 34px; }
.fact .k { font-family: var(--brick); color: var(--muted); font-size: 0.85rem; }
.fact .v { font-size: 1.05rem; font-weight: 800; }
.fact .big { font-family: var(--brick); font-size: 1.6rem; font-weight: 400; line-height: 1.1; }

/* Timeline (schedule) */
.day { margin-top: 14px; }
.day:first-of-type { margin-top: 0; }
.timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 6.4rem 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.timeline time { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline li.key time { color: var(--red); }

/* Map */
.map-viewport { overflow: auto; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--line); background: #F4F4F4; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.map { margin: 0 auto; width: min(100%, 640px); }
.map svg { display: block; width: 100%; height: auto; }
.map g { cursor: pointer; }
.map .area-dev { fill: rgba(0, 108, 183, 0.3); stroke: var(--blue); stroke-width: 3; }
.map .area-vibe { fill: rgba(255, 213, 0, 0.42); stroke: var(--yellow-edge); stroke-width: 3; }
.map .area-zoom { fill: rgba(0, 166, 81, 0.22); stroke: var(--green); stroke-width: 3; stroke-dasharray: 10 6; }
.map .area-mine { fill: rgba(227, 0, 11, 0.42); stroke: var(--red); stroke-width: 5; }
.map .area-picked { stroke: var(--ink); stroke-width: 6; }
.map .hit { fill: transparent; stroke: none; }
.map rect.desk { stroke-width: 2.5; }
.map .desk.area-dev { fill: rgba(0, 108, 183, 0.7); }
.map .desk.area-vibe { fill: rgba(255, 213, 0, 0.85); }
.map .desk.area-mine { fill: rgba(227, 0, 11, 0.8); }
.map .desk.area-picked { stroke: var(--ink); stroke-width: 3.5; }
.map .desk.desk-open { fill: rgba(255, 255, 255, 0.9); stroke-dasharray: 5 3; }
/* Each desk carries its team ID, so neighbouring teams can't be confused. */
.map text.desk-id { font-family: var(--brick); font-size: 12px; fill: var(--ink); stroke: none; paint-order: normal; }
.map text.desk-id.on-mine { fill: #fff; }
.map text { font-family: var(--brick); font-size: 22px; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; pointer-events: none; }
/* Mentor names are green and say "Mentor:", so they can't be mistaken for a team leader. */
.map text.mentor { font-family: var(--fun); font-weight: 800; font-size: 15px; fill: #00592C; }
.map text.sub { font-family: var(--fun); font-weight: 800; font-size: 17px; fill: #334155; }
.mentor-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 800; color: #00592C; }
.mentor-tag .icon { width: 1.1em; height: 1.1em; }
.map-hint { font-size: 0.875rem; color: var(--muted); margin: 8px 0 0; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 0.875rem; }
.legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.legend .l-dev::before { background: var(--blue); }
.legend .l-vibe::before { background: var(--yellow); }
.legend .l-zoom::before { background: rgba(0, 166, 81, 0.35); outline: 2px dashed var(--green); outline-offset: -2px; }
.legend .l-mine::before { background: var(--red); }
.legend .l-open::before { background: #fff; outline: 2px dashed #94A3B8; outline-offset: -2px; }
.zoom-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.zoom-list li { display: flex; gap: 8px; align-items: baseline; }

/* Team lists (finder, ballot, finalists) */
.cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.card { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 #D5D9DE; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.card .top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.card .name { font-family: var(--brick); font-size: 1.05rem; line-height: 1.25; }
.card .meta { font-size: 0.875rem; color: var(--muted); display: flex; gap: 6px; align-items: flex-start; }
.card .meta .icon { margin-top: 2px; width: 1.05em; height: 1.05em; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.picked { box-shadow: inset 0 0 0 3px var(--green), inset 0 -5px 0 var(--green-edge); }
.card .btn { margin-top: 6px; }

/* Final ranking */
.rank-list { display: grid; gap: 10px; }
.rank-item { display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: left; font: inherit; color: inherit; border: 0; width: 100%; min-height: 72px; -webkit-tap-highlight-color: transparent; }
.rank-badge { width: 52px; height: 52px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-family: var(--brick); font-size: 1.25rem; background: #F1F5F9; color: #94A3B8; box-shadow: inset 0 -3px 0 #CBD5E1; }
.rank-item.ranked .rank-badge { background: var(--yellow); color: var(--ink); box-shadow: inset 0 -3px 0 var(--yellow-edge); }
.rank-item.ranked[data-rank='1'] .rank-badge { background: var(--red); color: #fff; box-shadow: inset 0 -3px 0 var(--red-edge); }

/* Bottom action bar (votes) */
.action-bar { position: sticky; bottom: 0; z-index: 12; margin: 16px calc(-1 * var(--gutter)) calc(-18px); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; display: grid; gap: 8px; }

.vote-now { display: flex; gap: 10px; align-items: center; line-height: 1.35; }
.vote-now strong { font-weight: 800; }

/* Notices, loading, toast, dialogs */
.notice { border-radius: 12px; padding: 12px 14px; background: #FFF6CC; color: #5C4800; box-shadow: inset 0 0 0 2px #FFE680; }
.notice.ok { background: #E7F7EE; color: #00592C; box-shadow: inset 0 0 0 2px #A6E3C2; }
.skeleton { border-radius: 10px; height: 18px; margin: 10px 0; background: linear-gradient(90deg, #EEF2F6, #F8FAFC, #EEF2F6); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.toast {
  /* At the top, under the header, so it never covers the vote bars at the bottom. */
  position: fixed; left: 50%; top: calc(var(--header-h) + 10px); transform: translate(-50%, -12px); opacity: 0; z-index: 40;
  background: #0F172A; color: #fff; border-radius: 12px; padding: 10px 16px; font-size: 0.9rem; max-width: calc(100vw - 32px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.warn { background: #8A5A00; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-family: var(--brick); font-size: 1rem; min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ''; width: 9px; height: 9px; border-right: 3px solid var(--muted); border-bottom: 3px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s ease; flex: none; margin-right: 4px; }
details[open] summary::after { transform: rotate(-135deg); }
details p { padding-bottom: 12px; }
.mock-signin { margin-top: 14px; }
.mock-signin summary { font-family: var(--fun); font-weight: 800; font-size: 0.9rem; color: var(--muted); }
dialog { border: 0; padding: 22px; width: min(420px, 100vw); max-width: 100vw; border-radius: 18px; box-shadow: 0 6px 0 var(--plate-edge), 0 20px 50px rgba(0, 0, 0, 0.3); }
dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.judges { display: grid; gap: 10px; }
.judge { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; }
.judge > div { padding-top: 8px; }
.avatar { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: #E8EDF2; box-shadow: 0 0 0 3px var(--blue), 0 4px 0 3px var(--blue-edge); margin: 3px 3px 7px; }
.avatar.vc { box-shadow: 0 0 0 3px var(--green), 0 4px 0 3px var(--green-edge); }

/* Phones: maps are wider than the screen, so they pan; dialogs become bottom sheets */
@media (max-width: 719px) {
  .map { width: 520px; }
  dialog { margin: auto 0 0; border-radius: 18px 18px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
@media (min-width: 720px) {
  :root { --gutter: 22px; --header-h: 68px; }
  h2 { font-size: 1.5rem; }
  .appbar h1 { font-size: 1.6rem; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .facts { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .toolbar { grid-template-columns: auto 1fr; align-items: center; }
  .judges { grid-template-columns: 1fr 1fr; }
  .action-bar { position: static; margin: 16px 0 0; padding: 0; background: none; border: 0; display: flex; }
  .map-hint.touch { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}