/* =====================================================================
   NIMBOSA – nimbosa.css  (the look of every page in the game)
   Shared by all worlds. Colours are set once at the top (light and dark mode).
   v4 (2026-10-19): the joystick (.stick) replaces the four arrow buttons (.dpad).
   v5 (2026-10-28): the "Klasskod" box (#fCode) and the teacher link (.teacher-link)
                    in the login window.
   v6 (2026-10-28): "Välkommen till Nimbosa" and Molnkompis in the login window
                    (.authhead and everything that starts with .molnkompis / .mk-).
   ===================================================================== */
:root {
  --chip-bg: #fffaf0;
  --chip-ink: #24304d;
  --ink: #24304d;
  --accent: #1f8a7d;
  --coin: #f4b928;
  --coin-edge: #c98a0b;
  --btn-bg: #ffd35a;
  --btn-ink: #24304d;
  --page: #3f9fd2;
  --parch: #f1eaff;
  --mystic: #5b3fa8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chip-bg: #1f2a44;
    --chip-ink: #fdf3da;
    --ink: #fdf3da;
    --accent: #5fd4c4;
    --btn-bg: #f4b928;
    --btn-ink: #1a2238;
    --page: #1d5d85;
    --parch: #2a2547;
    --mystic: #c9b3ff;
  }
}
:root[data-theme="dark"] {
  --chip-bg: #1f2a44;
  --chip-ink: #fdf3da;
  --ink: #fdf3da;
  --accent: #5fd4c4;
  --btn-bg: #f4b928;
  --btn-ink: #1a2238;
  --page: #1d5d85;
  --parch: #2a2547;
  --mystic: #c9b3ff;
}
:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); height: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--page);
  font-family: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--chip-ink);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
#game { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }

.hud { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; gap: 12px; }
.chip {
  background: var(--chip-bg); color: var(--chip-ink);
  border: 3px solid var(--ink); border-radius: 999px;
  padding: 4px 16px; font-weight: 600; font-size: 20px; line-height: 1.3;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.coin-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe48a 0 30%, var(--coin) 31%);
  border: 2.5px solid var(--coin-edge); position: relative; flex: none;
}
.coin-icon::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--coin-edge); border-radius: 50%; opacity: .55; }
#coinChip.bump { animation: bump .35s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

#hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  max-width: calc(100% - 24px); text-align: center; pointer-events: none;
  transition: opacity .8s ease; font-size: 17px;
}
#hint.gone { opacity: 0; }

#dialog {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(680px, calc(100% - 24px));
  background: var(--chip-bg); color: var(--chip-ink);
  border: 3px solid var(--ink); border-radius: 18px;
  padding: 14px 18px 16px; box-shadow: 0 5px 0 rgba(0,0,0,.28);
  display: none; z-index: 5;
}
#dialog.open { display: block; }
#dialog .who { font-weight: 600; font-size: 18px; color: var(--accent); margin-bottom: 4px; }
#dialog .text { font-size: 21px; line-height: 1.35; margin-bottom: 12px; max-width: 60ch; }
#dialog .choices { display: flex; flex-wrap: wrap; gap: 10px; }
#dialog button {
  font: inherit; font-weight: 600; font-size: 20px; min-width: 64px; min-height: 48px;
  padding: 8px 20px; border-radius: 14px; border: 3px solid var(--ink);
  background: var(--btn-bg); color: var(--btn-ink); cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.28); touch-action: manipulation;
}
#dialog button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
#dialog button:disabled { opacity: .55; cursor: default; }
#dialog button:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }

#touch { display: none; }
body.touch #touch { display: block; }
body.dialog-open #touch { display: none; }

/* ---------- the joystick (touch screens) ----------
   .stick       the area that listens to the thumb (a bit bigger than the ring, so a thumb
                that lands just outside the ring still works)
   .stick-ring  the round ring with four small arrows, so it is clear which way is which
   .stick-knob  the knob that follows the thumb (moved by motor.js); yellow while it is held */
