:root {
  --ink: #2b1a13;
  --muted: #846f60;
  --cream: #f7f0df;
  --paper: rgba(255, 252, 240, 0.82);
  --forest: #2f593f;
  --forest-2: #4f7f53;
  --gold: #dfad54;
  --cell: #43261d;
  --cell-2: #311b16;
  --block: #edc177;
  --block-light: #f8d99a;
  --shadow: 0 30px 80px rgba(67, 38, 22, 0.18);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #e8dbc2; scrollbar-width: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.start-screen::-webkit-scrollbar { display: none; width: 0; height: 0; }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.78), transparent 24%),
    radial-gradient(circle at 85% 75%, rgba(181, 139, 73, .16), transparent 31%),
    repeating-linear-gradient(93deg, rgba(99,67,38,.025) 0 1px, transparent 1px 9px),
    linear-gradient(145deg, #f6f0e4 0%, #e8d9bd 58%, #dfcba9 100%);
  scrollbar-width: none;
}

body.menu-open { overflow: hidden; }

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.ambient {
  position: fixed;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(1px);
}

.ambient-one { width: 360px; height: 360px; left: -170px; top: 35%; background: rgba(68, 111, 67, .1); }
.ambient-two { width: 300px; height: 300px; right: -100px; top: -100px; background: rgba(209, 166, 91, .13); }

/* Original start screen: Forest Passage */
.start-screen {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  visibility: hidden;
  color: #f8f1dc;
  background:
    radial-gradient(circle at 51% 47%, rgba(125, 161, 95, .15), transparent 23%),
    linear-gradient(112deg, #0c221b, #1a3a2a 54%, #0d231e),
    repeating-linear-gradient(95deg, transparent 0 7px, rgba(255,255,255,.015) 8px 9px);
  opacity: 0;
  transition: visibility .5s, opacity .5s;
  scrollbar-width: none;
}
.start-screen.open { visibility: visible; opacity: 1; }
.start-screen.leaving { opacity: 0; transform: scale(1.025); transition: opacity .55s, transform .55s; }
.start-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .1;
  background-image: radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px);
  background-size: 7px 7px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
.start-screen::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20%;
  pointer-events: none;
  background: linear-gradient(12deg, #0a241c 0 42%, transparent 43%), linear-gradient(-10deg, #102c22 0 36%, transparent 37%);
  opacity: .56;
}
.start-glow { position: absolute; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.start-glow-one { width: 42vw; height: 42vw; left: 28%; top: 8%; background: radial-gradient(circle, rgba(212,188,111,.08), transparent 65%); }
.start-glow-two { width: 22vw; height: 22vw; right: 0; bottom: 0; border: 1px solid rgba(214,193,127,.08); box-shadow: 0 0 90px rgba(208,189,122,.06); }
.start-leaf { position: absolute; z-index: 1; color: #6f9861; font-size: 34px; opacity: .25; transform: scaleX(.55) rotate(45deg); }
.leaf-a { left: 8%; top: 22%; animation: leafDrift 7s ease-in-out infinite; }
.leaf-b { left: 70%; top: 13%; font-size: 21px; animation: leafDrift 9s ease-in-out -2s infinite; }
.leaf-c { right: 9%; bottom: 23%; font-size: 27px; animation: leafDrift 8s ease-in-out -4s infinite; }
@keyframes leafDrift { 50% { translate: 8px -14px; rotate: 12deg; opacity: .5; } }

.start-header {
  position: relative;
  z-index: 4;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  width: min(1400px, calc(100% - 72px));
  margin: 0 auto;
  padding: 28px 0;
  border-bottom: 1px solid rgba(241,224,179,.1);
}
.start-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.start-brand .brand-mark { background: #e0ba6a; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.start-brand .brand-mark span { background: #234b36; }
.start-brand strong { display: block; font-family: "Manrope", sans-serif; font-size: 17px; letter-spacing: .08em; }
.start-brand small { display: block; margin-top: 1px; color: rgba(240,227,191,.48); font-size: 7px; letter-spacing: .28em; }
.start-header-actions { display: flex; align-items: center; gap: 16px; }
.portal-back { color: rgba(240,229,199,.58); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-decoration: none; transition: color .2s; }
.portal-back:hover { color: #f1d58c; }
.portal-back span { margin-right: 4px; }
.save-note { color: rgba(240,229,199,.48); font-size: 9px; letter-spacing: .08em; }
.save-note i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #b8d37d; box-shadow: 0 0 9px #b8d37d; }
.start-round-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(235,219,176,.16); border-radius: 50%; color: #e8d7a9; background: rgba(255,255,255,.05); cursor: pointer; transition: .2s; }
.start-round-button:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.start-round-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.start-round-button .sound-off { display: none; }
.start-round-button.muted .sound-on { display: none; }
.start-round-button.muted .sound-off { display: block; }

.start-layout {
  position: relative;
  z-index: 3;
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: minmax(250px, 340px) minmax(330px, 500px) minmax(260px, 330px);
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-content: center;
  column-gap: clamp(35px, 5.2vw, 86px);
  row-gap: 24px;
  width: min(1400px, calc(100% - 72px));
  min-height: 630px;
  margin: 0 auto;
  padding: 36px 0 30px;
}
.start-copy { grid-column: 1; grid-row: 1; align-self: center; }
.start-kicker { display: flex; align-items: center; gap: 10px; margin: 0; color: #b6ce91; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.start-kicker span { width: 22px; height: 1px; background: #9cbd7b; }
.start-copy h1 { margin: 20px 0 20px; font-family: "Manrope", sans-serif; font-size: clamp(43px, 4.5vw, 68px); line-height: 1.08; letter-spacing: -.055em; }
.start-copy h1 em { color: #e5c273; font-style: normal; text-shadow: 0 10px 35px rgba(229,194,115,.12); }
.start-description { max-width: 300px; margin: 0; color: rgba(239,229,202,.58); font-size: 12px; line-height: 1.9; }
.start-stats { display: flex; gap: 35px; margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(235,221,181,.1); }
.start-stats div { min-width: 85px; }
.start-stats span { display: block; margin-bottom: 5px; color: rgba(240,229,199,.4); font-size: 8px; letter-spacing: .1em; }
.start-stats strong { color: #f3e8c8; font-size: 21px; font-variant-numeric: tabular-nums; }
.start-stats strong b { font: inherit; }
.start-stats strong small { color: rgba(243,232,200,.38); font-size: 11px; }

.forest-gate { position: relative; grid-column: 2; grid-row: 1; width: min(37vw, 490px); aspect-ratio: 1; justify-self: center; }
.gate-disc { position: absolute; inset: 10%; overflow: hidden; border: 1px solid rgba(244,221,155,.34); border-radius: 50%; background: linear-gradient(#d5bd7d 0 28%, #759166 28% 47%, #183c2c 47%); box-shadow: 0 0 0 10px rgba(222,199,132,.025), 0 0 0 28px rgba(222,199,132,.018), inset 0 0 50px rgba(14,44,31,.22), 0 28px 70px rgba(0,0,0,.32); }
.gate-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 33%, transparent, rgba(11,39,27,.08) 55%, rgba(7,25,19,.48)); }
.gate-moon { position: absolute; z-index: 1; right: 21%; top: 15%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: #f8e9af; box-shadow: 0 0 24px rgba(255,239,175,.65); }
.gate-hills { position: absolute; z-index: 2; left: -10%; right: -10%; border-radius: 50% 50% 0 0; transform: rotate(-6deg); }
.hill-back { height: 31%; bottom: 36%; background: #4f7656; }
.hill-front { height: 28%; bottom: 29%; background: #315d42; transform: rotate(7deg); }
.gate-tree { position: absolute; z-index: 4; bottom: 17%; width: 3%; height: 35%; border-radius: 99px 99px 0 0; background: #163425; box-shadow: 0 10px 14px rgba(0,0,0,.18); }
.gate-tree i { position: absolute; width: 550%; aspect-ratio: 1; border-radius: 48% 52% 50% 46%; background: #244c34; }
.gate-tree i:nth-child(1) { left: -210%; top: -20%; }
.gate-tree i:nth-child(2) { left: -360%; top: 8%; transform: scale(.75); }
.gate-tree i:nth-child(3) { left: 80%; top: 14%; transform: scale(.67); }
.tree-one { left: 17%; transform: scale(1.1); }
.tree-two { right: 17%; height: 29%; }
.gate-path { position: absolute; z-index: 3; left: 36%; right: 36%; bottom: 0; height: 48%; background: linear-gradient(to top, rgba(225,193,118,.8), rgba(183,160,99,.22)); clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0); }
.gate-board { position: absolute; z-index: 6; left: 50%; bottom: 8%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 34%; aspect-ratio: 1; padding: 5px; border: 1px solid rgba(247,221,157,.55); border-radius: 9px; background: rgba(18,43,31,.88); box-shadow: 0 10px 26px rgba(0,0,0,.35); transform: translateX(-50%) perspective(220px) rotateX(16deg); }
.gate-board span { border: 1px solid rgba(235,216,164,.09); border-radius: 2px; background: rgba(255,255,255,.025); }
.gate-board .lit { background: linear-gradient(145deg, #f7d68d, #d9a84e); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 0 8px rgba(245,200,101,.45); }
.gate-orbit { position: absolute; inset: 2%; border: 1px solid rgba(223,201,137,.12); border-radius: 50%; animation: orbitSpin 24s linear infinite; }
.gate-orbit i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #dfc574; box-shadow: 0 0 11px #dfc574; }
.gate-orbit i:nth-child(1) { left: 14%; top: 16%; }
.gate-orbit i:nth-child(2) { right: 6%; top: 44%; }
.gate-orbit i:nth-child(3) { left: 28%; bottom: 2%; }
.orbit-two { inset: 5%; border-style: dashed; animation-direction: reverse; animation-duration: 30s; }
.orbit-two i:nth-child(1) { left: 50%; top: -3px; }
.orbit-two i:nth-child(2) { left: 3%; top: 62%; }
@keyframes orbitSpin { to { rotate: 360deg; } }
.firefly { position: absolute; z-index: 8; width: 4px; height: 4px; border-radius: 50%; background: #f9dc76; box-shadow: 0 0 9px 3px rgba(249,220,118,.34); animation: fireflyFloat 3s ease-in-out infinite alternate; }
.f1 { left: 19%; top: 42%; }
.f2 { right: 15%; top: 29%; animation-delay: -1s; }
.f3 { left: 26%; bottom: 25%; animation-delay: -.4s; }
.f4 { right: 24%; bottom: 15%; animation-delay: -1.8s; }
@keyframes fireflyFloat { to { translate: 13px -19px; opacity: .3; } }

.journey-pass { grid-column: 3; grid-row: 1; align-self: center; padding: 23px 24px; border: 1px solid rgba(239,221,172,.16); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: 0 22px 50px rgba(3,18,12,.19), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(10px); }
.pass-label { display: flex; align-items: center; gap: 10px; color: rgba(238,224,185,.35); font-size: 7px; letter-spacing: .2em; }
.pass-label i { flex: 1; height: 1px; background: rgba(239,221,172,.1); }
.journey-pass > p { margin: 24px 0 13px; color: #b7cb93; font-size: 9px; letter-spacing: .11em; }
.pass-chapter { display: flex; align-items: center; gap: 13px; }
.pass-chapter > span { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid rgba(250,225,158,.36); border-radius: 14px; color: #173525; background: #e2bd69; box-shadow: 0 8px 18px rgba(0,0,0,.18); font-size: 15px; font-weight: 900; }
.pass-chapter strong { display: block; color: #f4e9c9; font-size: 14px; letter-spacing: .04em; }
.pass-chapter small { display: block; margin-top: 4px; color: rgba(238,227,194,.42); font-size: 8px; }
.pass-progress { height: 4px; margin: 20px 0 13px; overflow: hidden; border-radius: 9px; background: rgba(0,0,0,.2); }
.pass-progress span { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e3bd68, #93b86f); box-shadow: 0 0 8px rgba(227,189,104,.3); transition: width .5s; }
.pass-unlock { color: rgba(239,227,194,.36); font-size: 8px; }
.pass-unlock i { margin-right: 6px; color: #e0bc68; font-style: normal; }

.start-actions-panel { display: grid; grid-column: 1 / 4; grid-row: 2; grid-template-columns: minmax(300px, 420px) minmax(330px, 450px); gap: 12px; justify-content: center; width: 100%; }
.journey-button { display: flex; align-items: center; min-height: 78px; padding: 12px 20px; border: 1px solid rgba(255,236,179,.42); border-radius: 19px; color: #173724; background: linear-gradient(135deg, #e9cb7f, #d7ad55); box-shadow: 0 14px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.66); cursor: pointer; transition: .25s; }
.journey-button:hover { transform: translateY(-3px); box-shadow: 0 19px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.66); }
.play-mark { display: grid; flex: 0 0 43px; place-items: center; width: 43px; height: 43px; margin-right: 14px; border: 1px solid rgba(24,57,37,.22); border-radius: 50%; background: rgba(255,255,255,.24); }
.play-mark i { width: 0; height: 0; margin-left: 4px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid #234a33; }
.journey-button > span:nth-child(2) { flex: 1; text-align: left; }
.journey-button small { display: block; margin-bottom: 3px; color: rgba(23,55,36,.58); font-size: 8px; letter-spacing: .08em; }
.journey-button strong { display: block; font-family: "Manrope", sans-serif; font-size: 18px; letter-spacing: .02em; }
.journey-button > b { font-size: 20px; font-weight: 500; transition: transform .2s; }
.journey-button:hover > b { transform: translateX(4px); }
.secondary-start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.secondary-start-actions button { display: flex; align-items: center; min-width: 0; padding: 13px 15px; border: 1px solid rgba(239,221,172,.13); border-radius: 17px; color: #f0e3c2; background: rgba(255,255,255,.045); cursor: pointer; transition: .2s; }
.secondary-start-actions button:hover { border-color: rgba(239,221,172,.3); background: rgba(255,255,255,.08); transform: translateY(-2px); }
.secondary-start-actions button > span:last-child { min-width: 0; text-align: left; }
.secondary-start-actions strong { display: block; overflow: hidden; font-size: 11px; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.secondary-start-actions small { display: block; overflow: hidden; margin-top: 4px; color: rgba(239,226,191,.35); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.menu-icon { position: relative; display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; margin-right: 11px; border: 1px solid rgba(237,220,173,.17); border-radius: 12px; color: #dcbc6f; background: rgba(0,0,0,.1); }
.map-icon i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #dcbc6f; }
.map-icon i:nth-child(1) { left: 8px; bottom: 8px; }
.map-icon i:nth-child(2) { left: 17px; top: 9px; }
.map-icon i:nth-child(3) { right: 7px; bottom: 10px; }
.map-icon::after { content: ""; width: 20px; height: 13px; border-top: 1px dashed #dcbc6f; transform: rotate(-20deg); }
.guide-icon { font-family: Georgia, serif; font-size: 18px; }

.start-footer { position: relative; z-index: 3; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; width: min(1400px, calc(100% - 72px)); margin: 0 auto; padding: 16px 0 20px; color: rgba(239,226,191,.25); font-size: 7px; letter-spacing: .15em; }
.start-footer p { margin: 0; }
.start-footer p i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #b5d479; box-shadow: 0 0 8px #b5d479; }

.chapter-sheet { position: fixed; z-index: 4000; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: .25s; }
.chapter-sheet.open { visibility: visible; opacity: 1; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(5,21,15,.76); backdrop-filter: blur(9px); }
.chapter-card { position: relative; width: min(610px, calc(100% - 28px)); padding: 31px 34px 25px; border: 1px solid rgba(249,230,177,.24); border-radius: 26px; color: #2b1a13; text-align: center; background: linear-gradient(145deg, #fff9e9, #e9d7b3); box-shadow: 0 36px 90px rgba(0,0,0,.42); transform: translateY(16px) scale(.96); transition: .3s cubic-bezier(.2,.9,.3,1.15); }
.chapter-sheet.open .chapter-card { transform: translateY(0) scale(1); }
.chapter-card h2 { margin: 6px 0 7px; font-family: "Manrope", sans-serif; font-size: 25px; }
.chapter-card > p:not(.modal-eyebrow) { margin: 0; color: #887361; font-size: 10px; }
.sheet-close { position: absolute; right: 15px; top: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #705947; background: rgba(85,57,37,.08); font-size: 22px; cursor: pointer; }
.chapter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 25px 0 20px; }
.chapter-item { position: relative; display: flex; min-width: 0; aspect-ratio: .82; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(75,48,31,.14); border-radius: 16px; color: #493224; background: rgba(255,255,255,.42); cursor: pointer; transition: .2s; }
.chapter-item:hover:not(:disabled) { border-color: rgba(51,91,62,.38); background: rgba(255,255,255,.8); transform: translateY(-3px); }
.chapter-item > span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 11px; color: #f4e8c9; background: #3e6848; font-size: 12px; font-weight: 800; }
.chapter-item strong { overflow: hidden; max-width: 90%; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chapter-item small { margin-top: 4px; color: #9b8775; font-size: 7px; }
.chapter-item.current { box-shadow: 0 0 0 2px #dbb45f, 0 8px 22px rgba(95,65,30,.12); }
.chapter-item.current::after { content: "CURRENT"; position: absolute; top: 7px; right: 7px; padding: 2px 5px; border-radius: 7px; color: white; background: #c69a43; font-size: 5px; }
.chapter-item:disabled { cursor: not-allowed; opacity: .43; filter: grayscale(.8); }
.chapter-item:disabled > span::after { content: "·"; }
.chapter-back { min-width: 150px; height: 40px; border: 0; border-radius: 12px; color: #f6e9c9; background: #345f42; font-size: 10px; font-weight: 800; cursor: pointer; }

@media (max-width: 1050px) {
  .start-layout { grid-template-columns: minmax(230px, 300px) minmax(330px, 440px); grid-template-rows: 1fr auto auto; }
  .start-copy { grid-column: 1; grid-row: 1; }
  .forest-gate { grid-column: 2; grid-row: 1; width: min(46vw, 440px); }
  .journey-pass { grid-column: 1 / 3; grid-row: 2; display: grid; grid-template-columns: auto 1fr; align-items: center; width: min(100%, 720px); justify-self: center; padding: 15px 20px; }
  .pass-label, .journey-pass > p, .pass-progress { display: none; }
  .pass-chapter { grid-column: 1; }
  .pass-unlock { grid-column: 2; justify-self: end; }
  .start-actions-panel { grid-column: 1 / 3; grid-row: 3; }
}

@media (max-width: 700px) {
  .start-header, .start-layout, .start-footer { width: min(100% - 28px, 520px); }
  .start-header { padding: 18px 0; }
  .save-note { display: none; }
  .portal-back { font-size: 0; }
  .portal-back span { display: block; margin: 0; font-size: 18px; }
  .start-layout { display: flex; min-height: auto; flex-direction: column; gap: 20px; padding: 20px 0 24px; }
  .start-copy { order: 1; text-align: center; }
  .start-kicker { justify-content: center; }
  .start-copy h1 { margin: 10px 0 0; font-size: clamp(33px, 11vw, 50px); }
  .start-description, .start-stats { display: none; }
  .forest-gate { order: 2; width: min(78vw, 360px); }
  .journey-pass { order: 3; display: flex; width: min(100%, 430px); justify-content: space-between; padding: 12px 15px; }
  .pass-unlock { max-width: 130px; text-align: right; line-height: 1.5; }
  .start-actions-panel { order: 4; display: block; width: min(100%, 430px); }
  .journey-button { width: 100%; min-height: 68px; }
  .secondary-start-actions { margin-top: 10px; }
  .start-footer span { display: none; }
  .start-footer { justify-content: center; }
  .chapter-card { padding: 29px 16px 22px; }
  .chapter-grid { grid-template-columns: repeat(3, 1fr); }
  .chapter-item { aspect-ratio: 1; }
}

@media (max-height: 720px) and (min-width: 701px) {
  .start-header { padding: 15px 0; }
  .start-layout { min-height: 540px; padding: 18px 0 15px; }
  .start-copy h1 { margin: 13px 0; font-size: 46px; }
  .start-stats { margin-top: 20px; padding-top: 14px; }
  .journey-button { min-height: 66px; }
  .start-footer { padding: 10px 0 13px; }
}

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1380px, calc(100% - 64px));
  margin: 0 auto;
  padding: 25px 0 14px;
}

.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand strong { display: block; font-family: "Manrope", sans-serif; font-size: 16px; letter-spacing: .06em; font-weight: 800; }
.brand small { display: block; margin-top: 1px; color: #887362; font-size: 8px; letter-spacing: .28em; }

.brand-mark {
  display: grid;
  grid-template-columns: repeat(2, 10px);
  gap: 3px;
  padding: 9px;
  border-radius: 12px;
  background: var(--forest);
  box-shadow: 0 8px 18px rgba(47,89,63,.22);
  transform: rotate(-3deg);
}
.brand-mark span { width: 10px; height: 10px; border-radius: 3px; background: #e8c173; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }

.top-actions { display: flex; gap: 10px; }
.icon-button, .sound-button {
  height: 42px;
  border: 1px solid rgba(73, 47, 31, .13);
  border-radius: 14px;
  color: #654c3a;
  background: rgba(255, 253, 246, .54);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: .2s ease;
}
.icon-button:hover, .sound-button:hover { transform: translateY(-2px); background: rgba(255,255,255,.82); }
.icon-button { width: 42px; display: grid; place-items: center; }
.icon-button svg, .sound-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-button { display: flex; align-items: center; gap: 7px; padding: 0 14px; font-size: 12px; font-weight: 700; }
.sound-button .sound-off { display: none; }
.sound-button.muted .sound-on { display: none; }
.sound-button.muted .sound-off { display: block; }

.game-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(680px, 820px);
  align-items: center;
  justify-content: center;
  gap: clamp(45px, 7vw, 112px);
  min-height: calc(100vh - 90px);
  width: min(1400px, calc(100% - 64px));
  margin: 0 auto;
  padding: 30px 0 56px;
}

.hero-copy { align-self: center; max-width: 360px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #4f7257; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.eyebrow span { display: block; width: 22px; height: 1px; background: #4f7257; }
.hero-copy h1 { margin: 22px 0 20px; font-family: "Manrope", sans-serif; font-size: clamp(42px, 4.3vw, 68px); line-height: 1.08; letter-spacing: -.055em; font-weight: 800; }
.hero-copy h1 em { position: relative; color: var(--forest); font-style: normal; }
.hero-copy h1 em::after { content: ""; position: absolute; left: 4%; right: 0; bottom: -8px; height: 8px; border-top: 2px solid rgba(223,173,84,.8); border-radius: 50%; transform: rotate(-2deg); }
.hero-copy > p { max-width: 330px; margin: 0; color: #776356; font-size: 14px; line-height: 1.8; }
.mini-stats { display: flex; align-items: center; gap: 26px; margin-top: 36px; }
.mini-stats div { display: flex; flex-direction: column; }
.mini-stats strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.mini-stats span { margin-top: 3px; color: #9b887a; font-size: 10px; letter-spacing: .08em; }
.mini-stats i { width: 1px; height: 33px; background: rgba(73,47,31,.14); }

.game-card {
  width: 100%;
  padding: 27px 30px 22px;
  border: 1px solid rgba(75, 46, 28, .13);
  border-radius: 32px;
  background:
    linear-gradient(rgba(255,252,240,.91), rgba(249,242,225,.91)),
    repeating-linear-gradient(87deg, transparent 0 7px, rgba(105,73,45,.06) 8px 9px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
}

.game-card-top { display: flex; align-items: center; justify-content: space-between; }
.level-title { display: flex; align-items: center; gap: 13px; }
.level-title > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; color: #f7e8be; background: var(--forest); font-weight: 800; box-shadow: 0 8px 18px rgba(47,89,63,.18); }
.level-title small, .score-box small { display: block; margin-bottom: 3px; color: #a18c7c; font-size: 9px; letter-spacing: .12em; }
.level-title strong { font-family: "Manrope", sans-serif; font-size: 14px; letter-spacing: .01em; }
.score-box { min-width: 108px; padding: 8px 14px; border-left: 1px solid rgba(69,46,31,.13); text-align: right; }
.score-box strong { font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; }

.progress-wrap { margin: 21px 0 22px; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: 8px; color: #8a7463; font-size: 10px; }
.progress-copy strong { color: #5a4131; font-weight: 600; font-variant-numeric: tabular-nums; }
.progress-copy b { font-weight: inherit; }
.progress-track { height: 8px; overflow: visible; border: 1px solid rgba(63,38,23,.08); border-radius: 99px; background: #e6dac5; box-shadow: inset 0 2px 5px rgba(70,42,25,.1); }
.progress-bar { position: relative; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #315d42, #6d945a); box-shadow: 0 2px 6px rgba(47,89,63,.22); transition: width .65s cubic-bezier(.2,.8,.2,1); }
.progress-leaf { position: absolute; right: -8px; top: 50%; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: white; background: var(--gold); font-size: 7px; transform: translateY(-50%) rotate(45deg); box-shadow: 0 2px 7px rgba(123,83,27,.3); }

.play-area { display: grid; grid-template-columns: minmax(440px, 1fr) 150px; gap: 23px; align-items: stretch; }
.board-wrap { position: relative; width: 100%; aspect-ratio: 1; }
.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 100%; height: 100%;
  gap: 4px;
  padding: 10px;
  overflow: hidden;
  border: 3px solid #70452c;
  border-radius: 16px;
  background:
    repeating-linear-gradient(91deg, rgba(255,255,255,.025) 0 2px, transparent 2px 16px),
    #291712;
  box-shadow: inset 0 0 0 2px rgba(237,191,115,.23), inset 0 15px 26px rgba(0,0,0,.24), 0 10px 25px rgba(59,32,20,.17);
  touch-action: none;
}

.cell {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(238,191,119,.09);
  border-radius: 5px;
  background:
    linear-gradient(110deg, transparent 38%, rgba(255,255,255,.025) 48%, transparent 57%),
    linear-gradient(145deg, var(--cell), var(--cell-2));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.035), inset 0 -2px 3px rgba(0,0,0,.2);
  transition: transform .13s ease, background .13s ease, box-shadow .13s ease;
}
.cell:nth-child(9n + 3), .cell:nth-child(9n + 6) { margin-right: 3px; }
.cell:nth-child(n + 19):nth-child(-n + 27), .cell:nth-child(n + 46):nth-child(-n + 54) { margin-bottom: 3px; }
.cell.filled::after, .mini-block, .ghost-block {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 239, 190, .7);
  border-radius: 6px;
  background:
    linear-gradient(100deg, transparent 18%, rgba(255,255,255,.17) 28%, transparent 44%),
    repeating-linear-gradient(2deg, transparent 0 8px, rgba(105,60,22,.06) 9px 10px),
    linear-gradient(145deg, var(--block-light), var(--block));
  box-shadow: inset 0 2px 3px rgba(255,255,255,.54), inset 0 -3px 4px rgba(137,78,25,.2), 0 2px 4px rgba(0,0,0,.22);
}
.cell.filled { animation: placeBlock .34s cubic-bezier(.2,1.55,.45,1); }
.cell.valid { z-index: 2; transform: scale(.92); background: #537050; box-shadow: inset 0 0 0 2px rgba(204,231,168,.45), 0 0 12px rgba(129,185,104,.25); }
.cell.invalid { z-index: 2; transform: scale(.92); background: #7f4134; box-shadow: inset 0 0 0 2px rgba(255,178,150,.28); }
.cell.clearing::after { animation: clearBlock .5s cubic-bezier(.4,0,.2,1) forwards; }
.cell.hint { animation: hintPulse .7s ease-in-out 2; }

@keyframes placeBlock { 0% { transform: scale(.3) rotate(-8deg); opacity: .2; } 70% { transform: scale(1.09) rotate(1deg); } 100% { transform: scale(1); opacity: 1; } }
@keyframes clearBlock { 0% { filter: brightness(1); transform: scale(1); } 35% { filter: brightness(1.8); transform: scale(1.12); } 100% { filter: brightness(2); transform: scale(.1) rotate(16deg); opacity: 0; } }
@keyframes hintPulse { 50% { background: #5d805a; transform: scale(.9); } }

.combo-badge { position: absolute; z-index: 20; left: 50%; top: 45%; padding: 9px 16px; border: 1px solid rgba(255,255,255,.6); border-radius: 99px; color: white; background: rgba(47,89,63,.93); box-shadow: 0 10px 25px rgba(0,0,0,.2); font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%,-30%) scale(.7); }
.combo-badge.show { animation: comboPop 1.15s ease forwards; }
@keyframes comboPop { 0% { opacity: 0; transform: translate(-50%,0) scale(.7); } 20%, 65% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-100%) scale(.9); } }

.next-panel { display: flex; flex-direction: column; gap: 12px; }
.next-heading { display: flex; align-items: center; gap: 9px; color: #8d7766; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.next-heading i { flex: 1; height: 1px; background: rgba(70,44,28,.13); }
.piece-tray { position: relative; display: flex; flex: 1; min-height: 210px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(91,56,35,.16); border-radius: 18px; background: rgba(232,214,181,.45); box-shadow: inset 0 3px 16px rgba(90,55,31,.07); cursor: grab; touch-action: none; outline: none; }
.piece-tray:focus-visible { box-shadow: inset 0 3px 16px rgba(90,55,31,.07), 0 0 0 3px rgba(79,127,83,.25); }
.piece-tray::before { content: ""; position: absolute; inset: 0; opacity: .14; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(102,64,35,.1) 13px 14px); }
.piece-tray.dragging { cursor: grabbing; }
.piece-tray small { position: absolute; bottom: 17px; color: #9b826f; font-size: 9px; letter-spacing: .08em; }
.drag-icon { display: inline-block; margin-right: 3px; transform: rotate(-45deg); }
.piece-preview { position: relative; display: grid; gap: 4px; z-index: 1; filter: drop-shadow(0 8px 8px rgba(65,36,19,.13)); transition: transform .2s ease, opacity .2s ease; }
.piece-tray:hover .piece-preview { transform: translateY(-4px) rotate(-1deg); }
.piece-tray.dragging .piece-preview { opacity: .28; transform: scale(.88); }
.mini-block { position: relative; width: 31px; height: 31px; inset: auto; }

.tip-card { display: flex; align-items: flex-start; gap: 8px; padding: 11px; border-radius: 13px; color: #6f5a49; background: rgba(255,255,255,.38); }
.tip-bulb { color: #b88531; font-size: 16px; }
.tip-card p { margin: 0; font-size: 8px; line-height: 1.55; }
.tip-card strong { font-size: 9px; }

.game-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.objective { display: flex; align-items: center; gap: 8px; color: #897363; font-size: 10px; }
.objective > span { color: var(--forest); font-size: 16px; }
.objective p { margin: 0; }
.objective strong { color: #5f4635; }
.text-button { border: 0; color: #8a7464; background: transparent; font-size: 10px; cursor: pointer; transition: color .2s; }
.text-button:hover { color: var(--forest); }
.text-button span { display: inline-block; margin-right: 4px; font-size: 15px; transition: transform .35s; }
.text-button:hover span { transform: rotate(-180deg); }

.drag-ghost { position: fixed; z-index: 1000; display: grid; gap: 4px; pointer-events: none; filter: drop-shadow(0 12px 10px rgba(47,26,16,.3)); transform: translate(-50%,-50%) scale(1.05); }
.ghost-block { position: relative; inset: auto; width: var(--ghost-size, 44px); height: var(--ghost-size, 44px); }

.particle { position: fixed; z-index: 1200; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; background: var(--particle-color, #f1c46e); animation: particleFly .8s ease-out forwards; }
@keyframes particleFly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

.toast { position: fixed; z-index: 1500; left: 50%; bottom: 28px; padding: 11px 18px; border-radius: 99px; color: white; background: rgba(43,26,19,.9); box-shadow: 0 10px 30px rgba(0,0,0,.2); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%,18px); transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

.modal { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: .25s; }
.modal.open { visibility: visible; opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(31,19,13,.62); backdrop-filter: blur(8px); }
.modal-card { position: relative; width: min(430px, calc(100% - 32px)); padding: 35px 38px 30px; border: 1px solid rgba(255,255,255,.5); border-radius: 28px; text-align: center; background: linear-gradient(145deg, #fffaf0, #eee0c7); box-shadow: 0 35px 80px rgba(25,14,9,.35); transform: translateY(18px) scale(.94); transition: .35s cubic-bezier(.2,.9,.25,1.2); }
.modal.open .modal-card { transform: translateY(0) scale(1); }
.modal-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: -66px auto 18px; border: 5px solid #f3e6cc; border-radius: 50%; color: #f6d288; background: var(--forest); box-shadow: 0 9px 25px rgba(47,89,63,.28); font-size: 22px; }
.modal-eyebrow { margin: 0 0 8px; color: #a67d3d; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.modal-card h2 { margin: 0 0 10px; font-family: "Manrope", sans-serif; font-size: 26px; }
.modal-card > p:not(.modal-eyebrow) { margin: 0 auto; color: #806d5d; font-size: 12px; line-height: 1.7; }
.stars { display: flex; justify-content: center; gap: 7px; margin: 18px 0; color: #dca74e; font-size: 26px; }
.stars span { display: inline-block; opacity: 0; transform: scale(.2) rotate(-30deg); }
.modal.open .stars span { animation: starIn .45s cubic-bezier(.2,1.6,.4,1) forwards; }
.modal.open .stars span:nth-child(2) { animation-delay: .15s; }
.modal.open .stars span:nth-child(3) { animation-delay: .3s; }
@keyframes starIn { to { opacity: 1; transform: scale(1) rotate(0); } }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0; border: 1px solid rgba(78,49,31,.12); border-radius: 15px; overflow: hidden; }
.result-grid div { padding: 12px; }
.result-grid div + div { border-left: 1px solid rgba(78,49,31,.12); }
.result-grid small { display: block; margin-bottom: 3px; color: #9b8777; font-size: 9px; }
.result-grid strong { font-size: 19px; }
.primary-button, .secondary-button { width: 100%; height: 49px; border-radius: 15px; font-weight: 800; cursor: pointer; transition: .2s; }
.primary-button { border: 0; color: #fff8e9; background: var(--forest); box-shadow: 0 10px 22px rgba(47,89,63,.22); }
.primary-button:hover { transform: translateY(-2px); background: #244b34; }
.primary-button span { margin-left: 8px; }
.secondary-button { margin-top: 7px; border: 0; color: #897363; background: transparent; font-size: 11px; }
.secondary-button:hover { color: var(--forest); }

.help-card { padding-top: 34px; text-align: left; }
.help-modal { z-index: 4100; }
.help-card h2 { text-align: center; }
.help-card > .modal-eyebrow { text-align: center; }
.close-button { position: absolute; right: 15px; top: 13px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #7b6555; background: rgba(101,71,48,.08); font-size: 22px; cursor: pointer; }
.how-list { display: grid; gap: 11px; margin: 24px 0; }
.how-list > div { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid rgba(69,44,29,.1); border-radius: 14px; background: rgba(255,255,255,.34); }
.how-list > div > span { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #f5e8c7; background: #4b6d50; font-weight: 800; }
.how-list p { margin: 0; color: #8b7666; font-size: 10px; line-height: 1.55; }
.how-list strong { color: #493426; font-size: 12px; }

@media (max-width: 1120px) {
  .game-shell { grid-template-columns: minmax(620px, 800px); gap: 32px; padding-top: 15px; }
  .hero-copy { display: grid; grid-template-columns: 1fr auto; align-items: end; max-width: none; }
  .hero-copy .eyebrow, .hero-copy h1 { grid-column: 1; }
  .hero-copy h1 { margin: 14px 0 0; font-size: 43px; }
  .hero-copy > p { display: none; }
  .mini-stats { grid-column: 2; grid-row: 1 / 3; margin: 0 0 6px; }
}

@media (max-width: 740px) {
  .topbar, .game-shell { width: min(100% - 24px, 600px); }
  .topbar { padding-top: 16px; }
  .sound-button span { display: none; }
  .sound-button { width: 42px; padding: 0; justify-content: center; }
  .game-shell { display: block; padding: 14px 0 35px; }
  .hero-copy { display: none; }
  .game-card { padding: 19px 14px 16px; border-radius: 25px; }
  .progress-wrap { margin: 17px 0; }
  .play-area { grid-template-columns: 1fr; gap: 15px; }
  .board-wrap { width: 100%; }
  .board { gap: 3px; padding: 7px; border-radius: 13px; }
  .cell:nth-child(9n + 3), .cell:nth-child(9n + 6) { margin-right: 2px; }
  .cell:nth-child(n + 19):nth-child(-n + 27), .cell:nth-child(n + 46):nth-child(-n + 54) { margin-bottom: 2px; }
  .next-panel { display: grid; grid-template-columns: 132px 1fr; align-items: stretch; }
  .next-heading { display: none; }
  .piece-tray { min-height: 115px; }
  .piece-tray small { bottom: 8px; }
  .tip-card { align-items: center; }
  .mini-block { width: 24px; height: 24px; }
  .game-footer { margin-top: 14px; }
  .objective { font-size: 9px; }
}

@media (max-width: 390px) {
  .brand strong { font-size: 16px; }
  .brand-mark { grid-template-columns: repeat(2, 8px); padding: 8px; }
  .brand-mark span { width: 8px; height: 8px; }
  .level-title > span { width: 39px; height: 39px; border-radius: 13px; font-size: 13px; }
  .level-title strong { font-size: 14px; }
  .score-box { min-width: 80px; padding-right: 5px; }
  .score-box strong { font-size: 22px; }
  .next-panel { grid-template-columns: 116px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Simple, color-matched start screen */
.start-screen {
  color: #203e2d;
  background: #f2e8d4;
  transition: opacity .2s, visibility .2s;
}
.start-screen.leaving { transform: none; transition: opacity .2s; }
.start-screen::before, .start-screen::after,
.start-glow, .start-leaf, .forest-gate { display: none !important; }
.start-screen *, .start-screen *::before, .start-screen *::after { animation: none !important; }
.start-header {
  width: min(720px, calc(100% - 32px));
  padding: 16px 0;
  border-bottom-color: rgba(35,72,50,.16);
}
.start-brand { color: #244a35; }
.start-brand .brand-mark { background: #244a35; box-shadow: none; }
.start-brand .brand-mark span { background: #e6bf6d; }
.start-brand strong { font-size: 14px; }
.start-brand small { color: #7a806e; letter-spacing: .18em; }
.portal-back, .save-note { color: #667566; }
.portal-back:hover { color: #244a35; }
.save-note i { background: #628a62; box-shadow: none; }
.start-round-button {
  width: 38px; height: 38px;
  border-color: rgba(35,72,50,.2);
  border-radius: 7px;
  color: #244a35;
  background: rgba(255,255,255,.42);
}
.start-round-button:hover { background: #fffaf0; transform: none; }
.start-layout {
  display: flex;
  width: min(500px, calc(100% - 32px));
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 17px;
  padding: 24px 0;
}
.start-copy { order: 1; width: 100%; text-align: center; }
.start-kicker { display: block; color: #6c815f; font-size: 8px; }
.start-kicker span { display: none; }
.start-copy h1 { margin: 10px 0 12px; color: #244a35; font-size: clamp(37px, 7vw, 50px); line-height: 1.05; }
.start-copy h1 em { color: #9f6c2f; text-shadow: none; }
.start-description { max-width: 380px; margin: 0 auto; color: #6e7568; font-size: 11px; line-height: 1.6; }
.start-stats { justify-content: center; gap: 0; margin-top: 18px; padding-top: 14px; border-top-color: rgba(35,72,50,.14); }
.start-stats div { width: 50%; min-width: 0; }
.start-stats div + div { border-left: 1px solid rgba(35,72,50,.14); }
.start-stats span { color: #8a8a78; font-size: 7px; }
.start-stats strong, .start-stats strong small { color: #244a35; }
.journey-pass {
  order: 2;
  width: 100%;
  padding: 15px 17px;
  border-color: rgba(35,72,50,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.4);
  box-shadow: none;
  backdrop-filter: none;
}
.pass-label, .journey-pass > p, .pass-unlock { display: none; }
.pass-chapter > span { width: 42px; height: 42px; border: 0; border-radius: 6px; color: #244a35; background: #e3bc6b; box-shadow: none; }
.pass-chapter strong { color: #244a35; font-size: 13px; }
.pass-chapter small { color: #7e806f; }
.pass-progress { margin: 13px 0 0; background: rgba(35,72,50,.12); }
.pass-progress span { background: #4f7f53; box-shadow: none; }
.start-actions-panel {
  order: 3;
  display: block;
  width: 100%;
}
.journey-button {
  width: 100%;
  min-height: 58px;
  padding: 9px 15px;
  border: 0;
  border-radius: 8px;
  color: #fff8e8;
  background: #244a35;
  box-shadow: none;
}
.journey-button:hover { transform: none; box-shadow: none; background: #193827; }
.play-mark { width: 36px; height: 36px; flex-basis: 36px; margin-right: 11px; border: 0; background: #e3bc6b; }
.play-mark i { border-left-color: #244a35; }
.journey-button small { color: rgba(255,248,232,.62); }
.journey-button strong { font-size: 16px; }
.journey-button > b { display: none; }
.secondary-start-actions { grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 8px; }
.secondary-start-actions button {
  min-height: 42px;
  justify-content: center;
  padding: 8px 7px;
  border-color: rgba(35,72,50,.18);
  border-radius: 7px;
  color: #35543f;
  background: rgba(255,255,255,.35);
}
.secondary-start-actions button:hover { border-color: rgba(35,72,50,.35); background: #fffaf0; transform: none; }
.secondary-start-actions button > span:last-child { text-align: center; }
.secondary-start-actions strong { font-size: 9px; letter-spacing: 0; white-space: normal; }
.secondary-start-actions small, .menu-icon { display: none; }
.start-footer { width: min(720px, calc(100% - 32px)); justify-content: center; padding: 10px 0 14px; color: #8a8b7b; letter-spacing: 0; }
.start-footer span { display: none; }
.start-footer p i { display: none; }

@media (max-width: 700px) {
  .start-header, .start-layout, .start-footer { width: calc(100% - 28px); }
  .start-header { padding: 12px 0; }
  .start-brand strong { font-size: 12px; }
  .start-brand small { font-size: 6px; }
  .start-layout { gap: 13px; padding: 16px 0; }
  .start-copy h1 { margin: 7px 0 10px; font-size: 37px; }
  .start-description, .start-stats { display: flex; }
  .start-description { display: block; font-size: 10px; }
  .start-stats { margin-top: 12px; padding-top: 10px; }
  .journey-pass { display: block; padding: 12px 14px; }
  .pass-chapter { display: flex; }
  .journey-button { min-height: 54px; }
  .secondary-start-actions { margin-top: 7px; }
  .start-footer { padding: 7px 0 10px; }
}