/* Barrow: an old terminal in a dark mound. Sixteen colours, the ones a DOS or Linux console had, two pixel fonts
   (Kenney Pixel and Kenney Mini Square, CC0), square boxes with solid borders. No glow, no shadows, no gradients,
   no rounded corners. Kenney Pixel sits on a grid of 16 pixels to the em and Kenney Mini Square on one of 8, so
   their sizes are multiples of 16px and 8px where they can be, to keep the pixels square. */
@font-face {
    font-family: "Kenney Pixel";
    src: url("KenneyPixel.woff2") format("woff2");
    font-display: block;
}
@font-face {
    font-family: "Kenney Mini Square";
    src: url("KenneyMiniSquare.woff2") format("woff2");
    font-display: block;
}

:root {
    /* the 16 colours */
    --black: #000000;
    --blue: #0000aa;
    --green: #00aa00;
    --cyan: #00aaaa;
    --red: #aa0000;
    --magenta: #aa00aa;
    --brown: #aa5500;
    --grey: #aaaaaa;
    --dark: #555555;
    --bright-blue: #5555ff;
    --bright-green: #55ff55;
    --bright-cyan: #55ffff;
    --bright-red: #ff5555;
    --pink: #ff55ff;
    --yellow: #ffff55;
    --white: #ffffff;
    --hero: var(--yellow);
    --text: "Kenney Pixel", monospace;
    --caps: "Kenney Mini Square", monospace;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--black);
    color: var(--grey);
    font: 32px/1 var(--text);
    -webkit-font-smoothing: none;
    -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

h1, h2 { font: 32px/1 var(--caps); margin: 0; color: var(--white); }

img { image-rendering: pixelated; }

/* The one big thing to press on a screen. */
.slab {
    display: block;
    width: 100%;
    font: 32px/1 var(--caps);
    color: var(--black);
    background: var(--yellow);
    border: 4px solid var(--white);
    padding: 16px;
    cursor: pointer;
    touch-action: manipulation;
}
.slab:active:not(:disabled) { background: var(--white); }
.slab:disabled { background: var(--black); border-color: var(--dark); color: var(--dark); cursor: default; }
.slab.on { background: var(--black); border-color: var(--yellow); color: var(--yellow); }

/* Things said in passing: [ like this ]. */
button.text {
    font: 32px var(--text);
    color: var(--grey);
    background: none;
    border: 0;
    padding: 8px 0;
    white-space: nowrap;
    cursor: pointer;
}
button.text::before { content: "[ "; color: var(--dark); }
button.text::after { content: " ]"; color: var(--dark); }
button.text:active { color: var(--white); }

.field { display: grid; gap: 8px; font: 32px var(--text); color: var(--grey); }

input {
    font: 48px var(--text);
    color: var(--white);
    background: var(--black);
    border: 4px solid var(--dark);
    padding: 8px;
    width: 100%;
    border-radius: 0;
    caret-color: var(--yellow);
}
input:focus { outline: none; border-color: var(--yellow); }

.code-input {
    font: 48px/1 var(--caps);
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    text-align: center;
    text-transform: uppercase;
    color: var(--yellow);
}
.code-input::placeholder { color: var(--dark); }

.error { color: var(--bright-red); min-height: 1.5em; margin: 0; }
.hint { color: var(--grey); margin: 0; }

#status {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px 16px;
    background: var(--red);
    color: var(--white);
    text-align: center;
}

/* The landing page */

#landing {
    min-height: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: max(32px, env(safe-area-inset-top)) 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.masthead { text-align: center; }
.masthead .logo { width: 320px; max-width: 100%; }
.masthead p { color: var(--grey); margin: 16px 0 0; }
#join { display: grid; gap: 24px; }
.aside { color: var(--grey); text-align: center; margin: auto 0 0; }

/* The TV */

#tv { position: fixed; inset: 0; overflow: hidden; background: var(--black); }
#tv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

