:root{
      --ink:#f4ead0;
      --gold:#efc56a;
      --blue:#79b9d6;
      --panel:#111827e8;
      --panel2:#1b2638f2;
      --line:#f0cf7a66;
      --shadow:#05070caa;
      --app-height:100dvh;
      --safe-top:max(8px,env(safe-area-inset-top));
      --safe-right:max(8px,env(safe-area-inset-right));
      --safe-bottom:max(10px,env(safe-area-inset-bottom));
      --safe-left:max(8px,env(safe-area-inset-left));
    }
    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    html{width:100%;height:100%;overflow:hidden;background:#080d17;-webkit-text-size-adjust:100%;text-size-adjust:100%}
    body{position:fixed;inset:0;width:100%;height:var(--app-height);margin:0;overflow:hidden;background:#080d17;color:var(--ink);font-family:Georgia,"Times New Roman",serif;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}
    button,a{font:inherit}
    button{touch-action:manipulation;appearance:none;-webkit-appearance:none}
    button:focus-visible,a:focus-visible{outline:2px solid #fff0a5;outline-offset:2px}
    #game-shell{position:fixed;inset:0;width:100vw;height:var(--app-height);display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#23395c 0,#0b1322 54%,#060910 100%);overflow:hidden}
    #game-frame{position:relative;width:min(100vw,calc(var(--app-height) * 16 / 9));height:min(var(--app-height),calc(100vw * 9 / 16));min-height:180px;overflow:hidden;background:#14233c;box-shadow:0 0 0 1px #fff2,0 18px 80px #000c;isolation:isolate;contain:layout paint size}
    #game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;outline:none;contain:strict}
    #grain{pointer-events:none;position:absolute;inset:0;z-index:3;opacity:.11;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
    .low-power #grain{display:none}

    #hud{position:absolute;z-index:5;top:var(--safe-top);left:var(--safe-left);right:var(--safe-right);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}
    .hud-card{pointer-events:auto;background:linear-gradient(180deg,#142239ed,#0d1628ed);border:1px solid var(--line);box-shadow:0 4px 0 #070b13a8,0 10px 28px #02040a70;padding:8px 10px;min-height:45px;display:flex;align-items:center;gap:9px;clip-path:polygon(5px 0,calc(100% - 4px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,4px 100%,0 calc(100% - 4px),0 5px)}
    .brand-mini{gap:8px}.crest{width:29px;height:29px;display:grid;place-items:center;border:1px solid #f2d78388;transform:rotate(45deg);background:#f0c65b10}.crest span{transform:rotate(-45deg);font-size:18px;color:var(--gold)}
    .brand-mini strong{display:block;font-size:13px;line-height:1}.brand-mini small{display:block;margin-top:4px;color:#c7d6df;font:9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;text-transform:uppercase}
    #resources{display:flex;gap:8px}.resource{min-width:59px;justify-content:center;gap:6px;padding-inline:8px}.resource-icon{width:18px;height:18px;display:grid;place-items:center;font-size:16px}.resource b{font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.resource small{display:none}
    #sound-btn,#reset-btn,#help-btn{border:0;color:var(--ink);cursor:pointer;min-width:44px;justify-content:center;font-size:18px;padding:0}

    #objective{position:absolute;z-index:5;left:50%;top:max(65px,calc(env(safe-area-inset-top) + 60px));transform:translateX(-50%);width:min(620px,calc(100% - 30px));text-align:center;pointer-events:none}
    #objective span{display:inline-block;max-width:100%;background:#07101dd9;border:1px solid #b5d3e33d;padding:6px 12px;box-shadow:0 3px 0 #02040a80;color:#e8f1f5;font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
    /* Sit on the ground strip — clear of Danny, boat, riverside props, and touch pads. */
    #prompt{position:absolute;z-index:6;left:50%;bottom:40%;max-width:calc(100% - 24px);transform:translate(-50%,14px);opacity:0;transition:opacity .16s,transform .16s;pointer-events:none;background:#111a2af2;border:1px solid #f0c96b99;color:#fff3cf;padding:8px 12px;box-shadow:0 4px 0 #05070dad;font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;white-space:normal}
    #prompt.show{opacity:1;transform:translate(-50%,0)}
    #toast{position:absolute;z-index:40;left:50%;top:20%;max-width:calc(100% - 24px);transform:translate(-50%,-10px);opacity:0;pointer-events:none;background:#171d2bf0;border:1px solid #f0cb73;color:#fff1c6;padding:10px 15px;box-shadow:0 5px 0 #05070c99;font:700 12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;transition:.22s;white-space:normal}
    #toast.show{opacity:1;transform:translate(-50%,0)}

    #touch-controls{position:absolute;z-index:8;inset:0;pointer-events:none;display:none;touch-action:none}
    .touch-cluster{position:absolute;bottom:var(--safe-bottom);display:flex;align-items:flex-end;gap:10px;pointer-events:auto;touch-action:none}
    .touch-cluster.left{left:var(--safe-left)}.touch-cluster.right{right:var(--safe-right)}
    .touch-btn{width:64px;height:64px;border:1px solid #efd17eb8;color:#fff4d1;background:linear-gradient(#1c2c46e8,#0e1728ee);box-shadow:0 5px 0 #04070dcc,0 8px 22px #0006;display:grid;place-items:center;font:700 25px/1 ui-monospace,SFMono-Regular,Menlo,monospace;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);touch-action:none;user-select:none;-webkit-user-select:none}
    .touch-btn:active,.touch-btn.active{transform:translateY(3px);box-shadow:0 2px 0 #04070dcc;background:#2d466d}
    #action-btn{width:78px;height:78px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#1b1510;background:linear-gradient(#f7dd8b,#d89c3d);border-color:#fff1a8;box-shadow:0 5px 0 #69451b,0 9px 24px #0007}
    #action-btn:active,#action-btn.active{background:#e5b04e}
    #rotate-note{display:none}

    .overlay{position:absolute;z-index:25;inset:0;display:grid;place-items:center;background:linear-gradient(#08101bd1,#050811e8);padding:16px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);touch-action:pan-y}
    .overlay.hidden{display:none}
    .title-card,.builder-card{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
    #game-tutorial{z-index:45;background:radial-gradient(circle at 50% 45%,#18324aa8,#030711df);padding:clamp(10px,3vw,24px)}
    .game-tutorial-card{position:relative;width:min(650px,96%);max-height:min(92%,760px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;background:linear-gradient(155deg,#1b3049fa,#0b1424fd 72%);border:1px solid #f2d27d9c;box-shadow:0 10px 0 #03060ba8,0 34px 100px #000e;padding:clamp(18px,4vw,34px);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
    .game-tutorial-card::before{content:"";position:absolute;inset:8px;border:1px solid #f2d27d24;pointer-events:none}.tutorial-progress{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#a9c4d2;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}.tutorial-dots{display:flex;gap:7px}.tutorial-dot{width:9px;height:9px;border:1px solid #d8e7e866;background:#08111f}.tutorial-dot.active{background:#f0c86c;border-color:#fff0a5;box-shadow:0 0 12px #f0c86c88}.tutorial-visual{width:92px;height:92px;margin:19px auto 10px;display:grid;place-items:center;font-size:50px;background:radial-gradient(circle,#294865,#111d31);border:1px solid #a9cad74f;box-shadow:inset 0 0 25px #07101c,0 6px 24px #0007;clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px)}.game-tutorial-card h2{margin:8px 0;text-align:center;color:#fff0bc;font-size:clamp(25px,5vw,38px);font-weight:400}.tutorial-copy{max-width:52ch;min-height:88px;margin:0 auto;color:#d5e2e7;text-align:center;font-size:15px;line-height:1.55}.tutorial-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0;padding:10px;background:#07101c99;border:1px solid #d5ebf026;color:#c4d5dd;font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.tutorial-controls b{display:block;color:#f0c66b;text-transform:uppercase;letter-spacing:.08em}.tutorial-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.tutorial-actions button{min-width:130px}.tutorial-skip{display:block;margin:14px auto 0;border:0;background:transparent;color:#afc2cb;cursor:pointer;text-decoration:underline;text-underline-offset:4px;font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.08em}
    .title-card{position:relative;width:min(690px,94%);max-height:94%;overflow:auto;text-align:center;padding:clamp(24px,5vw,50px) clamp(18px,5vw,52px);background:linear-gradient(180deg,#14233af4,#0b1425f6);border:1px solid #f2d27d80;box-shadow:0 10px 0 #05070ca8,0 30px 100px #000b;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px)}
    .title-card::before{content:"";position:absolute;inset:9px;border:1px solid #f2d27d2f;pointer-events:none}
    .title-kicker{margin:0;color:#9fb9ca;font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.24em;text-transform:uppercase}
    .title-card h1{margin:11px 0 4px;color:#fff0bd;font-size:clamp(33px,7vw,66px);line-height:.92;font-weight:400;text-shadow:0 4px 0 #6b4128,0 9px 18px #0008}
    .title-card h1 span{display:block;color:#e8ad51;font-size:.47em;letter-spacing:.12em;text-transform:uppercase;margin-top:10px}
    .title-card .lede{max-width:55ch;margin:17px auto 0;color:#d8e4e9;font-size:15px;line-height:1.55}
    .how{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0 20px;text-align:left}.how div{background:#07101c99;border:1px solid #d5ebf026;padding:11px}.how b{display:block;color:#f0c66b;font:700 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.08em}.how span{display:block;margin-top:6px;color:#c7d5dc;font-size:12px;line-height:1.35}
    .primary-btn,.secondary-btn{min-height:50px;border:1px solid #fff1a1;color:#25180e;background:linear-gradient(#f6dc87,#d99c3e);box-shadow:0 5px 0 #70461c;cursor:pointer;padding:11px 22px;font:700 13px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
    .primary-btn:active,.secondary-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #70461c}.secondary-btn{color:#e9f2f5;background:#19263a;border-color:#b8ced9;box-shadow:0 5px 0 #070b13}
    .title-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.back-link{display:inline-block;margin-top:18px;color:#b9ccd6;font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;text-underline-offset:4px;touch-action:manipulation}

    #builder-overlay{background:#050912df}.builder-card{width:min(800px,96%);max-height:93%;overflow:auto;background:linear-gradient(#1b2940f7,#0e1729fa);border:1px solid #efcd7880;box-shadow:0 10px 0 #03060b9e,0 35px 90px #000d;padding:18px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
    .builder-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:3px 4px 15px;border-bottom:1px solid #fff2}.builder-head p{margin:0;color:#a9bfcb;font:10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}.builder-head h2{margin:6px 0 0;color:#fff0bf;font-size:30px;font-weight:400}.close-btn{flex:0 0 46px;width:46px;height:46px;border:1px solid #fff4;color:#f4e7ca;background:#111a2b;cursor:pointer;font-size:22px;touch-action:manipulation}
    .builder-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:-18px;z-index:3;padding:10px 3px;background:#18263cf5;border-bottom:1px solid #fff2}.builder-filters{display:flex;gap:6px;flex-wrap:wrap}.filter-btn{min-height:34px;padding:6px 10px;border:1px solid #a9c1ce55;background:#101a2b;color:#cbd9df;cursor:pointer;font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}.filter-btn.active{background:#e8bd63;color:#20160d;border-color:#ffeda5}.build-progress{color:#f2cf78;white-space:nowrap;font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
    #build-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}.build-tier{grid-column:1/-1;color:#9fc0cf;border-bottom:1px solid #b9d0da2b;padding:8px 2px 4px;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}.build-item{display:grid;grid-template-columns:76px 1fr;gap:12px;min-height:112px;text-align:left;color:#e7eef1;background:#09111f99;border:1px solid #d9ecf01e;padding:11px;cursor:pointer;touch-action:manipulation}.build-item:hover:not(:disabled){border-color:#efc76f99;background:#101c30}.build-item:disabled{cursor:not-allowed;opacity:.48}.build-item.done{opacity:.78;border-color:#9ed3ae70;background:#0c211d99}.build-art{width:76px;height:76px;display:grid;place-items:center;background:#182439;border:1px solid #fff2;font-size:40px;image-rendering:pixelated}.build-copy strong{display:block;color:#f2cf78;font-size:17px;font-weight:400}.build-copy p{margin:4px 0 8px;color:#b7c8d0;font-size:12px;line-height:1.35}.cost{display:flex;gap:9px;flex-wrap:wrap;font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.cost span{padding:4px 6px;background:#0003;border:1px solid #fff2}.builder-foot{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:14px;padding:12px 4px 3px;color:#aec0c9;font-size:12px}.builder-foot b{color:#f2cf78}.complete-banner{display:none;margin-top:14px;text-align:center;padding:14px;border:1px solid #f1d17b80;background:#3b2b124d;color:#ffe9a6}.complete-banner.show{display:block}

    /* ---------- photography and market ---------- */
    #camera-btn{width:68px;height:68px;font-size:24px}
    .feature-card{width:min(760px,96%);max-height:93%;overflow:auto;background:linear-gradient(#1b2940f8,#0e1729fb);border:1px solid #efcd7880;box-shadow:0 10px 0 #03060b9e,0 35px 90px #000d;padding:18px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
    .feature-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:3px 4px 15px;border-bottom:1px solid #fff2}.feature-head p{margin:0;color:#a9bfcb;font:10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}.feature-head h2{margin:6px 0 0;color:#fff0bf;font-size:30px;font-weight:400}
    #market-list{display:grid;gap:8px;margin:14px 0}.photo-sale{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:11px;background:#09111f99;border:1px solid #d9ecf01e}.photo-sale strong{display:block;color:#f2cf78;font-size:15px;font-weight:400}.photo-sale small{color:#a9bfcb;font:10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}.photo-sale button,.market-actions button{min-height:42px}
    .market-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:14px;border-top:1px solid #fff2}.market-actions button:disabled{cursor:not-allowed;opacity:.45;filter:grayscale(.6)}.market-note{color:#b8cbd4;font-size:12px;line-height:1.45;margin:12px 0}.empty-note{padding:24px;text-align:center;color:#9fb3bf;border:1px dashed #fff3;font-size:13px}
    .component-shop{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}.component-group{background:#08111eaa;border:1px solid #d9ecf01e;padding:10px}.component-group h3{margin:0 0 8px;color:#f2cf78;font-size:16px;font-weight:400}.component-group small{display:block;min-height:30px;color:#9fb3bf;font:9px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace}.component-list{display:grid;gap:6px;margin-top:9px}.component-part{width:100%;min-height:42px;border:1px solid #b8ced955;background:#18263a;color:#e9f2f5;cursor:pointer;padding:7px;text-align:left;font:700 9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}.component-part b{display:block;color:#ffe18a;font-size:10px}.component-part:disabled{cursor:not-allowed;opacity:.55}.component-part.owned{border-color:#86c79c66;background:#0d2722;color:#a7dcb8}

    /* ---------- Willie tool assembly and Queen Phil ---------- */
    #willie-overlay{z-index:35;background:radial-gradient(circle at 50% 42%,#4b3729d9,#05080ef4 74%)}.willie-card{width:min(780px,96%);max-height:95%;overflow:auto;background:linear-gradient(180deg,#38291efa,#111a28fc);border:1px solid #e0b86c99;box-shadow:0 10px 0 #03060899,0 30px 90px #000d;padding:18px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
    .tool-select{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}.tool-select button{min-height:42px}.tool-select button:disabled{opacity:.45}.puzzle-status{min-height:38px;padding:9px;text-align:center;color:#dce9e9;font:700 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.puzzle-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-height:132px;padding:15px;background:#07101cbb;border:1px solid #efd17e4a}.puzzle-slot{min-height:100px;border:2px dashed #c9d9dc4f;background:#111d2c;color:#8fa5af;cursor:pointer;display:grid;place-items:center;padding:9px;text-align:center;font:700 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}.puzzle-slot.filled{border-style:solid;border-color:#8bd0a0;background:#143127;color:#c8efd4}.puzzle-slot.wrong{animation:puzzle-wrong .25s linear}.puzzle-tray{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:14px 0}.puzzle-piece{min-width:140px;min-height:62px;border:2px solid #d5b569;background:linear-gradient(#6d4d2f,#3d2b20);color:#fff0c4;cursor:pointer;padding:8px;font:700 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;clip-path:polygon(9px 0,calc(50% - 8px) 0,50% 8px,calc(50% + 8px) 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)}.puzzle-piece.selected{border-color:#fff0a5;box-shadow:0 0 18px #efc56a99;transform:translateY(-3px)}.puzzle-piece.placed{opacity:.28;pointer-events:none}.willie-help{margin:8px auto 0;max-width:64ch;text-align:center;color:#b9c9ce;font-size:11px;line-height:1.45}@keyframes puzzle-wrong{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
    #phil-overlay{z-index:35}.phil-tip{margin:16px 0;padding:18px;background:#07101c99;border-left:4px solid #efc56a;color:#dce9e9;font-size:15px;line-height:1.55}.phil-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.phil-juice{margin:12px 0;padding:12px;border:1px solid #a87bc766;background:#271a36aa;text-align:center;color:#dfd1e8;font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}.phil-juice strong{display:block;margin-bottom:4px;color:#e9c8ff;font-size:13px}.phil-juice.ready{border-color:#e8bd6f;background:#3a2820aa}.phil-juice.done{border-color:#87c89d;background:#102b24aa;animation:juice-glow .8s ease-out}.phil-actions button:disabled{cursor:not-allowed;opacity:.45}@keyframes juice-glow{35%{box-shadow:0 0 32px #cf86e899;transform:scale(1.015)}}
    #good-witch-overlay{z-index:38;background:radial-gradient(circle at 50% 44%,#413066c9,#050812ef 74%)}
    .witch-card{position:relative;width:min(590px,94%);max-height:92%;overflow:auto;text-align:center;background:linear-gradient(155deg,#342450fa,#11182cfd 72%);border:1px solid #dfbdff9c;box-shadow:0 10px 0 #03060ba8,0 32px 90px #000d;padding:22px;clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px)}
    .witch-card .close-btn{position:absolute;right:14px;top:14px}.witch-kicker{margin:2px 52px 5px;color:#d6b5ee;font:700 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}.witch-card h2{margin:8px 0 13px;color:#fff0bd;font-size:clamp(26px,5vw,38px);font-weight:400}.witch-portrait{width:92px;height:92px;margin:4px auto 13px;display:grid;place-items:center;color:#f2d985;background:radial-gradient(circle,#5a3d75,#19172c 68%);border:1px solid #e4c7ff66;box-shadow:inset 0 0 26px #080914,0 0 24px #c589e333;font-size:48px}.witch-message{margin:0 auto 18px;max-width:46ch;min-height:64px;color:#e7deec;font-size:17px;line-height:1.55}.witch-card .primary-btn{min-width:190px}
    #photo-overlay{z-index:30;background:#02050aee;padding:0}.camera-rig{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(#567d96,#c6a879 62%,#334e35 63%);cursor:crosshair}.camera-rig::after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 clamp(15px,4vw,46px) #090d13,inset 0 0 90px 35px #000b}
    .viewfinder-grid{pointer-events:none;position:absolute;inset:8%;z-index:2;background:linear-gradient(90deg,transparent 33%,#fff2 33%,#fff2 calc(33% + 1px),transparent calc(33% + 1px),transparent 66%,#fff2 66%,#fff2 calc(66% + 1px),transparent calc(66% + 1px)),linear-gradient(transparent 33%,#fff2 33%,#fff2 calc(33% + 1px),transparent calc(33% + 1px),transparent 66%,#fff2 66%,#fff2 calc(66% + 1px),transparent calc(66% + 1px))}
    #focus-square{position:absolute;z-index:3;left:50%;top:45%;width:min(24vw,190px);height:min(24vw,190px);transform:translate(-50%,-50%);border:3px solid #ffe57d;box-shadow:0 0 0 1px #0008,0 0 18px #f7d85c66}
    #photo-bird{position:absolute;z-index:4;width:clamp(92px,14vw,150px);height:clamp(66px,10vw,108px);display:grid;place-items:center;filter:drop-shadow(0 5px 3px #0008);will-change:transform;image-rendering:pixelated}#photo-bird svg{display:block;width:100%;height:100%;overflow:visible;shape-rendering:crispEdges}.camera-top{position:absolute;z-index:6;top:calc(var(--safe-top) + 10px);left:50%;transform:translateX(-50%);text-align:center;color:#fff5cf;text-shadow:0 2px 3px #000;font:700 12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}.camera-top small{display:block;color:#d7e4e8;font-size:10px;margin-top:4px}
    .camera-controls{position:absolute;z-index:7;left:0;right:0;bottom:calc(var(--safe-bottom) + 18px);display:flex;justify-content:center;align-items:center;gap:18px}.shutter{width:78px;height:78px;border-radius:50%;border:8px solid #e5e7e9;background:#ef4444;box-shadow:0 0 0 3px #222,0 5px 22px #000b;cursor:pointer}.shutter:active{transform:scale(.92)}.camera-close{width:52px;height:52px;border-radius:50%;border:1px solid #fff8;color:#fff;background:#111b;cursor:pointer;font-size:23px}.camera-tip{position:absolute;z-index:6;bottom:calc(var(--safe-bottom) + 106px);left:50%;transform:translateX(-50%);white-space:nowrap;color:#fff;background:#06101dcc;border:1px solid #fff3;padding:6px 10px;font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
    .resource.coin .resource-icon{color:#ffd45f}.resource.berries .resource-icon{color:#6f2b86;text-shadow:1px 0 #b982c9,-1px 0 #30103d}.resource.photos .resource-icon{font-size:14px}

    /* ---------- fishing ---------- */
    #fishing-overlay{z-index:34;background:radial-gradient(circle at 50% 38%,#174b63e8,#040a12f5 72%);touch-action:none}
    .fishing-card{width:min(720px,96%);max-height:95%;overflow:auto;background:linear-gradient(180deg,#183c52fa,#0b1b2cfc);border:1px solid #8fd6d099;box-shadow:0 10px 0 #02070b99,0 30px 90px #000d;padding:18px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);touch-action:none}
    .fish-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.fish-head p{margin:0;color:#9fd4da;font:10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}.fish-head h2{margin:5px 0 0;color:#fff0bd;font-size:28px;font-weight:400}.fish-status{margin:12px 0 10px;min-height:38px;text-align:center;color:#eaf8f4;font:700 12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
    .fish-water{position:relative;height:250px;overflow:hidden;border:1px solid #9edfe34f;background:linear-gradient(#327891 0,#1e6079 26%,#10445f 27%,#092d49 100%);box-shadow:inset 0 0 38px #001b2ca8;cursor:pointer;touch-action:none}
    .fish-water::before{content:"";position:absolute;inset:0;opacity:.28;background:repeating-linear-gradient(0deg,transparent 0 19px,#8bd2dc 20px 21px),linear-gradient(90deg,transparent,#b8f4eb26,transparent)}
    .fish-depth{position:absolute;left:22px;right:22px;top:38px;bottom:18px;border-left:2px solid #d5eff077}
    #fish-target{position:absolute;left:-13px;width:26px;height:64px;border:2px solid #ffe583;background:#f3cf5744;box-shadow:0 0 16px #f7df6e88;transform:translateY(-50%)}
    #fish-sprite{position:absolute;left:46%;width:92px;height:48px;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 2px #0018);image-rendering:pixelated}
    #fish-sprite svg{width:100%;height:100%;shape-rendering:crispEdges}
    .fish-line{position:absolute;left:33px;top:0;width:2px;background:#edf6dcaa;transform-origin:top;height:50%}.fish-hook{position:absolute;left:27px;width:13px;height:14px;border:2px solid #e5dfc6;border-top:0;border-left:0;border-radius:0 0 8px 0;transform:translateY(-50%)}
    .fish-bars{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px}.meter-wrap{background:#061322aa;border:1px solid #cce9e52b;padding:8px}.meter-label{display:flex;justify-content:space-between;color:#b9d8da;font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.1em}.meter{height:13px;margin-top:6px;background:#020912;border:1px solid #fff2;overflow:hidden}.meter>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#d8993d,#ffe37d);transition:width .08s linear}.meter.catch>i{background:linear-gradient(90deg,#4aa889,#9de4ad)}
    .fish-controls{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:13px;flex-wrap:wrap}.fish-control{min-width:210px;min-height:56px}.fish-control.active{transform:translateY(3px);box-shadow:0 2px 0 #70461c;background:#ffe397}.fish-controls .hidden{display:none}.fish-help{margin:12px auto 0;max-width:62ch;text-align:center;color:#b8d0d5;font-size:12px;line-height:1.4}.fish-result{color:#ffe68e}.fish-perfect{color:#a7f0ba;text-shadow:0 0 12px #5fcf8d}.tutorial-card{position:absolute;z-index:5;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(520px,90%);padding:22px;background:#0b1a28f7;border:2px solid #f3cf70;box-shadow:0 18px 70px #000d;text-align:left}.tutorial-card.hidden{display:none}.tutorial-card h3{margin:0 0 10px;color:#ffe6a0;font-size:25px}.tutorial-card ol{margin:0 0 14px;padding-left:22px;color:#d9e9e8;font-size:13px;line-height:1.55}.tutorial-card p{color:#aacecf;font-size:12px;line-height:1.45}.fish-instructions{min-height:38px;padding:7px 12px;font-size:10px}

    /* ---------- winning Juno's trust ---------- */
    #juno-overlay{z-index:36;background:radial-gradient(circle at 50% 45%,#3b4028e8,#070b10f6 74%);touch-action:none}
    .juno-card{width:min(720px,96%);max-height:95%;overflow:auto;background:linear-gradient(180deg,#2e3427fa,#111b22fc);border:1px solid #e3bd6a99;box-shadow:0 10px 0 #03060899,0 30px 90px #000d;padding:18px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);touch-action:none}
    .juno-status{margin:10px 0;min-height:36px;text-align:center;color:#eef3df;font:700 12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
    .trust-field{position:relative;height:250px;overflow:hidden;border:1px solid #e7cf884f;background:linear-gradient(#7e9388 0,#aab49a 55%,#536345 56%,#273928 100%);box-shadow:inset 0 0 42px #101c18a0;cursor:pointer;touch-action:none}
    .trust-field::before{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;opacity:.35;background:repeating-linear-gradient(90deg,transparent 0 29px,#b8c57e22 30px 32px),repeating-linear-gradient(0deg,transparent 0 17px,#21351e66 18px 20px)}
    #trust-zone{position:absolute;bottom:24px;width:92px;height:52px;border:3px solid #ffe37f;background:#f7d85a2e;box-shadow:0 0 20px #ffe47b88;transform:translateX(-50%);transition:width .2s}
    #cereal-aim{position:absolute;bottom:14px;width:7px;height:72px;background:#fff3bd;box-shadow:0 0 10px #fff3bd;transform:translateX(-50%)}
    #cereal-aim::after{content:"✦";position:absolute;left:50%;top:-16px;transform:translateX(-50%);color:#ffe179;font-size:16px}
    #cereal-piece{position:absolute;left:50%;top:34px;width:13px;height:9px;border:2px solid #8c5b26;border-radius:50%;background:#e2ad51;opacity:0}
    #cereal-piece.toss{animation:cereal-toss .42s ease-in forwards}
    @keyframes cereal-toss{0%{opacity:1;transform:translate(-50%,0) scale(1)}65%{opacity:1;transform:translate(var(--toss-x),115px) scale(.8)}100%{opacity:0;transform:translate(var(--toss-x),184px) scale(.55)}}
    .juno-mini{position:absolute;right:7%;bottom:33px;width:88px;height:65px;transition:right .35s ease;filter:drop-shadow(0 4px 2px #0007)}
    .juno-mini .body{position:absolute;left:8px;bottom:7px;width:48px;height:25px;background:#11171a;border:4px solid #252d30}.juno-mini .head{position:absolute;right:2px;bottom:14px;width:31px;height:31px;border-radius:45% 48% 42% 50%;background:#11171a;border:4px solid #252d30}.juno-mini .ear{position:absolute;right:3px;bottom:37px;border-left:9px solid transparent;border-right:3px solid transparent;border-bottom:22px solid #090d0f;transform:rotate(16deg)}.juno-mini .collar{position:absolute;right:3px;bottom:15px;width:31px;height:6px;background:#d62f35}.juno-mini .eye{position:absolute;right:9px;bottom:34px;width:4px;height:4px;background:#e6bc68}.juno-mini .legs{position:absolute;left:14px;bottom:0;width:9px;height:17px;background:#0b1012;box-shadow:29px 0 #0b1012}
    .trust-meter{height:18px;margin:10px 0;background:#050b0f;border:1px solid #fff3;overflow:hidden}.trust-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#c9823b,#ffe171,#8ed49c);transition:width .3s}
    .juno-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.juno-actions .primary-btn{min-width:230px}.juno-help{margin:10px auto 0;max-width:60ch;text-align:center;color:#bcc9c0;font-size:12px;line-height:1.4}.juno-success{color:#a7f0ba;text-shadow:0 0 12px #5fcf8d}

    @media (pointer:coarse),(max-width:900px){
      #game-frame{width:100vw;height:var(--app-height);min-height:0;box-shadow:none}
      #touch-controls{display:block}
      #grain{opacity:.055}
      .keyboard-only{display:none}
      /* Ground strip, but never under the ◀▶ / ACT cluster. */
      #prompt{bottom:max(38%, calc(var(--safe-bottom) + 168px));font-size:10px;padding:7px 10px;max-width:calc(100% - 20px)}
    }
    @media (max-width:700px){
      #hud{gap:4px}.hud-card{padding:5px 6px;min-height:38px;box-shadow:0 3px 0 #070b13a8}.brand-mini{display:none}#resources{width:100%;justify-content:center;gap:4px}.resource{min-width:48px;flex:0 1 58px}.resource-icon{font-size:14px;width:14px}.resource b{font-size:12px}#sound-btn,#reset-btn,#help-btn{min-width:38px;flex:0 0 38px;font-size:16px}
      #objective{top:calc(var(--safe-top) + 43px);width:calc(100% - 18px)}#objective span{font-size:9px;line-height:1.3;padding:5px 8px}
      #toast{top:calc(var(--safe-top) + 86px);font-size:11px;padding:8px 11px}
      .touch-cluster{gap:8px}.touch-btn{width:66px;height:66px}#action-btn{width:80px;height:80px}
      .overlay{padding:0;align-items:stretch}
      .title-card{width:100%;height:100%;max-height:none;padding:calc(var(--safe-top) + 20px) 18px calc(var(--safe-bottom) + 22px);border:0;box-shadow:none;clip-path:none;border-radius:0;display:flex;flex-direction:column;justify-content:flex-start}
      .title-card::before{inset:8px}.title-kicker{font-size:9px;letter-spacing:.15em}.title-card h1{font-size:clamp(34px,11vw,50px);margin-top:10px}.title-card h1 span{font-size:.39em;line-height:1.2}.title-card .lede{font-size:13px;line-height:1.4;margin-top:12px}.how{grid-template-columns:1fr;gap:6px;margin:14px 0}.how div{padding:7px 9px}.how b{font-size:10px}.how span{font-size:11px;margin-top:3px}.title-actions{display:grid;grid-template-columns:1fr;gap:9px}.primary-btn,.secondary-btn{width:100%;min-height:52px}.back-link{margin-top:14px;padding:8px}
      #builder-overlay{align-items:stretch}.builder-card{width:100%;height:100%;max-height:none;padding:calc(var(--safe-top) + 10px) 12px calc(var(--safe-bottom) + 12px);border:0;box-shadow:none;clip-path:none;border-radius:0}.builder-head{position:sticky;top:0;z-index:4;background:#18263cf5;padding:10px 2px 12px;margin:-10px 0 0}.builder-tools{top:59px}.builder-head h2{font-size:23px;line-height:1.05}.builder-head p{font-size:9px}.close-btn{width:48px;height:48px;flex-basis:48px}#build-grid{grid-template-columns:1fr;gap:8px}.build-item{grid-template-columns:58px 1fr;min-height:98px;padding:10px;gap:10px}.build-art{width:58px;height:58px;font-size:31px}.build-copy strong{font-size:16px}.build-copy p{font-size:11px}.cost{font-size:10px;gap:5px}.builder-foot{align-items:flex-start;flex-direction:column;font-size:11px}
      #market-overlay,#willie-overlay,#phil-overlay,#good-witch-overlay{align-items:stretch}.feature-card,.willie-card{width:100%;height:100%;max-height:none;padding:calc(var(--safe-top) + 10px) 12px calc(var(--safe-bottom) + 12px);border:0;box-shadow:none;clip-path:none}.witch-card{width:100%;height:100%;max-height:none;border:0;clip-path:none;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--safe-top) + 54px) 20px calc(var(--safe-bottom) + 24px)}.feature-head h2{font-size:23px}.photo-sale{padding:9px}.camera-tip{font-size:9px}.component-shop{grid-template-columns:1fr}.component-group small{min-height:0}.puzzle-board{gap:5px;padding:8px}.puzzle-slot{min-height:82px}.puzzle-piece{min-width:105px}
      #fishing-overlay{align-items:stretch}.fishing-card{width:100%;height:100%;max-height:none;padding:calc(var(--safe-top) + 10px) 12px calc(var(--safe-bottom) + 12px);border:0;clip-path:none;display:flex;flex-direction:column}.fish-water{height:auto;min-height:220px;flex:1}.fish-head h2{font-size:23px}.fish-bars{gap:6px}.fish-control{width:min(300px,72%);min-width:0}.fish-help{font-size:11px}
      #juno-overlay{align-items:stretch}.juno-card{width:100%;height:100%;max-height:none;padding:calc(var(--safe-top) + 10px) 12px calc(var(--safe-bottom) + 12px);border:0;clip-path:none;display:flex;flex-direction:column}.trust-field{height:auto;min-height:220px;flex:1}.juno-actions .primary-btn{width:min(310px,74%);min-width:0}.juno-help{font-size:11px}
      #game-tutorial{align-items:stretch;padding:0}.game-tutorial-card{width:100%;height:100%;max-height:none;padding:calc(var(--safe-top) + 18px) 18px calc(var(--safe-bottom) + 18px);border:0;clip-path:none;display:flex;flex-direction:column;justify-content:center}.tutorial-copy{min-height:0}.tutorial-actions{display:grid;grid-template-columns:1fr 1fr}.tutorial-actions .primary-btn:last-child{grid-column:1/-1}
    }
    @media (max-width:390px){
      .touch-btn{width:60px;height:60px}#action-btn{width:74px;height:74px}.touch-cluster{gap:6px}.resource{min-width:43px;padding-inline:4px}#sound-btn,#reset-btn,#help-btn{min-width:34px;flex-basis:34px}.title-card{padding-inline:14px}.how span{display:none}.how div{padding:6px 8px}.title-card .lede{font-size:12px}
    }
    @media (max-height:500px) and (orientation:landscape){
      #hud{top:max(4px,env(safe-area-inset-top));left:max(5px,env(safe-area-inset-left));right:max(5px,env(safe-area-inset-right))}.hud-card{min-height:34px;padding:4px 6px}.brand-mini{display:none}.resource{min-width:44px}.resource-icon{font-size:13px}.resource b{font-size:11px}#sound-btn,#reset-btn,#help-btn{min-width:33px;font-size:14px}
      #objective{top:42px;width:min(560px,calc(100% - 230px))}#objective span{font-size:8px;padding:4px 7px}
      .touch-btn{width:56px;height:56px;font-size:21px}#action-btn{width:68px;height:68px;font-size:11px}#camera-btn{width:58px;height:58px;font-size:19px}.touch-cluster{gap:7px}
      #prompt{bottom:max(34%, calc(var(--safe-bottom) + 120px));font-size:9px;padding:5px 8px}
      .title-card{width:min(760px,96%);height:auto;max-height:96%;display:block;padding:16px 22px}.title-card h1{font-size:34px;margin:5px 0}.title-card h1 span{margin-top:5px}.title-card .lede{font-size:11px;margin-top:7px}.how{grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}.how div{padding:6px}.how span{font-size:9px}.primary-btn,.secondary-btn{min-height:42px;padding:8px 14px;font-size:11px}.back-link{margin-top:8px}
      .builder-card{width:min(860px,98%);height:100%;max-height:none;padding:8px 12px}.builder-head{padding:4px 0 8px}.builder-head h2{font-size:20px}.close-btn{width:42px;height:42px;flex-basis:42px}#build-grid{grid-template-columns:repeat(2,1fr);gap:7px;margin-top:8px}.build-item{grid-template-columns:45px 1fr;min-height:78px;padding:7px;gap:7px}.build-art{width:45px;height:45px;font-size:25px}.build-copy strong{font-size:14px}.build-copy p{display:none}.cost{font-size:9px}.builder-foot{display:none}
      .fishing-card{width:min(760px,98%);height:100%;max-height:none;padding:7px 12px}.fish-head h2{font-size:20px}.fish-status{margin:5px 0;min-height:27px;font-size:10px}.fish-water{height:auto;min-height:150px;flex:1}.fish-bars{margin-top:6px}.fish-controls{margin-top:6px}.fish-control{min-height:43px}.fish-help{margin-top:6px;font-size:10px}
      .juno-card{width:min(760px,98%);height:100%;max-height:none;padding:7px 12px}.juno-status{margin:4px 0;min-height:24px;font-size:10px}.trust-field{height:auto;min-height:145px;flex:1}.juno-help{margin-top:5px;font-size:10px}.juno-actions .primary-btn{min-height:42px}
      .game-tutorial-card{width:min(780px,98%);height:100%;max-height:none;padding:8px 24px;display:block}.tutorial-visual{width:58px;height:58px;margin:4px auto;font-size:32px}.game-tutorial-card h2{font-size:22px;margin:3px 0}.tutorial-copy{font-size:12px;line-height:1.35;min-height:0}.tutorial-controls{margin:7px 0;padding:6px}.tutorial-actions button{min-height:40px}.tutorial-skip{margin-top:8px}
    }
    @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}