:root {
  --ink:#50377d; --muted:#7e6c9a; --line:#ded0ef; --paper:#f7f1ff;
  --white:#fffdfd; --green:#359a85; --accent:#f66c9c; --accent-dark:#bb458b;
  --frame:#b48af0; --frame-dark:#7044ac; --gold:#ffcd42;
  --play-width:clamp(350px,calc((100dvh - 220px)*.7586),440px);
}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;color:var(--ink);font-family:'Malgun Gothic',system-ui,sans-serif;background:#b4edff url('assets/arcade-world.webp') center center/cover fixed no-repeat}
body:before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#cef7ff22,#edffff3b 35%,#edffff3b 65%,#cef7ff22);z-index:-1}
body[data-theme=forest]{--accent:#48cda2;--accent-dark:#218775;--frame:#75d7a8;--frame-dark:#398c80}
body[data-theme=ocean]{--accent:#60b4f4;--accent-dark:#497dc5;--frame:#7bbef5;--frame-dark:#4a6eb9}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;transition:transform .16s,filter .16s;touch-action:manipulation}
button:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-2px)}
button:active:not(:disabled){transform:translateY(2px)}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #f06aac;outline-offset:5px}
[hidden]{display:none!important}
header{max-width:850px;min-height:64px;padding:12px 20px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:3px;color:#61449a;text-decoration:none;font-weight:900;font-size:19px;letter-spacing:-1px;text-shadow:0 2px white;white-space:nowrap}
.brand-mark{font-size:26px;color:#ffa52f;filter:drop-shadow(0 1px white)}
.brand small{font-size:9px;font-weight:700;letter-spacing:0;display:block;margin-left:8px;color:#6e70a4}
nav{display:flex;align-items:center;gap:9px}
nav button{background:linear-gradient(#fff,#f4eaff);border:2px solid #9f7bc6;border-radius:16px;box-shadow:inset 0 2px white,0 3px #9d78bd;padding:9px 12px;font-size:11px;font-weight:800;white-space:nowrap}
nav button b{background:#e6d8ff;border-radius:8px;padding:2px 5px;font-size:10px;color:#764eb0;margin-left:4px}
.wallet{display:flex;align-items:center;gap:5px;white-space:nowrap;color:#8a541d;border:2px solid #e9ab38;background:linear-gradient(#fff69d,#ffcf51);border-radius:18px;padding:9px 13px;font-size:13px;box-shadow:inset 0 2px #fffccb,0 3px #ce9134;font-variant-numeric:tabular-nums}
.wallet small{font-size:9px}
main{max-width:810px;margin:6px auto 0;padding:0 20px}
.market-layout{display:grid;grid-template-columns:minmax(0,var(--play-width)) minmax(0,300px);justify-content:center;align-items:start;gap:28px}
.play{min-width:0;position:relative}
.scorebar{display:flex;align-items:center;gap:9px;min-height:57px;padding:0 4px 8px}
.scorebar>div{background:linear-gradient(#fff,#f9f0ff);border:2px solid #a786cc;border-radius:17px;min-width:90px;padding:5px 12px 3px;box-shadow:0 3px #a789c8,inset 0 2px white;text-align:center}
.scorebar>div:nth-child(2){background:linear-gradient(#fff8b8,#ffe895);border-color:#dcb354;box-shadow:0 3px #cca14a,inset 0 2px white;min-width:87px}
.scorebar span{display:block;font-size:9px;font-weight:800;color:#8b6ea7}
.scorebar>div:nth-child(2) span{color:#a17c35}
.scorebar strong{font-size:24px;line-height:1.2;display:block;font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:-1px}
.scorebar button{border:2px solid #9475be;border-radius:50%;background:linear-gradient(#fff,#e6dbff);box-shadow:inset 0 2px white,0 3px #8b6aae;width:32px;height:32px;padding:0;flex-shrink:0;font-weight:800;font-size:13px}
.scorebar button:first-of-type{margin-left:auto}
.scorebar #sound{width:51px;border-radius:15px;font-size:10px}
.nextbar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#e9d8ff,#ceb3f1);border:3px solid #9d75c9;border-bottom:0;border-radius:22px 22px 0 0;margin:6px 12px -3px;padding:0 9px;min-height:40px;box-shadow:inset 0 2px #f8eeff}
.fruit-preview{display:flex;align-items:center;gap:3px;min-width:0}
.fruit-preview canvas{width:34px;height:34px;flex-shrink:0;filter:drop-shadow(0 2px #9678ac44)}
.fruit-preview span{font-size:9px;font-weight:800;white-space:nowrap}
.fruit-preview:last-child span{color:#70548d}
.board{position:relative;border:12px solid var(--frame);border-radius:25px;background:radial-gradient(circle at 50% 30%,#fffdf8 0,#f6f7ff 55%,#e7eaff 100%);box-shadow:0 0 0 3px var(--frame-dark),0 7px 0 var(--frame-dark),0 10px 0 #ffffffa6,0 16px 24px #5c4ba32b,inset 0 0 0 3px #c4c4eb;overflow:hidden}
.board:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:12px;box-shadow:inset 4px 0 #ffffff80,inset -4px 0 #9175be20,inset 0 4px #a9a6d622}
.board:after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#baa8e41c 1.4px,transparent 1.4px);background-size:22px 22px}
#game{display:block;width:100%;height:auto;touch-action:none;position:relative;z-index:1}
.hint{position:absolute;top:42%;width:100%;padding:0 8px;text-align:center;color:#9a83b6;pointer-events:none;z-index:1}
.hint:before{content:'✦';display:block;font-size:34px;color:#ddc7f4;margin-bottom:8px;text-shadow:0 2px white}
.hint b{display:block;font-size:19px;font-weight:900;letter-spacing:-1px}
.hint span{display:block;font-size:10px;margin-top:9px;color:#a08db5}
.tools{display:flex;gap:9px;margin-top:17px}
.tools button{border:2px solid #8d6eb3;background:linear-gradient(#fff,#e5d5ff);border-radius:16px;box-shadow:inset 0 3px white,0 4px #8860b0;padding:11px 8px;font-size:11px;font-weight:800;flex:1;white-space:nowrap}
.tools #shake{background:linear-gradient(#bdfae8,#79dcc2);border-color:#439e91;box-shadow:inset 0 3px #dcfff6,0 4px #398a84;color:#276c6a}
.tools #bomb{background:linear-gradient(#ffe1ec,#ffafd0);border-color:#c16c9d;box-shadow:inset 0 3px #fff4f8,0 4px #a45d97;color:#8e477a}
.tools small{background:#fff9;border-radius:7px;padding:2px 6px;margin-left:4px;font-size:10px}
.tools #restart{flex:0;padding:7px 12px;font-size:21px}
.tools button[aria-pressed=true]{filter:saturate(1.4);outline:3px solid #fff;outline-offset:2px}
.tools button:disabled{opacity:.5;filter:grayscale(.4)}
.instruction{font-size:10px;text-align:center;line-height:1.6;min-height:20px;margin:13px -10px 7px;color:#665b95;text-shadow:0 1px #fff}
.market-side{min-width:0;display:flex;flex-direction:column;gap:16px}
.market-heading{text-align:center;position:relative;margin-top:-7px}
.heading-copy{display:flex;flex-direction:column;align-items:stretch;gap:11px}
h1{margin:0;line-height:0;position:relative}
.title-art{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 0 #8565bf24)}
.heading-copy p{margin:3px 0 0;color:#5f5b95;font-size:10px;font-weight:800;text-shadow:0 1px #fff}
.day-sign{background:linear-gradient(#fffdf5,#fff1ba);border:3px solid #dba84d;box-shadow:inset 0 2px white,0 4px #bb8749;border-radius:20px;padding:10px 13px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 10px;position:relative}
.day-sign>span{font-size:10px;color:#a37a38;font-weight:800;grid-column:1;text-align:left}
.day-sign>b{font-size:12px;text-align:left;grid-column:1;color:#8d6334}
.day-sign strong{font-size:16px;margin-left:9px;color:#a35b46;font-variant-numeric:tabular-nums}
#progressDots{display:flex;gap:4px;grid-column:2;grid-row:1/3}
#progressDots span{font-size:27px;line-height:1;color:#e6cc8a;-webkit-text-stroke:1px #ceac5e;text-shadow:0 2px white}
#progressDots span.done{color:#ffba22;-webkit-text-stroke:1px #d48726;text-shadow:0 2px #fff8b3,0 3px 4px #e8a63b66}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.03em;color:#9371ae}
.order-ticket{position:relative;border:3px solid #b67ec8;background:linear-gradient(#fffaff,#fff 65%,#fff5fc);border-radius:23px;padding:17px 18px 14px;box-shadow:inset 0 2px white,0 5px #9866af,0 8px 0 #fff8,0 12px 22px #68529c24}
.ticket-top{display:flex;align-items:center;justify-content:space-between;border-bottom:2px dashed #ead7f0;padding-bottom:10px}
.ticket-top .eyebrow{background:#efdef9;border-radius:10px;padding:5px 8px;color:#9461aa;font-size:10px}
.open-sign{background:#e3f6e7;color:#51977a;border-radius:9px;font-size:9px;font-weight:800;padding:5px 7px}
.customer{display:flex;align-items:center;gap:8px;margin:12px 0 1px}
.customer-face{width:36px;height:36px;flex-shrink:0;background:#fff4c9;border:2px solid #edd590;border-radius:50%;padding:1px}
.customer p{font-size:10px;line-height:1.7;margin:0;word-break:keep-all;color:#8c75a1}
.order-product{display:flex;gap:7px;align-items:center;padding:9px 0 8px}
.order-product canvas{width:95px;height:95px;flex-shrink:0;filter:drop-shadow(0 4px 1px #ba99c02b);background:radial-gradient(ellipse,#fff2b9 0,#fff7dc66 55%,transparent 70%)}
.order-product h2{font-size:30px;font-weight:900;margin:2px 0;letter-spacing:-1px;color:#744ca1;text-shadow:0 2px #f1e8ff}
.order-product p{font-size:10px;color:#9681ac;margin:5px 0;font-weight:700}
.order-reward{display:flex;align-items:center;justify-content:space-between;border-top:2px dashed #ead7f0;padding:10px 2px;font-size:10px;color:#9981ac}
.order-reward b{color:#b27e27;font-size:12px;background:#fff4ce;border-radius:8px;padding:3px 7px}
#deliver,#resume{border:2px solid #bd5295;background:linear-gradient(#ffb4d1 0,#ff8cbb 45%,#f575b0 49%,#ed68a7 100%);color:#fff;border-radius:16px;padding:13px 14px;font-weight:900;font-size:13px;text-shadow:0 2px #c64c8a;box-shadow:inset 0 3px #ffddea,0 4px #a95091,0 7px 0 #f5c2d958}
#deliver{width:100%;margin:0}
#deliver:disabled{background:linear-gradient(#f0e9f7,#e5dcef);border-color:#cab6d9;color:#a28fb4;text-shadow:0 1px white;box-shadow:inset 0 3px #fdf8ff,0 3px #b7a0ca;font-size:11px}
#deliver.ready{animation:ready-in .34s cubic-bezier(.2,.8,.3,1.2);background:linear-gradient(#ffe67c 0,#ffcd44 48%,#ffbc39 50%,#ffac37 100%);border-color:#d68a34;color:#895222;text-shadow:0 1px #ffeab0;box-shadow:inset 0 3px #fff4b8,0 4px #c17f35,0 0 0 3px #fff5b6}
.delivery-hint{font-size:9px;color:#9a84ac;text-align:center;margin:10px 0 0;line-height:1.6;min-height:14px}
.up-next{border-top:2px dashed #ead7f0;padding-top:10px;margin-top:11px}
.up-next>span{font-size:9px;color:#a18db2;font-weight:800}
#upcoming{display:flex;gap:9px;margin-top:5px}
#upcoming span{display:flex;align-items:center;font-size:9px;gap:3px;color:#9679a5;white-space:nowrap}
#upcoming canvas{width:25px;height:25px}
.journey-card{position:relative;background:linear-gradient(#e7fff3,#c8f5e0);border:3px solid #6cbea0;border-radius:23px;padding:15px 16px;box-shadow:inset 0 2px white,0 4px #5c9f8f,0 7px #fff8;color:#488d7d}
.journey-card .eyebrow{color:#6baf91;font-size:9px}
.journey-card h2{font-size:19px;font-weight:900;margin:3px 0 8px;letter-spacing:-1px}
.journey-card b{position:absolute;top:22px;right:15px;font-size:10px;border-radius:10px;background:#effff5;border:1px solid #a8dec3;padding:3px 6px}
#miniStamps{display:flex;gap:8px;margin:9px 0}
.mini-stamp{height:37px;width:47px;display:grid;place-items:center;border:2px dashed #a4d3bb;border-radius:12px;background:#e6faee;font-size:10px;font-weight:700;color:#9dbda7}
.mini-stamp.stamped{background:#fff9c9;color:#ad813c;border:2px solid #e2ba62;box-shadow:0 2px #d4aa54;transform:rotate(-6deg)}
.journey-card p{font-size:10px;line-height:1.7;margin:8px 0;color:#72a08f}
.journey-card button{background:#f8fff9;border:1px solid #93c6ad;border-radius:10px;padding:5px 8px;font-size:10px;font-weight:800;box-shadow:0 2px #9ac7b2}
.market-note{display:none}
footer{max-width:780px;margin:17px auto 0;padding:13px 20px 16px;display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#5f6786;text-shadow:0 1px #fff8}
#overlay{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;text-align:center;background:linear-gradient(#fbf7fff5,#f1e5fff2);backdrop-filter:blur(4px)}
.overlay-seal{font-size:74px;line-height:1;color:#ffcc3b;-webkit-text-stroke:2px #e9a643;text-shadow:0 4px #fff,0 7px #cda4df;transform:rotate(-8deg)}
#overlay h2{font-size:27px;font-weight:900;letter-spacing:-1px;color:#8857af;margin:22px 0 7px;text-shadow:0 2px white}
#overlay p{font-size:12px;line-height:1.9;white-space:pre-line;color:#9278aa}
#resume{margin-top:12px;padding:13px 23px}
.text-button{border:0;background:none;font-size:10px;padding:16px;color:#9a77b2;text-decoration:underline}
dialog{border:4px solid #ac85cf;border-radius:28px;background:linear-gradient(#fffcff,#f5edff);color:var(--ink);padding:27px;max-width:430px;width:calc(100% - 28px);max-height:85dvh;line-height:1.8;box-shadow:0 7px #7955a2,0 0 0 4px #ffffffbf,0 20px 80px #4b2e7066}
dialog::backdrop{background:#46457d77;backdrop-filter:blur(5px)}
.close{float:right;border:2px solid #bd8bc2;background:linear-gradient(#ffe2f1,#ffb4d7);box-shadow:inset 0 2px white,0 3px #b47baa;border-radius:50%;width:31px;height:31px;line-height:1;font-size:22px;font-weight:700;color:#a45193;padding:0}
dialog h2{font-size:25px;font-weight:900;letter-spacing:-1px;margin:6px 0 10px;color:#8856af;text-shadow:0 2px white}
dialog p,dialog li{font-size:12px}
dialog .region{font-size:10px;font-weight:800;color:#b576a9}
.wide-dialog{max-width:620px}
.fine-print{font-size:10px!important;color:var(--muted)}
#stampGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}
.passport-stamp{border:2px dashed #d4c3e2;background:#eee6f6;border-radius:16px;min-height:83px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#b4a3c2;gap:3px}
.passport-stamp span,.passport-stamp small{font-size:9px}
.passport-stamp b{font-size:20px;font-weight:900}
.passport-stamp.stamped{border:2px solid #e5b251;color:#b58232;background:linear-gradient(#fff9cc,#ffe8a5);box-shadow:0 3px #d0a24b;transform:rotate(-3deg)}
.collection-head{display:flex;justify-content:space-between;align-items:center;border-top:2px dashed var(--line);margin-top:20px;padding-top:10px}
.collection-head h3{font-size:15px}.collection-head b{font-size:12px}
#catalog{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}
.catalog-item{display:flex;align-items:center;gap:8px;width:100%;border:2px solid #e0d0ec;border-radius:13px;background:#fffcff;text-align:left;padding:6px;font-size:12px}
.catalog-item canvas{width:42px;height:42px;flex-shrink:0}
.catalog-item .location{display:block;font-size:9px;color:var(--muted)}
.catalog-item .name{display:block;font-size:12px;margin-top:3px;font-weight:800}
.catalog-item .order{margin-left:auto;padding-right:3px;font-size:10px;color:#ad87c4}
.catalog-item.locked canvas{filter:grayscale(1);opacity:.3}
.catalog-item.locked .name{color:#af9dbe;font-weight:400}
.character-detail{display:block;width:176px;height:176px;margin:0 auto 14px;max-width:100%;filter:drop-shadow(0 8px 3px #b694c52b)}
.shop-balance{font-size:12px;background:linear-gradient(#fff4bb,#ffe3a3);border:2px solid #e8bf62;border-radius:13px;padding:9px 13px;color:#a47d30;margin:17px 0}
#themeList{display:grid;gap:13px}
.theme-card{border:2px solid #d0b4e2;border-radius:16px;background:white;overflow:hidden;box-shadow:0 3px #c4a1d6}
.theme-awning{height:26px;background:repeating-linear-gradient(90deg,var(--swatch) 0,var(--swatch) 26px,#fff9e8 26px,#fff9e8 52px)}
.theme-body{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:9px}
.theme-body b{font-size:13px}.theme-body p{font-size:10px;color:var(--muted);margin:4px 0}
.theme-body button{background:linear-gradient(#d7b3ff,#b790e6);border:2px solid #9e6ac5;border-radius:10px;padding:9px 10px;box-shadow:inset 0 2px #efdfff,0 3px #a070bd;font-size:10px;font-weight:800;white-space:nowrap;color:#fff;text-shadow:0 1px #8a5bb3}
.theme-body button:disabled{background:#eee7f4;color:#b19bbe;border-color:#d7c7e2;text-shadow:none;box-shadow:none}
#shopStatus{min-height:22px;color:#b576a9;font-weight:800}
.delivery-flight{position:fixed;z-index:20;pointer-events:none;width:90px;height:90px;filter:drop-shadow(0 3px #a08ab433)}
@keyframes ready-in{0%{transform:scale(.94)}65%{transform:scale(1.035)}100%{transform:scale(1)}}
/* One portrait game layout for phones, tablets and desktop. */
html{height:100%;overscroll-behavior:none}
body{height:var(--app-height,100dvh);min-height:0;overflow:hidden;overscroll-behavior:none}
.game-shell{width:min(100%,520px);height:var(--app-height,100dvh);margin:0 auto;display:flex;flex-direction:column;gap:7px;padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.game-topbar{width:100%;max-width:none;min-height:44px;height:44px;flex:0 0 44px;margin:0;padding:0;gap:6px}
.game-topbar .brand{font-size:16px;letter-spacing:-1px;white-space:nowrap}
.game-topbar nav{gap:5px;margin-left:auto;min-width:0}
.game-topbar button,.icon-button{display:flex;justify-content:center;align-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:2px solid #a384c6;border-radius:15px;background:linear-gradient(#fff,#e8dcff);box-shadow:inset 0 2px white,0 3px #9d78bd;font-size:22px;font-weight:800}
.game-topbar #passport{width:58px;min-width:58px;gap:2px;font-size:20px}
.game-topbar #passport b{padding:2px 3px;margin:0;font-size:9px}
.game-topbar .wallet{min-height:34px;padding:6px 7px;gap:3px;border-radius:13px;font-size:11px;max-width:82px;box-shadow:inset 0 2px #fffccb,0 2px #ce9134}
.wallet b{overflow:hidden;text-overflow:ellipsis}
main{width:100%;max-width:none;flex:1;min-height:0;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.market-layout{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;gap:0}
.play{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
.order-ticket{width:100%;height:96px;min-height:96px;flex:0 0 96px;border-radius:18px;padding:5px 9px;display:grid;grid-template-columns:minmax(0,1fr) 113px;grid-template-rows:17px minmax(0,1fr);gap:1px 8px;box-shadow:inset 0 2px white,0 3px #9866af,0 5px #fff8}
.order-heading{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:9px;color:#9470ac;font-weight:800;line-height:1}
.order-heading>span:nth-child(2){margin-left:auto;white-space:nowrap}
.order-heading b{margin-left:3px;font-size:11px;color:#875b9b}
#progressDots{display:flex;gap:2px;align-items:center}
#progressDots span{font-size:18px;line-height:1}
.order-product{min-width:0;gap:5px;padding:0;align-items:center}
.order-product>div{min-width:0}
.order-product canvas{width:54px;height:54px}
.order-kicker{font-size:8px;display:flex;align-items:center;gap:5px;white-space:nowrap;color:#9c84b0;overflow:hidden;text-overflow:ellipsis}
.order-kicker #customerLabel{font-size:8px}
.order-kicker #orderRegion{color:#9f72b5}
.order-product h2{font-size:23px;line-height:1.2;margin:2px 0 1px;white-space:nowrap;letter-spacing:-1px}
.order-product p{font-size:10px;line-height:1.4;white-space:nowrap;margin:0}
.order-action{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:2px;min-width:0;padding-bottom:1px}
.order-action>b{font-size:10px;line-height:12px;text-align:center;color:#a27628}
#deliver{min-height:44px;height:44px;padding:5px 4px;border-radius:12px;font-size:12px;white-space:nowrap;box-shadow:inset 0 2px #ffddea,0 3px #a95091}
#deliver:disabled{font-size:10px;box-shadow:inset 0 2px #fdf8ff,0 2px #b7a0ca;color:#806b94}
.order-ticket.fulfilled h2{font-size:20px}
.order-ticket.fulfilled #deliver{font-size:11px}
.scorebar{height:44px;min-height:44px;flex:0 0 44px;gap:6px;padding:0 2px;margin:1px 0 0}
.scorebar>div,.scorebar>div:nth-child(2){min-width:0;flex:1;padding:3px 6px 2px;border-radius:13px}
.scorebar span{font-size:8px;line-height:1.2}
.scorebar strong{font-size:21px;line-height:1.15;overflow:hidden;text-overflow:ellipsis}
.scorebar button{width:44px;height:44px;min-width:44px;border-radius:15px;font-size:15px}
.scorebar button:first-of-type{margin-left:2px}
.scorebar #sound{width:44px;min-width:44px;border-radius:15px;font-size:10px}
.board-space{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 4px 9px;isolation:isolate}
.nextbar{height:32px;min-height:32px;flex:0 0 32px;width:calc(var(--board-width,100%) - 14px);max-width:100%;margin:0 7px -2px;padding:0 7px;border-width:2px;border-bottom:0;border-radius:16px 16px 0 0;z-index:0}
.fruit-preview{gap:3px}
.fruit-preview canvas{width:29px;height:29px}
.fruit-preview span{font-size:10px}
.board{width:calc(100% - 8px);max-width:100%;height:auto;flex:0 0 auto;border-width:10px;border-radius:21px;box-shadow:0 0 0 3px var(--frame-dark),0 5px var(--frame-dark),0 7px #ffffffa6,0 10px 16px #5c4ba32b}
#game{width:100%;height:auto}
.hint b{font-size:17px}
.hint span{font-size:10px}
.hint:before{font-size:28px;margin-bottom:6px}
.tools{min-height:48px;flex:0 0 48px;margin:3px 2px 0;gap:8px;align-items:stretch}
.tools button{min-height:44px;padding:8px 7px;border-radius:14px;font-size:12px}
.tools #restart{min-width:48px;padding:7px 11px;font-size:23px}
.tools small{font-size:11px}
.instruction{flex:0 0 19px;min-height:19px;height:19px;line-height:19px;margin:5px 0 0;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wide-dialog{max-width:520px}
dialog{width:calc(100% - 28px);padding:24px;max-height:calc(var(--app-height,100dvh) - 44px);overscroll-behavior:contain}
dialog .close{width:44px;height:44px;min-width:44px;min-height:44px;position:sticky;top:0;z-index:2;font-size:26px}
.dialog .region{font-size:11px}
dialog h2{font-size:25px}
dialog p,dialog li{font-size:13px}
#stampGrid{grid-template-columns:repeat(3,1fr);gap:8px}
.passport-stamp{min-height:78px;border-radius:13px}
.passport-stamp b{font-size:19px}
.passport-stamp small{font-size:9px}
.catalog-item{min-height:54px;padding:6px;gap:6px}
.catalog-item canvas{width:39px;height:39px}
.catalog-item .location{font-size:9px}
.catalog-item .name{font-size:12px}
.theme-body button{min-height:44px;min-width:76px}
.market-side{display:block}
.journey-card{margin:16px 0}
.journey-card b{top:24px}
.journey-card button{min-height:44px;font-size:12px}
.journey-card p{font-size:12px}
#overlay{padding:18px}
#overlay h2{font-size:clamp(21px,5vw,28px)}
#overlay p{font-size:12px}
#resume{min-height:48px;padding:12px 18px;max-width:100%}
.text-button{min-height:44px;font-size:11px;padding:12px}
.overlay-seal{font-size:60px}
/* The launch screen owns social links and install controls, clear of the game HUD. */
#welcomeDialog{margin:0;width:100%;max-width:none;height:var(--app-height,100dvh);max-height:100%;padding:0;border:0;border-radius:0;box-shadow:none;background:linear-gradient(#dbfaff99,#e4f5ff55),#b4edff url('assets/arcade-world.webp') center/cover no-repeat;overflow:auto}
#welcomeDialog::backdrop{background:#b4edff}
.welcome-card{width:min(100%,430px);min-height:100%;margin:auto;padding:max(22px,env(safe-area-inset-top)) 22px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.welcome-logo{width:min(80vw,320px);height:auto;flex-shrink:0;filter:drop-shadow(0 6px 0 #8c67ba22)}
#welcomeTitle{font-size:19px;line-height:1.4;color:#7653a1;margin:0;text-shadow:0 2px white}
.welcome-lead{font-size:13px;line-height:1.8;margin:0;color:#7b70a2;text-shadow:0 1px white}
.primary-button{width:100%;min-height:58px;border:3px solid #ce8d30;background:linear-gradient(#fff3a6,#ffd655 50%,#ffbd3c 51%,#ffb332);color:#895426;border-radius:20px;padding:13px;font-size:20px;font-weight:900;box-shadow:inset 0 3px #fffbd3,0 5px #bb823b,0 8px #fff9;text-shadow:0 2px #fff1b6}
.welcome-tip{font-size:11px!important;line-height:1.7;color:#8a7ca6;margin:2px 0}
.welcome-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.welcome-actions button,.welcome-actions a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:9px 6px;border:2px solid #ae8acb;border-radius:15px;background:linear-gradient(#fff,#efe4ff);box-shadow:inset 0 2px white,0 3px #a27bbd;font-size:12px;font-weight:800;color:#83609e;text-decoration:none}
#shellStatus{font-size:12px;line-height:1.6;min-height:19px;margin:0;color:#846493}
.welcome-card footer{display:flex;flex-direction:column;gap:0;margin:0;padding:0;max-width:100%;align-items:center;font-size:10px;color:#8b7d9e;line-height:1.7;text-shadow:0 1px white}
.welcome-card footer a{display:flex;align-items:center;min-height:44px;color:#71548c;font-size:12px;font-weight:800;text-decoration:none}
#utilityContent{clear:both;padding-top:8px}
#utilityContent p{font-size:13px;line-height:1.9}
#utilityContent input{width:100%;padding:12px;border:2px solid #d2b9e5;border-radius:11px;background:white;font:12px system-ui;color:#685087}
#utilityContent button{min-height:44px;margin:12px 0 0;padding:9px 16px;border:2px solid #ab83c7;border-radius:12px;background:#eadbff;font-size:13px;font-weight:800}
@media(max-width:360px){.game-topbar .brand{display:none}.game-topbar nav{gap:5px}.game-shell{padding-left:9px;padding-right:9px}.order-ticket{grid-template-columns:minmax(0,1fr) 104px;padding:5px 7px;gap:1px 5px}.order-product canvas{width:46px;height:46px}.order-product h2{font-size:21px}.order-kicker{font-size:7px;gap:3px}.order-kicker #customerLabel{font-size:7px}.order-product p{font-size:9px}.scorebar{gap:5px}.scorebar strong{font-size:20px}.tools{gap:7px}.tools button{font-size:11px}.welcome-card{padding-left:18px;padding-right:18px}dialog{padding:18px}#catalog{gap:6px}.catalog-item canvas{width:33px;height:33px}.catalog-item .location{font-size:8px}.catalog-item .order{padding-right:0}.theme-body{padding:10px}.theme-body p{font-size:9px}}
@media(max-height:680px){.game-shell{gap:5px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(5px,env(safe-area-inset-bottom))}main{gap:5px}.order-ticket{height:80px;min-height:80px;flex-basis:80px;grid-template-rows:13px 1fr;padding:3px 7px}.order-heading{font-size:8px}.order-heading b{font-size:10px}#progressDots span{font-size:15px}.order-product canvas{width:43px;height:43px}.order-product h2{font-size:19px}.order-kicker #customerLabel{display:none}.order-action>b{display:none}.order-product p{font-size:9px}.scorebar{height:42px;min-height:42px;flex-basis:42px}.tools{flex-basis:46px;min-height:46px;margin-top:1px}.instruction{flex-basis:16px;min-height:16px;height:16px;line-height:16px;margin-top:3px;font-size:9px}.board-space{padding-top:4px;padding-bottom:7px}.nextbar{height:28px;min-height:28px;flex-basis:28px}.fruit-preview canvas{width:25px;height:25px}.fruit-preview span{font-size:9px}.hint:before{display:none}.hint b{font-size:14px}.hint span{font-size:8px}.overlay-seal{font-size:40px}#overlay h2{margin:12px 0 4px}#overlay p{font-size:10px;margin:5px 0}#resume{margin-top:8px;min-height:44px;padding:9px 15px;font-size:12px}.welcome-card{gap:8px}.welcome-logo{max-width:250px}.welcome-actions{gap:8px}.welcome-lead{font-size:12px}.welcome-tip{font-size:10px!important}}
@media(pointer:coarse){button:hover:not(:disabled){transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Next fruit shares the score row; sound and help live in the menu. */
.scorebar{padding-right:97px}.scorebar #sound,.scorebar #help{display:none}.nextbar{position:absolute;top:1px;right:2px;width:88px;max-width:88px;height:44px;min-height:44px;flex-basis:auto;margin:0;padding:2px 5px;border:2px solid #c8a65c;border-radius:14px;background:linear-gradient(#fffbe1,#ffe7a5);box-shadow:inset 0 2px white,0 3px #c4a15f;justify-content:center}.fruit-preview:first-child{display:none}.fruit-preview:last-child{gap:3px}.fruit-preview:last-child span{font-size:9px;max-width:42px;white-space:normal;line-height:1.3;color:#98763a}.fruit-preview:last-child canvas{width:30px;height:30px}.board-space{padding-top:7px}@media(max-height:680px){.nextbar{height:44px;min-height:44px;flex-basis:auto;top:0}.board-space{padding-top:5px}.fruit-preview:last-child canvas{width:28px;height:28px}}
.fruit-preview:last-child span{word-break:keep-all}
.audio-subtitle{font-size:12px;color:#9a79b2;margin:0 0 20px}
.audio-setting{border:2px solid #ddc9ed;background:#fffaff;border-radius:17px;padding:13px 15px;margin:12px 0}
.audio-setting>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.audio-setting b{font-size:15px;color:#80589e}
.audio-setting button{min-width:70px;min-height:44px;border:2px solid #ad7bc2;border-radius:13px;background:linear-gradient(#d7b5f2,#b696df);box-shadow:inset 0 2px #f4eaff,0 3px #a27abb;color:white;font-size:12px;font-weight:800}
.audio-setting button[aria-pressed=false]{background:#eee7f5;color:#a18bb3;border-color:#cfbcdf;box-shadow:inset 0 2px white,0 2px #c4b0d6}
.audio-setting label{display:flex;justify-content:space-between;font-size:11px;color:#a48ab6;margin-top:12px}
.audio-setting output{font-weight:800;color:#9271aa}
.audio-setting input[type=range]{display:block;accent-color:#b488db;min-height:44px;width:100%;margin:0;cursor:pointer;touch-action:pan-y}
#audioPreview,#audioRetry{width:100%;min-height:46px;border:2px solid #b58ac9;border-radius:13px;background:linear-gradient(#fff9da,#ffe8a7);color:#a27a36;font-size:12px;font-weight:800;padding:10px;margin-top:8px;box-shadow:inset 0 2px white,0 3px #c7a461}
#audioStatus{font-size:11px;color:#9d7aad;line-height:1.7;min-height:20px}

.audio-setting input[type=range]{appearance:none;-webkit-appearance:none;background:transparent}.audio-setting input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(to right,#bd98da var(--audio-progress,0%),#e6d9ef var(--audio-progress,0%))}.audio-setting input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-7px;border-radius:50%;border:3px solid white;background:#af82cf;box-shadow:0 2px 3px #88639e44}.audio-setting input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:#e6d9ef}.audio-setting input[type=range]::-moz-range-progress{height:8px;border-radius:8px;background:#bd98da}.audio-setting input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;border:3px solid white;background:#af82cf}