/* Wortie — the daily beer word. ONE SCREEN WHILE YOU PLAY (Oct 4 2026, Chris on his phone: an 8-letter day pushed
   the keyboard off the bottom and he scrolled mid-game). The page is a full-height column: slim arcade bar, a
   compact header (Boss · title + level · pint + ?), the week row, the board (sized by JS to the height that's
   left), and the keyboard pinned at the bottom clear of the home bar. Results and How to Play are sheets.
   Rides the arcade shell's tokens; the arcade is one light world. Tiles: purple = right spot, coral = wrong
   spot, dark = miss (never the green/yellow of the game it's descended from). */
.wt-page { min-height: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.wt-page #chrome { flex: none; }
/* a slimmer arcade bar on this page: the board needs the height more than the bar needs its padding */
.wt-page .app-head { position: static; padding: calc(6px + env(safe-area-inset-top)) 12px 6px; }
.wt-page .app-head .back, .wt-page .app-head .install { min-height: 38px; font-size: 14px; padding: 0 12px; }
.wt-page .app-head .refresh { min-width: 38px; }
.wt-page .app-head .brand img { width: 28px; height: 28px; }
/* on a phone the site link wraps to two lines and costs the board a row; All games stays */
@media (max-width: 560px) { .wt-page .app-head .site { display: none; } }

.wt { --hit: var(--purple); --near: var(--coral); --miss: #4a3d52; --key: #ece2f0; --kmiss: #5b4e63; --kmiss-ink: #d9cfdd;
  --empty-b: #d9c9df; --ts: 48px;
  flex: 1; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; padding: 8px 12px 0;
  display: flex; flex-direction: column; gap: 8px; }

/* header: Boss · WORTIE + level line · pint + ? */
.wt-top { flex: none; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; }
.wt-boss { height: calc(56px * var(--bs, 1)); width: 52px; align-self: end; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; }
.wt-title { min-width: 0; text-align: center; }
.wt-mark { margin: 0; font: 400 34px/.9 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .04em; color: var(--purple); }
.wt-t-accent { color: var(--coral); }
.wt-daylabel { margin-top: 3px; font: 500 13px/1.25 'Oswald', sans-serif; color: var(--gray); letter-spacing: .02em; }
.wt-daylabel b { color: var(--purple); font-weight: 600; }
.wt-tools { display: flex; align-items: center; gap: 8px; }
.wt-pint { width: 26px; height: 39px; }
#pintBeer, #pintFoam { transition: y 1.2s cubic-bezier(.2,.8,.2,1), fill .3s; }
.wt-icon { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--purple); background: #fff; color: var(--purple);
  font: 600 18px/1 'Oswald', sans-serif; cursor: pointer; display: grid; place-items: center; padding: 0; }

