/*
 * Keralam Times: what every page shares (see site.js).
 * One language at a time: the other language's text is hidden.
 */
html[data-lang="ml"] [data-lang="en"],
html[data-lang="en"] [data-lang="ml"] {
  display: none !important;
}

/* ----- The bar above each game: the way home, then language, light/dark and look */
.site-bar {
  position: relative;
  z-index: 15; /* over the game, so the look menu opens on top; under its dialogs (20) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-block: 12px 4px;
}
/* The way back: an arrow and where it goes */
.sb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 36px;
  padding: 0 14px 0 8px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--key);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.sb-back svg { flex: none; }
.sb-back-text, .sb-back-short { padding-top: 2px; }
.sb-back-short { display: none; }
.sb-back:hover { border-color: var(--line-strong); }
.sb-back:active { transform: translateX(-1px); }

.sb-controls { display: flex; align-items: center; gap: 7px; flex: none; }
.sb-controls button { font: inherit; color: inherit; cursor: pointer; }

/* മലയാളം | English */
.sb-seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--key);
}
.sb-seg-btn {
  border: 0;
  padding: 4px 10px 2px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft) !important;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.35;
}
.sb-seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }

/* Light ◯──── dark: the thumb sits on the side in use, with its icon */
.sb-switch { border: 0; padding: 0; background: none; border-radius: 999px; }
.sb-switch-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 54px;
  height: 28px;
  padding-inline: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--key);
  color: var(--ink-soft);
}
.sb-switch-track svg { display: block; }
.sb-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface) no-repeat center / 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform 180ms ease;
}
.sb-switch-thumb::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--gold);
  -webkit-mask: var(--thumb-icon) no-repeat center / contain;
  mask: var(--thumb-icon) no-repeat center / contain;
}
.sb-switch { --thumb-icon: url("icons/sun.svg"); }
.sb-switch[aria-checked="true"] { --thumb-icon: url("icons/moon.svg"); }
.sb-switch[aria-checked="true"] .sb-switch-thumb { transform: translateX(26px); }

/* The look: its swatch and name, and a menu of all three */
.sb-look { position: relative; }
.sb-look-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px 0 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--key);
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 700;
  white-space: nowrap;
}
.sb-look-btn svg { display: block; color: var(--ink-soft); }
.sb-swatch {
  flex: none;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.sb-swatch[data-swatch="kasavu"] {
  background: linear-gradient(to bottom, #FBF3E1 0 52%, #C9982E 52% 70%, #FBF3E1 70% 76%, #C9982E 76% 82%, #FBF3E1 82%);
}
.sb-swatch[data-swatch="mural"] {
  background: conic-gradient(from 45deg, #A8321D 0 25%, #D69B24 0 50%, #2F6B4A 0 75%, #1F1A15 0);
}
.sb-swatch[data-swatch="backwater"] {
  background: radial-gradient(circle at 70% 28%, #F6E7A8 0 12%, transparent 13%), linear-gradient(to bottom, #BFE0DA 0 50%, #2F7C6D 50% 62%, #155650 62%);
}
.sb-look-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  width: 250px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}
.sb-look-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink) !important;
  text-align: left;
}
.sb-look-item:hover { background: var(--key); }
.sb-look-item[aria-checked="true"] { background: var(--key); box-shadow: inset 0 0 0 1.5px var(--gold); }
.sb-look-item .sb-swatch { width: 34px; height: 34px; }
.sb-look-text { display: grid; gap: 1px; line-height: 1.25; }
.sb-look-text strong { font-size: 15px; }
.sb-look-text small { color: var(--ink-soft); font-size: 12.5px; }

/* The game's name gives way before the buttons do (site.js shrinks it to fit) */
.masthead > .brand { flex: 1 1 0; min-width: 0; }
.masthead > .tools { flex: none; }
.masthead .name, .masthead .edition { white-space: nowrap; }

/* Phones: the back arrow keeps its words while there is room, the look shrinks to its swatch */
@media (max-width: 560px) {
  .sb-look-name { display: none; }
  .sb-look-btn { padding-right: 7px; gap: 4px; }
  .sb-back { padding-right: 11px; font-size: 15px; }
}
@media (max-width: 440px) {
  .sb-seg-btn { padding-inline: 8px; }
  .sb-controls { gap: 5px; }
  .sb-back { padding-right: 9px; gap: 2px; }
}
@media (max-width: 420px) {
  .sb-back-text { display: none; }
  .sb-back-short { display: inline; }
}
@media (max-width: 370px) {
  .sb-back-short { display: none; }
  .sb-back { width: 40px; padding: 0; justify-content: center; }
}

/* Short phones: the bar gives the game back some height */
@media (max-height: 740px) {
  .site-bar { padding-block: 9px 0; }
  .sb-back { height: 34px; }
  .sb-seg-btn { padding-block: 3px 1px; }
  .sb-switch-track { height: 26px; }
  .sb-switch-thumb { width: 20px; height: 20px; }
  .sb-switch[aria-checked="true"] .sb-switch-thumb { transform: translateX(28px); }
  .sb-look-btn { height: 28px; }
  .sb-look-btn .sb-swatch { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-switch-thumb { transition: none; }
}