/* Art bible: design/ART-BIBLE.md (Chai Tapri). Palette pairs measured in design/colour-spec.json. */
:root {
  --font-ui: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-sign: "Marker Felt", "Chalkboard SE", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-type: "American Typewriter", "Courier Prime", "Courier New", ui-monospace, monospace;
  /* Chai Tapri: dark tea-stall wood, hand-painted signboards, a paper biodata */
  --bg: #2a1c14; --motif: rgba(255, 214, 140, .06);
  --head: #1c120c; --head-ink: #ffd23f; --head-line: #4a3424;
  --lane-a: #3b2a1e; --lane-b: #33241a; --lane-ink: #f6e7cc; --hot: #ffd23f;
  --paper: #f7ecd6; --paper-edge: #b5532b; --ink: #2b1b14; --ink-soft: #6e5747; --key: #7a5c46;
  --ick: #b3261e; --met: #8a4b0b;
  --bubble: #f7ecd6; --bubble-ink: #2b1b14;
  --btn: #3b2a1e; --btn-edge: #6b4a33; --btn-ink: #ffd23f;
  --tS: #ffd23f; --tA: #ff7a59; --tB: #f2e3c6; --tC: #3fbf8f; --tD: #4aa8e0; --tF: #c06ad6; --k: #2a1c14;
  --sS: #b8560c; --sA: #a3104b; --sB: #8a6a08; --sC: #56731a; --sD: #1b5f6c; --sF: #3b357a;
  --sign: inset 0 0 0 3px rgba(42, 28, 20, .85), inset 0 0 0 5px var(--tc), inset 0 0 0 6px rgba(42, 28, 20, .45);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-ui); }
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
button { font-family: inherit; }

/* top: a marigold toran over the stall, then the header */
#toran { flex: 0 0 auto; display: block; width: 100%; height: 18px; image-rendering: pixelated; background: var(--head); }
header { flex: 0 0 auto; height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 0 12px; background: var(--head); color: var(--head-ink); position: relative; }
#progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--head-line); }
#progress i { display: block; height: 100%; width: 0; transition: width .3s cubic-bezier(.2,.8,.3,1);
  background: linear-gradient(90deg, var(--tS), var(--tA), var(--tB), var(--tC), var(--tD), var(--tF)); }
#brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
#logo { width: 34px; height: 34px; image-rendering: pixelated; flex: 0 0 auto; }
h1 { font: 700 22px/1 var(--font-sign); margin: 0; white-space: nowrap; letter-spacing: .5px; }
#count { font: 700 13px var(--font-ui); padding: 3px 9px; border: 1.5px solid var(--head-line); border-radius: 999px; white-space: nowrap; }
#tools { display: flex; gap: 2px; }
.icon { width: 44px; height: 44px; background: none; border: 0; color: var(--head-ink); cursor: pointer;
  display: grid; place-items: center; border-radius: 10px; padding: 0; }
.icon:hover { background: rgba(255, 255, 255, .08); }
.icon:disabled { opacity: .3; cursor: default; background: none; }
.icon svg { width: 28px; height: 28px; }
:focus-visible { outline: 3px solid var(--tB); outline-offset: 2px; }

