/* ---- the brand font ------------------------------------------------------------------------------
 * BRICOLAGE GROTESQUE — the font that is sitting in the Unity project (Assets/Resources/Fonts and
 * 03 Assets/Font), chosen for this game and, as of today, not actually wired up in the app: every
 * TextMeshPro object in the scenes still points at LiberationSans SDF, TextMeshPro's default. So this
 * matches the INTENT rather than the current build, and the app needs the same change (see D-0200).
 *
 * SELF-HOSTED, not pulled from Google Fonts. Two reasons: the privacy page says there are no
 * third-party requests on this site and a webfont CDN sees every visitor's IP, which would make that
 * sentence false; and shipping the exact file the app uses is the only way to be sure they match.
 *
 * ONE VARIABLE FILE covering weights 200-800 (200KB woff2, converted from the variable TTF in the
 * repo). A set of static weights would have been four or five separate downloads for the same range.
 *
 * font-display:swap so text is readable in the system font while 200KB arrives, rather than a blank
 * page on a slow phone - which is most of the audience this is trying to reach.
 */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('/assets/fonts/BricolageGrotesque.woff2') format('woff2-variations'),
      url('/assets/fonts/BricolageGrotesque.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap;
  font-style:normal;
}

/* Stumble Bee — design tokens and components (D-0198, reworked D-0199).
 *
 * WHY THIS WAS REDRAWN. The first pass was a dark page with a gold accent, which is the default shape of
 * every generated landing page and looked like one. The game itself has a real identity and it is nothing
 * like that: look at Resources/Branding/AppIcon.png and Images/Bees/*.png - saturated honey hexagons with
 * a THICK dark-navy outline, rounded corners, soft drop shadows, chunky rounded letterforms. Friendly and
 * solid, not moody and thin.
 *
 * So the rules here are taken from the app, not invented:
 *   - Navy ink (#232a45) is the outline colour and the dark text colour. Never pure black.
 *   - Honey (#f5b81f) is the fill, not a thin accent line.
 *   - Every raised thing carries a 2-3px navy border and a hard offset shadow, like the app's buttons.
 *   - Corners are generously rounded (14-20px).
 *   - LIGHT is the default. The app is a bright game; a dark website was fighting it.
 */

:root{
  --navy:#232a45;
  --navy-soft:#3a4265;
  --honey:#f5b81f;
  --honey-deep:#dc9a08;
  --honey-light:#ffd86b;
  --honey-pale:#fff3d0;

  --bg:#fffbf2;
  --bg-2:#fff4dd;
  --card:#ffffff;
  --line:var(--navy);
  --ink:var(--navy);
  --ink-dim:#6d6480;
  --ink-on-honey:#3d2c05;

  --ok:#2e8b4f;
  --bad:#c8462c;

  --radius:18px;
  --maxw:920px;
  --shadow:0 3px 0 var(--navy);
  --shadow-lg:0 5px 0 var(--navy);
}

:root[data-theme="dark"]{
  /* The violet-blue the user picked as the dark contrast (item 13) - carried to the app later. It sits
   * against honey far better than the old flat navy, which read as "dark mode" rather than as a colour. */
  --navy:#12142b;
  --navy-soft:#9aa3d6;
  --bg:#1b1d3a;
  --bg-2:#242749;
  --card:#2a2e57;
  --line:#12142b;
  --ink:#f2effa;
  --ink-dim:#a9aed8;
  --honey-pale:#343a6b;
  --shadow:0 3px 0 #12142b;
  --shadow-lg:0 5px 0 #12142b;
  /* ITEM 12. Honey is a light fill in both themes, so text on it must be dark in both. This used to
   * inherit --ink, which is near-white in dark mode: every button label and every heading sitting on a
   * honey panel became yellow-on-yellow and unreadable. */
  --ink-on-honey:#1a1405;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.6 'Bricolage Grotesque',ui-rounded,'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  /* The honeycomb lives here so every page gets it and it never tiles against a section edge. */
  background-image:var(--comb);
  background-size:60px 104px;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px}
/* PROSE links only. Scoping this to unclassed anchors is load-bearing, not tidiness: the dark-mode
 * rule below is specificity (0,2,1) and .btn is (0,1,0), so an unscoped "a" colour beat every button
 * that happens to be a link - and .btn sets a honey BACKGROUND, so the label rendered honey-on-honey
 * and vanished. Anything with a class styles its own colour. */
a:not([class]){color:var(--honey-deep); text-underline-offset:3px}
:root[data-theme="dark"] a:not([class]){color:var(--honey)}

h1,h2,h3{letter-spacing:-.02em; line-height:1.15; margin:0}
h1{font-size:clamp(30px,6.5vw,52px); font-weight:800}
h2{font-size:clamp(20px,3.4vw,27px); font-weight:800}
h3{font-size:18px; font-weight:800}

/* ---- the honeycomb -----------------------------------------------------------------------------
 * THE OLD ONE OVERLAPPED. Its tile was 56x96 carrying hexes that spanned y=2..58 and y=50..106 - the
 * second ran 10px past the bottom of a 96px tile, so every repeat sliced into the next and the seams
 * read as cells sitting on top of one another.
 *
 * The geometry, derived rather than eyeballed. A pointy-top hexagon of circumradius r is 2r tall and
 * r*sqrt(3) wide. A honeycomb steps 1.5r vertically between rows and offsets alternate columns by half
 * a hex width. So the smallest repeating tile is r*sqrt(3) wide and 3r tall, carrying one whole hex and
 * two half ones that wrap round the edges.
 *
 * With r=20: tile 34.64 x 60, hexes centred at (17.32,15), (0,45) and (34.64,45). Row spacing 30 = 1.5r,
 * column offset 17.32 = r*sqrt(3)/2. The negative coordinates on the side hexes are intentional - that
 * is the wrap. Neighbouring cells share edges, which is what a honeycomb is; nothing overlaps.
 */
