/* Words and Guff */
:root {
  /* Lexulous board colours */
  --paper: #F6F6F4;          /* the board */
  --grid: #E2E2DE;           /* board grid lines */
  --card: #FFFFFF;
  --ink: #2B2B2B;
  --muted: #7B7B76;
  --line: #E4E4E0;
  --tile: #F5D76A;           /* letter tile */
  --tile-hi: #FAE58C;
  --tile-edge: #D9B94A;
  --yellow: #F5D76A;
  --red: #B8352A;            /* 3W */
  --pink: #F2A9A6;           /* 2W */
  --pink-soft: #FBE1E0;
  --lblue: #A8D2F4;          /* 2L */
  --lblue-soft: #E1F0FB;
  --blue: #2F4FA6;           /* 3L */
  --green: #52A34F;          /* a freshly played tile */
  --green-soft: #E3F1E2;
  /* meaning colours, chosen to stay distinct for red-green colour blindness */
  --good: #0072B2;           /* wins, better than usual */
  --good-soft: #E0EEF8;
  --bad: #D55E00;            /* losses, worse than usual */
  --bad-soft: #FBE7DA;
  --shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 18px -12px rgba(0,0,0,.2);
  --radius: 12px;
  --display: "Trebuchet MS", "Segoe UI", Verdana, Helvetica, Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0; color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  font-family: var(--body); font-size: 16px; line-height: 1.45;
  font-variant-numeric: tabular-nums;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 1.45rem; line-height: 1.15; }