#tv-lobby {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 44fr 56fr;
    align-items: center;
    padding: 6vh 6vw;
    gap: 4vw;
    background: var(--black);
}
.tv-left { display: grid; justify-items: start; }
.title { margin-bottom: 5vh; }
.title .logo { height: 24vh; }
.go { font-size: 6vh; color: var(--grey); margin: 0; }
.address { font: 9vh var(--text); margin: 0.5vh 0 2vh; color: var(--white); }
.runestone {
    margin: 1.5vh 0 0;
    font: 16vh/1 var(--caps);
    letter-spacing: 0.1em;
    color: var(--yellow);
    background: var(--black);
    padding: 3vh 4vh 3vh 5vh;
    border: 1vh solid var(--grey);
}
.join-row { display: flex; align-items: flex-end; gap: 3vw; margin-top: 1.5vh; }
.join-row .runestone { margin: 0; }
.qr { height: 24vh; width: 24vh; image-rendering: pixelated; }
#tv-party {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vh 2vw;
}
.seat { display: grid; justify-items: center; gap: 0.5vh; font-size: 5vh; }
canvas.sprite { image-rendering: pixelated; }
/* a drawing off the map: on paper, or the black pencil is lost on black */
.paper { background: var(--white); }
.seat .sprite { width: 16vh; height: 16vh; }
.seat b { font: 7vh var(--text); color: var(--hero); }
.seat span { color: var(--grey); }
.seat.away { opacity: 0.5; }
.seat.empty .sprite { filter: brightness(0) invert(0.33); opacity: 0.4; }
.seat.empty b { color: var(--dark); }
.going { display: grid; justify-items: center; gap: 1vh; margin: 4vh 0 0; text-align: center; }
.going b { font: 5vh var(--caps); color: var(--yellow); }
.going span { font-size: 4.5vh; color: var(--grey); }
.tv-right .hint { font-size: 6vh; margin-top: 3vh; text-align: center; color: var(--white); }

#tv-hud { position: absolute; inset: 0; pointer-events: none; }
#tv-hud header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    padding: 2vh 3vh;
}
.place { display: grid; }
#tv-place { font: 4vh var(--caps); color: var(--white); }
#tv-round { font-size: 5vh; color: var(--grey); }
.clock { display: grid; justify-items: center; }
#tv-timer { font: 9vh/1 var(--caps); color: var(--white); min-height: 9vh; }
#tv-timer.hurry { color: var(--bright-red); }
#tv-step { font: 2.5vh var(--caps); font-style: normal; color: var(--yellow); }
.torch { justify-self: end; display: grid; justify-items: end; gap: 1vh; font-size: 5vh; color: var(--grey); }
#tv-torch { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5vh; }
#tv-torch li { width: 1.2vh; height: 3vh; background: var(--yellow); border-bottom: 1.2vh solid var(--brown); }
#tv-torch li.out { background: var(--black); border: 0.3vh solid var(--dark); }
#tv-heroes {
    position: absolute;
    left: 3vh;
    right: 3vh;
    bottom: 2.5vh;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 1.5vh;
}
.hero {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 1.2vh;
    align-items: center;
    min-width: 24vh;
    padding: 1vh 1.6vh 1.2vh 1vh;
    background: var(--black);
    border: 0.5vh solid var(--hero);
    font-size: 4vh;
}
.hero .sprite { grid-row: 1 / 4; width: 7vh; height: 7vh; }
.hero .on { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 0.6vh; align-items: center; }
.hero .on:empty { display: none; }
.hero .on .sprite { width: 4vh; height: 4vh; }
.hero .on .status { font-size: 3.5vh; padding: 0 0.8vh; }
/* the rounds it has left, small */
.hero .on .status small { margin-left: 0.6vh; font-size: 2.6vh; }
.hero b { font: 5vh var(--text); color: var(--hero); }
.hero em { font-style: normal; color: var(--grey); }
.hero.locked em { color: var(--bright-green); }
.hero.away, .hero.down { opacity: 0.5; }
.hero i { display: block; height: 1vh; background: var(--dark); }
.hero i::after { content: ""; display: block; height: 100%; width: calc(var(--hp, 1) * 100%); background: var(--hero); }
.corner-code { position: absolute; right: 3vh; bottom: 2.5vh; margin: 0; font: 3vh var(--caps); color: var(--dark); }

#tv-callout {
    position: absolute;
    top: 17vh;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    padding: 2vh 5vh;
    max-width: 80vw;
    text-align: center;
    background: var(--red);
    color: var(--white);
    border: 1vh solid var(--yellow);
    animation: blink 0.24s steps(1) 4;
}
#tv-callout b { font: 6vh/1 var(--caps); color: var(--yellow); }
#tv-callout span { font: 6vh var(--text); margin-top: 1vh; }
@keyframes blink { 50% { background: var(--bright-red); border-color: var(--white); } }