:root{
  --comb:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='%23232a45' stroke-opacity='0.08' stroke-width='1.6'%3E%3Cpath d='M17.32 -5 34.64 5 34.64 25 17.32 35 0 25 0 5Z'/%3E%3Cpath d='M0 25 17.32 35 17.32 55 0 65 -17.32 55 -17.32 35Z'/%3E%3Cpath d='M34.64 25 51.96 35 51.96 55 34.64 65 17.32 55 17.32 35Z'/%3E%3C/g%3E%3C/svg%3E");
  --hivetile:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='126' viewBox='0 0 72 126'%3E%3Cpath d='M0 -63 36 -42 36 0 0 21 -36 0 -36 -42ZM72 -63 108 -42 108 0 72 21 36 0 36 -42ZM144 -63 180 -42 180 0 144 21 108 0 108 -42ZM-36 0 0 21 0 63 -36 84 -72 63 -72 21ZM36 0 72 21 72 63 36 84 0 63 0 21ZM108 0 144 21 144 63 108 84 72 63 72 21ZM0 63 36 84 36 126 0 147 -36 126 -36 84ZM72 63 108 84 108 126 72 147 36 126 36 84ZM144 63 180 84 180 126 144 147 108 126 108 84ZM-36 126 0 147 0 189 -36 210 -72 189 -72 147ZM36 126 72 147 72 189 36 210 0 189 0 147ZM108 126 144 147 144 189 108 210 72 189 72 147Z' fill='none' stroke='%23232a45' stroke-opacity='0.16' stroke-width='3'/%3E%3C/svg%3E");
  --hivecell:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='84' viewBox='0 0 72 84' preserveAspectRatio=%27none%27%3E%3Cpath d='M36 0 72 21 72 63 36 84 0 63 0 21Z' fill='none' stroke='%23232a45' stroke-opacity='0.16' stroke-width='3'/%3E%3C/svg%3E");
}
:root[data-theme="dark"]{
  --comb:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='%23f5b81f' stroke-opacity='0.11' stroke-width='1.6'%3E%3Cpath d='M17.32 -5 34.64 5 34.64 25 17.32 35 0 25 0 5Z'/%3E%3Cpath d='M0 25 17.32 35 17.32 55 0 65 -17.32 55 -17.32 35Z'/%3E%3Cpath d='M34.64 25 51.96 35 51.96 55 34.64 65 17.32 55 17.32 35Z'/%3E%3C/g%3E%3C/svg%3E");
  --hivetile:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='126' viewBox='0 0 72 126'%3E%3Cpath d='M0 -63 36 -42 36 0 0 21 -36 0 -36 -42ZM72 -63 108 -42 108 0 72 21 36 0 36 -42ZM144 -63 180 -42 180 0 144 21 108 0 108 -42ZM-36 0 0 21 0 63 -36 84 -72 63 -72 21ZM36 0 72 21 72 63 36 84 0 63 0 21ZM108 0 144 21 144 63 108 84 72 63 72 21ZM0 63 36 84 36 126 0 147 -36 126 -36 84ZM72 63 108 84 108 126 72 147 36 126 36 84ZM144 63 180 84 180 126 144 147 108 126 108 84ZM-36 126 0 147 0 189 -36 210 -72 189 -72 147ZM36 126 72 147 72 189 36 210 0 189 0 147ZM108 126 144 147 144 189 108 210 72 189 72 147Z' fill='none' stroke='%23f5b81f' stroke-opacity='0.2' stroke-width='3'/%3E%3C/svg%3E");
  --hivecell:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='84' viewBox='0 0 72 84' preserveAspectRatio=%27none%27%3E%3Cpath d='M36 0 72 21 72 63 36 84 0 63 0 21Z' fill='none' stroke='%23f5b81f' stroke-opacity='0.2' stroke-width='3'/%3E%3C/svg%3E");
}

/* ---- chrome ------------------------------------------------------------------------------------ */

.topbar{display:flex; align-items:center; gap:14px; padding:16px 0; flex-wrap:wrap}
.topbar nav{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; align-items:center}
.topbar nav a.navlink{
  color:var(--ink); text-decoration:none; font-size:14px; font-weight:700;
  padding:7px 12px; border-radius:999px;
}
.topbar nav a.navlink:hover{background:var(--honey-pale)}
/* The selected tab is a honey pill, so its label must be dark in BOTH themes. It used to inherit the
 * prose link colour, which is honey in dark mode - honey on honey, i.e. invisible. */
.topbar nav a.navlink[aria-current="page"]{
  background:var(--honey);
  color:var(--ink-on-honey);
}
:root[data-theme="dark"] .topbar nav a.navlink[aria-current="page"]{ color:var(--ink-on-honey) }

.theme-toggle{
  background:var(--card); color:var(--ink); border:2px solid var(--line);
  border-radius:999px; width:40px; height:40px; cursor:pointer; font-size:15px; line-height:1;
  padding:0; flex:0 0 auto;
}

/* ---- the phone menu (D-0211) ----------------------------------------------------------------------
 * Hidden on wide screens. Below 720px the four links and the toggle wrapped onto two or three rows and
 * pushed the word down the screen; now they fold into a panel that drops under the bar. */
