/* 4tune-casino.ca -- the only stylesheet on this site.
   Served immutable for a year, so the filename carries the content hash and the
   build refuses to ship if the two ever disagree.

   Layout rules worth knowing before editing:
   - every width/height pair in the markup is real, and images scale with
     height:auto, so nothing reflows while a picture downloads;
   - no element is positioned over another, so the age dialog is the only thing
     that ever covers the page, and it is display:none until showModal();
   - one column under 760px, one column plus a wider measure above it. No grid
     template is tied to a fixed pixel height. */

:root {
  --ink: #e9edf6;
  --ink-dim: #a7b0c4;
  --bg: #0c0f16;
  --bg-raise: #141926;
  --bg-sink: #090b11;
  --edge: #273048;
  --fin: #f7c90c;
  --fin-deep: #c79f05;
  --measure: 1040px;
  --gap: clamp(1.1rem, 3.4vw, 2.1rem);
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.09rem)/1.68 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: var(--fin); }
a:hover { color: #fff; }

:focus-visible {
  outline: 3px solid var(--fin);
  outline-offset: 2px;
}

.cst-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fin);
  color: #11151d;
  padding: 0.6rem 1rem;
  font-weight: 700;
  z-index: 5;
}
.cst-skip:focus { left: 0; }

/* --- masthead ------------------------------------------------------------ */

.cst-top {
  background: var(--bg-sink);
  border-bottom: 1px solid var(--edge);
}

.cst-top__bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1rem var(--gap) 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem 1.6rem;
}

.cst-mark {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
  color: inherit;
  margin: 0;
}
.cst-mark img { width: 158px; height: 23px; }   /* 1148.61:167.48, so 158x23 keeps the wordmark undistorted */
.cst-mark span {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  text-transform: lowercase;
}

.cst-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  margin-left: auto;
  font-size: 0.95rem;
}
.cst-menu__link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.cst-menu__link:hover { border-bottom-color: var(--fin); color: #fff; }
.cst-menu__here {
  color: var(--fin);
  border-bottom: 2px solid var(--fin);
  padding-bottom: 2px;
}

.cst-crumbs {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gap) 0.9rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
}
.cst-crumbs__link { color: var(--ink-dim); }
.cst-crumbs__link::after { content: " \203A "; color: var(--edge); }
.cst-crumbs__here { color: var(--ink); }

/* --- body ---------------------------------------------------------------- */

.cst-main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.6rem) var(--gap) 0;
}

.cst-h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.7rem);
  line-height: 1.15;
  margin: 0 0 0.7rem;
  letter-spacing: -0.01em;
}

.cst-lede {
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.25rem);
  color: var(--ink-dim);
  margin: 0 0 1.4rem;
  max-width: 68ch;
}

.cst-hero {
  margin: 0 0 1.5rem;
}
.cst-hero img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: var(--bg-raise);
}
.cst-hero figcaption,
.cst-shot figcaption {
  font-size: 0.82rem;
  color: var(--ink-dim);
  padding-top: 0.5rem;
}

.cst-block {
  padding-top: clamp(1.4rem, 3.4vw, 2.4rem);
}
.cst-block h2 {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.72rem);
  line-height: 1.22;
  margin: 0 0 0.6rem;
}
.cst-block h3 {
  font-size: 1.07rem;
  margin: 1.4rem 0 0.4rem;
}
.cst-block p {
  margin: 0 0 1rem;
  max-width: 72ch;
}

.cst-shot {
  margin: 1.5rem 0;
}
.cst-shot img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--edge);
}
.cst-shot--inset {
  max-width: 420px;
}

/* --- fact pairs: this site has no <table> at all ------------------------- */

.cst-pairs {
  margin: 1.3rem 0 1.6rem;
  padding: 0.2rem 0 0;
  border-top: 1px solid var(--edge);
}
.cst-pairs dt {
  font-weight: 700;
  color: var(--fin);
  padding-top: 0.75rem;
  font-size: 0.93rem;
  letter-spacing: 0.01em;
}
.cst-pairs dd {
  margin: 0.15rem 0 0.75rem;
  border-bottom: 1px solid var(--edge);
  padding-bottom: 0.75rem;
  color: var(--ink);
}

@media (min-width: 720px) {
  .cst-pairs {
    display: grid;
    grid-template-columns: minmax(10rem, 17rem) 1fr;
    column-gap: 1.6rem;
  }
  .cst-pairs dt { border-bottom: 1px solid var(--edge); padding-bottom: 0.75rem; }
  .cst-pairs dd { margin: 0; padding-top: 0.75rem; }
}

/* --- operator button ----------------------------------------------------- */