/* the week: seven compact chips, level + dots (the Boss is the LEVEL, never the word) */
.wt-week { flex: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wt-wd { background: #fff; border: 2px solid var(--line); border-radius: 9px; padding: 4px 2px 5px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; position: relative; }
.wt-wd em { font: 600 11px/1 'Oswald', sans-serif; font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--purple); white-space: nowrap; }
.wt-wd .dots { display: flex; gap: 2px; justify-content: center; align-items: center; height: 6px; font: 500 8px/1 'Oswald', sans-serif; color: var(--gray); white-space: nowrap; }
.wt-wd .dots u { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--gray); opacity: .65; }
.wt-wd.today { border-color: var(--purple); background: #f6ecf9; }
.wt-wd.won { background: var(--purple); border-color: var(--purple); }
.wt-wd.won em { color: #fff; } .wt-wd.won .dots u { background: #fff; opacity: .8; }
.wt-wd.lost { background: #4a3d52; border-color: #4a3d52; }
.wt-wd.lost em { color: #fff; } .wt-wd.lost .dots u { background: #fff; opacity: .5; }
.wt-wd.holiday:not(.won):not(.lost) { border-color: var(--coral); background: #fff1f0; }
.wt-wd.holiday em { color: var(--coral-ink); }
.wt-wd.future { opacity: .5; }

/* the board fills the space between the week and the keyboard */
.wt-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.wt-board { display: grid; gap: 5px; }
.wt-row { display: grid; gap: 5px; }
.wt-t { width: var(--ts); height: var(--ts); display: grid; place-items: center; background: #fff; border: 2px solid var(--empty-b); border-radius: 7px;
  font: 400 calc(var(--ts) * .62)/1 'Bebas Neue', 'Oswald', sans-serif; color: var(--dark); user-select: none; }
.wt-t.filled { border-color: var(--gray); animation: pop .1s; }
.wt-t.hit { background: var(--hit); border-color: var(--hit); color: #fff; }
.wt-t.near { background: var(--near); border-color: var(--near); color: #fff; }
.wt-t.miss { background: var(--miss); border-color: var(--miss); color: #fff; }
.wt-t.flip { animation: flip .4s ease both; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes pop { 50% { transform: scale(1.08); } }
.wt-row.shake { animation: shake .32s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.wt-row.pending .wt-t { animation: pour 0.9s ease-in-out infinite; border-color: var(--purple); }
@keyframes pour { 50% { background: #f3e6f7; } }
.wt-boss.cheer { animation: cheer .5s var(--ease) 2; }
@keyframes cheer { 50% { transform: translateY(-6px) rotate(-5deg); } }
.wt-boss.sweat { animation: sweat .6s ease-in-out 3; }
@keyframes sweat { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.wt-boss.nod { animation: nod .35s ease; }
@keyframes nod { 50% { transform: translateY(-3px); } }

/* the toast floats over the top of the board, so it never takes space from it */
.wt-toast { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); max-width: 92%; text-align: center; pointer-events: none;
  font: 600 15px 'Oswald', sans-serif; color: #fff; background: rgba(42,23,48,.88); border-radius: 999px; padding: 6px 14px; letter-spacing: .02em; }
.wt-toast:empty { display: none; }

/* keyboard pinned at the bottom, clear of the iPhone home bar */
.wt-bottom { flex: none; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.wt-kb { display: flex; flex-direction: column; gap: 6px; user-select: none; touch-action: manipulation; }
.wt-kb[hidden] { display: none; }
.wt-kr { display: flex; gap: 5px; justify-content: center; }
.wt-k { flex: 1 1 0; max-width: 44px; height: 52px; border: 0; border-radius: 7px; background: var(--key); color: var(--dark); font: 600 16px 'Oswald', sans-serif; cursor: pointer; padding: 0; }
.wt-k.wide { max-width: 68px; flex: 1.5 1 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.wt-k.hit { background: var(--hit); color: #fff; }
.wt-k.near { background: var(--near); color: #fff; }
.wt-k.miss { background: var(--kmiss); color: var(--kmiss-ink); }
.wt-k:active { transform: scale(.96); }
.wt-k:focus-visible, .wt-icon:focus-visible, .wt-results-btn:focus-visible, .wt-close:focus-visible, .wt-wd:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.wt-results-btn { width: 100%; height: 56px; border: 0; border-radius: 12px; background: var(--purple); color: #fff; font: 600 18px 'Oswald', sans-serif; letter-spacing: .04em; cursor: pointer; box-shadow: var(--sh-2); }
.wt-results-btn[hidden] { display: none; }

/* sheets: results + how to play */
.wt-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.wt-sheet[hidden] { display: none; }
.wt-scrim { position: absolute; inset: 0; background: rgba(42,23,48,.5); }
.wt-panel { position: relative; width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--cream); border-radius: 20px 20px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: var(--sh-3);
  display: flex; flex-direction: column; gap: 18px; animation: up .28s var(--ease); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.wt-close { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(112,32,130,.1); color: var(--purple); font: 400 26px/1 sans-serif; cursor: pointer; }
.wt-panel h2 { font: 400 28px/1 'Bebas Neue', 'Oswald', sans-serif; letter-spacing: .04em; margin: 0 0 8px; color: var(--purple); }
.wt-kicker { font: 600 12px 'Oswald', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-ink); }
.wt-answer { border-left: 4px solid var(--purple); padding-left: 12px; padding-right: 40px; }
.wt-word { font: 400 44px/1 'Bebas Neue', 'Oswald', sans-serif; letter-spacing: .08em; color: var(--purple); }
.wt-answer p { margin: 6px 0 0; line-height: 1.4; }
.wt-share { font: 500 15px/1.35 ui-monospace, Consolas, monospace; white-space: pre; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 12px 0; overflow-x: auto; }
.wt-next { margin: 10px 0 0; text-align: center; color: var(--gray); font: 500 14px 'Oswald', sans-serif; }
.wt-next b { color: var(--dark); font-variant-numeric: tabular-nums; }
.wt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.wt-stats[hidden] { display: none; }
.wt-stats b { display: block; font: 400 30px/1 'Bebas Neue', 'Oswald', sans-serif; color: var(--purple); }
.wt-stats span { font-size: 12px; color: var(--gray); }
.wt-join[hidden], .wt-done[hidden] { display: none; }
.wt-join label { display: block; font: 500 14px 'Oswald', sans-serif; margin: 10px 0 4px; }
.wt-join input { width: 100%; padding: 11px 12px; font-size: 16px; font-family: inherit; background: #fff; color: var(--dark); border: 2px solid var(--cream-dark); border-radius: 10px; }
.wt-join input:focus { outline: none; border-color: var(--purple); }
#jCode { font-size: 24px; letter-spacing: 8px; text-align: center; }
.wt-join form[hidden] { display: none; }
.wt-join .btn-row { margin-top: 12px; }
.wt-msg { margin-top: 10px; min-height: 20px; font-size: 15px; }
.wt-msg.err { color: var(--coral-dark); } .wt-msg.ok { color: var(--purple); }
.wt-taplist tr.me td { color: var(--purple); font-weight: 700; }
.wt-panel footer.ar-foot { margin: 0 -18px calc(-22px - env(safe-area-inset-bottom)); }
.wt-how p { margin: 0; line-height: 1.5; }
.wt-howboss { position: absolute; right: 56px; top: 10px; height: 64px; width: auto; transform: rotate(-12deg); animation: drift 6s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(-12deg); } 50% { transform: translate(-4px, -6px) rotate(-5deg); } }
.wt-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.wt-legend span { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wt-legend .wt-t { --ts: 28px; font-size: 18px; }

/* TEST WEEK (a private ?test= link): every day is playable and replayable; nothing counts */
.wt-testbar { flex: none; background: #fff4d6; border: 2px dashed #e0a83a; border-radius: 10px; padding: 3px 6px 3px 10px; font: 500 12px 'Oswald', sans-serif; color: var(--dark); display: flex; align-items: center; gap: 4px 8px; }
.wt-testbar[hidden] { display: none; }
.wt-testbar button { margin-left: auto; font: 600 12px 'Oswald', sans-serif; background: #fff; color: var(--purple); border: 2px solid var(--purple); border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.wt.test .wt-wd { cursor: pointer; }
.wt-test .wt-next { display: none; }
.wt.test .wt-wd.future { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .wt-t.flip, .wt-row.shake, .wt-boss.cheer, .wt-boss.sweat, .wt-boss.nod, .wt-t.filled, .wt-row.pending .wt-t, .wt-panel, .wt-howboss { animation: none; }
  #pintBeer, #pintFoam { transition: none; }
}
/* short phones (SE, small Androids): tighter keys and header so the board keeps its rows */
@media (max-height: 700px) {
  .wt-k { height: 44px; } .wt-kb { gap: 5px; }
  .wt-mark { font-size: 28px; } .wt-boss { height: calc(46px * var(--bs, 1)); }
  .wt { gap: 6px; padding-top: 6px; }
}
@media (min-width: 700px) and (min-height: 820px) { .wt-k { height: 56px; } .wt-mark { font-size: 40px; } .wt-boss { height: calc(66px * var(--bs, 1)); width: 60px; } }