.topbar{position:relative}
.menu-btn{
  display:none; margin-left:auto; width:44px; height:44px; padding:0; cursor:pointer;
  background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:12px;
  place-items:center;
}
.menu-btn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round}
@media (max-width:720px){
  .menu-btn{display:grid}
  .topbar nav{
    display:none; position:absolute; z-index:60; top:calc(100% - 6px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:4px; margin:0; padding:10px;
    background:var(--card); border:2px solid var(--line); border-radius:16px;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
  }
  .topbar.open nav{display:flex}
  .topbar nav a.navlink{font-size:16px; padding:12px 14px; border-radius:12px; min-height:44px}
  .topbar nav .theme-toggle{align-self:flex-start; margin:4px 0 0 6px; width:44px; height:44px}
}

/* One line under the date that says what this is (release-gate W02). */
.lede{margin:2px 0 4px; color:var(--ink-dim); font-size:15px; font-weight:600}

footer{padding:28px 0 46px; color:var(--ink-dim); font-size:14px; margin-top:44px; border-top:2px solid var(--line)}
footer a{color:var(--ink-dim)}

/* ---- the wordmark -------------------------------------------------------------------------------
 * Drawn in CSS rather than shipped as an image so it re-colours with the theme and stays crisp. It
 * copies the app logo's construction: chunky rounded weight, honey first word, pale second word, a
 * navy outline on both, sitting next to the hex-and-wings mark. */

.logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; flex:0 0 auto}
.logo .mark{width:34px; height:34px; flex:0 0 auto}
.logo .word{
  font-size:21px; font-weight:800; letter-spacing:-.03em; line-height:1;
  display:flex; gap:.32em; text-transform:uppercase;
}
.logo .word b{color:var(--honey); -webkit-text-stroke:2px var(--navy); paint-order:stroke fill}
.logo .word i{color:#fff; font-style:normal; -webkit-text-stroke:2px var(--navy); paint-order:stroke fill}
:root[data-theme="dark"] .logo .word i{color:#f6efe2}

.wordmark-lg .word{font-size:clamp(34px,8vw,64px); letter-spacing:-.03em; gap:.26em}
.wordmark-lg .word b, .wordmark-lg .word i{-webkit-text-stroke-width:4px}
.wordmark-lg .mark{width:clamp(44px,10vw,78px); height:clamp(44px,10vw,78px)}

/* ---- buttons ------------------------------------------------------------------------------------ */

.btn{
  display:inline-block; padding:13px 22px; border-radius:14px; cursor:pointer;
  font-size:16px; font-weight:800; text-decoration:none; text-align:center; font-family:inherit;
  background:var(--honey); color:var(--ink-on-honey);
  border:2px solid var(--navy); box-shadow:var(--shadow);
  transition:transform .06s ease, box-shadow .06s ease;
}
.btn:hover{background:var(--honey-light)}
.btn:active{transform:translateY(3px); box-shadow:0 0 0 var(--navy)}
.btn:disabled{opacity:.45; cursor:default; transform:none; box-shadow:var(--shadow)}
.btn.ghost{background:var(--card); color:var(--ink)}
.btn.ghost:hover{background:var(--honey-pale)}
.btn.block{display:block; width:100%}
.btn.big{padding:17px 28px; font-size:19px; border-radius:16px; box-shadow:var(--shadow-lg)}
.btn.small{padding:8px 14px; font-size:14px; border-radius:11px; box-shadow:0 2px 0 var(--navy)}

/* ---- cards --------------------------------------------------------------------------------------- */

.card{
  background:var(--card); border:2px solid var(--navy); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
.card.flat{box-shadow:none}
.muted{color:var(--ink-dim)}
.small{font-size:15px}
.tiny{font-size:13px}
.center{text-align:center}

/* ---- the game ------------------------------------------------------------------------------------ */

.game{padding:4px 0 32px}

.daymeta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--ink-dim); font-size:14px; font-weight:700}
.daymeta .num{
  background:var(--navy); color:#fff; border-radius:999px; padding:3px 11px; font-size:13px;
}

/* The word is the hero of the page. Big, honey, outlined - the app's title treatment. */
.word{
  font-size:clamp(34px,9vw,62px); font-weight:800; letter-spacing:-.03em; line-height:1.08;
  color:var(--honey); -webkit-text-stroke:3px var(--navy); paint-order:stroke fill;
  margin:8px 0 0; word-break:break-word;
}
:root[data-theme="dark"] .word{-webkit-text-stroke-width:0; color:var(--honey)}

.arrange{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 0}
.arrange button{
  padding:9px 15px; border-radius:999px; border:2px solid var(--navy); cursor:pointer;
  background:var(--card); color:var(--ink); font-size:14px; font-weight:800; font-family:inherit;
}
.arrange button[aria-pressed="true"]{background:var(--honey); color:var(--ink-on-honey)}

.write{
  width:100%; resize:vertical; padding:14px 16px; margin-top:10px;
  border-radius:14px; border:2px solid var(--navy); background:var(--card); color:var(--ink);
  font:17px/1.5 inherit; font-family:inherit;
}
textarea.write{min-height:132px}
.write::placeholder{color:var(--ink-dim)}
.write:focus{outline:3px solid var(--honey); outline-offset:1px}

.counter{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--ink-dim); margin-top:7px; font-weight:700}
.counter .over{color:var(--bad)}

