:root{--night:#18162a;--ink:#343047;--pink:#fa6596;--pink2:#ffb0ca;--mint:#c9e3b5;--lav:#dfd4ff;--cream:#fff9f1}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--night);font-family:system-ui,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:var(--ink)}button{cursor:pointer;font:inherit;touch-action:manipulation}button:focus-visible{outline:3px solid #7e59e8;outline-offset:3px}#app{min-height:100dvh;display:flex;flex-direction:column;background:linear-gradient(175deg,#fff6fd 0,#eff0ff 100%)}.topbar{height:60px;flex-shrink:0;background:#232139;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(14px,calc((100vw - 1120px)/2));gap:8px}.brand{font-weight:1000;letter-spacing:2px;color:#ffd9e7}.brand small{font-size:9px;display:block;letter-spacing:3px;color:#a5a2c8}.topright,.playHeadBtns{display:flex;gap:7px}.soft,.secondary{background:#fff;border:2px solid #ded7ed;color:#554668;border-radius:13px;font-weight:900;padding:10px 16px;box-shadow:0 4px 0 #d7cee7}.topbar .soft{background:#3b3657;border-color:#5c5578;color:white;box-shadow:none;padding:7px 10px;font-size:12px}.primary{border:2px solid #ed457e;background:linear-gradient(135deg,#ff86ad,#fa467f);box-shadow:0 5px 0 #bd3566;color:white;border-radius:15px;padding:13px 26px;font-weight:1000;letter-spacing:.5px}.primary:active,.secondary:active,.soft:active{transform:translateY(3px);box-shadow:none}main{flex:1}.screen{display:none;max-width:1120px;margin:0 auto;padding:20px 16px 38px}.screen.active{display:block}#title{padding-top:0}.heroTitle{margin:auto;display:flex;flex-direction:column;gap:18px;padding:18px;border-radius:0 0 28px 28px;background:linear-gradient(180deg,#17152c 0%,#241d3c 100%);box-shadow:0 18px 42px rgba(18,13,38,.18)}.titleMedia{display:flex;flex-direction:column;gap:16px}.titleLogoImg{display:block;width:min(100%,560px);height:auto;margin:0 auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}.titleVisualFrame{background:#120f20;border:2px solid #4d426d;border-radius:24px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.28)}.titleHeroImg{display:block;width:100%;height:auto}.titleInfoBox{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:4px 6px 0;color:#fff}.eyebrow{font-weight:900;color:#ffd5e8;letter-spacing:2px;text-shadow:0 2px 4px #000}.titleLead{margin:0;font-size:clamp(14px,2.1vw,22px);font-weight:900;color:#fff;text-shadow:0 2px 4px #000}.titleActions{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}h1{font-size:clamp(44px,7vw,88px);line-height:1.16;margin:24px 0 12px;font-weight:1000;letter-spacing:-3px;color:white;text-shadow:4px 6px 0 #03020d,-2px -2px 0 #05040f}h1 em{font-style:normal;color:#ff567c;-webkit-text-stroke:1px #ffd1dc;text-shadow:4px 5px 0 #510923,7px 9px 0 #07030c}.intro{background:white;border-radius:22px;max-width:850px;margin:19px auto 0;padding:15px 23px;display:flex;align-items:center;gap:18px;box-shadow:0 8px 22px #39265519}.introFace{width:80px;height:80px;border-radius:50%;border:5px solid #f8cada;overflow:hidden;flex-shrink:0}.introFace img{height:100%;width:100%;object-fit:cover}.intro strong{color:#d64a87}.intro p{font-size:13px;line-height:1.7;margin:5px 0}.sectionTitle{text-align:center;margin:15px 0 30px}.sectionTitle span,.playHeader small{font-size:12px;letter-spacing:3px;color:#d05290;font-weight:1000}.sectionTitle h2,.playHeader h2{font-size:clamp(21px,3vw,30px);margin:6px 0}.sectionTitle p{font-size:14px}.modeGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.modeCard{background:white;border:2px solid #e6d9ee;border-radius:24px;text-align:left;padding:0;overflow:hidden;box-shadow:0 7px 0 #e3d3e9;transition:transform .15s}.modeCard:hover{transform:translateY(-4px)}.modeArt{height:170px;display:flex;justify-content:space-evenly;align-items:center;position:relative;overflow:hidden}.modeArt span{font-size:70px;filter:drop-shadow(0 8px 4px #0002)}.modeArt span:nth-child(2){font-size:43px;align-self:flex-start;padding-top:24px}.modeArt span:nth-child(3){font-size:53px}.simArt{background:linear-gradient(120deg,#cce1ff,#e8e0ff)}.actionArt{background:linear-gradient(120deg,#25243f99,#5f477b99),url('assets/title_alt.png') center/cover no-repeat}.puzzleArt{background:linear-gradient(120deg,#d5efdf,#fbdde5)}.cardTxt{padding:19px}.cardTxt small{font-size:10px;letter-spacing:2px;color:#c65389;font-weight:1000}.cardTxt h3{font-size:22px;margin:8px 0;line-height:1.45}.cardTxt p{font-size:13px;line-height:1.75;min-height:66px}.cardTxt b{color:#ed447d}.center{text-align:center;margin:22px auto}.playHeader{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 14px}.gamePanel{background:white;border:2px solid #e9dded;border-radius:22px;padding:16px;box-shadow:0 8px 24px #33204d11}.simHud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.stat{background:#f6f3ff;border-radius:14px;padding:10px}.stat label{font-size:11px;font-weight:800;display:block}.stat b{display:block;font-size:22px}.meter{background:#ddd9e8;height:9px;border-radius:12px;overflow:hidden;margin-top:6px}.meter i{display:block;height:100%;width:50%;background:linear-gradient(90deg,#70cdb3,#6acb90);border-radius:12px;transition:width .25s}.officeScene{height:210px;background:linear-gradient(0deg,#ddd4f3 0 28%,#bcccea 28% 77%,#a9b6dc 77%);border-radius:18px;margin:13px 0;display:flex;position:relative;overflow:hidden}.officeScene:after{content:'✦ ✦ ✦ ✦ ✦';position:absolute;right:15%;top:40px;color:#fff9;font-size:28px}.scenePortrait{height:100%;width:35%;position:relative;z-index:1;display:flex;align-items:end;justify-content:center}.scenePortrait img{height:95%;width:auto;max-width:95%;object-fit:cover;object-position:top;border-radius:35px 35px 0 0;mix-blend-mode:multiply}.scenePortrait span{position:absolute;top:8px;left:15px;border-radius:18px;background:white;border:2px solid #f6acd1;padding:7px 12px;font-size:12px;font-weight:900}.desk{flex:1;position:relative;padding:25px;display:flex;align-items:center;justify-content:center}.clock{position:absolute;top:12px;right:13px;font-weight:900;color:#ff768f;background:#262543;padding:7px;border:3px solid #4b4267;border-radius:8px}.deskMonitor{font-size:50px;position:relative;z-index:2;text-align:center}.deskMonitor span{display:block;font-size:12px;color:#fafafa;background:#514c78;border-radius:8px;padding:8px}.bossBubble{position:absolute;right:13px;bottom:12px;background:#fff0f1;padding:10px;border:2px solid #fb91a7;border-radius:17px;font-size:12px;font-weight:800;max-width:60%}.simColumns{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}.simColumns h3{font-size:16px;border-bottom:2px dashed #e7dfea;padding-bottom:8px}.simColumns h3 small{font-size:12px}.taskList{display:grid;gap:8px}.task{border:2px solid #dfdcec;border-radius:14px;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px;gap:9px;text-align:left}.task.urgent{border-color:#ffb0ba;background:#fff6f7}.task span{font-weight:850;font-size:13px}.task small{display:block;font-size:11px;color:#877d91;margin-top:3px}.task strong{white-space:nowrap;background:#ffdaeb;border-radius:9px;padding:8px;color:#a83d71;font-size:12px}.simActions{display:grid;gap:8px}.simActions button{border:2px solid #cce5c8;border-radius:12px;background:#f1f9ef;text-align:left;padding:10px;font-weight:800}.simActions small{float:right;color:#5d936d}.tips{background:#fff6e3;border-radius:14px;padding:12px;font-size:12px;margin-top:15px}.tips p{margin:6px 0}.gameLog{margin-top:15px;font-size:12px;color:#6e6284;background:#faf5fc;padding:13px;border-radius:12px;min-height:40px}.actionHud,.puzzleHud{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px;background:#f7f4fd;padding:12px 15px;border-radius:14px;font-weight:800}.canvasWrap{position:relative;background:#17162f;overflow:hidden;border-radius:15px;touch-action:none}.canvasWrap canvas{width:100%;height:auto;display:block;aspect-ratio:960 / 450}.canvasOverlay{position:absolute;inset:0;background:#151126bf;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;color:white}.canvasOverlay b{font-size:clamp(16px,3vw,26px)}.canvasOverlay p{font-size:13px}.touchControls{display:flex;justify-content:space-between;gap:12px;margin-top:10px}.touchControls>div{display:flex;gap:10px}.touchKey,.puzDpad button{background:#fbe2ed;border:2px solid #e799ba;color:#a83d72;border-radius:15px;width:90px;height:66px;font-size:28px;font-weight:900;user-select:none;-webkit-user-select:none;touch-action:none}.touchKey small{font-size:11px;display:block}.touchKey.jump{background:#d4efd5;border-color:#84c49c;color:#397a52}.touchKey.smallKey{background:#f3f0fc;border-color:#cec7ed;color:#6e63a2}.controlCaption{font-size:12px;line-height:1.65;color:#857991}.puzzleLayout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px}.puzzleBoardWrap{min-width:0}.puzzleBoard{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;background:#4b4365;border-radius:18px;padding:10px;max-width:550px;margin:auto;touch-action:manipulation;overflow:hidden}.tile{aspect-ratio:1;background:#f3e7ef;border:none;border-radius:0;font-size:clamp(19px,4vw,39px);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #e2d6ea}.tile.wall{background:linear-gradient(180deg,#958ca8 0%,#7d738f 58%,#6b627d 100%);box-shadow:inset 0 0 0 2px #5b546a,inset 0 -5px 0 #4c4659, inset 0 6px 0 rgba(255,255,255,.10)}.tile.exit{background:#bef0ca}.tile.enemy{background:#f8c0c5}.tile.player{background:#ffe0f3;box-shadow:inset 0 0 0 3px #f5669e}.puzButtons{display:flex;justify-content:center;gap:12px;margin:15px 0}.puzDpad{display:none;text-align:center}.puzDpad>div{display:flex;justify-content:center;gap:5px}.puzDpad button{width:70px;height:46px;font-size:20px;margin:2px}.puzzleAside{background:#f9f1fc;border-radius:18px;padding:20px;text-align:center}.puzzleAside img{width:130px;height:130px;object-fit:cover;border-radius:50%;border:5px solid #ffd7e6}.puzzleAside h3{color:#dc5e92}.puzzleAside p{font-size:13px;line-height:1.8}.legend{text-align:left;font-size:13px;line-height:2;background:white;border-radius:10px;padding:8px}.modalBack{position:fixed;z-index:20;inset:0;background:#131020ca;display:flex;align-items:center;justify-content:center;padding:12px}.modalBack[hidden],[hidden]{display:none!important}.modal{background:#fffafc;border:5px solid #ffc5da;box-shadow:0 14px 60px #0005;border-radius:25px;padding:20px;max-width:680px;width:100%;max-height:94dvh;overflow:auto;position:relative}.close{position:absolute;right:10px;top:9px;border:none;border-radius:50%;background:#f6e0ec;color:#ad4572;font-size:26px;width:40px;height:40px}.helpHero{display:flex;align-items:center;gap:14px;margin-right:33px}.helpHero img{width:106px;height:106px;border-radius:50%;object-fit:cover;border:5px solid #fbd7e4}.helpHero small{color:#c56495;font-weight:bold}.helpHero h2{color:#ca4d87;margin:3px 0;font-size:22px}.helpHero p{margin:5px 0;font-size:12px}.tabs{display:flex;gap:4px;margin:17px 0;overflow-x:auto}.tabs button{flex:1;background:#efecf4;border:none;border-radius:10px;padding:10px 7px;font-weight:800;font-size:12px}.tabs button.selected{background:#f7b4d3;color:#90305f}.helpStep{margin:8px 0;padding:12px;background:#fff;border:2px solid #f2e3f2;border-radius:14px;font-size:14px;line-height:1.65}.resultBox{text-align:center;max-width:480px}.resultBox img{height:155px;width:155px;object-fit:cover;border:6px solid #ffcbde;border-radius:50%}.resultStar{color:#d44b8b;font-size:13px;font-weight:1000;margin:10px}.resultBox h2{font-size:30px;margin:6px}.resultBox p{line-height:1.8;white-space:pre-line}.resultBtns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}footer{text-align:center;color:#a39cb4;background:#222039;font-size:11px;padding:15px}@media(max-width:700px){.topbar{height:55px;padding:0 9px}.brand{font-size:13px}.brand small{font-size:7px}.screen{padding:12px 8px 25px}.heroTitle{padding:12px;border-radius:0 0 22px 22px;gap:14px}.titleMedia{gap:12px}.titleLogoImg{width:min(100%,390px)}.titleVisualFrame{border-radius:18px}.titleInfoBox{padding:0 2px}.titleLead{font-size:15px}.titleActions{margin-top:8px}.intro{padding:12px}.introFace{width:63px;height:63px}.intro p{font-size:11px}.modeGrid{grid-template-columns:1fr;gap:12px}.modeCard{display:grid;grid-template-columns:33% 1fr;min-height:160px}.modeArt{height:100%;flex-direction:column}.modeArt span{font-size:53px}.modeArt span:nth-child(2),.modeArt span:nth-child(3){font-size:30px;align-self:center;padding:0}.cardTxt{padding:10px 15px}.cardTxt h3{font-size:18px;margin:4px 0}.cardTxt p{font-size:12px;margin:5px 0;min-height:0}.playHeader{align-items:flex-start}.playHeader h2{font-size:17px}.playHeadBtns{gap:5px;flex-wrap:wrap;justify-content:flex-end}.playHeadBtns button{font-size:11px;padding:7px}.gamePanel{padding:9px}.stat{padding:7px}.stat label{font-size:9px}.stat b{font-size:14px}.officeScene{height:180px}.scenePortrait{width:44%}.scenePortrait span{font-size:10px;left:3px}.desk{padding:4px}.deskMonitor{font-size:31px}.bossBubble{font-size:9px}.simColumns{grid-template-columns:1fr;gap:0}.simColumns h3{font-size:15px}.puzzleLayout{grid-template-columns:1fr}.puzzleAside{padding:9px;display:grid;grid-template-columns:70px 1fr;gap:3px 12px;text-align:left;align-items:center}.puzzleAside img{width:65px;height:65px;grid-row:span 2}.puzzleAside h3{font-size:15px;margin:0}.puzzleAside p{margin:0;font-size:11px}.puzzleAside .legend,.puzzleAside .controlCaption{grid-column:span 2}.puzzleAside .legend{font-size:11px}.puzDpad{display:block}.touchKey{width:86px;height:65px}.modal{padding:13px}.helpHero img{width:73px;height:73px}.helpHero h2{font-size:18px}.tabs button{font-size:10px;padding:9px 4px}.helpStep{font-size:12px;padding:10px}}@media(max-width:900px) and (orientation:landscape){
  .topbar{height:48px;padding:0 8px}
  .topbar .soft{font-size:11px;padding:5px 9px}
  footer{font-size:10px;padding:8px 6px}
  #title.screen.active{padding:5px 7px 7px;min-height:0;display:flex;flex-direction:column;justify-content:flex-start}
  .heroTitle{padding:8px;gap:8px;border-radius:0 0 18px 18px;flex:0 0 auto}
  .titleMedia{display:grid;grid-template-columns:minmax(170px,31%) 1fr;align-items:stretch;gap:10px}
  .titleLogoImg{width:100%;max-width:none;max-height:110px;object-fit:contain;align-self:start;margin:0}
  .titleVisualFrame{height:min(30dvh,126px);min-height:104px;border-radius:14px}
  .titleHeroImg{width:100%;height:100%;object-fit:cover;object-position:center}
  .titleInfoBox{padding-top:0;gap:6px}
  .eyebrow{font-size:11px;letter-spacing:1px}
  .titleLead{font-size:13px;line-height:1.3}
  .titleActions{margin-top:2px;gap:8px}
  .titleActions .primary,.titleActions .secondary{padding:8px 12px;border-radius:12px;font-size:12px;box-shadow:0 3px 0 #d7cee7}
  .titleActions .primary{box-shadow:0 4px 0 #bd3566}
  .intro{margin-top:8px;max-width:none;padding:8px 12px;gap:10px;border-radius:16px;align-items:center}
  .introFace{width:48px;height:48px;border-width:3px}
  .intro strong{font-size:13px}
  .intro p{font-size:10px;line-height:1.4;margin:2px 0 0}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:430px){
  #app{min-height:100dvh}
  .heroTitle{gap:6px;padding:7px}
  .titleMedia{grid-template-columns:minmax(150px,30%) 1fr;gap:8px}
  .titleLogoImg{max-height:94px}
  .titleVisualFrame{height:min(26dvh,108px);min-height:88px}
  .eyebrow{font-size:10px}
  .titleLead{font-size:12px}
  .titleActions .primary,.titleActions .secondary{padding:7px 11px;font-size:11px}
  .intro{margin-top:6px;padding:7px 10px;gap:8px}
  .introFace{width:42px;height:42px}
  .intro strong{font-size:12px}
  .intro p{font-size:9px;line-height:1.28}
}
@media(max-width:365px){.topbar .soft{font-size:10px;padding:6px}.simHud{grid-template-columns:repeat(2,1fr)}.tile{font-size:18px}.titleActions button{padding:11px 16px}}

.tile.player{padding:1px;overflow:hidden}.tile .puzzleSprite{display:block;width:80%;height:94%;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 2px 0 #7f6782)}

/* v0.1.3 puzzle stage intro, pickup and low-move urgency */
.puzzleBoardWrap{position:relative}.puzIntro{position:absolute;z-index:8;left:0;top:8%;width:min(90%,360px);min-height:124px;display:flex;align-items:center;gap:8px;padding:10px 16px 10px 3px;background:linear-gradient(110deg,#fff0fa,#fff9ec);box-shadow:0 6px 23px #50274766;border:3px solid #ffaacb;border-radius:16px;pointer-events:none;animation:puzIn .24s ease-out}.puzIntro[hidden],.puzMessage[hidden]{display:none!important}.puzIntro img{object-fit:cover;width:110px;height:110px;border-radius:14px}.puzIntro b{font-size:clamp(16px,2.7vw,23px);color:#a93272}.puzIntro p{font-size:14px;font-weight:bold}.puzMessage{position:absolute;z-index:7;left:8%;top:5px;right:8%;text-align:center;background:#fff0b5;color:#85436e;padding:10px;border-radius:30px;box-shadow:0 3px 12px #5334;font-size:clamp(12px,2vw,18px);font-weight:900;pointer-events:none}.puzPickup{animation:pickupflash .45s ease-out}.puzDanger .puzzleHud{background:linear-gradient(90deg,#ffecb0,#ffa2b6);animation:dangerPulse .8s ease-in-out infinite alternate}.puzCritical .puzzleBoard{box-shadow:0 0 0 5px #ff587c,0 0 22px 8px #ff376477;animation:dangerPulse .45s ease-in-out infinite alternate}.puzCritical #puzMoves{color:#b70021;font-size:1.45em}@keyframes puzIn{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes pickupflash{50%{filter:brightness(1.8) saturate(1.5)}}@keyframes dangerPulse{to{filter:brightness(1.18);transform:scale(1.006)}}@media(max-width:560px){.puzIntro{top:6%;min-height:88px}.puzIntro img{width:75px;height:75px}.puzIntro p{font-size:12px}}

/* v0.1.8: visibility fix (hidden title must NEVER overlay other screens) */
#title.screen:not(.active){display:none!important}
@media (orientation:landscape) and (max-width:1000px) and (max-height:600px){
  .topbar{height:38px;padding:0 9px}.topbar .brand{font-size:11px}.brand small{font-size:6px}
  #title.screen.active{padding:3px 7px 5px;max-width:100%;width:100%}
  #title .heroTitle{padding:5px 9px;gap:5px;border-radius:12px;box-shadow:none}
  #title .titleMedia{display:grid;grid-template-columns:minmax(130px,29%) minmax(0,1fr);align-items:center;gap:9px;min-height:0;height:clamp(125px,43dvh,235px)}
  #title .titleLogoImg{max-height:100%;max-width:100%;width:100%;height:100%;object-fit:contain;margin:0}
  #title .titleVisualFrame{min-height:0;width:100%;height:100%;border-radius:10px;border-width:1px;box-shadow:none}
  #title .titleHeroImg{height:100%;width:100%;object-fit:contain;object-position:center}
  #title .titleInfoBox{gap:2px;padding:0 3px}
  #title .eyebrow{font-size:10px;line-height:1.15}
  #title .titleLead{font-size:12px;line-height:1.2}
  #title .titleActions{display:flex;flex-wrap:nowrap;gap:8px;margin:2px 0 0}
  #title .titleActions button{font-size:12px;padding:6px 12px;min-height:32px;white-space:nowrap}
  #title .intro{margin:4px auto 0;padding:4px 9px;min-height:0;gap:8px;max-width:100%}
  #title .introFace{height:34px;width:34px;border-width:2px}
  #title .intro strong{font-size:11px}#title .intro p{font-size:9px;line-height:1.2;margin:0}
  footer{padding:5px;font-size:9px}
}
@media (orientation:landscape) and (max-width:1000px) and (max-height:360px){
  #title .titleMedia{height:39dvh;min-height:90px}
  #title .heroTitle{gap:2px}#title .intro{padding:2px 7px}#title .introFace{width:28px;height:28px}
}
/* All puzzle controls and information fit a single phone portrait viewport. */
@media (orientation:portrait) and (max-width:700px){
  body:has(#play.active #puzzlePanel:not([hidden])){overflow:hidden}
  #app:has(#play.active #puzzlePanel:not([hidden])){height:100dvh;min-height:0;overflow:hidden}
  #app:has(#play.active #puzzlePanel:not([hidden])) main{min-height:0;flex:1;display:flex;flex-direction:column}
  #play.screen.active:has(#puzzlePanel:not([hidden])){width:100%;height:100%;min-height:0;display:flex;flex-direction:column;padding:5px 8px 6px;overflow:hidden}
  #play:has(#puzzlePanel:not([hidden])) .playHeader{flex:0 0 auto;margin:0 0 4px;gap:3px;align-items:center}
  #play:has(#puzzlePanel:not([hidden])) .playHeader h2{font-size:clamp(13px,3.5vw,17px);margin:0}
  #play:has(#puzzlePanel:not([hidden])) .playHeader small{font-size:9px}
  #play:has(#puzzlePanel:not([hidden])) .playHeadBtns button{padding:4px 6px;font-size:10px}
  #puzzlePanel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:6px;overflow:hidden;border-radius:12px}
  #puzzlePanel .puzzleHud{flex:0 0 auto;padding:5px 6px;margin:0 0 4px;font-size:11px;gap:3px}
  #puzzlePanel .puzzleLayout{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:space-between}
  #puzzlePanel .puzzleBoardWrap{width:100%;min-height:0;display:flex;flex-direction:column;align-items:center;gap:4px;flex:1 1 auto;justify-content:flex-start}
  #puzzlePanel .puzzleBoard{flex:0 1 auto;width:min(100%, 46dvh);aspect-ratio:1/1;max-width:100%;padding:3px;border-radius:8px;min-height:0}
  #puzzlePanel .tile{font-size:clamp(14px,4vw,28px);min-width:0;min-height:0}
  #puzzlePanel .puzButtons{flex:0 0 auto;margin:2px 0;gap:8px}
  #puzzlePanel .puzButtons button{padding:5px 10px;font-size:11px;border-radius:9px;box-shadow:0 2px 0 #d7cee7}
  #puzzlePanel .puzDpad{flex:0 0 auto;margin:0}
  #puzzlePanel .puzDpad button{height:30px;width:54px;font-size:17px;margin:0 2px;border-radius:9px}
  #puzzlePanel .puzDpad>div{gap:3px}
  #puzzlePanel .puzzleAside{flex:0 0 auto;width:100%;padding:5px 7px;border-radius:9px;display:grid;grid-template-columns:38px 1fr;column-gap:6px;row-gap:1px}
  #puzzlePanel .puzzleAside img{height:36px;width:36px;border-width:2px;grid-row:span 2}
  #puzzlePanel .puzzleAside h3{font-size:12px}
  #puzzlePanel .puzzleAside p{font-size:10px;line-height:1.2}
  #puzzlePanel .puzzleAside .legend{grid-column:span 2;line-height:1.25;font-size:9px;padding:2px 5px}
  #puzzlePanel .puzzleAside .controlCaption{display:none}
  #app:has(#play.active #puzzlePanel:not([hidden])) footer{display:none}
  #puzzlePanel .puzIntro{top:2%;max-width:94%;min-height:0;padding:5px}
}
@media (orientation:portrait) and (max-width:700px) and (max-height:730px){
  #puzzlePanel .puzzleBoard{width:min(100%,39dvh)}
  #puzzlePanel .puzDpad button{height:25px;width:48px}
  #puzzlePanel .puzzleAside{padding:3px 5px}
  #puzzlePanel .puzzleAside img{height:28px;width:28px}
  #puzzlePanel .puzzleAside .legend{font-size:8px}
}

/* v0.1.9: seamless, full-tile brick walls */
.puzzleBoard .tile.wall{
  background:#a65c52 url('assets/brick_wall.png') center/100% 100% no-repeat;
  border:0;border-radius:0;box-shadow:none;padding:0;
}
/* Smartphone rotation warning: controlled by JavaScript, not by CSS alone. */
.portraitWarning[hidden]{display:none!important}
.portraitWarning{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
 background:radial-gradient(circle at 50% 28%,#433456,#151025 72%);padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));color:#fff;text-align:center}
.portraitWarningInner{max-width:620px;width:100%;padding:14px 18px}
.portraitIcon{font-size:clamp(38px,9vh,66px);line-height:1.1;margin-bottom:6px}
.portraitWarning h2{color:#ffbdd9;font-size:clamp(18px,4.7vw,28px);margin:6px 0 12px}
.portraitWarning p{font-size:clamp(12px,2.6vw,17px);line-height:1.6;margin:8px auto}
.portraitWarning .portraitHint{color:#cfc7e3;font-size:clamp(10px,2vw,13px)}

#simPanel{position:relative;overflow:hidden}.deskMonitor span{max-width:220px}.simPopup{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(18,14,35,.34);backdrop-filter:blur(3px);z-index:6;pointer-events:none}.simPopupCard{width:min(92%,540px);background:linear-gradient(180deg,#fffafc 0%,#fff 100%);border:4px solid #ffc5da;border-radius:24px;box-shadow:0 20px 55px rgba(13,9,29,.35);padding:16px 16px 18px;text-align:center;transform:translateY(12px) scale(.96);opacity:0}.simPopup.show .simPopupCard{animation:simPopupIn .18s ease-out forwards}.simPopupBadge{display:inline-block;background:linear-gradient(135deg,#ff93ba,#f65e90);color:#fff;border-radius:999px;padding:6px 14px;font-size:11px;font-weight:1000;letter-spacing:1px;box-shadow:0 6px 15px rgba(237,69,126,.28)}.simPopup img{display:block;width:min(100%,420px);aspect-ratio:4/3;object-fit:cover;border-radius:18px;border:2px solid #f3d3e2;margin:12px auto 10px;box-shadow:0 10px 30px rgba(0,0,0,.14)}.simPopup h3{margin:0;color:#cb497f;font-size:25px;line-height:1.35}.simPopup p{margin:8px 0 0;font-size:13px;line-height:1.8;color:#5e536c;white-space:pre-line}@keyframes simPopupIn{0%{transform:translateY(12px) scale(.96);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}@media(max-width:700px){.simPopup{padding:10px}.simPopupCard{width:min(96%,94vw);padding:12px 12px 14px;border-radius:20px}.simPopup img{width:min(100%,310px);margin:10px auto 8px}.simPopup h3{font-size:19px}.simPopup p{font-size:12px;line-height:1.65}.deskMonitor span{max-width:160px}}