:root { color-scheme: dark; --bg:#0b1322; --panel:#111c30; --panel-2:#17253d; --board:#20274f; --line:#6bd4e7; --line-head:#85e5f2; --dot:#384986; --ink:#edf4ff; --muted:#aab9cd; --danger:#ed5a67; --gold:#f6ba54; --blue:#7ccbea; }
* { box-sizing: border-box; }
html { min-width:320px; height:100%; scroll-behavior:smooth; background:var(--bg); }
body { min-width:320px; height:100%; margin:0; overflow:hidden; color:var(--ink); font-family:Inter, ui-rounded, "SF Pro Rounded", system-ui, sans-serif; background:radial-gradient(circle at 50% 15%, #213450 0, #101b2c 37%, var(--bg) 75%); }
button { font:inherit; } button, select { -webkit-tap-highlight-color:transparent; }
.app-shell { display:flex; flex-direction:column; width:min(100%, 1030px); height:100dvh; min-height:0; margin:0 auto; padding:14px 18px 32px; }
.site-header { display:flex; flex:0 0 auto; align-items:center; min-height:50px; padding:0 8px; }
.brand { display:inline-flex; align-items:center; gap:8px; color:#eef6ff; font-size:19px; font-weight:850; letter-spacing:-.055em; text-decoration:none; }.brand-mark { display:grid; place-items:center; width:25px; height:25px; border:1px solid rgba(178,236,255,.68); border-radius:8px 8px 8px 2px; color:#0e2039; background:linear-gradient(145deg, #c7f5ff, #67badb); font-size:17px; line-height:1; box-shadow:0 3px 11px rgba(74,186,221,.22); transform:rotate(-5deg); }.brand-name { background:linear-gradient(90deg, #f4f8ff, #8ad9ed); -webkit-background-clip:text; background-clip:text; color:transparent; }
.game-panel { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; overflow:hidden; border:1px solid rgba(178,210,244,.14); border-radius:27px; background:linear-gradient(145deg, rgba(28,47,74,.93), rgba(12,20,36,.97)); box-shadow:0 22px 60px rgba(0,0,0,.33), inset 0 1px rgba(255,255,255,.04); }
.level-summary { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:50px; padding:7px 12px; border-bottom:1px solid rgba(180,208,240,.11); }.level-summary h1,.level-summary h2 { margin:0; color:#f5f8ff; font-size:16px; font-weight:800; text-align:center; }.level-summary > .header-button { justify-self:start; }
.header-actions { display:flex; justify-self:end; align-items:center; gap:6px; }.header-button { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(176,207,242,.11); border-radius:10px; padding:0; color:#cbd8e8; background:rgba(8,14,28,.25); font-size:18px; cursor:pointer; }
.status-row { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; padding:7px 12px 2px; }.remaining-stat, .difficulty-stat { min-height:30px; display:grid; place-items:center; border-radius:10px; color:#dce8f6; background:rgba(5,12,25,.24); font-size:12px; font-weight:800; }.difficulty-stat { text-transform:capitalize; }
.hearts { display:flex; justify-content:center; gap:6px; color:#fa6572; font-size:13px; filter:drop-shadow(0 2px 4px rgba(225,42,62,.35)); }.hearts .lost { color:#53627a; filter:none; }
.instruction { min-height:14px; margin:0; padding:0 14px; color:var(--muted); text-align:center; font-size:11px; opacity:0; transition:opacity .2s ease; }.instruction.visible { opacity:1; }
.board-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:37px; padding:4px 12px; }.level-jump { display:flex; align-items:center; gap:5px; color:#a9bad1; font-size:9px; font-weight:900; letter-spacing:.1em; }.level-jump select { height:26px; max-width:136px; border:1px solid rgba(145,186,222,.23); border-radius:8px; padding:0 6px; color:#c8d7eb; background:#182743; font-size:10px; font-weight:700; cursor:pointer; }.zoom-controls { display:grid; grid-template-columns:26px 42px 26px; gap:4px; }.zoom-controls button { height:26px; padding:0; border:1px solid rgba(145,186,222,.20); border-radius:8px; color:#cce0ee; background:#172640; font-size:13px; cursor:pointer; }.zoom-controls button:disabled { opacity:.35; cursor:default; } #zoomResetButton { font-size:10px; font-weight:800; }
.board-viewport { position:relative; display:flex; flex:1 1 auto; min-height:0; margin:0 16px; overflow:auto; overscroll-behavior:contain; scrollbar-color:rgba(155,191,226,.4) transparent; scrollbar-width:thin; border:5px solid rgba(173,198,231,.25); border-radius:25px; background:var(--board); box-shadow:inset 0 0 25px rgba(76,111,153,.20), 0 8px 25px rgba(0,0,0,.18); }.board { --columns:10; --rows:11; --zoom:1; position:relative; flex:0 0 auto; width:calc(100% * var(--zoom)); min-width:0; aspect-ratio:var(--columns) / var(--rows); margin:auto; isolation:isolate; touch-action:pan-x pan-y; background:radial-gradient(circle at 50% 0, rgba(74,90,157,.2), transparent 60%), var(--board); }.board-viewport.is-panning { cursor:grabbing; user-select:none; }.game-panel.is-fullscreen { width:100%; height:100%; border:0; border-radius:0; display:flex; flex-direction:column; background:#101a2b; }.game-panel.is-fullscreen .board-toolbar { flex:none; }.game-panel.is-fullscreen .board-viewport { flex:1; max-height:none; margin-bottom:10px; cursor:grab; }.game-panel.is-fullscreen .tools { display:none; }
.board-svg { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; }.grid-layer { fill:var(--dot); opacity:.75; pointer-events:none; }.arrow { pointer-events:none; outline:none; -webkit-tap-highlight-color:transparent; }.arrow polyline { fill:none; stroke:var(--line); stroke-width:.16; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px .8px rgba(7,13,22,.17)); pointer-events:stroke; cursor:inherit; }.board[data-line-width="thin"] .arrow polyline:not(.arrow-hit) { stroke-width:.12; }.board[data-line-width="bold"] .arrow polyline:not(.arrow-hit) { stroke-width:.22; }.board.color-mode .arrow[data-direction="up"] polyline:not(.arrow-hit), .board.color-mode .arrow[data-direction="up"] .arrow-head { stroke:#766ee9; fill:#766ee9; }.board.color-mode .arrow[data-direction="right"] polyline:not(.arrow-hit), .board.color-mode .arrow[data-direction="right"] .arrow-head { stroke:#109fc1; fill:#109fc1; }.board.color-mode .arrow[data-direction="down"] polyline:not(.arrow-hit), .board.color-mode .arrow[data-direction="down"] .arrow-head { stroke:#e26d70; fill:#e26d70; }.board.color-mode .arrow[data-direction="left"] polyline:not(.arrow-hit), .board.color-mode .arrow[data-direction="left"] .arrow-head { stroke:#d69b2f; fill:#d69b2f; }.arrow .arrow-hit { fill:none !important; stroke:transparent !important; stroke-width:16px; vector-effect:non-scaling-stroke; filter:none; pointer-events:stroke; }.dense-board .arrow polyline:not(.arrow-hit) { filter:none; }.arrow .arrow-head { fill:var(--line-head); pointer-events:all; cursor:inherit; }.arrow.hint polyline:not(.arrow-hit) { stroke:#e29726 !important; filter:drop-shadow(0 0 4px rgba(226,151,38,.5)); animation:hintPulse .8s ease-in-out infinite alternate; }.arrow.hint .arrow-head { fill:#e29726 !important; }.arrow.departing polyline:not(.arrow-hit) { stroke:#65b8dc !important; filter:none; }.arrow.departing .arrow-head { fill:#65b8dc !important; }.arrow.blocked { animation:shake .32s linear; }.arrow.blocked polyline:not(.arrow-hit) { stroke:var(--danger) !important; filter:drop-shadow(0 0 5px rgba(237,90,103,.6)); }.arrow.blocked .arrow-head { fill:var(--danger) !important; } @keyframes hintPulse { from { opacity:.72; } to { opacity:1; } } @keyframes shake { 20%,60% { translate:-.08px 0; } 40%,80% { translate:.08px 0; } }
.tools { display:flex; flex:0 0 auto; justify-content:center; min-height:76px; padding:8px 0 6px; }.hint-button { position:relative; width:58px; height:58px; border:0; border-radius:50%; color:white; background:linear-gradient(155deg, #67c8ef, #2a7dd3 70%); box-shadow:inset 0 -6px 0 rgba(0,52,128,.27), 0 8px 14px rgba(1,6,22,.34); cursor:pointer; }.hint-button:active { transform:translateY(2px); }.hint-button:disabled { filter:grayscale(.7); opacity:.55; }.bulb { font-size:30px; filter:drop-shadow(0 2px 1px rgba(0,0,0,.3)); }.hint-count { position:absolute; top:-4px; right:-5px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#1b619e; background:#e6f7ff; font-size:12px; font-weight:800; }
.level-nav { display:grid; grid-template-columns:repeat(10, 1fr); gap:5px; margin:13px 4px 0; }.level-dot { min-width:0; aspect-ratio:1; border:1px solid rgba(137,181,221,.20); border-radius:8px; color:#a9bed8; background:rgba(21,37,60,.64); font-size:11px; cursor:pointer; }.level-dot.current { color:#13243a; border-color:#b5ecf7; background:#9ce0ee; font-weight:900; }.level-dot.done { color:#8edcf1; border-color:rgba(117,211,239,.55); }
.result-dialog { width:min(90vw,390px); border:1px solid rgba(167,215,246,.35); border-radius:24px; color:var(--ink); text-align:center; background:linear-gradient(145deg,#263d61,#111d32); box-shadow:0 24px 80px rgba(0,0,0,.7); }.result-dialog::backdrop { background:rgba(1,6,20,.72); backdrop-filter:blur(5px); }.result-dialog h2 { margin:0; font-size:33px; }.result-dialog p:not(.eyebrow) { color:#ccdbf4; }.eyebrow { margin:0 0 7px; color:#91daef; font-size:11px; font-weight:800; letter-spacing:.16em; }.confetti { margin-bottom:12px; color:var(--gold); font-size:28px; letter-spacing:.12em; }.dialog-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:9px; margin-top:22px; }.dialog-button { min-height:48px; border:1px solid rgba(151,200,255,.24); border-radius:14px; color:var(--ink); background:#182a48; cursor:pointer; }.dialog-button--primary { color:#07243b; border-color:#a7fbff; background:linear-gradient(135deg,#a9ffff,#4fd9f0); font-weight:800; } button:focus-visible { outline:3px solid #fff2a5; outline-offset:3px; }
.settings-dialog { width:min(92vw, 580px); padding:24px; border:1px solid rgba(166,205,238,.19); border-radius:27px; color:#eef4ff; background:#0d1525; box-shadow:0 28px 80px rgba(0,0,0,.62); }.settings-dialog::backdrop { background:rgba(1,7,18,.67); backdrop-filter:blur(4px); }.settings-heading { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }.settings-heading h2 { margin:0; font-size:27px; }.close-settings { width:36px; height:36px; border:1px solid rgba(173,204,235,.17); border-radius:50%; color:#dbe8f8; background:#172238; font-size:25px; line-height:1; cursor:pointer; }.setting-group { padding:18px 0 20px; border-bottom:1px solid rgba(179,204,233,.15); }.setting-group--last { padding-bottom:10px; border-bottom:0; }.setting-group h3 { margin:0 0 14px; color:#98a5ba; font-size:13px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }.setting-options { display:grid; gap:10px; }.setting-options--two { grid-template-columns:repeat(2,1fr); }.setting-options--three { grid-template-columns:repeat(3,1fr); }.setting-options button { min-height:54px; border:1px solid rgba(174,200,231,.16); border-radius:17px; color:#edf3ff; background:#141d2d; font-size:19px; cursor:pointer; }.setting-options button.selected { border-color:#2cb1c8; outline:2px solid #2587f5; outline-offset:1px; background:#1c3c4a; }.fullscreen-tip { margin:18px 0 0; color:#9caec7; font-size:12px; line-height:1.45; }
.home-page { height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; background:radial-gradient(circle at 83% 10%, #29476a 0, #111d31 31%, var(--bg) 72%); }
.home-header { display:flex; align-items:center; justify-content:space-between; width:min(1180px, 100%); min-height:76px; margin:0 auto; padding:14px 28px; }.play-link { min-height:44px; display:inline-flex; align-items:center; gap:9px; color:#d7edff; font-size:14px; font-weight:750; text-decoration:none; }.play-link span { color:#72d7ed; font-size:20px; }
.home-hero { display:grid; grid-template-columns:minmax(0, .94fr) minmax(390px, 1.06fr); align-items:center; gap:clamp(35px, 7vw, 105px); width:min(1180px, 100%); min-height:calc(100vh - 76px); margin:0 auto; padding:40px 28px 82px; }.seo-copy { max-width:550px; }.kicker { margin:0 0 12px; color:#7bdaed; font-size:11px; font-weight:900; letter-spacing:.16em; }.seo-copy h1 { max-width:520px; margin:0; color:#f4f8ff; font-size:clamp(42px, 5vw, 68px); font-weight:900; letter-spacing:-.065em; line-height:.99; }.seo-copy p:not(.kicker) { max-width:510px; color:#adbed3; font-size:17px; line-height:1.62; }.seo-copy .hero-lede { margin-top:28px; color:#e1ecf9; font-size:19px; }.primary-cta { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; margin-top:12px; padding:0 20px; border-radius:15px; color:#06263b; background:linear-gradient(135deg,#a9ffff,#4fd9f0); box-shadow:0 10px 25px rgba(39,181,215,.22); font-weight:900; text-decoration:none; }.primary-cta span { font-size:20px; }.feature-list { display:flex; flex-wrap:wrap; gap:16px; margin-top:28px; color:#91adc5; font-size:13px; font-weight:700; }.feature-list span::before { content:"✓"; margin-right:6px; color:#7ce0ec; }
.tutorial-card { padding:23px; border:1px solid rgba(181,220,246,.16); border-radius:28px; background:linear-gradient(145deg,rgba(34,57,87,.95),rgba(11,20,36,.98)); box-shadow:0 26px 75px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.06); }.tutorial-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }.tutorial-heading .kicker { margin-bottom:5px; font-size:9px; }.tutorial-heading h2 { margin:0; font-size:25px; letter-spacing:-.045em; }.tutorial-count { flex:none; padding:7px 9px; border-radius:9px; color:#b9d2e7; background:rgba(5,12,25,.28); font-size:11px; font-weight:800; }.tutorial-instruction { min-height:24px; margin:16px 0 10px; color:#aabdd2; font-size:13px; }.tutorial-board { position:relative; min-height:345px; overflow:hidden; border:5px solid rgba(173,198,231,.25); border-radius:23px; background:radial-gradient(circle at 50% 0,rgba(74,90,157,.28),transparent 60%),var(--board); }.tutorial-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:#384986; opacity:.75; }.dot-a { top:19%; left:28%; }.dot-b { top:49%; left:74%; }.dot-c { bottom:17%; left:39%; }.tutorial-arrow { position:absolute; display:grid; place-items:center; width:65px; height:65px; border:0; border-radius:18px; color:#e8fbff; background:linear-gradient(145deg,#54bee1,#237bc2); box-shadow:0 8px 17px rgba(0,0,0,.26), inset 0 -5px rgba(0,58,126,.27); font-size:40px; cursor:pointer; transition:transform .24s ease,opacity .24s ease,filter .24s ease; }.tutorial-arrow span { translate:0 -2px; }.tutorial-arrow:focus-visible { outline:3px solid #fff2a5; outline-offset:4px; }.tutorial-arrow.is-safe { animation:tutorialPulse 1.1s ease-in-out infinite alternate; }.tutorial-arrow.arrow-right { top:18%; left:26%; }.tutorial-arrow.arrow-up { right:17%; bottom:19%; color:#f0eaff; background:linear-gradient(145deg,#927ced,#5a5fc7); }.tutorial-arrow.arrow-left { bottom:16%; left:35%; color:#fff7dd; background:linear-gradient(145deg,#e2b653,#b77b27); }.tutorial-arrow.is-clearing { pointer-events:none; opacity:0; transform:translateX(150px) scale(.7); animation:none; }.tutorial-arrow.arrow-up.is-clearing { transform:translateY(-150px) scale(.7); }.tutorial-arrow.arrow-left.is-clearing { transform:translateX(-150px) scale(.7); }.tutorial-arrow.is-wrong { animation:tutorialShake .32s linear; filter:saturate(.5) hue-rotate(300deg); }.tutorial-note { margin:13px 2px 0; color:#8298b2; font-size:12px; line-height:1.45; }@keyframes tutorialPulse { from { box-shadow:0 8px 17px rgba(0,0,0,.26),0 0 0 0 rgba(110,223,240,.0); } to { box-shadow:0 8px 17px rgba(0,0,0,.26),0 0 0 9px rgba(110,223,240,.18); } }@keyframes tutorialShake { 20%,60% { translate:-5px 0; } 40%,80% { translate:5px 0; } }
.how-to-play { display:grid; grid-template-columns:.7fr 1.3fr; gap:55px; width:min(1125px, calc(100% - 56px)); margin:0 auto; padding:58px 0; border-top:1px solid rgba(175,208,239,.14); }.how-to-play h2,.home-faq h2 { margin:0; font-size:clamp(29px, 3.5vw, 43px); letter-spacing:-.05em; }.how-to-play ol { display:grid; gap:21px; margin:0; padding:0; list-style:none; counter-reset:rules; }.how-to-play li { position:relative; padding-left:53px; color:#b2c2d5; font-size:16px; line-height:1.55; counter-increment:rules; }.how-to-play li::before { content:counter(rules); position:absolute; top:0; left:0; display:grid; place-items:center; width:33px; height:33px; border:1px solid rgba(121,217,235,.4); border-radius:50%; color:#89e7f1; font-weight:900; }.how-to-play strong { color:#edf5ff; }.home-faq { display:grid; grid-template-columns:1.1fr repeat(3, 1fr); gap:26px; width:min(1125px, calc(100% - 56px)); margin:0 auto; padding:58px 0 76px; border-top:1px solid rgba(175,208,239,.14); }.home-faq h3 { margin:3px 0 10px; color:#e5effb; font-size:16px; }.home-faq p { margin:0; color:#91a7c0; font-size:14px; line-height:1.55; }.home-footer { display:flex; justify-content:space-between; gap:24px; width:min(1125px, calc(100% - 56px)); margin:0 auto; padding:22px 0 32px; border-top:1px solid rgba(175,208,239,.14); color:#7187a0; font-size:13px; }.home-footer nav,.content-footer nav { display:flex; flex-wrap:wrap; gap:18px; }.home-footer a { color:#9ddfeb; text-decoration:none; }.dialog-actions--single { display:block; }.dialog-actions--single .dialog-button { display:grid; place-items:center; text-decoration:none; }
.content-page { height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; background:radial-gradient(circle at 78% 6%,#243d5d 0,#101b2e 28%,var(--bg) 70%); }.content-header { gap:28px; }.site-nav { display:flex; align-items:center; gap:20px; margin-left:auto; }.site-nav a { min-height:44px; display:inline-flex; align-items:center; color:#8fa7c1; font-size:13px; font-weight:750; text-decoration:none; }.site-nav a:hover,.site-nav a[aria-current="page"] { color:#9de8f2; }.content-shell { width:min(1040px,calc(100% - 56px)); margin:0 auto; padding:48px 0 90px; }.breadcrumb { display:flex; gap:9px; align-items:center; color:#6f849d; font-size:12px; }.breadcrumb a { color:#8fddea; text-decoration:none; }.content-hero { max-width:780px; padding:65px 0 62px; }.content-hero h1 { margin:0; color:#f4f8ff; font-size:clamp(43px,6vw,74px); letter-spacing:-.065em; line-height:1; }.content-hero > p:not(.kicker) { max-width:650px; margin:25px 0 0; color:#aec0d4; font-size:19px; line-height:1.6; }.content-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.content-card { padding:30px; border:1px solid rgba(176,208,239,.14); border-radius:24px; background:linear-gradient(145deg,rgba(27,46,72,.86),rgba(12,21,37,.92)); }.content-card--wide { grid-column:1/-1; }.content-card h2,.faq-list h2,.timeline > h2,.content-cta h2 { margin:0 0 17px; color:#edf5ff; font-size:clamp(24px,3vw,34px); letter-spacing:-.04em; }.content-card p,.content-card li,.faq-list p,.release li { color:#9eb1c7; font-size:15px; line-height:1.7; }.content-card p:last-child { margin-bottom:0; }.content-cta { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:22px; padding:34px; border:1px solid rgba(105,216,235,.22); border-radius:24px; background:rgba(29,65,80,.42); }.content-cta h2 { margin:0; }.guide-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0; padding:0; list-style:none; counter-reset:guide; }.guide-steps li { position:relative; padding-top:52px; counter-increment:guide; }.guide-steps li::before { content:counter(guide); position:absolute; top:0; left:0; display:grid; place-items:center; width:37px; height:37px; border:1px solid rgba(116,224,240,.45); border-radius:50%; color:#91eaf3; font-weight:900; }.guide-steps strong,.guide-steps span { display:block; }.guide-steps strong { margin-bottom:7px; color:#edf5ff; }.plain-list { margin:0; padding-left:20px; }.faq-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:28px; }.faq-list > h2 { grid-column:1/-1; margin-top:18px; }.faq-list article { padding:26px; border:1px solid rgba(176,208,239,.13); border-radius:20px; background:rgba(17,30,49,.72); }.faq-list h3,.release h3 { margin:0 0 10px; color:#edf5ff; font-size:18px; }.faq-list p { margin:0; }.timeline { display:grid; gap:18px; }.release { padding:30px; border-left:3px solid #6fd9ea; border-radius:0 22px 22px 0; background:rgba(16,29,48,.75); }.release > div { display:flex; gap:12px; margin-bottom:12px; color:#82a0bc; font-size:12px; font-weight:800; }.release > div span { color:#83e3ed; }.release ul { margin:0; padding-left:20px; }.release a { color:#8fe7ef; }.content-footer { display:flex; justify-content:space-between; gap:24px; width:min(1040px,calc(100% - 56px)); margin:0 auto; padding:25px 0 35px; border-top:1px solid rgba(175,208,239,.14); color:#7187a0; font-size:13px; }.content-footer a { color:#9ddfeb; text-decoration:none; }
.tutorial-board { display:grid; place-items:center; min-height:345px; aspect-ratio:1.15; }.tutorial-svg { width:100%; height:100%; }.tutorial-board .tutorial-arrow { cursor:pointer; outline:none; transition:opacity .24s ease, transform .24s ease; }.tutorial-board .tutorial-arrow polyline:not(.arrow-hit) { stroke:#6bd4e7; stroke-width:.16; }.tutorial-board .tutorial-arrow .arrow-head { fill:#85e5f2; }.tutorial-board .tutorial-arrow[data-arrow="violet"] polyline:not(.arrow-hit),.tutorial-board .tutorial-arrow[data-arrow="violet"] .arrow-head { stroke:#766ee9; fill:#766ee9; }.tutorial-board .tutorial-arrow[data-arrow="gold"] polyline:not(.arrow-hit),.tutorial-board .tutorial-arrow[data-arrow="gold"] .arrow-head { stroke:#d69b2f; fill:#d69b2f; }.tutorial-board .tutorial-arrow.is-safe polyline:not(.arrow-hit) { stroke:#e29726 !important; filter:drop-shadow(0 0 4px rgba(226,151,38,.5)); animation:hintPulse .8s ease-in-out infinite alternate; }.tutorial-board .tutorial-arrow.is-safe .arrow-head { fill:#e29726 !important; }.tutorial-board .tutorial-arrow.is-clearing { opacity:0; pointer-events:none; transform:translateX(110px); }.tutorial-board .tutorial-arrow[data-direction="up"].is-clearing { transform:translateY(-110px); }.tutorial-board .tutorial-arrow.is-wrong { animation:shake .32s linear; }.tutorial-board .tutorial-arrow:focus-visible polyline:not(.arrow-hit) { stroke:#fff2a5; stroke-width:.22; }
.tutorial-game-frame { display:block; width:100%; height:500px; border:5px solid rgba(173,198,231,.25); border-radius:23px; background:var(--board); }.tutorial-embed .app-shell { width:100%; padding:0; }.tutorial-embed .site-header,.tutorial-embed .level-summary,.tutorial-embed .status-row,.tutorial-embed .instruction,.tutorial-embed .board-toolbar,.tutorial-embed .tools { display:none; }.tutorial-embed .game-panel { border:0; border-radius:0; background:var(--board); box-shadow:none; }.tutorial-embed .board-viewport { width:100%; height:100%; margin:0; border:0; border-radius:0; overflow:hidden; }.tutorial-embed .board { width:100%; height:100%; aspect-ratio:auto; }
@media (max-width:800px) { .home-header { padding-inline:20px; }.home-hero { grid-template-columns:1fr; min-height:0; padding:52px 20px 68px; }.seo-copy { max-width:none; }.seo-copy h1 { max-width:620px; }.tutorial-card { max-width:620px; }.how-to-play { grid-template-columns:1fr; gap:30px; width:calc(100% - 40px); }.home-faq { grid-template-columns:1fr; width:calc(100% - 40px); gap:17px; }.home-faq h2 { margin-bottom:8px; }.home-footer { width:calc(100% - 40px); }.content-header { flex-wrap:wrap; }.content-header .site-nav { order:3; width:100%; margin-left:0; overflow-x:auto; }.content-shell,.content-footer { width:calc(100% - 40px); }.content-hero { padding:48px 0; }.content-grid,.faq-list { grid-template-columns:1fr; }.content-card--wide,.faq-list > h2 { grid-column:auto; }.guide-steps { grid-template-columns:1fr; }.content-cta { align-items:flex-start; flex-direction:column; } }
@media (max-width:440px) { .home-header { min-height:65px; padding-inline:16px; }.play-link { font-size:12px; }.home-hero { padding-inline:16px; }.seo-copy h1 { font-size:42px; }.seo-copy p:not(.kicker) { font-size:16px; }.seo-copy .hero-lede { font-size:17px; }.tutorial-card { padding:16px; }.tutorial-game-frame { height:390px; }.how-to-play,.home-faq,.home-footer { width:calc(100% - 32px); } }

/* Paper Lab theme -------------------------------------------------------- */
:root {
  color-scheme:light;
  --bg:#f4eedf;
  --panel:#fffaf0;
  --panel-2:#eee4ce;
  --board:#fbf4df;
  --line:#283b70;
  --line-head:#283b70;
  --dot:#cfc3a8;
  --ink:#202b48;
  --muted:#6f7080;
  --danger:#c94f43;
  --gold:#ee8a43;
  --blue:#315fc7;
}
html { background:var(--bg); }
body {
  color:var(--ink);
  font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(40,59,112,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,59,112,.045) 1px,transparent 1px);
  background-size:24px 24px;
}
.home-page,.content-page {
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 84% 4%,rgba(240,122,79,.16),transparent 28%),
    linear-gradient(rgba(40,59,112,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,59,112,.045) 1px,transparent 1px);
  background-size:auto,24px 24px,24px 24px;
}
.brand { gap:10px; color:var(--ink); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-weight:900; letter-spacing:-.045em; }
.brand-mark { width:29px; height:29px; border:2px solid var(--ink); border-radius:5px; color:#fff9ec; background:#f07a4f; box-shadow:3px 3px 0 var(--ink); transform:none; }
.brand-name { color:var(--ink); background:none; -webkit-text-fill-color:currentColor; }
.home-header { min-height:82px; border-bottom:2px solid rgba(32,43,72,.16); }
.play-link { color:var(--ink); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.play-link span { color:#f07a4f; }
.home-hero { grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr); gap:clamp(42px,7vw,96px); min-height:calc(100vh - 82px); padding-top:58px; }
.kicker { color:var(--blue); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; letter-spacing:.19em; }
.seo-copy h1,.content-hero h1 {
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  letter-spacing:-.065em;
}
.seo-copy h1 {
  max-width:590px;
  font-family:ui-rounded,"SF Pro Rounded","Avenir Next",Inter,system-ui,sans-serif;
  font-size:clamp(49px,5.5vw,76px);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:1.02;
}
.seo-copy p:not(.kicker),.seo-copy .hero-lede { color:#626577; }
.seo-copy .hero-lede { color:#303b5b; font-size:20px; }
.primary-cta {
  min-height:54px;
  border:2px solid var(--ink);
  border-radius:6px;
  color:#fffaf0;
  background:var(--blue);
  box-shadow:5px 5px 0 var(--ink);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:13px;
  letter-spacing:.02em;
  transition:translate .15s ease,box-shadow .15s ease;
}
.primary-cta:hover { translate:2px 2px; box-shadow:3px 3px 0 var(--ink); }
.feature-list { gap:9px; color:var(--ink); }
.feature-list span { padding:6px 9px; border:1px solid rgba(32,43,72,.35); background:rgba(255,250,240,.62); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:11px; text-transform:uppercase; }
.feature-list span::before { color:#f07a4f; }
.tutorial-card {
  position:relative;
  padding:25px;
  border:2px solid var(--ink);
  border-radius:10px;
  background:var(--panel);
  box-shadow:10px 10px 0 #e47a55;
}
.tutorial-card::before {
  content:"FIELD TEST 001";
  position:absolute;
  top:-14px;
  right:22px;
  padding:5px 9px;
  border:2px solid var(--ink);
  background:#f4d45d;
  color:var(--ink);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}
.tutorial-heading .kicker {
  display:inline-flex;
  margin:0 0 10px;
  padding:5px 8px;
  border:2px solid var(--ink);
  border-radius:3px;
  color:var(--ink);
  background:#f4d45d;
  font-size:11px;
  font-weight:950;
  letter-spacing:.14em;
  box-shadow:2px 2px 0 var(--ink);
}
.tutorial-heading h2 {
  color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded","Avenir Next",Inter,system-ui,sans-serif;
  font-size:clamp(31px,3vw,38px);
  font-weight:900;
  letter-spacing:-.045em;
  line-height:1;
}
.guide-practice .tutorial-heading { align-items:center; }
.tutorial-full-game { flex:none; min-height:46px; margin:0; padding:0 15px; font-size:11px; }
.tutorial-instruction { margin:14px 0 11px; color:#434b63; font-size:14px; font-weight:700; line-height:1.45; }
.tutorial-note { color:#696b78; }
.tutorial-game-frame { height:260px; border:2px solid var(--ink); border-radius:4px; background:var(--board); }
.how-to-play {
  width:min(1125px,calc(100% - 56px));
  padding:46px;
  border:2px solid var(--ink);
  background:var(--blue);
  box-shadow:8px 8px 0 var(--ink);
}
.how-to-play .kicker { color:#f4d45d; }
.how-to-play h2 { color:#fffaf0; font-family:Georgia,"Times New Roman",serif; }
.how-to-play li,.how-to-play strong { color:#fffaf0; }
.how-to-play li::before { border-color:#f4d45d; color:#f4d45d; }
.home-faq { border-top:0; }
.home-guide { width:min(1125px,calc(100% - 56px)); margin:0 auto; padding:62px 0; }
.home-guide-intro { max-width:760px; }
.home-guide h2 { margin:0; color:var(--ink); font-family:Georgia,"Times New Roman",serif; font-size:clamp(30px,3.7vw,46px); letter-spacing:-.05em; }
.home-guide h3 { margin:0 0 11px; color:var(--ink); font-size:19px; }
.home-guide p { color:#696b78; font-size:16px; line-height:1.7; }
.home-guide-intro > p:not(.kicker) { max-width:730px; }
.home-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:32px; }
.home-guide-card,.home-guide-detail { padding:27px; border:2px solid var(--ink); border-radius:4px; background:rgba(255,250,240,.72); box-shadow:5px 5px 0 rgba(32,43,72,.16); }
.home-guide-card p,.home-guide-detail p { margin:0; }
.home-guide-detail { margin-top:18px; }
.home-guide-detail p + p { margin-top:15px; }
.home-faq h2 { color:var(--ink); font-family:Georgia,"Times New Roman",serif; }
.home-faq > div { padding-top:18px; border-top:3px solid #f07a4f; }
.home-faq h3 { color:var(--ink); }
.home-faq p { color:#696b78; }
.home-footer,.content-footer { border-top:2px solid rgba(32,43,72,.28); color:#74717a; }
.home-footer a,.content-footer a { color:var(--ink); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:11px; text-transform:uppercase; }

/* Game surface */
.game-page { height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; color:var(--ink); background-color:#e9dfc9; }
.game-page .app-shell { width:min(100%,1120px); padding:14px 18px 27px; }
.game-page .site-header { min-height:55px; }
.game-panel {
  border:2px solid var(--ink);
  border-radius:12px;
  background:var(--panel);
  box-shadow:8px 8px 0 rgba(32,43,72,.22);
}
.level-summary { min-height:52px; border-bottom:2px solid rgba(32,43,72,.18); }
.level-summary h1,.level-summary h2 { color:var(--ink); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:14px; letter-spacing:.04em; text-transform:uppercase; }
.header-button {
  border:2px solid var(--ink);
  border-radius:5px;
  color:var(--ink);
  background:#fffaf0;
  box-shadow:2px 2px 0 rgba(32,43,72,.25);
}
.remaining-stat,.difficulty-stat { border:1px solid rgba(32,43,72,.24); border-radius:4px; color:var(--ink); background:#eee5d1; }
.difficulty-stat { color:#fffaf0; background:var(--blue); }
.hearts { color:#e26355; filter:none; }
.hearts .lost { color:#b9b09f; }
.instruction { color:#a0473e; font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; }
.level-jump { color:#73717b; }
.level-jump select,.zoom-controls button {
  border:1px solid rgba(32,43,72,.45);
  border-radius:4px;
  color:var(--ink);
  background:#fffaf0;
}
.board-viewport {
  border:2px solid var(--ink);
  border-radius:7px;
  background:var(--board);
  box-shadow:inset 0 0 0 6px rgba(40,59,112,.045);
}
.board {
  background-color:var(--board);
  background-image:none;
}
.grid-layer { fill:var(--dot); opacity:.78; }
.arrow polyline { stroke:var(--line); filter:none; }
.arrow .arrow-head { fill:var(--line-head); }
.board.color-mode .arrow[data-direction="up"] polyline:not(.arrow-hit),.board.color-mode .arrow[data-direction="up"] .arrow-head { stroke:#315fc7; fill:#315fc7; }
.board.color-mode .arrow[data-direction="right"] polyline:not(.arrow-hit),.board.color-mode .arrow[data-direction="right"] .arrow-head { stroke:#df6c48; fill:#df6c48; }
.board.color-mode .arrow[data-direction="down"] polyline:not(.arrow-hit),.board.color-mode .arrow[data-direction="down"] .arrow-head { stroke:#637c42; fill:#637c42; }
.board.color-mode .arrow[data-direction="left"] polyline:not(.arrow-hit),.board.color-mode .arrow[data-direction="left"] .arrow-head { stroke:#8562a8; fill:#8562a8; }
.arrow.hint polyline:not(.arrow-hit) { stroke:#e47738 !important; filter:drop-shadow(0 0 3px rgba(228,119,56,.35)); }
.arrow.hint .arrow-head { fill:#e47738 !important; }
.arrow.blocked polyline:not(.arrow-hit) { stroke:var(--danger) !important; }
.tools { min-height:78px; }
.hint-button {
  width:58px;
  height:58px;
  border:2px solid var(--ink);
  border-radius:9px;
  color:var(--ink);
  background:#f4d45d;
  box-shadow:5px 5px 0 var(--ink);
}
.hint-button:active { translate:2px 2px; box-shadow:3px 3px 0 var(--ink); }
.hint-count { border:2px solid var(--ink); color:#fffaf0; background:#f07a4f; }
.result-dialog,.settings-dialog {
  border:2px solid var(--ink);
  border-radius:10px;
  color:var(--ink);
  background:var(--panel);
  box-shadow:10px 10px 0 rgba(32,43,72,.35);
}
.result-dialog::backdrop,.settings-dialog::backdrop { background:rgba(32,43,72,.45); backdrop-filter:blur(2px); }
.result-dialog h2,.settings-heading h2 { color:var(--ink); font-family:Georgia,"Times New Roman",serif; }
.result-dialog p:not(.eyebrow),.fullscreen-tip { color:#686a77; }
.eyebrow { color:var(--blue); }
.dialog-button,.close-settings,.setting-options button { border:2px solid var(--ink); border-radius:6px; color:var(--ink); background:#fffaf0; }
.dialog-button--primary { color:#fffaf0; background:var(--blue); }
.setting-group { border-bottom-color:rgba(32,43,72,.17); }
.setting-group h3 { color:#70717c; }
.setting-options button.selected { border-color:var(--ink); outline:3px solid #f07a4f; background:#f4d45d; }
.game-panel.is-fullscreen { background:var(--panel); }

/* Content pages */
.content-page { background-color:var(--bg); background-image:radial-gradient(circle at 88% 0,rgba(240,122,79,.15),transparent 30%),linear-gradient(rgba(40,59,112,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(40,59,112,.045) 1px,transparent 1px); }
.site-nav a { color:#696b78; font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:11px; letter-spacing:.03em; text-transform:uppercase; }
.site-nav a:hover,.site-nav a[aria-current="page"] { color:var(--blue); text-decoration:underline 2px #f07a4f; text-underline-offset:6px; }
.breadcrumb { color:#77747c; font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; }
.breadcrumb a { color:var(--blue); }
.content-hero > p:not(.kicker) { color:#626577; }
.content-card {
  border:2px solid var(--ink);
  border-radius:7px;
  background:rgba(255,250,240,.88);
  box-shadow:5px 5px 0 rgba(49,95,199,.2);
}
.content-card h2,.faq-list h2,.timeline > h2,.content-cta h2 { color:var(--ink); font-family:Georgia,"Times New Roman",serif; }
.content-card p,.content-card li,.faq-list p,.release li { color:#686a77; }
.content-shell > article { display:grid; gap:22px; }
.content-shell > article > .content-cta { margin-top:0; }
.content-cta p { max-width:620px; margin:0; color:#525664; font-size:15px; line-height:1.6; }
.content-cta { border:2px solid var(--ink); border-radius:7px; background:#f4d45d; }
.guide-steps li::before { border:2px solid var(--ink); color:#fffaf0; background:var(--blue); }
.guide-steps strong { color:var(--ink); }
.faq-list article { border:2px solid var(--ink); border-radius:7px; background:rgba(255,250,240,.85); }
.faq-list article:nth-of-type(odd) { box-shadow:5px 5px 0 rgba(240,122,79,.26); }
.faq-list article:nth-of-type(even) { box-shadow:5px 5px 0 rgba(49,95,199,.2); }
.faq-list h3,.release h3 { color:var(--ink); }
.release { border:2px solid var(--ink); border-left:9px solid #f07a4f; border-radius:4px; background:rgba(255,250,240,.88); box-shadow:5px 5px 0 rgba(32,43,72,.16); }
.release > div { color:#74717b; }
.release > div span,.release a { color:var(--blue); }

/* Share menu */
.share-control {
  position:relative;
  z-index:20;
  flex:0 0 auto;
}
.home-header > .share-control { margin-left:2px; }
.game-page .site-header > .share-control { margin-left:10px; }
.donate-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  margin-left:auto;
  padding:0 13px;
  border:2px solid var(--ink);
  border-radius:5px;
  color:var(--ink);
  background:#fffaf0;
  box-shadow:3px 3px 0 var(--ink);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-decoration:none;
  text-transform:uppercase;
  transition:translate .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.donate-link span { color:#d94f43; font-size:17px; line-height:1; }
.donate-link:hover { background:#f4d45d; }
.donate-link:active { translate:2px 2px; box-shadow:1px 1px 0 var(--ink); }
.donate-link:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.share-trigger {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  padding:0;
  border:2px solid var(--ink);
  border-radius:50%;
  color:var(--ink);
  background:#fffaf0;
  box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;
  transition:translate .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.share-trigger:hover,.share-control.is-open .share-trigger { background:#f4d45d; }
.share-trigger:active { translate:2px 2px; box-shadow:1px 1px 0 var(--ink); }
.share-trigger svg {
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.share-menu {
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:min(292px,calc(100vw - 24px));
  padding:13px;
  border:2px solid var(--ink);
  border-radius:8px;
  color:var(--ink);
  background:#fffaf0;
  box-shadow:7px 7px 0 var(--ink);
}
.share-menu[hidden] { display:none; }
.share-menu-title {
  margin:2px 7px 8px;
  color:#77717a;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.share-option {
  display:grid;
  grid-template-columns:40px 1fr;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:51px;
  padding:5px 8px;
  border:0;
  border-radius:5px;
  color:var(--ink);
  background:transparent;
  font-size:16px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.share-option:hover,.share-option:focus-visible { background:#eee4ce; outline:none; }
.share-option-icon {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:2px solid var(--ink);
  border-radius:50%;
  color:#fff;
  background:var(--blue);
}
.share-option-icon svg { width:22px; height:22px; }
.share-option--facebook .share-option-icon { background:#287be0; }
.share-option--x .share-option-icon { background:#111; }
.share-option--reddit .share-option-icon { background:#f04b23; }
.share-option--whatsapp .share-option-icon { background:#23b96b; }
.share-option--instagram .share-option-icon { background:linear-gradient(145deg,#714ac9,#d62b76 55%,#ef983c); }
.share-option--copy .share-option-icon { background:#8562a8; }
.share-option--instagram svg,.share-option--copy svg {
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.share-option--instagram .icon-fill { fill:currentColor; stroke:none; }
.share-feedback {
  min-height:0;
  margin:4px 8px 1px;
  color:#637c42;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:10px;
  font-weight:800;
}
.share-feedback:empty { display:none; }

.tutorial-document,html:has(> body.tutorial-embed),.tutorial-embed { min-width:0; }
.tutorial-embed.game-page { background:var(--board); }
.tutorial-embed .app-shell { width:100%; padding:0; }
.tutorial-embed .game-panel { background:var(--board); box-shadow:none; }
.tutorial-embed .board-viewport { border:0; box-shadow:none; }
.tutorial-embed .board {
  width:auto;
  max-width:100%;
  height:100%;
  max-height:100%;
  aspect-ratio:1 / 1;
}

@media (max-width:800px) {
  .home-hero { grid-template-columns:1fr; }
  .tutorial-card { box-shadow:7px 7px 0 #e47a55; }
  .how-to-play { padding:32px; box-shadow:6px 6px 0 var(--ink); }
  .home-guide { width:calc(100% - 40px); }
  .home-guide-grid { grid-template-columns:1fr; }
  .content-header .site-nav { order:4; padding-bottom:5px; border-top:1px solid rgba(32,43,72,.2); }
}
@media (max-width:440px) {
  .seo-copy h1 { font-size:47px; }
  .home-header { border-bottom-width:1px; }
  .guide-practice .tutorial-heading { align-items:flex-start; flex-wrap:wrap; }
  .tutorial-heading h2 { font-size:31px; }
  .tutorial-game-frame { height:230px; }
  .home-footer,.content-footer { align-items:flex-start; flex-direction:column; }
  .content-card,.faq-list article,.release { box-shadow:3px 3px 0 rgba(32,43,72,.16); }
  .home-header { gap:10px; }
  .home-header .play-link { margin-left:auto; }
  .share-trigger { width:44px; height:44px; }
  .donate-link { min-height:40px; padding-inline:10px; font-size:10px; }
  .share-menu { position:fixed; top:72px; right:12px; left:12px; width:auto; max-height:calc(100dvh - 84px); overflow:auto; }
}
@media (max-width:640px) {
  .app-shell { padding:8px 8px 25px; }
  .site-header { padding:0 8px; }
  .brand { font-size:16px; }
  .brand-mark { width:21px; height:21px; }
  .game-panel { border-radius:20px; }
  .level-summary { padding:6px 10px; }
  .header-button { width:44px; height:44px; }
  .status-row { padding:5px 10px 1px; }
  .board-toolbar { min-height:52px; padding:4px 10px; }
  .board-viewport { margin:0 10px; border-radius:18px; }
  .level-jump select { width:120px; max-width:120px; height:44px; font-size:11px; }
  .zoom-controls { grid-template-columns:44px 52px 44px; justify-self:end; }
  .zoom-controls button { height:44px; font-size:17px; }
  #zoomResetButton { font-size:11px; }
  .arrow .arrow-hit { stroke-width:24px; }
}
@media (max-width:360px) {
  .level-jump > span { display:none; }
  .board-toolbar { gap:8px; padding-inline:2px; }
}
@media (max-height:700px) { .site-header { min-height:40px; }.level-summary { padding-block:8px; }.mode-bar { padding-top:7px; }.status-row { padding-top:8px; }.board-toolbar { min-height:40px; padding-block:4px; }.tools { min-height:62px; padding-top:4px; }.hint-button { width:50px; height:50px; }.bulb { font-size:26px; } }
@media (orientation:landscape) and (max-height:500px) {
  .game-page:not(.tutorial-embed) .app-shell { width:100%; padding:6px; }
  .game-page:not(.tutorial-embed) .site-header { display:none; }
  .game-page:not(.tutorial-embed) .game-panel {
    display:grid;
    grid-template-columns:clamp(160px,23vw,190px) minmax(0,1fr) 64px;
    grid-template-rows:54px minmax(0,1fr);
    border-radius:12px;
  }
  .game-page:not(.tutorial-embed) .level-summary { grid-column:1/-1; grid-row:1; min-height:54px; padding:4px 10px; }
  .game-page:not(.tutorial-embed) .header-button { width:44px; height:44px; }
  .game-page:not(.tutorial-embed) .status-row { grid-column:1; grid-row:2; align-self:start; padding:8px; }
  .game-page:not(.tutorial-embed) .instruction { display:none; }
  .game-page:not(.tutorial-embed) .board-toolbar {
    grid-column:1;
    grid-row:2;
    align-self:end;
    min-height:0;
    padding:8px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .game-page:not(.tutorial-embed) .level-jump { align-items:stretch; flex-direction:column; }
  .game-page:not(.tutorial-embed) .level-jump select { width:100%; max-width:none; height:44px; font-size:11px; }
  .game-page:not(.tutorial-embed) .zoom-controls { align-self:center; }
  .game-page:not(.tutorial-embed) .zoom-controls { grid-template-columns:44px 52px 44px; }
  .game-page:not(.tutorial-embed) .zoom-controls button { height:44px; font-size:17px; }
  .game-page:not(.tutorial-embed) .board-viewport { grid-column:2; grid-row:2; margin:6px 4px; border-radius:8px; }
  .game-page:not(.tutorial-embed) .tools { grid-column:3; grid-row:2; align-items:center; min-height:0; padding:0 7px; }
}

/* Clear direction cues: keep arrowheads readable over dense, bent paths. */
.arrow .arrow-head {
  stroke:var(--board) !important;
  stroke-width:.07;
  stroke-linejoin:round;
  paint-order:stroke fill;
  filter:drop-shadow(0 .04px .04px rgba(20,29,48,.28));
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Static game guide keeps the playable page understandable without JavaScript. */
.game-nav { display:flex; align-items:center; gap:16px; margin-left:auto; }
.game-nav a,.game-footer a { color:var(--ink); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:11px; font-weight:800; letter-spacing:.04em; text-decoration:none; text-transform:uppercase; }
.game-nav a:hover,.game-footer a:hover { color:var(--blue); text-decoration:underline 2px #f07a4f; text-underline-offset:5px; }
.game-guide { display:grid; gap:22px; width:min(1040px,calc(100% - 56px)); margin:0 auto; padding:48px 0 62px; }
.game-guide-hero { max-width:800px; padding:20px 0 13px; }
.game-guide-hero h1 { max-width:720px; margin:0; color:var(--ink); font-family:Georgia,"Times New Roman",serif; font-size:clamp(35px,5vw,56px); letter-spacing:-.06em; line-height:1; }
.game-guide-hero > p:not(.kicker) { max-width:700px; margin:18px 0 0; color:#555a6b; font-size:18px; line-height:1.62; }
.game-guide-card { padding:30px; border:2px solid var(--ink); border-radius:7px; background:rgba(255,250,240,.88); box-shadow:5px 5px 0 rgba(49,95,199,.2); }
.game-guide-card h2 { margin:0 0 15px; color:var(--ink); font-family:Georgia,"Times New Roman",serif; font-size:clamp(25px,3vw,34px); letter-spacing:-.04em; }
.game-guide-card p,.game-guide-card li { color:#686a77; font-size:15px; line-height:1.72; }
.game-guide-card p:last-child { margin-bottom:0; }
.game-rule-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:22px 0 0; padding:0; list-style:none; counter-reset:game-rule; }
.game-rule-list li { position:relative; padding-top:48px; counter-increment:game-rule; }
.game-rule-list li::before { content:counter(game-rule); position:absolute; top:0; left:0; display:grid; place-items:center; width:34px; height:34px; border:2px solid var(--ink); border-radius:50%; color:#fffaf0; background:var(--blue); font-weight:900; }
.game-rule-list strong { color:var(--ink); }
.game-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.game-guide-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; background:#f4d45d; }
.game-guide-cta h2 { margin-bottom:8px; }
.game-guide-cta p { max-width:620px; margin:0; color:#525664; }
.game-guide-links { display:flex; flex:none; flex-wrap:wrap; gap:10px; align-items:center; }
.game-guide-links .primary-cta { margin:0; }
.secondary-cta { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 18px; border:2px solid var(--ink); border-radius:7px; color:var(--ink); background:#fffaf0; box-shadow:3px 3px 0 rgba(32,43,72,.22); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:11px; font-weight:900; letter-spacing:.03em; text-decoration:none; text-transform:uppercase; }
.game-footer { display:flex; justify-content:space-between; gap:24px; width:min(1040px,calc(100% - 56px)); margin:0 auto; padding:25px 0 35px; border-top:2px solid rgba(32,43,72,.28); color:#74717a; font-size:13px; }
.game-footer nav { display:flex; flex-wrap:wrap; gap:18px; }
/* The home and guide iframes reuse the game engine, not the full game document. */
.tutorial-embed .game-guide,.tutorial-embed .game-footer { display:none; }
@media (max-width:800px) {
  .game-nav { order:3; width:100%; margin-left:0; }
  .game-guide,.game-footer { width:calc(100% - 40px); }
  .game-guide-grid,.game-rule-list { grid-template-columns:1fr; }
  .game-guide-cta { align-items:flex-start; flex-direction:column; }
}
@media (max-width:440px) {
  .game-guide,.game-footer { width:calc(100% - 32px); }
  .game-guide { padding-top:32px; }
  .game-guide-card { padding:22px; box-shadow:3px 3px 0 rgba(32,43,72,.16); }
  .game-guide-hero > p:not(.kicker) { font-size:16px; }
  .game-footer { align-items:flex-start; flex-direction:column; }
}