.stick {
  position: absolute; left: 6px; bottom: 6px; width: 200px; height: 200px;
  touch-action: none; -webkit-touch-callout: none;
}
.stick-ring {
  position: absolute; left: 25px; top: 25px; width: 150px; height: 150px; border-radius: 50%;
  border: 3px solid var(--ink); background: var(--chip-bg); color: var(--chip-ink);
  opacity: .72; box-shadow: 0 3px 0 rgba(0,0,0,.25); pointer-events: none;
}
.stick-ring svg { display: block; width: 100%; height: 100%; fill: currentColor; opacity: .45; }
.stick.on .stick-ring { opacity: .85; }
.stick-knob {
  position: absolute; left: 68px; top: 68px; width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--ink); background: var(--chip-bg); pointer-events: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.3), inset 0 -6px 0 rgba(0,0,0,.08);
}
.stick:not(.on) .stick-knob { transition: transform .15s ease-out; }   /* slides back to the middle */
.stick.on .stick-knob { background: var(--btn-bg); }
/* small screens (a phone, or a small window): a smaller joystick */
@media (max-height: 520px), (max-width: 520px) {
  .stick { transform: scale(.8); transform-origin: left bottom; }
}

.act {
  position: absolute; border: 3px solid var(--ink); background: var(--chip-bg); color: var(--chip-ink);
  opacity: .88; font: inherit; font-weight: 600; touch-action: none; padding: 0;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.act.on { background: var(--btn-bg); color: var(--btn-ink); }
.act { right: 18px; bottom: 34px; width: 88px; height: 88px; border-radius: 50%; font-size: 26px; }

[hidden] { display: none !important; }
#coinChip { margin-left: auto; }
#nameChip { font-size: 18px; }
#nameChip button {
  font: inherit; font-size: 15px; font-weight: 500; margin-left: 4px; padding: 2px 12px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink);
  cursor: pointer; pointer-events: auto;
}
#nameChip button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
body.auth-open #touch, body.auth-open #hint { display: none; }

#auth {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  padding: 12px; background: rgba(20, 40, 70, .6); z-index: 10; overflow: auto;
}
#auth.open { display: flex; }
#auth .card {
  width: min(500px, 100%); max-height: 100%; overflow: auto; margin: auto;
  background: var(--chip-bg); color: var(--chip-ink);
  border: 3px solid var(--ink); border-radius: 22px; padding: 18px 20px 20px;
  box-shadow: 0 6px 0 rgba(0,0,0,.3);
}
/* The top of the login window: the heading, and (on narrow screens) a small Molnkompis next to it. */
#auth .authhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
#auth h1 { font-size: clamp(25px, 6.4vw, 32px); line-height: 1.15; font-weight: 600; margin: 0; }
.tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tab {
  flex: 1; font: inherit; font-weight: 600; font-size: 18px; min-height: 46px; padding: 6px 10px;
  border: 3px solid var(--ink); border-radius: 14px; background: transparent; color: var(--chip-ink); cursor: pointer;
}
.tab.on { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
#auth .help { margin: 0 0 10px; font-size: 18px; line-height: 1.35; }
#auth label, #auth .lbl { display: block; font-weight: 600; font-size: 18px; margin: 10px 0 4px; }
#auth input {
  font: inherit; font-size: 24px; width: 100%; padding: 8px 12px; border: 3px solid var(--ink);
  border-radius: 14px; background: #fff; color: #24304d;
}
#auth input:focus-visible, .tab:focus-visible, #auth button:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
/* The class code is shown in capitals with a little space between the letters (SOL47),
   whatever the student types. The server cleans it the same way. */
#fCode { text-transform: uppercase; letter-spacing: .08em; }
.passrow { display: flex; gap: 8px; }
.passrow input { flex: 1; min-width: 0; }
/* The password box is a normal text box that shows dots. Browsers then don't treat it as a
   password field, so they don't warn about "leaked" passwords or offer to save them
   (important on shared school computers). */
