:root {
  --ink: #fff2cf;
  --muted: #c6b9d8;
  --purple: #673b9c;
  --purple-dark: #3a1b6c;
  --gold: #ffc552;
  --cream: #fff3d1;
  --tile: #1c5571;
  --tile-2: #174761;
  --size: min(calc(25vw - 21px), 120px);
  --grid-size: 4;
  --board-size: calc(var(--size) + var(--size) + var(--size) + var(--size));
  --controls-size: 58px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Nunito", system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 22%, #79378655, transparent 24%),
    radial-gradient(circle at 82% 15%, #155b7e88, transparent 28%),
    linear-gradient(155deg, #100b35, #22104f 48%, #071d3c);
  overflow-x: hidden;
}

body::before, body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(4px); opacity: .48;
}
body::before { width: 360px; height: 360px; background: #158b9c; right: -120px; bottom: -100px; }
body::after { width: 280px; height: 280px; background: #6a247d; left: -100px; bottom: 8%; }

.sky i { position: fixed; width: 5px; height: 5px; background: #fff; border-radius: 50%; box-shadow: 0 0 12px 4px #fff; animation: twinkle 2.4s infinite alternate; }
.sky i:nth-child(1) { left: 7%; top: 10%; }.sky i:nth-child(2) { left: 18%; top: 43%; animation-delay: .8s }.sky i:nth-child(3) { right: 12%; top: 34%; animation-delay: 1.2s }.sky i:nth-child(4) { right: 6%; top: 68%; animation-delay: .4s }.sky i:nth-child(5) { left: 12%; bottom: 12%; animation-delay: 1.8s }
@keyframes twinkle { to { opacity: .25; transform: scale(.5) rotate(30deg); } }
.moon { position: fixed; z-index: -1; width: 115px; height: 115px; right: 7vw; top: 6vh; border-radius: 50%; background: #ffd77b; box-shadow: 0 0 45px #ffda7a88; }
.moon::after { content: ""; position: absolute; width: 104px; height: 104px; left: -22px; top: -12px; border-radius: 50%; background: #17204b; }
.palace { position: fixed; z-index: -1; bottom: -24px; left: 0; right: 0; height: 155px; display: flex; justify-content: space-around; align-items: end; color: #070a25; opacity: .78; overflow: hidden; }
.palace::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: currentColor; }
.palace span { position: relative; z-index: 1; font-size: clamp(95px, 14vw, 160px); line-height: .7; text-shadow: 0 -35px 0 #070a25; }

.ambient-carpet { --carpet-size: 110px; --flight-duration: 12s; position: fixed; z-index: 0; top: 30vh; width: var(--carpet-size); max-width: 140px; height: auto; opacity: 0; pointer-events: none; object-fit: contain; filter: drop-shadow(0 10px 12px #02031388) saturate(1.1); will-change: transform, opacity; }
.ambient-carpet.direction-dg { left: 100vw; right: auto; }
.ambient-carpet.direction-gd { right: 100vw; left: auto; }
.ambient-carpet.direction-dg.flying { animation: ambientCarpetFlightDg var(--flight-duration) linear forwards; }
.ambient-carpet.direction-gd.flying { animation: ambientCarpetFlightGd var(--flight-duration) linear forwards; }
@keyframes ambientCarpetFlightDg {
  0% { opacity: 0; transform: translateX(30px) translateY(0) rotate(1deg); }
  8% { opacity: .62; }
  45% { transform: translateX(-48vw) translateY(-16px) rotate(-2deg); }
  55% { transform: translateX(-60vw) translateY(10px) rotate(2deg); }
  92% { opacity: .62; }
  100% { opacity: 0; transform: translateX(calc(-100vw - var(--carpet-size) - 70px)) translateY(-8px) rotate(-1deg); }
}
@keyframes ambientCarpetFlightGd {
  0% { opacity: 0; transform: translateX(-30px) translateY(0) rotate(-1deg); }
  8% { opacity: .62; }
  45% { transform: translateX(48vw) translateY(-16px) rotate(2deg); }
  55% { transform: translateX(60vw) translateY(10px) rotate(-2deg); }
  92% { opacity: .62; }
  100% { opacity: 0; transform: translateX(calc(100vw + var(--carpet-size) + 70px)) translateY(-8px) rotate(1deg); }
}
.ambient-parrot { --parrot-size: 56px; --parrot-duration: 10s; position: fixed; z-index: 1; top: 24vh; width: var(--parrot-size); max-width: 72px; height: auto; opacity: 0; pointer-events: none; object-fit: contain; filter: drop-shadow(0 7px 8px #02031388) saturate(1.12); will-change: transform, opacity; }
.ambient-parrot.direction-dg { left: 100vw; right: auto; }
.ambient-parrot.direction-gd { right: 100vw; left: auto; }
.ambient-parrot.direction-dg.flying { animation: ambientParrotFlightDg var(--parrot-duration) linear forwards; }
.ambient-parrot.direction-gd.flying { animation: ambientParrotFlightGd var(--parrot-duration) linear forwards; }
@keyframes ambientParrotFlightGd {
  0% { opacity: 0; transform: translateX(-30px) translateY(0) rotate(-2deg); }
  8% { opacity: .82; }
  42% { transform: translateX(46vw) translateY(-14px) rotate(2deg); }
  58% { transform: translateX(62vw) translateY(9px) rotate(-1deg); }
  92% { opacity: .82; }
  100% { opacity: 0; transform: translateX(calc(100vw + var(--parrot-size) + 70px)) translateY(-7px) rotate(2deg); }
}
@keyframes ambientParrotFlightDg {
  0% { opacity: 0; transform: translateX(30px) translateY(0) rotate(2deg); }
  8% { opacity: .82; }
  42% { transform: translateX(-46vw) translateY(-14px) rotate(-2deg); }
  58% { transform: translateX(-62vw) translateY(9px) rotate(1deg); }
  92% { opacity: .82; }
  100% { opacity: 0; transform: translateX(calc(-100vw - var(--parrot-size) - 70px)) translateY(-7px) rotate(-2deg); }
}
.app { position: relative; z-index: 2; width: min(100% - 28px, 1120px); margin: 0 auto; padding: 22px 0 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.brand { display: flex; gap: 10px; align-items: center; }
.brand-mark { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 18px; color: white; font-size: 25px; background: linear-gradient(145deg, #7767e2, #4e3bb7); box-shadow: 0 7px 16px #6556c755; transform: rotate(-5deg); }
.brand p { margin: 0 0 -7px 2px; font: 700 13px "Fredoka"; color: #dcb865; text-transform: uppercase; letter-spacing: 3px; }
.brand h1 { margin: 0; font: 700 clamp(22px, 4vw, 31px) "Fredoka"; letter-spacing: -.7px; }
.top-actions { display: flex; gap: 8px; }
button { font: 800 14px "Nunito"; cursor: pointer; border: 0; }
.round-btn { width: 40px; height: 40px; border-radius: 14px; color: #ffe0a0; background: #ffffff18; border: 1px solid #ffffff25; box-shadow: 0 5px 15px #05031655; transition: .2s; }
.round-btn:hover { transform: translateY(-2px); background: #ffffff2e; }

.game-layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(240px, 282px); gap: 18px; align-items: start; }
.game-card { min-width: 0; background: linear-gradient(145deg, #261452e8, #102f50e8); border: 1px solid #eec66b55; border-radius: 30px; padding: 20px 24px 14px; box-shadow: 0 24px 60px #05031988, inset 0 1px #ffffff28; backdrop-filter: blur(15px); }
.mission-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.eyebrow { display: block; color: #eec66b; font-size: 11px; letter-spacing: 2px; font-weight: 900; }
.mission-row h2, .modal h2 { margin: 4px 0 0; font: 700 clamp(20px, 3.5vw, 27px) "Fredoka"; }
.mission-tools { display: flex; align-items: center; gap: 9px; }
.stats { display: flex; gap: 12px; }
.stats div { min-width: 65px; padding: 5px 8px; border-radius: 11px; text-align: center; background: #ffffff12; border: 1px solid #ffffff12; }
.stats span { display: block; font-size: 8px; letter-spacing: .8px; color: #8b83a0; }
.stats strong { display: block; margin-top: -2px; font: 700 18px "Fredoka"; color: #ffd16b; }
.progress-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin: 12px 0 8px; }
.level-pips { display: flex; gap: 5px; flex: 1; }
.level-pips i { height: 5px; min-width: 2px; border-radius: 5px; flex: 1; background: #ffffff1c; }
.level-pips i.done { background: linear-gradient(90deg, #e5a833, #ffe18b); }
.level-navigation { display: flex; align-items: center; justify-content: center; gap: 10px; color: #bcb0ca; font-size: 8px; font-weight: 900; letter-spacing: 1.3px; }
.level-stepper { display: flex; align-items: center; gap: 7px; }
.level-stepper strong { min-width: 55px; color: #ffe3a0; font: 800 11px "Nunito", sans-serif; text-align: center; letter-spacing: .3px; }
.level-arrow { display: grid; place-items: center; width: 27px; height: 25px; padding: 0; border: 1px solid #e9be6755; border-radius: 8px; color: #ffe2a0; background: linear-gradient(145deg, #392068, #153d5d); box-shadow: 0 3px 8px #05021844; transition: .15s; }
.level-arrow:hover:not(:disabled) { color: #321858; background: linear-gradient(145deg, #ffe49a, #dba23a); transform: translateY(-1px); }
.level-arrow:disabled { opacity: .28; cursor: default; }
.difficulty-badge { margin-left: 8px; padding: 5px 8px; border: 1px solid #e9be6740; border-radius: 8px; color: #f0c96d; background: #ffffff09; font-size: 8px; letter-spacing: .3px; white-space: nowrap; }
.mechanic-panel { position: sticky; top: 18px; overflow: hidden; padding: 18px; border: 1px solid #e8c46c4d; border-radius: 24px; color: #e8ddf1; background: linear-gradient(155deg, #24144ee8, #0b2949eb); box-shadow: 0 20px 50px #05031970, inset 0 1px #ffffff1f; backdrop-filter: blur(15px); }
.mechanic-panel::before { content: ""; position: absolute; width: 120px; height: 120px; right: -45px; top: -55px; border-radius: 50%; background: #d49b3d24; filter: blur(3px); }
.mechanic-panel-head { position: relative; display: flex; align-items: center; gap: 11px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid #ffffff18; }
.mechanic-icons { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px; color: #38205f; background: linear-gradient(145deg, #ffe69b, #dca53e); box-shadow: 0 6px 14px #05021855; font-size: 20px; }
.panel-kicker { display: block; color: #dbb65e; font-size: 8px; font-weight: 900; letter-spacing: 1.5px; }
.mechanic-panel h3 { margin: 2px 0 0; color: #fff3d4; font: 700 16px "Fredoka", sans-serif; line-height: 1.1; }
.status-summary { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.status-summary > span { min-width: 0; padding: 7px 5px; text-align: center; border: 1px solid #ffffff10; border-radius: 10px; background: #ffffff08; }
.status-summary small, .status-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-summary small { color: #988ca7; font-size: 7px; font-weight: 900; letter-spacing: .7px; }
.status-summary strong { margin-top: 2px; color: #ffe092; font: 700 12px "Fredoka"; }
.status-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 10px; padding: 3px; border-radius: 11px; background: #080b294f; }
.status-tab { min-width: 0; padding: 7px 3px; border-radius: 8px; color: #a99db8; background: transparent; font-size: 9px; transition: .18s; }
.status-tab:hover { color: #f3e4c4; background: #ffffff0a; }
.status-tab.active { color: #39205f; background: linear-gradient(145deg, #ffe69b, #dca53e); box-shadow: 0 3px 8px #05021866; }
.status-tab-panel { display: none; min-height: 154px; }
.status-tab-panel.active { display: block; animation: statusPanelIn .2s ease; }
.mission-status { padding-bottom: 4px; }
.mission-status-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: #c9bdd8; font-size: 8px; font-weight: 900; letter-spacing: 1.3px; }
.mission-status-head strong { color: #ffe19a; font-size: 10px; letter-spacing: .4px; }
.mission-progress { overflow: hidden; height: 6px; margin-bottom: 10px; border-radius: 10px; background: #ffffff13; box-shadow: inset 0 1px 3px #0004; }
.mission-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55cda8, #d6e566, #ffd66c); box-shadow: 0 0 9px #8de3a977; transition: width .4s ease; }
.objective-list { display: grid; gap: 6px; }
.objective-row { display: grid; grid-template-columns: 18px 22px 1fr; align-items: center; gap: 5px; min-height: 43px; padding: 7px 8px; border: 1px solid #ffffff10; border-radius: 10px; background: #ffffff08; transition: .25s; }
.objective-state { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #8e829f; background: #ffffff0c; font-size: 11px; font-weight: 900; }
.objective-icon { font-size: 15px; text-align: center; }
.objective-row strong { display: block; color: #e7deed; font-size: 10px; line-height: 1.1; }
.objective-row strong b { float: right; margin-left: 5px; color: #ffe092; font-size: 9px; }
.objective-row small { display: block; margin-top: 2px; color: #91869f; font-size: 8px; line-height: 1.25; }
.objective-row.done { border-color: #5dd2a34a; background: #40bd8a16; animation: objectiveComplete .45s ease; }
.objective-row.done .objective-state { color: #082c24; background: #62d6ab; box-shadow: 0 0 9px #62d6ab77; }
.objective-row.done strong { color: #baf2d8; }.objective-row.done small { color: #79bda3; }
.objective-row.partial { border-color: #e6bc5650; background: #d9992414; }
.objective-row.partial .objective-state { color: #3b2b0c; background: #e7bd58; }
.objective-row.blocked { border-color: #d65f7250; background: #c6435612; }
.objective-row.blocked .objective-state { color: white; background: #c95e6e; }
.danger-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #c7b8d5; font-size: 8px; font-weight: 900; letter-spacing: 1.3px; }
.danger-heading::after { content: ""; flex: 1; height: 1px; background: #ffffff13; }
@keyframes objectiveComplete { 40% { transform: translateX(3px); filter: brightness(1.25); } }
.mechanic-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mechanic-item { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 31px; padding: 6px; border: 1px solid #ffffff12; border-radius: 9px; color: #e8e0ef; background: #ffffff0a; font-size: 8px; line-height: 1.15; text-align: left; }
.mechanic-item:hover { border-color: #e8c46c55; background: #ffffff11; }
.mechanic-item .item-icon { flex: 0 0 17px; font-size: 14px; line-height: 1; text-align: center; }
.recent-event { display: block; padding: 10px; border-radius: 11px; color: #fff0b7; background: #d78c2924; border: 1px solid #f0bd5450; font-size: 11px; line-height: 1.4; animation: panelEvent .6s ease; }
.event-detail { min-height: 70px; padding: 10px; border-radius: 11px; color: #bfb3cc; background: #ffffff08; font-size: 10px; line-height: 1.4; }
.persistent-events { position: relative; margin-top: 10px; padding-top: 9px; border-top: 1px solid #ffffff12; }
.persistent-label { color: #9e91ad; font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.event-countdown { display: grid; gap: 4px; margin-top: 6px; }
.event-timer { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 8px; color: #cfc5dd; background: #080b294f; font-size: 8px; }
.event-timer b { color: #ffd36c; font-size: 8px; }
.no-event { padding: 7px; color: #8f849e; font-size: 8px; text-align: center; border-radius: 8px; background: #ffffff06; }
.panel-tip { margin: 14px 2px 0; padding-top: 12px; border-top: 1px solid #ffffff12; color: #a99ebc; font-size: 9px; line-height: 1.45; }
@keyframes panelEvent { from { opacity: 0; transform: translateY(-5px); } }
@keyframes statusPanelIn { from { opacity: 0; transform: translateY(3px); } }

@media (max-width: 1050px) {
  .app { width: min(100% - 28px, 820px); }
  .game-layout { grid-template-columns: 1fr; }
  .mechanic-panel { position: static; }
  .recent-event { grid-column: 1 / -1; }
}

.board-shell {
  position: relative; width: calc(var(--board-size) + var(--controls-size)); height: calc(var(--board-size) + var(--controls-size)); margin: 0 auto;
  display: grid; grid-template: var(--board-size) var(--controls-size) / var(--board-size) var(--controls-size);
  grid-template-areas: "board right" "bottom .";
}
.board { position: relative; grid-area: board; display: grid; grid-template-columns: repeat(var(--grid-size), 1fr); grid-template-rows: repeat(var(--grid-size), 1fr); padding: 12px; border-radius: 15px; background: linear-gradient(145deg, #e0a735, #7b367c); box-shadow: 0 13px 28px #05021788, inset 0 0 0 3px #ffd977; touch-action: none; overflow: hidden; }
.tile { position: relative; display: grid; place-items: center; background: var(--tile); border: 1px solid #29728d; overflow: hidden; transition: transform .18s ease, filter .2s; }
.tile:nth-child(odd) { background: var(--tile-2); }
.tile .arm { position: absolute; z-index: 1; background: #cb5e9e; box-shadow: inset 0 0 0 3px #873b83, 0 0 5px #de75bc; }
.tile .arm.n { width: 17px; height: 50%; top: 0; left: calc(50% - 8.5px); }
.tile .arm.s { width: 17px; height: 50%; bottom: 0; left: calc(50% - 8.5px); }
.tile .arm.e { height: 17px; width: 50%; right: 0; top: calc(50% - 8.5px); }
.tile .arm.w { height: 17px; width: 50%; left: 0; top: calc(50% - 8.5px); }
.tile.connected .arm { background: #ffd15a; box-shadow: inset 0 0 0 3px #efa92e, 0 0 13px 3px #ffe792; }
.tile .center { position: absolute; z-index: 2; left: 50%; top: 50%; width: 25px; height: 25px; border-radius: 50%; background: #cd609f; box-shadow: inset 0 0 0 4px #873b83; transform: translate(-50%, -50%); }
.tile.connected .center { background: #ffd25d; box-shadow: inset 0 0 0 4px #eea72b, 0 0 10px #ffe184; }
.tile .endpoint { z-index: 4; font-size: calc(var(--size) * .48); line-height: 1; filter: drop-shadow(0 3px 2px #523b6a55); animation: bob 1.5s ease-in-out infinite alternate; }
.tile .special { position: absolute; z-index: 5; right: 3px; top: 2px; font-size: calc(var(--size) * .28); filter: drop-shadow(0 2px 2px #0008); }
.tile.objective-reached { box-shadow: inset 0 0 0 2px #61d9a9, inset 0 0 15px #4ce0a338; }
.tile.objective-reached .special { filter: drop-shadow(0 0 7px #79ffc8) brightness(1.18); animation: reachedGlow 1.1s ease-in-out infinite alternate; }
.tile.goal.portal-ready { box-shadow: inset 0 0 0 3px #69e5b5, inset 0 0 20px #59e3aa77; }
.tile.goal.portal-ready .endpoint { filter: drop-shadow(0 0 10px #8effd1) brightness(1.35); }
.tile.goal.portal-partial { box-shadow: inset 0 0 0 2px #e4b955, inset 0 0 14px #e4b95544; }
.tile.goal.portal-closed .endpoint { filter: grayscale(.65) brightness(.7); opacity: .72; }
@keyframes reachedGlow { to { transform: scale(1.1); } }
.tile .special.vortexA, .tile .special.vortexB { right: auto; top: auto; font-size: calc(var(--size) * .42); animation: vortexSpin 2s linear infinite; }
.tile .special.bridge { right: auto; top: auto; font-size: calc(var(--size) * .34); }
.tile.hole { background: radial-gradient(circle, #020517 0 43%, #342054 47%, #102a45 63%); }
.tile.hole .center { opacity: .15; }
.tile .one-way { position: absolute; z-index: 4; color: #fff4b0; font-size: calc(var(--size) * .32); filter: drop-shadow(0 1px 2px #000); }
.tile .one-way.dir-s { transform: rotate(90deg); }.tile .one-way.dir-w { transform: rotate(180deg); }.tile .one-way.dir-n { transform: rotate(-90deg); }
.tile .sand-cloud { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; color: #ffe09b; font-size: calc(var(--size) * .55); background: radial-gradient(circle, #e8b85dbb, #9b6b3477 60%, transparent 72%); animation: sandDrift 2.2s ease-in-out infinite alternate; }
.tile.sandy.connected .sand-cloud { opacity: .62; }
.tile .mirage-mark { position: absolute; z-index: 7; left: 3px; top: 1px; color: #76f5ff; text-shadow: 0 0 8px #4eeaff; animation: twinkle .7s infinite alternate; }
.tile.bridge-collapse .special.bridge { animation: bridgeFall .8s forwards; }
.tile.bridge-collapse { animation: bridgeTileShake .7s ease; }
.board.storm-hit { animation: stormHit .7s ease; }
.board.storm-hit::after { content: "🌪️"; position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; font-size: calc(var(--size) * 1.4); background: radial-gradient(circle, transparent, #cfaa7655); pointer-events: none; animation: stormSweep .8s forwards; }
.board.genie-hit { animation: genieFlash .8s ease; }
.mechanic-help-btn { position: absolute; z-index: 12; left: 3px; bottom: 3px; width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: #ffe69b; font-size: 10px; line-height: 1; background: #24134dcc; border: 1px solid #ffe18488; opacity: .38; transition: opacity .2s, transform .2s; }
.tile:hover .mechanic-help-btn, .mechanic-help-btn:focus-visible { opacity: 1; transform: scale(1.08); }
.board.tutorial-focus { pointer-events: none; }
.board.tutorial-focus ~ .row-controls, .board.tutorial-focus ~ .column-controls { pointer-events: none; opacity: .45; }
.board.tutorial-focus .tile { filter: brightness(.42) saturate(.55); }
.board.tutorial-focus .tile.tutorial-target { z-index: 11; filter: brightness(1.28) saturate(1.2); box-shadow: inset 0 0 0 3px #ffe184, 0 0 20px 5px #ffe18499; animation: tutorialTarget 1s ease-in-out infinite alternate; }
.tutorial-layer[hidden] { display: none; }
.tutorial-layer { position: absolute; z-index: 60; left: 16px; bottom: calc(var(--controls-size) + 13px); width: min(305px, calc(var(--board-size) - 32px)); display: flex; gap: 11px; padding: 15px; color: #fff2cf; border: 1px solid #ffd66c99; border-radius: 17px; background: linear-gradient(145deg, #321961f2, #123653f5); box-shadow: 0 15px 35px #050217aa, inset 0 1px #ffffff25; backdrop-filter: blur(12px); }
.tutorial-layer::after { content: ""; position: absolute; left: 28px; bottom: -8px; width: 15px; height: 15px; background: #173554; border-right: 1px solid #ffd66c99; border-bottom: 1px solid #ffd66c99; transform: rotate(45deg); }
.tutorial-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; font-size: 24px; background: #ffffff13; box-shadow: inset 0 0 0 1px #ffffff18; animation: tutorialIcon 1.1s ease-in-out infinite alternate; }
.tutorial-copy { min-width: 0; }
.tutorial-copy h3 { margin: 2px 0 4px; font: 700 17px "Fredoka"; color: #ffe08a; }
.tutorial-copy p { margin: 0; color: #eee2f2; font-size: 11px; line-height: 1.35; }
.tutorial-copy > small { display: block; margin-top: 5px; color: #c5b5d4; font-size: 9px; line-height: 1.3; }
.tutorial-disable { display: flex; align-items: center; gap: 5px; margin: 9px 0 8px; color: #bcaecb; font-size: 9px; cursor: pointer; }
.tutorial-disable input { accent-color: #e9ae43; }
.tutorial-copy .primary-btn { min-height: 30px; padding: 6px 13px; font-size: 11px; }
.tutorial-review-btn { display: block; margin: 15px auto 2px; }
@keyframes tutorialTarget { to { transform: scale(.96); box-shadow: inset 0 0 0 3px #fff0aa, 0 0 27px 7px #ffe184bb; } }
@keyframes tutorialIcon { to { transform: translateY(-3px) rotate(4deg); } }
@keyframes vortexSpin { to { transform: rotate(360deg) scale(1.08); } }
@keyframes sandDrift { to { transform: translateX(4px) scale(1.08); opacity: .78; } }
@keyframes bridgeFall { to { transform: translateY(22px) rotate(18deg); opacity: 0; } }
@keyframes bridgeTileShake { 30% { transform: rotate(2deg); } 60% { transform: rotate(-2deg); } }
@keyframes stormHit { 20% { transform: translateX(-7px) rotate(-1deg); } 45% { transform: translateX(8px) rotate(1deg); } 70% { transform: translateX(-4px); } }
@keyframes stormSweep { from { opacity: 0; transform: translateX(-45%) rotate(-25deg) scale(.5); } 45% { opacity: 1; } to { opacity: 0; transform: translateX(45%) rotate(25deg) scale(1.25); } }
@keyframes genieFlash { 35% { filter: brightness(1.5) saturate(1.4); box-shadow: 0 0 35px #e67cff; } }
.tile.goal .endpoint { animation-delay: .4s; }
.board.journey-active .tile.hero .endpoint { opacity: 0; }
@keyframes bob { to { transform: translateY(-4px) rotate(4deg); } }
.tile.path-pulse { animation: pulse .55s ease; }
.tile.solution-step { z-index: 9; animation: solutionStep .65s ease; }
@keyframes pulse { 50% { filter: brightness(1.25); transform: scale(.95); } }
@keyframes solutionStep { 35% { filter: brightness(1.45) saturate(1.3); box-shadow: inset 0 0 0 3px #8effd1, 0 0 18px #8effd188; transform: scale(.96); } }
.board.preview-active .tile:not(.preview-moving) { filter: brightness(.72) saturate(.72); }
.board.preview-active .tile.preview-original-hidden { visibility: hidden; }
.preview-ghost-layer { position: absolute; z-index: 18; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; clip-path: inset(12px);}
.preview-ghost { position: absolute !important; margin: 0; visibility: visible !important; filter: brightness(1.17) saturate(1.1); box-shadow: inset 0 0 0 2px #ffe184, 0 0 13px #ffe18477; will-change: transform; }
.preview-fixed-endpoint { position: absolute; z-index: 25; display: grid; place-items: center; font-size: calc(var(--size) * .48); line-height: 1; filter: drop-shadow(0 3px 2px #523b6a55); animation: bob 1.5s ease-in-out infinite alternate; }
.move-preview { min-height: 54px; margin: 5px auto 9px; padding: 9px 13px; width: min(100%, calc(var(--board-size) + var(--controls-size))); display: flex; align-items: center; gap: 10px; border: 1px dashed #ffffff2b; border-radius: 14px; color: #bdb1ce; background: #0d15334d; transition: .2s ease; }
.move-preview .preview-icon { flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #d7c9e5; background: #ffffff10; }
.move-preview strong, .move-preview small { display: block; }
.move-preview strong { color: #e9d9f2; font-size: 12px; }
.move-preview small { margin-top: 1px; color: #a99cb9; font-size: 10px; line-height: 1.25; }
.move-preview.active { border-style: solid; transform: translateY(-1px); }
.move-preview.positive { border-color: #64e1af88; background: #153e3b88; }
.move-preview.positive .preview-icon { color: #8effd1; background: #58d9a526; }
.move-preview.negative { border-color: #ec8f9a77; background: #491e3980; }
.move-preview.negative .preview-icon { color: #ffb2b9; background: #e46d7924; }
.move-preview.warning { border-color: #f1bd567f; box-shadow: inset 0 0 18px #e5a83312; }
.move-preview.warning .preview-icon { color: #ffd877; }
.event-timer.imminent { border-color: #f1bd5688; background: #5a351f99; box-shadow: 0 0 0 1px #f1bd5622, inset 0 0 16px #f1bd5618; animation: eventWarning 1.15s ease-in-out infinite alternate; }
.event-timer.imminent b { color: #ffe08c; font-size: 9px; letter-spacing: .5px; }
@keyframes eventWarning { to { filter: brightness(1.18); transform: translateY(-1px); } }
.flying-nilo { position: absolute; z-index: 20; left: 0; top: 0; width: 48px; height: 48px; pointer-events: none; filter: drop-shadow(0 6px 5px #08042199); will-change: transform; }
.flying-nilo .rider { position: absolute; z-index: 2; left: 50%; top: -4px; translate: -50% 0; font-size: 29px; line-height: 1; animation: riderFloat .38s ease-in-out infinite alternate; }
.flying-nilo .magic-carpet { position: absolute; z-index: 1; left: 4px; right: 4px; bottom: 5px; height: 15px; border-radius: 50% 50% 38% 38%; border: 2px solid #ffd66c; background: repeating-linear-gradient(90deg, #743884 0 7px, #d7549a 7px 14px, #214f91 14px 21px); box-shadow: 0 4px 0 #3e1b67, 0 0 12px #ffdf79aa; transform-origin: 50% 70%; animation: carpetWave .58s ease-in-out infinite alternate; }
.flying-nilo .magic-carpet::before, .flying-nilo .magic-carpet::after { content: ""; position: absolute; top: 9px; width: 9px; height: 9px; border-bottom: 2px solid #ffd66c; }
.flying-nilo .magic-carpet::before { left: -5px; transform-origin: 100% 0; animation: tasselLeft .34s ease-in-out infinite alternate; }
.flying-nilo .magic-carpet::after { right: -5px; transform-origin: 0 0; animation: tasselRight .34s ease-in-out .17s infinite alternate; }
.flying-nilo::after { content: "✦ · ✧"; position: absolute; right: 32px; bottom: -3px; width: 50px; color: #ffe184; font-size: 11px; letter-spacing: 1px; text-shadow: 0 0 7px #ffe184; animation: sparkleTrail .55s linear infinite; }
@keyframes riderFloat { to { transform: translateY(-3px) rotate(3deg); } }
@keyframes carpetWave {
  0% { transform: perspective(70px) rotateX(12deg) skewX(-9deg) scaleY(.82); border-radius: 58% 42% 32% 48%; }
  50% { transform: perspective(70px) rotateX(-5deg) skewX(2deg) scaleY(1.08); border-radius: 40% 60% 50% 30%; }
  100% { transform: perspective(70px) rotateX(10deg) skewX(10deg) scaleY(.86); border-radius: 44% 56% 35% 52%; }
}
@keyframes tasselLeft { from { transform: rotate(18deg) scaleY(.75); } to { transform: rotate(52deg) scaleY(1.15); } }
@keyframes tasselRight { from { transform: rotate(-52deg) scaleY(1.15); } to { transform: rotate(-18deg) scaleY(.75); } }
@keyframes sparkleTrail { from { opacity: 1; transform: translateX(8px) scale(1); } to { opacity: 0; transform: translateX(-10px) scale(.55); } }

.column-controls.bottom { grid-area: bottom; display: grid; grid-template-columns: repeat(var(--grid-size), 1fr); place-items: center; }
.row-controls.right { grid-area: right; display: grid; grid-template-rows: repeat(var(--grid-size), 1fr); place-items: center; }
.control-pair { display: flex; gap: 4px; align-items: center; justify-content: center; }
.col-pair { flex-direction: column; }
.shift-btn { width: 25px; height: 25px; padding: 0; border-radius: 8px; color: #351a66; background: linear-gradient(145deg, #ffe49a, #e5aa39); border: 1px solid #fff1b8; box-shadow: 0 3px 9px #05021877; font-size: 13px; transition: .15s; }
.shift-btn:hover { color: white; background: linear-gradient(145deg, #d95d9c, #743280); transform: scale(1.08); }
.shift-btn:active { transform: scale(.9); }
.shift-btn.solution-arrow-cue { position: relative; z-index: 40; pointer-events: none; animation: solutionArrowCue 2.4s ease-in-out both; }
@keyframes solutionArrowCue {
  0%, 100% { color: #351a66; background: linear-gradient(145deg, #ffe49a, #e5aa39); transform: scale(1); box-shadow: 0 3px 9px #05021877; }
  12%, 42%, 72% { color: #fff; background: linear-gradient(145deg, #ff5ca8, #8a42d6); transform: scale(1.28); box-shadow: 0 0 18px 5px #ff76c4cc; }
  27%, 57%, 87% { color: #4b236f; background: linear-gradient(145deg, #fff0a8, #f1b63e); transform: scale(1.04); box-shadow: 0 3px 9px #05021877; }
}

.hint-line { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 3px 0 0; color: #a99db9; font-size: 10px; text-align: center; }
.gesture { font-size: 15px; }
.game-actions { display: flex; justify-content: center; gap: 6px; }
.compact-action { padding: 8px 10px; border-radius: 10px; font-size: 11px; white-space: nowrap; }
.primary-btn, .secondary-btn { border-radius: 14px; padding: 12px 20px; transition: .2s; }
.primary-btn { color: white; background: linear-gradient(135deg, #7663dc, #5743c2); box-shadow: 0 8px 16px #5846bd4a; }
.secondary-btn { color: #f5dcaa; background: #ffffff12; border: 1px solid #ffffff1f; }
.primary-btn:hover, .secondary-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.primary-btn:disabled, .secondary-btn:disabled { opacity: .42; cursor: default; transform: none; }

.modal { width: min(92vw, 430px); padding: 30px; border: 1px solid #fff; border-radius: 28px; color: #24213f; text-align: center; background: #fffdf7; box-shadow: 0 30px 80px #27204766; }
.modal::backdrop { background: #28214499; backdrop-filter: blur(6px); }
.modal-icon { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 25px; background: #eee8ff; font-size: 40px; box-shadow: inset 0 0 0 1px #ddd1ff; }
.modal p { color: #716b80; line-height: 1.55; font-size: 14px; }
.mini-demo { display: flex; align-items: center; justify-content: center; margin: 20px 0; padding: 12px; border-radius: 15px; background: #f4ecd9; font-size: 24px; }
.mini-demo b { color: #dbad38; letter-spacing: -4px; }
.wide { width: 100%; display: flex; justify-content: center; gap: 10px; }
.close-btn { position: absolute; top: 14px; right: 17px; width: 32px; height: 32px; border-radius: 10px; background: #eeeaf5; color: #716a80; font-size: 21px; }
.compact { text-align: left; position: relative; }.compact .modal-icon { margin-left: 0; }.compact ol { padding-left: 22px; color: #706a7c; line-height: 1.7; font-size: 14px; }
.guide-modal { width: min(94vw, 780px); max-height: 88vh; overflow-y: auto; padding: 28px; }
.guide-modal > ol, .guide-modal > .game-legend { display: none; }
.guide-intro { margin: 14px 0 20px; padding: 13px 15px; border-left: 4px solid #725bd0; border-radius: 0 12px 12px 0; color: #554d68 !important; background: #f2edff; }
.guide-section { margin-top: 20px; }
.guide-section h3 { margin: 0 0 10px; color: #4b3e72; font: 700 16px "Fredoka", sans-serif; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.guide-item { display: flex; align-items: flex-start; gap: 10px; min-height: 104px; padding: 12px; border: 1px solid #e7dff0; border-radius: 13px; background: #fbf9fd; }
.guide-item.danger { border-color: #ebcf9b; background: #fffaf0; }
.guide-icon { display: grid; place-items: center; flex: 0 0 40px; min-height: 36px; padding: 3px; border-radius: 11px; color: #5c46a8; background: #eee9fb; font-size: 20px; font-weight: 900; white-space: nowrap; }
.guide-item.danger .guide-icon { background: #fff0ce; }
.guide-item strong { display: block; margin-bottom: 3px; color: #342b4a; font-size: 12px; }
.guide-item p { margin: 0; color: #716a7d; font-size: 11px; line-height: 1.45; }
.guide-finish { padding: 14px; border-radius: 13px; background: linear-gradient(135deg, #f0eaff, #fff4d8); }
.guide-finish p { margin: 0; color: #655c71; font-size: 12px; line-height: 1.55; }
.game-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 15px; padding: 12px; border-radius: 12px; background: #f3edf8; color: #655d75; font-size: 11px; }
.win-stars { color: #f6b936; font-size: 35px; letter-spacing: 6px; margin: 14px 0 20px; text-shadow: 0 3px 0 #d58a24; }
.win-modal { color: #fff4db; border-color: #e6bd5f; background: linear-gradient(155deg, #281650, #102f4c); box-shadow: 0 30px 80px #08051cbb, inset 0 1px #ffffff24; }
.win-modal .modal-icon { color: #fff; background: linear-gradient(145deg, #6844a5, #234f78); box-shadow: inset 0 0 0 1px #ffe29855, 0 8px 20px #07051b66; }
.win-modal h2 { color: #fff5dc; }
.win-modal p, .win-modal #winText { color: #e2d8ec; }
.win-modal .eyebrow { color: #f1c968; }
.win-modal .win-stars { color: #ffd96c; text-shadow: 0 2px 0 #925d15, 0 0 14px #ffd96c66; }
.solution-report { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: -5px 0 12px; }
.solution-report span { padding: 10px 6px; border: 1px solid #f3d4813d; border-radius: 11px; background: #080b294d; box-shadow: inset 0 1px #ffffff0d; }
.solution-report small, .solution-report strong { display: block; }
.solution-report small { min-height: 18px; color: #c9bed5; font-size: 7px; font-weight: 900; line-height: 1.2; letter-spacing: .65px; }
.solution-report strong { color: #ffe59a; font: 700 18px "Fredoka"; text-shadow: 0 1px 2px #0008; }
#showSolutionBtn { margin-bottom: 8px; }
.win-modal #showSolutionBtn { color: #fff0c4; border-color: #e9c66c66; background: #ffffff12; }
.win-modal #showSolutionBtn:hover { color: #271546; background: #ffe29a; }
.confetti { color: #907adf; margin-bottom: 10px; }

@media (max-width: 600px) {
  :root { --controls-size: 54px; }
  .app { width: min(100% - 14px, 820px); padding-top: 12px; }
  .game-card { padding: 18px 10px; border-radius: 23px; }
  .mission-row { align-items: center; flex-wrap: wrap; gap: 9px; padding: 0 8px; }
  .mission-tools { width: 100%; justify-content: space-between; }
  .stats div { min-width: 58px; padding: 6px; }.stats { gap: 5px; }.stats span { font-size: 7px; }
  .board-shell { --controls-size: 54px; }
  .shift-btn { width: 23px; height: 23px; border-radius: 7px; padding: 0; font-size: 12px; }
  .compact-action { padding: 7px 9px; font-size: 10px; }
  .brand-mark { width: 43px; height: 43px; }.brand p { font-size: 10px; }
  .level-navigation { gap: 7px; }
  .difficulty-badge { margin-left: 2px; padding-inline: 5px; font-size: 7px; }
  .mechanic-panel { margin-inline: 4px; padding: 15px; }
  .mechanic-text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mechanic-item { font-size: 10px; }
  .guide-modal { padding: 20px 14px; }.guide-grid { grid-template-columns: 1fr; }.guide-item { min-height: 0; }
}

@media (max-width: 390px) {
  .stats div:nth-child(2) { display: none; }
  .hint-line { padding: 0 20px; }
}