#tv-over {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    pointer-events: none;
}
/* over the top of the place playing back, which fills the middle */
#tv-over .over-top {
    display: grid;
    justify-items: center;
    gap: 1vh;
    padding: 2.5vh 3vh 1.5vh;
    background: var(--black);
    border-bottom: 0.4vh solid var(--dark);
}
#tv-outcome { margin: 0; font-size: 7vh; line-height: 1; color: var(--yellow); }
#tv-outcome.lost { color: var(--bright-red); }
#tv-over .score { display: flex; align-items: baseline; gap: 2vh; }
#tv-score { font: 5vh var(--caps); color: var(--white); }
#tv-score-parts { font-size: 3vh; color: var(--grey); }
#tv-best { font-size: 3vh; font-style: normal; color: var(--cyan); }
#tv-over .hint { margin: 0; font-size: 3vh; }
/* the awards scroll by along the bottom */
.ticker {
    grid-row: 3;
    overflow: hidden;
    background: var(--black);
    border-top: 0.4vh solid var(--dark);
}
.awards {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 1.5vh 0;
    list-style: none;
    animation: ticker var(--ticker, 30s) linear infinite;
}
.awards li {
    display: grid;
    grid-template-columns: 9vh auto;
    grid-template-rows: auto auto auto;
    column-gap: 1.5vh;
    align-items: center;
    margin-right: 4vh;
    padding: 0.8vh 2vh 0.8vh 1.2vh;
    border: 0.4vh solid var(--hero);
    background: var(--black);
}
.awards .sprite { grid-row: 1 / 4; width: 9vh; height: 9vh; }
.awards b { font: 2.4vh var(--caps); color: var(--yellow); }
.awards span { font-size: 3.6vh; line-height: 1; color: var(--hero); }
.awards em { font-size: 2.6vh; font-style: normal; color: var(--white); white-space: nowrap; }
/* a monster as somebody drew it: bigger than the heroes, it is the one on show */
.awards li.beast { --hero: var(--grey); grid-template-columns: 13vh auto; }
.awards .beast .sprite { width: 13vh; height: 13vh; }
.awards .beast span { font-size: 3vh; color: var(--grey); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .awards { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
    .awards li[aria-hidden] { display: none; }
}
.sound-ask {
    position: absolute;
    right: 3vh;
    top: 12vh;
    font: 5vh var(--text);
    color: var(--black);
    background: var(--bright-cyan);
    border: 0.5vh solid var(--white);
    padding: 1vh 2vh;
}

/* The phone */

#phone {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--black);
}
.band {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: max(8px, env(safe-area-inset-top)) 16px 8px;
    background: var(--hero);
    color: var(--black);
}
.face { width: 48px; height: 48px; margin: -4px 0; background: var(--black); border: 4px solid var(--black); box-sizing: content-box; }
.face.paper { background: var(--white); image-rendering: pixelated; }
.who { display: grid; flex: 1; line-height: 1.25; }
.who b { font: 32px var(--text); font-weight: normal; }
.who small { font-size: 32px; }
.timer { font: 32px/1 var(--caps); }
.timer.hurry { color: var(--red); }
.band button.text, .band button.text::before, .band button.text::after { color: var(--black); }
.hp { height: 8px; background: var(--dark); }
.hp i { display: block; height: 100%; width: calc(var(--hp, 0) * 100%); background: var(--bright-green); }
.hp.low i { background: var(--bright-red); }
.prompt {
    margin: 0;
    padding: 16px 16px 8px;
    font: 32px/1.25 var(--text);
    color: var(--white);
}

