/* ClueGrid landing page.
   One visual world, taken from the app: a bright sky with drifting letter tiles, chunky
   3D buttons with a darker edge, cream panels with brown text, a navy board with white
   letter tiles and cream clue tiles with orange arrows. Single theme on purpose. */
@font-face { font-family: 'Nunito'; src: url('assets/fonts/Nunito-Variable.ttf') format('truetype'); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('assets/fonts/Jost-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('assets/fonts/Jost-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('assets/fonts/Jost-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  --sky-top: #2D7BF0;
  --sky-bottom: #6CC3FF;
  --outline: #1B3F8A;
  --panel: #FFF7E8;
  --panel-sunken: #FBE6C8;
  --panel-ink: #7A4A1E;
  --panel-edge: #E2C9A0;
  --board: #2B3F9E;
  --tile-ink: #4F46D6;
  --good: #2E9D3A;
  --cursor: #FFC83D;
  --word: #DCE9FF;
  --arrow: #F2A100;
  --ink: #14171F;
  --display: 'Nunito', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --body: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--sky-bottom); font: 500 17px/1.55 var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cursor); outline-offset: 3px; border-radius: 8px; }

.sky { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--sky-top) 0%, #4C9CF7 45%, var(--sky-bottom) 100%); }
.sky canvas { width: 100%; height: 100%; display: block; }

/* Outlined display type, as on the app's ribbons: white letters with a navy rim. */
.outlined {
  font-family: var(--display); font-weight: 900; color: #fff; letter-spacing: .005em;
  -webkit-text-stroke: .14em var(--outline); paint-order: stroke fill;
  text-shadow: 0 .09em 0 var(--outline); text-wrap: balance;
}

/* Header */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px; padding: 10px max(16px, calc((100% - 1160px) / 2)); background: rgba(31, 95, 204, .82); backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font: 900 22px/1 var(--display); }
.brand img { width: 46px; }
.bar nav { display: flex; gap: 4px; margin-left: auto; }
.bar nav a { color: #fff; text-decoration: none; font: 800 15px/1 var(--display); padding: 9px 12px; border-radius: 10px; }
.bar nav a:hover { background: rgba(255, 255, 255, .16); }
@media (max-width: 760px) { .bar nav { display: none; } .bar .btn { margin-left: auto; } }

/* 3D buttons: a gradient face over a darker edge, pressed down on click. */
.btn { --top: #fff; --bottom: #F1F5FB; --edge: #C3CFE0; --ink: var(--outline);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none;
  font: 900 18px/1 var(--display); color: var(--ink); padding: 14px 22px; border-radius: 16px;
  background: linear-gradient(180deg, var(--top), var(--bottom)); box-shadow: 0 6px 0 var(--edge), 0 10px 18px rgba(20, 40, 110, .25);
  transition: transform .08s ease, box-shadow .08s ease; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--edge), 0 4px 8px rgba(20, 40, 110, .2); }
