/* =============================================================================
   TOMBOLA 3000 — css/mobile.css
   Telefon-siden (erdetlodd.no): registrer partygeit + HOPP/SALTO/DANS-kontroller.
   Mobile-first, tommelvennlig (≥64px targets), safe-area-innsikt, ingen
   horisontal scroll. Palett-variablene er KOPIERT fra css/styles.css (dette
   arket lenkes aldri sammen med styles.css — det styler scenen).
   ============================================================================= */

:root {
  --gold: #ffd700;
  --gold-deep: #ff9f1c;
  --pink: #ff2d95;
  --blue: #00e5ff;
  --night: #0a0a1a;
  --night-2: #14103a;
  --ink: #fff8dc;

  --font-shout: 'Arial Black', 'Arial Bold', Impact, Haettenschweiler,
    'Franklin Gothic Heavy', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
    'Liberation Mono', 'Courier New', monospace;

  --glow-gold: 0 0 8px rgba(255, 215, 0, .9), 0 0 26px rgba(255, 159, 28, .65);
  --glow-pink: 0 0 10px rgba(255, 45, 149, .9), 0 0 34px rgba(255, 45, 149, .5);
  --glow-blue: 0 0 10px rgba(0, 229, 255, .9), 0 0 34px rgba(0, 229, 255, .45);
}

/* ------------------------------------------------------------ page reset -- */

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

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 45, 149, .16), transparent 60%),
    radial-gradient(110% 60% at 50% 115%, rgba(0, 229, 255, .13), transparent 60%),
    var(--night);
  color: var(--ink);
  font-family: var(--font-shout);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

[hidden] { display: none !important; }

button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

#mobile-root {
  max-width: 480px;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top, 0px))
           calc(16px + env(safe-area-inset-right, 0px))
           calc(20px + env(safe-area-inset-bottom, 0px))
           calc(16px + env(safe-area-inset-left, 0px));
}

.tb-screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px);
}

/* --------------------------------------------------------- shared pieces -- */

.tb-btn {
  border: 0;
  border-radius: 18px;
  min-height: 64px;
  padding: 12px 18px;
  font-family: var(--font-shout);
  font-size: clamp(16px, 4.6vw, 20px);
  letter-spacing: .04em;
  transition: transform .08s ease;
}

.tb-btn:active { transform: scale(.96); }

.tb-btn:disabled {
  opacity: .75;
  cursor: default;
}

/* Shimrende gradient-tittel */
.tb-title {
  margin: 0;
  font-size: clamp(26px, 8.2vw, 38px);
  line-height: 1.05;
  text-align: center;
  letter-spacing: .02em;
  background: linear-gradient(100deg,
    var(--gold) 0%, var(--gold-deep) 20%, var(--pink) 40%,
    var(--blue) 60%, var(--gold) 80%, var(--gold-deep) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, .35));
  animation: tb-shimmer 6s linear infinite;
}

@keyframes tb-shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

.tb-subtitle {
  margin: 4px 0 0;
  text-align: center;
  font-size: clamp(12px, 3.6vw, 15px);
  letter-spacing: .08em;
  color: var(--blue);
  text-shadow: var(--glow-blue);
}

.is-shake { animation: tb-shake .45s ease both; }

@keyframes tb-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.is-pop { animation: tb-pop .35s ease both; }

@keyframes tb-pop {
  0% { transform: scale(.85); opacity: .2; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}

/* ------------------------------------------------- Screen 1: registrering -- */

.tb-reg-head { padding-top: 6px; }

.tb-name__input {
  width: 100%;
  min-height: 64px;
  padding: 10px 18px;
  border-radius: 18px;
  border: 3px solid var(--gold);
  background: rgba(20, 16, 58, .85);
  color: var(--ink);
  font-family: var(--font-shout);
  font-size: clamp(18px, 5vw, 22px);
  text-align: center;
  letter-spacing: .03em;
  outline: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .5);
  user-select: text;
  -webkit-user-select: text;
}

