/* roll.cool's page (games/roll_cool/web/look.js), on top of style.css. */

/* A cell's things as one line: "apple, acorn, key". */
/* The things here: at least two rows where you are (the log doesn't jump
   as one or two come and go), and as many as there are (a box of two that
   scrolled hid the rest, with no sign of it). */
.log .thing-line { margin: 8px 0 0; line-height: 1.8; }
.log .entry:not(.past) .thing-line { min-height: 3.6em; }
.thing-line .thing { cursor: pointer; }
/* The line's first three, keyed: [1] to [3] (not on a touch screen, which
   has no keys to press). */
.thing-key { color: var(--muted); font-weight: 600; }
.log .entry.past .thing-key { display: none; }
@media (pointer: coarse) { .thing-key { display: none; } }
/* A present: its colours swapped (the thing's colour behind, the page's in
   front), square, no taller than its line. */
.thing.present .thing-name { background: var(--accent); color: var(--bg); text-decoration: none; padding: 0 0.3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.log .entry.past .thing.present .thing-name { background: var(--muted); }
/* A present that shimmers (style.css): its letters the rainbow, no box. */
.log .entry:not(.past) .thing.present .thing-name.shimmer { background: var(--shimmer-bg); -webkit-background-clip: text;
  background-clip: text; padding: 0; }
.log .entry.past .thing-line .thing { cursor: auto; }

/* The HUD: your ball, in the bottom row's left (the exits' other side):
   tapped, the two ways to play; under it your stardust, gold, tapped the
   shop. */
.hud button { padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.hud-play { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.hud .hud-spend { color: var(--stardust); text-decoration: underline dotted; text-underline-offset: 3px; }
.hud-spend:empty { display: none; }
.hud {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: end; /* (its last line's bottom on the ☰'s: the line's leading under the letters) */
  margin-bottom: max(0px, calc(var(--menu-lift, 4px) - 2px));
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-size: 13px;
  color: var(--text);
}
.hud-label { color: var(--muted); }
/* The cube or ball before its name, in the accent, turning now and then: a
   cube a third of a turn (it looks the same after), a ball a whole one. */
.hud-shape { width: 1.05em; height: 1.05em; margin-right: 0.3em; vertical-align: -0.17em; fill: var(--accent); }
.hud-shape[data-shape="cube"] { animation: hud-cube 9s ease-in-out infinite; }
.hud-shape[data-shape="ball"] { animation: hud-ball 9s ease-in-out infinite; }
@keyframes hud-cube { 0%, 88% { transform: rotate(0deg); } 100% { transform: rotate(120deg); } }
@keyframes hud-ball { 0%, 84% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hud-shape { animation: none !important; } }
/* Tappable (the two ways to play): the shape's word marked as things are. */
#hud-label { color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; }
.hud-big { color: var(--accent); font-size: 22px; font-weight: 600; line-height: 1.1; font-family: var(--font-title); }
.hud-purse { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Its stardust whole; on a line of its own when it doesn't fit (look.js). */
#hud-purse { white-space: nowrap; }
.hud-purse.stacked #hud-dot { display: none; }
.hud-purse.stacked #hud-purse { display: block; }
/* A short screen (a small phone, landscape): the HUD tighter, so its three
   lines fit the bottom row. */
@media (max-height: 640px) {
  .hud { gap: 0; font-size: 12px; }
  .hud-big { font-size: 18px; }
  .hud-purse { font-size: 11px; }
}

/* The HUD, tapped: the two ways to play. */
.ball-body { display: flex; flex-direction: column; gap: 12px; max-width: 34em; }
.ball-body p { margin: 0; }

/* The catalog tab: how many found, what to show (filter, sort), then every
   kind on one line, what you haven't found faded. */
.book-head { margin: 0 0 10px; color: var(--text); }
.book-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 0 0 14px; }
.book-row > .muted { min-width: 3.5em; }
/* A type's section: its name and how many found, then the kinds. */
.book-type { margin: 0 0 14px; display: grid; gap: 2px; }
.book-type-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0;
  font-size: 15px; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.book-type-head .muted { font-size: 13px; font-weight: normal; }
.book-line { margin: 0; line-height: 1.7; }
.book-more { font-size: inherit; }
/* Not found yet: the dim text colour (4.5:1 at least), not faded (2:1);
   found, the text's. */
.book-kind { color: var(--muted); }
.book-kind.found { color: var(--text); }

/* Factions (factions.js): an altar under the room, a side's chip, and
   picking a side. */
/* A dot of a player's side's colour before their name on a board. */
.board-side { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--side);
  margin-right: 0.4em; vertical-align: 0.05em; }
/* The altar line: one run of text (it wraps as text does), its button at the end. */
.altar { margin: 6px 0; }
/* A gift at the altar, said in its dialog (factions.js): in the scheme's green. */
/* The altar's sentence: tapped, you give there (underlined, as what you
   can tap in the log is: no buttons there). */
.altar-link { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; background: none; border: 0;
  border-radius: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.altar-link:hover, .altar-link:focus-visible { color: var(--accent); }
/* It shimmers (style.css): its underline in the accent, the letters being the rainbow. */
.altar-link.shimmer { background: var(--shimmer-bg); -webkit-background-clip: text; background-clip: text;
  text-decoration-color: var(--accent); }
.altar-mark { color: var(--side, var(--text)); }
/* An altar of a side: its sentence in the side's gradient, sweeping (no
   rainbow, no glow: in both themes the side's colours read on the page). */
.altar-link.shimmer.side-sweep { background: var(--sweep); -webkit-background-clip: text; background-clip: text;
  animation: shimmer-flow 3s linear infinite; filter: none; }
@media (prefers-reduced-motion: reduce) { .altar-link.shimmer.side-sweep { animation: none; filter: none; } }
/* Who holds the area: the other team, in its colour. */
.altar-holds { color: var(--muted); }
.altar-holds.theirs { color: var(--side); font-weight: 600; }
/* The tug of war: the sides' names at the ends, between them a bar, the
   holder's gradient reaching from the middle toward its end. */
.altar-tug { display: flex; align-items: center; gap: 8px; max-width: 18em; margin: -2px 0 8px; font-size: 0.8em; }
.altar-tug-end { color: var(--side); font-weight: 600; }
.altar-tug-bar { position: relative; flex: 1; height: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--text) 14%, transparent); }
.altar-tug-bar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px;
  border-radius: 1px; background: var(--muted); }