#phone-lobby { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 16px 16px; overflow-y: auto; }
.over-line { margin: 0 0 16px; color: var(--grey); }
#phone-heroes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pick {
    --hero: var(--dark);
    display: grid;
    justify-items: center;
    gap: 0;
    padding: 4px 0;
    background: var(--black);
    border: 4px solid var(--black);
    color: var(--grey);
    font: 32px/1 var(--text);
    overflow: hidden;
    cursor: pointer;
}
/* small enough that "Shieldmaiden" fits a quarter of a phone */
.pick span { max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; font-size: 16px; line-height: 2; }
.pick .sprite { width: 48px; height: 48px; }
.pick.picked { border-color: var(--hero); color: var(--hero); }
.pick:disabled { opacity: 0.35; cursor: default; }
.hero-detail { padding: 16px 0 0; }
.hero-detail h2 { color: var(--hero); }
.hero-detail p { margin: 8px 0 16px; color: var(--white); line-height: 1.25; }
.hero-detail dl { margin: 0; display: grid; gap: 8px; }
.hero-detail dt { color: var(--yellow); }
.hero-detail dd { margin: 0; color: var(--grey); line-height: 1.25; }
.bottom { margin-top: auto; padding-top: 16px; display: grid; gap: 8px; }
.place-pick { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; border: 4px solid var(--dark); }
.place-pick span { display: grid; justify-items: center; }
.place-pick small { font-size: 32px; color: var(--grey); line-height: 1; }
.place-pick b { font: 16px/1.5 var(--caps); color: var(--yellow); text-align: center; }
.place-pick .step {
    font: 32px/1 var(--caps);
    color: var(--yellow);
    background: var(--black);
    border: 0;
    padding: 8px 16px;
    cursor: pointer;
    touch-action: manipulation;
}
.place-pick .step:active { color: var(--white); }
.place-pick .step[hidden] { display: block; visibility: hidden; }

#phone-play { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#phone-menu { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 8px 16px 16px; overflow-y: auto; }
#phone-actions { display: grid; gap: 8px; }
#phone-actions.off { opacity: 0.35; pointer-events: none; }
#phone-abilities { display: grid; gap: 8px; }
.action {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 16px;
    text-align: left;
    font: 32px/1 var(--text);
    background: var(--black);
    color: var(--white);
    border: 4px solid var(--dark);
    padding: 16px;
    cursor: pointer;
}
.action b { font: 24px/1 var(--caps); font-weight: normal; }
.action small { color: var(--grey); font-size: 32px; }
.action.walk { border-color: var(--hero); }
.action.chosen { background: var(--hero); border-color: var(--white); color: var(--black); }
.action.chosen small { color: var(--black); }
.action:disabled { opacity: 0.4; cursor: default; }
#phone-sketch { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 16px 16px; }
#phone-sketch-canvas { width: 100%; max-width: 60vh; aspect-ratio: 1; margin: 0 auto; display: block; touch-action: none; border: 4px solid var(--dark); }
#phone-sketch .pens { display: flex; gap: 8px; align-items: center; justify-content: center; padding-top: 12px; }
.pen { --ink: var(--black); width: 56px; height: 56px; padding: 0; background: var(--white); border: 4px solid var(--dark); cursor: pointer; }
.pen.pencil { display: grid; place-items: center; }
.pen.pencil::before { content: ""; width: 4px; height: 60%; background: var(--ink); }
.pen.marker { background: var(--ink); }
.pen.on { border-color: var(--yellow); }
.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding-top: 12px; }
.swatch { --ink: var(--black); height: 40px; background: var(--ink); border: 4px solid var(--black); cursor: pointer; }
.hero-detail .drawn { display: flex; gap: 16px; align-items: center; margin: 0 0 16px; }
.hero-detail .drawn canvas { width: 96px; height: 96px; image-rendering: pixelated; background: var(--white); border: 4px solid var(--dark); }
.hero-detail .drawn .slab { flex: 1; width: auto; font-size: 24px; padding: 12px; }
#phone-pad { flex: 1; display: flex; flex-direction: column; min-height: 0; padding-bottom: 16px; }
#phone-canvas { flex: 1; width: 100%; min-height: 0; touch-action: none; display: block; image-rendering: pixelated; border-top: 4px solid var(--dark); border-bottom: 4px solid var(--dark); }
#phone-pad .bottom-row { padding: 0 16px; }
#phone-when { display: flex; gap: 4px; }
.when { font: 32px/1 var(--text); padding: 8px; background: var(--black); color: var(--grey); border: 4px solid var(--dark); }
.when.chosen { background: var(--hero); color: var(--black); border-color: var(--white); }
#phone-bag { display: flex; gap: 8px; }
.item {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background: var(--black);
    border: 4px solid var(--dark);
    cursor: pointer;
}
.item .sprite { width: 48px; height: 48px; }
.item.chosen { background: var(--hero); border-color: var(--white); }
.item.empty { border-style: dashed; border-color: var(--dark); opacity: 0.5; }
.item:disabled { opacity: 0.4; cursor: default; }
.statuses { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 16px 8px; }
.status { padding: 0 8px; color: var(--black); background: var(--grey); }
.status.poison { background: var(--pink); }
.status.ward { background: var(--bright-cyan); }
.status.haste { background: var(--yellow); }
.status.slow { background: var(--brown); color: var(--white); }
.status.might { background: var(--bright-red); }
.status.stun { background: var(--white); }
.bottom-row { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; }
.bottom-row .slab { flex: 1; width: auto; font-size: 24px; white-space: nowrap; padding: 12px; }