.tb-name__input:focus {
  border-color: var(--blue);
  box-shadow: var(--glow-blue), inset 0 0 18px rgba(0, 0, 0, .5);
}

.tb-name__input::placeholder {
  color: rgba(255, 248, 220, .45);
}

.tb-preview {
  width: 100%;
  height: 45vh;
  min-height: 200px;
  max-height: 420px;
  border-radius: 22px;
  border: 2px solid rgba(255, 215, 0, .35);
  background:
    radial-gradient(80% 60% at 50% 68%, rgba(255, 215, 0, .10), transparent 70%),
    linear-gradient(180deg, rgba(20, 16, 58, .9), rgba(10, 10, 26, .95));
  overflow: hidden;
}

.tb-preview__canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Drag-to-spin the goat — the drag must never scroll the page. */
  touch-action: none;
  cursor: grab;
}

.tb-preview__canvas:active { cursor: grabbing; }

.tb-preview__canvas.is-dead { visibility: hidden; }

.tb-pickers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tb-picker {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 10px;
}

.tb-picker__label {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 215, 0, .4);
}

.tb-picker__controls {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 8px;
}

.tb-picker__btn {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 2px solid var(--gold);
  background: rgba(20, 16, 58, .85);
  color: var(--gold);
  font-family: var(--font-shout);
  font-size: 30px;
  line-height: 1;
  padding: 0 0 4px;
  transition: transform .08s ease;
}

.tb-picker__btn:active {
  transform: scale(.92);
  background: rgba(255, 215, 0, .18);
}

.tb-picker__value {
  text-align: center;
  font-size: clamp(13px, 3.9vw, 16px);
  letter-spacing: .02em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-random {
  border: 2px solid var(--blue);
  background: rgba(0, 229, 255, .1);
  color: var(--blue);
  text-shadow: 0 0 12px rgba(0, 229, 255, .6);
}

.tb-reg-error {
  min-height: 1.2em;
  text-align: center;
  font-size: clamp(14px, 4.2vw, 17px);
  color: var(--pink);
  text-shadow: var(--glow-pink);
}

.tb-cta {
  min-height: 76px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: var(--night);
  font-size: clamp(20px, 6vw, 26px);
  letter-spacing: .03em;
  box-shadow: var(--glow-gold), 0 6px 0 rgba(120, 70, 0, .8);
}

.tb-cta:active { transform: scale(.97) translateY(2px); }

/* ------------------------------------------------- Screen 2: kontroller --- */

.tb-ctl-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 8px;
}

.tb-goat-name {
  margin: 0;
  font-size: clamp(20px, 6.6vw, 30px);
  line-height: 1.1;
  letter-spacing: .02em;
  text-align: center;
  color: var(--gold);
  text-shadow: var(--glow-gold);
  /* NB: no overflow:hidden here — clipping + glow text-shadow gives Chrome a
     gray compositing band behind the text. Names cap at NAME_MAX=20, so wrap. */
  overflow-wrap: anywhere;
  max-width: 80vw;
}

.tb-dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffb020; /* amber: kobler til / mistet kontakt */
  box-shadow: 0 0 10px rgba(255, 176, 32, .9);
  transition: background .25s ease, box-shadow .25s ease;
}

.tb-dot.is-on {
  background: #2eff7b;
  box-shadow: 0 0 10px rgba(46, 255, 123, .9), 0 0 22px rgba(46, 255, 123, .5);
}

.tb-stats {
  text-align: center;
  font-size: clamp(14px, 4.4vw, 18px);
  letter-spacing: .05em;
  color: var(--blue);
  text-shadow: var(--glow-blue);
}

/* ------------------------------------------------------ D-pad: flytt geita */

.tb-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* Holding a direction must never scroll/zoom the page. */
  touch-action: none;
}