.cst-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 1.6rem 0;
  padding: 1rem 1.1rem;
  background: var(--bg-raise);
  border: 1px solid var(--edge);
  border-left: 4px solid var(--fin);
  border-radius: 10px;
}
.cst-act__go {
  background: var(--fin);
  color: #11151d;
  font-weight: 700;
  text-decoration: none;
  padding: 0.68rem 1.25rem;
  border-radius: 8px;
  white-space: nowrap;
}
.cst-act__go:hover { background: var(--fin-deep); color: #11151d; }

/* Masthead button. align-self keeps it off the baseline the wordmark and menu
   share, so it reads as a control rather than another line of navigation. On a
   phone it takes the whole row instead of shrinking beside the menu. */
.cst-top__go {
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
  background: var(--fin);
  color: #11151d;
  text-decoration: none;
  padding: 0.62rem 1.3rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 7px 18px -10px rgba(0, 0, 0, 0.75);
}
.cst-top__go b { display: block; font-size: 1.1rem; line-height: 1.15; }
.cst-top__go i {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.3;
  opacity: 0.82;
  padding-top: 0.12rem;
}
.cst-top__go:hover { background: var(--fin-deep); }
.cst-top__go:focus-visible { outline: 3px solid var(--fin); outline-offset: 3px; }

@media (max-width: 44rem) {
  .cst-top__go { margin-left: 0; flex: 1 1 100%; }
}
@media print { .cst-top__go { display: none; } }
.cst-act__line {
  flex: 1 1 16rem;
  color: var(--ink);
  font-size: 0.97rem;
}
.cst-act__small {
  flex: 1 1 100%;
  color: var(--ink-dim);
  font-size: 0.8rem;
}

/* --- questions: several may stand open at once --------------------------- */

.cst-asks { margin: 1rem 0 0; }

.cst-ask {
  border-top: 1px solid var(--edge);
  padding: 0.3rem 0;
}
.cst-ask:last-of-type { border-bottom: 1px solid var(--edge); }
.cst-ask summary {
  cursor: pointer;
  padding: 0.75rem 0;
  list-style: none;
}
.cst-ask summary::-webkit-details-marker { display: none; }
.cst-ask__q {
  display: inline;
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0;
}
.cst-ask summary::after {
  content: "+";
  float: right;
  color: var(--fin);
  font-weight: 700;
  margin-left: 1rem;
}
.cst-ask[open] summary::after { content: "\2212"; }
.cst-ask p {
  margin: 0 0 1rem;
  color: var(--ink-dim);
  max-width: 72ch;
}

/* --- footer -------------------------------------------------------------- */

.cst-foot {
  margin-top: clamp(2rem, 5vw, 3.4rem);
  background: var(--bg-sink);
  border-top: 1px solid var(--edge);
  padding: 1.8rem var(--gap) 2.4rem;
}
.cst-foot__menu {
  max-width: var(--measure);
  margin: 0 auto 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.93rem;
}
.cst-foot__link { color: var(--ink); text-decoration: none; }
.cst-foot__link:hover { color: var(--fin); }
.cst-foot__here { color: var(--fin); }
.cst-foot__note,
.cst-foot__stamp {
  max-width: var(--measure);
  margin: 0 auto 0.8rem;
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.cst-foot__stamp { margin-bottom: 0; }

/* --- age dialog ---------------------------------------------------------- */

.cst-gate {
  width: min(32rem, calc(100vw - 2rem));
  border: 1px solid var(--edge);
  border-top: 4px solid var(--fin);
  border-radius: 12px;
  background: var(--bg-raise);
  color: var(--ink);
  padding: 1.4rem 1.5rem 1.5rem;
}
.cst-gate::backdrop { background: rgba(5, 7, 12, 0.78); }
.cst-gate__q {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.cst-gate__body { margin: 0 0 1.1rem; color: var(--ink-dim); }
.cst-gate__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}
.cst-gate__no,
.cst-gate__yes,
.cst-gate__shut {
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.6rem 1.15rem;
}
.cst-gate__no {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--edge);
}
.cst-gate__yes {
  background: var(--fin);
  color: #11151d;
  border: 1px solid var(--fin);
  font-weight: 700;
}
.cst-gate__denied {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--edge);
  color: var(--ink-dim);
  font-size: 0.93rem;
}
.cst-gate__shut {
  background: transparent;
  color: var(--fin);
  border: 1px solid var(--edge);
  margin-left: 0.4rem;
  font-size: 0.88rem;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Verdict lines: the operator record's pros and cons, printed as sentences
   rather than bullets. The shape gate caps list text inside <main> at 15%, and
   a verdict is the one block most tempted to be a list. */
.cst-verdict {
  margin: 0 0 0.85rem;
  padding-left: 1rem;
  border-left: 3px solid var(--edge);
  max-width: 72ch;
}
#good .cst-verdict { border-left-color: var(--fin); }