#fPass.masked { -webkit-text-security: disc; text-security: disc; }
#auth .small {
  font: inherit; font-weight: 600; font-size: 16px; padding: 0 14px; border: 3px solid var(--ink);
  border-radius: 14px; background: transparent; color: var(--chip-ink); cursor: pointer;
}
#avatarGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#avatarGrid button {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 6px;
  font: inherit; font-weight: 500; font-size: 16px; color: var(--chip-ink);
  border: 3px solid var(--ink); border-radius: 14px; background: transparent; cursor: pointer;
}
#avatarGrid button.sel { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
#avatarGrid canvas { width: 96px; height: 110px; }
#fErr {
  margin-top: 12px; padding: 8px 12px; border: 2px solid #b3261e; border-radius: 12px;
  background: #ffe3e0; color: #7a1610; font-size: 18px; font-weight: 500;
}
#auth .primary {
  width: 100%; margin-top: 14px; font: inherit; font-weight: 600; font-size: 22px; min-height: 54px;
  border: 3px solid var(--ink); border-radius: 16px; background: var(--btn-bg); color: var(--btn-ink);
  cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.28);
}
#auth .primary:disabled { opacity: .6; cursor: wait; }
/* The small, quiet link for teachers at the bottom of the login window (opens larare.php). */
#auth .teacher-link { margin: 14px 0 0; text-align: center; font-size: 16px; }
#auth .teacher-link a { color: var(--chip-ink); opacity: .7; }
#auth .teacher-link a:hover { opacity: 1; }
#auth .teacher-link a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; opacity: 1; }

/* ---------- Molnkompis in the login window (since v6) ----------
   motor.js puts TWO of them in the login window, and only one shows at a time:
     .mk-side  big, floats BESIDE the login window, with a soft shadow under it
               (big screens: computers, iPad lying down)
     .mk-head  small, next to the heading inside the login window
               (narrow screens: phones, iPad standing up, a small browser window)
   Inside each:  .mk-bob = the part that floats up and down,  svg = the cloud (hops when tapped),
   .mk-drop = the three raindrops (they fall),  .mk-eyes = the eyes (they blink now and then).
   Change the numbers below to tweak it: the size (width), how far up it floats (-12px)
   and how fast (3.4s = one slow float up and down). */
.molnkompis { cursor: pointer; -webkit-touch-callout: none; touch-action: manipulation; }
.molnkompis svg { display: block; width: 100%; height: auto; overflow: visible; }
.mk-head { flex: none; width: 66px; margin: -6px 0 -4px; }
.mk-side {
  display: none; position: absolute; width: 150px;
  /* the middle of the screen, minus half the login window (250px), minus the cloud and a gap (176px) */
  left: calc(50% - 250px - 176px);
  top: max(16px, calc(50% - 250px));
}
.mk-shadow { width: 84px; height: 14px; margin: 2px auto 0; border-radius: 50%; background: rgba(0, 0, 0, .22); }
/* Enough room beside the login window? Then the big one shows and the small one hides. */
@media (min-width: 880px) and (min-height: 560px) {
  .mk-side { display: block; }
  .mk-head { display: none; }
}
.mk-bob { animation: mkFloat 3.4s ease-in-out infinite; }
.mk-head .mk-bob { animation-name: mkFloatSmall; }
.mk-shadow { animation: mkShadow 3.4s ease-in-out infinite; }   /* same time as the float: smaller when the cloud is higher up */
@keyframes mkFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes mkFloatSmall { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mkShadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.78); opacity: .55; } }
.molnkompis .mk-eyes { transform-box: fill-box; transform-origin: center; animation: mkBlink 5s infinite; }
@keyframes mkBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.molnkompis .mk-drop { opacity: 0; animation: mkRain 1.5s linear infinite; }
.molnkompis .mk-drop:nth-child(2) { animation-delay: .5s; }
.molnkompis .mk-drop:nth-child(3) { animation-delay: 1s; }
@keyframes mkRain { 0% { transform: translateY(-3px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
/* the happy hop when Molnkompis is tapped: squash, jump, land, a small bounce */
.molnkompis svg.hop { animation: mkHop .7s ease-out; }
@keyframes mkHop {
  0%, 100% { transform: translateY(0) scale(1); }
  15% { transform: translateY(2%) scale(1.07, .9); }
  40% { transform: translateY(-22%) scale(.95, 1.06); }
  65% { transform: translateY(0) scale(1.06, .94); }
  80% { transform: translateY(-5%) scale(1); }
}

/* Shops, Tabelltornet, Arkaden, Mystiska stugan and Spelhuset share the same pop-up window style */
body.shop-open #touch, body.shop-open #hint,
body.hall-open #touch, body.hall-open #hint,
body.arcade-open #touch, body.arcade-open #hint,
body.cottage-open #touch, body.cottage-open #hint,
body.spel-open #touch, body.spel-open #hint { display: none; }
#shop, #hall, #arcade, #cottage, #spelhus {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  padding: 12px; background: rgba(20, 40, 70, .6); z-index: 9; overflow: auto;
}
#shop.open, #hall.open, #arcade.open, #cottage.open, #spelhus.open { display: flex; }
#shop .card, #hall .card, #arcade .card, #cottage .card, #spelhus .card {
  width: min(660px, 100%); max-height: 100%; overflow: auto; margin: auto;
  background: var(--chip-bg); color: var(--chip-ink);
  border: 3px solid var(--ink); border-radius: 22px; padding: 16px 18px 18px;
  box-shadow: 0 6px 0 rgba(0,0,0,.3);
}
.shophead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.shophead h1 { margin: 0; font-size: 30px; font-weight: 600; }
#shop .help, #hall .help, #arcade .help, #cottage .help, #spelhus .help { margin: 6px 0 10px; font-size: 18px; line-height: 1.35; }
#petList { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pet {
  border: 3px solid var(--ink); border-radius: 16px; padding: 8px 8px 10px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
}
.pet.active { background: var(--btn-bg); color: var(--btn-ink); }
.pet canvas { width: 150px; height: 130px; }
.pet .pname { font-weight: 600; font-size: 21px; }
.pet .pdesc { font-size: 16px; min-height: 22px; }
.pet .price { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 21px; margin: 4px 0 6px; }
.pet .owned { font-weight: 500; font-size: 17px; margin: 4px 0 6px; min-height: 31px; }
.pbtn {
  font: inherit; font-weight: 600; font-size: 18px; min-height: 46px; width: 100%; padding: 6px 10px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--btn-bg); color: var(--btn-ink);
  cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.pet.active .pbtn { background: var(--chip-bg); color: var(--chip-ink); }
