:root {
  --table-top: #3a8df5;
  --table-bottom: #1638a8;
  --navy: #10266e;
  --orange: #ff8a1e;
  --orange-light: #ffb04a;
  --orange-deep: #d9610a;
  --cream: #fff9ec;
  --cream-shade: #f4e8cf;
  --ink: #1b2a55;
  --sun: #ffd84d;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, var(--table-top), var(--table-bottom)) fixed;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

#app { position: relative; height: 100%; max-width: 560px; margin: 0 auto; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
}
.screen[hidden] { display: none; }
.grow { flex: 1; }

.bar { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; min-width: 0; }
.bar .title { font-size: 19px; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.round {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(16, 38, 110, 0.45); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18);
}
.round svg { width: 22px; height: 22px; fill: #fff; }

.pill {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 6px;
  border-radius: 18px; background: rgba(16, 38, 110, 0.5); font-size: 15px; min-width: 0; white-space: nowrap;
}
.coin {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #ffe680, #ffb300 70%); box-shadow: inset 0 0 0 2px #e08a00;
  position: relative;
}
.coin::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: #c96f00; font-style: normal; }
.heart {
  width: 28px; height: 26px; flex: none; display: grid; place-items: center; font-style: normal;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23ff4d5e' d='M12 21.2 2.6 11.9a5.9 5.9 0 0 1 8.3-8.3L12 4.7l1.1-1.1a5.9 5.9 0 0 1 8.3 8.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.heart b { font-size: 12px; line-height: 1; margin-top: -3px; }
.round.account { position: relative; }
.round.account.on::after {
  content: ""; position: absolute; right: 1px; top: 1px; width: 12px; height: 12px; border-radius: 50%;
  background: #35c46a; box-shadow: 0 0 0 2px #2a63d6;
}

/* what the page is, for screen readers: the game itself is drawn, not written */
.reader { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* home */
.fan { position: relative; width: 282px; height: 150px; margin-top: 5vh; flex: none; }
.mini {
  position: absolute; top: 14px; width: 84px; height: 114px; border-radius: 13px; background: var(--cream); color: var(--ink);
  display: grid; place-items: center; text-align: center; font-size: 15px; padding: 6px; box-shadow: 0 8px 18px rgba(8, 20, 70, 0.3);
  line-height: 1.1;
}
.mini span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mini span i { font-style: normal; font-weight: 400; font-size: 34px; line-height: 1; }
.mini.left { left: 8px; transform: rotate(-12deg); }
.mini.right { right: 8px; transform: rotate(12deg); }
.mini.mid { left: 99px; top: 0; box-shadow: 0 0 0 3px var(--orange), 0 8px 18px rgba(8, 20, 70, 0.3); z-index: 1; }
.wordmark { width: min(76vw, 310px); height: auto; margin-top: 3vh; }
.sub { margin: 4px 0 0; color: var(--sun); letter-spacing: 0.42em; padding-left: 0.42em; font-size: 19px; }
.tagline { margin: 10px 0 0; font-size: 16px; font-weight: 700; opacity: 0.88; text-align: center; }
.done { margin: 0 0 14px; padding: 8px 16px; border-radius: 99px; background: rgba(16, 38, 110, 0.5); color: var(--sun); font-size: 14px; }
.done[hidden] { display: none; }

.chunky {
  display: grid; place-items: center; border-radius: 18px; color: #fff; text-align: center;
  background: linear-gradient(180deg, var(--orange-light), var(--orange));
  box-shadow: 0 5px 0 var(--orange-deep), inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
  padding: 0 14px; min-height: 52px; font-size: 18px;
  transition: transform 0.08s, box-shadow 0.08s;
}
.chunky:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--orange-deep), inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.chunky.blue { background: linear-gradient(180deg, #6aadff, #4f9bff); box-shadow: 0 5px 0 #1d4dbf, inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.chunky.blue:active { box-shadow: 0 1px 0 #1d4dbf, inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.chunky.green { background: linear-gradient(180deg, #52d683, #35c46a); box-shadow: 0 5px 0 #1f9a4c, inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.chunky.red { background: linear-gradient(180deg, #ff7a7a, #f04f5c); box-shadow: 0 5px 0 #b92f3c, inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.chunky.apple { background: #000; box-shadow: 0 5px 0 #3a3f52; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
.chunky.apple:active { box-shadow: 0 1px 0 #3a3f52; }
.chunky.play { width: 250px; min-height: 76px; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.chunky.play b { font-size: 28px; line-height: 1; }
.chunky.play small { font-size: 14px; font-weight: 700; opacity: 0.92; line-height: 1; }
.pair { display: flex; gap: 12px; width: 100%; max-width: 420px; margin: 18px 0 6px; }
.pair .chunky { flex: 1; font-size: 15px; min-height: 48px; }

/* game */
/* the cards are stacked by z-index; kept to the board, so a sheet over the table covers them */
#board { position: relative; width: 100%; flex: 1; margin-top: 8px; touch-action: none; isolation: isolate; z-index: 0; }
.moves {
  position: absolute; left: 0; top: 0; width: 76px; height: 84px; border-radius: 16px; background: rgba(16, 38, 110, 0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.moves small { font-size: 10px; opacity: 0.75; letter-spacing: 0.04em; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moves b { font-size: 32px; line-height: 1; }

.slot {
  position: absolute; border-radius: 11px; border: 2px dashed rgba(255, 255, 255, 0.28); background: rgba(16, 38, 110, 0.22);
}
.slot.stock { display: grid; place-items: center; }
.slot.stock svg { width: 26px; height: 26px; fill: rgba(255, 255, 255, 0.45); }
.slot.glow, .card.glow { box-shadow: 0 0 0 3px var(--sun), 0 0 18px 4px rgba(255, 216, 77, 0.8); }

.tag {
  position: absolute; height: 22px; border-radius: 11px; padding: 0 7px; background: rgba(16, 38, 110, 0.6); color: #fff;
  font-size: 10px; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; overflow: hidden;
  transition: background 0.25s;
}
.tag span { overflow: hidden; text-overflow: ellipsis; }
.tag.stacked { flex-direction: column; gap: 0; line-height: 1.08; }
.tag.stacked span { max-width: 100%; }
.tag.known { color: var(--ink); }
.tag.pop { animation: pop 0.5s; }
@keyframes pop { 40% { transform: scale(1.18); } }

.card {
  position: absolute; left: 0; top: 0; border-radius: 11px; background: var(--cream); color: var(--ink);
  box-shadow: 0 2px 5px rgba(8, 20, 70, 0.28), inset 0 0 0 2px var(--edge, var(--cream-shade));
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1), opacity 0.25s;
  display: flex; flex-direction: column; align-items: center; overflow: hidden; cursor: pointer;
  will-change: transform;
}
.card .name { width: 100%; text-align: center; padding: 1px 3px 0; font-size: 0.84em; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .face { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; padding: 0 3px 4px; text-align: center; line-height: 1.08; overflow-wrap: anywhere; }
.card .face .emoji { font-size: 1.9em; line-height: 1; font-weight: 400; }
.card.covered .face { visibility: hidden; }
.card:not(.covered) .name { display: none; }
.card.down {
  background: repeating-linear-gradient(45deg, #ff9d3a 0 6px, #ff8a1e 6px 12px); box-shadow: 0 2px 5px rgba(8, 20, 70, 0.28), inset 0 0 0 3px #fff3dc;
  cursor: default;
}
.card.down > * { display: none; }
.card.selected { box-shadow: 0 0 0 3px var(--orange), 0 8px 16px rgba(8, 20, 70, 0.35); }
.card.dragging { transition: none; box-shadow: 0 12px 22px rgba(8, 20, 70, 0.4), inset 0 0 0 2px var(--cream-shade); }
.card.gone { opacity: 0; pointer-events: none; }
.card.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { margin-left: -6px; } 40%, 80% { margin-left: 6px; } }
.card .lens {
  position: absolute; left: 3px; right: 3px; bottom: 3px; border-radius: 7px; font-size: 9px; padding: 2px 3px; text-align: center;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.toast {
  width: 100%; min-height: 44px; margin: 6px 0; padding: 8px 14px; border-radius: 14px; background: rgba(16, 38, 110, 0.6);
  font-size: 14px; font-weight: 700; text-align: center; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s;
}
.toast:empty { opacity: 0; }

.boosters { display: flex; gap: 26px; margin-top: 2px; }
.booster { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; opacity: 0.95; }
.booster i {
  position: relative; width: 58px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--orange-light), var(--orange)); box-shadow: 0 4px 0 var(--orange-deep);
}
.booster:active i { transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-deep); }
.booster svg { width: 24px; height: 24px; fill: #fff; }
.booster em {
  position: absolute; top: -7px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--cream);
  color: var(--ink); font-size: 12px; font-style: normal; display: grid; place-items: center; white-space: nowrap;
}

/* sheets */
.veil { position: fixed; inset: 0; background: rgba(8, 16, 56, 0.62); z-index: 20; }
.sheet {
  position: absolute; left: 22px; right: 22px; top: 50%; transform: translateY(-50%); z-index: 21; max-height: 88%; overflow: auto;
  background: var(--cream); color: var(--ink); border-radius: 28px; padding: 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.veil[hidden], .sheet[hidden] { display: none; }
.sheet h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.sheet p { margin: 0; font-size: 15px; font-weight: 700; opacity: 0.72; }
.sheet .big { font-size: 46px; line-height: 1; font-weight: 400; }
.sheet .reward { display: flex; align-items: center; gap: 8px; padding: 9px 22px; border-radius: 18px; background: rgba(255, 216, 77, 0.3); box-shadow: inset 0 0 0 2.5px var(--sun); font-size: 28px; }
.sheet .reward .coin { width: 32px; height: 32px; }
.sheet .chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.sheet .chips span { padding: 5px 11px; border-radius: 99px; font-size: 13px; }
.sheet .label { font-size: 11px; opacity: 0.5; letter-spacing: 0.04em; }
.sheet .row { display: flex; gap: 10px; width: 100%; }
.sheet .row .chunky { flex: 1; }
.sheet .row .chunky.square { flex: none; width: 58px; }
.sheet .chunky svg { width: 22px; height: 22px; fill: #fff; }
.sheet .steps { text-align: start; display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.sheet .cross { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(27, 42, 85, 0.08); }
.sheet .cross svg { width: 16px; height: 16px; fill: var(--ink); opacity: 0.55; }
.sheet .steps b { display: block; font-size: 16px; }
.sheet .steps span { font-size: 14px; font-weight: 700; opacity: 0.72; }
.sheet .langs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.sheet .langs button { padding: 11px 8px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px var(--cream-shade); font-size: 15px; color: var(--ink); }
.sheet .langs button.on { box-shadow: inset 0 0 0 3px var(--orange); }
.sheet .close { align-self: stretch; }
.sheet .chunky.apple svg { width: 19px; height: 19px; margin-top: -3px; }
.sheet .email { font-size: 15px; overflow-wrap: anywhere; }
.sheet .plain { font-size: 13px; font-weight: 700; opacity: 0.6; text-decoration: underline; padding: 6px 10px; }
.sheet .warn { color: #d43d4c; opacity: 1; }

/* small phones */
@media (max-width: 350px) {
  .screen { padding-left: 10px; padding-right: 10px; }
  .bar { gap: 5px; }
  .pill { height: 32px; padding: 0 8px 0 4px; font-size: 13px; gap: 4px; }
  .round { width: 38px; height: 38px; }
  .round svg { width: 19px; height: 19px; }
  .sheet { left: 12px; right: 12px; padding: 18px 14px; }
}
@media (max-height: 640px) {
  .fan { transform: scale(0.72); margin: -14px 0 -22px; }
  .wordmark { width: min(60vw, 230px); margin-top: 0; }
  .sub { font-size: 15px; }
  .tagline { margin-top: 4px; font-size: 14px; }
  .done { margin-bottom: 8px; padding: 6px 14px; font-size: 13px; }
  .chunky.play { min-height: 64px; }
  .pair { margin-top: 12px; }
  .sheet { gap: 8px; padding-top: 16px; padding-bottom: 16px; max-height: 94%; }
  .sheet .big { font-size: 32px; }
  .sheet h2 { font-size: 20px; }
  .sheet .reward { font-size: 22px; padding: 6px 18px; }
}