:root { font-size: clamp(16px, calc(100vw / 25), 20px); --felt: #153e36; --paper: #f5f2ea; --ink: #1f2a24; --muted: #66706a; --gold: #e6c187; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink);
  font: 1rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px, env(safe-area-inset-left));
}
body, body * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}
img, a { -webkit-user-drag: none; }
main { max-width: 640px; margin: 0 auto; padding: calc(24rem / 16) 0; }
h1 { font-family: Georgia, serif; font-weight: 500; font-size: calc(28rem / 16); margin: 0 0 calc(16rem / 16); }
.status { color: var(--muted); }

.games { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(12rem / 16); }
.game {
  display: flex; align-items: center; gap: calc(16rem / 16); padding: calc(14rem / 16) calc(16rem / 16); border-radius: calc(14rem / 16);
  background: var(--felt); color: #fff; text-decoration: none; font-size: calc(19rem / 16); font-weight: 600;
  box-shadow: 0 calc(2rem / 16) calc(6rem / 16) rgb(0 0 0 / .15);
}
.game:active { transform: scale(.98); }
.game img { width: calc(56rem / 16); height: calc(56rem / 16); border-radius: calc(12rem / 16); flex: none; }
.game .title { flex: 1; }
/* Separate targets leave a visible gap between solo play and the online room. */
.games li { display: flex; gap: calc(8rem / 16); }
.games li .game { flex: 1; min-width: 0; }
.online {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2rem / 16); width: calc(76rem / 16); min-height: calc(44rem / 16); flex: none;
  border-radius: calc(14rem / 16); border: calc(2rem / 16) solid var(--felt); color: var(--felt); text-decoration: none; font-size: calc(13rem / 16); font-weight: 600;
}
.online svg { width: calc(30rem / 16); height: calc(30rem / 16); }
.online:active { transform: scale(.98); }
.online[aria-disabled="true"] { border-color: var(--muted); color: var(--muted); cursor: default; }