.tb-dpad__label {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--blue);
  text-shadow: 0 0 10px rgba(0, 229, 255, .55);
}

.tb-dpad__grid {
  display: grid;
  grid-template-areas:
    '.    up    .'
    'left mid right'
    '.    down .';
  grid-template-columns: repeat(3, clamp(56px, 17vw, 68px));
  grid-template-rows: repeat(3, clamp(56px, 17vw, 68px));
  gap: 6px;
}

.tb-dpad__btn {
  border: 2px solid var(--blue);
  border-radius: 16px;
  background: rgba(0, 229, 255, .12);
  color: var(--blue);
  font-size: 26px;
  line-height: 1;
  padding: 0;
  text-shadow: 0 0 12px rgba(0, 229, 255, .7);
  touch-action: none;
  -webkit-touch-callout: none; /* no iOS long-press callout while holding */
  transition: transform .06s ease, background .06s ease;
}

.tb-dpad__btn:active {
  transform: scale(.9);
  background: rgba(0, 229, 255, .32);
  box-shadow: var(--glow-blue);
}

.tb-dpad__btn--up { grid-area: up; }
.tb-dpad__btn--left { grid-area: left; }
.tb-dpad__btn--right { grid-area: right; }
.tb-dpad__btn--down { grid-area: down; }

.tb-dpad__center {
  grid-area: mid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, .5));
  pointer-events: none;
}

/* ------------------------------------------------------------ action row -- */

.tb-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: center;
}

.tb-action {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  min-height: clamp(64px, 9.5dvh, 96px);
  font-family: var(--font-shout);
  letter-spacing: .04em;
  transition: transform .08s ease, filter .2s ease;
  touch-action: manipulation;
}

.tb-action:active { transform: scale(.96); }

.tb-action:disabled {
  cursor: default;
  filter: saturate(.65) brightness(.9);
}

.tb-action__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.tb-action__emoji { font-size: clamp(24px, 7vw, 34px); }

.tb-action__label { font-size: clamp(22px, 6.6vw, 32px); }

.tb-action--jump {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: var(--night);
  box-shadow: var(--glow-gold), 0 6px 0 rgba(120, 70, 0, .8);
}

.tb-action--backflip {
  background: linear-gradient(180deg, var(--blue), #0093b8);
  color: var(--night);
  box-shadow: var(--glow-blue), 0 6px 0 rgba(0, 70, 90, .8);
}

.tb-action--dance {
  background: linear-gradient(180deg, var(--pink), #b8005f);
  color: var(--ink);
  box-shadow: var(--glow-pink), 0 6px 0 rgba(90, 0, 45, .8);
}

/* Nedkjølings-sveip: et mørkt teppe som "tappes ut" over nøyaktig --cd ms. */
.tb-action::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 26, .6);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.tb-action.is-cooling::after {
  animation: tb-cooldown var(--cd, 1200ms) linear forwards;
}

@keyframes tb-cooldown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.tb-hype {
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8px;
  font-size: clamp(14px, 4.4vw, 18px);
  letter-spacing: .04em;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 215, 0, .5);
}

.tb-edit {
  align-self: center;
  min-height: 48px;
  padding: 10px 24px;
  border: 0;
  background: none;
  color: rgba(255, 248, 220, .75);
  font-family: var(--font-shout);
  font-size: 15px;
  letter-spacing: .05em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tb-edit:active { color: var(--ink); }

/* ------------------------------------------------------------- fallback --- */

.tb-fatal {
  min-height: 80dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}

.tb-fatal__emoji { font-size: 64px; }

.tb-fatal__title {
  margin: 0;
  font-size: clamp(26px, 8vw, 36px);
  color: var(--pink);
  text-shadow: var(--glow-pink);
}

.tb-fatal__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  font-family: Helvetica, Arial, sans-serif;
}

.tb-fatal__retry {
  border: 2px solid var(--gold);
  background: rgba(255, 215, 0, .12);
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 215, 0, .6);
}