/* THREE GEMS — direction A, risograph pamphlet (SPEC §8.1).
   Newsprint stock, two inks that overprint into mud, heavy grain. Cold blue
   against gold: do not drift the pair toward pink, which is what every other
   riso game on the internet already looks like. */

:root {
  --stock: #efece4;   /* the paper */
  --paper: #ffffff;   /* the whiter card a field or a quote sits on */
  --green: #0078bf;   /* the "you can act here" ink */
  --orange: #c07d00;  /* the value ink */
  --mud: #3d4a45;
  --ink: #14181c;
  --ink-soft: #5d6670;
  --display: "Archivo Black", Impact, system-ui, sans-serif;
  --body: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- the other two themes ------------------------------------------------
   Structure, type and grain do not move. A theme is a palette and a word
   list, which is the only way three of them stay maintainable. */

:root[data-skin="vc"] {
  --stock: #f1efea;
  --paper: #ffffff;
  --green: #181a1e;   /* a deck is black on white with exactly one accent */
  --orange: #e03328;
  --mud: #4a3a38;
  --ink: #181a1e;
  --ink-soft: #6a6c72;
}

:root[data-skin="rocks"] {
  --stock: #e8e2d6;
  --paper: #f6f2e9;
  --green: #5c544a;   /* wet slate */
  --orange: #a67c0a;  /* the gold in it */
  --mud: #3a352d;
  --ink: #1c1a17;
  --ink-soft: #6d675c;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--stock);
  color: var(--ink);
  font: 400 16px/1.5 var(--body);
}

/* The grain sits over everything and disappears below 400px, which is why the
   ink pair has to carry a thumbnail on its own. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  mix-blend-mode: multiply;
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 80px; position: relative; z-index: 1; }

/* --- wordmark: green over an orange misregistration ---------------------- */

.mark {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-family: var(--display);
  letter-spacing: -0.045em;
  color: var(--green);
  text-transform: uppercase;
  line-height: 0.82;
}
.mark::before {
  content: attr(data-text);
  position: absolute;
  left: -0.055em;
  top: 0.05em;
  color: var(--orange);
  mix-blend-mode: multiply;
  z-index: -1;
}
.mark.xl { font-size: clamp(64px, 13vw, 132px); }
.mark.lg { font-size: clamp(40px, 8vw, 64px); }
.mark.sm { font-size: 30px; }

/* --- structure ----------------------------------------------------------- */

.topbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; justify-content: space-between; padding-bottom: 18px; border-bottom: 4px solid var(--ink); margin-bottom: 26px; }
.topbar .when { font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; color: var(--ink-soft); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.02; margin: 0; overflow: visible; }
h1 { font-size: clamp(32px, 6vw, 52px); }
h2 { font-size: clamp(24px, 4vw, 34px); }
h3 { font-size: 20px; }

.lede { font-size: 18px; line-height: 1.5; margin: 14px 0 0; }
.label { font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; font-size: 12px; color: var(--ink-soft); margin-bottom: 12px; }
.rule { height: 4px; background: var(--ink); margin: 34px 0 26px; }
.section { margin-top: 34px; }

/* --- controls ------------------------------------------------------------ */

button, .btn {
  font-family: var(--display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--stock);
  background: var(--green);
  border: 3px solid var(--ink);
  padding: 13px 22px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}
