* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #111;
  color: #fff;
  font-family: "LG Smart UI", "Museo Sans", Arial, sans-serif;
}

/* Reading area — TV safe area keeps text away from edges */
#reader {
  position: absolute;
  inset: 54px 96px;
  overflow: hidden;
}
#text {
  font-size: 44px;
  line-height: 1.6;
  max-width: 1500px;
  margin: 0 auto;
  transition: transform 0.2s ease-out;
}
#text p { margin-bottom: 1em; }
#text .story-title { font-size: 1.5em; margin-bottom: 0.8em; }
#text .story-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.35em; margin: 0 0.45em 0 0; }
#text[dir="rtl"] .story-icon { margin: 0 0 0 0.45em; }
#text .story-icon svg { width: 100%; height: 100%; display: block; }
/* Arabic stories: right-to-left, with an Arabic-friendly font stack */
#text[dir="rtl"] {
  font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", "Tahoma", "Arial", sans-serif;
  line-height: 1.9;
}
#text .story-end { color: #aaa; font-size: 0.7em; text-align: center; margin-top: 1.5em; }

/* Bars overlay */
#bars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Panels */
#panel, #disclaimer {
  position: absolute;
  background: rgba(20, 20, 20, 0.95);
  border: 2px solid #444;
  border-radius: 16px;
  padding: 48px 56px;
  z-index: 10;
}
#panel { right: 96px; top: 96px; width: 760px; }
#disclaimer { left: 50%; top: 50%; width: 1100px; transform: translate(-50%, -50%); }
#disclaimer p { font-size: 34px; line-height: 1.5; margin-bottom: 24px; }

h1 { font-size: 48px; margin-bottom: 32px; }

#settings { list-style: none; }
#settings li {
  display: flex;
  justify-content: space-between;
  font-size: 31px;
  padding: 7px 24px;
  border-radius: 10px;
}
#settings li.focused { background: #2b5cff; }
#settings .swatch {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 6px;
  vertical-align: middle;
  margin-right: 12px;
}
#settings .value::before { content: "◀  "; opacity: 0.6; }
#settings .value::after  { content: "  ▶"; opacity: 0.6; }

/* Home menu */
#menu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#menu .title { font-size: 64px; margin-bottom: 26px; }
/* 4 x 3 grid of tiles (flex-wrap rather than CSS grid, for older webOS browsers) */
#menu-list { list-style: none; width: 1658px; display: flex; flex-wrap: wrap; }
#menu-list li {
  width: 392px;
  height: 232px;
  margin: 0 30px 22px 0;
  border: 4px solid #555;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#menu-list li:nth-child(4n) { margin-right: 0; }
#menu-list li .icon { width: 92px; height: 92px; margin-bottom: 10px; }
#menu-list li .icon svg { width: 100%; height: 100%; display: block; }
#menu-list li .label { font-size: 40px; font-weight: bold; }
#menu-list li .sub { font-size: 25px; color: #aaa; margin-top: 6px; }
#menu-list li.focused { border-color: #fff; background: #333; }
#menu .hint { font-size: 30px; margin-top: 4px; }

/* Game canvas */
#game { position: absolute; inset: 0; }
#game-hint {
  position: absolute;
  bottom: 18px;
  width: 100%;
  text-align: center;
  font-size: 30px;
  color: #ccc;
  z-index: 5;
}

.hint { font-size: 26px; color: #aaa; margin-top: 28px; }
.hidden { display: none !important; }

/* ---------- Colour test & picker ---------- */
#calib {
  position: absolute;
  left: 0; top: 0; width: 1920px; height: 1080px;
  padding: 44px 96px 0;
  background: #111;
  z-index: 20;
}
#calib h1 { font-size: 56px; margin-bottom: 12px; }
.calib-intro { font-size: 28px; color: #bbb; max-width: 1600px; line-height: 1.4; margin-bottom: 30px; }
.calib-tests { display: flex; justify-content: space-between; }
.calib-test { display: flex; width: 850px; }
.calib-square {
  position: relative;
  width: 380px; height: 380px;
  flex: none;
  background: #111;
  border: 3px solid #444;
  margin-right: 34px;
}
.calib-cat { position: absolute; left: 40px; top: 30px; width: 300px; height: 300px; }
.calib-filter { position: absolute; left: 0; top: 0; right: 0; bottom: 0; mix-blend-mode: multiply; }
.calib-side { flex: 1; }
.calib-side h2 { font-size: 40px; margin-bottom: 8px; }
.calib-how { font-size: 24px; color: #bbb; line-height: 1.35; margin-bottom: 18px; }
.calib-swatch-row { display: flex; align-items: center; margin-bottom: 12px; }
.calib-swatch {
  position: relative;
  width: 64px; height: 64px;
  border: 3px solid #fff; border-radius: 10px;
  margin-right: 18px; cursor: pointer; overflow: hidden;
}
.calib-swatch input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.calib-hex { font-size: 36px; font-family: monospace; }
.calib-row { border-radius: 10px; padding: 8px 14px; margin-bottom: 6px; border: 3px solid transparent; }
.calib-row.focused { border-color: #fff; background: #2a2a2a; }
.calib-slider { display: flex; align-items: center; cursor: pointer; }
.calib-ch { font-size: 30px; font-weight: bold; width: 40px; }
.calib-track { flex: 1; height: 22px; background: #333; border-radius: 11px; overflow: hidden; margin: 0 16px; }
.calib-fill { height: 100%; }
.calib-val { font-size: 28px; width: 64px; text-align: right; font-family: monospace; }
.calib-btn { font-size: 28px; display: inline-block; cursor: pointer; background: #222; }
.calib-actions { margin-top: 26px; }
.calib-actions .calib-btn { margin-right: 20px; padding: 14px 30px; font-size: 32px; }
.calib-done { background: #2b5cff; }
#calib .hint { font-size: 26px; margin-top: 16px; }

/* ---------- Story list ---------- */
#library { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; padding: 40px 96px 0; }
#library h1 { font-size: 56px; margin-bottom: 24px; }
.lib-grid { list-style: none; display: flex; flex-wrap: wrap; width: 1728px; }
.lib-grid li {
  width: 324px; height: 196px;
  margin: 0 27px 20px 0;
  border: 4px solid #555; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 12px; cursor: pointer;
}
.lib-grid li:nth-child(5n) { margin-right: 0; }
.lib-grid li.focused { border-color: #fff; background: #333; }
.lib-icon { width: 80px; height: 80px; margin-bottom: 8px; }
.lib-icon svg { width: 100%; height: 100%; display: block; }
.lib-title { font-size: 25px; font-weight: bold; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.lib-lang { font-size: 20px; color: #aaa; margin-top: 4px; }
#library .hint { font-size: 26px; margin-top: 6px; }