/* MyAdventure site (ChaChess's and MyDeep's site.css, in a dungeon's colours). Built to be read
   at a distance: large type, high contrast, big targets. Everything you read or press is set
   in the system face, the same as the sister sites. */
@font-face { font-family: 'Lato'; src: url('/client/fonts/Lato-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root {
  --paper: #121419; --card: #1c1f27; --card2: #252935; --ink: #f3ecdc; --muted: #cfc5ae; --line: #4a4d5a;
  --accent: #e7b85a; --accent-ink: #1b1206; --ok: #7fdc9a; --warn: #f0b766; --bad: #ff8a7a; --focus: #8ab4ff;
  --head: -apple-system, 'Segoe UI', Lato, Arial, sans-serif;
  --body: -apple-system, 'Segoe UI', Lato, Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 20px/1.45 var(--body); }
h1, h2, h3 { font-family: var(--head); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: 36px; } h2 { font-size: 26px; } h3 { font-size: 22px; }
button, select, input, textarea { font: inherit; }
button, .button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 12px 20px;
  min-height: 52px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
button.quiet, .button.quiet { background: transparent; color: var(--ink); border: 2px solid var(--line); }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
label, .fieldName { font-weight: 700; display: block; margin-bottom: 6px; }
.help { color: var(--muted); font-size: 18px; margin-top: 4px; }
select, input[type=text], input[type=number], input[type=password], textarea { width: 100%; min-height: 52px; padding: 8px 12px; background: var(--card2); color: var(--ink);
  border: 2px solid var(--line); border-radius: 10px; }
textarea { line-height: 1.4; resize: vertical; }
select { -webkit-appearance: none; appearance: none; height: 52px; line-height: 1.3; padding-right: 44px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4 7l6 6 6-6' fill='none' stroke='%23cfc5ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
input[type=text], input[type=number], input[type=password] { height: 52px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.error { color: var(--bad); font-weight: 700; }
.ok { color: var(--ok); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.tick { display: flex; align-items: center; gap: 14px; font-weight: 700; margin-top: 18px; cursor: pointer; }
.tick input { width: 30px; height: 30px; min-height: 0; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }

/* MyStreamRunner's two addresses: name, then the address with its Copy button beside it */
.msrAddr { margin-top: 10px; }
.msrName { font-weight: 700; }
.msrRow { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.msrUrl { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 700; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.msrCopy { flex: 0 0 auto; min-width: 6em; }

/* the kind of game, in front of its name in the games list */
.kindTag { display: inline-block; margin-right: 10px; padding: 2px 10px; border-radius: 999px; font-size: 16px; font-weight: 700; vertical-align: 2px; }
.kindTag.stream { background: #8a2a1e; color: #fff; }
.kindTag.player { background: #2c5a3a; color: #fff; }

/* a hero's pill: their colour, their name in words */
.heroTag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font: 700 17px/1 Lato, sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; color: #fff; }
.heroTag.warrior { background: #a8352a; } .heroTag.rogue { background: #23804d; } .heroTag.mage { background: #3a5fc0; } .heroTag.cleric { background: #a87a12; }

/* a health bar: the hero's colour on a dark track, the numbers beside it */
.hp { display: flex; align-items: center; gap: 10px; }
.hp .track { flex: 1 1 auto; height: 14px; border-radius: 7px; background: #0d0e12; border: 1px solid var(--line); overflow: hidden; }
.hp .fill { height: 100%; border-radius: 7px; transition: width .6s ease; }
.hp .num { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.4em; text-align: right; }

/* the twenty-sided die shown with a roll */
.die { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.die svg { width: 100%; height: 100%; display: block; }
.die .face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 1em/1 Lato, sans-serif; color: #1b1206; font-variant-numeric: tabular-nums; }
.die.rolling svg { animation: dieSpin .9s ease-out; }
@keyframes dieSpin { 0% { transform: rotate(-200deg) scale(.6); } 70% { transform: rotate(12deg) scale(1.08); } 100% { transform: rotate(0) scale(1); } }