/* SING BACK — the Diva's salon, as an app from 1697.
 * Modern app bones (big type, sheets, segmented controls, springy presses) made
 * of period materials: powder-blue silk walls, ivory paper, aubergine ink,
 * rouge for the one thing to press, gilt hairlines for edges. No gloss, no
 * gradients on controls. Type is IM Fell English (Dr Fell's types, 1670s-90s)
 * for display and labels, Cormorant Garamond for reading. One look, both themes. */

@font-face { font-family: "Fell SC"; font-weight: 400; src: url(/fonts/fell-sc-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Fell"; font-style: normal; font-weight: 400; src: url(/fonts/fell-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Fell"; font-style: italic; font-weight: 400; src: url(/fonts/fell-italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 500 700; src: url(/fonts/cormorant-normal-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 500; src: url(/fonts/cormorant-italic-500.woff2) format("woff2"); font-display: swap; }

:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --ground: #d3e3e1;          /* the salon wall, outside the frame */
  --panel: #f8f1e5;           /* ivory paper */
  --panel-2: #efe4d2;
  --ink: #2b2031;             /* aubergine ink */
  --ink-dim: #7c6a70;
  --rule: #c2a15f;            /* gilt hairline */
  --rule-soft: #e6d6b8;
  --accent: #c33d5b;          /* rouge: the one thing to press */
  --accent-ink: #fcf8f1;
  --good: #a9803a;            /* gilt, for things done well */
  --warn: #c33d5b;
  --silk: #b7d2cf;            /* powder-blue silk */
  --pearl: #fcf9f3;
  --gilt-hi: #ecd08f;

  --display: "Fell SC", "IM Fell English SC", "Iowan Old Style", Georgia, serif;
  --ui: "Cormorant", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  --radius: 16px;
  --rule-w: 1px;
  --shadow-hard: 0 30px 60px -30px rgba(43, 32, 49, .5);
  color-scheme: light;
}

/* The whole window is the salon wall. No page around a phone, no frame, no
   second title: the game fills the screen and the name appears once, in it. */
html, body {
  background-color: var(--silk);
  background-image:
    radial-gradient(90% 55% at 50% 30%, rgba(255, 255, 255, .6), transparent 70%),
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .22) 1.5px, transparent 2.5px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, .22) 1.5px, transparent 2.5px);
  background-size: 100% 100%, 26px 26px, 26px 26px;
  background-attachment: fixed;
  color: var(--ink);
  font-weight: 600;
  overflow-x: clip;
}
#top { display: none; }
#app { height: 100dvh; max-width: none; padding: 0; grid-template-rows: 0 1fr; }
#stage {
  width: 100%; max-width: 560px; height: 100%; max-height: none; aspect-ratio: auto;
  margin: 0 auto; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; overflow: visible;
}
/* Screens without a backdrop (results, boards) get the gutter the stage no longer has. */
.screen:not(.on-splash) { padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); }

/* Type */
.big { font-family: var(--display); font-weight: 400; letter-spacing: .03em; line-height: 1; color: var(--ink); text-transform: none; }
.muted { color: var(--ink-dim); font-family: "Fell", Georgia, serif; font-style: italic; font-weight: 400; font-size: 17px; }
.label { font-family: var(--display); font-size: 13px; letter-spacing: .1em; text-transform: none; color: var(--ink-dim); }
.textlink { font-family: "Fell", Georgia, serif; font-style: italic; font-size: 16px; color: var(--ink-dim); text-decoration-color: var(--rule); }
.textlink:hover { color: var(--accent); }
.strip { letter-spacing: 3px; }

/* The home menu: the same flat ivory panel as the game, on the bottom edge,
   ruled in gilt across the window. The two lesser choices share a row. */
.screen.on-splash {
  margin: auto 0 0; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center;
  background: var(--panel); border: 0; border-radius: 0;
  padding: 14px 16px max(10px, env(safe-area-inset-bottom));
  box-shadow: 0 0 0 100vmax var(--panel); clip-path: inset(0 -100vmax -100vmax);
}
.screen.on-splash::before { content: ""; position: absolute; top: 0; left: -100vmax; right: -100vmax; height: 1px; background: var(--rule); }
.screen.on-splash > * { grid-column: 1 / -1; margin: 0 !important; }
.screen.on-splash > .btn.ghost { grid-column: auto; }
.screen.on-splash .big { color: var(--ink); font-size: clamp(28px, 9cqw, 36px); }
.screen.on-splash .muted { margin-top: -6px !important; }
.screen.on-splash .feet { gap: 2px 18px; }

/* Buttons. Flat rouge for the one thing to do, ivory for the rest. A single
   gilt hairline inset from the edge is the only ornament. Presses spring. */
.btn {
  font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .05em;
  min-height: 52px; padding: 12px 16px; border: 0; border-radius: 6px;
  color: var(--accent-ink); background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 4px rgba(252, 248, 241, .5), 0 8px 18px -10px rgba(195, 61, 91, .7);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background-color .15s, box-shadow .15s;
  -webkit-user-select: none; user-select: none;
}
.btn:hover { background: #b5324f; box-shadow: inset 0 0 0 3px #b5324f, inset 0 0 0 4px rgba(252, 248, 241, .5), 0 10px 20px -10px rgba(195, 61, 91, .8); }
.btn:active { transform: scale(.96); background: #a82d49; box-shadow: inset 0 0 0 3px #a82d49, inset 0 0 0 4px rgba(252, 248, 241, .4); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn.ghost {
  color: var(--ink); background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--rule), 0 6px 14px -10px rgba(43, 32, 49, .5);
}
.btn.ghost:hover { background: #fffaf1; box-shadow: inset 0 0 0 1px var(--accent), 0 6px 14px -10px rgba(43, 32, 49, .5); }
.btn.ghost:active { background: var(--panel-2); }
/* On the host screens (home, result) Play and Share lead; everything else
   under them is a lighter, shorter outline so the first choice is obvious. */
.screen .btn.ghost {
  min-height: 44px; border-radius: 6px; font-size: 17px; background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule-soft);
}
.screen .btn.ghost:hover { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--rule); }
.screen .btn + .btn.ghost { margin-top: 8px; }
.screen .btn:not(.ghost) + .btn.ghost { margin-top: 14px; }
.btn:disabled, .btn[disabled] {
  color: #a8988e; background: #ebe0cd; box-shadow: inset 0 0 0 1px var(--rule-soft); cursor: default; transform: none;
}

/* Leaderboard, sheets, toast. */
ol.board li { font-size: 17px; border-radius: 10px; }
ol.board li:nth-child(odd) { background: rgba(255, 255, 255, .55); }
ol.board li.me { outline: 1.5px solid var(--accent); background: #fff6ee; }
ol.board .r { font-family: var(--display); }
ol.board .v { font-weight: 700; color: var(--accent); }

.sheet { background: rgba(43, 32, 49, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet-body {
  background: var(--panel); color: var(--ink); border: 0; border-radius: 0; border-top: 1px solid var(--rule);
  box-shadow: 0 -20px 50px -20px rgba(43, 32, 49, .4);
}
@media (min-width: 700px) { .sheet-body { border: 1px solid var(--rule); } }
.sheet-body h2, .sheet-body h3 { font-family: var(--display); font-weight: 400; letter-spacing: .03em; }
.sheet-body input {
  font: 600 19px var(--ui); color: var(--ink); background: #fffaf2;
  border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px;
}
.sheet-body input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#toast { background: var(--ink); color: var(--pearl); font-family: "Fell", Georgia, serif; font-style: italic; font-size: 16px; }