/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  --bg:          #070e1b;
  --surface:     #0c1525;
  --surface2:    #111e33;
  --border:      #1e2d47;
  --accent:      #7c6af7;
  --accent-dim:  rgba(124,106,247,.18);
  --text:        #e8eaf0;
  --muted:       #6b7a99;

  /* Tile colours */
  --hit:         #22c55e;   /* green  – correct position */
  --hit-bg:      #14532d;
  --place:       #fbbf24;   /* amber  – wrong position  */
  --place-bg:    #451a03;
  --miss:        #374151;   /* gray   – not in word     */
  --miss-bg:     #1c2636;
  --tile-empty:  #1a2540;
  --tile-border: #2a3d5a;

  --radius:      12px;
  --radius-sm:   8px;
  --font:        system-ui, -apple-system, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── Screens ───────────────────────────────────────────────────── */
.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px env(safe-area-inset-bottom, 8px);
}

/* Sikrer at hidden-attributtet virker selv om .screen har display:flex */
.screen[hidden] { display: none; }

.screen--game {
  padding: 8px 8px env(safe-area-inset-bottom, 8px);
  gap: 6px;
  justify-content: space-between;
}

.screen--result {
  justify-content: center;
  gap: 24px;
}

/* ── Back link ─────────────────────────────────────────────────── */
.back-link {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 8px;
}
.back-link:hover { color: var(--text); }

/* ── Top bar / Logo ────────────────────────────────────────────── */
.top-bar {
  width: 100%;
  max-width: 420px;
  text-align: center;
  padding: 24px 0 16px;
}

.logo {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--text);
}
.logo span { color: var(--accent); }

.tagline {
  margin-top: 6px;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Card ──────────────────────────────────────────────────────── */
.card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Form elements ─────────────────────────────────────────────── */
.field-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.text-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  padding: 10px 14px;
  outline: none;
  transition: border-color .18s;
}
.text-input:focus { border-color: var(--accent); }
.text-input::placeholder { color: var(--muted); }

.text-input--code {
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.text-input--link {
  font-size: .78rem;
  color: var(--muted);
  cursor: default;
  flex: 1;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-ghost, .btn-small {
  font-family: var(--font);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-small:active { transform: scale(.97); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  padding: 12px 20px;
  width: 100%;
}
.btn-primary:disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
  padding: 12px 20px;
  width: 100%;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  font-size: .88rem;
  padding: 8px 12px;
  width: 100%;
  text-align: center;
}
.btn-ghost:hover { color: var(--text); }
.btn-share { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); padding: 8px 0; transition: color .15s; }
.btn-share:hover { color: var(--text); }
.btn-share svg { flex-shrink: 0; }

.btn-small {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .78rem;
  padding: 8px 12px;
  white-space: nowrap;
}

/* ── Divider ───────────────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .78rem;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Error text ────────────────────────────────────────────────── */
.error-text {
  color: #f87171;
  font-size: .85rem;
  text-align: center;
  min-height: 1.2em;
}

/* ── Lobby ─────────────────────────────────────────────────────── */
.lobby-code-block {
  text-align: center;
  padding: 16px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.btn-del {
  font-size: .85rem;
  padding: 9px 22px;
  margin-top: 6px;
}
.lobby-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.lobby-code {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--accent);
  line-height: 1;
}

.lobby-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.players-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 8px;
}
.player-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.player-badge {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
}
.player-badge--host  { background: rgba(124,106,247,.2); color: var(--accent); }
.player-badge--guest { background: rgba(34,197,94,.15); color: #4ade80; }

.player-name {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  word-break: break-word;
}
.player-name--waiting { color: var(--muted); font-style: italic; font-weight: 400; }

.vs-label {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--accent);
  flex-shrink: 0;
}

.waiting-text {
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
  padding: 4px 0;
}

/* ── Opponent bar ──────────────────────────────────────────────── */
.opp-bar {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  flex-shrink: 0;
}