button:hover:not(:disabled) { background: var(--orange); }
button:disabled { background: #cfc9bb; color: var(--ink-soft); cursor: not-allowed; }
button.ghost { background: transparent; color: var(--ink); }
button.ghost:hover:not(:disabled) { background: var(--orange); color: var(--stock); }
button.small { font-size: 13px; padding: 8px 13px; border-width: 2px; }

input[type="text"], input[type="number"] {
  font: 400 17px/1.3 var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 12px 14px;
  width: 100%;
}
input[type="number"] { font-family: var(--display); font-size: 26px; text-align: center; padding: 8px; appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
input:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
input::placeholder { color: #9a9384; }
label.field { display: block; margin-bottom: 16px; }
label.field span { display: block; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; color: var(--ink-soft); margin-bottom: 7px; }

.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }

.err { border: 3px solid var(--orange); background: var(--paper); padding: 12px 16px; margin: 18px 0; font-weight: 700; }

/* --- the week and the budget --------------------------------------------
   Spreading 100 gold across five unequal rounds IS the game, so it is the
   top of the screen and the biggest number on it. */

.budget { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: 26px; border: 4px solid var(--ink); background: var(--paper); }
.budget .big { display: flex; align-items: baseline; gap: 14px; padding: 16px 20px; flex: 0 1 auto; }
.budget .big .n { font-family: var(--display); font-size: clamp(46px, 8vw, 68px); line-height: 0.85; color: var(--green); }
.budget .big .cap { font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; color: var(--ink-soft); }
.budget.over .big .n { color: var(--orange); }

.spine { display: flex; flex: 1 1 380px; }
.spine .day { flex: 1; border-left: 3px solid var(--ink); padding: 12px 10px; text-align: center; min-width: 68px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.spine .day .d { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; color: var(--ink-soft); }
.spine .day .x { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); }
.spine .day .s { font-family: var(--display); font-size: 22px; line-height: 1; color: #b9b2a2; }
.spine .day.past .s { color: var(--ink); }
.spine .day.now { background: var(--green); }
.spine .day.now .d, .spine .day.now .x { color: rgba(240, 235, 221, 0.86); }
.spine .day.now .s { color: var(--stock); }

/* --- pile cards ---------------------------------------------------------- */

.piles { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px; }
/* The tutorial shows one card on its own; auto-fit would stretch it to the
   full width and it would stop looking like a card. */
.piles.few { grid-template-columns: repeat(auto-fit, 232px); }
.pile { border: 4px solid var(--ink); background: var(--stock); display: flex; flex-direction: column; }
.pile .head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 14px 9px; border-bottom: 3px solid var(--ink); }
.pile .head .pot { font-family: var(--display); font-size: 27px; line-height: 0.9; color: var(--orange); }
.pile .head .pot small { font-family: var(--body); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.pile .head .mult { font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: right; }
.pile .art { display: grid; place-items: center; height: 104px; }
.pile .art svg { width: 76px; height: 76px; color: var(--green); }
.pile .name { font-family: var(--display); font-size: 21px; text-transform: uppercase; line-height: 1.02; padding: 0 14px; }
.pile .flavor { padding: 8px 14px 14px; font-size: 13px; font-style: italic; color: var(--ink-soft); }
.pile .foot { margin-top: auto; border-top: 3px solid var(--ink); padding: 11px 14px 12px; display: flex; align-items: flex-end; gap: 12px; justify-content: space-between; }
.pile .bid { display: block; }
.pile .bid .cap { display: block; white-space: nowrap; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; color: var(--ink-soft); margin-bottom: 5px; }
.pile input { max-width: 96px; }
.pile .floor { white-space: nowrap; font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); text-align: right; padding-bottom: 14px; }
.pile.is-bid { border-color: var(--green); }
.pile.is-bid .art svg { color: var(--ink); }
/* The warning lands on the gem that will waste the gold, not in a
   summary line somewhere else. */
.pile.is-short { border-color: var(--orange); }
.pile.is-short input { border-color: var(--orange); }
.pile.is-short .floor { color: var(--orange); }

/* --- people --------------------------------------------------------------
   Rows, not boxes. A bordered box with a name in it looks like a button, and
   pressing one does nothing — so this is a list, and once there are scores on
   it, it is ranked, because that is what a list with scores on it is. */

.people { border-top: 3px solid var(--ink); }
.person {
  display: grid;
  grid-template-columns: 22px 30px minmax(0, 1fr) auto auto 54px;
  align-items: baseline;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 2px dotted rgba(23, 48, 31, 0.3);
}
.person:last-child { border-bottom: 3px solid var(--ink); }
.person .pl { font-weight: 700; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-soft); }
.person .sig { font-size: 21px; line-height: 1; }
.person .nm { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.person .note,
.person .state { font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.person .sc { font-family: var(--display); font-size: 23px; text-align: right; color: var(--orange); }
.person.me .nm, .person.me .sc { color: var(--green); }
.person.locked .state { color: var(--green); }

/* --- reveal --------------------------------------------------------------
   Two currencies on one line. Points are the score and are set in the
   display face; gold is what got spent and stays in the body face, so
   nobody has to be told which number is which. */

.results { border: 4px solid var(--ink); background: var(--stock); }
.result { display: grid; grid-template-columns: 34px auto 1fr auto auto minmax(0, auto) 64px; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 3px solid var(--ink); }
.result:last-child { border-bottom: 0; }
.result svg { width: 34px; height: 34px; flex: 0 0 34px; color: var(--orange); }
.result .gem { font-family: var(--display); font-size: clamp(17px, 2.2vw, 24px); text-transform: uppercase; }
.result .dots { flex: 1 1 20px; border-bottom: 3px dotted rgba(23, 48, 31, 0.42); }
.result .second { grid-column: 4; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap; text-align: right; }
.result .cost { grid-column: 5; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap; text-align: right; min-width: 96px; }
.result .who { grid-column: 6; text-align: right; font-family: var(--display); font-size: clamp(17px, 2.2vw, 24px); text-transform: uppercase; color: var(--orange); }
.result .who.me { color: var(--green); }
.result .who.dead { color: var(--ink-soft); }
.result .who em { font-style: normal; font-family: var(--body); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-soft); margin-left: 10px; }
.result .took { grid-column: 7; font-family: var(--display); font-size: clamp(20px, 2.6vw, 28px); color: var(--orange); text-align: right; }
.result .took.me { color: var(--green); }
/* A pile nobody took should not shout as loudly as a pile somebody won. */
.result.is-dead { background: rgba(23, 48, 31, 0.045); }
.result.is-dead svg { color: #b9b2a2; }
.result.is-dead .gem { color: var(--ink-soft); }

pre.share { background: var(--paper); border: 3px solid var(--ink); padding: 16px; overflow-x: auto; font: 400 13px/1.6 var(--body); white-space: pre; margin: 0 0 14px; }

.tally { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tally th, .tally td { text-align: left; padding: 10px 12px; border-bottom: 3px solid var(--ink); }
.tally th { font: 400 13px/1 var(--body); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.tally td.who { font-family: var(--display); text-transform: uppercase; font-size: 19px; }
.tally td.num { font-family: var(--display); font-size: 22px; color: var(--orange); }
/* The week's winner is the point of the screen; every other row is context. */
.tally tr.first td { background: rgba(0, 169, 92, 0.13); }
.tally tr.first td.who, .tally tr.first td.num { font-size: 24px; }
.tally tr.you td.who { color: var(--green); }

.joinlink { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.joinlink code { background: var(--paper); border: 3px solid var(--ink); padding: 11px 14px; font-weight: 700; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.code-big { font-family: var(--display); font-size: clamp(38px, 9vw, 68px); letter-spacing: 0.06em; color: var(--orange); line-height: 1; }

/* --- chat + record ------------------------------------------------------- */

.chat { border: 3px solid var(--ink); background: var(--paper); padding: 12px 14px; max-height: 260px; overflow-y: auto; }
.chat .lede { margin: 0; }
.msg { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0; border-bottom: 1px dotted rgba(23, 48, 31, 0.28); }
.msg:last-child { border-bottom: 0; }
.msg .from { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; color: var(--ink-soft); flex: 0 0 auto; }
.msg.mine .from { color: var(--green); }
.msg .body { flex: 1 1 240px; overflow-wrap: anywhere; }
.tally td.num { font-size: 20px; }

/* --- home: how a week goes ----------------------------------------------- */

.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 34px; }
.how li { display: flex; gap: 14px; padding: 15px 0; border-top: 3px solid var(--ink); }
.how li .n { font-family: var(--display); font-size: 26px; line-height: 0.92; color: var(--orange); flex: 0 0 auto; }
.how li p { margin: 0; font-size: 15px; line-height: 1.55; }
.how li b { font-weight: 700; }

details.recover summary { font-family: var(--display); font-size: clamp(20px, 3vw, 26px); text-transform: uppercase; cursor: pointer; letter-spacing: -0.01em; }
details.recover summary::marker { color: var(--orange); }
details.recover[open] summary { margin-bottom: 6px; }
details.recover .cols { gap: 0 26px; }

/* --- lock ---------------------------------------------------------------- */

.lockrow { justify-content: flex-end; }
/* Hex Smash's rule: the primary control turns the warning colour when it is
   about to throw something away, and says what. */
button.warn { background: var(--orange); }
button.warn:hover:not(:disabled) { background: var(--green); }

/* --- phone --------------------------------------------------------------- */

@media (max-width: 620px) {
  .wrap { padding: 18px 14px 64px; }
  .budget { flex-direction: column; }
  /* In a column flex container flex-basis is a HEIGHT: leaving the desktop
     `flex: 1 1 380px` on here makes the five day cells 380px tall. */
  .budget .big { flex: 0 0 auto; padding: 14px 16px; }
  .spine { flex: 0 0 auto; border-top: 3px solid var(--ink); }
  .spine .day { flex: 1; min-width: 0; padding: 10px 4px; }
  .spine .day:first-child { border-left: 0; }
  .piles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .pile .head { padding: 9px 11px 8px; }
  .pile .head .pot { font-size: 23px; }
  /* base × day is the derivation, and the day spine above already says what
     today multiplies by. On a 168px card the pot alone is the decision. */
  .pile .head .mult { display: none; }
  .pile .art { height: 74px; }
  .pile .art svg { width: 54px; height: 54px; }
  .pile .name { font-size: 16px; padding: 0 11px; }
  .pile .flavor { padding: 6px 11px 12px; font-size: 12px; }
  /* Side by side, the floor runs off the edge of the card. */
  .pile .foot { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 11px 11px; }
  .pile .bid input { max-width: none; width: 100%; }
  .pile .floor { text-align: left; padding-bottom: 0; }
  /* The desktop row is a seven-column table. On a phone it goes back to two
     wrapped lines — the gem, then the outcome — so nothing runs off. */
  .result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 13px 14px; }
  .result > * { grid-column: auto !important; }
  .result svg { align-self: center; }
  .result .gem { flex: 1 1 100%; font-size: 19px; }
  .result .dots { display: none; }
  .result .second, .result .cost { min-width: 0; text-align: left; }
  .result .who { flex: 1; text-align: left; font-size: 20px; }
  .result .took { font-size: 24px; }
  .person { grid-template-columns: 18px 26px minmax(0, 1fr) auto; gap: 8px; padding: 10px 2px; }
  .person .note, .person .state { display: none; }
  .person .nm { font-size: 16px; }
  .topbar { gap: 8px; }
}

/* The skin switch sits with the chrome, never with the game controls. */
.skinswap { border-width: 2px; opacity: 0.75; }
.skinswap:hover { opacity: 1; }
.topbar .when .skinswap { margin-left: 10px; vertical-align: middle; }

/* --- theme switch --------------------------------------------------------- */

.skins { display: flex; flex-wrap: wrap; gap: 10px; }
.skins button.on { background: var(--green); color: var(--stock); border-color: var(--ink); }

/* --- photographs ----------------------------------------------------------
   One theme uses pictures instead of drawings. They sit in the same box a
   drawing does, cropped square and printed rather than floated: a hard border
   and the page grain over the top, so a photo does not look pasted on. */

/* A photograph fills its box and is clipped by it. Without the clip the
   image paints straight over the name underneath, which is exactly what it
   did the first time. */
.pile .art.shot { display: block; padding: 0; height: 132px; overflow: hidden; border-bottom: 3px solid var(--ink); }
.pile .art.shot img.photo { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.82) contrast(1.06); }
img.photo.row { width: 34px; height: 34px; object-fit: cover; border: 2px solid var(--ink); }
.result.is-dead img.photo.row { filter: grayscale(1) opacity(0.55); }
@media (max-width: 620px) {
  .pile .art.shot { height: 96px; }
}