.pbtn.confirm { background: #ff8a65; color: #24304d; }
.pbtn:disabled { opacity: .6; cursor: default; box-shadow: none; }
.pbtn:focus-visible, #shop .small:focus-visible, #hall .small:focus-visible, #arcade .small:focus-visible, #cottage .small:focus-visible, #spelhus .small:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
#shopMsg, #arcadeMsg, #spelMsg {
  margin-top: 12px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--btn-bg); color: var(--btn-ink); font-size: 18px; font-weight: 500;
}
.shopfoot { display: flex; gap: 10px; justify-content: space-between; margin-top: 14px; flex-wrap: wrap; }
#shop .small, #hall .small, #arcade .small, #cottage .small, #spelhus .small {
  font: inherit; font-weight: 600; font-size: 17px; min-height: 46px; padding: 0 16px; border: 3px solid var(--ink);
  border-radius: 14px; background: transparent; color: var(--chip-ink); cursor: pointer; touch-action: manipulation;
}
#shop .small.main, #hall .small.main, #arcade .small.main, #cottage .small.main, #spelhus .small.main { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.shopfoot .push { margin-left: auto; }

/* ---------- Tabelltornet ---------- */
#tableGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 540px) { #tableGrid { grid-template-columns: repeat(3, 1fr); } }
.tbtn {
  font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 88px; padding: 8px 4px; border: 3px solid var(--ink); border-radius: 16px;
  background: var(--btn-bg); color: var(--btn-ink); cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.25); touch-action: manipulation;
}
.tbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.tbtn:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
.tbtn .tnum { font-size: 28px; font-weight: 600; line-height: 1.1; }
.tbtn .treward { display: inline-flex; align-items: center; gap: 5px; font-size: 18px; font-weight: 600; }
#hallMsg {
  margin-top: 12px; padding: 8px 12px; border-radius: 12px; font-size: 18px; font-weight: 500;
  background: #ffe3e0; color: #7a1610; border: 2px solid #b3261e;
}