.opp-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.opp-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.opp-name  { font-size: .88rem; font-weight: 700; color: var(--text); }
.opp-status {
  margin-left: auto;
  font-size: .75rem;
  color: var(--muted);
}
.opp-status--won  { color: var(--hit); }
.opp-status--lost { color: #f87171; }

.opp-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.opp-row {
  display: flex;
  gap: 3px;
}
.opp-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.opp-dot--hit   { background: var(--hit); }
.opp-dot--place { background: var(--place); }
.opp-dot--miss  { background: var(--miss); }

/* ── Game feedback toast ───────────────────────────────────────── */
.game-feedback {
  height: 24px;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  color: #fbbf24;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
}
.game-feedback.fade {
  animation: fadeOut 1.8s ease forwards;
}
@keyframes fadeOut {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Board ─────────────────────────────────────────────────────── */
.board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 5px;
  width: min(300px, calc(100vw - 32px));
  height: min(360px, calc(100vw - 32px) * 1.2);
  flex-shrink: 0;
}

/* ── Tile ──────────────────────────────────────────────────────── */
.tile {
  background: var(--tile-empty);
  border: 2px solid var(--tile-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  user-select: none;
  transition: border-color .08s;
  position: relative;
  perspective: 250px;
}

.tile.filled { border-color: var(--muted); }

/* Flip animation */
.tile.flip {
  animation: flip 440ms ease forwards;
}
@keyframes flip {
  0%   { transform: rotateX(0);    }
  49%  { transform: rotateX(90deg); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0);    }
}

/* Final state after flip — coloured  */
.tile.revealed { border-color: transparent; }
.tile.hit   { background: var(--hit-bg);   color: var(--hit); }
.tile.place { background: var(--place-bg); color: var(--place); }
.tile.miss  { background: var(--miss-bg);  color: var(--muted); }

/* Shake on invalid word */
.tile.shake {
  animation: shake 360ms ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* ── Keyboard ──────────────────────────────────────────────────── */
.keyboard {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  padding-bottom: 4px;
}

.key-row {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.key {
  font-family: var(--font);
  font-weight: 700;
  font-size: .78rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  height: 44px;
  background: var(--surface2);
  color: var(--text);
  min-width: 30px;
  flex: 1;
  max-width: 38px;
  transition: background .12s, color .12s, transform .08s;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.key:active { transform: scale(.93); }

.key-enter,
.key-backspace {
  min-width: 50px;
  max-width: 60px;
  font-size: .7rem;
  flex: 1.5;
}

/* Coloured key states */
.key.hit   { background: var(--hit-bg);   color: var(--hit); }
.key.place { background: var(--place-bg); color: var(--place); }
.key.miss  { background: var(--miss);     color: #4b5563; }

/* ── Leave button ──────────────────────────────────────────────── */
.btn-leave {
  font-size: .78rem;
  padding: 4px 8px;
  height: auto;
  width: auto;
}

/* ── Game top bar (sound toggle) ───────────────────────────────── */
.game-top-bar {
  width: 100%;
  max-width: calc(var(--cell) * 7 + var(--cell-gap) * 6 + 24px);
  display: flex;
  justify-content: flex-end;
}

.btn-sound {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  padding: 2px 4px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .15s;
  line-height: 1;
}
.btn-sound:hover  { opacity: 0.9; }
.btn-sound--muted { opacity: 0.30; }

/* ── Result screen ─────────────────────────────────────────────── */
.result-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.result-emoji { font-size: 3.5rem; line-height: 1; }
.result-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text);
}
.result-word {
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.result-boards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 320px;
}

.mini-board {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.mini-name {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 4px;
}

.mini-row {
  display: flex;
  gap: 5px;
}

.mini-tile {
  flex: 1;
  height: 32px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text);
  background: var(--tile-empty);
}
.mini-tile--hit   { background: var(--hit-bg);   color: var(--hit); }
.mini-tile--place { background: var(--place-bg); color: var(--place); }
.mini-tile--miss  { background: var(--miss);     color: #4b5563; }

.result-score {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  letter-spacing: .04em;
  padding: 4px 16px;
  min-height: 1.6em;
}

.result-actions {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Scrollable screens ────────────────────────────────────────── */
.screen--result {
  overflow-y: auto;
}

/* ── Responsive tweaks ─────────────────────────────────────────── */
@media (max-height: 700px) {
  .board {
    width: min(260px, calc(100vw - 32px));
    height: min(312px, calc(100vw - 32px) * 1.2);
    gap: 4px;
  }
  .key { height: 38px; }
  .opp-bar { padding: 6px 10px; }
}

@media (max-height: 580px) {
  .board {
    width: min(220px, calc(100vw - 32px));
    height: min(264px, calc(100vw - 32px) * 1.2);
    gap: 3px;
  }
  .key { height: 34px; font-size: .7rem; }
}

/* ── Invite-seksjon i lobby ────────────────────────────────────── */
.invite-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
}

.invite-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.invite-status {
  font-size: .82rem;
  min-height: 1.2em;
  color: var(--muted);
}
.invite-status--pending  { color: #fbbf24; }
.invite-status--accepted { color: #4ade80; }
.invite-status--error    { color: #f87171; }


/* ── Nettverksbanner ───────────────────────────────────────────── */
.net-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 9px 16px;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  animation: bannerIn .2s ease;
}
.net-banner--offline { background: #ef4444; color: #fff; }
.net-banner--warn    { background: #f59e0b; color: #000; }
.net-banner--ok      { background: #22c55e; color: #fff; }

@keyframes bannerIn {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* ── Game toast ────────────────────────────────────────────────── */
.game-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 400;
  pointer-events: none;
  animation: toastSlideIn .2s ease;
}
.game-toast--warn { border-left-color: #f59e0b; }
.game-toast--err  { border-left-color: #ef4444; }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}