/* the lanes: one painted signboard per verdict */
#tiers { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 8px 10px 6px; gap: 5px; }
.row { flex: 1 1 0; min-height: 40px; display: flex; cursor: pointer; position: relative; border-radius: 4px; background-color: var(--lane-a);
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 64px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 2px 0 rgba(0, 0, 0, .4); }
.row:nth-child(even) { background-color: var(--lane-b); }
.label { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--tc); color: var(--k); position: relative; border-radius: 4px 0 0 4px; box-shadow: var(--sign); }
.label .emo { font-size: 22px; line-height: 1; }
.label .word { font: 700 13px/1.1 var(--font-sign); text-align: center; padding: 0 5px; }
.label .key { position: absolute; left: 8px; top: 6px; font: 800 9px var(--font-ui); opacity: .6; }
.items { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; padding: 6px 8px; overflow: hidden; }
.row.hot { box-shadow: 0 0 0 3px var(--hot), 0 2px 0 rgba(0, 0, 0, .4); }
.row.shake { animation: shake .32s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* passport photos in the lanes (faces are 32 px pixel art: shown at 1x, 0.75x, 0.25x) */
.chip { width: 44px; display: flex; flex-direction: column; align-items: center; cursor: grab; touch-action: none; }
.chip img { width: 32px; height: 32px; image-rendering: pixelated; display: block; border: 2px solid #fffaf0; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45); pointer-events: none; box-sizing: content-box; }
.chip span { font: 700 10px/1.3 var(--font-ui); color: var(--lane-ink); max-width: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.chip.dragging { opacity: .25; }
.dense .chip { width: 28px; }
.dense .chip img { width: 24px; height: 24px; border-width: 1px; }
.dense .chip span { display: none; }
.dots .items { gap: 2px; }
.dots .chip { width: 10px; }
.dots .chip img { width: 8px; height: 8px; border: 0; box-shadow: none; }
.dots .chip span { display: none; }

/* the desk: Aunty, the biodata, the verdict stamps */
#desk { flex: 0 0 auto; position: relative; display: grid; grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
  grid-template-areas: "card side"; gap: 12px 18px; align-items: start; padding: 12px 14px 14px;
  background-color: var(--bg); background-image: radial-gradient(var(--motif) 1.6px, transparent 2.3px), radial-gradient(var(--motif) 1.6px, transparent 2.3px);
  background-size: 22px 22px; background-position: 0 0, 11px 11px; }
#card, #finish, #view { grid-area: card; }
#side { grid-area: side; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.paper { background: var(--paper); color: var(--ink); border-radius: 6px; border: 3px solid var(--paper-edge);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 8px 18px rgba(0, 0, 0, .3); }
.biodata { padding: 12px 14px; position: relative; }
#card { cursor: grab; touch-action: none; transform: rotate(.5deg); }
.bhead { display: flex; align-items: center; gap: 14px; padding-bottom: 9px; margin-bottom: 8px; border-bottom: 2px dashed var(--paper-edge); }
.photo { position: relative; flex: 0 0 auto; }
.photo img { width: 64px; height: 64px; image-rendering: pixelated; display: block; border: 3px solid #fff; transform: rotate(-3deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.photo::after { content: ''; position: absolute; left: 18px; top: -7px; width: 32px; height: 11px; background: rgba(236, 196, 120, .8); transform: rotate(-7deg); }
.who { min-width: 0; }
.cname { font: 800 20px/1.15 var(--font-ui); color: var(--ink); display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.cname .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsym { font-size: 19px; flex: 0 0 auto; }
.gsym.f { color: #a3104b; }
.gsym.m { color: #1c5f99; }
.meta { font: 600 14px/1.3 var(--font-ui); color: var(--ink-soft); margin-top: 3px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tags span { font: 700 11.5px/1 var(--font-ui); color: var(--ink-soft); background: rgba(122, 92, 70, .1); border: 1px solid var(--paper-edge);
  border-radius: 999px; padding: 3px 7px 3px 6px; white-space: nowrap; }
.fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: baseline; margin: 0; }
.fields dt, .icklabel { font: 800 10.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--key); }
.fields dd { margin: 0; font: 15px/1.35 var(--font-type); color: var(--ink); }
.fields .met { color: var(--met); }
.icklabel { color: var(--ick); margin: 7px 0 2px; }
.icks, .bits { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.icks li { font: 700 15px/1.35 var(--font-type); color: var(--ick); padding-left: 22px; position: relative; }
.icks li::before { content: '🚩'; position: absolute; left: 0; top: .1em; font-size: .85em; font-weight: 400; }
.bits { margin-top: 8px; padding-top: 7px; border-top: 2px dashed var(--paper-edge); }
.bits li { font: 14.5px/1.35 var(--font-type); color: var(--ink); padding-left: 16px; position: relative; }
.bits li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--paper-edge); }
.stamp { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -12deg; border: 4px solid var(--sc); color: var(--sc);
  font: 900 26px/1 var(--font-ui); letter-spacing: .05em; padding: 7px 14px 5px; border-radius: 10px; text-transform: uppercase;
  white-space: nowrap; background: rgba(255, 252, 240, .55); pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255, 252, 240, .6); }

#host { display: flex; align-items: center; gap: 10px; }
#aunty { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 50%; border: 3px solid var(--paper); flex: 0 0 auto;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3); background: #f2c14e; }
#say { margin: 0; flex: 1; min-width: 0; background: var(--bubble); color: var(--bubble-ink); font: 700 15px/1.35 var(--font-ui);
  padding: 9px 12px; border-radius: 4px 16px 16px 16px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
/* verdict stamps: round painted signs, the same border as the lane labels */
#verdicts { display: flex; justify-content: space-between; gap: 6px; }
.verdict { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px 0; border: 0;
  background: none; cursor: pointer; color: var(--lane-ink); font: 700 12.5px/1.1 var(--font-sign); }
.verdict b { width: 100%; max-width: 56px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 25px; font-weight: 400;
  background: var(--tc); box-shadow: var(--sign), 0 3px 0 rgba(0, 0, 0, .5); transition: translate .08s, box-shadow .08s; }
.verdict:hover b { translate: 0 -2px; box-shadow: var(--sign), 0 5px 0 rgba(0, 0, 0, .5); }
.verdict:active b { translate: 0 2px; box-shadow: var(--sign), 0 1px 0 rgba(0, 0, 0, .5); }
.verdict span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.btn { font: 800 14px var(--font-ui); color: var(--btn-ink); background: var(--btn); border: 2px solid var(--btn-edge); border-radius: 10px;
  padding: 8px 14px; min-height: 44px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn:hover { filter: brightness(1.12); }
.btn.go { background: var(--tS); color: var(--k); border-color: rgba(0, 0, 0, .25); }
#skipBtn { font-family: var(--font-sign); font-weight: 700; font-size: 15px; flex: 0 0 auto; }
.panel { padding: 16px 18px; text-align: center; cursor: default; }
.panel .big { font: 900 24px/1.2 var(--font-ui); overflow-wrap: anywhere; }
.panel p { margin: 6px 0 12px; color: var(--ink-soft); font-size: 15px; }
#view p.agree { color: var(--met); font-weight: 800; font-size: 17px; }
.btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.panel .btn:not(.go), .sheet .btn:not(.go):not(.wa) { background: #fffaf0; color: var(--ink); border-color: var(--paper-edge); }
.follow { display: inline-block; margin-top: 12px; font: 700 13px var(--font-ui); color: var(--ink-soft); }

/* overlays */
#pop { position: fixed; z-index: 40; width: min(360px, 92vw); pointer-events: none; padding: 10px 12px; }
#pop .cname { font-size: 17px; }
#pop .fields dd, #pop .icks li, #pop .bits li { font-size: 13.5px; }
.ghost { position: fixed; z-index: 50; pointer-events: none; margin: 0; }
.fx { position: fixed; z-index: 60; pointer-events: none; font-size: 26px; line-height: 1; }
.bit { position: fixed; z-index: 60; pointer-events: none; width: 7px; height: 9px; border-radius: 50% 50% 45% 45%; }
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(12, 6, 3, .7); display: grid; place-items: center; padding: 16px; }
.sheet { width: min(500px, 100%); max-height: 90vh; overflow: auto; padding: 20px 22px; position: relative; user-select: text; -webkit-user-select: text; }
.sheet h2 { margin: 0 0 10px; font: 700 23px var(--font-sign); }
.sheet p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.sheet .icon { color: var(--ink); }
.close { position: absolute; right: 6px; top: 6px; }
.about { text-align: center; }
.about .quip { font: 700 18px/1.4 var(--font-ui); color: var(--ink); margin: 6px 0 8px; }
.about .aside { margin: 0 0 16px; }
.about .keys { margin: 14px 0 0; font-size: 12.5px; color: var(--key); }
.field { display: block; color: var(--ink-soft); font-size: 14px; font-weight: 700; margin: 4px 0 14px; }
.field input { display: block; width: 100%; margin-top: 6px; font: 700 17px var(--font-ui); color: var(--ink); background: #fffdf6;
  border: 2px solid var(--paper-edge); padding: 10px 12px; border-radius: 8px; }
.field input:focus { outline: none; border-color: var(--sS); }
.share .btn { flex: 1 1 calc(50% - 8px); }
.btn.wa { background: #1f7a43; border-color: #145c31; color: #fff; }
.sheet p.linkline { word-break: break-all; font-size: 12px; margin: 12px 0 0; user-select: all; -webkit-user-select: all; }
.sheet p.note { min-height: 1.5em; margin: 8px 0 0; color: #2e7d4f; font-weight: 800; }

/* landscape windows: lanes on the left, the desk on the right, so a full biodata fits */
@media (orientation: landscape) and (min-width: 601px) {
  body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px, 40vw, 470px); grid-template-rows: auto auto minmax(0, 1fr); }
  #toran, header { grid-column: 1 / -1; }
  #tiers { grid-column: 1; grid-row: 3; }
  #desk { grid-column: 2; grid-row: 3; grid-template-columns: minmax(0, 1fr); grid-template-areas: "host" "card" "verdicts";
    align-content: start; gap: 12px; padding: 10px 12px 12px 6px; overflow-y: auto; overflow-x: hidden; }
  #side { display: contents; }
  #host { grid-area: host; }
  #verdicts { grid-area: verdicts; }
}
/* phones */
@media (max-width: 700px) {
  #toran { height: 15px; }
  header { height: 48px; padding: 0 4px 0 10px; }
  h1 { font-size: 18px; }
  #logo { width: 28px; height: 28px; }
  .icon { width: 40px; height: 40px; }
  .icon svg { width: 25px; height: 25px; }
  #tiers { padding: 6px 6px 4px; gap: 4px; }
  .label { flex-basis: 64px; }
  .label .emo { font-size: 18px; }
  .label .word { font-size: 11px; }
  .label .key { display: none; }
  .items { padding: 5px 6px; gap: 4px; }
  .chip { width: 36px; }
  .chip span { display: none; }
  #desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "host" "card" "verdicts"; gap: 8px;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); }
  #side { display: contents; }
  #host { grid-area: host; }
  #verdicts { grid-area: verdicts; gap: 4px; }
  .verdict { font-size: 11.5px; gap: 4px; }
  .verdict b { max-width: 50px; font-size: 22px; }
  #aunty { width: 48px; height: 48px; }
  #say { font-size: 13.5px; padding: 7px 10px; }
  .biodata { padding: 10px 12px; }
  .cname { font-size: 18px; }
  .tags span { font-size: 11px; padding: 3px 6px 3px 5px; }
  .fields dd, .icks li { font-size: 14px; }
  .bits li { font-size: 13.5px; }
  .btn { padding: 8px 11px; font-size: 13.5px; }
}
/* short phones held upright: Aunty steps aside, Next joins the stamps */
@media (orientation: portrait) and (max-height: 740px) and (max-width: 700px) {
  #desk { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "card card" "verdicts next"; }
  #host { display: contents; }
  #aunty, #say { display: none; }
  #skipBtn { grid-area: next; align-self: center; min-height: 50px; padding: 6px 10px; }
  .photo img { width: 48px; height: 48px; }
  .photo::after { left: 12px; width: 26px; }
  .meta { font-size: 12.5px; }
  .fields dd, .icks li { font-size: 12.5px; line-height: 1.3; }
  .bits li { font-size: 12.5px; line-height: 1.3; }
  .verdict b { max-width: 42px; font-size: 19px; }
  .verdict { font-size: 10.5px; }
  .row { min-height: 0; }
  .label .emo { font-size: 15px; }
  .label .word { font-size: 9.5px; }
  .items { padding: 4px 6px; gap: 3px; }
  .chip { width: 28px; }
  .chip img { width: 24px; height: 24px; }
}
@media (max-width: 440px) {
  #count { display: none; }          /* the progress line under the header still shows how far you are */
  #brand { gap: 8px; }
  h1 { font-size: 16px; }
  .icon { width: 36px; }
  .icon svg { width: 23px; height: 23px; }
}
@media (max-width: 345px) {
  h1 { display: none; }
}
/* short landscape screens (phones on their side): compact everything */
@media (max-height: 560px) and (orientation: landscape) {
  body { grid-template-columns: minmax(0, 1fr) clamp(290px, 44vw, 440px); }
  #toran { height: 12px; }
  header { height: 44px; }
  #tiers { padding: 5px 4px 5px 6px; gap: 3px; }
  #desk { padding: 6px 8px; gap: 6px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "verdicts next" "card card"; }
  #host { display: contents; }
  #aunty, #say { display: none; }
  #skipBtn { grid-area: next; align-self: center; }
  .row { min-height: 0; }
  .label { flex-basis: 60px; }
  .label .emo { font-size: 16px; }
  .label .word { font-size: 10px; }
  .label .key { display: none; }
  .chip { width: 34px; }
  .chip span { display: none; }
  .biodata { padding: 7px 10px; }
  .bhead { padding-bottom: 5px; margin-bottom: 5px; gap: 9px; }
  .photo img { width: 32px; height: 32px; border-width: 2px; }
  .photo::after { display: none; }
  .cname { font-size: 15px; }
  .gsym { font-size: 15px; }
  .meta { font-size: 11.5px; margin-top: 1px; }
  .tags { margin-top: 3px; gap: 3px; }
  .tags span { font-size: 9.5px; padding: 2px 5px; }
  .fields { gap: 1px 8px; }
  .fields dt, .icklabel { font-size: 9px; }
  .icklabel { margin: 4px 0 1px; }
  .fields dd, .icks li, .bits li { font-size: 12px; line-height: 1.28; }
  .bits { margin-top: 5px; padding-top: 4px; }
  .verdict { font-size: 9.5px; gap: 2px; }
  .verdict b { max-width: 34px; font-size: 16px; }
  .btn { min-height: 36px; padding: 5px 9px; font-size: 12.5px; }
  .panel { padding: 10px; }
  .panel .big { font-size: 18px; }
  .panel p { font-size: 13px; margin: 4px 0 8px; }
}
@media (pointer: coarse) {
  .about .keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #progress i { transition: none; }
}

/* anul.space: the way back to the games, at the start of the header (it takes the flag's place on phones) */
.site-back { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px 0 2px;
  color: var(--head-ink); font: 700 13px/1 var(--font-ui); text-decoration: none; white-space: nowrap; opacity: .8;
  border-right: 1.5px solid var(--head-line); }
.site-back:hover { opacity: 1; }
.site-back:focus-visible { outline-offset: -3px; border-radius: 8px; }
.sheet p.site-feedback { margin: 6px 0 0; text-align: right; }
@media (max-width: 440px) {
  #logo { display: none; }
  .site-back { font-size: 12px; padding-right: 8px; }
}
@media (max-width: 380px) {   /* the link costs the title some room: keep it clear of the tools down to 346 px */
  h1 { font-size: 14px; }
  .site-back { padding-right: 6px; }
}
@media (max-width: 359px) {
  h1 { font-size: 12.5px; }
}