.altar-tug-fill { position: absolute; top: 0; bottom: 0; width: var(--share); background: var(--side); }
.altar-tug-fill.left { right: 50%; border-radius: 3px 0 0 3px; }
.altar-tug-fill.right { left: 50%; border-radius: 0 3px 3px 0; }
/* A side's chip: its gradient, its name white-ish. (An outline of its
   colour, --outline, set but off for now: text-shadow 0 0 1px, stacked.) */
.side-chip, .side-name { background: var(--side); color: #fafafa; font-weight: 700; }
.side-chip { padding: 0 0.35em; }
/* In a room before this one, dimmed as a past present is: the faded text
   grey as its ground, the page's colour its name (the grey text on the
   side's gradient was all but unreadable; as weighty as style.css's
   .entry.past colour rule, or its grey wins and the chip reads blank). */
.log .entry.room.past .side-chip[data-side] { background: var(--muted); color: var(--bg); }
button.side-chip { border: 0; border-radius: 0; font: inherit; font-weight: 700; cursor: pointer; }
/* Picking a side: a row each, its button (a chip in its colours), its line
   below. */
#side-pick .settings-form > p, #give .settings-form > p { margin: 0; } /* (the form's gap spaces them) */
.side-list { display: grid; gap: 16px; }
.side-row p { margin: 4px 0 0; }
.side-name { padding: 4px 12px; border: 0; font: inherit; font-weight: 700; font-size: 18px; cursor: pointer; }
.side-name:hover, .side-name:focus-visible { filter: brightness(1.08); outline: 2px solid var(--text); outline-offset: 2px; }
.side-confirm { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.side-confirm p { margin: 0; }
.side-confirm[hidden] { display: none; }

/* The wardrobe (wardrobe.js): the bag, wearing, examining, the words you
   go by, the shop. */
.profile-words { margin: 0; }
/* Examining something you have: it, and what's said of it. */
.examine-body p { margin: 0 0 8px; line-height: 1.5; }
/* A wearable in its colours: a chip, square, no taller than its line (its
   padding only sideways; underline or border: not decided). */
.wear-chip { display: inline; padding: 0 0.35em; border-radius: 0; -webkit-box-decoration-break: clone;
  box-decoration-break: clone; }
/* Words you go by: chips to turn on or off (up to the game's few). */
.words-head { flex-basis: 100%; margin: 6px 0 0; font-size: 13px; font-weight: normal; color: var(--muted); }
.word-chip { font: inherit; color: inherit; background: none; border: 1px solid var(--line); padding: 2px 10px; }
button.word-chip { cursor: pointer; }
.word-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.word-chip:disabled { opacity: 0.45; cursor: default; }
span.word-chip { padding: 0 0.35em; }
/* The shop: your purse, then a row per thing: what, its price, buy. */
.shop { display: grid; gap: 8px; }
.shop > p { margin: 0; } /* (the grid's gap between them: no more) */
.shop > * { min-width: 0; }
/* What you have to spend (the bag's and the shop's, the same): its number
   big in stardust's gold, its name muted. */
.purse { margin: 0 0 12px; color: var(--muted); }
.purse-n { color: var(--stardust); font-size: 18px; font-variant-numeric: tabular-nums; }
.shop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shop-item { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.shop-what { min-width: 0; overflow-wrap: anywhere; }
.shop-price { font-variant-numeric: tabular-nums; text-align: right; }
.shop-item button:disabled { opacity: 0.45; cursor: default; }

/* The menu's own tabs, each its colour (as style.css colours the page's). */
/* What a thing in the shop is: an ⓘ after its name (it, or the name, opens
   it). */
.shop-info { font: inherit; color: var(--accent); background: none; border: 0; padding: 0 4px; cursor: pointer; }

/* A star of its own (stars.js): your stars and planets on your profile, a
   line each, its share at the end. */
.stars { display: grid; gap: 8px; }
.stars p { margin: 0; }
.star-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.star-name { font-weight: 600; color: var(--accent); }
.stars-older { justify-self: start; }
.star-looks { margin-bottom: 10px; }
.star-look-img { width: 100%; max-width: 360px; aspect-ratio: 1; justify-self: center; display: block; margin: 0 auto 10px; }
/* A wearable's stats (looks.js): jokes, in a little table. */
.wear-stats { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 8px 0; }
.wear-stats dt { color: var(--muted); }
.wear-stats dd { margin: 0; font-weight: 600; }
.shop-look { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
/* (In a room before this one: the altar's sentence still, its tug dimmed.) */
.log .entry.past .altar-link.shimmer.side-sweep { animation: none; background: none; color: inherit; -webkit-text-fill-color: currentColor; }
.log .entry.past .altar-tug { opacity: 0.5; }
/* The wardrobe (wardrobe.js), in the bag: a row a slot (the words you go
   by first): its name, what's on, and the opener at the end; open, the
   rest under it. What's worn: a filled badge, the one word for it. */
.wardrobe { display: grid; gap: 8px; }
.wardrobe-row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.wardrobe-open { font: inherit; font-size: 13px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
/* (Open: the row's whole width, a rule down its side to say whose.) */
.wardrobe-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 2px 0 4px 10px;
  border-left: 2px solid var(--accent-dim); }
.wardrobe-list p, .wardrobe-list h4 { flex-basis: 100%; margin: 0; }
.word-chips { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.wardrobe-wear { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
/* (One to put on, in an open list: a chip, as a word is.) */
.wardrobe-wear.word-chip { border: 1px solid var(--line); padding: 2px 10px; }
.wardrobe-hint { margin: 10px 0 0; font-size: 13px; }
.bag-worn { font-size: 12px; color: var(--bg); background: var(--accent); padding: 0 0.4em; margin-left: 0.3em; }
/* Examining with a mouse: a card beside the name, as the dialog says it. */
.wear-card { position: fixed; z-index: 30; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 1px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.3); pointer-events: none; font-size: 13px; }
.wear-card p { margin: 0 0 6px; }
.wear-card[hidden] { display: none; }
.profile-section .to-bag { margin-left: 10px; font-size: 13px; font-weight: normal; }

/* The tutorial (tutorial.js): the ball's size, a room's tip and what you
   got, in the accent. */
.tutorial-ball { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 13px; color: var(--muted); }
.tutorial-ball b { color: var(--accent); font-size: 22px; font-weight: 600; line-height: 1.1; }
.tutorial-tip { color: var(--accent); }
.tutorial-got { color: var(--accent); }
/* (A room cleared keeps its line's height: its names' dotted underlines,
   painted below the line, were left on screen as it shrank.) */
#tutorial .things { min-height: 2em; }
/* Its exits (the game's words, bottom right): dim, but N, once the room's
   done; the first time, a button of the rainbow, flowing (still, with
   reduced motion). */
.tutorial-exits .exit-word { text-decoration: none; }
/* (The rainbow inside the arrow's square, as a neighbour's colour is: the
   icon's rect, 40 to 216 of its 256, the icon 26 px in the 40.) */
.tutorial-exits .tutorial-n.first:not(:disabled) { color: #fffdf7; }
.tutorial-exits .tutorial-n.first:not(:disabled) .exit-icon { position: relative; filter: drop-shadow(0 0 1px rgb(0 0 0 / 70%)); }
.tutorial-exits .tutorial-n.first:not(:disabled) { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.tutorial-exits .tutorial-n.first:not(:disabled) .exit-arrow { fill: currentColor; stroke: currentColor; }
.tutorial-exits .tutorial-n.first:not(:disabled)::before {
  content: ""; position: absolute; inset: calc(7px + 26px * 40 / 256); border-radius: 1px;
  background: linear-gradient(100deg, var(--rb-red), var(--rb-orange), var(--rb-yellow), var(--rb-green),
    var(--rb-blue), var(--rb-purple), var(--rb-red), var(--rb-orange), var(--rb-yellow), var(--rb-green),
    var(--rb-blue), var(--rb-purple), var(--rb-red)) 0 50% / 200% 100%;
  animation: shimmer-flow 2s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .tutorial-exits .tutorial-n.first:not(:disabled)::before { animation: none; } }