/* WordSwipe: the card stack, fuse and vote buttons. Everything else is in shared/core.css. */
:root { --brand: var(--teal); --brand-text: var(--teal-text); --on-brand: var(--on-teal); }

/* home logo: three fanned cards */
#logo { position: relative; width: 92px; height: 112px; margin-bottom: 8px; }
#logo i {
  position: absolute; inset: 0; border-radius: 14px; background: var(--grain), var(--stock); box-shadow: inset 0 0 0 1px var(--hair), var(--lift);
  display: grid; place-items: center; font: italic 600 22px var(--display); color: var(--ink);
  animation: fan .5s var(--ease) both;
}
#logo i:nth-child(1) { background: var(--speck), var(--pink); box-shadow: 2px 3px 0 var(--reg); --r: -16deg; --x: -18px; }
#logo i:nth-child(2) { background: var(--speck), var(--teal); box-shadow: 2px 3px 0 var(--reg); --r: 14deg; --x: 18px; }
#logo i { transform: translateX(var(--x, 0)) rotate(var(--r, 0deg)); }
@keyframes fan { from { transform: none; opacity: 0; } }

#btn-unlimited b { font-size: 17px; }

/* ---------- game ---------- */
#game { gap: 10px; }
#clock { font-family: var(--display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: end; display: inline-block; }
.bar-end { position: relative; }
.minus {
  position: absolute; inset-inline-end: 52px; top: 100%; font-weight: 700; color: var(--red-text);
  animation: drop .9s ease-out both; pointer-events: none;
}
@keyframes drop { from { opacity: 1; transform: translateY(-6px); } to { opacity: 0; transform: translateY(14px); } }

.fuse { width: 100%; height: 6px; background: radial-gradient(circle, var(--dot) .9px, transparent 1.25px) 0 0 / 4px 4px; }
.fuse i { position: relative; display: block; height: 100%; background: var(--speck), var(--brand); transition: background-color .3s; }
.hurry .fuse i { background: var(--red); }
/* time running low: the burning end of the fuse spits sparks */
.hurry .fuse i::after {
  content: ''; position: absolute; inset-inline-end: -4px; top: -3px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, var(--sun) 0 2px, transparent 2.5px),
    conic-gradient(from 20deg, var(--sun) 0 8%, transparent 0 25%, var(--orange) 0 31%, transparent 0 50%, var(--sun) 0 56%, transparent 0 75%, var(--orange) 0 81%, transparent 0);
  mask: radial-gradient(circle, #000 55%, transparent 72%);
  animation: spark .28s steps(3) infinite;
}
@keyframes spark { 0% { transform: scale(.7) rotate(0); } 50% { transform: scale(1.25) rotate(50deg); } 100% { transform: scale(.85) rotate(110deg); } }
.hurry #clock { color: var(--red-text); }