.qtop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 19px; font-weight: 600; }
.qtop #qTable { color: var(--accent); }
#qDots { display: flex; gap: 6px; margin: 8px 0 4px; }
#qDots span { flex: 1; height: 12px; border-radius: 99px; border: 2px solid var(--ink); }
#qDots span.on { background: var(--accent); }
.qrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 10px; flex-wrap: wrap; }
#qText { font-size: 50px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
#qAnswer {
  min-width: 120px; padding: 2px 14px; text-align: center;
  font-size: 50px; font-weight: 600; line-height: 1.2;
  border: 3px solid var(--ink); border-radius: 16px; background: #fff; color: #24304d;
}
#qAnswer.empty { color: #9aa3b5; }
#qAnswer.right { background: #c9f2d4; border-color: #1e7a3c; }
#qAnswer.wrong { background: #ffe3e0; border-color: #b3261e; }
#qFeedback {
  min-height: 58px; margin: 0 auto 10px; max-width: 480px; padding: 6px 12px; border-radius: 12px;
  text-align: center; font-size: 20px; font-weight: 500; line-height: 1.3;
  display: flex; align-items: center; justify-content: center;
}
#qFeedback.good { background: #c9f2d4; color: #145a2b; }
#qFeedback.bad { background: #ffe3e0; color: #7a1610; }
#numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 330px; margin: 0 auto; }
#numpad button {
  font: inherit; font-weight: 600; font-size: 28px; min-height: 60px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--chip-bg); color: var(--chip-ink);
  cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.25); touch-action: manipulation;
}
#numpad button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
#numpad button:disabled { opacity: .4; cursor: default; }
#numpad button:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
#numpad .ok { background: var(--btn-bg); color: var(--btn-ink); font-size: 22px; }

