html, body { min-height: 100%; }
body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.app {
  max-width: 34rem;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.timer { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 5; }
.timer-fill { height: 100%; width: 0; background: var(--marquee); }
.timer.low .timer-fill { background: var(--coral); }

.offline {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
  background: var(--coral); color: var(--ink); font-weight: 600; text-align: center;
}

/* Översta raden: vem du är */
.me {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 600; font-size: 1.05rem;
}
.me .score { margin-left: auto; color: var(--paper-dim); font-weight: 400; }
.me .vip { color: var(--marquee); font-size: 0.85rem; }

.view { display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.view.enter { animation: rise 260ms ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.title { font-size: 1.9rem; font-weight: 800; line-height: 1.05; margin: 0.4rem 0 0; letter-spacing: -0.01em; }
.title.good { color: var(--mint); }
.title.bad { color: var(--coral); }
.text { font-size: 1.15rem; line-height: 1.4; margin: 0; color: var(--paper); }
.note { font-size: 1rem; color: var(--paper-dim); margin: 0; }

.big {
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  color: var(--marquee);
  text-shadow: 0.05em 0.05em 0 var(--ink);
  margin: 0.2rem 0;
}

/* Hemligt kort: tryck för att visa/dölja så att grannen inte tjuvkikar */
.secret {
  border: 0; width: 100%; text-align: left; cursor: pointer;
  background: var(--night-2); color: var(--paper);
  border-radius: 18px; padding: 1.4rem 1.2rem;
  box-shadow: 0 6px 0 var(--ink);
  min-height: 9rem;
  display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
}
.secret.hidden .big.placeholder { height: 7rem; }
.secret .secret-text { font-size: 1.1rem; line-height: 1.35; }
.secret .hint { color: var(--paper-dim); font-size: 0.95rem; }
.secret.hidden .big { color: transparent; text-shadow: none; background: repeating-linear-gradient(-45deg, var(--night-3) 0 10px, var(--night-2) 10px 20px); border-radius: 8px; }

/* Svarsknappar */
.options { display: flex; flex-direction: column; gap: 0.75rem; }
.options.grid { display: grid; grid-template-columns: 1fr 1fr; }
.opt {
  border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 0.8rem;
  min-height: 4rem; padding: 0.9rem 1rem;
  border-radius: 16px;
  background: var(--night-2); color: var(--paper);
  font-size: 1.15rem; font-weight: 600;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform 80ms ease, box-shadow 80ms ease, opacity 150ms ease;
}
.opt:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.opt .letter {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: 10px;
  display: grid; place-items: center; font-weight: 800;
  background: rgba(22, 10, 40, 0.25);
}
.opt .label { display: flex; flex-direction: column; gap: 0.15rem; overflow-wrap: anywhere; }
.opt .sub { font-size: 0.88rem; font-weight: 400; opacity: 0.85; }
.opt.colored { color: var(--ink); }
.options.grid .opt { flex-direction: column; align-items: flex-start; min-height: 7.5rem; }
.opt:disabled { cursor: default; opacity: 0.35; }
.opt.selected { opacity: 1; outline: 4px solid var(--paper); outline-offset: 2px; }

/* Textinmatning */
.input-row { display: flex; gap: 0.6rem; }
.input-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.2rem;
  padding: 0.9rem 1rem; border-radius: 14px; border: 3px solid var(--night-3);
  background: var(--paper); color: var(--ink);
  -webkit-user-select: text; user-select: text;
}
.input-row input:focus { outline: none; border-color: var(--marquee); }

/* Vanliga knappar */
.actions { display: flex; flex-direction: column; gap: 0.7rem; margin-top: auto; padding-top: 0.5rem; }
.btn {
  border: 0; cursor: pointer; font-size: 1.15rem; font-weight: 800;
  padding: 1rem 1.2rem; border-radius: 16px;
  background: var(--night-3); color: var(--paper);
  box-shadow: 0 5px 0 var(--ink);
}
.btn.primary { background: var(--marquee); color: var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: 0.5; }

.abort {
  align-self: center; background: none; border: 0; color: var(--paper-dim);
  font-size: 0.9rem; text-decoration: underline; padding: 0.6rem; cursor: pointer;
}

/* Gå med-skärmen */
.join { display: flex; flex-direction: column; gap: 1.2rem; flex: 1; justify-content: center; }
.join .sticker { font-size: 3.4rem; align-self: flex-start; margin-bottom: 0.6rem; }
.join label { font-weight: 600; font-size: 1.1rem; }
.join .error { color: var(--coral); font-weight: 600; margin: 0; }
.join .btn { width: 100%; }
.join input.code { font-size: 1.8rem; font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase; text-align: center; }

/* Bildknappar (Tröjkriget) */
.opt.picture { flex-direction: column; align-items: stretch; padding: 0.6rem; gap: 0.4rem; background: var(--night-3); }
.opt.picture > img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--paper); border-radius: 10px; }
.opt.picture .label { text-align: center; }
.shirt-preview { width: 78%; max-width: 20rem; align-self: center; }
.shirt-preview.small { width: 50%; }

/* Ritytan */
.drawpad { display: flex; flex-direction: column; gap: 0.7rem; }
.pad {
  width: 100%; aspect-ratio: 1; touch-action: none; display: block;
  background: var(--paper); border-radius: 16px; box-shadow: 0 6px 0 var(--ink);
}
.swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.35rem; }
.swatch { aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--night-3); padding: 0; cursor: pointer; }
.swatch.on { border-color: var(--marquee); transform: scale(1.12); }
.tools { display: flex; gap: 0.5rem; align-items: center; }
.sizes { display: flex; gap: 0.4rem; margin-right: auto; }
.size { width: 2.8rem; height: 2.8rem; border-radius: 12px; border: 3px solid transparent; background: var(--night-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.size span { display: block; border-radius: 50%; background: var(--paper); }
.size.on { border-color: var(--marquee); }
.btn.small { padding: 0.65rem 0.9rem; font-size: 1rem; }
.drawpad .error { color: var(--coral); font-weight: 600; margin: 0; min-height: 0; }
.drawpad .error:empty { display: none; }

/* Spelens bilder i VIP-listan */
.opt-icon { width: 3.6rem; height: 3.6rem; flex: none; margin: -0.4rem 0 -0.4rem -0.3rem; }
.opt:nth-child(odd) .opt-icon { transform: rotate(-5deg); }
.opt:nth-child(even) .opt-icon { transform: rotate(5deg); }