/* The Study: a game's stage (study-stage.js), over the room.
   The canvas is the game's; this is what's laid over it: the bar along the
   top (Done, the game's name, a line saying what's going on), the watcher's
   bubble along the bottom, the end card (Again, Done) and the black veil
   the room and the stage cut through. study-stage.js places the bubble and
   the card (left, width, bottom), from the layout it works out.

   The club's look comes from the variables study.css defines, with these
   fallbacks: --club-ink, --club-card (card stock), --club-brass,
   --club-serif, --club-leather. */

.fullstage {
  --st-ink: var(--club-ink, #231f20);
  --st-card: var(--club-card, #f6efdc);
  --st-brass: var(--club-brass, #c9a24a);
  --st-serif: var(--club-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif);
  --st-leather: var(--club-leather, #5a1f1a);
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: #140b07;
  outline: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.fullstage[hidden] {
  display: none;
}
.fullstage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
/* The insets of a phone's notch and home bar, for study-stage.js to read */
.fullstage__safe {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  visibility: hidden;
  pointer-events: none;
}

/* ---------- The bar: Done, the name, what's going on ---------- */
.fullstage__bar {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  max-width: 640px;
  margin: 0 auto;
  padding: 4px 10px 5px 4px;
  color: var(--st-card);
  background: var(--st-leather);
  border: 3px solid var(--st-ink);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(201, 162, 74, 0.55), 4px 4px 0 var(--st-ink);
}
/* (the empty third column balances Done, so the name sits in the middle) */
.fullstage__bar::after {
  content: "";
  grid-row: 1;
  grid-column: 3;
  width: 44px;
}
.fullstage__done {
  grid-row: 1;
  grid-column: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  font-family: var(--st-serif);
  font-variant-caps: all-small-caps;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  color: var(--st-ink);
  background: var(--st-brass);
  border: 2px solid var(--st-ink);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}
.fullstage__done::before {
  content: "\2039\00a0";
}
.fullstage__done:focus-visible {
  background: #e3c06a;
  outline: none;
}
.fullstage__title {
  grid-row: 1;
  grid-column: 2;
  margin: 0;
  overflow: hidden;
  font-family: var(--st-serif);
  font-variant-caps: all-small-caps;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #ecd08a;
}
/* One line, always there (empty or not), so the bar never changes height
   under the game */
.fullstage__status {
  grid-row: 2;
  grid-column: 1 / -1;
  min-height: 1.3em;
  margin: 2px 0 0;
  padding: 0 6px;
  overflow: hidden;
  font-family: var(--st-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--st-card);
}

/* A phone on its side: the line goes beside the name, so the bar is one
   row and the play gets the height */
@media (max-height: 520px) and (min-width: 600px) {
  .fullstage__bar {
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto;
  }
  .fullstage__bar::after {
    display: none;
  }
  .fullstage__title {
    text-align: left;
  }
  .fullstage__status {
    grid-row: 1;
    grid-column: 3;
    margin: 0;
    text-align: right;
  }
}

/* ---------- The watcher's bubble, along the bottom ---------- */
.fullstage__say {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 7px 12px 9px;
  color: var(--st-ink);
  background: var(--st-card);
  border: 3px solid var(--st-ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--st-ink);
  font-family: var(--st-serif);
  pointer-events: none;
}
.fullstage__say[hidden] {
  display: none;
}
.fullstage__say.is-in {
  animation: fullstage-say-in 0.22s var(--ease-out, ease-out);
}
@keyframes fullstage-say-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.fullstage__who {
  display: block;
  font-variant-caps: all-small-caps;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.07em;
  line-height: 1.1;
  color: #7a2a1c;
}
.fullstage__who[hidden] {
  display: none;
}
/* (a line too long for the room it has is cut, and set smaller first) */
.fullstage__line {
  display: block;
  min-height: 0;
  overflow: hidden;
  font-size: 1.05rem;
  line-height: 1.32;
}
.fullstage__say.is-long .fullstage__line {
  font-size: 0.94rem;
  line-height: 1.25;
}
/* The tail, toward the watcher: an ink triangle with a card one inside it */
.fullstage__say[data-tail="left"]::before,
.fullstage__say[data-tail="left"]::after,
.fullstage__say[data-tail="right"]::before,
.fullstage__say[data-tail="right"]::after,
.fullstage__say[data-tail="down"]::before,
.fullstage__say[data-tail="down"]::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}
.fullstage__say[data-tail="left"]::before {
  left: -16px;
  bottom: var(--tail-b, 20px);
  border-width: 10px 16px 10px 0;
  border-right-color: var(--st-ink);
}
.fullstage__say[data-tail="left"]::after {
  left: -10px;
  bottom: calc(var(--tail-b, 20px) + 4px);
  border-width: 6px 10px 6px 0;
  border-right-color: var(--st-card);
}
.fullstage__say[data-tail="right"]::before {
  right: -16px;
  bottom: var(--tail-b, 20px);
  border-width: 10px 0 10px 16px;
  border-left-color: var(--st-ink);
}
.fullstage__say[data-tail="right"]::after {
  right: -10px;
  bottom: calc(var(--tail-b, 20px) + 4px);
  border-width: 6px 0 6px 10px;
  border-left-color: var(--st-card);
}
.fullstage__say[data-tail="down"]::before {
  left: var(--tail-x, 20px);
  bottom: -16px;
  border-width: 16px 10px 0;
  border-top-color: var(--st-ink);
}
.fullstage__say[data-tail="down"]::after {
  left: calc(var(--tail-x, 20px) + 4px);
  bottom: -10px;
  border-width: 10px 6px 0;
  border-top-color: var(--st-card);
}

/* ---------- The end card ---------- */
.fullstage__card {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  padding: 16px 18px;
  translate: -50% 0;
  color: var(--st-ink);
  background: var(--st-card);
  border: 3px solid var(--st-ink);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--st-ink);
  font-family: var(--st-serif);
  animation: fullstage-card-in 0.28s var(--ease-out, ease-out);
}
.fullstage__card[hidden] {
  display: none;
}
/* the double gilt rule inside the edge */
.fullstage__card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 3px double var(--st-brass);
  border-radius: 4px;
  pointer-events: none;
}
@keyframes fullstage-card-in {
  from { opacity: 0; translate: -50% 16px; }
  to { opacity: 1; translate: -50% 0; }
}
.fullstage__result {
  position: relative;
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  text-align: center;
}
.fullstage__sub {
  position: relative;
  margin: 0 0 6px;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
}
.fullstage__sub[hidden] {
  display: none;
}
.fullstage__buttons {
  position: relative;
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.fullstage__again,
.fullstage__leave {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0.25em 0.6em;
  font-family: var(--st-serif);
  font-variant-caps: all-small-caps;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--st-ink);
  background: var(--st-card);
  border: 2px solid var(--st-ink);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}
.fullstage__again {
  background: var(--st-brass);
}
.fullstage__again[hidden] {
  display: none;
}
.fullstage__again:focus-visible {
  background: #e3c06a;
  outline: none;
}
.fullstage__leave:focus-visible {
  background: #fffaf0;
  outline: 2px solid var(--st-brass);
  outline-offset: -5px;
}
/* (hover only where there's a pointer that hovers: on a phone a tapped
   button would keep it) */
@media (hover: hover) {
  .fullstage__done:hover,
  .fullstage__again:hover {
    background: #e3c06a;
  }
  .fullstage__leave:hover {
    background: #fffaf0;
  }
}

/* ---------- The veil the room and a stage cut through ---------- */
.fullstage-veil {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.fullstage-veil.is-on {
  pointer-events: auto;
}

/* ---------- The room, while a stage is up ---------- */
/* Out of sight (not painted, and out of the tab order) under the stage. A
   stamp, or anything else marked data-over-stage, shows over it. */
.study.is-staged > :not(.fullstage):not(.fullstage-veil):not(.stamp-toast):not([data-over-stage]) {
  visibility: hidden;
}
.study.is-staged > .stamp-toast,
.study.is-staged > [data-over-stage] {
  z-index: 60;
}

@media (prefers-reduced-motion: reduce) {
  .fullstage__say.is-in,
  .fullstage__card {
    animation: none;
  }
}