.btn-small { font-size: 15px; padding: 10px 14px; border-radius: 13px; box-shadow: 0 4px 0 var(--edge); }
.btn-small:active { box-shadow: 0 1px 0 var(--edge); transform: translateY(3px); }
.btn-green { --top: #72DE4F; --bottom: #3DBA2C; --edge: #268A1B; --ink: #fff; text-shadow: 0 2px 0 #1E6E14; }
.btn-yellow { --top: #FFDF5E; --bottom: #FFB800; --edge: #C98A00; --ink: #7A4A1E; }
.btn-blue { --top: #58A9FF; --bottom: #2A7BF0; --edge: #1A55B5; --ink: #fff; text-shadow: 0 2px 0 var(--outline); }
.btn-white { --ink: var(--outline); }

/* Hero */
.hero { max-width: 1160px; margin: 0 auto; padding: 36px 16px 56px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero-logo img { width: min(320px, 70vw); filter: drop-shadow(0 10px 18px rgba(18, 50, 130, .35)); }
.hero h1 { font-size: clamp(28px, 3.3vw, 42px); line-height: 1.15; margin: 8px 0 16px; }
.hero h1 span { display: block; }
@media (min-width: 921px) { .hero h1 span { white-space: nowrap; } }
.lede { color: #fff; font-size: 19px; max-width: 34em; margin: 0 0 26px; text-shadow: 0 1px 2px rgba(10, 40, 110, .35); }
@media (max-width: 920px) { .hero { grid-template-columns: 1fr; text-align: center; } .lede { margin-inline: auto; } .stores { justify-content: center; } }

.stores { display: flex; flex-wrap: wrap; gap: 14px; }
.store { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; background: #10151f; border-radius: 14px; padding: 10px 18px 10px 14px; box-shadow: 0 5px 0 #000, 0 10px 18px rgba(10, 30, 80, .3); transition: transform .08s; }
.store:active { transform: translateY(3px); box-shadow: 0 2px 0 #000; }
.store svg { width: 26px; height: 26px; fill: #fff; }
.store span { display: flex; flex-direction: column; font: 800 19px/1.1 var(--display); text-align: left; }
.store small { font: 500 11px/1.2 var(--body); opacity: .85; }

/* The playable board */
.play-card { position: relative; background: #fff; border-radius: 28px; padding: 34px 18px 18px; box-shadow: 0 0 0 6px #fff, 0 0 0 10px rgba(31, 95, 204, .55), 0 24px 40px rgba(12, 40, 110, .35); max-width: 470px; width: 100%; justify-self: center; }
.ribbon { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 900 22px/1 var(--display); color: #fff; padding: 12px 28px; border-radius: 14px; background: linear-gradient(180deg, #58A9FF, #2A7BF0); box-shadow: 0 5px 0 #1A55B5; -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; }
.board { --gap: 5px; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); padding: var(--gap); background: var(--board); border-radius: 16px; outline: none; touch-action: manipulation; }
.board:focus-visible { box-shadow: 0 0 0 4px var(--cursor); }
.cell { position: relative; aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; user-select: none; }
.cell.letter { background: #fff; box-shadow: 0 3px 0 #C5D0EA; cursor: pointer; font: 900 clamp(22px, 6.4vw, 32px)/1 var(--display); color: var(--tile-ink); }
.cell.letter.word { background: var(--word); }
.cell.letter.cursor { background: var(--cursor); box-shadow: 0 3px 0 #E09A00; color: var(--outline); }
.cell.letter.good { color: var(--good); }
.cell.letter.pop { animation: pop .22s ease-out; }
@keyframes pop { 0% { transform: scale(.7); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
.cell.clue { background: var(--panel); box-shadow: 0 3px 0 var(--panel-edge); color: var(--panel-ink); font: 800 clamp(8px, 2.25vw, 11px)/1.12 var(--display); text-transform: uppercase; text-align: center; padding: 3px; cursor: pointer; }
.cell.clue.on { background: #FFE9B0; }
.cell.clue img { width: 72%; }
.cell.badge { background: linear-gradient(180deg, #58A9FF, #2A7BF0); box-shadow: 0 3px 0 #1A55B5; color: #fff; font: 900 10px/1 var(--display); flex-direction: column; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 2px; }
.cell.badge b { font-size: clamp(16px, 4.6vw, 22px); -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; }
.arrow-r, .arrow-d { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; }
.arrow-r { right: -9px; top: 50%; transform: translateY(-50%); border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--arrow); }
.arrow-d { bottom: -9px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--arrow); }
.play-status { min-height: 3em; margin: 12px 4px 10px; text-align: center; font: 700 15px/1.4 var(--display); color: var(--outline); }
.play-status.win { color: var(--good); }
.play-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.play-actions img { width: 20px; }
.keys { display: grid; gap: 6px; margin-top: 16px; }
.keys .row { display: flex; gap: 5px; justify-content: center; }
.keys button { flex: 1; max-width: 38px; height: 42px; border: 0; border-radius: 9px; background: linear-gradient(180deg, #fff, #F1F5FB); box-shadow: 0 3px 0 #C3CFE0; font: 900 17px/1 var(--display); color: var(--outline); cursor: pointer; padding: 0; }
.keys button:active { transform: translateY(2px); box-shadow: 0 1px 0 #C3CFE0; }
.keys button.wide { max-width: 64px; flex: 1.6; font-size: 14px; }
@media (pointer: fine) and (min-width: 921px) { .keys { display: none; } }

/* Sections */
.section-title { font-size: clamp(28px, 4vw, 42px); text-align: center; margin: 0 0 22px; line-height: 1.15; }
.center-note { text-align: center; color: var(--panel-ink); max-width: 40em; margin: -6px auto 24px; font-size: 18px; }
.center-note.light { color: #fff; text-shadow: 0 1px 2px rgba(10, 40, 110, .35); }
.panel { max-width: 1160px; margin: 0 auto 56px; padding: 40px clamp(16px, 4vw, 48px); background: var(--panel); border-radius: 32px; box-shadow: 0 0 0 6px rgba(45, 123, 240, .9), 0 10px 0 6px #1F5FCC; width: calc(100% - 32px); }
.panel h3, .feature h3 { font: 900 22px/1.2 var(--display); margin: 14px 0 6px; color: var(--panel-ink); }
.panel p { margin: 0; color: #5d4630; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.step { background: #fff; border-radius: 22px; padding: 20px; box-shadow: 0 6px 0 var(--panel-edge); }
.step-demo { display: flex; gap: 5px; padding: 6px; background: var(--board); border-radius: 12px; width: max-content; max-width: 100%; }
.mini-clue, .mini-tile { position: relative; width: 54px; height: 54px; border-radius: 8px; display: grid; place-items: center; }
.mini-tile { background: #fff; box-shadow: 0 3px 0 #C5D0EA; font: 900 24px/1 var(--display); color: var(--tile-ink); }
.mini-tile.good { color: var(--good); }
.mini-clue { background: var(--panel); box-shadow: 0 3px 0 var(--panel-edge); color: var(--panel-ink); font: 800 9.5px/1.1 var(--display); text-transform: uppercase; text-align: center; padding: 2px; }
.mini-clue.pic { display: flex; flex-direction: column; gap: 1px; }
.mini-clue.pic img { width: 30px; }
.mini-clue.pic b { font-size: 8px; letter-spacing: .02em; }
.mini-clue.split { display: flex; flex-direction: column; justify-content: space-around; font-size: 8px; }
.mini-clue.split span + span { border-top: 1.5px solid var(--panel-edge); padding-top: 2px; }
.mini-clue .arrow-r.top { top: 25%; }

.features { max-width: 1160px; margin: 0 auto 56px; padding: 0 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.feature { border-radius: 24px; padding: 22px 22px 24px; background: var(--panel); box-shadow: 0 7px 0 var(--panel-edge), 0 14px 24px rgba(12, 40, 110, .18); }
.feature p { margin: 0; color: #5d4630; }
.feature img { width: 52px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .12)); }
.tone-yellow { background: linear-gradient(180deg, #FFF3C4, #FFE38A); box-shadow: 0 7px 0 #C98A00, 0 14px 24px rgba(12, 40, 110, .18); }
.tone-blue { background: linear-gradient(180deg, #E4F0FF, #C7DFFF); box-shadow: 0 7px 0 #1A55B5, 0 14px 24px rgba(12, 40, 110, .18); }
.tone-blue h3 { color: var(--outline); }
.tone-blue p { color: #2b3d66; }
.tone-green { background: linear-gradient(180deg, #E8FBE2, #C9F2BC); box-shadow: 0 7px 0 #268A1B, 0 14px 24px rgba(12, 40, 110, .18); }
.tone-green h3 { color: #1E6E14; }
.tone-green p { color: #2f4d29; }

.week { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; max-width: 900px; }
.week li { border-radius: 18px; padding: 16px 6px 14px; text-align: center; color: #fff; display: grid; gap: 4px; }
.week b { font: 900 22px/1 var(--display); -webkit-text-stroke: 4px rgba(0, 0, 0, .18); paint-order: stroke fill; }
.week span { font: 800 13px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.lv-easy { background: linear-gradient(180deg, #72DE4F, #3DBA2C); box-shadow: 0 5px 0 #268A1B; }
.lv-medium { background: linear-gradient(180deg, #58A9FF, #2A7BF0); box-shadow: 0 5px 0 #1A55B5; }
.lv-hard { background: linear-gradient(180deg, #FFDF5E, #FFB800); box-shadow: 0 5px 0 #C98A00; color: #7A4A1E !important; }
.lv-expert { background: linear-gradient(180deg, #FF6B6B, #E5373D); box-shadow: 0 5px 0 #A8202A; }
@media (max-width: 640px) { .week { grid-template-columns: repeat(4, 1fr); } }

.languages { max-width: 1160px; margin: 0 auto 56px; padding: 0 16px; }
.lang-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.lang-grid li { background: #fff; border-radius: 20px; padding: 18px; display: grid; gap: 8px; justify-items: start; box-shadow: 0 6px 0 #C3CFE0, 0 12px 22px rgba(12, 40, 110, .18); }
.lang-grid b { font: 900 19px/1.1 var(--display); color: var(--outline); }
.flag-word { font: 900 15px/1 var(--display); letter-spacing: .12em; color: var(--tile-ink); background: var(--word); padding: 6px 9px; border-radius: 8px; }
.keyrow { display: flex; gap: 3px; }
kbd { font: 900 14px/1 var(--display); color: var(--outline); background: linear-gradient(180deg, #fff, #F1F5FB); box-shadow: 0 3px 0 #C3CFE0; border: 1px solid #DCE4F0; border-radius: 7px; min-width: 25px; padding: 7px 0; text-align: center; }
kbd.hl { background: linear-gradient(180deg, #FFDF5E, #FFB800); box-shadow: 0 3px 0 #C98A00; color: #7A4A1E; border-color: #F2C64A; }

.cta { text-align: center; padding: 20px 16px 64px; }
.cta h2 { font-size: clamp(30px, 5vw, 52px); margin: 0 0 24px; }
.cta .stores { justify-content: center; }

.foot { background: #1F3E8C; color: #DCE6FF; text-align: center; padding: 28px 16px 36px; font-size: 15px; }
.foot p { margin: 4px auto; max-width: 60em; }
.foot a { color: #fff; font-weight: 600; }
.foot .fine { font-size: 13px; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cell.letter.pop { animation: none; }
  .btn, .store { transition: none; }
}