/* Portrait game surface; loaded after the original prototype styles. */
:root{--ink:#29475b;--blue:#73b8dc;--cream:#fff9e9;--outline:#52758b;--green:#7bbf49}
html{min-height:100%;background:#d9e7ee;overscroll-behavior-y:none}
body{margin:0;min-width:320px;min-height:100svh;background:radial-gradient(ellipse at 50% 20%,#f8fcfc,#d7e5ec 65%);color:var(--ink);font-family:Arial,sans-serif;-webkit-tap-highlight-color:transparent}
button{min-height:44px;touch-action:manipulation;user-select:none;-webkit-user-select:none;border:1px solid #ffffffce;border-radius:15px;background:linear-gradient(#fffef5,#f0e7d2);box-shadow:inset 0 2px 0 #fff,0 3px 0 #a8a58f,0 5px 8px #244b5a18;color:#34526a;font-weight:700}
button:hover{filter:brightness(1.03)}button:active{transform:translateY(2px);box-shadow:inset 0 1px 1px #0001,0 1px 0 #8b987a}button:disabled{filter:grayscale(.5);opacity:.43;transform:none}
button:focus-visible{outline:3px solid #ffce66;outline-offset:2px}
.app,.phone{position:relative;isolation:isolate;width:100%;max-width:430px;height:100dvh;min-height:640px;margin:0 auto;padding:0;overflow:hidden;background:linear-gradient(#85c5e5,#c0e2ee 48%,#e8e8d7);box-shadow:0 15px 70px #23475f35}
header,.mobile-topbar{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:74px;padding:calc(env(safe-area-inset-top,0px) + 15px) 12px 13px;background:linear-gradient(#d5f1ffec,#b7def7b8 75%,#c0e2ee00);border:0}
.logo{flex-shrink:0;font-size:16px;line-height:.95;max-width:105px;text-align:center;letter-spacing:.2px;transform:rotate(-4deg);color:#fff9e6;text-shadow:1.5px 1.5px #3b536e,-1.5px -1.5px #3b536e,1.5px -1.5px #3b536e,-1.5px 1.5px #3b536e,0 3px #3b536e}
.logo b{display:block;font-size:28px;letter-spacing:2px;color:#ffd08d}
.wallet{display:flex;flex:1;justify-content:flex-end;align-items:center;gap:6px;white-space:nowrap;direction:ltr}
.pill{display:flex;align-items:center;justify-content:center;gap:4px;min-height:31px;padding:4px 9px;font-size:13px;line-height:1;background:linear-gradient(#fffef2,#f4faf7);border:2px solid #faffff;border-radius:13px;box-shadow:0 2px 0 #77a4b6,0 4px 6px #456f8c20;color:#435b71;text-shadow:0 1px white}
.pill b{font-size:13px;min-width:16px;text-align:center}.pill.heart{color:#b05455}.pill.gem{color:#9d62ae}
.primary{min-height:48px;border:2px solid #f9ffe7;border-radius:17px;background:linear-gradient(#b4e879 0%,#8dca55 47%,#6eac3f 52%,#89c558 100%);box-shadow:inset 0 3px 0 #d9f7ab,0 4px 0 #4d8136,0 7px 10px #34572a30;color:white;font-size:18px;font-weight:800;text-shadow:0 2px 0 #4c8236}
#home{position:absolute;inset:0;z-index:1}.home-layout{position:absolute;inset:0;display:block;margin:0}
.scene{position:absolute;inset:0;border:0;border-radius:0;background-color:#a7d8e5;background-position:center center;background-size:cover;box-shadow:none;overflow:hidden}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(#78b7d900 45%,#26577c00 67%,#295f7c3d 100%);pointer-events:none}
.scene #town{display:none}.scene svg{min-height:0}
.scene-label{z-index:1;right:50%;bottom:108px;transform:translateX(50%);min-width:210px;padding:10px 19px;text-align:center;color:#fffdf0;border:2px solid #fff1c2b8;border-radius:18px;background:linear-gradient(#6f9b68ea,#477d5bec);box-shadow:inset 0 2px #c6dfa77a,0 4px 0 #355c4db3,0 8px 18px #264e4845;text-shadow:0 2px #355f4a;white-space:nowrap}
.scene-label b{font:700 28px Georgia,serif;letter-spacing:1px}.scene-label small{display:block;margin-top:3px;font-size:12px;letter-spacing:0}
.home-layout>.card{position:absolute;z-index:2;top:calc(env(safe-area-inset-top,0px) + 88px);left:12px;right:12px;display:grid;grid-template-columns:1fr 92px;gap:4px 9px;align-items:center;padding:10px 11px;border:3px solid #f8fff8;border-radius:20px;background:linear-gradient(#fdfbea,#f3f0dbeF);box-shadow:0 4px 0 #6f9aaf,0 7px 12px #2d526c35}
.home-layout>.card>.eyebrow,.home-layout>.card>h1,.home-layout>.card>#story,.home-layout>.card>.chapters,.home-layout>.card>.tag{display:none}
.task{grid-column:1;grid-row:1;border:0;padding:0;margin:0;min-width:0}.task small{font-size:10px;font-weight:700;color:#8c9e95}.task h2{margin:4px 0 0;font-size:16px;line-height:1.25;color:#3a5567}.task p{display:none}
#play{grid-column:2;grid-row:1;width:100%!important;min-height:45px;padding:8px 5px;font-size:15px;border-radius:15px}
#mapButton{position:fixed;visibility:hidden;width:1px;height:1px;min-height:0;padding:0;overflow:hidden}
#map{position:absolute;top:calc(100% + 10px);left:0;right:0;margin:0;padding:14px;background:#fff9e8f5;border:3px solid white;border-radius:20px;box-shadow:0 5px 15px #254d6b30}
.pin{margin:4px 0;padding:10px 14px;display:block;border:1px solid #b4cfb5;background:linear-gradient(#f0f5df,#dae9d3);font-size:13px}.pin+p,.pin~p{font-size:12px;margin:7px 0 0}
#dock{position:absolute;z-index:6;bottom:0;left:0;right:0;display:flex;direction:rtl;justify-content:space-around;align-items:center;gap:4px;min-height:78px;padding:9px 9px calc(env(safe-area-inset-bottom,0px) + 10px);background:linear-gradient(#fffdf2,#e9f0e8);border-top:3px solid #fff;box-shadow:0 -5px 12px #22547230;border-radius:23px 23px 0 0}
#dock button{display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:0;min-height:49px;padding:3px 2px;border:0;border-radius:14px;background:transparent;box-shadow:none;color:#8d9aa5;font-size:10px;font-weight:700;text-shadow:0 1px white}
#dock button span,#dock button i{display:block;font-size:24px;line-height:26px;font-style:normal;filter:drop-shadow(0 2px 0 #a1aeb780)}
#dock button.active,#dock button[aria-current="page"]{color:#3c7193;background:linear-gradient(#d7edec,#edf5e9);box-shadow:inset 0 1px white}
.app:has(#game:not([hidden])) #dock{display:none}.app>footer:not(#dock){display:none}
#game{position:absolute;inset:0;z-index:3;padding:calc(env(safe-area-inset-top,0px) + 81px) 13px calc(env(safe-area-inset-bottom,0px) + 14px);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;background:radial-gradient(ellipse at 50% 35%,#e0f1f3 0%,#a2d0e1 65%,#7daac7 100%)}
#game::-webkit-scrollbar{display:none}.game-top{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:7px;margin:0 0 9px;min-height:40px}
#back{min-width:44px;min-height:40px;height:40px;padding:5px;border:2px solid #edf7f8;border-radius:14px;font-size:0;background:linear-gradient(#f5fcfa,#d7e9e8);box-shadow:0 3px 0 #729bad}.game-top #back::before{content:"➜";font-size:22px}.game-top b{font-size:14px;text-align:center;color:#45677b;text-shadow:0 1px #f7fcf9}.game-top>span{font-size:10px;max-width:90px;line-height:1.2;text-align:left;color:#4b7990}
.play-layout{display:flex;flex-direction:column;gap:10px;margin:0}
.play-layout>div:first-child{width:100%;padding:0 7px}.board-shell{position:relative;margin:9px 0 0;padding:17px 13px 15px;border:3px solid #dba85d;border-radius:27px;background:linear-gradient(100deg,#ba7542,#edc47d 14%,#d69b55 30%,#ac6b3a 83%,#c58b4a);box-shadow:inset 0 3px 2px #ffe5a5,inset 0 -3px 0 #976238,0 7px 0 #6b4d39,0 11px 15px #324d5c35}
.board-shell.case::before{content:"";position:absolute;top:-13px;left:calc(50% - 32px);width:64px;height:14px;border:6px solid #6e5945;border-bottom:0;border-radius:12px 12px 0 0;box-shadow:inset 0 1px #edd29b}
.board-shell.case::after{content:"";position:absolute;bottom:8px;left:13%;right:13%;height:3px;background:#8d5f3f;border-radius:5px;opacity:.6}
#board{width:100%;border:3px solid #665749;border-radius:15px;background-color:#354b5c;background-image:repeating-linear-gradient(0deg,#ffffff03 0px,#ffffff03 2px,#13263505 2px,#13263505 4px);box-shadow:inset 0 3px 15px #13263270;overflow:hidden}
.cell{min-width:0;min-height:0;height:auto;border:0;border-radius:0;padding:0;box-shadow:none;background:radial-gradient(#9bb0b340 .8px,transparent 1.3px);touch-action:none}.cell:hover,.cell:focus-visible{background-color:#dde9db22}.cell:active{transform:none;box-shadow:none}
.board-shell.fridge{margin-top:0;padding:13px 12px;border:3px solid #d5e8e8;border-radius:25px;background:linear-gradient(95deg,#a5bac0,#eff7f5 22%,#dce7e6 77%,#8ea8b1);box-shadow:inset 0 2px white,0 6px 0 #718d9a,0 10px 15px #34526730}
.fridge #board{border:3px solid #a9c3cb;background:linear-gradient(#c9e0e2,#ebf4ed);box-shadow:inset 0 4px 12px #5c8a9e45}
.board-shell.shelf{background:linear-gradient(95deg,#97633d,#d2a56d 20%,#bb8958 75%,#805537);border-color:#dab17c}.shelf #board{background:repeating-linear-gradient(0deg,#a87d55 0%,#a87d55 23%,#c89c6d 24%,#7c5339 25%);border-color:#966840}
.object{padding:3px;filter:drop-shadow(0 3px 2px #0f233d55)}.object svg,.object img,.object .sprite{width:100%;height:100%;object-fit:contain;pointer-events:none}
.preview{background-color:#c5efaf55;border:2px dashed #d3f6af;border-radius:8px;opacity:.7}.preview.bad{background-color:#f593805a;border-color:#ffc2b2}
.play-layout>div:first-child>div:not(.board-shell){margin-top:12px!important;display:flex;gap:8px;align-items:center;direction:rtl;min-height:17px;padding:0 4px}
progress{display:block;flex:1;width:auto;height:8px;accent-color:#80b74d;border:0;border-radius:8px;overflow:hidden}progress::-webkit-progress-bar{background:#eaf2e4;border-radius:8px}progress::-webkit-progress-value{background:linear-gradient(#b2d873,#73ac43);border-radius:8px}#count{font-size:10px;white-space:nowrap;color:#50778a;text-shadow:0 1px #e6f2ed}
.play-layout>.card{display:flex;flex-direction:column;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}.play-layout .eyebrow{display:none}#levelTitle{margin:0 0 5px;text-align:center;font-size:23px;line-height:1.15;color:#355d76;text-shadow:0 2px #e9f7f1}
.tutorial{padding:8px 12px;border:2px solid #fdfbf0;border-radius:15px;background:linear-gradient(#fff8e7,#f3e8cd);box-shadow:0 2px 0 #a7afa1;color:#61736e;font-size:11px;line-height:1.4;text-align:center}
#tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:10px 0 9px;padding:9px 8px 11px;border:3px solid #f3deae;border-radius:20px;background:linear-gradient(#e4bc80,#c7985e);box-shadow:inset 0 2px 0 #fff0c6,0 4px 0 #92704c}
.item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:67px;padding:4px 3px 5px;border:2px solid #f4e2bf;border-radius:12px;background:linear-gradient(#fff7e4,#e8d1a8);box-shadow:inset 0 1px #fffffa,0 2px 0 #af8d61;font-size:10px;line-height:1.1;font-weight:700;white-space:nowrap;color:#6b6757;touch-action:none}
.item svg,.item img,.item .sprite{display:block;width:100%;height:40px;margin:0;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 1px #7b5d3e40)}.item small{display:none}.item.active{border-color:#f6ffe6;outline:2px solid #72a749;background:linear-gradient(#edf7d0,#cee6a1);box-shadow:inset 0 2px white,0 2px 0 #6d9a41}.item.placed{opacity:.46;filter:saturate(.65);background:#c1b796;box-shadow:inset 0 2px 3px #8e785840}
.actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:0 2px}.actions button{height:44px;min-height:44px;padding:5px 1px;border:2px solid #f3fcf6;border-radius:13px;background:linear-gradient(#f7fff9,#d8e7dc);box-shadow:inset 0 2px white,0 3px 0 #789d9d;font-size:11px;color:#52726f;line-height:1.1;white-space:nowrap}
#status{min-height:35px;margin:10px 1px 0;padding:7px 9px;border:1px solid #f3fbf4;border-radius:12px;background:#e6f1e3cc;color:#466e70;font-size:11px;line-height:1.45;text-align:center}.play-layout>.card>.muted{display:none}
#overlay{z-index:20;padding:20px;background:#244e6c9e;backdrop-filter:blur(7px)}.reward{width:100%;max-width:360px;padding:25px 21px;border:5px solid #fffceb;border-radius:31px;background:linear-gradient(#fef9e8,#f7e6bc);box-shadow:inset 0 3px white,0 8px 0 #a1a67e,0 20px 70px #173e5e70}.reward h1{font-size:29px;margin:10px 0}.reward h2{font-size:21px}.reward p{font-size:14px;line-height:1.5;color:#7d8170}.stars{font-size:43px;letter-spacing:3px;color:#ffc54b;text-shadow:0 3px #c18a35,0 5px 5px #dfaa6345}.reward svg,.reward img,.reward .sprite{width:135px;height:115px;object-fit:contain;margin:0 auto;display:block;filter:drop-shadow(0 5px 3px #a68a5a30)}.reward .primary{width:100%;margin-top:8px}
@media(min-width:600px){body{padding:18px 0}.app,.phone{height:min(900px,calc(100dvh - 36px));min-height:640px;border:6px solid #6d9dbb;border-radius:36px;box-shadow:inset 0 0 0 2px #d6f2ff,0 25px 75px #31546c45}#overlay{position:fixed}#mapButton{position:absolute}}
@media(max-height:780px) and (max-width:599px){header,.mobile-topbar{min-height:65px;padding-top:calc(env(safe-area-inset-top,0px) + 10px)}#game{padding-top:calc(env(safe-area-inset-top,0px) + 70px)}.game-top{min-height:34px;margin-bottom:5px}.game-top #back{height:35px;min-height:35px}.board-shell{padding:13px 10px 12px;margin-top:6px;border-radius:23px}.play-layout{gap:7px}#levelTitle{font-size:20px}.tutorial{font-size:10px;padding:6px 10px}#tray{gap:5px;margin:8px 0;padding:7px 6px 9px}.item{min-height:60px}.item svg,.item img,.item .sprite{height:34px}.actions button{font-size:10px}#status{margin-top:8px;font-size:10px}.home-layout>.card{top:calc(env(safe-area-inset-top,0px) + 78px)}}
@media(max-width:359px){.pill{padding:3px 6px;font-size:11px}.logo{font-size:14px}.logo b{font-size:25px}.wallet{gap:4px}#game{padding-left:9px;padding-right:9px}.task h2{font-size:14px}.item{font-size:9px}.actions{gap:4px}.actions button{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Atlas viewport clipping: neighboring sprites must never bleed. */
.object svg,.item svg,.reward svg,.collect-prop svg,.home-decor svg{overflow:hidden}

.logo{font-size:13px;width:88px;max-width:88px}.logo b{font-size:26px}

.fridge #board{background-image:linear-gradient(to bottom,transparent 48.5%,#94b2b8 49%,#eef9ef 50%,#b1cbd0 51%,transparent 52%),linear-gradient(#c9e0e2,#ebf4ed)}

/* New room family: reusable game surface, not an admin redesign. */
.board-shell.room{border-color:#f1e0bd;background:linear-gradient(135deg,#fbf0da,#d4bb93);padding:24px 14px 15px;border-radius:18px;box-shadow:inset -9px 8px #c1b194,0 8px 0 #9b8768,0 12px 18px #314e5c38}
.board-shell.room::before{content:'';position:absolute;top:6px;left:calc(50% - 32px);width:64px;height:16px;background:linear-gradient(90deg,#abd4dc 46%,#fff8e2 47%,#fff8e2 53%,#abd4dc 54%);border:3px solid #fff8e7;box-shadow:0 2px 0 #bba789}
.room #board{border:2px solid #a9906c;border-radius:6px;background-color:#d9b485;background-image:repeating-linear-gradient(0deg,transparent 0px,transparent 29px,#a67d4e40 30px,#f4d7a040 31px),repeating-linear-gradient(90deg,transparent 0px,transparent 64px,#bd955f40 65px,#e9c89c 66px);box-shadow:inset 5px 7px 12px #775d3430}
.room .cell{background:radial-gradient(#775b333b .7px,transparent 1.2px)}.room .object{filter:drop-shadow(0 3px 2px #71563255)}
.item .zone{display:block;font-size:8px;line-height:1.2;font-style:normal;padding:2px 4px;background:#dce9f0;border-radius:5px;color:#4c7189;white-space:nowrap}
#levelPicker{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:15px}#levelPicker label{font-size:13px;width:100%}#levelNumber{width:85px;padding:10px;border:1px solid #c5b591;border-radius:10px;font:inherit;background:#fffaf0;color:#35556b}#goLevel{font-size:14px;min-height:42px}#levelGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}#levelGrid button{padding:5px;min-height:42px;font-size:12px}

.room .cell.blocked,.cell.blocked{background:repeating-linear-gradient(135deg,#e9d7aa99 0px,#e9d7aa99 5px,#ba987466 5px,#ba987466 10px);box-shadow:inset 0 0 0 1px #e8d6b177}.room .cell.blocked::after{content:"·";color:#927a57;font-size:10px}