*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100vh;min-height:100dvh;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-touch-callout:none;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#3b2314;
background:radial-gradient(circle at 20% 10%,#ffe7a8,transparent 40%),linear-gradient(160deg,#8be0ff,#c7f5b8);display:flex;justify-content:center}
#app{width:100%;max-width:980px;padding:10px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:center;gap:8px}
header{display:flex;flex-wrap:wrap;gap:10px;width:100%;justify-content:space-between}
.pill{background:#fff8e6;border:3px solid #5a3418;border-radius:999px;padding:6px 18px;font-weight:800;font-size:1.05rem;box-shadow:0 4px 0 #5a3418}
.pill b{font-variant-numeric:tabular-nums;font-size:1.2rem;margin-left:6px}
#msg{background:#fff;border:3px solid #5a3418;border-radius:14px;padding:8px 16px;font-weight:700;text-align:center;min-height:42px;width:100%}
#msg.bad{background:#ffd6d0;animation:shake .35s}
#msg.good{background:#d4ffd0}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#stage{position:relative;width:100%;border:5px solid #5a3418;border-radius:20px;overflow:hidden;box-shadow:0 8px 0 #5a3418;line-height:0;background:#2aa4ea}
canvas{width:100%;height:auto;touch-action:manipulation;cursor:pointer}
#btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn{font:inherit;font-weight:800;color:#fff;border:3px solid #5a3418;border-radius:14px;padding:10px 18px;box-shadow:0 5px 0 #5a3418;cursor:pointer;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #5a3418}
.blue{background:#3a9bf0}.green{background:#3fbf4f}.orange{background:#ff8a1f}.red{background:#e8504a}.gray{background:#8d8a99}
.hidden{display:none!important}
#help{margin:0;font-size:.85rem;text-align:center;opacity:.8;max-width:640px}
#overlay{position:absolute;inset:0;background:rgba(20,40,90,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;line-height:1.3;text-align:center}
#overlay h2{margin:0;font-size:clamp(1.8rem,6vw,3rem);text-shadow:0 4px 0 #5a3418;color:#ffe066}
#overlay p{margin:0;font-weight:800;font-size:1.2rem;text-shadow:0 2px 0 #000}
@media(prefers-reduced-motion:reduce){#msg.bad{animation:none}}
#stars{color:#ffb703;letter-spacing:2px;font-size:1.25rem;text-shadow:0 2px 0 #5a3418}
#starNote{font-size:.72rem;font-weight:700;margin-left:8px}
#overlay p.stars{font-size:clamp(2.2rem,8vw,3.5rem);color:#ffd23f;letter-spacing:6px;text-shadow:0 4px 0 #5a3418}
.btn:disabled{opacity:.4;cursor:default;box-shadow:0 5px 0 #5a3418;transform:none}

/* on-screen cat controls: WASD keycaps on desktop, big arrow buttons on touch screens */
#controls{--k:46px;display:grid;grid-template-columns:repeat(3,var(--k));grid-template-rows:repeat(2,var(--k)) auto;gap:6px;justify-content:center;line-height:1;touch-action:none}
#controls button{border-radius:12px;border:3px solid #5a3418;background:#fff8e6;box-shadow:0 4px 0 #5a3418;font:inherit;font-weight:800;font-size:1.2rem;color:#3b2314;padding:0;cursor:pointer;touch-action:none}
#controls button.on,#controls button:active{background:#ffe066;transform:translateY(3px);box-shadow:0 1px 0 #5a3418}
#controls [data-k=up]{grid-column:2;grid-row:1}#controls [data-k=left]{grid-column:1;grid-row:2}#controls [data-k=down]{grid-column:2;grid-row:2}#controls [data-k=right]{grid-column:3;grid-row:2}
#ctlNote{grid-column:1/-1;white-space:nowrap;justify-self:center;margin:4px 0 0;font-size:.8rem;font-weight:700;opacity:.8;text-align:center;line-height:1.2}
.tc{display:none}
@media(hover:none),(pointer:coarse){#controls{--k:72px;gap:8px}#controls button{font-size:1.7rem;border-radius:16px}.kb,#ctlNote{display:none}.tc{display:inline}}

/* phones */
@media(max-width:700px){
  #app{padding:8px;gap:6px}
  header{flex-wrap:nowrap;gap:6px}
  .pill{padding:4px 10px;font-size:.85rem;box-shadow:0 3px 0 #5a3418;border-width:2px}
  .pill b{font-size:.95rem;margin-left:4px}
  #starPill{display:flex;flex-direction:column;align-items:center;line-height:1.15}
  #stars{font-size:1.05rem;letter-spacing:1px}
  #starNote{margin:0;font-size:.62rem}
  #msg{font-size:.9rem;padding:6px 10px;min-height:38px;border-width:2px}
  #stage{border-width:4px;border-radius:16px;box-shadow:0 5px 0 #5a3418}
  #btns{width:100%;gap:8px}
  .btn{flex:1 1 30%;padding:12px 8px;font-size:.95rem;min-height:48px}
  #help{font-size:.78rem}
  #overlay{position:fixed;z-index:20;padding:16px;background:rgba(20,40,90,.8)}  /* full-screen result card; the board is too small to hold it */
}

/* ===== screens: title menu, level map, settings ===== */
.screen{display:none;animation:scr .25s ease-out}
body[data-screen=menu] #menu,body[data-screen=map] #map,body[data-screen=game] #app{display:flex}
@keyframes scr{from{opacity:0;transform:translateY(8px)}}
button:focus-visible,input:focus-visible{outline:3px solid #3a9bf0;outline-offset:3px}
button.pill{font:inherit;color:inherit;cursor:pointer;font-weight:800}
button.pill:active{transform:translateY(3px);box-shadow:0 1px 0 #5a3418}
.pill.small{padding:4px 12px;font-size:.95rem;box-shadow:0 3px 0 #5a3418;border-width:2px}
.btn.small{padding:6px 12px;font-size:.85rem;box-shadow:0 4px 0 #5a3418;border-radius:12px}
.btn.big{font-size:1.45rem;padding:16px 28px;width:min(82vw,330px);border-radius:18px}
.btn:disabled{opacity:.4}

/* animated sea behind the menu and the map */
body[data-screen=menu],body[data-screen=map],body[data-screen=game]{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='white' stroke-opacity='.3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 20q9-6 18 0t18 0'/%3E%3Cpath d='M70 56q9-6 18 0t18 0'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 80px,linear-gradient(#46c8f7,#1f8fe3);
  animation:drift 30s linear infinite}
@keyframes drift{to{background-position:120px 0,0 0}}

/* title menu */
#menu{width:100%;max-width:520px;min-height:100vh;min-height:100dvh;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px 16px}
#menuCat{width:min(78vw,300px);height:auto;aspect-ratio:300/240}
.sign{background:repeating-linear-gradient(#a8703a 0 36px,#6c4425 36px 39px);border:6px solid #3a2415;border-radius:18px;padding:12px 34px;box-shadow:0 8px 0 #3a2415,inset 0 0 0 3px #c58f55;margin-bottom:10px}
.sign h1{margin:0;text-align:center;font-size:clamp(2.6rem,13vw,4.2rem);line-height:1;letter-spacing:3px;color:#fff8e6;text-shadow:0 4px 0 #3a2415,3px 0 0 #3a2415,-3px 0 0 #3a2415,0 -3px 0 #3a2415}
.menuBtns{display:flex;flex-direction:column;align-items:center;gap:16px}

/* level map */
#map{width:100%;max-width:520px;height:100vh;height:100dvh;flex-direction:column;overflow:hidden}
@media(min-width:560px){#map{border-left:6px solid #5a3418;border-right:6px solid #5a3418}}
#mapTop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;background:#fff8e6;border-bottom:4px solid #5a3418;position:relative;z-index:5;flex:none}
#mapTitle{font-weight:900;font-size:1.05rem;letter-spacing:1px}
#mStars{color:#3b2314}
#mapScroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;position:relative;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='white' stroke-opacity='.3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 20q9-6 18 0t18 0'/%3E%3Cpath d='M70 56q9-6 18 0t18 0'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 80px,linear-gradient(#46c8f7,#1f8fe3 60%,#1b7fd0)}
#mapWorld{width:100%;overflow:hidden}
#mapInner{position:relative;width:100%;--u:1px}
#mapSvg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
#mapSvg path{fill:none}
.trail{stroke:rgba(255,255,255,.75);stroke-width:7;stroke-linecap:round;stroke-dasharray:1 15}
.b-line{stroke:#262a33;stroke-width:34}.b-stone{stroke:#7f8794;stroke-width:29}.b-wood{stroke:#8a5a30;stroke-width:20}.b-plank{stroke:rgba(20,8,0,.55);stroke-width:20;stroke-dasharray:3 9}
.bridge.fresh{animation:fadein .7s ease-out}
@keyframes fadein{from{opacity:0}}
.soon{position:absolute;left:50%;top:calc(var(--u)*34);transform:translateX(-50%);background:#fff8e6;border:calc(var(--u)*3) solid #5a3418;border-radius:999px;padding:calc(var(--u)*5) calc(var(--u)*14);font-weight:800;font-size:calc(var(--u)*15);white-space:nowrap;box-shadow:0 calc(var(--u)*4) 0 #5a3418;z-index:2}
#mapNodes{position:absolute;inset:0}
.node{position:absolute;z-index:2;transform:translate(-50%,-50%);width:calc(var(--u)*62);height:calc(var(--u)*62);border-radius:50%;border:calc(var(--u)*4) solid #5a3418;display:grid;place-items:center;padding:0;
  font:inherit;font-weight:900;font-size:calc(var(--u)*26);line-height:1;color:#fff;text-shadow:0 calc(var(--u)*2) 0 rgba(0,0,0,.3);cursor:pointer;box-shadow:0 calc(var(--u)*5) 0 #5a3418}
.node:active{transform:translate(-50%,calc(-50% + var(--u)*3));box-shadow:0 calc(var(--u)*2) 0 #5a3418}
.node.done{background:radial-gradient(circle at 35% 30%,#8cf07a,#3fbf4f)}
.node.done.s3{background:radial-gradient(circle at 35% 30%,#fff0a0,#ffb703)}
.node.current{width:calc(var(--u)*80);height:calc(var(--u)*80);background:radial-gradient(circle at 35% 30%,#ffd36b,#ff8a1f)}
.node.current::before{content:"";position:absolute;inset:calc(var(--u)*-10);border-radius:50%;border:calc(var(--u)*4) solid #ffe066;animation:ring 1.5s ease-out infinite;pointer-events:none}
@keyframes ring{from{transform:scale(.82);opacity:1}to{transform:scale(1.2);opacity:0}}
.node.locked{background:#9aa3b2;border-color:#4a4f5c;box-shadow:0 calc(var(--u)*5) 0 #4a4f5c;color:#e9edf5;cursor:not-allowed}
.node .lock{position:absolute;right:calc(var(--u)*-10);bottom:calc(var(--u)*-8);width:calc(var(--u)*30);height:calc(var(--u)*30);display:grid;place-items:center;background:#4a4f5c;border-radius:50%;font-size:calc(var(--u)*17);text-shadow:none;border:calc(var(--u)*2.5) solid #2f323b}
.node .stars{position:absolute;left:50%;bottom:calc(100% + var(--u)*5);transform:translateX(-50%);display:flex;gap:calc(var(--u)*1);font-size:calc(var(--u)*23);white-space:nowrap}
.node .stars i{font-style:normal;color:#6c7a8a;text-shadow:1px 0 #3a2415,-1px 0 #3a2415,0 1px #3a2415,0 -1px #3a2415,0 2px 0 #3a2415}
.node .stars i.on{color:#ffc400}
.node .stars i:nth-child(2){margin-top:calc(var(--u)*-6)}
.node .tm{position:absolute;left:50%;top:calc(100% + var(--u)*9);transform:translateX(-50%);background:#fff8e6;border:calc(var(--u)*2.5) solid #5a3418;border-radius:999px;padding:calc(var(--u)*1) calc(var(--u)*8);font-size:calc(var(--u)*13);font-weight:800;color:#3b2314;text-shadow:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.node .bubble{position:absolute;left:50%;bottom:calc(100% + var(--u)*10);transform:translateX(-50%);background:#fff;color:#e8504a;border:calc(var(--u)*3) solid #5a3418;border-radius:calc(var(--u)*10);padding:calc(var(--u)*2) calc(var(--u)*10);font-size:calc(var(--u)*16);text-shadow:none;animation:bob 1s ease-in-out infinite alternate}
@keyframes bob{from{transform:translate(-50%,0)}to{transform:translate(-50%,calc(var(--u)*-5))}}
.node .ribbon{position:absolute;left:50%;top:calc(100% + var(--u)*9);transform:translateX(-50%);background:#e8504a;border:calc(var(--u)*3) solid #5a3418;border-radius:calc(var(--u)*7);padding:calc(var(--u)*1) calc(var(--u)*9);font-size:calc(var(--u)*14);white-space:nowrap}
.node.fresh .stars i.on{animation:starpop .55s cubic-bezier(.3,1.6,.5,1) both}
.node.fresh .stars i:nth-child(2){animation-delay:.2s}.node.fresh .stars i:nth-child(3){animation-delay:.4s}
@keyframes starpop{from{transform:scale(0) rotate(-90deg)}}
.node.unlock{animation:unlock .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes unlock{from{transform:translate(-50%,-50%) scale(.6)}}
.node.shake{animation:nshake .35s}
@keyframes nshake{25%{transform:translate(calc(-50% - 6px),-50%)}75%{transform:translate(calc(-50% + 6px),-50%)}}
#mapCat{position:absolute;left:0;top:0;width:calc(var(--u)*72);height:calc(var(--u)*72);z-index:3;pointer-events:none}
#mapToast{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;transition:.25s;background:#fff8e6;border:3px solid #5a3418;border-radius:14px;padding:8px 14px;font-weight:700;font-size:.9rem;text-align:center;width:max-content;max-width:90%;z-index:6;pointer-events:none}
#mapToast.show{opacity:1;transform:translate(-50%,0)}

/* settings dialog */
.modal{position:fixed;inset:0;z-index:50;background:rgba(20,40,90,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.card{background:#fff8e6;border:5px solid #5a3418;border-radius:22px;box-shadow:0 8px 0 #5a3418;padding:20px;width:min(92vw,400px);display:flex;flex-direction:column;gap:14px;align-items:stretch}
.card h2{margin:0;text-align:center;font-size:1.6rem;color:#e8751a;text-shadow:0 2px 0 #5a3418}
.card .row{font-weight:800}
.slider{display:flex;align-items:center;gap:10px;font-size:1.4rem}
.slider b{min-width:3.2ch;text-align:right;font-size:1rem;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:34px;background:transparent;margin:0;--p:50%;touch-action:none}
input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:99px;border:3px solid #5a3418;background:linear-gradient(90deg,#ff8a1f var(--p),#e8dcc0 var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#fff;border:4px solid #5a3418;box-shadow:0 3px 0 #5a3418}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;border:3px solid #5a3418;background:#e8dcc0}
input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:#ff8a1f}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid #5a3418}

@media(max-width:700px){#mapTitle{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){.screen,body[data-screen=menu],body[data-screen=map],.node.current::before,.node .bubble,.bridge.fresh,.node.unlock,.node.fresh .stars i{animation:none!important}}

/* ===== game screen: same cream bars + sea as the menu and map, built for phones first ===== */
#app{height:100vh;height:100dvh;max-width:640px;padding:0;gap:0;align-items:stretch;overflow:hidden}
@media(min-width:660px){#app{border-left:6px solid #5a3418;border-right:6px solid #5a3418}}
#app header{flex:none;flex-wrap:nowrap;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;background:#fff8e6;border-bottom:4px solid #5a3418;position:relative;z-index:5}
#app header .pill{padding:4px 12px;font-size:.9rem;border-width:2px;box-shadow:0 3px 0 #5a3418;white-space:nowrap}
#app header .pill b{font-size:.95rem;margin-left:4px}
#starPill{display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:3px 12px!important}
#stars{font-size:1.1rem;letter-spacing:1px}
#starNote{margin:0;font-size:.62rem}
#msg{flex:none;width:auto;margin:10px 12px 0;padding:6px 14px;min-height:0;font-size:.9rem;border-width:3px;border-radius:999px}
#stage{flex:1;min-height:0;width:auto;display:flex;align-items:center;justify-content:center;padding:12px 8px;border:0;border-radius:0;box-shadow:none;overflow:visible;background:none}
#cv{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:18px;box-shadow:0 0 0 4px #5a3418,0 8px 0 4px #5a3418}
#dock{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:#fff8e6;border-top:4px solid #5a3418}
#btns{width:100%;flex-wrap:nowrap;gap:8px}
#btns .btn{flex:1 1 0;min-height:50px;padding:10px 6px;font-size:.95rem;white-space:nowrap}
#btns #bChk{flex:2 1 0}
#bChk::before{content:"\2714  "}#bHint::before{content:"\1F4A1  "}#bReset::before{content:"\21BB  "}
body[data-mode=solved] #bChk,body[data-mode=walk] #bChk,body[data-mode=done] #bChk{display:none}
@media(hover:none),(pointer:coarse){#controls{--k:60px;gap:6px}}
#help{margin:0;font-size:.75rem;max-width:none}
@media(max-width:700px),(max-height:820px){#help{display:none}}
/* level complete: a cream card like the settings dialog */
#overlay{position:fixed;inset:0;z-index:20;padding:16px;background:rgba(20,40,90,.6)}
#overlay .win{width:min(88vw,360px);align-items:center;text-align:center;gap:8px;padding:20px 18px;color:#3b2314;animation:winpop .35s cubic-bezier(.3,1.5,.5,1)}
#overlay .win h2{font-size:clamp(1.6rem,7vw,2.1rem);color:#e8751a;text-shadow:0 2px 0 #5a3418}
#overlay .win p{font-size:1rem;text-shadow:none;color:#3b2314}
#overlay .win p.stars{font-size:clamp(2.4rem,11vw,3.2rem);color:#ffc400;letter-spacing:6px;text-shadow:0 3px 0 #5a3418}
.btnrow{display:flex;gap:10px;width:100%;margin-top:6px}.btnrow .btn{flex:1}
@keyframes winpop{from{transform:scale(.8);opacity:0}}
@media(prefers-reduced-motion:reduce){#overlay .win{animation:none}}

/* ===== round 3: help button + popup, bigger board, wooden backdrop, hidden scroll bar ===== */
#msgRow{flex:none;display:flex;align-items:center;gap:8px;margin:10px 12px 0}
#msgRow #msg{flex:1;min-width:0;margin:0;border-radius:20px}
#bHelp{flex:none;width:42px;height:42px;padding:0;border-radius:50%;font-size:1.3rem;line-height:1;box-shadow:0 4px 0 #5a3418}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;gap:10px;align-items:flex-start}
.steps span{flex:none;width:34px;height:34px;display:grid;place-items:center;background:#fff;border:3px solid #5a3418;border-radius:50%;font-size:1rem}
.steps p{margin:0;font-weight:700;font-size:.9rem;line-height:1.3;padding-top:5px}
#mapScroll{scrollbar-width:none;cursor:grab}
#mapScroll::-webkit-scrollbar{display:none}
#mapScroll.drag{cursor:grabbing}
@media(max-width:659px){
  #stage{padding:0}
  #cv{border-radius:0;box-shadow:0 -4px 0 #5a3418,0 4px 0 #5a3418}   /* board runs edge to edge */
}
@media(min-width:660px){
  :root{--sea:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='white' stroke-opacity='.3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 20q9-6 18 0t18 0'/%3E%3Cpath d='M70 56q9-6 18 0t18 0'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 80px,linear-gradient(#46c8f7,#1f8fe3)}
  body[data-screen]{background:repeating-linear-gradient(#8a5a30 0 60px,#5c391e 60px 64px);animation:none}
  #menu,#app{background:var(--sea);animation:scr .25s ease-out,drift 30s linear infinite}
  #menu{max-width:560px;border-left:6px solid #5a3418;border-right:6px solid #5a3418}
  #app{max-width:820px}
}
@media(max-width:430px){#app header{gap:6px;padding-left:8px;padding-right:8px}#app header .pill{padding:4px 9px;font-size:.82rem}#app header .pill b{font-size:.88rem}}
#stage{container-type:size}
#cv{width:min(100cqw,calc(100cqh * var(--ar,2)));height:auto;max-width:none;max-height:none}

/* ===== round 4: cat skins, lava theme ===== */
.menuRow{display:flex;gap:12px;width:min(82vw,330px)}
.menuRow .btn{flex:1;width:auto;font-size:1.1rem;padding:14px 8px}
.skinfo{margin:0;text-align:center;font-weight:800;font-size:.9rem}
#skList{display:flex;flex-direction:column;gap:10px}
.skrow{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid #5a3418;border-radius:16px;padding:6px 10px}
.skrow.on{background:#e6ffe0}
.skrow canvas{width:72px;height:72px;flex:none}
.skrow.locked canvas{filter:brightness(0) opacity(.3)}
.skname{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.skname b{font-size:1.05rem}.skname small{font-weight:700;font-size:.75rem;opacity:.8}
.skname .bar{display:block;height:10px;border:2px solid #5a3418;border-radius:99px;background:#e8dcc0;overflow:hidden}
.skname .bar i{display:block;height:100%;background:#ff8a1f}
#overlay .win p.unlock{color:#e8504a;font-size:1.05rem}
#overlay .win p.unlock small{color:#3b2314;font-size:.8rem}
@media(max-width:659px){body[data-screen=game][data-theme=lava]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='%23ffec96' stroke-opacity='.45' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 20q9-6 18 0t18 0'/%3E%3Cpath d='M70 56q9-6 18 0t18 0'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 80px,linear-gradient(#ff9a2e,#d9300a);animation:drift 30s linear infinite}}
@media(min-width:660px){body[data-screen=game][data-theme=lava] #app{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='%23ffec96' stroke-opacity='.45' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 20q9-6 18 0t18 0'/%3E%3Cpath d='M70 56q9-6 18 0t18 0'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 80px,linear-gradient(#ff9a2e,#d9300a);animation:scr .25s ease-out,drift 30s linear infinite}}

/* ===== round 5: long level map, water -> lava, clouds over the locked lava zone ===== */
#mapLava{position:absolute;left:0;top:0;width:100%;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='%23ffec96' stroke-opacity='.45' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 20q9-6 18 0t18 0'/%3E%3Cpath d='M70 56q9-6 18 0t18 0'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 80px,linear-gradient(#c92a08,#ff9a2e);
  -webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - var(--u)*160),transparent 100%);mask-image:linear-gradient(#000 0,#000 calc(100% - var(--u)*160),transparent 100%)}
#mapSvg{z-index:1}
#mapClouds{position:absolute;left:0;top:0;width:100%;z-index:4;cursor:pointer}
#mapClouds svg{display:block;width:100%;height:100%;overflow:visible;will-change:transform;animation:cdrift 12s ease-in-out infinite alternate}
@keyframes cdrift{to{transform:translateX(calc(var(--u)*12))}}
#mapClouds .cl{transform-box:fill-box;transform-origin:center}
#mapClouds.gone{pointer-events:none}
#mapClouds.gone .cl{transition:transform 1.4s ease-in var(--d),opacity 1.3s ease-in var(--d);transform:translate(var(--dx),-70px) scale(1.25);opacity:0}
#mapClouds.gone .cb{opacity:0;transition:opacity 1.2s .3s}
.cloudTag{position:absolute;left:50%;transform:translateX(-50%);background:#fff8e6;border:calc(var(--u)*3.5) solid #5a3418;border-radius:calc(var(--u)*18);padding:calc(var(--u)*8) calc(var(--u)*20);font-weight:900;font-size:calc(var(--u)*21);text-align:center;box-shadow:0 calc(var(--u)*5) 0 #5a3418;color:#e8504a;white-space:nowrap;line-height:1.25}
.cloudTag small{display:block;font-size:calc(var(--u)*13);color:#3b2314;font-weight:800}
.cloudTag.shake{animation:tagshake .35s}
@keyframes tagshake{25%{transform:translateX(calc(-50% - 6px))}75%{transform:translateX(calc(-50% + 6px))}}
#mapClouds.gone .cloudTag{opacity:0;transition:opacity .35s}
.node.done.demo .num{font-size:calc(var(--u)*24)}
@media(prefers-reduced-motion:reduce){#mapLava,#mapClouds svg{animation:none!important}}

/* smooth scrolling: no repainting background animation behind the map */
body[data-screen=map]{animation:none}
#mapLava{will-change:transform}