.subject { margin: 8px 0 0; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.subject small { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.subject b { font-size: clamp(24px, calc(6.5 * var(--vw)), 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }

.stack {
  position: relative; flex: 1; width: min(340px, 100%); min-height: 200px; max-height: 440px; margin: 10px 0 18px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.card {
  --dx: 0px; --lean: 0; --depth: 0;
  position: absolute; inset: 0; container-type: inline-size;
  display: grid; place-items: center; padding: 20px; text-align: center; overflow-wrap: anywhere;
  border-radius: 24px; background: var(--grain), var(--stock);
  box-shadow: inset 0 0 0 1px var(--hair), var(--float);
  font-family: var(--display); font-variation-settings: 'SOFT' 60;
  font-size: min(48px, calc(190cqi * var(--cq, 1) / (var(--len) + 2))); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1;
  transform: translate(var(--dx), calc(var(--depth) * 12px)) rotate(calc(var(--lean) * 14deg)) scale(calc(1 - var(--depth) * .05));
  transition: transform .25s var(--ease), opacity .25s;
  opacity: calc(1 - var(--depth) * .25);
  cursor: grab;
}
.card.held { transition: none; cursor: grabbing; }
/* the next card nudges up off the deck as the one on top flies (translate, so it adds to the depth transform) */
.card.up { animation: nudge .26s var(--ease); }
@keyframes nudge { 45% { translate: 0 -7px; } }
.card::before, .card::after {
  position: absolute; top: 22px; padding: 5px 12px; border: 2px solid; border-radius: 8px;
  font: 700 15px Inter, Heebo, sans-serif; letter-spacing: .16em; mix-blend-mode: var(--blend);
}
/* rubber stamps, inked as you lean (game.js puts the words, translated, in data-no / data-yes).
   Swiping is physical in every language, right = fits, so the stamps and vote buttons don't mirror. */
.card::before { content: attr(data-no); right: 20px; color: var(--pink-text); transform: rotate(12deg); opacity: calc(var(--lean) * -1.5); }
.card::after { content: attr(data-yes); left: 20px; color: var(--teal-text); transform: rotate(-12deg); opacity: calc(var(--lean) * 1.5); }
.card.gone { pointer-events: none; animation: fly .45s ease-in forwards; }
.card.right { background: var(--speck), var(--teal); color: var(--on-teal); }
.card.wrong { background: var(--speck), var(--red); color: var(--on-red); }
@keyframes fly { to { transform: translate(calc(var(--dir) * calc(110 * var(--vw))), -40px) rotate(calc(var(--dir) * 30deg)); opacity: .6; } }

.answer { direction: ltr; display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; }
.vote {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 0;
  box-shadow: 2px 3px 0 var(--reg); transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.vote svg { width: 32px; height: 32px; stroke-width: 2.4; }
.vote.no { background: var(--speck), var(--pink); color: var(--on-pink); }
.vote.yes { background: var(--speck), var(--teal); color: var(--on-teal); }
#game.done .vote { visibility: hidden; }
.vote:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--reg); }
.tally { margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 6ch; font-variant-numeric: tabular-nums; }
.tally > * { unicode-bidi: plaintext; } /* .answer is pinned left to right; its text still reads in its own language's direction */
.tally b { font-family: var(--display); font-size: 20px; font-weight: 600; }
.tally small { color: var(--muted); font-size: 14px; }

/* ---------- end ---------- */
.big-score { font-size: 76px; font-weight: 600; letter-spacing: -0.04em; margin: -8px 0 10px; line-height: 1; color: var(--brand-text); text-shadow: .03em .03em 0 color-mix(in srgb, var(--pink) 45%, transparent); }
.big-score small { display: block; font-family: Inter, Heebo, sans-serif; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-shadow: none; margin-top: 6px; }
.misses { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -8px 0 22px; max-height: calc(30 * var(--dvh)); overflow-y: auto; }
.misses p { width: 100%; margin: 0 0 4px; }
.misses span { padding: 4px 10px; border-radius: 99px; font-size: 13.5px; font-weight: 600; }
.misses .yes { box-shadow: inset 0 0 0 1px var(--teal); color: var(--teal-text); }
.misses .no { box-shadow: inset 0 0 0 1px var(--pink); color: var(--pink-text); }

/* phone in landscape: card left, buttons right */
@media (orientation: landscape) and (max-height: 540px) {
  #game { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto; column-gap: 24px; }
  .bar, .fuse { grid-column: 1 / -1; }
  .stack { grid-column: 1; grid-row: 3 / 5; justify-self: center; min-height: 160px; margin: 0; }
  .subject { grid-column: 2; grid-row: 3; align-self: end; max-width: 260px; }
  .answer { grid-column: 2; grid-row: 4; }
}

@media (pointer: coarse) and (min-width: 700px) and (min-height: 700px) {
  .subject small { font-size: 13px; }
  .subject b { font-size: 40px; }
  .stack { width: min(460px, 100%); max-height: 620px; margin: 18px 0 28px; }
  .card { font-size: min(64px, calc(190cqi * var(--cq, 1) / (var(--len) + 2))); border-radius: 30px; }
  .answer { gap: 48px; }
  .vote { width: 96px; height: 96px; }
  .vote svg { width: 42px; height: 42px; }
  .tally b { font-size: 26px; }
  .tally small { font-size: 16px; }
}

/* ---------- print ---------- */
#print .subject b { font-size: 24pt; }
#print .subject small { font-size: 9pt; color: #000; }
.p-words { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; margin-top: 2mm; }
.p-words ul { list-style: none; margin: 0; padding: 0; }
.p-words li { display: flex; align-items: center; gap: 2.5mm; min-height: 15mm; border-bottom: .5pt solid #888; font-size: 13pt; line-height: 1.15; font-weight: 600; hyphens: auto; }
.p-words .p-key { min-height: 7mm; border: 0; font-size: 11pt; }
.p-key b { width: 6mm; text-align: center; }
.p-words .p-box { text-align: center; line-height: 6mm; font-size: 12pt; }

/* ---------- made-up rounds: play.html and editor.html ---------- */
a.btn { text-decoration: none; color: inherit; }
.links { align-items: center; } /* a link beside a button sits on the same line */
#intro, #broken { justify-content: center; position: relative; max-width: 460px; }
#intro .kicker { margin: 18px 0 0; }
.custom-subject { font-size: clamp(34px, calc(9 * var(--vw)), 52px); text-wrap: balance; overflow-wrap: anywhere; margin-top: 6px; }
#dlg-end .links { margin-top: 6px; }

#editor { position: relative; max-width: 640px; gap: 0; }
.ed-title { font-size: clamp(38px, calc(10 * var(--vw)), 54px); margin-top: 44px; }
.ed-field { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ed-field input, .ed-add {
  width: 100%; font: inherit; color: inherit; border: 0; border-radius: 12px; background: var(--stock);
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s;
}
.ed-field input { padding: 13px 16px; font: 600 20px var(--display); letter-spacing: -0.01em; }
.ed-add { padding: 10px 12px; font-size: 16px; margin-top: auto; } /* 16px: iOS doesn't zoom in on focus */
:is(.ed-field input, .ed-add):focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
:is(.ed-field input, .ed-add)::placeholder { color: var(--muted); opacity: .7; }

.ed-lists { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-list { --c: var(--teal); --c-text: var(--teal-text); display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border-radius: 16px; background: var(--grain), var(--stock); box-shadow: inset 0 0 0 1px var(--hair), var(--lift); }
.ed-list.no { --c: var(--pink); --c-text: var(--pink-text); }
.ed-list h2 { margin: 0; display: flex; justify-content: space-between; color: var(--c-text); }
.ed-n { font-variant-numeric: tabular-nums; }
.ed-words { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-content: flex-start; }
.ed-word { display: inline-flex; align-items: center; max-width: 100%; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--c); color: var(--c-text); animation: pop-in .2s var(--ease); }
@keyframes pop-in { from { scale: .6; opacity: 0; } }
.ed-word button { border: 0; background: none; color: inherit; font-weight: 600; font-size: 14px; }
.ed-word button:first-child { padding-block: 6px; padding-inline: 11px 2px; overflow-wrap: anywhere; text-align: start; }
.ed-word button:last-child { display: grid; place-items: center; padding-block: 6px; padding-inline: 4px 8px; opacity: .7; }
.ed-word button:last-child:hover { opacity: 1; }
.ed-word svg { width: 14px; height: 14px; stroke-width: 2.2; }
.ed-word.bad { box-shadow: inset 0 0 0 1.5px var(--red); color: var(--red-text); background: color-mix(in srgb, var(--red) 10%, transparent); text-decoration: line-through wavy color-mix(in srgb, var(--red) 60%, transparent); }

.ed-hint { color: var(--muted); font-size: 13.5px; text-align: center; text-wrap: balance; margin: 12px 0 14px; }
.ed-meter { width: 100%; height: 6px; background: radial-gradient(circle, var(--dot) .9px, transparent 1.25px) 0 0 / 4px 4px; }
.ed-meter i { display: block; height: 100%; width: 0; background: var(--speck), var(--brand); transition: width .3s var(--ease), background-color .3s; }
.ed-meter i.over { background: var(--speck), var(--red); }
.ed-problems { list-style: none; padding: 0; margin: 10px 0 18px; min-height: 1.4em; text-align: center; font-size: 14.5px; color: var(--muted); }
.ed-problems li + li { margin-top: 2px; }
.ed-problems .ok { color: var(--teal-text); font-weight: 600; }
.ed-actions { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.ed-actions .btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: inset 0 0 0 1px var(--line); }
.ed-actions .btn.primary:disabled { background: var(--slot); color: var(--muted); }

/* narrow phones: the lists stack */
@media (max-width: 359px) { .ed-lists { grid-template-columns: 1fr; } }

/* Impossible Mode: the Reversed light under the subject (game.js). Dark glass when off; lit pink, glowing, when on. */
.rev { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 4px auto 6px; }
.rev i {
  width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #4a2a3a, #1c0d15 70%);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / .7), 0 0 0 3px var(--line); transition: background .08s, box-shadow .08s;
}
.rev span { font: 800 11.5px/1 Inter, Heebo, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); transition: color .08s; }
:lang(he) .rev span { letter-spacing: .04em; font-size: 13px; }
.rev.on i { background: radial-gradient(circle at 38% 32%, #fff 0 10%, #ffc2e4 22%, var(--pink) 58%); box-shadow: 0 0 26px 8px rgb(255 79 178 / .65), 0 0 0 3px var(--pink); }
.rev.on span { color: var(--pink); text-shadow: 0 0 10px rgb(255 79 178 / .7); }

/* the tutorial has no fuse */
.tut :is(#clock, .fuse) { visibility: hidden; }