/* =====================================================================================
   THE LAST NERD — interface kit: "ink & fog"
   One visual language for every piece of UI, taken from the title card:
     · Cinzel capitals, wide tracking; Cormorant italic for the quiet lines
     · moonlit silver on black fog, never pure white, never colour
     · hand-inked strokes (slightly irregular rings and glyphs)
     · the small glowing diamond = "selected / active" everywhere
   ===================================================================================== */
:root {
  --ink: #050607;
  --fog: rgba(8, 10, 12, .38);
  --silver: #c9ced3;
  --silver-dim: rgba(205, 211, 216, .55);
  --moon: #eef1f3;
  --glow: rgba(226, 232, 236, .55);
  --serif: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --italic: 'Cormorant Garamond', Georgia, serif;
}

/* ---------------------------------------------------------------- loading */
#loading { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000; transition: opacity .8s; }
.ld-mark { font-family: var(--serif); font-size: clamp(14px, 2vw, 20px); letter-spacing: .9em; padding-left: .9em; color: #8b9197; animation: ldbreath 2.6s ease-in-out infinite; }
.ld-rule { position: relative; width: min(260px, 60vw); height: 1px; margin: 18px 0 14px; background: rgba(200, 206, 212, .12); overflow: hidden; }
.ld-rule span { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(220, 226, 230, .7), transparent); animation: ldsweep 1.8s ease-in-out infinite; }
.ld-sub { font-family: var(--italic); font-style: italic; font-size: 14px; letter-spacing: .3em; padding-left: .3em; color: #5d6369; }
@keyframes ldsweep { from { left: -40%; } to { left: 100%; } }
@keyframes ldbreath { 50% { color: #b3b9be; } }

/* ---------------------------------------------------------------- hints: keycaps / glyphs inline */
#hint { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); display: flex; align-items: center; gap: .9em; font-family: var(--serif); letter-spacing: .32em; font-size: 13px; text-transform: uppercase;
  color: #b9bec3; opacity: 0; transition: opacity 1.4s; white-space: nowrap; text-shadow: 0 0 12px #000, 0 0 3px #000; }
#hint.show { opacity: .85; }
#hint .sep { width: 4px; height: 4px; background: var(--silver-dim); transform: rotate(45deg); margin: 0 .6em; flex: none; }
.kc { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; height: 1.9em; padding: 0 .55em; margin: 0 .2em; box-sizing: border-box; border: 1px solid rgba(205, 211, 216, .45); border-radius: 3px;
  font-size: .82em; letter-spacing: .12em; color: var(--moon); background: rgba(6, 7, 8, .45); box-shadow: inset 0 -2px 0 rgba(205, 211, 216, .12); vertical-align: middle; }
.gi { width: 1.9em; height: 1.9em; color: var(--moon); vertical-align: middle; flex: none; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .9)); }
#hint .gi { width: 2.1em; height: 2.1em; }

/* ---------------------------------------------------------------- act / chapter card */
#card { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-family: var(--serif); letter-spacing: .7em; padding-left: .7em; font-size: 20px; color: #d9dcde; opacity: 0; transition: opacity 2s; text-shadow: 0 0 20px #000; }
#card::before, #card::after { content: ''; display: block; width: min(320px, 50vw); height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, rgba(200, 206, 212, .5), transparent); }
#card::before { margin-bottom: 1.1em; } #card::after { margin-top: 1.1em; }
#card.show { opacity: .88; }
#card small { display: block; margin-top: 1em; font-family: var(--italic); font-size: 16px; letter-spacing: .32em; font-style: italic; text-transform: lowercase; opacity: .65; }

/* ---------------------------------------------------------------- settings: line sliders with a diamond, diamond toggles */
.rows label { font-family: var(--serif); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 160px; height: 22px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, rgba(205, 211, 216, .2), rgba(205, 211, 216, .6), rgba(205, 211, 216, .2)); }
input[type=range]::-moz-range-track { height: 1px; background: linear-gradient(90deg, rgba(205, 211, 216, .2), rgba(205, 211, 216, .6), rgba(205, 211, 216, .2)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6.5px; border: 0; background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1l6 6-6 6-6-6z' fill='%23e8ebee'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 5px rgba(232, 235, 238, .55)); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 0; background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1l6 6-6 6-6-6z' fill='%23e8ebee'/%3E%3C/svg%3E"); }
input[type=range]:focus { outline: none; }
input[type=range]:focus::-webkit-slider-thumb { filter: drop-shadow(0 0 8px rgba(240, 243, 245, .9)); }
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin: 0 4px; border: 1px solid rgba(205, 211, 216, .6); transform: rotate(45deg); background: transparent; cursor: pointer; transition: background .3s, box-shadow .3s; }
input[type=checkbox]:checked { background: #e8ebee; box-shadow: 0 0 9px rgba(232, 235, 238, .6); }
input[type=checkbox]:focus { outline: none; box-shadow: 0 0 0 3px rgba(205, 211, 216, .15); }

/* controls page: keyboard table on desktop, glyph legend on touch */
.touch-keys { display: none; }
body.touch .touch-keys { display: table; }
body.touch .desk-keys { display: none; }
.touch-keys td:first-child { white-space: nowrap; }
.touch-keys .gi { width: 30px; height: 30px; }
table.keys td:last-child { font-family: var(--italic); font-size: 16px; letter-spacing: .06em; }

/* bigger, easier menu targets on phones */
body.touch .menu button { padding-top: .85em; padding-bottom: .85em; }

/* ---------------------------------------------------------------- touch controls */
#touch { display: none; position: absolute; inset: 0; pointer-events: none; transition: opacity .9s ease; }
body.touch.playing #touch { display: block; }
#touch.idle { opacity: .42; }                       /* recede while you watch; return the instant you touch */
#touch .cap { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 7px; font: 400 8.5px var(--serif); letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: var(--silver-dim);
  white-space: nowrap; text-shadow: 0 0 6px #000; transition: opacity 1.6s; pointer-events: none; }
#touch.learned .cap { opacity: 0; }

/* the ink ring (drawn per button by input.js as a slightly irregular double stroke) */
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: rgba(214, 220, 224, .5); transition: color .18s; }
.ring .r1 { fill: none; stroke: currentColor; stroke-width: 1.5; }
.ring .r2 { fill: none; stroke: currentColor; stroke-width: .7; opacity: .45; }
.ring .tick { fill: currentColor; }

.tb, .tmove { position: absolute; box-sizing: border-box; padding: 0; border: 0; border-radius: 50%; color: rgba(226, 231, 235, .8); touch-action: none; -webkit-touch-callout: none;
  background: radial-gradient(circle at 50% 42%, rgba(30, 34, 38, .42) 0%, rgba(8, 10, 12, .46) 62%, rgba(0, 0, 0, .2) 100%);
  transition: transform .12s ease, color .18s, background .18s; pointer-events: auto; }
.tb .glyph { position: absolute; left: 50%; top: 50%; width: 52%; height: 52%; transform: translate(-50%, -50%); filter: drop-shadow(0 0 3px rgba(0, 0, 0, .9)); pointer-events: none; }
.tb.on { transform: scale(.93); color: #fff; background: radial-gradient(circle at 50% 45%, rgba(226, 232, 236, .26) 0%, rgba(30, 34, 38, .4) 55%, rgba(0, 0, 0, .2) 100%); }
.tb.on .ring { color: rgba(240, 243, 245, .95); }
.tb.on .ring .tick { filter: drop-shadow(0 0 4px var(--glow)); }

/* left: one inked capsule, slide your thumb across it */
.tmove { left: max(22px, env(safe-area-inset-left)); bottom: max(30px, calc(env(safe-area-inset-bottom) + 14px)); width: 176px; height: 76px; border-radius: 38px; display: flex; }
.tmove .half { position: relative; flex: 1; border-radius: 38px; transition: background .18s; }
.tmove .half .glyph { position: absolute; top: 50%; width: 38px; height: 38px; transform: translateY(-50%); color: rgba(226, 231, 235, .78); transition: color .18s, transform .18s; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .9)); }
.tmove .half.l .glyph { left: 16px; } .tmove .half.r .glyph { right: 16px; }
.tmove .half.on { background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(226, 232, 236, .2), transparent 70%); }
.tmove .half.on .glyph { color: #fff; }
.tmove .half.l.on .glyph { transform: translate(-3px, -50%); } .tmove .half.r.on .glyph { transform: translate(3px, -50%); }
.tmove .notch { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; background: rgba(214, 220, 224, .55); transform: translate(-50%, -50%) rotate(45deg); }
.tmove.on .ring { color: rgba(240, 243, 245, .9); }

/* right: an arc of actions under the thumb, jump the largest */
.tacts { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: max(30px, calc(env(safe-area-inset-bottom) + 14px)); width: 236px; height: 150px; pointer-events: none; }
.t-jump { right: 0; bottom: 0; width: 92px; height: 92px; }
.t-grab { right: 106px; bottom: 30px; width: 66px; height: 66px; }
.t-down { right: 180px; bottom: 0; width: 56px; height: 56px; }
.t-jump .glyph { width: 56%; height: 56%; }

/* the grab button wakes up when there is something to grab or pull */
.t-grab::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(232, 236, 239, 0), 0 0 18px rgba(232, 236, 239, 0); transition: box-shadow .6s; pointer-events: none; }
body.can-act .t-grab { color: #fff; }
body.can-act .t-grab::after { box-shadow: 0 0 0 1px rgba(232, 236, 239, .35), 0 0 18px rgba(232, 236, 239, .25); animation: actpulse 1.6s ease-in-out infinite; }
@keyframes actpulse { 50% { box-shadow: 0 0 0 1px rgba(232, 236, 239, .15), 0 0 10px rgba(232, 236, 239, .1); } }

/* pause: a small inked medallion, top right */
#tpause { top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 46px; height: 46px; }
#tpause .glyph { width: 60%; height: 60%; }

@media (max-height: 420px) {
  .tmove { width: 156px; height: 66px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .tmove .half .glyph { width: 32px; height: 32px; }
  .tacts { transform: scale(.86); transform-origin: right bottom; bottom: max(18px, env(safe-area-inset-bottom)); }
  #touch .cap { display: none; }
}

/* ---------------------------------------------------------------- rotate your device */
#rotate { display: none; position: fixed; inset: 0; z-index: 70; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: radial-gradient(ellipse at center, #0c0e10 0%, #000 70%); color: #aab0b6; pointer-events: auto; text-align: center; padding: 0 24px; }
.rot-phone { width: 74px; height: 74px; color: #c9ced3; animation: rotphone 3.2s cubic-bezier(.6, 0, .3, 1) infinite; margin-bottom: 30px; }
@keyframes rotphone { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.rot-main { font-family: var(--serif); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; font-size: 14px; color: #c9ced3; }
.rot-main::after { content: ''; display: block; width: 160px; height: 1px; margin: 16px auto 14px; background: linear-gradient(90deg, transparent, rgba(200, 206, 212, .5), transparent); }
.rot-sub { font-family: var(--italic); font-style: italic; font-size: 16px; letter-spacing: .14em; color: #6f767c; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }

/* hints sit high on phones so they never run under the thumbs */
body.touch #hint { bottom: auto; top: max(16%, calc(env(safe-area-inset-top) + 58px)); font-size: 11px; letter-spacing: .24em; gap: .5em; max-width: calc(100vw - 150px); flex-wrap: wrap; justify-content: center; white-space: normal; text-align: center; row-gap: .4em; }
body.touch #hint > span { white-space: nowrap; display: inline-flex; align-items: center; }

/* left-handed: movement on the right, actions mirrored onto the left */
.touch-only { display: none !important; }
body.touch .touch-only { display: flex !important; }
body.lefty .tmove { left: auto; right: max(22px, env(safe-area-inset-right)); }
body.lefty .tacts { right: auto; left: max(22px, env(safe-area-inset-left)); transform-origin: left bottom; }
body.lefty .t-jump { right: auto; left: 0; }
body.lefty .t-grab { right: auto; left: 106px; }
body.lefty .t-down { right: auto; left: 180px; }