/* Liam's World of Games: the showcase (/) and the studio (/studio), one system.
   The page is a window, as on roanokewanderers.com: a teal frame (Liam's colour) carries the
   channel's name and marks, and through the glass, in space, the planet. Below or beside it,
   colour-reversed, the controls. */

@font-face {
  font-family: "Rubik";
  src: url("/fonts/Rubik-VF-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
/* (the planet's own lettering: the title round the globe, drawn on the canvas) */
@font-face {
  font-family: "Lilita One";
  src: url("/fonts/LilitaOne-latin.woff2") format("woff2");
  font-display: block;
}
/* (and the others the title can be set in: the studio's Title section chooses) */
@font-face { font-family: "Rubik Mono One"; src: url("/fonts/RubikMonoOne-latin.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Lexend"; src: url("/fonts/Lexend-latin.woff2") format("woff2"); font-weight: 900; font-display: block; }
@font-face { font-family: "Fredoka"; src: url("/fonts/Fredoka-latin.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Titan One"; src: url("/fonts/TitanOne-latin.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Tilt Warp"; src: url("/fonts/TiltWarp-latin.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Bungee"; src: url("/fonts/Bungee-latin.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Russo One"; src: url("/fonts/RussoOne-latin.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Chakra Petch"; src: url("/fonts/ChakraPetch-latin.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Silkscreen"; src: url("/fonts/Silkscreen-latin.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Press Start 2P"; src: url("/fonts/PressStart2P-latin.woff2") format("woff2"); font-display: block; }

:root {
  --teal: #1ebcb2; --ink: #0c1e2a; --sun: #ffd23f; --white: #fcfaf1; --pink: #ff5d8f;
  --ground: var(--teal);
  --sine: cubic-bezier(.37, 0, .63, 1);
  /* The frame's sides, the marks in its top corners (36px on a phone, 64px on a desktop), and how far
     in from the corner they sit. The type is half a mark. */
  --frame: round(clamp(1rem, 4vw, 4.5rem), 1px);
  --mark: 36px; --in: 1rem;
  /* (one height for every button and field: 3.5rem on a phone, two and a quarter times the type on a desktop) */
  --tap: 3.5rem;
  /* the weight of the window's border and every rule, button and field: a twelfth of a mark, to the pixel */
  --edge: round(calc(var(--mark) * .083), 1px);
  --fs: calc(var(--mark) * .5);
  /* Three sizes and no others: S the labels, tracked; M the frame's own size, headings and buttons; L the statements. */
  --type-s: .8125rem;
  --type-m: var(--fs);
  --type-l: clamp(26px, 4.4vw, 56px);
  --track: .06em;
  --radius: 10px;
}
@media (min-width: 900px) { :root { --mark: 56px; --in: 1.5rem; --type-s: .875rem; --tap: round(calc(var(--fs) * 2.1), 1px); } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ground); color: var(--ink);
  font: 700 var(--type-m)/1.2 "Rubik", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- the frame ---- */
.frame {
  height: 100svh; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.edge {
  flex: none; height: round(max(var(--frame), var(--mark) + 1rem + var(--in) * .6), 1px);
  display: flex; align-items: center; justify-content: center; gap: var(--in);
  padding: 0 var(--in);
}
/* (the words between the marks, in M, caps, tracked; the marks are as wide as each other so the words stay centred) */
.edge__words { flex: 1; margin: 0; min-width: 0; text-align: center; font-size: var(--fs); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark {
  flex: none; width: var(--mark); height: var(--mark); border-radius: 50%;
  display: grid; place-items: center; padding: 0; color: var(--ink); background: transparent;
  border: var(--edge) solid var(--ink); text-decoration: none; cursor: pointer;
}
/* (the avatar mark is the planet itself, as YouTube will crop it, ringed in ink) */
.mark--avatar { background: var(--ink); overflow: hidden; cursor: default; }
.mark--avatar canvas { width: 100%; height: 100%; display: block; }
.mark svg { width: 46%; height: 46%; }
@media (hover: hover) { .mark:is(a, button):hover { background: var(--ink); color: var(--ground); } }
.mark:focus-visible, .pane:focus-visible { outline: 2px solid var(--ink); outline-offset: .25rem; }

/* the window: ink space through the glass, the planet in it */
.pane {
  position: relative; flex: 1; min-height: 0; margin: 0 var(--frame);
  border-radius: clamp(22px, 5vw + 10px, 72px);
  background: var(--ink); overflow: hidden;
}
/* (the window's border drawn over everything in it, not round it: a border round a clipped canvas
   leaves a fringe of the canvas's edge pixels showing along the curve of the corners) */
.pane::after { content: ""; position: absolute; inset: 0; z-index: 3; border: var(--edge) solid var(--ink); border-radius: inherit; pointer-events: none; }
/* (the canvas is the whole window: space, in the planet's own colour, runs to the border) */
.pane canvas.view { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.pane canvas.view:active { cursor: grabbing; }
.pane[data-show="map"] canvas.view { cursor: default; }
/* (the glass: two soft reflections across it, as the train's window has) */
.glass { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 10%, rgba(255,255,255,.035) 32%, transparent 54%, transparent 60%, rgba(255,255,255,.02) 74%, transparent 90%),
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.04), transparent 60%); }
/* (things that sit on the glass: labels in S, in white, in from the curve of the corners) */
.pane__top, .pane__foot {
  position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: clamp(14px, 2.4vw + 6px, 34px) clamp(18px, 3.2vw + 8px, 48px); color: var(--white); pointer-events: none;
}
.pane__top { top: 0; } .pane__foot { bottom: 0; }
.pane__top > *, .pane__foot > * { pointer-events: auto; }

/* ---- type ---- */
.label { font-size: var(--type-s); letter-spacing: var(--track); text-transform: uppercase; line-height: 1.2; font-weight: 700; }
.copy { margin: 0; max-width: 40ch; font: 500 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif; text-wrap: pretty; }

/* ---- buttons and fields: one height, one corner, one border ---- */
.btn {
  display: inline-grid; place-items: center; height: var(--tap); padding: 0 1.1rem; min-width: var(--tap);
  font-size: var(--type-s); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap;
  color: currentColor; background: transparent; border: var(--edge) solid currentColor; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
/* (outlined ones fill at once on hover: fading fill and lettering across each other passes through a moment
   where they're the same colour) */
/* (only where there's a pointer that hovers: on a phone, a tapped button would stay filled until the next tap) */
@media (hover: hover) { .btn:hover { background: var(--fg, var(--teal)); color: var(--bg, var(--ink)); border-color: var(--fg, var(--teal)); } }
.btn:active { background: var(--fg, var(--teal)); color: var(--bg, var(--ink)); border-color: var(--fg, var(--teal)); }
.btn--solid { background: var(--sun); color: var(--ink); border-color: var(--sun); transition: background-color .2s ease, border-color .2s ease; }
@media (hover: hover) { .btn--solid:hover { background: var(--white); border-color: var(--white); color: var(--ink); } }
.btn--solid:active { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn:focus-visible, .field:focus-visible { outline: 2px solid var(--fg, var(--teal)); outline-offset: .1875rem; }
.btn[hidden] { display: none; }
.field {
  width: 100%; height: var(--tap); padding: 0 .9rem; font-size: 16px; font-weight: 600; letter-spacing: 0;
  color: var(--fg, var(--teal)); background: transparent; caret-color: var(--fg, var(--teal));
  border: var(--edge) solid var(--fg, var(--teal)); border-radius: var(--radius); -webkit-appearance: none; appearance: none;
}
.field::placeholder { color: color-mix(in srgb, var(--fg, var(--teal)) 55%, transparent); }
textarea.field { height: auto; min-height: calc(var(--tap) * 1.4); padding: .8rem .9rem; resize: vertical; line-height: 1.35; }

/* a segmented choice: the options in one bordered strip, the chosen one filled */
.seg { display: inline-flex; border: var(--edge) solid currentColor; border-radius: var(--radius); overflow: hidden; }
.seg button {
  flex: 1; height: calc(var(--tap) - var(--edge) * 2); padding: 0 .9rem; border: 0; background: transparent; cursor: pointer;
  font-size: var(--type-s); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; touch-action: manipulation;
}
.seg button + button { border-left: var(--edge) solid currentColor; }
.seg button[aria-pressed="true"] { background: var(--fg, var(--teal)); color: var(--bg, var(--ink)); }
/* (more than four choices: three to a row, ruled between, so the long ones fit a phone) */
.seg--grid { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.seg--grid button + button { border-left: 0; }
.seg--grid button { border-top: var(--edge) solid currentColor; margin-top: calc(var(--edge) * -1); }
.seg--grid button:not(:nth-child(3n + 1)) { border-left: var(--edge) solid currentColor; }
/* (on the glass, small: white, a step under --tap) */
.seg--glass { --fg: var(--white); --bg: var(--ink); color: var(--white); background: rgba(12, 30, 42, .55); }
.seg--glass button { height: 2.25rem; padding: 0 .75rem; }

/* (a button on the glass: white, outlined, a step under --tap) */
.glass-btn { --fg: var(--white); --bg: var(--ink); flex: none; color: var(--white); background: rgba(12, 30, 42, .55); height: 2.25rem; padding: 0 .75rem; border-color: var(--white); }

@media (prefers-reduced-motion: reduce) { .btn--solid { transition: none; } }