.notice{border:2px solid var(--navy); border-radius:14px; padding:13px 15px; margin:14px 0; font-size:15px; background:var(--card)}
.notice.bad{background:#ffeeea; border-color:var(--bad); color:#7d2a17}
.notice.ok{background:var(--honey-pale)}
:root[data-theme="dark"] .notice.bad{background:#3a2019; color:#ffcabd}

/* ---- ballot / definition cards -------------------------------------------------------------------- */

.defs{display:grid; gap:11px; margin:16px 0 0}
.def{
  border:2px solid var(--navy); border-radius:15px; padding:14px 16px; font-size:16px;
  background:var(--card); text-align:left; width:100%; color:var(--ink);
  font-family:inherit; box-shadow:var(--shadow); display:block;
}
button.def{cursor:pointer}
button.def:hover{background:var(--honey-pale)}
button.def:active{transform:translateY(3px); box-shadow:0 0 0 var(--navy)}
.def:disabled{cursor:default}
.def.win{background:var(--honey-pale)}
.def.chosen{background:var(--honey); color:var(--ink-on-honey)}
.def.mine{border-style:dashed}
.def .who{color:var(--ink-dim); font-size:13px; display:block; margin-top:7px; font-weight:700}
.def .votes{
  float:right; margin-left:12px; background:var(--honey); color:var(--ink-on-honey);
  border:2px solid var(--navy); border-radius:999px; min-width:30px; padding:1px 9px;
  text-align:center; font-weight:800; font-size:14px;
}
.def.rank1 .votes{background:var(--honey); }

/* ---- sort tabs -------------------------------------------------------------------------------------- */

.tabs{display:flex; gap:7px; flex-wrap:wrap; margin:16px 0 0}
.tabs button{
  padding:8px 15px; border-radius:999px; border:2px solid var(--navy); cursor:pointer;
  background:var(--card); color:var(--ink); font-size:13px; font-weight:800; font-family:inherit;
  text-transform:uppercase; letter-spacing:.02em;
}
.tabs button[aria-pressed="true"]{background:var(--navy); color:#fff}

/* ---- calendar ---------------------------------------------------------------------------------------- */

.calhead{display:flex; align-items:center; gap:10px; margin:0 0 14px}
.calhead .month{font-weight:800; flex:1; text-align:center; font-size:17px}
.calgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.calgrid .dow{text-align:center; font-size:12px; color:var(--ink-dim); padding-bottom:4px; font-weight:800}
.calgrid button{
  aspect-ratio:1; border-radius:11px; border:2px solid var(--navy); background:var(--card);
  color:var(--ink); cursor:pointer; font-size:15px; font-family:inherit; padding:0; font-weight:800;
}
.calgrid button:hover:not(:disabled){background:var(--honey-pale)}
.calgrid button:disabled{opacity:.25; cursor:default; border-style:dashed}
.calgrid button.played{background:var(--honey); color:var(--ink-on-honey)}
.calgrid button.today{box-shadow:0 0 0 3px var(--honey-deep)}

/* ---- tables ------------------------------------------------------------------------------------------ */

table.board{width:100%; border-collapse:separate; border-spacing:0 8px; font-size:15px}
table.board th{text-align:left; color:var(--ink-dim); font-size:12px; font-weight:800; padding:0 12px; text-transform:uppercase}
table.board td{padding:13px 12px; background:var(--card); border-top:2px solid var(--navy); border-bottom:2px solid var(--navy)}
table.board td:first-child{border-left:2px solid var(--navy); border-radius:13px 0 0 13px}
table.board td:last-child{border-right:2px solid var(--navy); border-radius:0 13px 13px 0}
table.board tr.you td{background:var(--honey-pale)}
table.board td.n{text-align:right; font-weight:800; white-space:nowrap}
table.board td.rank{font-weight:800; width:46px}

/* ---- misc ---------------------------------------------------------------------------------------------- */

.spin{
  display:inline-block; width:17px; height:17px; border-radius:50%; vertical-align:-3px;
  border:3px solid var(--honey-pale); border-top-color:var(--honey-deep); animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

.hide{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}


/* ---- store badges + waitlist (D-0199) -------------------------------------------------------------- */

.badges{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:14px 0 0}
.storebadge{
  display:flex; flex-direction:column; justify-content:center; min-width:158px;
  padding:9px 18px; border-radius:13px; border:2px solid var(--navy); background:var(--card);
  color:var(--ink); text-decoration:none; box-shadow:0 3px 0 var(--navy); line-height:1.25;
}
.storebadge span{font-size:11px; color:var(--ink-dim); font-weight:700}
.storebadge strong{font-size:16px; font-weight:800}
.storebadge.soon{opacity:.72}
a.storebadge:hover{background:var(--honey-pale)}

.field{display:flex; gap:9px; flex-wrap:wrap; margin-top:10px}
.field .write{flex:1 1 210px; min-width:0; margin-top:0}
.check{display:flex; gap:9px; align-items:flex-start; margin-top:11px; font-size:13px; color:var(--ink-dim)}
.check input{width:19px; height:19px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--honey-deep)}

/* ---- room code ------------------------------------------------------------------------------------- */

.code{
  font-size:clamp(36px,11vw,64px); font-weight:800; letter-spacing:.14em; color:var(--honey);
  -webkit-text-stroke:3px var(--navy); paint-order:stroke fill; margin:6px 0;
}
:root[data-theme="dark"] .code{-webkit-text-stroke-width:0}
input.codein{
  text-transform:uppercase; letter-spacing:.3em; font-size:26px; font-weight:800; text-align:center;
}
.seats{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}
.seat{
  display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
  border:2px solid var(--navy); background:var(--card); font-weight:800; font-size:14px;
}
.seat .dot{width:9px; height:9px; border-radius:50%; background:var(--ok)}

/* ================================================================================================
 * D-0201 — home-as-game layout, interactive comb, hex socials, store badges
 * ================================================================================================ */

/* ---- the date line (item 8: just the date, no "#3", no "Today") -------------------------------- */
.daydate{
  margin:0; font-size:14px; font-weight:800; color:var(--ink-dim);
  text-transform:uppercase; letter-spacing:.05em;
}

/* ---- the clock, which is its own thing (item 24) ------------------------------------------------
 * Lives outside the game sections so it keeps ticking whichever screen the player is on, instead of
 * being re-created (and restarted) every time the view changes. */
.clock-card{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:26px;
}
.clock{font-size:29px; font-weight:800; font-variant-numeric:tabular-nums; margin:2px 0 0; letter-spacing:.01em}

/* ---- app + reminder, sharing the width (item 6) ------------------------------------------------ */
.duo{display:grid; gap:14px; grid-template-columns:1fr 1fr; margin-top:16px}
.duo .card{display:flex; flex-direction:column}
/* Stacks at 860 rather than 720: below that the two-up cards squeeze the dial code, the number and the
 * button into one row and the number field loses more than it can spare. */
@media (max-width:860px){ .duo{grid-template-columns:1fr} }

/* ---- store badges in the familiar shape (item 31) ----------------------------------------------- */
.badges{display:flex; gap:10px; flex-wrap:wrap}
.storebadge{
  display:flex; align-items:center; gap:9px; padding:8px 14px; border-radius:11px;
  background:#000; color:#fff; text-decoration:none; border:2px solid var(--navy);
  box-shadow:0 3px 0 var(--navy); flex:1 1 150px; min-width:0;
}
.storebadge svg{width:24px; height:24px; flex:0 0 auto; fill:#fff}
.storebadge .lines{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.storebadge .lines span{font-size:10px; opacity:.85; white-space:nowrap}
.storebadge .lines strong{font-size:15px; font-weight:700; white-space:nowrap}
.storebadge.soon{opacity:.9; cursor:default}
a.storebadge:hover{transform:translateY(-1px)}

/* ---- socials (D-0204: reverted to buttons) ---------------------------------------------------------
 * These were briefly hex cells matching the background. That made them look like part of the pattern,
 * which is precisely wrong for a link somebody is meant to notice and press.
 */
.socials{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:6px 0 0}
.socials a{
  width:42px; height:42px; border-radius:12px; border:2px solid var(--navy); background:var(--card);
  display:grid; place-items:center; color:var(--ink); text-decoration:none; box-shadow:0 2px 0 var(--navy);
  transition:background .15s ease, transform .15s ease;
}
.socials a:hover{background:var(--honey-pale); transform:translateY(-2px)}
.socials svg{width:20px; height:20px; fill:currentColor}
footer .socials{margin-bottom:22px}

/* ---- the comb, now alive (item 23) ---------------------------------------------------------------
 * A canvas behind everything: cells brighten near the pointer and fade back. Deliberately faint and
 * slow - the background is not the game, and a lively one on a page you visit every day is a nuisance
 * rather than a delight. Falls back to the static CSS comb when the canvas cannot run, and switches
 * itself off entirely under prefers-reduced-motion. */
#comb{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:block}
body.has-comb{background-image:none}

/* (D-0207: the page-reveal wipe and the per-card fade that lived here are gone. They ran underneath
 * the hive curtain — the wipe scaled the whole layout for a beat before the curtain moved, which read
 * as a jerk, and the card fade re-animated everything after the curtain had already opened, which read
 * as the page refreshing. One transition is enough.) */

/* ---- dialog ---------------------------------------------------------------------------------------- */
dialog{
  border:2px solid var(--navy); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  background:var(--card); color:var(--ink); max-width:400px; width:calc(100% - 36px); padding:20px;
}
dialog::backdrop{background:rgba(18,20,43,.45)}

/* ---- streak (item 28) ------------------------------------------------------------------------------ */
.streak{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--ink-dim);
}
.streak b{color:var(--ink)}
.streak svg{width:17px; height:19px}

/* The arrange buttons are MOMENTARY (items 20/26): a quick press, never a stuck highlight. */
.arrange button{transition:transform .1s ease, background .15s ease}
.arrange button:active{transform:translateY(2px)}
.arrange button.tap{animation:tapPop .26s ease}
@keyframes tapPop{
  0%{transform:scale(1)} 40%{transform:scale(.94); background:var(--honey)} 100%{transform:scale(1)}
}

/* ---- archive list + calendar ticks (items 15/28) ------------------------------------------------- */
.defs.scrolls{max-height:560px; overflow-y:auto; padding-right:6px}
a.archive-row{display:flex; align-items:center; gap:12px; text-decoration:none; flex-wrap:wrap}
a.archive-row strong{font-size:17px}
a.archive-row .who{margin:0 0 0 auto; text-align:right}
a.archive-row .tick{width:20px; height:22px; flex:0 0 auto}
a.archive-row .tick svg{width:20px; height:22px; display:block}
a.archive-row.done{background:var(--honey-pale)}

.calgrid button{position:relative}
.cal-hex{position:absolute; inset:0; display:grid; place-items:center; opacity:.95}
.cal-hex svg{width:70%; height:70%}
.cal-n{position:relative; z-index:1}
.calgrid button.played .cal-n{color:var(--ink-on-honey)}
.calgrid button.played{background:transparent}

/* A leaderboard row that opens a player needs to look like it does. */
table.board.clickable tbody tr[data-player]{cursor:pointer}
table.board.clickable tbody tr[data-player]:hover td{background:var(--honey-pale)}
table.board.clickable tbody tr[data-player]:focus-visible td{outline:2px solid var(--honey-deep)}

/* ---- report flag (D-0202) -------------------------------------------------------------------------
 * Quiet on purpose. A prominent report button on every card invites idle use and makes the page feel
 * policed; this sits at low opacity until the card is hovered or the flag is focused. */
.def{position:relative}
.flag{
  position:absolute; right:8px; bottom:6px; width:28px; height:28px; padding:0; line-height:1;
  border:0; background:transparent; color:var(--ink-dim); opacity:.28; cursor:pointer;
  font-size:14px; border-radius:8px; transition:opacity .15s ease, background .15s ease;
}
.def:hover .flag, .flag:focus-visible{opacity:.9; background:var(--honey-pale)}
.flag:hover{color:var(--bad)}

/* ---- word + clock on one row (item 2, D-0203) ------------------------------------------------------
 * The clock used to sit in a card of its own below the game, which pushed it out of view exactly when
 * it mattered. It now shares the line with the word, right-aligned, and the word takes the space it
 * needs first. */
.wordrow{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-top:2px}
.wordrow .word{flex:1 1 auto; min-width:0; margin:0}
.clock-inline{flex:0 0 auto; text-align:right; padding-bottom:6px}
.clock-inline p{margin:0}
.clock-inline .tiny{font-weight:800; text-transform:uppercase; letter-spacing:.04em}
.clock-inline .clock{font-size:clamp(20px,3.4vw,27px)}
@media (max-width:560px){
  .wordrow{align-items:flex-start; gap:6px}
  .clock-inline{text-align:left; padding-bottom:0}
}

/* ---- the username chip (item 3, D-0203) -------------------------------------------------------------
 * There was NO visible username control before this - the name only ever appeared as a modal at the
 * moment of submitting, so a player could not see which name they held or change it. */
/* (the first .whoami block lived here; superseded when the chip moved inside the box, D-0205) */

/* ---- waitlist + reminder layout corrections (D-0203) -----------------------------------------------
 * These cards sit two-up, so they are narrow, and the default flex-basis on the inputs was wide enough
 * to push every button onto its own line. The badges stacked for the same reason. */

/* Badges: equal width, side by side, contents centred. */
.badges{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.storebadge{
  flex:none; width:100%; justify-content:center; text-align:left;
  padding:9px 10px; gap:8px;
}
.storebadge .lines{align-items:flex-start}
@media (max-width:420px){ .badges{grid-template-columns:1fr} }

/* Fields: the input yields so the button can sit beside it rather than wrapping under. */
.field .write{flex:1 1 90px; min-width:0}
.field .btn{flex:0 0 auto; white-space:nowrap}
.field select.write{flex:0 0 auto}


/* ---- socials interlock (item 6, corrected) ----------------------------------------------------------
 * gap pushed the cells apart so they read as three separate buttons. A honeycomb's cells SHARE edges:
 * horizontal step is one hex width, and the offset column drops by three quarters of the height. */

/* The reminder's phone row must stay on ONE line so its button lines up with the waitlist's. Wrapping
 * put "Remind me" on a row of its own and the two cards stopped rhyming. */
#smsForm .field{flex-wrap:nowrap}
#smsForm select#smsCountry{flex:0 0 86px; padding-left:10px; padding-right:4px}
#smsForm input#smsPhone{flex:1 1 60px}
#smsForm .btn{padding-left:14px; padding-right:14px}

/* Reminder row proportions, now that the inline widths are gone. The dial code needs only enough for
 * "+353 IE"; the number needs the rest. */
#smsForm select#smsHour{flex:1 1 auto; width:100%}
#smsForm select#smsCountry{flex:0 0 84px}
#smsForm input#smsPhone{flex:1 1 80px}



/* The number needs the room more than the button label does. */
#smsForm .btn{padding-left:12px; padding-right:12px; font-size:15px}
#smsForm input#smsPhone{flex:1 1 110px}

/* ---- levelling the two action buttons (item 5, D-0203) ---------------------------------------------
 * The cards are equal height because the grid stretches them, but their contents are not, so the two
 * submit buttons landed 26px apart. The form fills the card and the LAST field row is pushed to the
 * bottom of it, which puts both buttons on the same line whatever sits above them.
 */
.duo .card{display:flex; flex-direction:column}
.duo form{display:flex; flex-direction:column; flex:1 1 auto}
.duo form .field:last-of-type{margin-top:auto}
.duo form > p:last-child{margin-top:9px !important}

/* ---- the hive curtain (D-0205, redrawn D-0211) ---------------------------------------------------------
 * Hexagons spiral in, cover the screen, the page changes behind them, and they spiral out again.
 *
 * THE BACKDROP. `hm-shut` is put on <html> by theme.js, a classic script in <head> that runs BEFORE first
 * paint, so a navigation never flashes its destination before hiding it. Pure CSS, no DOM.
 *
 * WHY THE CELLS NO LONGER CARRY THE SITE'S --comb PATTERN (D-0211). They did, with
 * background-attachment:fixed so the pattern would line up with the backdrop. But a `fixed` background is
 * ignored on an element that has a transform - and every cell is transformed, because scaling is the
 * animation. So the tiny comb inside each cell grew and shrank with it, anchored to that cell alone, and
 * the moment the backdrop took over the whole pattern snapped to a different size. That was the "weird
 * scaling" and the flash into it.
 *
 * Now each cell draws ONE hexagon outline of its own size - which scales naturally, because it is the
 * cell - and the backdrop draws exactly the same honeycomb: the same 72 x 84 cells on the same 63px row
 * step, anchored at the viewport's top-left like the grid in curtain.js. When the cells finish, what
 * they show and what the backdrop shows are the same picture, so the handover cannot be seen. Whole
 * numbers throughout (84, not the regular 83.14) because a fractional tile drifts against the grid by a
 * pixel every few rows.
 */
html.hm-shut::before{
  content:''; position:fixed; inset:0; z-index:94;
  background:var(--bg-2) var(--hivetile) 0 0 / 72px 126px repeat;
}
/* No overflow:hidden here any more: hiding the scrollbar made the whole page shift sideways by its
 * width at the moment the curtain lifted - another jump. The backdrop is fixed; scrolling is harmless. */

.hive{position:fixed; inset:0; width:100%; height:100%; z-index:95; pointer-events:none; display:none}
/* One canvas now (D-0215) - see curtain.js. Shown only while covering, held or uncovering, and it
 * swallows clicks while it is up so nothing underneath can be pressed mid-transition. */
.hive.on{display:block; pointer-events:all}

@media (prefers-reduced-motion:reduce){
  .hive{display:none}
  html.hm-shut::before{display:none}
}

/* ---- room rows (item 6, D-0204) ---------------------------------------------------------------------- */
.roomrow{position:relative; padding-right:86px}
.tag{
  position:absolute; top:12px; right:14px; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; padding:3px 9px; border-radius:999px; border:2px solid var(--navy);
}
.tag.pub{background:var(--honey); color:var(--ink-on-honey)}
.tag.priv{background:var(--card); color:var(--ink-dim)}
.codejoin label{display:block}
.code-in{text-transform:uppercase; letter-spacing:.3em; font-weight:800; max-width:9em}

/* ---- archive rows (item 7, D-0204) ------------------------------------------------------------------
 * A row expands in place to show the day's top three. Writing for an old word is a separate, deliberate
 * action, so the play button is its own control rather than the whole row being a link. */
.archive-item{
  border:2px solid var(--navy); border-radius:15px; background:var(--card);
  box-shadow:var(--shadow); overflow:hidden;
}
.archive-item.done{background:var(--honey-pale)}
.archive-head{display:flex; align-items:stretch}
.playbtn{
  flex:0 0 auto; width:48px; display:grid; place-items:center; text-decoration:none;
  background:var(--honey); color:var(--ink-on-honey); font-size:15px;
  border-right:2px solid var(--navy);
}
.playbtn:hover{filter:brightness(1.07)}
.archive-row{
  flex:1 1 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; text-align:left;
  background:transparent; border:0; padding:14px 16px; cursor:pointer; font:inherit; color:var(--ink);
}
.archive-row strong{font-size:17px}
.archive-row .who{margin:0 0 0 auto; text-align:right; color:var(--ink-dim); font-size:13px; font-weight:700}
.archive-row .tick{width:20px; height:22px; flex:0 0 auto}
.archive-row .tick svg{width:20px; height:22px; display:block}
.archive-row:hover{background:rgba(0,0,0,.03)}
.archive-row[aria-expanded="true"]{background:rgba(0,0,0,.05)}
.archive-body{padding:0 16px 14px 64px}
.archive-body .def{box-shadow:none}
.defs.scrolls{max-height:620px; overflow-y:auto; padding-right:6px}

/* ---- leaderboard layout (item 8, D-0204) --------------------------------------------------------------
 * Four stacked controls used to sit above any content — scope, then a date stepper, then the word, then
 * the sorts. The scope now shares the title line, and the day stepper brackets the word itself. */
.boardhead{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:6px}
.boardhead .tabs{margin:0 0 0 auto}
.daynav{display:flex; align-items:center; gap:14px; margin-top:10px}
.daynav .word{flex:1 1 auto; text-align:center; margin:0; font-size:clamp(24px,6vw,42px)}
.daynav .btn{flex:0 0 auto}
.boardtools{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:16px}

/* ---- the writing box and its name tag (item 2, D-0205) ----------------------------------------------
 * The username sits at the top right of the box, labelling what it applies to. Below the box it read as
 * a footnote about the textarea rather than "this is who you are posting as". */
.writebox{position:relative; margin-top:14px}
.writebox .write{margin-top:0; padding-top:34px}
.whoami{
  position:absolute; top:8px; right:12px; z-index:1;
  border:0; background:transparent; padding:2px 4px; cursor:pointer; font:inherit; font-size:12px;
  font-weight:800; color:var(--ink-dim); text-decoration:none;
}
.whoami:hover{color:var(--honey-deep)}
.whoami.unset{color:var(--honey-deep)}
:root[data-theme="dark"] .whoami.unset{color:var(--honey)}

/* ---- leaderboard cards (item 4, D-0205) ---------------------------------------------------------------
 * Share and report flank the vote count in a row of their own at the top of the card, so the three
 * controls read as one group and the definition below them is never crowded by a floating flag. */
.boardcard{padding:12px 16px 14px}
.cardtools{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  float:right; margin:0 0 4px 14px;
}
.cardtools .votes{float:none; margin:0}
.icon{
  width:30px; height:30px; padding:0; border:0; background:transparent; cursor:pointer;
  color:var(--ink-dim); font-size:15px; line-height:1; border-radius:9px;
  display:grid; place-items:center; transition:background .15s ease, color .15s ease;
}
.icon:hover{background:var(--honey-pale); color:var(--ink)}
.icon.spacer{cursor:default; pointer-events:none}
/* Inside a board card the flag joins the tool row rather than floating in the corner. */
.boardcard .flag{position:static; opacity:.5; width:30px; height:30px; display:grid; place-items:center}
.boardcard:hover .flag{opacity:.95}

.boardword{
  margin:0; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--honey-deep);
}
:root[data-theme="dark"] .boardword{color:var(--honey)}
.boardtext{margin:4px 0 0; font-size:16px}
.boardcard .who{margin-top:8px}

/* ---- how to play: the live demo and the boxed sections (item 5, D-0205) -------------------------------- */
.demo-card{text-align:center; padding:26px 20px}
.demo-word{
  font-size:clamp(28px,7vw,46px); font-weight:800; letter-spacing:-.03em; line-height:1.1;
  color:var(--honey); -webkit-text-stroke:3px var(--navy); paint-order:stroke fill;
  min-height:1.15em;
}
:root[data-theme="dark"] .demo-word{-webkit-text-stroke-width:0}
.demo-arrange{justify-content:center; margin-top:14px}
.demo-arrange button{cursor:default}
/* The pressed state mirrors a real tap, so the demo is showing the control and not just the result. */
.demo-arrange button.pressed{background:var(--honey); color:var(--ink-on-honey); transform:translateY(2px)}
.demo-box{
  margin-top:16px; min-height:74px; text-align:left; padding:13px 15px;
  border:2px solid var(--navy); border-radius:14px; background:var(--bg-2);
  font-size:16px; line-height:1.5;
}
.caret{
  display:inline-block; width:2px; height:1.05em; background:var(--ink); vertical-align:-3px;
  margin-left:2px; animation:blink 1s steps(1) infinite;
}
.caret.hide{opacity:0; animation:none}
@keyframes blink{ 50%{opacity:0} }

ol.how{list-style:none; counter-reset:s; padding:0; margin:14px 0 0; display:grid; gap:9px}
ol.how li{
  counter-increment:s; position:relative; padding:9px 0 9px 46px; font-weight:700;
}
ol.how li::before{
  content:counter(s); position:absolute; left:0; top:6px; width:30px; height:30px;
  display:grid; place-items:center; border-radius:9px; background:var(--honey);
  border:2px solid var(--navy); font-weight:800; font-size:15px; color:var(--ink-on-honey);
}
.faq{display:grid; gap:14px; margin-top:14px}
.faq strong{display:block; font-size:16px}
.faq span{color:var(--ink-dim); font-size:15px}

@media (prefers-reduced-motion:reduce){ .caret{animation:none} }

/* ---- dialog actions (item 1, D-0207) ------------------------------------------------------------- */
.dlg-actions{display:flex; gap:9px; margin-top:16px; justify-content:flex-end}

/* ---- reminder form spacing (item 9, D-0207) -------------------------------------------------------
 * The time select, the address and the button now share one rhythm: equal gaps between rows and the
 * same gap between the field and its button. */
#remForm .field{margin-top:10px; gap:10px}
#remForm .field:first-child{margin-top:0}
#remForm select#remHour{width:100%}
#remForm input#remEmail{flex:1 1 140px}
#remForm .btn{flex:0 0 auto}

/* ---- names this browser holds (D-0212) ------------------------------------------------------------ */
.mynames{margin-top:12px}
.mynames:empty{display:none}
.namechip{
  margin:0 6px 6px 0; padding:8px 12px; min-height:36px; border-radius:999px; cursor:pointer;
  background:var(--card); color:var(--ink); border:2px solid var(--line); font:inherit; font-weight:700;
}
.namechip.on{background:var(--honey); color:var(--ink-on-honey); border-color:var(--navy)}

/* ---- Settings (D-0213) ------------------------------------------------------------------------------
 * The gear replaced the light/dark button. data-motion="off" is Animations: Off - it stops EVERY CSS
 * animation and transition on the site, and hides the curtain. The canvas comb and the curtain script
 * check the same setting in JavaScript (settings.js motionOff). */
.theme-toggle svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round;
  display:block; margin:auto}
dialog.settings{width:min(360px, calc(100vw - 32px))}
.setrow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0;
  border-top:2px solid var(--line)}
.setrow:first-of-type{border-top:0}
.setrow > span{font-weight:800}
.setrow .tabs{margin:0}
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}
:root[data-motion="off"] .hive{display:none}
:root[data-motion="off"].hm-shut::before{display:none}

/* ---- tap a word for its meaning (D-0214) --------------------------------------------------------------
 * Each word in the heading is its own target. The pop is a small squash and spring, like pressing a
 * key; Animations: Off removes it along with everything else. */
.wordtap{cursor:pointer; display:inline-block; border-radius:8px; outline-offset:3px;
  -webkit-tap-highlight-color:transparent; transform-origin:50% 70%}
.wordtap.pop{animation:wordPop .3s cubic-bezier(.3,.7,.4,1.4)}
@keyframes wordPop{ 0%{transform:scale(1)} 35%{transform:scale(.9)} 70%{transform:scale(1.06)} 100%{transform:scale(1)} }
.meaning{margin:10px 0 0; padding:10px 14px; border-radius:14px; background:var(--card);
  border:2px solid var(--line); font-size:15px; line-height:1.4; color:var(--ink)}
.meaning strong{margin-right:4px}
.meaning em{color:var(--ink-dim); font-size:13px; margin-right:6px}
/* On the writing screen it sits to the RIGHT of Swap / Combine, as asked, and drops below them when
 * the row is too narrow. */
.arrange .meaning{flex:1 1 220px; margin:0; align-self:center}