:root{
  color-scheme:light;
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel-soft:#f8fafc;
  --ink:#172033;
  --muted:#6b7484;
  --line:#dce3ed;
  --orange:#f59e0b;
  --blue:#2563eb;
  --green:#16a34a;
  --shadow:0 10px 26px rgba(31,41,55,.09);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111827;
  --panel:#182230;
  --panel-soft:#202b3b;
  --ink:#f1f5f9;
  --muted:#a8b3c3;
  --line:#334155;
  --shadow:0 12px 30px rgba(0,0,0,.22);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:visible}
body{font-family:ui-rounded,"Arial Rounded MT Bold","Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);touch-action:manipulation}
button{font:inherit}
.app{height:100dvh;min-height:520px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;padding:6px 9px 4px;overflow:visible}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:5px 7px 5px 8px;box-shadow:0 3px 10px rgba(31,41,55,.045)}
.brand{display:flex;align-items:center;gap:8px;min-width:0}.brand-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-size:20px;background:#fff5db;border:1px solid #f5d18d;flex:0 0 auto}
h1{font-size:clamp(17px,1.45vw,23px);line-height:1;margin:0;font-weight:950;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;gap:5px;flex:0 0 auto}.btn{border:0;border-radius:10px;padding:7px 10px;min-height:32px;cursor:pointer;font-weight:900;transition:transform .1s ease,filter .1s ease,box-shadow .1s ease;white-space:nowrap}.btn:hover{filter:brightness(.985)}.btn:active{transform:scale(.97)}.btn:focus-visible,.dir:focus-visible{outline:4px solid rgba(37,99,235,.20);outline-offset:2px}.btn-ghost,.btn-theme{background:#eef2f7;color:#263244}.btn-full{background:#202a38;color:#fff}.btn-theme{min-width:76px}

.workspace{min-height:0;display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,2fr);gap:8px;overflow:visible}
.instruction-panel{min-height:0;align-self:start;display:grid;grid-template-rows:auto auto;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:12px;box-shadow:0 5px 16px rgba(31,41,55,.05);overflow:visible}
.instruction-main{min-height:0;display:flex;flex-direction:column;gap:10px;overflow:visible}.task-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.task-row strong{font-size:clamp(18px,1.55vw,24px);line-height:1.1}.eyebrow{display:inline-flex;align-items:center;width:max-content;border-radius:999px;background:#fff2d8;border:1px solid #f5d18d;color:#a55d00;padding:5px 8px;font-size:9px;font-weight:950;letter-spacing:.06em}
.instruction-list{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0;overflow:visible;padding-right:2px}.step-chip{display:grid;place-items:center;min-height:80px;padding:9px 12px;border-radius:13px;background:#f3f6fa;border:2px solid transparent;color:#344055;font-size:clamp(20px,1.55vw,28px);font-weight:950;transition:.15s}.step-content{width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(15px,1.4vw,22px);text-align:center}.step-chip .arrow{flex:0 0 clamp(54px,3.7vw,64px);width:clamp(54px,3.7vw,64px);height:clamp(48px,3.35vw,58px);display:grid;place-items:center;border-radius:14px;color:#fff;font-size:clamp(32px,2.55vw,44px);font-family:"Segoe UI Symbol","Arial Unicode MS",Arial,sans-serif;font-weight:1000;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.48);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.10),0 5px 0 var(--arrow-shadow),0 8px 13px rgba(20,35,65,.17);transform:translateY(-2px)}.step-chip .arrow-up{--arrow-shadow:#1d4fa8;background:linear-gradient(180deg,#69a7ff 0%,#3378e8 50%,#2563c7 100%)}.step-chip .arrow-down{--arrow-shadow:#087a53;background:linear-gradient(180deg,#57d9a5 0%,#16a36f 52%,#0b8a5d 100%)}.step-chip .arrow-left{--arrow-shadow:#6841a8;background:linear-gradient(180deg,#b28bf4 0%,#8658d8 52%,#7447c2 100%)}.step-chip .arrow-right{--arrow-shadow:#c05d09;background:linear-gradient(180deg,#ffc15e 0%,#f28b21 52%,#df7212 100%)}.step-text{display:inline-block;min-width:clamp(145px,11vw,190px);text-align:center;line-height:1.08;font-size:clamp(20px,1.55vw,28px);letter-spacing:-.015em}.step-chip{position:relative;overflow:hidden;isolation:isolate}
.step-chip .step-content{position:relative;z-index:2}
.step-chip.active{
  background:linear-gradient(180deg,#eef5ff 0%,#e8f1ff 100%);
  border-color:#3f7cf0;
  color:#164fb6;
  box-shadow:inset 0 0 0 2px rgba(63,124,240,.46),inset 6px 0 0 #2563eb,0 3px 10px rgba(37,99,235,.10);
}
.step-chip.active::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(90,151,255,.15),inset 0 0 18px rgba(90,151,255,.10);
  animation:activeFrameGlow 1.55s ease-in-out infinite;
}
.step-chip.active::before{
  content:"";
  position:absolute;
  z-index:1;
  top:-12%;
  bottom:-12%;
  left:-34%;
  width:22%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.10) 28%,rgba(255,255,255,.64) 50%,rgba(255,255,255,.10) 72%,transparent 100%);
  transform:skewX(-16deg);
  animation:activeSweep 2.25s ease-in-out infinite;
}
.step-chip.active .arrow{animation:activeArrowGlow 1.55s ease-in-out infinite}
.step-chip.done{background:#eaf8ee;color:#187a36;border-color:#a8dfb8}
.step-chip.done .arrow{filter:saturate(.82) brightness(.98)}
.step-chip.active.wrong{
  background:#fff1f1;
  color:#a61b15;
  border-color:#ef4444;
  box-shadow:inset 0 0 0 2px rgba(239,68,68,.44),inset 6px 0 0 #dc2626,0 3px 10px rgba(220,38,38,.10);
  animation:wrongFrameFlash .42s ease;
}
.step-chip.active.wrong::before{animation:none;opacity:0}
.step-chip.active.wrong::after{animation:none;box-shadow:inset 0 0 0 2px rgba(239,68,68,.22),inset 0 0 18px rgba(239,68,68,.12)}
.step-chip.active.wrong .arrow{animation:wrongArrowFlash .42s ease}
@keyframes activeFrameGlow{0%,100%{opacity:.52}50%{opacity:1}}
@keyframes activeSweep{0%,18%{left:-34%;opacity:0}32%{opacity:.85}58%{left:116%;opacity:.72}72%,100%{left:116%;opacity:0}}
@keyframes activeArrowGlow{0%,100%{filter:saturate(1.04) brightness(1) drop-shadow(0 0 0 rgba(37,99,235,0))}50%{filter:saturate(1.13) brightness(1.08) drop-shadow(0 0 7px rgba(37,99,235,.28))}}
@keyframes wrongFrameFlash{0%,100%{filter:none}45%{filter:saturate(1.14) brightness(1.02)}}
@keyframes wrongArrowFlash{0%,100%{filter:none}45%{filter:saturate(1.35) brightness(1.12) drop-shadow(0 0 7px rgba(239,68,68,.34))}}
.status-card{display:flex;align-items:center;gap:9px;border:1px solid #e2e8f0;background:var(--panel-soft);border-radius:12px;padding:8px 10px;min-height:50px}.status-icon{font-size:22px}.status-card strong{display:block;font-size:13px}.status-card p{margin:2px 0 0;font-size:11px;line-height:1.25;color:var(--muted);font-weight:700}.status-card.success{border-color:#a8dfb8;background:#effaf2}.status-card.error{border-color:#ffc1bc;background:#fff5f4}

.task-panel{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);overflow:visible}
.completion-banner{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:min(92%,420px);padding:14px 22px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,255,246,.97));border:2px solid #7ad698;box-shadow:0 16px 34px rgba(22,163,74,.20),0 4px 10px rgba(15,23,42,.08);text-align:center;pointer-events:none;animation:completionDrop .45s cubic-bezier(.22,.9,.35,1), completionPulse 1.7s ease-in-out infinite}
.completion-banner[hidden]{display:none}
.completion-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;font-size:12px;font-weight:950;letter-spacing:.06em;box-shadow:0 5px 12px rgba(22,163,74,.25)}
.completion-banner strong{font-size:clamp(22px,2vw,30px);line-height:1;color:#0f7a35}
.completion-banner p{margin:0;font-size:clamp(13px,1vw,16px);font-weight:800;color:#24553a}
@keyframes completionDrop{0%{opacity:0;transform:translate(-50%,-16px) scale(.96)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes completionPulse{0%,100%{box-shadow:0 16px 34px rgba(22,163,74,.20),0 4px 10px rgba(15,23,42,.08)}50%{box-shadow:0 18px 42px rgba(22,163,74,.30),0 4px 10px rgba(15,23,42,.08)}}
@keyframes newRoutePulse{0%,100%{transform:translateY(0) scale(1);box-shadow:0 0 0 0 rgba(245,158,11,.32),0 6px 14px rgba(245,158,11,.22)}50%{transform:translateY(-2px) scale(1.04);box-shadow:0 0 0 10px rgba(245,158,11,0),0 10px 22px rgba(245,158,11,.28)}}

.board-zone{min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;padding:52px 4px 1px}
.board-control-stage{
  --dir-w:clamp(66px,5.2vw,86px);
  --dir-h:clamp(62px,4.8vw,82px);
  --dir-gap:9px;
  --board-size:min(calc(66vw - 190px),calc(100dvh - 270px));
  display:grid;
  grid-template-areas:". up ." "left board right" ". down .";
  grid-template-columns:var(--dir-w) var(--board-size) var(--dir-w);
  grid-template-rows:var(--dir-h) var(--board-size) var(--dir-h);
  gap:var(--dir-gap);
  width:max-content;height:max-content;max-width:100%;max-height:100%;place-items:center;
  transform:translateY(-18px);
}
.board-wrap{grid-area:board;width:var(--board-size);height:var(--board-size);min-width:0;min-height:0;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:7px;box-shadow:var(--shadow);overflow:visible}
.board{position:relative;width:100%;height:100%;min-height:0;aspect-ratio:1/1;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);border:3px solid #aebdce;border-radius:15px;overflow:visible;background:#fff;box-shadow:inset 0 0 0 1px #fff}.cell{position:relative;border-right:1px solid #d7e0ea;border-bottom:1px solid #d7e0ea;display:grid;place-items:center;overflow:visible}.cell:nth-child(5n){border-right:0}.cell:nth-last-child(-n+5){border-bottom:0}.cell::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#e3eaf2}.cell.start-cell{background:#eefaf1}.cell.target-cell{background:#fff8df}.cell.path-cell{background:#edf5ff}.board-token{position:absolute;z-index:12;width:17%;height:20%;min-width:50px;min-height:60px;display:grid;place-items:end center;transform:translate(-50%,-50%);transition:left .28s cubic-bezier(.22,.9,.35,1),top .28s cubic-bezier(.22,.9,.35,1),transform .18s ease;pointer-events:none}.board-token-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(37,99,235,.18)) drop-shadow(0 3px 4px rgba(15,23,42,.12))}.board-token.bump{transform:translate(-50%,-50%) scale(.92)}.marker{position:relative;z-index:2;display:grid;place-items:center;text-align:center;font-weight:950}.marker .emoji{font-size:clamp(24px,3.2vw,44px)}.marker small{display:block;font-size:clamp(8px,.72vw,11px);margin-top:1px}
.dir{position:relative;width:var(--dir-w);height:var(--dir-h);border:1px solid rgba(255,255,255,.46);border-radius:17px;background:linear-gradient(180deg,#6aa8ff 0%,#3f83ff 30%,#2563eb 67%,#1d4fd0 100%);color:#fff;box-shadow:inset 0 3px 0 rgba(255,255,255,.42),inset 0 -3px 0 rgba(9,46,133,.22),0 8px 0 #1747b2,0 14px 22px rgba(37,99,235,.24);cursor:pointer;font-weight:950;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:.8;transition:transform .08s ease,filter .08s ease,box-shadow .08s ease;z-index:6;overflow:visible}
.dir::before{content:"";position:absolute;inset:5px 6px auto 6px;height:34%;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));pointer-events:none}
.dir:hover{filter:saturate(1.06) brightness(1.03)}
.dir-arrow{position:relative;font-size:clamp(36px,3.4vw,50px);line-height:.75;font-weight:1000;text-shadow:0 2px 0 rgba(0,0,0,.25),0 0 10px rgba(255,255,255,.16)}
.dir small{position:relative;font-size:10px;margin-top:7px;letter-spacing:.03em;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.dir:active,.dir.pressed{transform:translateY(5px) scale(.97);box-shadow:inset 0 2px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(9,46,133,.24),0 3px 0 #1747b2,0 7px 14px rgba(37,99,235,.18)}
.dir-up{grid-area:up;align-self:end}.dir-down{grid-area:down;align-self:start;margin-top:-12px}.dir-left{grid-area:left}.dir-right{grid-area:right}
.lesson-actions{position:absolute;inset:0;z-index:8;pointer-events:none}.lesson-actions .btn{position:absolute;bottom:clamp(16px,2vh,24px);pointer-events:auto;min-width:clamp(140px,11vw,178px)}.btn-primary{left:clamp(8px,2.2vw,34px);background:linear-gradient(180deg,#ffad28,var(--orange));color:#422500;box-shadow:0 4px 9px rgba(245,158,11,.15)}.btn-primary.attention{animation:newRoutePulse 1.15s ease-in-out infinite;box-shadow:0 0 0 0 rgba(245,158,11,.36),0 6px 14px rgba(245,158,11,.22)}.btn-secondary{right:clamp(8px,2.2vw,34px);background:#eaf1ff;color:#164fb6}.keyboard-hint{display:none}
.footer{min-height:14px;display:flex;justify-content:space-between;align-items:center;padding:0 3px;color:#7b8494;font-size:8px;font-weight:800}

html[data-theme="dark"] .brand-icon{background:#392b10;border-color:#6e521d}html[data-theme="dark"] .btn-ghost,html[data-theme="dark"] .btn-theme{background:#253145;color:#e8eef7}html[data-theme="dark"] .btn-full{background:#0f172a}html[data-theme="dark"] .board{background:#141f2d;border-color:#506176;box-shadow:inset 0 0 0 1px #1c2a3a}html[data-theme="dark"] .cell{border-color:#314155}html[data-theme="dark"] .cell::after{background:#405064}html[data-theme="dark"] .cell.start-cell{background:#153322}html[data-theme="dark"] .cell.target-cell{background:#362c12}html[data-theme="dark"] .cell.path-cell{background:#172b4a}html[data-theme="dark"] .step-chip{background:#253145;color:#d8e0ea}html[data-theme="dark"] .step-chip.active{background:linear-gradient(180deg,#1d3c70,#193665);color:#d3e3ff;border-color:#5b8ee8;box-shadow:inset 0 0 0 2px rgba(91,142,232,.34),inset 6px 0 0 #5b8ee8,0 3px 10px rgba(0,0,0,.18)}html[data-theme="dark"] .step-chip.done{background:#173c26;color:#a7efbb;border-color:#2c7843}html[data-theme="dark"] .status-card{background:#202b3b;border-color:#39485c}html[data-theme="dark"] .status-card.success{background:#153322}html[data-theme="dark"] .status-card.error{background:#3c1e20}html[data-theme="dark"] .completion-banner{background:linear-gradient(180deg,rgba(24,34,48,.98),rgba(21,51,34,.96));border-color:#2fbf66}html[data-theme="dark"] .completion-banner strong{color:#8df0ad}html[data-theme="dark"] .completion-banner p{color:#d6f6df}

@media (max-height:720px){.app{min-height:500px;gap:4px;padding:4px 7px 3px}.topbar{min-height:37px;padding:3px 6px}.brand-icon{width:27px;height:27px;font-size:18px}h1{font-size:17px}.btn{min-height:29px;padding:5px 8px}.workspace{gap:6px}.instruction-panel{padding:9px;gap:6px}.instruction-main{gap:8px}.task-row strong{font-size:17px}.step-chip{min-height:60px;padding:6px 9px;font-size:16px}.step-content{gap:12px}.step-chip .arrow{flex-basis:46px;width:46px;height:42px;font-size:29px;border-radius:11px}.step-text{min-width:108px;font-size:16px}.status-card{min-height:44px;padding:6px 8px}.board-zone{padding-top:44px}.board-control-stage{--dir-w:58px;--dir-h:56px;--dir-gap:6px;--board-size:min(calc(66vw - 165px),calc(100dvh - 226px))}.board-wrap{padding:5px}.dir{border-radius:14px}.dir-arrow{font-size:31px}.dir small{font-size:8px;margin-top:4px}.lesson-actions .btn{bottom:10px;min-width:122px;padding:5px 8px}.dir-down{margin-top:-8px}.footer{min-height:11px}.completion-banner{padding:10px 16px}}
@media (max-width:980px){.workspace{grid-template-columns:minmax(215px,1fr) minmax(0,2fr)}.board-control-stage{--board-size:min(calc(66vw - 150px),calc(100dvh - 258px))}.keyboard-hint{display:none}.btn-theme{min-width:38px}.btn-theme #themeLabel{display:none}}
@media (max-width:720px){.app{min-height:480px}.workspace{grid-template-columns:minmax(175px,.8fr) minmax(0,2.2fr);gap:5px}.instruction-panel{padding:7px}.task-row{gap:5px}.task-row strong{font-size:15px}.eyebrow{padding:4px 6px;font-size:8px}.instruction-list{gap:5px}.step-chip{min-height:52px;padding:5px 7px;font-size:13px}.step-content{gap:8px}.step-chip .arrow{flex-basis:40px;width:40px;height:36px;font-size:25px;border-radius:10px}.step-text{min-width:84px;font-size:13px}.status-card{padding:5px 6px;min-height:38px}.status-card p{display:none}.status-icon{font-size:18px}.board-zone{padding-top:38px}.board-control-stage{--dir-w:46px;--dir-h:44px;--dir-gap:5px;--board-size:min(calc(72vw - 145px),calc(100dvh - 188px))}.dir{border-radius:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.34),0 4px 0 #1747b2,0 7px 11px rgba(37,99,235,.18)}.dir-arrow{font-size:24px}.dir small{display:none}.board-wrap{padding:4px;border-radius:13px}.lesson-actions .btn{min-width:96px;font-size:10px;padding:5px 7px}.btn-primary{left:4px}.btn-secondary{right:4px}.dir-down{margin-top:-6px}.top-actions .btn span:not(#themeIcon){display:none}.footer span:first-child{display:none}.completion-banner{top:6px;min-width:min(94%,300px);padding:8px 14px}.completion-badge{font-size:10px}.completion-banner strong{font-size:18px}.completion-banner p{font-size:11px}}
@media (max-width:520px){.workspace{grid-template-columns:150px minmax(0,1fr)}.instruction-panel{padding:6px}.task-row{display:block}.task-row strong{display:block;margin-top:5px;font-size:13px}.instruction-list{gap:3px}.step-chip{min-height:46px;padding:4px 5px;font-size:11px}.step-content{gap:6px}.step-chip .arrow{flex-basis:34px;width:34px;height:31px;font-size:21px;border-radius:8px}.step-text{min-width:70px;font-size:11px}.board-control-stage{--dir-w:40px;--dir-h:38px;--dir-gap:4px;--board-size:min(calc(100vw - 230px),calc(100dvh - 166px))}.status-card{min-height:32px}.status-card strong{font-size:10px}.lesson-actions .btn{font-size:9px;padding:4px 6px;min-width:82px;bottom:8px}.dir-down{margin-top:-4px}.topbar h1{font-size:15px}.completion-banner strong{font-size:16px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.board-token,.step-chip,.dir{transition:none!important}.step-chip.active::before,.step-chip.active::after,.step-chip.active .arrow,.step-chip.active.wrong,.step-chip.active.wrong .arrow,.completion-banner,.btn-primary.attention{animation:none!important}.step-chip.active{box-shadow:inset 0 0 0 2px rgba(63,124,240,.46),inset 6px 0 0 #2563eb,0 3px 10px rgba(37,99,235,.10)}.step-chip.active::before{display:none}}


/* v1.0.15 mode and obstacle enhancements */
.mode-switch{display:flex;gap:8px;flex-wrap:wrap}
.mode-btn{border:1px solid #d5dfec;background:#f6f9fd;color:#24406a;border-radius:999px;padding:8px 12px;min-height:36px;font-weight:950;cursor:pointer;box-shadow:0 2px 8px rgba(37,99,235,.05);transition:transform .1s ease,box-shadow .1s ease,background .15s ease,color .15s ease}
.mode-btn:hover{transform:translateY(-1px)}
.mode-btn.active{background:linear-gradient(180deg,#eef5ff,#dceaff);border-color:#7fa9f4;color:#164fb6;box-shadow:0 5px 14px rgba(37,99,235,.14)}
.free-card{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:76px;padding:10px 14px;border-radius:14px;background:#f5f8fc;border:1px solid #dce6f3;color:#223552;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.free-icon{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:28px;background:linear-gradient(180deg,#ffffff,#eaf2ff);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 4px 12px rgba(37,99,235,.08)}
.free-body{min-width:0;display:flex;flex-direction:column;gap:4px}
.free-body strong{font-size:15px;line-height:1;color:#173966}
.free-copy{font-size:14px;font-weight:800;line-height:1.25;color:#31445f}
.obstacle-inline{display:flex;flex-wrap:wrap;gap:8px}
.obstacle-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid #d7e2ef;box-shadow:0 2px 5px rgba(15,23,42,.04)}
.obstacle-cell{position:relative}
.obstacle-tree-cell{background:linear-gradient(180deg,#f0fbf0,#ecf9ee)}
.obstacle-rock-cell{background:linear-gradient(180deg,#f5f7fb,#eef2f7)}
.obstacle-dig-cell{background:linear-gradient(180deg,#fff7e8,#fff2da)}
.obstacle-marker{position:relative;z-index:1;display:grid;place-items:center;gap:1px;text-align:center;font-weight:950;line-height:1.05;padding:2px}
.obstacle-marker .emoji{font-size:clamp(20px,2.4vw,34px);filter:drop-shadow(0 2px 4px rgba(15,23,42,.12))}
.obstacle-marker small{font-size:clamp(7px,.72vw,10px);color:#42506a}
.blocked-flash{animation:blockedFlash .48s ease}
@keyframes blockedFlash{0%,100%{box-shadow:inset 0 0 0 0 rgba(239,68,68,0)}50%{box-shadow:inset 0 0 0 4px rgba(239,68,68,.45)}}
body.mode-free .completion-banner strong{color:#0f7a35}
html[data-theme="dark"] .mode-btn{background:#253145;border-color:#39485c;color:#d8e0ea}
html[data-theme="dark"] .mode-btn.active{background:linear-gradient(180deg,#21457b,#193a69);border-color:#5b8ee8;color:#e8f1ff}
html[data-theme="dark"] .free-card{background:#202b3b;border-color:#39485c;color:#dbe6f3}
html[data-theme="dark"] .free-icon{background:linear-gradient(180deg,#29415f,#20344f)}
html[data-theme="dark"] .free-body strong{color:#e8f1ff}
html[data-theme="dark"] .free-copy{color:#cad7e7}
html[data-theme="dark"] .obstacle-badge{background:#182230;border-color:#334155;color:#e2e8f0}
html[data-theme="dark"] .obstacle-tree-cell{background:linear-gradient(180deg,#153322,#183825)}
html[data-theme="dark"] .obstacle-rock-cell{background:linear-gradient(180deg,#223042,#1e2a39)}
html[data-theme="dark"] .obstacle-dig-cell{background:linear-gradient(180deg,#3a2f15,#352a12)}
html[data-theme="dark"] .obstacle-marker small{color:#dce5f0}
@media (max-height:720px){.mode-btn{min-height:32px;padding:6px 10px}.free-card{min-height:64px;padding:8px 10px}.free-icon{width:40px;height:40px;font-size:24px}.free-copy{font-size:12px}}
@media (max-width:720px){.mode-switch{gap:6px}.mode-btn{padding:6px 9px;font-size:12px}.free-card{gap:9px;min-height:58px;padding:7px 9px}.free-icon{width:34px;height:34px;font-size:21px;border-radius:10px}.free-body strong{font-size:12px}.free-copy{font-size:11px}.obstacle-inline{gap:5px}.obstacle-badge{padding:4px 7px;font-size:10px}}


/* v1.0.16 clearer target styling */
.cell.target-cell{
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.88), rgba(255,255,255,0) 56%),
    linear-gradient(180deg,#fff6d7 0%,#ffefbc 100%);
  box-shadow:inset 0 0 0 2px rgba(240,179,0,.33), inset 0 0 0 6px rgba(255,255,255,.28);
}
.cell.target-cell::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:14px;
  border:2px dashed rgba(214,153,0,.5);
  pointer-events:none;
}
.goal-marker{
  display:grid;
  place-items:center;
  gap:2px;
  min-width:100%;
  padding:2px 2px 3px;
}
.goal-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:18px;
  padding:0 8px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffd866 0%,#ffb703 100%);
  color:#5a3700;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 2px 7px rgba(250,179,8,.28), inset 0 1px 0 rgba(255,255,255,.7);
  font-size:clamp(8px,.8vw,10px);
  font-weight:1000;
  letter-spacing:.08em;
}
.goal-emblem{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(36px,4vw,54px);
  height:clamp(36px,4vw,54px);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff 0%, #fff8e9 58%, #ffe49b 100%);
  border:3px solid #e2a90a;
  box-shadow:0 5px 12px rgba(230,171,13,.22), inset 0 0 0 3px rgba(255,255,255,.78);
  animation:goalPulse 1.8s ease-in-out infinite;
}
.goal-emoji{
  font-size:clamp(20px,2.5vw,32px);
  line-height:1;
  filter:drop-shadow(0 2px 2px rgba(15,23,42,.12));
}
.goal-star{
  position:absolute;
  top:-6px;
  right:-2px;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(180deg,#ff7f7f 0%,#ef4444 100%);
  color:#fff;
  font-size:11px;
  line-height:1;
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 3px 7px rgba(239,68,68,.22);
}
.goal-marker small{
  display:block;
  max-width:100%;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#6b4400;
  font-size:clamp(8px,.78vw,10px);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
}
@keyframes goalPulse{
  0%,100%{transform:scale(1);box-shadow:0 5px 12px rgba(230,171,13,.22), inset 0 0 0 3px rgba(255,255,255,.78)}
  50%{transform:scale(1.04);box-shadow:0 8px 16px rgba(230,171,13,.28), 0 0 0 8px rgba(255,200,66,.16), inset 0 0 0 3px rgba(255,255,255,.82)}
}
html[data-theme="dark"] .cell.target-cell{
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.1), rgba(255,255,255,0) 56%),
    linear-gradient(180deg,#4b3910 0%,#3a2d0c 100%);
  box-shadow:inset 0 0 0 2px rgba(255,211,76,.32), inset 0 0 0 6px rgba(255,255,255,.03);
}
html[data-theme="dark"] .cell.target-cell::before{border-color:rgba(255,219,92,.42)}
html[data-theme="dark"] .goal-badge{color:#4e3200}
html[data-theme="dark"] .goal-emblem{background:radial-gradient(circle at 35% 30%, #fffce8 0%, #ffeab8 58%, #e7b63d 100%)}
html[data-theme="dark"] .goal-marker small{background:rgba(17,24,39,.55);color:#ffeeb8}
@media (max-width:720px){
  .goal-badge{min-width:40px;height:16px;padding:0 7px;font-size:8px}
  .goal-star{width:15px;height:15px;font-size:9px;top:-5px;right:-1px}
}
@media (prefers-reduced-motion:reduce){.goal-emblem{animation:none!important}}


/* v1.0.17 unmistakable target marker */
.cell.target-cell{
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.58) 32%,rgba(255,241,177,.76) 67%,rgba(255,225,104,.88) 100%);
  box-shadow:
    inset 0 0 0 3px rgba(245,158,11,.72),
    inset 0 0 0 7px rgba(255,255,255,.58),
    0 0 0 2px rgba(245,158,11,.16);
}
.cell.target-cell::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:14px;
  border:3px dashed rgba(224,143,0,.76);
  pointer-events:none;
  animation:targetFrame 2.2s ease-in-out infinite;
}
.goal-marker{z-index:4;gap:3px;padding:2px;isolation:isolate}
.goal-badge{
  min-width:76px;
  height:24px;
  padding:0 11px;
  gap:5px;
  background:linear-gradient(180deg,#ffcc4a 0%,#f59e0b 100%);
  color:#4b2a00;
  border:2px solid #fff;
  box-shadow:0 4px 0 #c76e00,0 8px 14px rgba(245,158,11,.28),inset 0 2px 0 rgba(255,255,255,.55);
  font-size:clamp(10px,.95vw,13px);
  letter-spacing:.08em;
}
.goal-badge-icon{font-size:1.18em;line-height:1}
.goal-emblem{
  width:clamp(48px,5vw,66px);
  height:clamp(48px,5vw,66px);
  border:4px solid #f59e0b;
  background:radial-gradient(circle,#fff 0 36%,#ffe6a2 37% 58%,#fff 59% 72%,#ffcc4a 73% 100%);
  box-shadow:0 7px 15px rgba(245,158,11,.25),0 0 0 5px rgba(255,255,255,.72);
  animation:goalPulseStrong 1.9s ease-in-out infinite;
}
.goal-bullseye{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#ef4444;
  font-size:clamp(42px,4.6vw,60px);
  line-height:1;
  font-weight:1000;
  opacity:.58;
  pointer-events:none;
}
.goal-emoji{
  position:relative;
  z-index:2;
  font-size:clamp(22px,2.7vw,35px);
  filter:drop-shadow(0 2px 2px rgba(15,23,42,.16));
}
.goal-marker small{
  min-width:66px;
  padding:3px 8px;
  background:#fff;
  border:2px solid rgba(245,158,11,.52);
  color:#5c3500;
  box-shadow:0 2px 6px rgba(15,23,42,.08);
  font-size:clamp(9px,.85vw,12px);
}
@keyframes targetFrame{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes goalPulseStrong{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.055);filter:brightness(1.05)}
}
html[data-theme="dark"] .cell.target-cell{
  background:radial-gradient(circle at 50% 48%,#5b4817 0%,#4b3910 54%,#382a0a 100%);
  box-shadow:inset 0 0 0 3px rgba(255,191,38,.76),inset 0 0 0 7px rgba(255,255,255,.05),0 0 0 2px rgba(255,191,38,.16);
}
html[data-theme="dark"] .cell.target-cell::before{border-color:rgba(255,211,76,.78)}
html[data-theme="dark"] .goal-marker small{background:#1f2937;color:#ffe8a3;border-color:rgba(255,191,38,.55)}
@media (max-width:720px){
  .goal-badge{min-width:58px;height:20px;padding:0 8px;font-size:9px}
  .goal-emblem{width:40px;height:40px;border-width:3px}
  .goal-bullseye{font-size:36px}
  .goal-marker small{min-width:52px;padding:2px 5px;font-size:8px}
}
@media (prefers-reduced-motion:reduce){.cell.target-cell::before,.goal-emblem{animation:none!important}}


/* v1.0.18 — görev alanı + dört yön düğmesi birlikte yukarı alınır.
   Alt yön tuşunun altında güvenli nefes payı bırakılır. */
@media (max-height:720px){.board-control-stage{transform:translateY(-12px)}}
@media (max-width:720px){.board-control-stage{transform:translateY(-9px)}}
@media (max-width:520px){.board-control-stage{transform:translateY(-6px)}}

/* v1.0.19 mobile portrait polish */
@media (max-width: 760px){
  html,body{height:auto;overflow:auto}
  .app{
    height:auto;
    min-height:100dvh;
    grid-template-rows:auto auto auto;
    gap:8px;
    padding:8px 8px 10px;
  }
  .topbar{
    min-height:44px;
    padding:6px 8px;
    position:sticky;
    top:0;
    z-index:40;
  }
  h1{font-size:clamp(18px,4.8vw,22px)}
  .top-actions{gap:6px}
  .top-actions .btn{min-width:40px;padding:7px 9px}
  .top-actions .btn span:not(#themeIcon){display:none}
  .workspace{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:8px;
  }
  .instruction-panel{
    padding:10px;
    gap:8px;
    border-radius:16px;
  }
  .instruction-main{gap:8px}
  .mode-switch{gap:8px}
  .mode-btn{flex:1 1 0;justify-content:center;text-align:center}
  .task-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .task-row strong{font-size:clamp(18px,5.2vw,24px)}
  .instruction-list{gap:8px}
  .step-chip{
    min-height:64px;
    padding:8px 10px;
  }
  .step-chip .arrow{
    flex-basis:48px;
    width:48px;
    height:44px;
    font-size:30px;
    border-radius:12px;
  }
  .step-text{
    min-width:0;
    font-size:clamp(18px,4.7vw,22px);
  }
  .status-card{
    min-height:52px;
    padding:8px 10px;
  }
  .status-card strong{font-size:14px}
  .status-card p{display:block;font-size:12px}
  .task-panel{
    display:grid;
    grid-template-rows:auto auto;
    gap:10px;
    overflow:visible;
  }
  .completion-banner{
    top:6px;
    min-width:min(94vw,340px);
    padding:10px 14px;
  }
  .completion-banner strong{font-size:22px}
  .completion-banner p{font-size:12px}
  .board-zone{
    padding:54px 0 0;
    overflow:visible;
  }
  .board-control-stage{
    --dir-w:54px;
    --dir-h:52px;
    --dir-gap:6px;
    --board-size:min(74vw,45dvh);
    transform:none;
  }
  .board-wrap{padding:5px;border-radius:16px}
  .board{border-radius:14px}
  .cell::after{width:7px;height:7px}
  .board-token{
    width:19%;
    height:22%;
    min-width:34px;
    min-height:42px;
  }
  .marker .emoji{font-size:clamp(20px,6vw,30px)}
  .marker small,.goal-marker small{font-size:clamp(8px,2vw,10px)}
  .goal-emblem{width:clamp(34px,9vw,48px);height:clamp(34px,9vw,48px)}
  .goal-emoji{font-size:clamp(20px,5.6vw,28px)}
  .dir{
    border-radius:14px;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.34),0 4px 0 #1747b2,0 8px 12px rgba(37,99,235,.18);
  }
  .dir-arrow{font-size:28px}
  .dir small{display:block;font-size:9px;margin-top:3px}
  .dir-down{margin-top:0}
  .lesson-actions{
    position:static;
    inset:auto;
    z-index:auto;
    pointer-events:auto;
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    padding:0 0 4px;
  }
  .lesson-actions .btn{
    position:static;
    bottom:auto;
    min-width:148px;
    padding:9px 12px;
    font-size:14px;
  }
  .btn-primary,.btn-secondary{left:auto;right:auto}
  .footer{
    min-height:16px;
    padding:0 2px;
    font-size:11px;
  }
}

@media (max-width: 430px){
  .app{padding:6px 6px 10px}
  .topbar{min-height:42px;padding:5px 6px}
  .brand{gap:6px}
  .brand-icon{width:29px;height:29px;font-size:18px}
  h1{font-size:18px}
  .btn-theme{min-width:38px}
  .instruction-panel{padding:8px}
  .mode-btn{padding:7px 9px;font-size:13px}
  .task-row strong{font-size:16px}
  .eyebrow{padding:4px 7px;font-size:9px}
  .instruction-list{gap:6px}
  .step-chip{min-height:58px;padding:7px 8px}
  .step-chip .arrow{flex-basis:44px;width:44px;height:40px;font-size:28px}
  .step-text{font-size:16px}
  .status-card{min-height:48px;padding:7px 8px}
  .status-card strong{font-size:13px}
  .status-card p{font-size:11px}
  .board-zone{padding-top:50px}
  .board-control-stage{
    --dir-w:48px;
    --dir-h:46px;
    --dir-gap:5px;
    --board-size:min(78vw,42dvh);
  }
  .dir-arrow{font-size:25px}
  .dir small{font-size:8px}
  .lesson-actions{gap:8px}
  .lesson-actions .btn{min-width:136px;font-size:13px;padding:8px 10px}
  .completion-banner{min-width:min(95vw,310px);padding:9px 12px}
  .completion-banner strong{font-size:19px}
  .completion-banner p{font-size:11px}
  .footer span:first-child{display:none}
}


/* v1.0.20 hard mobile/portrait layout + cache-bust */
@media (orientation: portrait), (max-width: 900px){
  html,body{width:100%;height:auto;min-height:100%;overflow-x:hidden!important;overflow-y:auto!important}
  body{min-width:0!important}
  .app{
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    display:grid!important;
    grid-template-rows:auto auto auto!important;
    gap:8px!important;
    padding:8px!important;
    overflow:visible!important;
  }
  .topbar{width:100%!important;min-width:0!important}
  .workspace{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:10px!important;
    overflow:visible!important;
  }
  .instruction-panel{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    align-self:stretch!important;
  }
  .task-panel{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:auto!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    gap:10px!important;
    overflow:visible!important;
  }
  .board-zone{
    width:100%!important;
    min-width:0!important;
    padding:58px 0 4px!important;
    display:grid!important;
    place-items:center!important;
    overflow:visible!important;
  }
  .board-control-stage{
    --dir-w:56px!important;
    --dir-h:54px!important;
    --dir-gap:7px!important;
    --board-size:min(72vw,430px)!important;
    transform:none!important;
    max-width:100%!important;
    max-height:none!important;
  }
  .lesson-actions{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:10px!important;
    flex-wrap:wrap!important;
    padding:2px 0 6px!important;
    pointer-events:auto!important;
  }
  .lesson-actions .btn{
    position:static!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    min-width:145px!important;
    pointer-events:auto!important;
  }
  .dir-down{margin-top:0!important}
  .mode-switch{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .mode-btn{width:100%!important}
}

@media (orientation: portrait) and (max-width: 600px){
  .topbar{padding:5px 6px!important}
  .brand-icon{width:30px!important;height:30px!important}
  h1{font-size:18px!important}
  .top-actions .btn{min-width:38px!important;padding:7px 8px!important}
  .instruction-panel{padding:9px!important}
  .task-row strong{font-size:18px!important}
  .step-chip{min-height:62px!important;padding:8px!important}
  .step-content{gap:10px!important}
  .step-chip .arrow{flex-basis:46px!important;width:46px!important;height:42px!important;font-size:29px!important}
  .step-text{font-size:17px!important;min-width:0!important}
  .status-card{min-height:50px!important}
  .board-zone{padding-top:54px!important}
  .board-control-stage{
    --dir-w:50px!important;
    --dir-h:48px!important;
    --dir-gap:6px!important;
    --board-size:min(74vw,360px)!important;
  }
  .dir-arrow{font-size:27px!important}
  .dir small{display:block!important;font-size:8px!important;margin-top:3px!important}
  .board-token{width:18%!important;height:20%!important;min-width:34px!important;min-height:42px!important}
  .lesson-actions .btn{min-width:138px!important;font-size:13px!important;padding:9px 10px!important}
  .footer{font-size:10px!important}
}

/* v1.0.21 premium mobile portrait — desktop untouched */
@media (orientation: portrait) and (max-width: 760px){
  html,body{
    width:100%;
    min-height:100%;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    background:#f4f7fb;
  }
  .app{
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    display:block!important;
    padding:7px 7px 12px!important;
  }

  .topbar{
    position:relative!important;
    top:auto!important;
    z-index:30!important;
    min-height:43px!important;
    padding:5px 6px!important;
    border-radius:14px!important;
    box-shadow:0 4px 14px rgba(30,55,90,.07)!important;
  }
  .brand{gap:6px!important;min-width:0!important;flex:1 1 auto!important}
  .brand-icon{width:29px!important;height:29px!important;font-size:18px!important;border-radius:9px!important}
  h1{
    font-size:16.5px!important;
    line-height:1!important;
    max-width:none!important;
    flex:1 1 auto!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .top-actions{gap:4px!important;flex:0 0 auto!important}
  .top-actions .btn{
    width:35px!important;
    min-width:35px!important;
    height:35px!important;
    min-height:35px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:11px!important;
    font-size:17px!important;
  }
  .top-actions .btn span:not(#themeIcon){display:none!important}
  .btn-theme{min-width:35px!important}

  .workspace{
    display:block!important;
    width:100%!important;
    margin-top:8px!important;
  }

  .instruction-panel{
    width:100%!important;
    padding:9px!important;
    gap:8px!important;
    border-radius:18px!important;
    border-color:#dbe5f2!important;
    box-shadow:0 7px 22px rgba(44,72,108,.075)!important;
    background:rgba(255,255,255,.98)!important;
  }
  .instruction-main{gap:8px!important}
  .mode-switch{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  .mode-btn{
    width:100%!important;
    min-height:38px!important;
    padding:7px 6px!important;
    border-radius:13px!important;
    font-size:13px!important;
    box-shadow:none!important;
  }
  .mode-btn.active{
    box-shadow:inset 0 0 0 1px rgba(37,99,235,.14),0 3px 9px rgba(37,99,235,.10)!important;
  }
  .task-row{display:flex!important;align-items:center!important;gap:8px!important;margin-top:1px!important}
  .task-row strong{font-size:18px!important;line-height:1.05!important}
  .eyebrow{padding:4px 7px!important;font-size:8.5px!important}
  .instruction-list{gap:6px!important}
  .step-chip{
    min-height:58px!important;
    padding:6px 9px!important;
    border-radius:13px!important;
  }
  .step-content{gap:12px!important}
  .step-chip .arrow{
    flex:0 0 44px!important;
    width:44px!important;
    height:40px!important;
    border-radius:11px!important;
    font-size:28px!important;
    transform:translateY(-1px)!important;
  }
  .step-text{
    min-width:0!important;
    font-size:17px!important;
    text-align:left!important;
  }
  .status-card{
    min-height:46px!important;
    padding:7px 9px!important;
    border-radius:12px!important;
  }
  .status-icon{font-size:20px!important}
  .status-card strong{font-size:13px!important}
  .status-card p{display:block!important;font-size:10.5px!important;margin-top:1px!important}

  .task-panel{
    position:relative!important;
    display:block!important;
    width:100%!important;
    margin-top:9px!important;
    padding:12px 8px 10px!important;
    border:1px solid #dbe5f2!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 9px 28px rgba(44,72,108,.08)!important;
    overflow:visible!important;
  }

  .completion-banner{
    position:absolute!important;
    top:8px!important;
    left:50%!important;
    min-width:min(92%,310px)!important;
    padding:9px 12px!important;
    border-radius:15px!important;
  }
  .completion-badge{font-size:9px!important;padding:4px 9px!important}
  .completion-banner strong{font-size:19px!important}
  .completion-banner p{font-size:10.5px!important}

  .board-zone{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    padding:56px 0 58px!important;
    overflow:visible!important;
  }
  .board-control-stage{
    --board-size:min(calc(100vw - 118px),350px)!important;
    --dir-w:48px!important;
    --dir-h:48px!important;
    --dir-gap:0px!important;
    position:relative!important;
    display:block!important;
    width:var(--board-size)!important;
    height:var(--board-size)!important;
    max-width:none!important;
    max-height:none!important;
    transform:none!important;
  }
  .board-wrap{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    padding:5px!important;
    border-radius:17px!important;
    box-shadow:0 10px 25px rgba(32,61,100,.10)!important;
  }
  .board{border-radius:13px!important;border-width:2px!important}
  .cell::after{width:6px!important;height:6px!important}
  .board-token{width:18%!important;height:20%!important;min-width:31px!important;min-height:38px!important}
  .marker .emoji{font-size:clamp(19px,5.4vw,27px)!important}
  .marker small,.goal-marker small{font-size:8px!important}
  .goal-badge{min-width:42px!important;height:16px!important;font-size:7px!important;padding:0 6px!important}
  .goal-emblem{width:clamp(32px,8.5vw,45px)!important;height:clamp(32px,8.5vw,45px)!important}
  .goal-emoji{font-size:clamp(18px,5vw,26px)!important}

  .dir{
    position:absolute!important;
    width:var(--dir-w)!important;
    height:var(--dir-h)!important;
    margin:0!important;
    border-radius:13px!important;
    z-index:14!important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.38),0 4px 0 #1747b2,0 8px 15px rgba(37,99,235,.18)!important;
  }
  .dir-up{left:50%!important;top:-51px!important;transform:translateX(-50%)!important}
  .dir-down{left:50%!important;bottom:-51px!important;top:auto!important;transform:translateX(-50%)!important}
  .dir-left{left:-51px!important;top:50%!important;transform:translateY(-50%)!important}
  .dir-right{right:-51px!important;left:auto!important;top:50%!important;transform:translateY(-50%)!important}
  .dir-up:active,.dir-up.pressed{transform:translateX(-50%) translateY(4px) scale(.97)!important}
  .dir-down:active,.dir-down.pressed{transform:translateX(-50%) translateY(4px) scale(.97)!important}
  .dir-left:active,.dir-left.pressed{transform:translateY(-50%) translateY(4px) scale(.97)!important}
  .dir-right:active,.dir-right.pressed{transform:translateY(-50%) translateY(4px) scale(.97)!important}
  .dir-arrow{font-size:25px!important;line-height:.72!important}
  .dir small{display:block!important;font-size:7.5px!important;margin-top:3px!important}

  .lesson-actions{
    position:static!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    padding:4px 0 0!important;
    pointer-events:auto!important;
  }
  .lesson-actions .btn{
    position:static!important;
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:8px 10px!important;
    font-size:13px!important;
    border-radius:12px!important;
  }
  .btn-primary,.btn-secondary{left:auto!important;right:auto!important;bottom:auto!important}

  .footer{
    min-height:20px!important;
    margin-top:7px!important;
    padding:0 4px!important;
    font-size:9px!important;
  }
  .footer span:first-child{display:none!important}
}

@media (orientation: portrait) and (max-width: 390px){
  .app{padding-left:6px!important;padding-right:6px!important}
  h1{font-size:15.5px!important}
  .top-actions .btn{width:33px!important;min-width:33px!important;height:33px!important;min-height:33px!important}
  .instruction-panel{padding:8px!important}
  .mode-btn{font-size:12px!important;min-height:36px!important}
  .task-row strong{font-size:17px!important}
  .step-chip{min-height:55px!important}
  .step-chip .arrow{flex-basis:41px!important;width:41px!important;height:38px!important;font-size:26px!important}
  .step-text{font-size:16px!important}
  .task-panel{padding-left:7px!important;padding-right:7px!important}
  .board-control-stage{--board-size:min(calc(100vw - 112px),330px)!important;--dir-w:46px!important;--dir-h:46px!important}
  .dir-up{top:-49px!important}.dir-down{bottom:-49px!important}.dir-left{left:-49px!important}.dir-right{right:-49px!important}
  .lesson-actions .btn{font-size:12.5px!important}
}

html[data-theme="dark"] .task-panel{background:rgba(24,34,48,.98)!important;border-color:#334155!important}
html[data-theme="dark"] .instruction-panel{background:rgba(24,34,48,.98)!important;border-color:#334155!important}