/* The title row: the start screen's menu (or the history page's way back). */
.top { display: flex; align-items: center; gap: calc(8rem / 16); margin: 0 0 calc(16rem / 16); }
.top h1 { flex: 1; margin: 0; }
.icon-button { display: inline-grid; place-items: center; width: calc(44rem / 16); height: calc(44rem / 16); border-radius: calc(10rem / 16); color: var(--ink); cursor: pointer; list-style: none; }
.icon-button::-webkit-details-marker { display: none; }
[dir="rtl"] #back svg { transform: scaleX(-1); }
.menu { position: relative; order: 2; }
.menu[open] > .icon-button { background: #e6e1d3; }
.menu-content { position: absolute; inset-inline-end: 0; top: calc(48rem / 16); z-index: 5; min-width: calc(200rem / 16); padding: calc(6rem / 16); border-radius: calc(12rem / 16); background: #fff; box-shadow: 0 calc(6rem / 16) calc(20rem / 16) rgb(0 0 0 / .18); }
.menu-content a { display: flex; align-items: center; gap: calc(10rem / 16); padding: calc(10rem / 16) calc(12rem / 16); border-radius: calc(8rem / 16); color: var(--ink); text-decoration: none; font-weight: 600; }
.menu-content a:hover, .menu-content a:focus-visible { background: #f0ece0; }
.faq-list { display: grid; gap: calc(10rem / 16); }
.faq-list details { min-width: 0; border-radius: calc(12rem / 16); background: #fff; box-shadow: 0 calc(1rem / 16) calc(4rem / 16) rgb(0 0 0 / .1); }
.faq-list summary { display: flex; align-items: center; min-height: calc(52rem / 16); padding: calc(12rem / 16) calc(16rem / 16); cursor: pointer; font-weight: 600; }
.faq-list summary:focus-visible { outline: calc(3rem / 16) solid var(--felt); outline-offset: calc(2rem / 16); }
.faq-list p { margin: 0; padding: 0 calc(16rem / 16) calc(16rem / 16); overflow-wrap: anywhere; }
.menu-content button { display: flex; align-items: center; gap: calc(10rem / 16); width: 100%; padding: calc(10rem / 16) calc(12rem / 16); border: 0; border-radius: calc(8rem / 16); background: none; color: var(--muted); font: inherit; font-weight: 600; text-align: start; cursor: pointer; }
.menu-content button:hover, .menu-content button:focus-visible { background: #f0ece0; }
.kit-account p { margin: calc(6rem / 16) calc(12rem / 16); max-width: calc(240rem / 16); color: var(--muted); font-size: calc(14rem / 16); }

/* The history: one row per game played on this device. */
.played { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(8rem / 16); }
.played-game {
  display: flex; align-items: center; gap: calc(12rem / 16); padding: calc(10rem / 16) calc(12rem / 16); border-radius: calc(12rem / 16);
  background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 calc(1rem / 16) calc(4rem / 16) rgb(0 0 0 / .1);
}
.played-game img { width: calc(40rem / 16); height: calc(40rem / 16); border-radius: calc(9rem / 16); flex: none; }
.played-game svg { flex: none; color: var(--muted); }
.played-game[data-finished="true"] svg:last-child { color: #b88a3a; }
.played-text { flex: 1; display: grid; }
.played-text .title { font-weight: 600; }
.played-text time { color: var(--muted); font-size: calc(14rem / 16); font-variant-numeric: tabular-nums; }

.language-control { display: flex; align-items: center; justify-content: space-between; gap: calc(8rem / 16); padding: calc(8rem / 16); font-size: calc(13rem / 16); }
.language-control select { min-height: calc(36rem / 16); max-width: calc(150rem / 16); border: calc(1rem / 16) solid #d3dacd; border-radius: calc(6rem / 16); background: #fffdf7; color: #234739; }

/* One compact field, matching the existing paper/felt controls at phone width. */
.game-search { display: grid; gap: calc(4rem / 16); margin: 0 0 calc(14rem / 16); font-size: calc(14rem / 16); font-weight: 600; }
.game-search input {
  width: 100%; min-width: 0; min-height: calc(44rem / 16); padding: calc(9rem / 16) calc(12rem / 16);
  border: calc(1rem / 16) solid var(--muted); border-radius: calc(10rem / 16); background: #fff;
  color: var(--ink); font: inherit; font-size: calc(16rem / 16);
}
.game-search input:focus-visible { outline: calc(2rem / 16) solid var(--felt); outline-offset: calc(2rem / 16); }

/* NAV-02: one navigation target; stable state column while peeks finish. */
.history-button { display: flex; align-items: center; gap: calc(5rem / 16); min-height: calc(44rem / 16);
  padding: calc(6rem / 16); color: var(--felt); font-weight: 600; text-decoration: none; }
.history-button svg { flex: none; }
.top h1 { min-width: 0; }
.played-game { min-height: calc(64rem / 16); gap: calc(8rem / 16); padding: calc(8rem / 16); }
.played-text { min-width: 0; }
.played-text .title { font-size: calc(15rem / 16); overflow-wrap: anywhere; }
.played-meta { display: flex; align-items: center; gap: calc(5rem / 16); }
.played-meta svg { width: calc(18rem / 16); height: calc(18rem / 16); }
.played-text time { font-size: calc(12rem / 16); }
.played-state { display: flex; align-items: center; gap: calc(4rem / 16); width: calc(86rem / 16); flex: none;
  color: var(--felt); font-size: calc(13rem / 16); font-weight: 600; }
.played-state svg { width: calc(22rem / 16); height: calc(22rem / 16); color: inherit; }
.played-game[data-finished="true"] .played-state { color: #8b682d; }

/* Static count at the far corner, clear of the history clock and its hands. */
.history-button { position: relative; }
#history-badge { position: absolute; top: calc(-3rem / 16); inset-inline-end: calc(-4rem / 16); width: calc(22rem / 16); height: calc(22rem / 16);
  border-radius: 50%; background: #b52d36; color: #fff; text-align: center;
  font-size: calc(11rem / 16); line-height: calc(22rem / 16); font-weight: 700; }

/* A single Delete control is under each sliding row, also reachable by Tab. */
.history-row { --delete-width: calc(88rem / 16); position: relative; overflow: hidden; border-radius: calc(12rem / 16); touch-action: pan-y; }
.history-row .played-game { position: relative; z-index: 1; touch-action: pan-y; user-select: none; }
.history-row.delete-open .played-game { transform: translateX(calc(-1 * var(--delete-width))); }
[dir="rtl"] .history-row.delete-open .played-game { transform: translateX(var(--delete-width)); }
.row-delete { position: absolute; inset-block: 0; inset-inline-end: 0; width: var(--delete-width); min-height: calc(44rem / 16);
  opacity: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2rem / 16);
  border: 0; border-radius: 0 calc(12rem / 16) calc(12rem / 16) 0; background: #b52d36; color: white;
  font: inherit; font-size: calc(13rem / 16); font-weight: 600; cursor: pointer; }
.row-delete svg { width: calc(24rem / 16); height: calc(24rem / 16); }
[dir="rtl"] .row-delete { border-radius: calc(12rem / 16) 0 0 calc(12rem / 16); }
.delete-open .row-delete, .swiping .row-delete { opacity: 1; }
.row-delete, #undo-button { touch-action: manipulation; }
.row-delete:focus-visible, .played-game:focus-visible { outline: calc(3rem / 16) solid var(--gold); outline-offset: calc(-3rem / 16); }
#undo-toast { position: fixed; z-index: 10; bottom: calc(calc(16rem / 16) + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); width: calc(100% - calc(32rem / 16)); max-width: 640px;
  display: flex; align-items: center; justify-content: space-between; gap: calc(16rem / 16);
  padding: calc(8rem / 16) calc(12rem / 16) calc(8rem / 16) calc(20rem / 16); border-radius: calc(12rem / 16); background: var(--felt); color: white;
  box-shadow: 0 calc(2rem / 16) calc(8rem / 16) rgb(0 0 0 / .2); }
#undo-toast[hidden] { display: none; }
#undo-button { min-height: calc(44rem / 16); min-width: calc(64rem / 16); border: calc(1rem / 16) solid var(--gold); border-radius: calc(8rem / 16);
  background: transparent; color: var(--gold); padding: calc(8rem / 16) calc(12rem / 16); font: inherit; font-weight: 600; cursor: pointer; }
.played { padding-bottom: calc(80rem / 16); }