h3 { font-size: 1.05rem; font-weight: 700; }
.muted { color: var(--muted); }
.tiny { font-size: .78rem; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* Masthead ------------------------------------------------------------ */
.masthead { max-width: 760px; margin: 0 auto; padding: 18px 16px 0; }
.tiles { --t: min(44px, calc((100vw - 88px) / 12)); display: flex; flex-wrap: nowrap; gap: calc(var(--t) * .3); align-items: center; text-decoration: none; }
.word { display: inline-flex; gap: calc(var(--t) * .1); }
.word i {
  position: relative; display: inline-grid; place-items: center;
  width: var(--t); height: var(--t);
  background: linear-gradient(180deg, var(--tile-hi), var(--tile)); border-radius: calc(var(--t) * .12);
  border: 1px solid var(--tile-edge); box-shadow: 0 2px 0 var(--tile-edge), 0 4px 10px -6px rgba(0,0,0,.35);
  font: 400 calc(var(--t) * .62)/1 Verdana, "Trebuchet MS", Helvetica, Arial, sans-serif; font-style: normal; color: var(--ink);
}
.word i b { position: absolute; right: calc(var(--t) * .07); bottom: calc(var(--t) * .04); font: 400 calc(var(--t) * .26)/1 Verdana, Arial, sans-serif; }
.word.green i { background: linear-gradient(180deg, #6DBE6A, var(--green)); border-color: #3E8C3B; box-shadow: 0 2px 0 #3E8C3B, 0 4px 10px -6px rgba(0,0,0,.35); color: #fff; }

.tabs { display: flex; gap: 2px; margin-top: 14px; border-bottom: 2px solid var(--line); align-items: flex-end; max-width: 100%; }
.tabs a {
  text-decoration: none; padding: 8px 10px 10px; font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; flex: 0 1 auto; min-width: 0;
}
.tabs a.active { color: var(--blue); border-bottom-color: var(--blue); }
.tabs .who {
  margin-left: auto; margin-bottom: 6px; border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 5px 12px; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tabs .who.in { background: var(--green); color: #fff; border-color: var(--green); }

/* Layout -------------------------------------------------------------- */
.app { max-width: 760px; margin: 0 auto; padding: 14px 16px 40px; display: grid; gap: 14px; }
.loading { color: var(--muted); font-style: italic; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.card > h2, .card > h3 { margin-bottom: 8px; }
.card .lead { margin: 0 0 10px; color: var(--muted); font-size: .92rem; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.foot { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; color: var(--muted); font-size: .8rem; }
.foot p { margin: 0 0 4px; }

/* Month switcher ------------------------------------------------------ */
.switcher { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; }
.switcher button {
  height: 44px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; cursor: pointer; font-size: 1.2rem;
}
.switcher button:disabled { opacity: .35; cursor: default; }
.switcher .title { text-align: center; }
.switcher .title h2 { font-size: 1.6rem; }
.switcher .title button { height: auto; border: 0; background: none; padding: 0; font: inherit; }
.switcher .title .sub { font-size: .82rem; color: var(--muted); }

/* Guffbot ------------------------------------------------------------- */
.guffbot { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; background: var(--blue); color: #fff; border-color: var(--blue); }
.guffbot .bot { width: 42px; height: 42px; border-radius: 6px; background: var(--tile); border: 1px solid var(--tile-edge); display: grid; place-items: center; font-size: 1.4rem; }
.guffbot p { margin: 0; font-family: var(--display); font-weight: 400; font-size: .98rem; line-height: 1.35; }
.guffbot p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }   /* the lines are written to fit two; this is the safety net on very narrow screens */
.guffbot .tag { display: block; font: 700 .68rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 4px; font-style: normal; background: none; padding: 0; border-radius: 0; }   /* the generic .tag pill background would put yellow on pale grey */

/* Tables -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
th:first-child, td:first-child, th.l, td.l { text-align: left; }
tr:last-child td { border-bottom: 0; }
td.name { font-weight: 700; }
td.pts { font-weight: 900; font-size: 1.05rem; }
.rank { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .75rem; font-weight: 700; background: var(--line); margin-right: 6px; }
.rank.r1, .rank.rlast { background: transparent; font-size: 1.15rem; }
.form { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.form i { width: 9px; height: 9px; box-sizing: border-box; display: inline-block; }
.form i.W { background: var(--good); border-radius: 2px; }                       /* filled square */
.form i.L { border: 2px solid var(--bad); border-radius: 2px; background: #fff; } /* hollow square */
.form i.D { background: var(--muted); border-radius: 50%; width: 8px; height: 8px; } /* round dot */
.gd.pos { color: var(--good); } .gd.neg { color: var(--bad); }
.compact th, .compact td { padding: 5px 5px; font-size: .88rem; }

/* Fixtures ------------------------------------------------------------ */
.fixtures { display: grid; gap: 8px; }
.pair { display: grid; grid-template-columns: minmax(84px, 1fr) 2fr 2fr; gap: 8px; align-items: stretch; }
.pair .names { font-weight: 700; font-size: .92rem; line-height: 1.2; display: flex; flex-direction: column; justify-content: center; }
.pair .names small { color: var(--muted); font-weight: 500; font-size: .74rem; }
.slot {
  border: 2px dashed #CFCFC9; border-radius: 10px; min-height: 52px; display: grid; place-items: center;
  background: transparent; cursor: pointer; padding: 6px 8px; text-align: center; width: 100%; position: relative;
}
.slot.done { border: 2px solid #B9B9B2; background: var(--paper); }
.slot.done.fresh { background: var(--green-soft); border-color: var(--green); }
.slot.empty { color: var(--muted); font-size: 1.3rem; }
.slot.empty.locked { cursor: default; color: var(--line); }
.slot .score { font-family: var(--display); font-weight: 400; font-size: 1.25rem; line-height: 1; display: flex; gap: 6px; align-items: baseline; }
.slot .score .w { font-weight: 700; }
.slot .score .l { color: var(--muted); }
.slot .pts { position: absolute; top: -7px; right: -4px; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--lblue); color: var(--ink); }
/* The haul ramp: 3 is a plain win, then it warms and darkens up to the 10-point maximum */
.pts.p3, .pts.pd { background: var(--lblue); color: var(--ink); }
.pts.p4 { background: #F7D9A8; color: var(--ink); }
.pts.p5 { background: #F2B266; color: var(--ink); }
.pts.p6 { background: #E4842E; color: #fff; }
.pts.p7 { background: #D55E00; color: #fff; }
.pts.p8 { background: #B8352A; color: #fff; }
.pts.p9 { background: #7F1D3A; color: #fff; }
.pts.p10 { background: #2B2B2B; color: var(--tile); box-shadow: 0 0 0 2px var(--tile); }
.legend .pts { position: static; display: inline-block; margin: 0 1px; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.slot .wo { font-size: .66rem; color: var(--muted); }
.slot .date { font-size: .66rem; color: var(--muted); margin-top: 2px; }
.legend { font-size: .78rem; color: var(--muted); margin-top: 10px; }

/* Awards -------------------------------------------------------------- */
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.award { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); }
.award .e { font-size: 1.4rem; line-height: 1; }
.award .t { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 6px; }
.award .w { font-weight: 800; font-size: 1.05rem; }
.award .d { font-size: .8rem; color: var(--muted); }
.award.champion { background: linear-gradient(180deg, var(--tile-hi), var(--tile)); border-color: var(--tile-edge); }
.award.spoon { background: var(--pink-soft); border-color: var(--pink); }
.award.bighitter { background: var(--lblue-soft); }
.award.massacre { background: var(--pink-soft); }

/* Expanders ----------------------------------------------------------- */
details.x { border-top: 1px solid var(--line); }
details.x:first-of-type { border-top: 0; }
details.x summary {
  list-style: none; cursor: pointer; padding: 12px 0; display: flex; justify-content: space-between; align-items: center; font-weight: 700;
}
details.x summary::-webkit-details-marker { display: none; }
details.x summary::after { content: "+"; font-size: 1.3rem; color: var(--muted); font-weight: 400; }
details.x[open] summary::after { content: "–"; }
details.x summary small { color: var(--muted); font-weight: 500; margin-left: 8px; }
details.x .body { padding: 0 0 14px; }

/* Stat grids ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.stat { background: var(--paper); border-radius: 10px; padding: 10px 12px; }
.stat .v { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.05; }
.stat .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 3px; }
.stat .d { font-size: .8rem; color: var(--muted); }
.stat .t { font-size: .74rem; font-weight: 700; margin-top: 6px; }
.stat .t span { font-weight: 500; color: var(--muted); }
.stat.up { background: var(--good-soft); box-shadow: inset 3px 0 0 var(--good); }
.stat.up .t { color: var(--good); }
.stat.down { background: var(--bad-soft); box-shadow: inset 3px 0 0 var(--bad); }
.stat.down .t { color: var(--bad); }
.stat.par { box-shadow: inset 3px 0 0 var(--lblue); }
.stat.par .t { color: var(--blue); }
.attack { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.attack h4 { margin: 0 0 8px; font: 700 .72rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.attack ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.attack li { position: relative; padding-left: 20px; font-size: .95rem; line-height: 1.4; }
.attack li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; border-radius: 3px; background: var(--lblue); }
.attack li.up::before { background: var(--good); } .attack li.down::before { background: var(--bad); }
.attack li b { font-weight: 800; }
.context b { color: var(--ink); }
.context { margin: 12px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.45; }
ol.list, ul.list { margin: 0; padding-left: 0; list-style: none; }
.list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.list li:last-child { border-bottom: 0; }
.list li .v { font-weight: 800; white-space: nowrap; }
.list li .m { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.list li .holder { font-weight: 800; }
.list li .opp { color: var(--muted); }
.list li.hero .v { font-family: var(--display); font-size: 1.3rem; }

/* Honours board ------------------------------------------------------- */
.board { display: grid; grid-template-columns: 1fr; gap: 10px; }              /* honours cards stack on a phone: two abreast wrapped every row */
@media (min-width: 640px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 8px; min-width: 0; }
.pcard h3 { font-size: 1.35rem; font-weight: 700; }
.pcard .big { display: flex; gap: 8px; align-items: center; }
.pcard .big + .big { margin-top: -4px; }
.pcard .big em { font-style: normal; font-size: 1.15rem; width: 1.4em; text-align: center; }
.pcard .big b { font-family: var(--display); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.pcard .big span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pcard dl { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: .86rem; }
.pcard dd { white-space: nowrap; }
.pcard dt { color: var(--muted); white-space: nowrap; }
.pcard dd { margin: 0; text-align: right; font-weight: 600; }
.spark { display: block; width: 100%; height: 34px; margin-top: 4px; }

/* H2H matrix ---------------------------------------------------------- */
.h2h td.cell { text-align: center; font-size: .85rem; line-height: 1.2; }
.h2h td.cell b { display: block; font-size: 1rem; }
.h2h td.cell.up { background: var(--good-soft); } .h2h td.cell.down { background: var(--bad-soft); }
.h2h td.self { background: var(--line); }

/* Chips --------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: .8rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }

/* Buttons ------------------------------------------------------------- */
.btn {
  border: 1px solid var(--blue); background: var(--blue); color: #fff; border-radius: 10px; padding: 12px 16px;
  font-weight: 700; cursor: pointer; font-size: 1rem;
}
.btn.ghost { background: transparent; color: var(--blue); }
.btn.danger { background: transparent; color: var(--red); border-color: transparent; }
.btn.small { padding: 7px 12px; font-size: .85rem; border-radius: 10px; }
.btn:disabled { opacity: .5; cursor: default; }
.btnrow { display: flex; gap: 8px; margin-top: 14px; }
.btnrow .btn { flex: 1; }

/* Sheet (modal) ------------------------------------------------------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(30,26,23,.45); z-index: 20; }
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 520px); z-index: 21;
  background: var(--card); border-radius: 18px 18px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px -10px rgba(0,0,0,.35); max-height: 92vh; overflow: auto;
}
@media (min-width: 640px) { .sheet { bottom: auto; top: 12vh; border-radius: 18px; } }
.sheet h2 { margin-bottom: 4px; }
.sheet .sub { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.scores { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.scores label { display: grid; gap: 4px; font-weight: 700; text-align: center; }
.scores input { width: 100%; font: 700 2rem/1 var(--display); text-align: center; padding: 12px 6px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.scores input:focus { outline: none; border-color: var(--blue); background: var(--lblue-soft); }
.scores .vs { padding-bottom: 20px; color: var(--muted); font-weight: 700; }
.field { display: grid; gap: 4px; margin-top: 12px; font-size: .9rem; }
.field input, .field select { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.field.inline { grid-template-columns: 1fr 1fr; gap: 10px; }
.preview { margin-top: 12px; font-size: .95rem; text-align: center; color: var(--muted); min-height: 1.4em; }
.preview b { color: var(--ink); }
.error { color: var(--red); font-size: .9rem; margin-top: 10px; min-height: 1.2em; }
.pinrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pinrow input { font-size: 1.2rem; letter-spacing: .1em; }

.toast {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); background: var(--green); color: #fff;
  padding: 10px 16px; border-radius: 999px; font-weight: 600; z-index: 30; box-shadow: var(--shadow);
}

/* Friendlies ---------------------------------------------------------- */
.fgame { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fgame:last-child { border-bottom: 0; }
.fgame .sc { font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.fgame .meta { font-size: .78rem; color: var(--muted); }

.empty { text-align: center; color: var(--muted); padding: 24px 0; font-style: italic; }
.right { text-align: right; }
.center { text-align: center; }
.notice { font-size: .85rem; color: var(--muted); }

/* ===================================================================== */
/* The game                                                              */
/* ===================================================================== */
.tabs a { position: relative; }
.badge { position: absolute; top: 2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; }

/* Lobby */
.lobbyh { margin: 12px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.mlist { display: grid; gap: 8px; }
.mcard { display: block; text-decoration: none; border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); }
.mcard:hover { border-color: #C9C9C3; }
/* Games waiting on you are green all over, so the list reads at a glance */
.mcard.yours { background: var(--green-soft); border-color: var(--green); }
.mcard.yours .mlast, .mcard.yours .muted { color: #4E7A4C; }
.liverow.yours { background: var(--green-soft); border-color: var(--green); }
.mtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mtitle { font-weight: 800; font-size: 1.05rem; }
.msub { font-size: .78rem; color: var(--muted); }
.mscore { margin-top: 6px; font-size: .95rem; }
.mlast { font-size: .8rem; margin-top: 2px; }
.tag { font-size: .72rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: var(--line); }
.tag.go { background: var(--green); color: #fff; }
.tag.wait { background: var(--lblue-soft); color: var(--blue); }
.tag.done { background: var(--tile); }
.chip.act { cursor: pointer; font: inherit; font-size: .9rem; padding: 8px 12px; background: var(--card); border-color: #C9C9C3; }
.chip.act:hover { border-color: var(--blue); color: var(--blue); }
#fpChips .chip { cursor: pointer; font: inherit; font-size: 1rem; padding: 10px 16px; background: var(--card); border: 2px solid #C9C9C3; color: var(--muted); text-decoration: line-through; }
#fpChips .chip.on { border-color: var(--blue); background: var(--blue); color: #fff; text-decoration: none; }

/* Game header: one compact bar */
.gamehead { padding: 8px 12px; }
.gbar { display: flex; align-items: center; gap: 8px; }
.gbar .back { text-decoration: none; font-size: 1.6rem; line-height: 1; color: var(--muted); padding: 0 6px 2px 0; }
.gscores { display: flex; gap: 6px; flex: 1; min-width: 0; }
/* three or four players: a 2x2 grid, so every name and three-digit score gets room; three players fill one row on wide screens */
.gscores.n4 { display: grid; grid-template-columns: 1fr 1fr; }
.gscores.n3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.gscores.n3 .gp .n, .gscores.n4 .gp .n { font-size: .9rem; }
@media (max-width: 480px) {
  .gscores.n3 { grid-template-columns: 1fr 1fr; }
  .gscores.n3 .gp:nth-child(3) { grid-column: 1 / -1; }
}
.gp { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 4px 10px; border-radius: 10px; background: var(--paper); border: 2px solid var(--line); }
.gp .n { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column; line-height: 1.15; }
.gp .n small { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.gp.turn .n small { color: var(--green); }
.gp.turn.me { border-color: var(--green); background: var(--green); color: #fff; }
.gp.turn.me .n small { color: #E3F1E2; }
.gp.won .n small { color: var(--ink); }
.gp b { font-family: var(--display); font-size: 1.35rem; }
.gp.turn { border-color: var(--green); background: var(--green-soft); }
.gp.won { border-color: var(--tile-edge); background: var(--tile-hi); }
/* (the old "to play" pill went on 14 Sept: the player card carries it now) */
.gsub { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Board: sized by its container, so it always fits the phone width */
.app > * { min-width: 0; }
.boardwrap { margin: 0 -8px; container-type: inline-size; }
.gameboard {
  display: grid; grid-template-columns: repeat(15, 1fr); gap: 1px;
  width: min(100%, 660px); margin: 0 auto; background: var(--grid); border: 1px solid var(--grid); border-radius: 4px; overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.sq { aspect-ratio: 1; background: #EFEFED; display: grid; place-items: center; font: 700 1.9cqw/1 var(--body); color: var(--ink); position: relative; cursor: pointer; }
@media (min-width: 700px) { .sq { font-size: 12px; } }
.sq.pT { background: var(--red); color: #fff; }
.sq.pD { background: var(--pink); }
.sq.pt { background: var(--blue); color: #fff; }
.sq.pd { background: var(--lblue); }
.sq.centre { font-size: 3.4cqw; }                                   /* Guffbot sits on the centre square, a double word */
@media (min-width: 700px) { .sq.centre { font-size: 22px; } }
.sq.tile { background: linear-gradient(180deg, var(--tile-hi), var(--tile)); border: 1px solid var(--tile-edge); border-radius: 3px; color: var(--ink); }
/* A tile sitting on a premium square keeps the square's class (for the peek), which used to drag the
   square's white text onto the letter and make it unreadable on yellow. Instead: a blue letter, a
   quiet hint that there is something under it. Blanks stay red, fresh tiles stay white on green. */
.sq.tile.pT span, .sq.tile.pD span, .sq.tile.pt span, .sq.tile.pd span { color: var(--blue); }
.sq.tile.pT i, .sq.tile.pD i, .sq.tile.pt i, .sq.tile.pd i { color: var(--blue); }
.sq.tile .under { display: none; }
/* Tap a played tile: it fades to show the square it sits on */
.sq.tile.peek { background: #EFEFED; border-color: transparent; }
.sq.tile.peek.pT { background: var(--red); } .sq.tile.peek.pD { background: var(--pink); } .sq.tile.peek.pt { background: var(--blue); } .sq.tile.peek.pd { background: var(--lblue); }
.sq.tile.peek span, .sq.tile.peek i { opacity: .18; }
.sq.tile.peek .under { display: block; position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.9cqw/1 var(--body); color: var(--ink); }
.sq.tile.peek.pT .under, .sq.tile.peek.pt .under { color: #fff; }
.sq.tile.peek.centre .under { font-size: 3.4cqw; }
@media (min-width: 700px) { .sq.tile.peek .under { font-size: 12px; } .sq.tile.peek.centre .under { font-size: 22px; } }
.sq.tile span { font: 400 3.9cqw/1 Verdana, "Trebuchet MS", Helvetica, Arial, sans-serif; margin-top: -3%; }
.sq.tile i { position: absolute; right: 6%; bottom: 3%; font: 400 1.6cqw/1 Verdana, Arial, sans-serif; }
@media (min-width: 700px) { .sq.tile span { font-size: 25px; } .sq.tile i { font-size: 10px; } }
.sq.tile.fresh { background: linear-gradient(180deg, #6DBE6A, var(--green)); border-color: #3E8C3B; color: #fff; }
.sq.tile.pending { background: linear-gradient(180deg, #FFF2B0, #F9DD6E); border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue) inset; }
.sq.tile.blank span { color: var(--red); }
.sq.tile.fresh.blank span { color: #FFD6D6; }
.sq.tile.fresh span, .sq.tile.fresh i { color: #fff; }
.sq.tile.fresh.blank span { color: #FFD6D6; }
.sq.tile.blank.pT span, .sq.tile.blank.pD span, .sq.tile.blank.pt span, .sq.tile.blank.pd span { color: var(--red); }

/* Rack */
.rackcard { padding: 10px 12px; }
.preview { min-height: 1.3em; text-align: center; font-size: .92rem; color: var(--muted); margin: 0 0 6px; }
.preview.ok { color: var(--ink); }
.preview.bad { color: var(--red); }
.rack { display: flex; justify-content: center; gap: 6px; flex-wrap: nowrap; }
.rtile {
  --rt: 48px;
  flex: 0 1 var(--rt); width: var(--rt); max-width: 12%; aspect-ratio: 1; height: auto; position: relative; border-radius: 6px; cursor: pointer; padding: 0;
  background: linear-gradient(180deg, var(--tile-hi), var(--tile)); border: 1px solid var(--tile-edge);
  box-shadow: 0 2px 0 var(--tile-edge); display: grid; place-items: center;
}
.rtile span { font: 400 clamp(16px, 6vw, 26px)/1 Verdana, "Trebuchet MS", Helvetica, Arial, sans-serif; color: var(--ink); }
.rtile i { position: absolute; right: 8%; bottom: 4%; font: 400 clamp(8px, 2.6vw, 11px)/1 Verdana, Arial, sans-serif; color: var(--ink); }
.rtile.sel { transform: translateY(-6px); box-shadow: 0 8px 0 var(--tile-edge), 0 0 0 2px var(--blue); }
.rtile.used { opacity: .25; box-shadow: none; transform: none; }
.rtile.blank { background: linear-gradient(180deg, #FFFBEA, #F7ECC2); }
.rackbtns { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 6px; margin-top: 10px; }
.rackbtns .btn { padding: 9px 2px; font-size: .82rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rackbtns .btn.play { background: var(--green); border-color: var(--green); color: #fff; font-size: .95rem; }
@media (max-width: 340px) { .rackbtns { grid-template-columns: repeat(4, 1fr); } .rackbtns .btn.play { grid-column: 1 / -1; padding: 12px; } }
.rackbtns .btn.play:disabled { background: var(--line); border-color: var(--line); color: var(--muted); opacity: 1; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--blue); font-size: .85rem; text-decoration: underline; cursor: pointer; }
.letters { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0; }
.letters .rtile { width: 100%; max-width: none; flex: none; }
.letters .rtile span { font-size: 1.3rem; }
.letters .rtile i { font-size: .6rem; }
.playoffer { margin: 0 0 14px; padding: 12px; background: var(--green-soft); border-radius: 12px; display: grid; gap: 6px; }
.playoffer .btn { background: var(--green); border-color: var(--green); }

/* Moves & chat */
.moves li .m { color: var(--muted); }
.chatcard h3 { margin-bottom: 6px; }
.chat { max-height: 320px; overflow: auto; display: grid; gap: 8px; padding: 4px 0; }
.msg { display: grid; gap: 2px; max-width: 88%; }
.msg .who { font-size: .72rem; color: var(--muted); font-weight: 700; }
.msg .txt { font-size: 1.05rem; line-height: 1.35; background: var(--paper); border: 1px solid var(--line); padding: 8px 12px; border-radius: 14px 14px 14px 4px; }
.msg.me { justify-self: end; text-align: right; }
.msg.me .txt { background: var(--lblue-soft); border-color: var(--lblue); border-radius: 14px 14px 4px 14px; }
.msg.bot .txt { background: var(--blue); color: #fff; border-color: var(--blue); }
.quick { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 4px; scrollbar-width: none; max-width: 100%; }
.chatcard { overflow: hidden; }
.quick .chip { font-size: 1.05rem; padding: 6px 10px; white-space: nowrap; }
.leftovers { display: grid; gap: 6px; margin: 4px 0 12px; }
.leftover { display: flex; align-items: center; gap: 10px; }
.leftover .who { min-width: 4.5em; font-weight: 700; font-size: .9rem; }
.minirack { display: inline-flex; gap: 4px; }
.rtile.mini { --rt: 30px; width: var(--rt); max-width: none; flex: none; border-radius: 4px; box-shadow: 0 1px 0 var(--tile-edge); cursor: default; }
.rtile.mini span { font-size: 15px; }
.rtile.mini i { font-size: 7px; right: 6%; bottom: 6%; }
.linkbtn.muted { color: var(--muted); }
.quick .chip.plus { font-weight: 700; color: var(--blue); border-style: dashed; padding: 6px 12px; }
.emojitype { display: flex; gap: 8px; margin: 0 0 12px; }
.emojitype input { flex: 1; min-width: 0; font: inherit; font-size: 1.2rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.emojigrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.emojigrid .chip { font-size: 1.4rem; padding: 6px 0; text-align: center; line-height: 1.3; }
.chatform { display: flex; gap: 8px; margin-top: 6px; }
.chatform input, .chatform textarea { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.chatform textarea { resize: none; line-height: 1.35; max-height: 170px; overflow-y: auto; }
.chatform { align-items: flex-end; }
.chatform.editing textarea { border-color: var(--blue); box-shadow: 0 0 0 2px var(--lblue) inset; }
.editnote { margin: 6px 0 0; }
.msg .editlink { font-size: .72rem; margin-left: 6px; }
.lookupres { min-height: 1.4em; margin: 8px 0; font-size: .95rem; }
.twos { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; font: 600 .9rem/1.6 var(--body); }
.twos span { text-align: center; background: var(--paper); border-radius: 6px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* Live games on the dashboard */
.slot.live { text-decoration: none; color: inherit; border-color: var(--green); background: var(--green-soft); }
.slot.played { text-decoration: none; color: inherit; }
.slot.played .date { color: var(--blue); }
.slot .pts.livetag { background: var(--green); color: #fff; letter-spacing: .06em; }
.livecard { border-color: var(--green); }
.livelist { display: grid; gap: 6px; }
.liverow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-decoration: none; color: inherit; padding: 8px 10px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.liverow .lp { font-size: 1rem; }
.liverow .lp b { font-family: var(--display); font-size: 1.15rem; }
.liverow .lp .lead b { color: var(--good); }
.liverow .lt { font-size: .78rem; font-weight: 700; color: var(--muted); align-self: center; }
.liverow .lt.you { color: #fff; background: var(--green); padding: 3px 8px; border-radius: 999px; }
.liverow .ls { grid-column: 1 / -1; font-size: .76rem; }

/* Phones: the board runs edge to edge and the game header stays out of the way */
@media (max-width: 640px) {
  .boardwrap { margin: 0 -16px; }
  .gameboard { width: 100%; border-left: 0; border-right: 0; border-radius: 0; }
  .app { gap: 10px; }
  body.in-game .masthead { display: none; }
  body.in-game .app { padding-top: 8px; }
  body.in-game .gamehead { border-radius: 10px; }
  .gp b { font-size: 1.2rem; }
  .gp { padding: 3px 8px; }
}

@media (max-width: 400px) {
  .tabs a { padding: 8px 7px 10px; font-size: .92rem; }
  .tabs .who { padding: 4px 9px; font-size: .8rem; }
}
@media (max-width: 340px) {
  .tabs a { padding: 8px 5px 10px; font-size: .85rem; }
}

/* Drag and drop, and the next-square hint */
.rtile, .sq.pending, .rack { touch-action: none; }
body { touch-action: manipulation; }                                       /* no double-tap zoom anywhere; scrolling is untouched */
.rtile, .sq { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.rtile.dragging { opacity: .22; box-shadow: none; background: var(--line); border-style: dashed; }   /* the hole the tile came from */
.rtile.dragging span, .rtile.dragging i { visibility: hidden; }
.sq.pending.dragging { opacity: .35; }
.rtile.arriving, .sq.tile.arriving { visibility: hidden; }                                              /* revealed when the floating tile lands */
/* The floating tile: sized from the board square it will land on (--gs), lifted above the finger */
.dragghost { --gs: 48px; position: fixed; z-index: 60; pointer-events: none; display: grid; place-items: center; border-radius: 12%;
  background: linear-gradient(180deg, var(--tile-hi), var(--tile)); border: 1px solid var(--tile-edge); box-shadow: 0 2px 0 var(--tile-edge);
  transform: scale(1); transition: transform .16s cubic-bezier(.3,1.4,.5,1), box-shadow .16s ease, opacity .18s ease; }
.dragghost.lifted { transform: scale(1.14) rotate(-3deg); box-shadow: 0 14px 30px -8px rgba(0,0,0,.55); }
.dragghost.landingghost { transform: scale(1) rotate(0); box-shadow: 0 2px 0 var(--tile-edge); transition: left .24s cubic-bezier(.2,.9,.3,1.1), top .24s cubic-bezier(.2,.9,.3,1.1), width .24s ease, height .24s ease, transform .24s ease, box-shadow .24s ease; }
.dragghost.fade { opacity: 0; transform: scale(.8); }
.dragghost span { font: 400 calc(var(--gs) * .58)/1 Verdana, "Trebuchet MS", Helvetica, Arial, sans-serif; color: var(--ink); margin-top: -3%; }
.dragghost i { position: absolute; right: 8%; bottom: 5%; font: 400 calc(var(--gs) * .24)/1 Verdana, Arial, sans-serif; color: var(--ink); }
.sq.drop { box-shadow: 0 0 0 3px var(--blue) inset; }
.sq.next { box-shadow: 0 0 0 2px var(--blue) inset; }
.sq.next::before { content: ""; position: absolute; width: 36%; height: 36%; border-radius: 50%; background: var(--blue); opacity: .35; }
/* Keyboard play (19 Sept 2026): the square the next typed letter lands on, with an arrow for the way the word runs */
.sq.next.kbd::before { width: auto; height: auto; border-radius: 0; background: none; opacity: .9; color: var(--blue); font: 800 3.2cqw/1 var(--body); animation: kbdblink 1.1s ease-in-out infinite; }
.sq.next.kbd.across::before { content: "▸"; }
.sq.next.kbd.down::before { content: "▾"; }
@media (min-width: 700px) { .sq.next.kbd::before { font-size: 20px; } }
@keyframes kbdblink { 50% { opacity: .35; } }
.sq.tile.typed { animation: typedpop .26s cubic-bezier(.3,1.6,.5,1); }
@keyframes typedpop { from { transform: scale(.55) rotate(-8deg); } to { transform: none; } }
.rack.shake { animation: rackshake .4s ease; }
@keyframes rackshake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.list.plain.keylist li { display: flex; justify-content: flex-start; gap: 12px; align-items: baseline; }
.keylist .keys { flex: 0 0 9.5em; white-space: nowrap; }
.keylist .keys + span { flex: 1; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 5px; margin: 0 1px; border: 1px solid #CFCFCA; border-bottom-width: 2px; border-radius: 5px; background: #fff; font: 600 .82em/1.4 var(--body); text-align: center; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .sq.next.kbd::before, .sq.tile.typed, .rack.shake { animation: none; } }

/* The magnifier bubble: the square under the floating tile, with its neighbours, big enough to read */
.magnifier { --mc: 36px; position: fixed; z-index: 61; pointer-events: none; padding: 5px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line); box-shadow: 0 14px 34px -10px rgba(0,0,0,.5); }
.magnifier::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.mgrid { display: grid; grid-template-columns: repeat(5, var(--mc)); grid-auto-rows: var(--mc); gap: 2px; background: var(--grid); border-radius: 6px; overflow: hidden; }
.mc { background: #EFEFED; display: grid; place-items: center; font: 700 11px/1 var(--body); color: var(--ink); position: relative; }
.mc.off { background: var(--line); }
.mc.pT { background: var(--red); color: #fff; }
.mc.pD { background: var(--pink); }
.mc.pt { background: var(--blue); color: #fff; }
.mc.pd { background: var(--lblue); }
.mc.centre { font-size: 20px; }
.mc.tile { background: linear-gradient(180deg, var(--tile-hi), var(--tile)); border: 1px solid var(--tile-edge); border-radius: 3px; }
.mc.tile span { font: 400 20px/1 Verdana, "Trebuchet MS", Helvetica, Arial, sans-serif; margin-top: -2px; }
.mc.tile i { position: absolute; right: 6%; bottom: 3%; font: 400 8px/1 Verdana, Arial, sans-serif; }
.mc.tile.pending { background: linear-gradient(180deg, #FFF2B0, #F9DD6E); box-shadow: 0 0 0 2px var(--blue) inset; }
.mc.tile.here { box-shadow: 0 0 0 3px var(--green) inset; background: linear-gradient(180deg, #FFF2B0, #F9DD6E); }
.mc.tile.blank span { color: var(--red); }

/* Live word check in the score preview */
.preview .w { white-space: nowrap; }
.preview .w.ok { color: var(--good, #0072B2); }
.preview .w.bad { color: var(--red); font-weight: 700; }
.preview .w.unk { color: var(--muted); }

/* Notifications card in the lobby */
.notifycard .lead { margin-bottom: 8px; }

/* Preview gate: the Play tab is hidden until launch */
body.no-play #tabs a[data-tab="play"], body.no-play #bottomnav a[data-tab="play"] { display: none; }
/* League and Stats are Words and Guff's; Play, Friendlies and the Logbook are every league's (19 Sept 2026) */
body.no-guff :is(#tabs, #bottomnav) a:is([data-tab="month"], [data-tab="all"]) { display: none; }
body.no-guff .foot p:first-child { display: none; }
/* admin: leagues and PINs */
.adminadd { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.adminadd input, .adminadd select { font: inherit; font-size: .95rem; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); flex: 1 1 140px; min-width: 0; }
.linkbtn.danger { color: var(--red); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:disabled { opacity: .45; }
.pinshow { font: 800 2.6rem/1 var(--display); letter-spacing: .18em; text-align: center; padding: 16px; margin: 6px 0 12px; background: var(--paper); border: 1px dashed var(--line); border-radius: 12px; }
.codebox { margin-top: 8px; } .codebox summary { font-size: .85rem; color: var(--muted); cursor: pointer; }
.tag.lg { color: #fff; font-size: .68rem; letter-spacing: .03em; vertical-align: middle; }
.tag.lg.c0 { background: var(--o0); } .tag.lg.c1 { background: var(--o1); } .tag.lg.c2 { background: var(--o2); } .tag.lg.c3 { background: var(--o3); }
h3 .tag.lg { font-size: .7rem; margin-left: 4px; }
.nudgerow { margin: 6px 0 2px; }
.chip.nudge { font-weight: 700; border-color: var(--o2); color: #7A5605; }
.tag.prev { background: var(--pink-soft); color: var(--red); font-size: .62rem; vertical-align: middle; }

/* Practice against GuffBot. Graphite, so it reads as the side room it is, and the
   robot leans in when you go near the button. */
.tag.bot { background: var(--o4); color: #fff; font-size: .68rem; vertical-align: middle; padding: 2px 6px; }
/* Lord GuffBot's button is orange (Carl, 19 Sept 2026: more fun than graphite). The same orange as a big
   win's points badge, lit from above like a tile, and dark enough for white text to read. */
.btn.bot { background: linear-gradient(180deg, #EC7A2C, #D55E00); border-color: #C05400; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.18); box-shadow: 0 2px 0 #A94A00; }
.btn.bot:hover, .btn.bot:focus-visible { background: linear-gradient(180deg, #E06D1E, #C05400); border-color: #A94A00; }
.btn.bot:active { box-shadow: 0 0 0 #A94A00; }
.btn.bot:active { transform: translateY(1px) scale(.99); }
.solocard .lead { margin-bottom: 0; }
.btn.bot { transition: background .18s ease, transform .18s cubic-bezier(.3,1.5,.5,1); }
@media (hover: hover) { .btn.bot:hover { animation: botnudge .5s ease; } }
@keyframes botnudge { 0% { transform: rotate(0); } 25% { transform: rotate(-3deg) scale(1.03); } 55% { transform: rotate(2deg) scale(1.03); } 100% { transform: rotate(0) scale(1); } }

/* He is working. The score panel says so, and blinks slowly while he does. */
.gp.thinking { border-color: var(--o4); background: color-mix(in srgb, var(--o4) 12%, transparent); }
.gp.thinking .n small { color: var(--o4); animation: botthink 1.6s ease-in-out infinite; }
@keyframes botthink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .gp.thinking .n small { animation: none; }
  .btn.bot:hover { animation: none; }
}
.tag.newchat { background: var(--blue); color: #fff; font-size: .62rem; vertical-align: middle; }

/* the chat peek above the rack: one line, the newest message, a pill when there is something you have not read */
.peek { display: block; width: 100%; max-width: 100%; margin: 0; padding: 2px 4px; border: 0; background: none; font: inherit; font-size: .92rem;
  color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.peek b { color: var(--muted); font-weight: 700; }
.peek.unread { color: var(--ink); }
.peek.unread b { color: var(--ink); }
.peek .newpill { display: inline-block; background: var(--blue); color: #fff; font-size: .7rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; vertical-align: 1px; margin-right: 2px; }

/* Guffbot's odds: the win-chance bar (game view, lobby cards, dashboard rows) */
.odds { display: grid; gap: 4px; }
:root { --o0: var(--blue); --o1: var(--red); --o2: #B5820A; --o3: #0E8F9E; --o4: #5A6472; }   /* series colours, validated pair-wise for colour-blind readers; o4 is GuffBot, graphite, so the four keep theirs */
.oddslabel { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.oddslabel .linkbtn { font-size: inherit; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.btnrow.start { justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btnrow.start .btn { flex: 1 1 40%; }
.oddsbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line); }
.oddsbar i { display: block; height: 100%; transition: width .6s ease; }
.oddsbar .o0 { background: var(--o0); } .oddsbar .o1 { background: var(--o1); } .oddsbar .o2 { background: var(--o2); } .oddsbar .o3 { background: var(--o3); } .oddsbar .o4 { background: var(--o4); }
.oddsnames { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--muted); }
.oddsnames b { color: var(--ink); font-family: var(--display); font-size: .95rem; }
.oddsnames .o0 b { color: var(--o0); } .oddsnames .o1 b { color: var(--o1); } .oddsnames .o2 b { color: var(--o2); } .oddsnames .o3 b { color: var(--o3); } .oddsnames .o4 b { color: var(--o4); }
.oddsnames.many { justify-content: flex-start; flex-wrap: wrap; gap: 4px 12px; }
.oddscard { padding: 10px 14px; }
.mcard .odds { margin-top: 8px; }
.liverow .lo { grid-column: 1 / -1; margin-top: 4px; }
.liverow .oddsbar { height: 7px; }
.liverow .oddsnames { font-size: .74rem; } .liverow .oddsnames b { font-size: .85rem; }

/* "New version" bar */
.newver { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; max-width: calc(100% - 32px);
  padding: 12px 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 .92rem/1.2 var(--body); box-shadow: var(--shadow); cursor: pointer; }

/* Tiles left sheet */
.tilesleft .rtile { cursor: default; }
.tilesleft .rtile em { position: absolute; left: -4px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 .72rem/20px var(--body); text-align: center; font-style: normal; }
.tilesleft .rtile.gone { opacity: .3; }
.tilesleft .rtile.gone em { background: var(--muted); }
.boardlinks { padding: 8px 14px; font-size: .85rem; }

/* Replay */
.replay { padding: 10px 14px; }
.rrow { display: flex; align-items: center; gap: 8px; }
.rrow .btn { padding: 6px 12px; font-size: 1.1rem; line-height: 1; }
.rrow input[type=range] { flex: 1; min-width: 0; accent-color: var(--blue); }
.rcap { margin-top: 6px; font-size: .9rem; }

/* The race chart */
.storycard h3 { margin-bottom: 4px; }
.racewrap { position: relative; }
.race { width: 100%; height: auto; display: block; font-family: var(--body); }
.race .rg { stroke: var(--line); stroke-width: 1; }
.race .rax { fill: var(--muted); font-size: 8px; text-anchor: end; }
.race .rax.end { text-anchor: end; } .race text.rax[x="30"] { text-anchor: start; }
.race .rl { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.race .rl.o0 { stroke: var(--o0); } .race .rl.o1 { stroke: var(--o1); } .race .rl.o2 { stroke: var(--o2); } .race .rl.o3 { stroke: var(--o3); } .race .rl.o4 { stroke: var(--o4); }
.race .rlab { font-size: 9px; font-weight: 700; fill: var(--ink); }
.race .rchange { stroke: var(--card); stroke-width: 2; }
.race .rchange.o0 { fill: var(--o0); } .race .rchange.o1 { fill: var(--o1); } .race .rchange.o2 { fill: var(--o2); } .race .rchange.o3 { fill: var(--o3); } .race .rchange.o4 { fill: var(--o4); }
.race .rcur { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.race .rhit { cursor: crosshair; touch-action: pan-y; }
.rtip { position: absolute; top: 0; padding: 4px 8px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .78rem; white-space: nowrap; pointer-events: none; }
.rtip b { margin-right: 4px; }
.rtip .o0 { color: #A8C0FF; } .rtip .o1 { color: #FFB3AB; } .rtip .o2 { color: #F5D06A; } .rtip .o3 { color: #8FE3EC; } .rtip .o4 { color: #C3CBD6; }

/* Game over */
.endsheet { text-align: center; }
.endemoji { font-size: 4rem; line-height: 1; margin: 6px 0 10px; animation: endpop .7s cubic-bezier(.3,1.6,.5,1) both; }
.endsheet.lose .endemoji { animation: endwobble .9s ease both; }
.endsheet h2 { font-size: 2rem; margin-bottom: 6px; }
.endscore { font-size: 1.15rem; margin: 0 0 4px; }
.endscore b { font-family: var(--display); font-size: 1.5rem; }
.endguff { margin: 12px 0 4px; font-size: .95rem; }
.endguff .tag { background: var(--blue); color: #fff; margin-right: 6px; }
@keyframes endpop { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes endwobble { 0% { transform: translateY(-30px); opacity: 0; } 60% { transform: translateY(6px); opacity: 1; } 80% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.rain { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.rain span { position: absolute; top: -40px; animation: raindrop 2.4s linear both; }
@keyframes raindrop { to { transform: translateY(110vh) rotate(60deg); } }

.bingo { color: var(--red); font-weight: 800; letter-spacing: .04em; }

/* The race, full screen */
.racefull { position: fixed; inset: 0; z-index: 45; background: var(--card); padding: calc(10px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.rfhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rfhead b { font-family: var(--display); font-size: 1.2rem; }
.rfwrap { flex: 1; min-height: 0; display: flex; align-items: center; }
.rfwrap .race { width: 100%; max-height: 100%; }
.race.big .rl { stroke-width: 2.5; }
.race.big .rax { font-size: 6px; } .race.big .rlab { font-size: 7px; } .race.big .rchange { r: 3; }
@media (orientation: landscape) { .race.big .rax { font-size: 5px; } .race.big .rlab { font-size: 6px; } }
.rfhead .o0 { color: var(--o0); font-weight: 700; } .rfhead .o1 { color: var(--o1); font-weight: 700; } .rfhead .o2 { color: var(--o2); font-weight: 700; } .rfhead .o3 { color: var(--o3); font-weight: 700; } .rfhead .o4 { color: var(--o4); font-weight: 700; }

/* After a move: the next game waiting on you */
.nextbar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; width: min(calc(100% - 32px), 480px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--green); color: #fff; text-decoration: none;
  font-size: .95rem; box-shadow: var(--shadow); animation: nextin .35s cubic-bezier(.3,1.4,.5,1) both; }
.nextbar b { font-weight: 800; }
.nextbar .arrow { font-size: 1.5rem; line-height: 1; }
@keyframes nextin { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.nextbar.out { animation: nextout .3s ease both; pointer-events: none; }
@keyframes nextout { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, 30px); opacity: 0; } }

/* The last move, called out over the board until you touch a tile */
.boardwrap { position: relative; }
.lastcall { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 5; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow); pointer-events: none;
  animation: callin .35s cubic-bezier(.3,1.4,.5,1) both; transition: opacity .4s ease, transform .4s ease; }
.lastcall .w { color: #A8E6A5; font-weight: 800; letter-spacing: .03em; }
.lastcall .tot { color: #F5D76A; font-weight: 800; }
.lastcall .bingo { color: #FFB3AB; }
.lastcall.gone { opacity: 0; transform: translate(-50%, -10px); }
@keyframes callin { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Chat sits right under the rack; the entry field first */
.chatcard .chatform { margin-top: 0; }
.chatcard .chat { max-height: 220px; margin-top: 6px; }

/* Race tooltip: the words at that move */
.rtip .rwords { color: #E4E4E0; font-weight: 400; margin-top: 2px; }

/* Guffbot's bingo dance */
.robodance { position: fixed; inset: 0; z-index: 55; pointer-events: none; display: grid; place-items: center; transition: opacity .5s ease; }
.robodance.out { opacity: 0; }
.robodance .robo { font-size: 7rem; line-height: 1; animation: robobounce 2.6s cubic-bezier(.3,1.4,.5,1) both; filter: drop-shadow(0 16px 30px rgba(0,0,0,.35)); }
.robodance .robotext { position: absolute; top: calc(50% + 80px); font: 800 2rem/1 var(--display); color: var(--red); letter-spacing: .08em; background: #fff; padding: 8px 18px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: robotext 2.6s ease both; }   /* on a white pill, so it never bleeds into the red premium squares behind it */
.robodance .spark { position: absolute; top: 50%; left: 50%; font-size: 1.6rem; animation: sparkfly 1.6s ease-out both; animation-delay: calc(var(--i) * .12s + .3s); transform: rotate(calc(var(--i) * 60deg)) translateY(-40px); }
@keyframes robobounce { 0% { transform: translateY(120vh) rotate(-20deg) scale(.6); } 30% { transform: translateY(-20px) rotate(8deg) scale(1.1); } 45% { transform: translateY(0) rotate(-6deg) scale(1); } 60% { transform: translateY(-14px) rotate(360deg) scale(1.05); } 75% { transform: translateY(0) rotate(354deg) scale(1); } 100% { transform: translateY(0) rotate(360deg) scale(1); } }
@keyframes robotext { 0%, 35% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.15); } 60%, 100% { opacity: 1; transform: scale(1); } }
@keyframes sparkfly { from { opacity: 1; transform: rotate(calc(var(--i) * 60deg)) translateY(-40px) scale(.6); } to { opacity: 0; transform: rotate(calc(var(--i) * 60deg)) translateY(-150px) scale(1.4); } }

/* Welcome sheet (first login on a device) ------------------------------- */
.welcome .wbot { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
.seg { display: flex; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin: 4px 0 12px; }
.seg button { flex: 1; font: inherit; font-weight: 600; font-size: .9rem; padding: 7px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--blue); color: #fff; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.steps .se { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 1.3rem; }
.steps .st { font-weight: 600; line-height: 1.3; }
.steps .st::before { counter-increment: step; content: counter(step) ". "; color: var(--blue); }
.steps .ss { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.welcome .tiny { margin-top: 12px; }
.welcome { position: relative; }
.sheetx { position: absolute; top: -6px; right: -6px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper); color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.sheetx:hover { color: var(--ink); }
.notifylink { margin: 0 0 10px; font-size: .9rem; text-align: center; }
.notifylink.above { margin: 4px 0 8px; }
body.logged-out #tabs { display: none; }   /* the landing card carries the only Log in button */
body.logged-out .foot p:first-child { display: none; }
.landing { text-align: center; padding: 28px 18px; }
.landing .lead { max-width: 34ch; margin: 6px auto 16px; }
.landing .btnrow { max-width: 240px; margin: 0 auto; }


/* Navigation, 19 Sept 2026 ---------------------------------------------
   Play, League, Friendlies, Stats, Logbook. Along the top on anything wider than
   a phone; along the bottom on a phone, where a thumb can reach them. */
.bottomnav { display: none; }
@media (max-width: 560px) {
  .tabs a { display: none; }                                   /* they live at the bottom on a phone */
  .tabs { border-bottom: 0; margin-top: 10px; justify-content: flex-end; }
  .tabs .who { margin-bottom: 0; }
  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;   /* under the sheets (20, 21), so a sheet's buttons are never covered */
    background: color-mix(in srgb, var(--card) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 18px -14px rgba(0,0,0,.35);
    padding: 3px 4px calc(3px + env(safe-area-inset-bottom));
  }
  .bottomnav a {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 6px 0 4px; text-decoration: none; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .01em;
    position: relative; border-radius: 12px; -webkit-tap-highlight-color: transparent;
  }
  .bottomnav a span { white-space: nowrap; }
  .bottomnav a i {
    font-style: normal; font-size: 1.35rem; line-height: 1.15;
    filter: grayscale(1) opacity(.55); transition: transform .3s cubic-bezier(.3,1.6,.5,1), filter .2s ease;
  }
  .bottomnav a.active { color: var(--blue); }
  .bottomnav a.active i { filter: none; transform: translateY(-2px) scale(1.14); }
  .bottomnav a:active i { transform: scale(.86); transition-duration: .08s; }
  .bottomnav a.active::before {                                /* a little tile under the one you are on */
    content: ""; position: absolute; top: 3px; width: 34px; height: 30px; border-radius: 9px;
    background: linear-gradient(180deg, var(--tile-hi), var(--tile)); opacity: .45; z-index: -1;
  }
  .bottomnav .badge { top: 1px; right: calc(50% - 22px); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.in-game .bottomnav, body.logged-out .bottomnav { display: none; }
  /* Things that float at the foot of the screen float above the bar instead of on it */
  body:not(.in-game):not(.logged-out) .newver { bottom: calc(78px + env(safe-area-inset-bottom)); }
  body.in-game, body.logged-out { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .bottomnav a i { transition: none; } }

/* League chips: which league Friendlies and the Logbook are showing */
.lgchips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
.lgchips::-webkit-scrollbar { display: none; }
.lgchip {
  flex: 0 0 auto; text-decoration: none; font-size: .85rem; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--muted); transition: transform .2s cubic-bezier(.3,1.6,.5,1);
}
.lgchip:active { transform: scale(.95); }
.lgchip.on { color: #fff; border-color: transparent; }
.lgchip.on.c0 { background: var(--o0); } .lgchip.on.c1 { background: var(--o1); } .lgchip.on.c2 { background: var(--o2); } .lgchip.on.c3 { background: var(--o3); }

/* Finished games: one row each, in Friendlies and the Logbook */
.lblist { display: grid; }
.lbrow {
  display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "sc pts go" "meta meta go";
  align-items: center; gap: 1px 10px; width: 100%; padding: 9px 6px 9px 10px; margin: 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left;
  font: inherit; color: inherit; text-decoration: none; cursor: pointer; border-radius: 8px;
}
.lblist .lbrow:last-child { border-bottom: 0; }
.lbrow:hover { background: var(--paper); }
.lbrow.mine { box-shadow: inset 3px 0 0 var(--green); }
.lbrow .lbsc { grid-area: sc; font-family: var(--display); font-size: 1rem; line-height: 1.3; min-width: 0; }
.lbrow .lbsc b { font-weight: 800; margin: 0 3px; }
.lbrow .lbsc .w { font-weight: 700; color: var(--green); }
.lbrow .lbsc .me { box-shadow: inset 0 -.38em 0 color-mix(in srgb, var(--tile) 60%, transparent); }   /* you, underlined with a highlighter */
.lbrow .lbmeta { grid-area: meta; font-size: .76rem; color: var(--muted); }
.lbrow .lbmeta .tag { font-size: .62rem; padding: 1px 6px; vertical-align: 1px; margin-left: 2px; }
.lbrow .pts { grid-area: pts; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.lbrow .go { grid-area: go; color: var(--muted); font-size: 1.15rem; }
.lblist.more.unfold { animation: unfold .35s ease; }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.morebtn { margin-top: 6px; font-weight: 700; }
.lbh { margin: 14px 0 2px; font: 700 .72rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lbh:first-of-type { margin-top: 6px; }
details.x.yr > summary { font-size: 1.05rem; }
details.x.mo { border-top: 1px dashed var(--line); margin-left: 4px; }
details.x.mo > summary { padding: 9px 0; font-size: .95rem; }
.pagefoot { text-align: center; margin: 0; }

/* The Logbook link at the foot of Play */
.logbooklink { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.logbooklink b { display: block; font-family: var(--display); font-size: 1.05rem; }
.logbooklink .tiny { display: block; }
.logbooklink .lbicon { font-size: 1.7rem; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.logbooklink:hover .lbicon, .logbooklink:active .lbicon { transform: rotate(-10deg) scale(1.12); }
.logbooklink .go { font-size: 1.5rem; color: var(--muted); }

/* A score card for a game from before the app */
.scorecard { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.scorecard b { font-size: 1.6rem; }

/* GuffBot, jammed */
.preview .stuck { color: var(--red); font-weight: 600; }

a.btn { text-decoration: none; }                               /* a link dressed as a button is a button */
/* A folded month inside an open year shows + like any other folded thing (the open year's marker was leaking down) */
details.x:not([open]) > summary::after { content: "+"; }
details.x[open] > summary::after { content: "–"; }
.lbsum { display: inline-flex; align-items: baseline; gap: 6px; }
.lbsum .bot { white-space: nowrap; }

/* The league table on a phone (19 Sept 2026). It was up to 60px too wide on an iPhone by the end of a
   month, with the Proj column cut off at the card's edge. On a phone the form squares drop under the
   name and shrink a little, and the cells pull in, so the whole table fits down to a 360px screen with a
   full month of results. Below that (an original iPhone SE) the table scrolls sideways inside its card
   rather than being clipped. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 480px) {
  table.league { font-size: .9rem; }
  table.league :is(th, td) { padding-left: 3px; padding-right: 3px; }
  table.league th { letter-spacing: .03em; }
  table.league td.name .form { display: flex; margin: 3px 0 0; gap: 2px; }
  table.league td.name .form i { width: 7px; height: 7px; }
  table.league td.name .form i.D { width: 6px; height: 6px; }
  table.league td.pts { font-size: 1rem; }
  table.league .rank { margin-right: 0; }
}

/* ---------------------------------------------------------- the Power Board (beta, 19 Sept 2026)
   Our own board: teal word squares (4W corners the deepest), terracotta letter squares, cream tiles
   with a serif letter. Scoped to .gameboard.power so the Lexulous board is untouched. */
.sq.pQ { background: #0E4F58; color: #fff; }
.mc.pQ { background: #0E4F58; color: #fff; }
.sq.tile.pQ span, .sq.tile.pQ i { color: var(--blue); }
.sq.tile.peek.pQ { background: #0E4F58; } .sq.tile.peek.pQ .under { color: #fff; }
.gameboard.power { --pw-q: #0E4F58; --pw-t: #2C8B85; --pw-d: #BEDFD8; --pw-tl: #C4552B; --pw-dl: #F3CBB3; --pw-tile: #FBF3DC; --pw-tile-hi: #FFFBEE; --pw-edge: #C9B786; background: #DDD8CB; border-color: #DDD8CB; }
.gameboard.power .sq { background: #F0ECE3; }
.gameboard.power .sq.pQ { background: var(--pw-q); color: #fff; }
.gameboard.power .sq.pT { background: var(--pw-t); color: #fff; }
.gameboard.power .sq.pD { background: var(--pw-d); color: var(--ink); }
.gameboard.power .sq.pt { background: var(--pw-tl); color: #fff; }
.gameboard.power .sq.pd { background: var(--pw-dl); color: var(--ink); }
.gameboard.power .sq.tile { background: linear-gradient(180deg, var(--pw-tile-hi), var(--pw-tile)); border-color: var(--pw-edge); border-radius: 12%; }
.gameboard.power .sq.tile span { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
.gameboard.power .sq.tile.pT span, .gameboard.power .sq.tile.pD span, .gameboard.power .sq.tile.pt span, .gameboard.power .sq.tile.pd span, .gameboard.power .sq.tile.pQ span,
.gameboard.power .sq.tile.pT i, .gameboard.power .sq.tile.pD i, .gameboard.power .sq.tile.pt i, .gameboard.power .sq.tile.pd i, .gameboard.power .sq.tile.pQ i { color: #0E4F58; }
.gameboard.power .sq.tile.peek.pQ { background: var(--pw-q); } .gameboard.power .sq.tile.peek.pT { background: var(--pw-t); } .gameboard.power .sq.tile.peek.pD { background: var(--pw-d); }
.gameboard.power .sq.tile.peek.pt { background: var(--pw-tl); } .gameboard.power .sq.tile.peek.pd { background: var(--pw-dl); }
.gameboard.power .sq.tile.peek.pD .under, .gameboard.power .sq.tile.peek.pd .under { color: var(--ink); }
.gameboard.power .sq.tile.fresh { background: linear-gradient(180deg, #6DBE6A, var(--green)); border-color: #3E8C3B; }
.gameboard.power .sq.tile.pending { background: linear-gradient(180deg, #FFF2B0, #F9DD6E); }
.tag.beta { background: #0E4F58; color: #fff; font-size: .62rem; vertical-align: middle; letter-spacing: .06em; text-transform: uppercase; }
.powercard { border-color: #BEDFD8; background: linear-gradient(180deg, #F4FAF8, var(--card) 40%); }
.chip.act.power { border-color: #2C8B85; color: #0E4F58; background: #F4FAF8; text-decoration: none; display: inline-block; }
.chip.act.power:hover { background: #0E4F58; color: #fff; border-color: #0E4F58; }
.list.plain li { display: block; }

/* GIFs in the chat (19 Sept 2026) ---------------------------------------- */
.gifbtn { flex: 0 0 auto; align-self: flex-end; height: 36px; padding: 0 10px; border: 2px solid var(--blue); border-radius: 10px; background: var(--card); color: var(--blue); font: 800 .8rem/1 var(--body); letter-spacing: .08em; cursor: pointer; transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.gifbtn:hover, .gifbtn:focus-visible { transform: rotate(-6deg) scale(1.06); }
.gifbtn:active { transform: scale(.94); }
.msg .txt.gif { padding: 4px; line-height: 0; background: var(--paper); overflow: hidden; }
.msg.me .txt.gif { justify-self: end; }
.msg .gifimg { display: block; width: auto; height: auto; max-width: min(200px, 58vw); max-height: 160px; border-radius: 10px; background: #E6E6E2; }
.gifsheet { position: relative; }
.gifsearch input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); margin: 6px 0 10px; }
.gifgrid { columns: 2 140px; column-gap: 6px; max-height: 56vh; overflow-y: auto; min-height: 120px; }
.gifgrid p { column-span: all; }
.gifpick { display: block; width: 100%; margin: 0 0 6px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #E6E6E2; cursor: pointer; break-inside: avoid; transition: transform .15s ease; }
.gifpick:hover, .gifpick:focus-visible { transform: scale(1.03); outline: 3px solid var(--blue); outline-offset: -3px; }
.gifpick img { display: block; width: 100%; height: auto; }
.giffoot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; min-height: 22px; }
.gifby { font-size: .72rem; color: var(--muted); letter-spacing: .04em; margin-left: auto; }

/* Admin: a private league's monthly competition (19 Sept 2026) */
.monthly { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.monthly.on { border-style: solid; border-color: var(--blue); background: var(--lblue-soft); }
.monthly .mtag { font: 700 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.monthly.on .mtag { color: var(--blue); }
.monthly .chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* GuffBot as a picture (19 Sept 2026; he was the 🤖 emoji). Sized in em so he matches the emoji he
   replaced and never outgrows the text or square he sits in. pointer-events off so the board's
   drag and tap logic still sees the square, not the picture. */
.gbimg { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; object-fit: contain; border: 0; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.sq .gbimg { display: block; width: 1.45em; height: 1.45em; vertical-align: 0; }
.mc .gbimg { display: block; width: 1.2em; height: 1.2em; vertical-align: 0; }
.guffbot .bot .gbimg, .welcome .wbot .gbimg, .robodance .robo .gbimg { display: block; vertical-align: 0; }
.welcome .wbot .gbimg { margin: 0 auto; }

/* ---------------------------------------------------------------- invite links (20 Sept 2026) */
.join { text-align: center; padding: 26px 18px; }
.join .lead { max-width: 38ch; margin: 8px auto 14px; }
.join h2 { margin: 6px 0 4px; }
.joinbot { width: 64px; height: 64px; margin: 0 auto 4px; }
.joinbot .gbimg { display: block; width: 64px; height: 64px; }
.sheet .joinbot { width: 52px; height: 52px; }
.sheet .joinbot .gbimg { width: 52px; height: 52px; }
.joinform { max-width: 320px; margin: 6px auto 0; text-align: left; }
.joinform .field { margin-bottom: 10px; }
.joinform input { width: 100%; font: inherit; font-size: 1.05rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); box-sizing: border-box; }
.joinform #jpin { letter-spacing: .25em; }
.join .btnrow { max-width: 320px; margin: 10px auto 0; }
.logindetails { background: var(--paper); border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.logindetails p { margin: 2px 0; }
.logindetails p.tiny { margin-bottom: 6px; }
.linkbox input { width: 100%; box-sizing: border-box; font: 500 .85rem/1.3 ui-monospace, Menlo, Consolas, monospace; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); margin: 6px 0 4px; }
.invitecard { border: 2px solid #2C8B85; background: linear-gradient(180deg, #F4FAF8, var(--card, #fff)); }
.invitecard h3 .tiny { font-weight: 400; margin-left: 4px; }
.invitecard.slim { border-width: 1px; padding-top: 10px; padding-bottom: 10px; }
.invitectl { display: flex; flex-direction: column; gap: 4px; background: var(--paper); border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
.tag.org { background: #2C8B85; color: #fff; font-size: .62rem; padding: 1px 6px; vertical-align: 1px; }
table.compact td.acts { white-space: normal; text-align: right; line-height: 1.7; }

/* The public home page (20 Sept 2026) ------------------------------------
   What anyone logged out sees: the game, a look at one, and "Request an invite". */
body.logged-out .bottomnav { display: none; }
.home { display: grid; gap: 14px; }
.hero { display: grid; gap: 20px; padding: 24px 18px 22px; text-align: center; }
.herobot { display: block; width: 64px; height: 64px; margin: 0 auto 8px; }
.pill { display: inline-block; font: 800 .72rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--green-soft); color: #2E7A2B; }
.pill.full { background: var(--bad-soft); color: #A34700; }
.hero h1 { font-size: clamp(1.65rem, 6.6vw, 2.25rem); line-height: 1.1; margin: 12px auto 10px; max-width: 17ch; }
.hero .lead { color: var(--muted); font-size: 1.02rem; margin: 0 auto 18px; max-width: 36ch; }
.herobtns .btn { padding: 14px 26px; font-size: 1.05rem; min-width: 230px; }
.herosmall { margin: 10px 0 0; }
.herologin { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.herologin .linkbtn { font-size: inherit; }
.heroshot { margin: 0 auto; width: min(100%, 330px); }
.heroshot img { display: block; width: 100%; height: auto; border-radius: 24px; border: 7px solid #1E1A17; box-shadow: 0 22px 44px -20px rgba(0,0,0,.5); background: var(--paper); }
.heroshot figcaption { font-size: .8rem; color: var(--muted); margin-top: 10px; }
@media (min-width: 700px) {
  .hero { grid-template-columns: 1fr 290px; align-items: center; text-align: left; padding: 30px 28px; gap: 30px; }
  .herobot { margin: 0 0 10px; }
  .hero h1, .hero .lead { margin-left: 0; }
  .heroshot { width: 290px; }
  .heroshot figcaption { text-align: center; }
}
.feats { display: grid; gap: 16px; margin-top: 14px; }
@media (min-width: 560px) { .feats { grid-template-columns: 1fr 1fr; gap: 18px 22px; } }
.feat { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.featic { width: 44px; height: 44px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.35rem; line-height: 1; }
.featic img { display: block; width: 30px; height: 30px; }
.feat h3 { margin: 1px 0 3px; }
.feat p { margin: 0; color: var(--muted); font-size: .92rem; }
.betasteps { margin: 12px 0 12px; padding-left: 1.4em; display: grid; gap: 8px; }
.betasteps li::marker { color: var(--blue); font-weight: 800; }
.howbeta > .tiny { margin: 0; }
.request { padding: 22px 18px; }
.request h2 { text-align: center; }
.request .lead { text-align: center; max-width: 40ch; margin: 6px auto 6px; }
.requestform { max-width: 420px; margin: 0 auto; }
.requestform .check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: .92rem; cursor: pointer; }
.requestform .check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--blue); }
.requestform .btnrow { margin-top: 4px; }
.request .tiny { text-align: center; margin: 10px 0 0; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.tsbox { margin-top: 12px; }
.tsbox:empty { display: none; }
.sentbot img { display: block; width: 56px; height: 56px; margin: 0 auto 6px; }
.homefoot { text-align: center; margin: 2px 12px 0; }
.howto li { margin-bottom: 8px; }

/* Admin: invite requests (20 Sept 2026) */
.reqcard .row h2 { margin: 0; }
.reqcard .lead { margin-top: 8px; }
.reqctl { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 4px 0 10px; }
.reqctl input { width: 4.2em; font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); margin: 0 4px; }
.reqcounts { margin: 0 0 6px; }
.reqrow { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.reqrow:first-child { border-top: 0; }
.reqwho b { font-size: 1rem; }
.reqwho a { color: var(--blue); word-break: break-all; }
.reqacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.reqacts .btn.small { padding: 6px 14px; }
@media (min-width: 620px) { .reqrow { grid-template-columns: 1fr auto; align-items: center; } .reqacts { justify-content: flex-end; } }
.nowrap { white-space: nowrap; }
.mailpv { margin: 12px 0 4px; font-size: .9rem; }
.mailpv summary { cursor: pointer; color: var(--blue); }
.mailpv pre { white-space: pre-wrap; font: .85rem/1.45 var(--body); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 6px 0 0; max-height: 34vh; overflow: auto; }
.sheet .check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: .92rem; cursor: pointer; }
.sheet .check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--blue); }