/* Character sheets (?sheets): a hero to a card, abilities drawn as the game draws them */

#sheets { display: grid; gap: 32px; padding: 32px 16px; max-width: 760px; margin: 0 auto; }
.sheet .effects { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 0; margin: 16px 0 0; list-style: none; }
.sheet .effects canvas { display: block; width: 100%; aspect-ratio: 8 / 7; border: 4px solid var(--dark); }
.sheet .effects h3 { margin: 4px 0 0; font-size: 20px; color: var(--white); }
.sheet { border: 4px solid var(--hero, var(--grey)); background: var(--black); padding: 16px; }
.sheet header { display: flex; gap: 16px; align-items: start; padding-bottom: 16px; border-bottom: 4px solid var(--dark); }
.sheet header > .sprite { width: 128px; height: 128px; flex: none; background: var(--dark); border: 4px solid var(--hero); }
.sheet h2 { color: var(--hero, var(--white)); font-size: 40px; }
.sheet p { margin: 8px 0 0; color: var(--white); line-height: 1.1; }
.sheet .stats { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; margin: 12px 0 0; }
.sheet .stats dt { color: var(--cyan); }
.sheet .stats dd { margin: 0; color: var(--hero); white-space: nowrap; }
.moves { list-style: none; margin: 0; padding: 0; display: grid; }
.moves li { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 16px 0 0; align-items: start; }
.moves li + li { border-top: 2px dashed var(--dark); margin-top: 16px; }
.moves .diagram { width: 200px; height: 120px; border: 2px solid var(--dark); image-rendering: pixelated; }
.moves h3 { margin: 0; font: 32px/1 var(--caps); font-size: 24px; color: var(--yellow); }
.moves .facts { color: var(--grey); }
.moves h3 { display: flex; align-items: center; gap: 12px; }
.moves .rune { width: 32px; height: 32px; image-rendering: pixelated; }
.things .moves li { grid-template-columns: 64px 1fr; }
.things .moves .sprite { width: 64px; height: 64px; background: var(--dark); }
@media (max-width: 520px) {
    .moves li { grid-template-columns: 1fr; }
    .moves .diagram { width: 100%; height: 140px; }
}

/* the VIP's and the TV's own buttons: the music, and the pause */
.host-row { display: flex; gap: 24px; padding: 0 16px; }
#tv .host-row { position: absolute; right: 3vh; bottom: 6vh; gap: 3vh; }
#tv .host-row.over { top: 2vh; bottom: auto; }
#tv .host-row button.text { font-size: 3vh; color: var(--dark); }
#tv .host-row button.text:hover { color: var(--white); }
.paused {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 2vh;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
    background-size: 8px 8px;
    image-rendering: pixelated;
}
.spot b { font-size: 8vh; }
.spot { z-index: 5; }
.spot canvas { width: 46vh; height: 46vh; image-rendering: pixelated; border: 1vh solid var(--black); }
.spot span { max-width: 80vh; text-align: center; }
.spot em { position: absolute; right: 4vh; bottom: 4vh; font: normal 12vh/1 var(--caps); color: var(--yellow); background: var(--black); padding: 0 2vh; }
.paused b { font: 12vh/1 var(--caps); color: var(--yellow); background: var(--black); padding: 1vh 3vh; }
.paused span { font: 4vh var(--text); color: var(--white); background: var(--black); padding: 0 2vh; }