#hallDone { text-align: center; padding: 10px 0 4px; }
#hallDone .big { font-size: 34px; font-weight: 600; margin: 6px 0 4px; }
#hallDone p { font-size: 20px; margin: 0 0 12px; line-height: 1.35; }
#hallDone .reward { font-size: 30px; padding: 6px 22px; }
#hallDone .donebtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* ---------- Arkaden (the game cards are also used by Spelhuset) ---------- */
.ticket {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  border: 3px solid var(--ink); border-radius: 16px; padding: 10px 14px; margin-bottom: 12px;
}
.ticket.active { background: #c9f2d4; color: #145a2b; border-color: #1e7a3c; }
.ticket .tlabel { font-size: 16px; font-weight: 500; }
.ticket .tleft { font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
#arcadeBuy { width: auto; min-width: 230px; flex: 1 1 230px; max-width: 340px; }
#gameList, #spelList { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.game {
  border: 3px solid var(--ink); border-radius: 16px; padding: 10px 10px 12px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
}
.game .gicon {
  width: 120px; height: 84px; border-radius: 12px; overflow: hidden; background: #1b1735; color: #f3efff;
  display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 600;
}
.game .gicon svg { width: 100%; height: 100%; display: block; }
.game .gname { font-weight: 600; font-size: 22px; margin-top: 4px; }
.game .gdesc { font-size: 16px; min-height: 22px; margin-bottom: 6px; }
/* the game itself: covers the whole island while it is open */
#arcadePlay, #spelPlay { position: absolute; inset: 0; z-index: 20; background: #141127; }
#arcadePlay iframe, #spelPlay iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Spelhuset ---------- */
.spelbanner {
  margin: 10px 0 12px; padding: 12px 16px; border: 3px solid var(--ink); border-radius: 16px;
  background: linear-gradient(135deg, #3b82f6, #7b5bd6); color: #fffaf0; text-align: center;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.spelbanner .sbig { font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: .5px; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.spelbanner .ssub { font-size: 19px; font-weight: 500; margin-top: 2px; }
.game .gpay { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 17px; margin-bottom: 8px; }
#spelhus #spelMore { text-align: center; opacity: .75; margin: 12px 0 0; }

/* ---------- Mystiska stugan ---------- */
#cottage .shophead h1 { color: var(--mystic); }
#cotBox {
  border: 3px solid var(--ink); border-radius: 16px; padding: 12px 14px 14px;
  background: var(--parch);
}
.cottop { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 46px; }
#cotLabel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; color: var(--mystic); }
#cotLabel svg { width: 22px; height: 22px; flex: none; }
#cotRead { display: inline-flex; align-items: center; gap: 8px; }
#cotRead svg { width: 22px; height: 22px; flex: none; }
#cotText { font-size: 23px; line-height: 1.45; margin: 6px 0 14px; max-width: 60ch; min-height: 34px; }
#cotText.rest { color: var(--mystic); font-weight: 500; }
#cotOpts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { #cotOpts { grid-template-columns: 1fr; } }
.opt {
  font: inherit; font-weight: 600; font-size: 22px; min-height: 62px; padding: 8px 14px;
  display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--btn-bg); color: var(--btn-ink);
  cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.28); touch-action: manipulation;
}
.opt:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.opt:disabled { opacity: .5; cursor: default; box-shadow: none; transform: none; }
.opt:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
.opt.right { background: #c9f2d4; color: #145a2b; border-color: #1e7a3c; opacity: 1; }
.opt.wrong { background: #ffe3e0; color: #7a1610; border-color: #b3261e; opacity: 1; }
/* small number badge (1-4) that shows which key to press; only on computers with a keyboard */
.opt .okey {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border: 2px solid currentColor; border-radius: 7px;
  font-size: 14px; opacity: .65;
}
body:not(.touch) .opt .okey { display: inline-flex; }
#cotFeedback { margin-top: 12px; padding: 10px 14px; border-radius: 12px; font-size: 19px; line-height: 1.4; }
#cotFeedback.good { background: #c9f2d4; color: #145a2b; border: 2px solid #1e7a3c; }
#cotFeedback.bad { background: #ffe3e0; color: #7a1610; border: 2px solid #b3261e; }
#cotFeedback .main { font-weight: 600; font-size: 20px; }
#cotFeedback p { margin: 6px 0 0; }

/* The stars (1–3) that show the cottage's level: gold when filled, faint when empty. */
.star { display: block; flex: none; }
.star path { fill: transparent; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; opacity: .35; }
.star.on path { fill: var(--coin); stroke: var(--coin-edge); opacity: 1; }
#cotStars { display: inline-flex; gap: 1px; margin-left: 2px; }
#cotStars .star { width: 20px; height: 20px; }

/* The cottage's level page: one big button per level. */
#cotLevels { display: grid; gap: 10px; }
.cotlvl {
  font: inherit; color: var(--chip-ink); text-align: left; width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "stars text pay";
  align-items: center; gap: 6px 14px; min-height: 84px; padding: 10px 14px;
  border: 3px solid var(--ink); border-radius: 16px; background: var(--parch);
  cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.28); touch-action: manipulation;
}
.cotlvl:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.cotlvl:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
.cotlvl.cur { border-color: var(--mystic); box-shadow: 0 0 0 2px var(--mystic), 0 3px 0 rgba(0,0,0,.28); }
.cotlvl .lstars { grid-area: stars; display: inline-flex; gap: 2px; color: var(--mystic); }
.cotlvl .lstars .star { width: 30px; height: 30px; }
.cotlvl .ltext { grid-area: text; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cotlvl .lname { font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--mystic); }
.cotlvl .ldesc { font-size: 17px; line-height: 1.3; }
.cotlvl .lpay {
  grid-area: pay; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-weight: 600; font-size: 19px; padding: 4px 12px 4px 6px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink);
}
/* Narrow screens (phone, iPad split view): stars and coins on top, the text under them. */
@media (max-width: 520px) {
  .cotlvl { grid-template-columns: 1fr auto; grid-template-areas: "stars pay" "text text"; }
}

@media (prefers-reduced-motion: reduce) {
  #coinChip.bump { animation: none; }
  #hint { transition: none; }
  .stick:not(.on) .stick-knob { transition: none; }
  /* Molnkompis keeps still (no floating, blinking, rain or hop) */
  .mk-bob, .mk-shadow, .molnkompis .mk-eyes, .molnkompis svg.hop { animation: none; }
  .molnkompis .mk-drop { animation: none; opacity: 1; }
}