@import url("https://fonts.googleapis.com/css2?family=Rancho&display=swap");

:root{
  --bg: #0f172a; /* slate-900 */
  --panel: #111827; /* gray-900 */
  --muted: #9ca3af; /* gray-400 */
  --text: #e5e7eb; /* gray-200 */
  --brand: #38bdf8; /* sky-400 */
  --accent: #22c55e; /* green-500 */
  --primary: #8b5cf6; /* violet-500 */
  --danger: #f43f5e; /* rose-500 */
}
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text); background-image: url('../assets/Ordjakten-bakgrund.jpg');
  background-repeat: no-repeat;
  background-size:100% 100vh;
  /* radial-gradient(1200px 600px at 20% -10%, #1f2937 0%, var(--bg) 60%); */
}

.app{ max-width: 1100px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
.app__header{ display:flex; flex-wrap:wrap; gap:12px; align-items: center; justify-content: space-between; }
.brand{
	margin:0;
	padding-left: 10px;
	font-weight:700;
	font-family: Rancho;
	font-size: 3.1em;
	letter-spacing:10px;
	background: linear-gradient(45deg, var(--brand), #a78bfa);
	-webkit-background-clip: text;
	color: transparent;
	text-shadow: 0.02em 0.03em #ffe3e3, 0.05em 0.06em #177b75;
}
.controls{ display:flex; gap:12px; align-items:center; }
.lang-picker .flag{
  font-size:22px;
  background:#0b1220;
  border:1px solid #243046;
  color:#fff;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;

  /* Viktigt: emoji-kompatibla typsnitt först */
  font-family: "Twemoji Country Flags", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
               "Twemoji Mozilla", "EmojiOne Color", system-ui, sans-serif;
}

.lang-picker .flag[aria-pressed="true"]{ outline:2px solid var(--brand); }
.timer, .score{ background:#0b1220; padding:8px 12px; border:1px solid #243046; border-radius:10px; }
.score__label{ color:var(--muted); margin-right:8px; }

.btn{ border:0; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600; }
.btn--primary{ background: var(--primary); color:white; }
.btn--accent{ background: var(--accent); color:black; }
.btn--ghost{ background: transparent; color: var(--text); border:1px solid #2b354d; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

.app__main{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; }
.panel{ grid-column: span 12; background: #0b1220aa; border:1px solid #1f2a44; border-radius:18px; padding:14px; box-shadow: 0 10px 30px #0006; }
.panel__header{ display:flex; align-items:center; justify-content: space-between; margin-bottom:10px; }
.panel h2{ margin:0; font-size: 18px; color:#dbeafe; font-weight:700; }

.panel--currentword{ grid-column: span 7; }
.panel--letters{ grid-column: span 5; }
.panel--usedwords{ grid-column: span 7; }
.panel--highscore{ grid-column: span 5; }

@media (max-width: 900px){
  .panel--currentword, .panel--letters, .panel--usedwords, .panel--highscore{ grid-column: span 12; }
}

.phase-banner{ margin-bottom:8px; padding:8px 10px; background:#10213a; border:1px dashed #23406e; border-radius:10px; color:#cde9ff; }
.current-word{ min-height:56px; display:flex; align-items:center; font-size:28px; letter-spacing:4px; padding:8px 10px; border-radius:12px; background:#0b1220; border:1px dashed #223055; }
.feedback{ min-height: 20px; margin-top:8px; font-weight:600; }
.feedback.ok{ color: #86efac; }
.feedback.err{ color: #fca5a5; }

.letters{ display:grid; grid-template-columns: repeat(7, 1fr); gap:7px; }
.tile{ aspect-ratio:1 / 1; width:80%; border-radius:16px; background: linear-gradient(180deg, #1a2440, #0f1629); color:#e2e8f0; border:1px solid #243046; font-weight:800; font-size:22px; box-shadow: inset 0 -6px 0 #0008, 0 6px 12px #0008; transition: transform .06s ease; }
.tile:hover{ transform: translateY(-2px); }
.tile--used{ filter: grayscale(1) brightness(0.6); }

.used-words{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; max-height: 260px; overflow:auto; }
.used-words li{ background:#0b1220; border:1px solid #1e2b48; padding:8px 10px; border-radius:10px; }

.highscores{ padding-left:29px; margin:0; max-height:260px; overflow:auto; }

.app__footer{ display:flex; gap:12px; align-items:center; justify-content: space-between; flex-wrap:wrap; }
.submit-score{ display:flex; gap:10px; align-items:center; }
.submit-score[hidden]{ display:none; }
.submit-score input{ background:#0b1220; color:var(--text); border:1px solid #243046; padding:10px 12px; border-radius:12px; }
.muted{ color: var(--muted); }

/* iOS-like switch */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; margin: 0 8px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#243046; transition:.2s; border-radius:26px; }
.slider:before{ position:absolute; content:""; height:20px; width:20px; left:3px; bottom:3px; background:white; transition:.2s; border-radius:50%; }
input:checked + .slider { background: #38bdf8; }
input:checked + .slider:before { transform: translateX(20px); }

.rubrik {
  font-size: 6rem;
  line-height: 1;
  font-family: Rancho;
  font-weight: bold;
  text-shadow: 0.02em 0.03em #fff, 0.05em 0.06em #1ba29a;
}