:root{--ink:#070b21;--navy:#081338;--blue:#12cfff;--cyan:#8af4ff;--pink:#ff4fd8;--violet:#8b4dff;--paper:#f5f2ff;--gold:#ffd464;--line:#050718;--muted:#99a9cc;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}button{font:inherit}body{margin:0;background:radial-gradient(circle at 50% 10%,#263c7b 0,#0d1433 35%,#050817 100%);font-family:"Microsoft YaHei UI","PingFang SC",sans-serif;color:var(--paper);min-height:100vh;overflow-x:hidden}
button{cursor:pointer}.app-shell{min-height:100vh;display:grid;place-items:center}.game{width:min(100vw,430px);height:100svh;min-height:720px;max-height:932px;position:relative;overflow:hidden;background:linear-gradient(180deg,#0a1745 0 39%,#4e2184 39% 40%,#111633 40%);box-shadow:0 0 70px #02030c;border-inline:1px solid #4a62a5}
.space-noise{position:absolute;inset:0 0 44%;pointer-events:none;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#18d5ff 0 1px,transparent 1.5px);background-size:39px 41px,63px 57px;background-position:7px 4px,22px 17px;opacity:.45}.space-noise:after{content:"";position:absolute;inset:25% -20% auto;height:3px;box-shadow:0 0 14px #22dcff;background:#27dafa;transform:rotate(-3deg)}
.topbar{height:78px;padding:12px 12px 8px;display:grid;grid-template-columns:1.25fr auto auto auto auto;gap:6px;align-items:center;position:relative;z-index:8;background:linear-gradient(#071334e8,#07133470)}.brand{font-family:"Microsoft YaHei UI",sans-serif;transform:skew(-4deg);line-height:.9;text-shadow:3px 2px 0 #35115d}.brand span{display:block;font-size:11px;letter-spacing:2px;color:var(--cyan)}.brand strong{font-size:21px;letter-spacing:3px}.stat-chip,.timer-chip,.icon-btn{border:2px solid var(--line);border-radius:12px;background:#172758;color:#fff;box-shadow:2px 2px 0 var(--line),inset 0 0 10px #213d83;padding:6px 8px;min-height:40px}.stat-chip{display:flex;gap:5px;align-items:center}.stat-chip .dust{color:var(--gold);text-shadow:0 0 8px var(--gold)}.timer-chip{display:flex;flex-direction:column;align-items:center;line-height:1}.timer-chip span{font-size:8px;color:var(--cyan);letter-spacing:1px}.timer-chip b{font-family:Consolas,monospace;font-size:14px}.icon-btn{font-size:10px;padding:5px}.pause-btn{font-size:13px;width:34px}.timer-chip.warning{background:#6b174f;animation:pulse 1s infinite}
.guest-stage{height:230px;position:relative;z-index:2;padding:10px 14px}.orbit{position:absolute;border:2px solid #19dfff;border-radius:50%;filter:drop-shadow(0 0 6px #1dd7ff);opacity:.55}.orbit-a{width:330px;height:85px;left:45px;top:78px;transform:rotate(-11deg)}.orbit-b{width:270px;height:58px;left:80px;top:92px;transform:rotate(9deg);border-color:#ff54d8}.asteroid{position:absolute;width:74px;height:62px;border:4px solid #050718;border-radius:44% 56% 50% 45%;left:12px;top:24px;background:#8a4dcc;box-shadow:inset -12px -10px 0 #44217a,0 0 18px #a34dff;transform:rotate(-12deg)}.asteroid i{position:absolute;width:12px;height:9px;border:3px solid #160b29;border-radius:50%;background:#48206e}.asteroid i:nth-child(1){left:15px;top:12px}.asteroid i:nth-child(2){right:10px;top:29px}.asteroid i:nth-child(3){left:25px;bottom:5px}
.guest{position:absolute;left:18px;bottom:10px;width:104px;text-align:center;transition:.35s}.guest-head{width:61px;height:56px;margin:auto;border:4px solid var(--line);border-radius:48% 52% 44% 50%;background:#50d8ea;position:relative;box-shadow:inset -12px -8px 0 #2490b9}.guest-head:before,.guest-head:after{content:"";position:absolute;top:23px;width:7px;height:9px;background:var(--line);border-radius:50%}.guest-head:before{left:13px}.guest-head:after{right:13px}.guest-head span{position:absolute;width:22px;height:7px;border-bottom:3px solid var(--line);border-radius:50%;left:16px;bottom:8px}.guest-body{height:58px;border:4px solid var(--line);border-radius:48% 48% 12px 12px;background:#743dd0;margin-top:-7px;box-shadow:inset -16px 0 #3c2383}.guest small{display:inline-block;background:#050718;border:1px solid var(--blue);padding:3px 8px;border-radius:20px;margin-top:-8px;position:relative;font-size:10px}.guest.enter{transform:translateX(-140px)}
.order-card{position:absolute;right:12px;top:10px;width:286px;min-height:175px;padding:12px 12px 10px 22px;background:#f3f0ff;color:#080a1c;border:4px solid var(--line);clip-path:polygon(7% 0,100% 0,100% 90%,92% 100%,0 100%,0 10%);box-shadow:7px 7px 0 #ff4fd8}.order-card:before{content:"";position:absolute;width:9px;inset:0 auto 0 0;background:var(--blue)}.order-top{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-family:Consolas,monospace;letter-spacing:2px;font-size:9px;color:#27d9f5}.order-card .eyebrow{color:#6b53a8}.price{font-weight:900;color:#8e2388}.order-card h1{font-size:23px;margin:5px 0 7px;letter-spacing:1px}.hunter-request{display:flex;align-items:center;gap:7px;border:2px solid var(--line);background:#dde4ff;border-radius:20px;padding:4px 9px;color:#101326}.hunter-request span{width:10px;height:10px;border-radius:50%;background:#30aaff;box-shadow:0 0 7px currentColor}.hunter-request small{font-size:9px;color:#59627f}.recipe{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}.recipe span{font-size:9px;padding:3px 6px;border-radius:9px;background:#d7d3ee;border:1px solid #9992b9}.patience{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:5px;font-size:8px;color:#555d76}.patience>div{height:8px;background:#b7bad0;border:2px solid #12152c;border-radius:8px;overflow:hidden}.patience i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff54d8,#23d6ff);transition:width .2s linear}.patience b{font-family:Consolas;font-size:9px}
.star-counter{position:absolute;z-index:7;top:295px;right:12px;display:flex;gap:5px}.star-counter span{font-size:9px;background:#08102e;border:2px solid #050718;border-radius:10px;padding:4px 7px;color:#a7bce8}.star-counter b{color:#fff}
.bar-counter{height:calc(100% - 308px);position:relative;z-index:5;border-top:4px solid var(--line);background:linear-gradient(165deg,#2e2264,#151837 33%,#301b58);box-shadow:0 -7px 0 #ff47d2,0 -13px 0 #21d8ff;padding:20px 10px calc(8px + var(--safe-bottom));display:flex;flex-direction:column}.counter-edge{position:absolute;top:0;left:0;right:0;height:20px;background:#10112a;border-bottom:2px solid #5267ae;text-align:center;overflow:hidden}.counter-edge span{font:8px Consolas;letter-spacing:4px;color:#8eeeff}
.ingredient-tabs{height:27px;display:flex;gap:5px;align-items:center}.tab-btn{border:2px solid #07091b;background:#39416c;color:#aebce0;border-radius:12px;padding:3px 11px;font-size:10px;box-shadow:2px 2px 0 #09091a}.tab-btn.active{background:var(--pink);color:#fff;transform:translateY(-2px)}.ingredient-shelf{height:104px;display:flex;gap:7px;align-items:flex-end;overflow-x:auto;padding:5px 3px 10px;scrollbar-width:none;border-bottom:2px solid #080a1c;box-shadow:0 3px 0 #a349d6}.ingredient{position:relative;flex:0 0 57px;height:79px;border:0;background:transparent;color:#fff;padding:0;filter:drop-shadow(2px 3px 0 #050718)}.ingredient .vessel{display:block;position:absolute;left:8px;right:8px;bottom:17px;height:50px;border:3px solid #070818;background:var(--ingredient);box-shadow:inset -8px -5px 0 #0003}.ingredient[data-shape="bottle"] .vessel{border-radius:7px 7px 11px 11px}.ingredient[data-shape="bottle"] .vessel:before{content:"";position:absolute;width:16px;height:14px;left:9px;top:-14px;background:var(--ingredient);border:3px solid #070818;border-bottom:0;border-radius:4px 4px 0 0}.ingredient[data-shape="bowl"] .vessel{height:29px;border-radius:4px 4px 22px 22px}.ingredient[data-shape="jug"] .vessel{border-radius:6px 6px 13px 13px}.ingredient[data-shape="jar"] .vessel{height:36px;border-radius:12px}.ingredient .vessel:after{content:"";position:absolute;inset:10px 5px auto;height:8px;background:#f6edff;border:2px solid #08091b;opacity:.85}.ingredient b{position:absolute;bottom:0;left:0;right:0;font-size:9px;white-space:nowrap;text-shadow:1px 1px #000}.ingredient.selected{transform:translateY(-7px)}.ingredient.selected .vessel{box-shadow:0 0 0 3px #fff,0 0 14px var(--pink)}
.mixing-deck{height:auto;min-height:150px;flex:1;display:grid;grid-template-columns:64px 1fr 76px;gap:4px;align-items:center;padding:8px 2px;background:radial-gradient(ellipse at 54% 52%,transparent 0 45px,#2bd9ff22 46px 47px,transparent 48px 69px,#ef4ccd1f 70px 71px,transparent 72px),linear-gradient(90deg,transparent 49.7%,#8f7dce20 50%,transparent 50.3%),linear-gradient(#1a1837,#25204b);border-bottom:2px solid #07091a;position:relative}.mixing-deck:after{content:"DECK 07 · PRESSURE STABLE · 0.8G";position:absolute;left:74px;right:83px;bottom:10px;border-block:1px solid #6675b455;color:#7787b8;font:7px Consolas;letter-spacing:1px;padding:3px;pointer-events:none}.tools{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:115px}.tools span{display:block;border:3px solid #08091a;background:#bbb3d5}.shaker{width:20px;height:68px;border-radius:7px 7px 12px 12px;transform:rotate(-4deg);box-shadow:inset 0 16px #e957cf}.jigger{width:17px;height:28px;clip-path:polygon(0 0,100% 0,67% 50%,100% 100%,0 100%,33% 50%)}.spoon{width:6px;height:80px;border-radius:5px}.mix-zone,.finished-zone{text-align:center;position:relative;height:130px;z-index:1}.deck-label{display:block;font:8px Consolas;letter-spacing:1px;color:#7ddff0}.mix-glass{position:relative;margin:6px auto 4px;width:72px;height:77px;border:4px solid #08091b;border-radius:8px 8px 27px 27px;background:#dff9ff25;overflow:hidden;box-shadow:inset 8px 0 #ffffff18,0 0 12px #24cfff44}.mix-glass:before{content:"";position:absolute;width:6px;height:93px;background:#dae7ff;border:3px solid #08091b;right:7px;top:-22px;transform:rotate(12deg);z-index:4}.liquid{position:absolute;left:0;right:0;bottom:0;height:5%;background:linear-gradient(#ff8bed,#793aff);transition:.3s}.ice-mark{position:absolute;left:22px;bottom:13px;color:#fff;z-index:2}.selected-row{height:25px;display:flex;gap:3px;justify-content:center;align-items:center;overflow:hidden}.selected-row span:not(.empty-hint){width:18px;height:18px;border:2px solid #090a1b;border-radius:50%;background:var(--dot);font-size:0}.empty-hint{font-size:9px;color:#8092bb}.cocktail{position:relative;width:70px;height:78px;margin:5px auto}.cocktail:before{content:"";position:absolute;width:60px;height:42px;left:5px;top:0;border:4px solid #07091b;clip-path:polygon(0 0,100% 0,56% 100%,44% 100%);background:#c6f8ff22}.cocktail:after{content:"";position:absolute;width:4px;height:34px;background:#c9dcff;border:3px solid #07091b;left:30px;top:36px}.cocktail div{position:absolute;z-index:2;left:14px;top:8px;width:42px;height:25px;clip-path:polygon(0 0,100% 0,63% 100%,37% 100%);background:var(--pink);opacity:.25}.cocktail i{position:absolute;z-index:3;width:37px;height:7px;border:3px solid #08091b;border-radius:50%;left:16px;bottom:0;background:#a5bce3}.cocktail.ready{filter:drop-shadow(0 0 9px var(--pink))}.cocktail.ready div{opacity:1}.finished-zone small{font-size:9px;color:#8fa3cb}
.action-row{height:66px;flex:none;display:grid;grid-template-columns:57px 57px 1fr;gap:7px;padding-top:8px}.minor-btn,.panel-btn{border:3px solid #070818;background:#32385e;color:#dce6ff;border-radius:12px;box-shadow:3px 3px 0 #070818;font-weight:700;font-size:11px}.minor-btn:disabled{opacity:.35}.primary-btn{border:3px solid #08091b;border-radius:14px;background:linear-gradient(135deg,#ff4fcf,#9a36e4);color:#fff;box-shadow:4px 4px 0 #070818,inset 0 0 0 2px #ff9bec;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;letter-spacing:1px}.primary-btn:active,.minor-btn:active,.icon-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #070818}.primary-btn:disabled{filter:grayscale(1);opacity:.5}.primary-btn small{font:7px Consolas;letter-spacing:2px;color:#ffe5ff;margin-top:3px}
.overlay[hidden]{display:none}.overlay{position:fixed;z-index:40;inset:0;background:#040717d9;display:grid;place-items:center;padding:16px;backdrop-filter:blur(4px)}.panel{position:relative;width:min(100%,398px);max-height:88svh;overflow:auto;background:linear-gradient(155deg,#162452,#24174c);border:4px solid #060718;border-radius:18px;box-shadow:8px 8px 0 #ff49d0,0 0 25px #2bdcff66;padding:22px;color:#fff}.panel h2{font-size:25px;margin:5px 0 15px}.close-btn{position:absolute;right:10px;top:10px;width:34px;height:34px;border:3px solid #070819;border-radius:50%;background:#e5edff;color:#090b21;font-size:22px;font-weight:900}.menu-list{display:grid;gap:9px}.menu-item{display:grid;grid-template-columns:46px 1fr auto;gap:9px;align-items:center;background:#eff1ff;color:#0a0d24;border:3px solid #060718;border-radius:13px;padding:8px;box-shadow:3px 3px 0 #78399f}.drink-icon{width:42px;height:42px;border:3px solid #08091b;border-radius:50% 50% 12px 12px;background:var(--drink);box-shadow:inset 0 12px #ffffff45}.menu-item h3{font-size:14px;margin:0 0 3px}.menu-item p{font-size:9px;margin:0;color:#5d6177}.menu-item b{color:#93258f}.menu-item.locked{filter:grayscale(.8);opacity:.6}.bottom-overlay{align-items:end;padding-bottom:0}.hunter-panel{border-radius:24px 24px 0 0;max-height:70svh}.target-reminder{font-size:12px;background:#0c1131;padding:8px 10px;border-radius:10px}.hunter-track{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 16px}.hunter-card{flex:0 0 108px;border:3px solid #08091b;border-radius:14px;background:#eef2ff;color:#10122a;padding:9px;text-align:left;box-shadow:3px 3px 0 var(--hunter)}.hunter-card .portrait{height:68px;border:3px solid #08091b;border-radius:12px 12px 28px 28px;background:linear-gradient(145deg,var(--hunter),#252448);position:relative}.hunter-card .portrait:after{content:"✦";position:absolute;right:6px;top:5px;color:#fff}.hunter-card b{display:block;margin-top:6px;font-size:12px}.hunter-card small{font-size:8px;color:#5c6380}.hunter-card.selected{transform:translateY(-4px);box-shadow:0 0 0 3px #fff,0 0 18px var(--hunter)}.modal-primary{width:100%;min-height:56px}.result-panel,.pause-panel,.summary-panel{text-align:center}.result-glyph{font-size:62px;color:var(--gold);text-shadow:0 0 20px currentColor}.result-panel blockquote{margin:14px 0;padding:12px;background:#09102f;border-left:4px solid var(--pink);font-size:12px;line-height:1.5;text-align:left}.result-copy{font-size:13px;color:#c7d4ef}.reward{font-size:25px;color:var(--gold);font-weight:900;margin:12px}.vinyl{display:block;font-size:78px;color:#17172a;text-shadow:0 0 0 #000,0 0 0 12px #f052c4,0 0 20px #ff52d7;margin:14px}.panel-btn{display:block;width:100%;min-height:46px;margin-top:10px}.panel-btn.danger{color:#ff8bcf}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.summary-grid div{background:#ecf1ff;color:#0a0c24;border:3px solid #070819;border-radius:14px;padding:11px}.summary-grid small,.summary-grid span{display:block;font-size:9px;color:#69708b}.summary-grid b{font:900 25px Consolas}.lifetime{font-size:11px;color:#aebddd}.toast{position:fixed;z-index:60;left:50%;bottom:24px;transform:translate(-50%,20px);background:#050718;border:2px solid var(--blue);border-radius:18px;padding:8px 14px;opacity:0;pointer-events:none;transition:.2s;color:#fff;font-size:11px;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes pulse{50%{filter:brightness(1.4)}}@media(max-height:760px){.game{min-height:680px}.guest-stage{height:203px}.star-counter{top:269px}.bar-counter{height:calc(100% - 282px)}.ingredient-shelf{height:91px}.ingredient{transform:scale(.9);margin-right:-4px}.mixing-deck{height:140px}.mix-zone,.finished-zone{height:123px}.action-row{height:59px}.topbar{height:70px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:431px){.game{border-radius:24px;margin:20px;height:min(932px,calc(100vh - 40px))}}

/* Painted asset layer */
.game{background:#070d23 url("assets/art/galaxy-bar-background-v1.1.0.jpg") center/cover no-repeat;image-rendering:pixelated}.game:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#03081a0f 0 37%,#080d255c 51%,#080b1dc9 100%)}.space-noise{display:none}.guest-stage,.bar-counter,.topbar{position:relative;z-index:2}.bar-counter{background:linear-gradient(180deg,#17153edb,#0b1025ee);box-shadow:0 -4px 0 #ff55cb,0 -9px 0 #47dbff,0 -16px 22px #0008;backdrop-filter:none}
.asteroid{display:none}.guest{left:4px;bottom:-2px;width:138px;height:164px;filter:drop-shadow(0 7px 0 #020513);transform-origin:bottom}.guest-art{height:145px;width:132px;background-image:url("assets/art/customers-pixel-v2.webp");background-repeat:no-repeat;background-size:500% 100%;background-position:var(--guest-x,0%) center;image-rendering:pixelated}.guest small{position:absolute;bottom:0;left:8px;right:8px;border:2px solid #55ddff;background:#071026ed;box-shadow:3px 3px 0 #020416;font-family:Consolas,"Microsoft YaHei UI",sans-serif}
.order-card{box-shadow:11px 13px 24px #020516c7,7px 7px 0 #ff4fd8;background:linear-gradient(135deg,#f9f6ff,#dbd7fb)}
.ingredient-shelf{height:116px;gap:3px;align-items:flex-end;padding-bottom:7px;background:linear-gradient(180deg,#0c102966,#0508179e);border-radius:8px 8px 0 0}.ingredient{flex-basis:72px;height:100px;filter:drop-shadow(0 5px 0 #0009);background-image:url("assets/art/bar-items-pixel-v2.webp");background-repeat:no-repeat;background-size:500% 400%;background-position:var(--sprite-x) var(--sprite-y);transform:translateY(0);transition:transform .15s steps(2),filter .15s;image-rendering:pixelated}.ingredient .vessel{display:none}.ingredient b{bottom:0;font-size:10px;text-shadow:0 2px 0 #000,1px 0 #000,-1px 0 #000}.ingredient.selected{transform:translateY(-8px) scale(1.06);filter:drop-shadow(0 0 3px #fff) drop-shadow(0 6px 0 #ff44d7)}
.mixing-deck{background:linear-gradient(180deg,#060a18b5,#0d1027e8),url("assets/art/galaxy-bar-background-pixel-v2.webp") center 78%/cover;box-shadow:inset 0 10px 0 #0005,inset 0 -12px 0 #0005}.tools-art{width:76px;height:118px;background:url("assets/art/bar-items-pixel-v2.webp") 75% 100%/500% 400% no-repeat;filter:drop-shadow(0 6px 0 #0008);image-rendering:pixelated}.mix-glass-art{width:104px;height:112px;margin:4px auto;background:url("assets/art/bar-items-pixel-v2.webp") 100% 66.666%/500% 400% no-repeat;filter:drop-shadow(0 6px 0 #0009);position:relative;image-rendering:pixelated}.liquid-level{display:none}.cocktail-art{width:94px;height:112px;margin:2px auto;background:url("assets/art/bar-items-pixel-v2.webp") var(--drink-x,0%) 100%/500% 400% no-repeat;filter:grayscale(.65) brightness(.65) drop-shadow(0 5px 0 #0009);transition:.2s steps(2);image-rendering:pixelated;position:relative;z-index:2}.cocktail-art.ready{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 5px 0 #d92ed1)}.finished-zone:after{content:"";position:absolute;z-index:1;width:104px;height:54px;left:50%;bottom:7px;transform:translateX(-50%);background:url("assets/art/bar-items-pixel-v2.webp") 100% 100%/500% 400% no-repeat;image-rendering:pixelated;opacity:.75}
.service-scene{height:270px;margin:-22px -22px 10px;position:relative;overflow:hidden;background:radial-gradient(circle at 85% 30%,#a744d166,#07102f 68%);border-radius:14px 14px 4px 4px;border-bottom:3px solid #31dcff}.service-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,#34d9ff1f 31% 32%,transparent 33%),radial-gradient(circle at 20% 30%,#ff4cd725,transparent 40%)}.service-scene img{position:absolute;right:-3%;bottom:0;width:72%;height:105%;object-fit:contain;object-position:right bottom;filter:drop-shadow(-14px 10px 11px #000c);transform:translateX(110%);animation:hunterEnter .42s cubic-bezier(.2,.9,.2,1) forwards}.service-dialogue{position:absolute;z-index:2;left:12px;bottom:14px;width:58%;padding:10px;background:#eef2fff2;color:#080b22;border:3px solid #060718;border-radius:10px;box-shadow:6px 6px 0 var(--pink);text-align:left}.service-dialogue b{font-size:15px}.service-dialogue blockquote{display:block!important;margin:5px 0 0!important;padding:0!important;background:transparent!important;border:0!important;color:#222944;font-size:11px}.result-panel{padding-top:22px}.result-glyph{font-size:32px;margin-top:2px}.result-panel h2{margin:2px 0}.result-copy{margin:3px 0}.result-panel .reward{margin:7px}.result-panel .modal-primary{min-height:48px}
@keyframes hunterEnter{to{transform:translateX(0)}}
.hunter-card .portrait{overflow:hidden}.hunter-card .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;mix-blend-mode:multiply}
.drink-icon{background:url("assets/art/bar-items-pixel-v2.webp") var(--drink-x,0%) 100%/500% 400% no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;image-rendering:pixelated}.brand,.order-card h1,.primary-btn span{font-family:Consolas,"Microsoft YaHei UI",sans-serif}.tab-btn,.minor-btn,.icon-btn{border-radius:6px}.primary-btn{border-radius:7px;box-shadow:4px 4px 0 #070818,inset 0 0 0 2px #ff9bec}.order-card{box-shadow:7px 7px 0 #06081d,10px 10px 0 #ff4fd8}

/* Web interface quality pass */
html{color-scheme:dark}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #19dfff}.guest{transition-property:transform}.panel{overscroll-behavior:contain}.toast{transition-property:opacity,transform}.cocktail-art{transition-property:filter}

/* Integrated counter: the painted bar itself is the control surface. */
.integrated-counter{position:absolute;inset:0;z-index:6;width:100%;height:100%;padding:0;border:0;background:transparent;box-shadow:none;display:block;pointer-events:none;overflow:hidden}
.integrated-counter .counter-edge,.integrated-counter .ingredient-tabs{display:none!important}
.integrated-counter .ingredient-shelf{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;pointer-events:none}
.integrated-counter .ingredient{position:absolute;left:var(--hotspot-x);top:var(--hotspot-y);width:48px;height:48px;min-width:48px;min-height:48px;margin:0;padding:0;transform:translate(-50%,-50%);border:2px solid transparent;border-radius:8px;background:none;box-shadow:none;filter:none;overflow:visible;pointer-events:auto;transition:transform .12s steps(2),border-color .12s,box-shadow .12s}
.integrated-counter .ingredient:before{content:"";position:absolute;inset:3px;border:2px solid transparent;border-radius:6px}
.integrated-counter .ingredient img{position:absolute;z-index:1;left:50%;top:50%;width:44px;height:44px;object-fit:contain;transform:translate(-50%,-54%);image-rendering:pixelated;filter:drop-shadow(0 3px 1px #020416c9);pointer-events:none}
.integrated-counter .bottle-hotspot img{width:42px;height:50px;top:46%}
.integrated-counter .ingredient b{position:absolute;left:50%;right:auto;bottom:-14px;z-index:3;transform:translateX(-50%);min-width:40px;max-width:49px;padding:2px 3px;border:1px solid #65438f;border-radius:2px;background:linear-gradient(#211941ed,#080d25ed);box-shadow:inset 0 1px #6bc9e955;color:#e9f8ff;font:700 7px Consolas,"Microsoft YaHei UI",sans-serif;line-height:1.05;text-align:center;white-space:normal;text-shadow:0 1px #000;opacity:1}
.integrated-counter .ingredient:hover,.integrated-counter .ingredient:focus-visible,.integrated-counter .ingredient.selected{transform:translate(-50%,-54%);border-color:#fff;box-shadow:0 0 0 3px #1edcffb8,0 0 16px #ff4bd4}
.integrated-counter .ingredient:hover b,.integrated-counter .ingredient:focus-visible b,.integrated-counter .ingredient.selected b{opacity:1}
.integrated-counter .bottle-hotspot:nth-child(odd) b{bottom:34px}
.integrated-counter .ingredient.selected:before{border-color:var(--ingredient);box-shadow:inset 0 0 12px var(--ingredient)}
.integrated-counter .ingredient.selected b{background:#f1f5ff;color:#090b20;border-color:#090b20;opacity:1}
.integrated-counter .ingredient:disabled{opacity:1;cursor:default}
.integrated-counter .ingredient:disabled b{opacity:1;color:#aab4ce}
.integrated-counter .ingredient:disabled:hover{transform:translate(-50%,-50%);border-color:transparent;box-shadow:none}
.integrated-counter .mixing-deck{position:absolute;left:17%;right:17%;top:70%;height:17%;min-height:0;padding:0;display:block;border:0;background:none;box-shadow:none;pointer-events:none}
.integrated-counter .mixing-deck:after,.integrated-counter .tools-art{display:none}
.integrated-counter .mix-glass-art{display:block;position:absolute;left:50%;bottom:27px;width:76px;height:76px;margin:0;transform:translateX(-50%);background:url("assets/items/mixing-cup.webp") center/contain no-repeat;filter:drop-shadow(0 5px 2px #020416);image-rendering:pixelated;opacity:.92}
.integrated-counter .mix-zone{position:absolute;inset:0;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 4px 10px}
.integrated-counter .mix-zone .deck-label{display:none}
.integrated-counter .selected-row{width:100%;height:auto;min-height:24px;display:flex;gap:4px;align-items:center;justify-content:center;flex-wrap:wrap;overflow:visible}
.integrated-counter .selected-row .mix-chip{width:auto;height:auto;min-height:20px;padding:3px 6px;border:1px solid #fff;border-radius:4px;background:#070b20e6;color:#fff;font:700 8px Consolas,"Microsoft YaHei UI",sans-serif;box-shadow:0 0 0 2px var(--dot);white-space:nowrap}
.integrated-counter .empty-hint{padding:5px 9px;border:1px solid #66ddff;border-radius:5px;background:#060a1ddd;color:#e5f8ff;font-size:9px}
.integrated-counter .finished-zone{position:absolute;right:-4%;top:-12%;width:82px;height:108px;pointer-events:none}
.integrated-counter .finished-zone .deck-label{display:none}
.integrated-counter .finished-zone:after{display:none}
.integrated-counter .cocktail-art{width:76px;height:88px;margin:0 auto;background-size:500% 400%;opacity:0;transition:opacity .15s,filter .15s}
.integrated-counter .cocktail-art.ready{opacity:1}
.integrated-counter .cocktail-art.planet-ring-art{background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important}
.integrated-counter .finished-zone small{display:block;margin-top:-7px;padding:2px 4px;border-radius:4px;background:#05091edb;color:#fff;font-size:8px}
.integrated-counter .action-row{position:absolute;left:10px;right:10px;bottom:calc(8px + var(--safe-bottom));height:58px;padding:0;display:grid;grid-template-columns:56px 56px 1fr;gap:8px;pointer-events:auto}
.integrated-counter .minor-btn,.integrated-counter .primary-btn{min-height:48px;background-color:#10183cdd;backdrop-filter:blur(2px)}
@media(max-height:760px){.integrated-counter{height:100%}.integrated-counter .ingredient{width:46px;height:46px;min-width:46px;min-height:46px;margin:0;transform:translate(-50%,-50%)}.integrated-counter .ingredient:hover,.integrated-counter .ingredient:focus-visible,.integrated-counter .ingredient.selected{transform:translate(-50%,-54%)}.integrated-counter .mixing-deck{height:15%}.integrated-counter .action-row{height:54px}}

/* Supplied logo artwork is visually embedded into the painted header. */
.topbar .brand{width:94px;height:54px;flex:none;background:none;filter:none;transform:none;text-shadow:none}
.topbar .brand>*{opacity:0;pointer-events:none}

/* User-supplied people artwork and trapezoid ingredient arrangement. */
.guest-art{background-image:url("assets/guests-v2/guest-1.webp");background-size:contain;background-position:center bottom;background-repeat:no-repeat}
.hunter-card .portrait img{mix-blend-mode:normal;object-fit:contain;object-position:center bottom;background:linear-gradient(180deg,#f7f2e9,#cfd8ef)}
.integrated-counter .left-edge-hotspot img,.integrated-counter .right-edge-hotspot img{width:46px;height:52px}
.integrated-counter .upper-hotspot b{bottom:-14px}
.integrated-counter .lower-hotspot b{bottom:-14px}
.integrated-counter .left-edge-hotspot b{left:42%;bottom:-15px}
.integrated-counter .right-edge-hotspot b{left:58%;bottom:-15px}

/* Readability pass: larger spaced ingredients, frameless labels, image-only mixing pad. */
.game{width:min(100vw,560px)}
.integrated-counter .ingredient{width:66px;height:66px;min-width:66px;min-height:66px}
.integrated-counter .ingredient img{width:58px;height:58px}
.integrated-counter .left-edge-hotspot img,.integrated-counter .right-edge-hotspot img{width:55px;height:64px}
.integrated-counter .ingredient b,.integrated-counter .ingredient.selected b,.integrated-counter .ingredient:disabled b{min-width:0;max-width:none;padding:1px 2px;border-color:transparent;background:transparent;box-shadow:none;color:#fff;font-size:10px;line-height:1.1;text-shadow:0 2px 1px #020414,1px 0 #020414,-1px 0 #020414;white-space:nowrap}
.integrated-counter .upper-hotspot b,.integrated-counter .lower-hotspot b{bottom:-9px}
.integrated-counter .left-edge-hotspot b,.integrated-counter .right-edge-hotspot b{bottom:-9px}
.integrated-counter .selected-row,.integrated-counter .finished-zone small{display:none!important}
.integrated-counter .mix-glass-art{bottom:1px;width:88px;height:88px}
.integrated-counter .finished-zone{top:2%}
@media(max-width:430px){.integrated-counter .ingredient{width:58px;height:58px;min-width:58px;min-height:58px}.integrated-counter .ingredient img{width:52px;height:52px}.integrated-counter .left-edge-hotspot img,.integrated-counter .right-edge-hotspot img{width:49px;height:57px}.integrated-counter .ingredient b,.integrated-counter .ingredient.selected b,.integrated-counter .ingredient:disabled b{font-size:9px}.integrated-counter .mix-glass-art{width:82px;height:82px}}

/* Counter spacing refinement: preserve the trapezoid while improving breathing room. */
.integrated-counter .upper-hotspot b,.integrated-counter .lower-hotspot b,.integrated-counter .left-edge-hotspot b,.integrated-counter .right-edge-hotspot b{bottom:-15px}
.integrated-counter .action-row{bottom:calc(22px + var(--safe-bottom))}

/* Scene integration: ingredients sit in a recessed pixel counter instead of floating. */
.integrated-counter .ingredient-shelf:before{content:"";position:absolute;z-index:0;left:21%;right:21%;top:50.5%;height:23%;clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);background:linear-gradient(180deg,#68679a 0 3%,#191735 4% 46%,#080b20 47% 51%,#252147 52% 94%,#666294 95% 100%);box-shadow:inset 0 7px 10px #020417cc,0 7px 0 #050616;filter:drop-shadow(0 4px 2px #02030b);pointer-events:none}
.integrated-counter .ingredient-shelf:after{content:"";position:absolute;z-index:0;left:18%;right:18%;top:74%;height:3px;background:#080a1d;box-shadow:0 2px #7068a1,0 7px 10px #02030c;pointer-events:none}
.integrated-counter .ingredient{z-index:1}
.integrated-counter .ingredient:after{content:"";position:absolute;z-index:0;left:15%;right:15%;bottom:5px;height:8px;border-radius:50%;background:#020414a8;filter:blur(1px);pointer-events:none}
.integrated-counter .ingredient img{filter:drop-shadow(0 3px 1px #020416a8)}
.integrated-counter .ingredient.selected img{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 4px 1px #ff4bd4)}
.integrated-counter .ingredient b,.integrated-counter .ingredient.selected b,.integrated-counter .ingredient:disabled b{color:#f5f3ff;text-shadow:0 2px 1px #020414,1px 0 #020414,-1px 0 #020414}
.integrated-counter .upper-hotspot b{bottom:-9px}
.integrated-counter .lower-hotspot b{bottom:-12px}
.integrated-counter .left-edge-hotspot b,.integrated-counter .right-edge-hotspot b{bottom:-12px}

/* The mixing pad stays empty until a finished drink is ready. */
.integrated-counter .mix-glass-art{display:none!important}
.integrated-counter .finished-zone{left:50%;right:auto;top:0;width:100px;height:100px;transform:translateX(-50%)}
.integrated-counter .cocktail-art{width:92px;height:96px;margin:0 auto}

/* Guest and order form one left-aligned service row. */
.guest{left:12px;width:154px;height:172px}
.guest-art{width:150px;height:158px}
.guest small{left:20px;right:20px;border-width:1px;background:#071026b8;box-shadow:2px 2px 0 #020416a6;font-size:12px;padding:3px 6px}
.order-card{left:174px;right:12px;width:auto}

@media(max-width:430px){.guest{left:3px;width:132px;height:166px}.guest-art{width:132px;height:152px}.guest small{left:13px;right:13px;font-size:11px}.order-card{left:136px;right:7px;width:auto;padding-left:18px}.integrated-counter .ingredient-shelf:before{left:19%;right:19%}}

/* Design system consolidation: two font families and semantic game colors. */
:root{
  --font-cn:"Microsoft YaHei UI","PingFang SC","Noto Sans SC",sans-serif;
  --font-pixel:Consolas,"Courier New",monospace;
  --space-bg:#060d23;
  --ui-cyan:#35d7ee;
  --ui-cyan-soft:#8af4ff;
  --action-purple:#7545d8;
  --action-purple-hi:#9b63ef;
  --reward-gold:#ffd464;
  --state-error:#ef5261;
  --state-success:#37dfc1;
  --surface-navy:#101b3d;
  --surface-navy-solid:#1c2a52;
}

body,button{font-family:var(--font-cn)}
.order-card h1,.panel h2,.menu-item h3,.primary-btn span,.service-dialogue b{font-family:var(--font-cn);font-weight:800;letter-spacing:.02em}
.brand,#totalCurrency,#shiftTime,#servedCount,#streakCount,.price,.reward,.summary-grid b,.patience b,.timer-chip b{font-family:var(--font-pixel);font-variant-numeric:tabular-nums}
.eyebrow,.primary-btn small,.timer-chip span,.counter-edge span,.deck-label{font-family:var(--font-pixel);letter-spacing:.16em}
.hunter-request,.hunter-request small,.recipe,.patience,.ingredient b,.guest small,.menu-item p,.result-copy,.target-reminder,.hunter-card,.panel-btn,.minor-btn{font-family:var(--font-cn)}

body{background:radial-gradient(circle at 50% 8%,#18295c 0,var(--space-bg) 52%,#020512 100%)}
.game{border-color:#244d73;background-color:var(--space-bg)}
.game:after{background:linear-gradient(180deg,rgba(3,10,31,.13),rgba(3,11,32,.16) 48%,rgba(2,8,25,.19));}
.topbar{background:linear-gradient(#06112fe8,#06112f80)}
.stat-chip,.timer-chip,.icon-btn{border-color:var(--ui-cyan);background:var(--surface-navy);box-shadow:2px 2px 0 #03071a,inset 0 0 10px #183b70}
.stat-chip .dust,.price,.reward,.summary-grid b,.star-counter b{color:var(--reward-gold);text-shadow:0 0 8px #d49b2a80}
.timer-chip span,.eyebrow,.counter-edge span,.deck-label{color:var(--ui-cyan-soft)}
.timer-chip.warning{background:#572036;border-color:var(--state-error)}

.order-card{box-shadow:7px 7px 0 #06081d,10px 10px 0 var(--ui-cyan);filter:brightness(1.03)}
.order-card:before{background:var(--ui-cyan)}
.order-card .eyebrow{color:#4d4a9c}
.order-card .price{color:#9a6a00;text-shadow:none}
.hunter-request{border-color:#101a34}
.patience i{background:linear-gradient(90deg,var(--state-success),var(--ui-cyan))}
.guest{filter:brightness(1.05) drop-shadow(0 7px 0 #020513)}
.guest small{border-color:var(--ui-cyan);background:#07142be0;color:#fff}
.star-counter span{border-color:var(--ui-cyan);background:#07132ee8}

.integrated-counter .ingredient{filter:brightness(1.04);}
.integrated-counter .ingredient:hover,.integrated-counter .ingredient:focus-visible,.integrated-counter .ingredient.selected{border-color:#fff;box-shadow:0 0 0 3px #20dce5c9,0 0 18px #20dce58f;filter:brightness(1.18) saturate(1.08)}
.integrated-counter .ingredient.selected:before{border-color:var(--state-success);box-shadow:inset 0 0 12px #37dfc155}
.integrated-counter .ingredient.selected img{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 4px 2px #20dce5)}

.primary-btn,.integrated-counter .primary-btn{background:linear-gradient(135deg,var(--action-purple),var(--action-purple-hi));border-color:#10142e;box-shadow:4px 4px 0 #050718,inset 0 0 0 2px #bca3ff}
.primary-btn:disabled{filter:grayscale(.65);opacity:.55}
.integrated-counter .minor-btn{background:var(--surface-navy-solid);border-color:#2baec4;color:#f4f8ff;box-shadow:3px 3px 0 #03071a;opacity:1;backdrop-filter:none}
.integrated-counter .minor-btn:disabled{background:#182645;border-color:#356b7b;color:#cbd8ec;opacity:.78}
.panel{box-shadow:8px 8px 0 var(--action-purple),0 0 25px #2bdcff55}
.menu-item{box-shadow:3px 3px 0 #315f7a}
.result-panel blockquote{border-left-color:var(--ui-cyan)}
.result-panel.is-success{border-color:var(--state-success);box-shadow:8px 8px 0 #176f68,0 0 25px #37dfc166}
.result-panel.is-success .result-glyph,.result-panel.is-success .eyebrow{color:var(--state-success)}
.result-panel.is-error{border-color:var(--state-error);box-shadow:8px 8px 0 #7d2431,0 0 25px #ef526166}
.result-panel.is-error .result-glyph,.result-panel.is-error .eyebrow{color:var(--state-error)}
.panel-btn.danger{color:#ff9aa4;border-color:var(--state-error)}

button:focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--ui-cyan)}

/* 2026-08 terminal HUD + pixel shape system */
:root{
  --shape-cut:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  --shape-cut-lg: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);
  --terminal:#07142f;
  --terminal-hi:#111b45;
  --terminal-purple:#21184c;
}

/* One coherent management-game HUD. The painted logo stays in the scene, not in the grid. */
.topbar{
  --hud-start:28%;
  height:76px;
  padding:8px 10px 9px;
  grid-template-columns:var(--hud-start) minmax(88px,1fr) 94px 48px 48px;
  gap:3px;
  align-items:center;
  background:linear-gradient(180deg,#030a20f2,#071534d9);
  border-bottom:2px solid #1baec8;
  box-shadow:0 4px 0 #020617,0 7px 0 #1f3767;
}
.topbar:before{
  content:"";
  position:absolute;
  z-index:0;
  left:calc(var(--hud-start) + 8px);
  right:8px;
  top:7px;
  bottom:8px;
  clip-path:var(--shape-cut);
  background:#07132ee8;
  border:1px solid var(--ui-cyan);
  box-shadow:inset 0 0 16px #1b5f8d52;
}
.topbar > *{position:relative;z-index:1}
.brand-slot{min-width:0;height:100%;pointer-events:none}
.stat-chip,.timer-chip,.icon-btn{
  min-width:0;
  min-height:48px;
  padding:5px 7px;
  border:1px solid #2fd6ec;
  border-radius:2px;
  clip-path:var(--shape-cut);
  background:linear-gradient(180deg,#152754e8,#09142de8);
  box-shadow:inset 0 0 0 2px #24467266;
}
.stat-chip{width:100%;justify-content:flex-start;gap:7px;padding-left:12px;text-align:left}
.stat-chip .dust{font-size:16px}
.hud-copy{display:flex;min-width:0;flex-direction:column;line-height:1}
.hud-copy small,.timer-chip span,.icon-btn small{font:700 7px/1.15 var(--font-cn);color:#9defff;white-space:nowrap}
.hud-copy b,.timer-chip b{font:800 16px/1.1 var(--font-pixel);color:#fff}
.timer-chip{justify-content:center;text-align:center;gap:1px}
.icon-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px}
.icon-btn>span{font:800 15px/1 var(--font-pixel);color:#ecf8ff}
.icon-btn small{font-size:7px;color:#b8eaf2}
.pause-btn{width:auto;font-size:inherit}

/* Guest identity is a passive two-level nameplate, not a CTA. */
.guest-nameplate{
  position:absolute;
  z-index:3;
  left:16px;
  right:16px;
  bottom:0;
  min-height:31px;
  padding:3px 10px 4px 14px;
  clip-path:var(--shape-cut);
  background:linear-gradient(90deg,#071126f2,#101a37e8);
  border-left:2px solid var(--ui-cyan);
  border-right:2px solid #315b7f;
  box-shadow:0 3px 0 #020516;
  text-align:left;
  pointer-events:none;
}
.guest-nameplate:before{content:"";position:absolute;left:6px;top:7px;bottom:7px;width:2px;background:var(--ui-cyan)}
.guest-nameplate span{display:block;font:700 6px/1 var(--font-pixel);letter-spacing:.18em;color:#7cdcec}
.guest-nameplate strong{display:block;margin-top:2px;overflow:hidden;font:800 12px/1.1 var(--font-cn);color:#fff;text-overflow:ellipsis;white-space:nowrap}

/* Main panel language: dark pixel-cut terminals with cyan structure. */
.order-card{
  min-height:180px;
  padding:13px 13px 12px 22px;
  clip-path:var(--shape-cut-lg);
  color:#f5f8ff;
  border:2px solid var(--ui-cyan);
  background:
    linear-gradient(90deg,#1dd5ea18 1px,transparent 1px) 0 0/18px 18px,
    linear-gradient(180deg,#111b46f7,#17133bf7 62%,#090f2af7);
  box-shadow:6px 7px 0 #020617,9px 10px 0 #1ba7c099;
  filter:none;
}
.order-card:before{width:7px;background:linear-gradient(var(--ui-cyan),#3167bb)}
.order-card:after{content:"GCB // LIVE";position:absolute;right:12px;bottom:7px;font:700 6px/1 var(--font-pixel);letter-spacing:.16em;color:#45d7e977}
.order-card .eyebrow{color:#86ecf6;font-size:8px}
.order-card h1{margin:7px 0 8px;color:#fff;font-size:24px;line-height:1.1;text-shadow:2px 2px 0 #020617}
.order-card .price{
  padding:3px 7px;
  color:var(--reward-gold);
  border:1px solid #9b7830;
  border-radius:2px;
  background:#2a2441c9;
  text-shadow:0 0 8px #eabf5266;
}
.hunter-request{
  padding:5px 9px;
  gap:7px;
  border:1px solid #43d5e9;
  border-radius:3px;
  clip-path:var(--shape-cut);
  background:#091936e8;
  color:#f6fbff;
  box-shadow:inset 0 0 0 2px #29427488;
}
.hunter-request b{font-size:14px}
.hunter-request small{color:#a9bddd;font-size:9px}
.recipe{margin:8px 0 9px;gap:5px}
.recipe span{padding:3px 6px;border:1px solid #397a9b;border-radius:8px;background:#101f40;color:#e8f8ff;font-size:9px}
.patience{color:#d4e5f3;font-size:9px;grid-template-columns:auto 1fr auto;gap:6px}
.patience>div{height:8px;border-color:#030719;background:#26314f}
.patience b{color:#fff}
.star-counter span{border-radius:3px;clip-path:var(--shape-cut);box-shadow:2px 2px 0 #020617}

/* Recessed ingredient deck: wider trapezoid spacing and larger readable labels. */
.integrated-counter .ingredient-shelf:before{
  left:14%;right:14%;top:49.5%;height:27%;
  background:linear-gradient(180deg,#77729e 0 3%,#17162f 4% 47%,#050819 48% 52%,#242044 53% 94%,#77709d 95% 100%);
}
.integrated-counter .ingredient-shelf:after{left:12%;right:12%;top:77%;}
.integrated-counter .ingredient{
  width:60px;height:60px;min-width:60px;min-height:60px;
  border-radius:3px;
  transition:filter .12s steps(2),border-color .12s,box-shadow .12s;
}
.integrated-counter .ingredient:before{inset:2px;border-radius:2px}
.integrated-counter .ingredient img{width:54px;height:54px;transform:translate(-50%,-56%)}
.integrated-counter .left-edge-hotspot,.integrated-counter .right-edge-hotspot{width:44px;height:56px;min-width:44px;min-height:56px}
.integrated-counter .left-edge-hotspot img,.integrated-counter .right-edge-hotspot img{width:42px;height:54px}
.integrated-counter .ingredient b,.integrated-counter .ingredient.selected b,.integrated-counter .ingredient:disabled b{
  bottom:-12px;
  padding:0;
  min-width:0;
  max-width:none;
  border:0;
  background:transparent;
  box-shadow:none;
  font-family:var(--font-cn);
  font-size:12px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.01em;
  white-space:nowrap;
}
.integrated-counter .upper-hotspot b{bottom:-10px}
.integrated-counter .lower-hotspot b,.integrated-counter .left-edge-hotspot b,.integrated-counter .right-edge-hotspot b{bottom:-12px}
.integrated-counter .ingredient:hover,.integrated-counter .ingredient:focus-visible,.integrated-counter .ingredient.selected{
  transform:translate(-50%,-52%);
  border-color:#fff;
  box-shadow:0 0 0 3px #20dce5bf,0 0 13px #20dce59e;
}
.integrated-counter .ingredient:disabled:hover{transform:translate(-50%,-50%)}

/* The finished drink owns a separate lower pad and cannot intersect ingredient hit boxes. */
.integrated-counter .mixing-deck{left:36%;right:36%;top:75.5%;height:12%}
.integrated-counter .finished-zone{left:50%;top:0;width:110px;height:104px;transform:translateX(-50%)}
.integrated-counter .cocktail-art{
  width:104px;height:104px;margin:0 auto;
  background-position:center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  filter:none;
}
.integrated-counter .cocktail-art.ready{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 5px 3px #21d7ec)}
.integrated-counter .finished-zone small{display:none}
.drink-icon{background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important}

/* Shared cut-corner hierarchy. Pills remain reserved for recipe/status tags. */
.panel{
  border-radius:0;
  clip-path:var(--shape-cut-lg);
  border-color:var(--ui-cyan);
  background:linear-gradient(155deg,#101e45,#201847);
}
.menu-item,.summary-grid div,.service-dialogue{border-radius:3px;clip-path:var(--shape-cut)}
.primary-btn,.minor-btn,.panel-btn,.close-btn,.hunter-card{
  border-radius:3px;
  clip-path:var(--shape-cut);
}
.hunter-panel{border-radius:0}
.close-btn{border-radius:2px}
.integrated-counter .minor-btn,.integrated-counter .primary-btn{border-radius:3px;clip-path:var(--shape-cut)}
.integrated-counter .minor-btn,.integrated-counter .minor-btn:disabled{background:#17264be8;border-color:#3699ad;color:#eef8ff;opacity:.92}
.reward{font-family:var(--font-cn);font-weight:800;letter-spacing:.02em}

@media(max-width:430px){
  .topbar{grid-template-columns:var(--hud-start) minmax(78px,1fr) 82px 42px 42px;padding-inline:6px;gap:2px}
  .topbar:before{left:calc(var(--hud-start) + 5px);right:5px}
  .stat-chip,.timer-chip,.icon-btn{min-height:46px;padding-inline:4px}
  .stat-chip{padding-left:10px}
  .hud-copy small,.timer-chip span,.icon-btn small{font-size:6px}
  .hud-copy b,.timer-chip b{font-size:14px}
  .guest-nameplate{left:10px;right:10px;padding-left:12px}
  .guest-nameplate strong{font-size:11px}
  .order-card{padding:12px 10px 11px 18px;min-height:180px}
  .order-card h1{font-size:21px}
  .hunter-request b{font-size:13px}
  .recipe span{font-size:8px;padding:3px 5px}
  .integrated-counter .ingredient{width:46px;height:46px;min-width:46px;min-height:46px}
  .integrated-counter .ingredient img{width:42px;height:42px}
  .integrated-counter .left-edge-hotspot,.integrated-counter .right-edge-hotspot{width:40px;height:48px;min-width:40px;min-height:48px}
  .integrated-counter .left-edge-hotspot img,.integrated-counter .right-edge-hotspot img{width:38px;height:46px}
  .integrated-counter .ingredient b,.integrated-counter .ingredient.selected b,.integrated-counter .ingredient:disabled b{font-size:11px;bottom:-13px}
  .integrated-counter .upper-hotspot b{bottom:-11px}
  .integrated-counter .ingredient-shelf:before{left:10%;right:10%}
  .integrated-counter .ingredient-shelf:after{left:8%;right:8%}
  .integrated-counter .cocktail-art{width:94px;height:96px}
}

/* 2026-08-28 mobile clarity pass: one quiet terminal surface above the bar. */
:root{--quiet-frame:#2b4c7d}
.topbar{top:6px}
.order-card{background:#111b46!important;border-color:var(--quiet-frame)!important;box-shadow:6px 7px 0 #020617,9px 10px 0 #142743!important}
.order-card:after{display:none}
.order-card:before{background:#315783!important}
.recipe{flex-wrap:nowrap!important;gap:3px!important;margin:6px 0 7px!important}
.recipe span{flex:0 1 auto;white-space:nowrap;font-size:10px!important;padding:2px 4px!important}
.star-counter span{font-size:12px!important;border-color:var(--quiet-frame)!important;background:#0b1737!important;box-shadow:2px 2px 0 #020617!important}
.hunter-card b{font-size:13px!important}
.hunter-card small{font-size:10px!important}
.target-reminder{font-size:13px!important}

/* Result portraits must be visible even before their entrance animation runs. */
.service-scene img{z-index:1;right:-1%;width:68%;height:100%;transform:translateX(0);animation:none}
.service-scene img.is-entering{animation:hunterEnter .42s cubic-bezier(.2,.9,.2,1) both}
@keyframes hunterEnter{from{transform:translateX(110%)}to{transform:translateX(0)}}

/* Successful deliveries show the prepared drink in the hunter's hand space. */
.service-drink{position:absolute;z-index:3;right:31%;bottom:18px;width:82px;filter:drop-shadow(0 5px 4px #020617b8);pointer-events:none}.service-drink[hidden]{display:none}.service-drink img{display:block!important;position:static!important;width:82px!important;height:82px!important;object-fit:contain;transform:none!important;animation:none!important;filter:drop-shadow(0 0 4px #d4f6ff)!important}
@media(max-width:430px){.service-drink{right:33%;bottom:15px;width:66px}.service-drink img{width:66px!important;height:66px!important}}

/* Long delivery quotes retain the current type size and wrap inside their dialogue panel. */
.service-dialogue blockquote{overflow-wrap:anywhere;word-break:break-word}

/* The pause controls move upward as one group while retaining 44px+ touch targets. */
.pause-heading{transform:translateY(-12px);margin-bottom:-12px}.pause-panel #resumeBtn{transform:translateY(-12px);margin-bottom:-2px}.pause-panel #pauseMenuBtn{margin-top:-2px}

/* Latest mobile review: place the status cells directly above the order. */
.topbar{top:44px}
.hunter-request,.recipe span{border-color:var(--quiet-frame)!important}
.order-card .price{flex:0 0 84px;min-width:84px;white-space:nowrap;text-align:center}
.guest-art{transform:scale(1.06);transform-origin:left bottom}

/* Figma 3:3: selected ingredients are represented above the glass, not on the source buttons. */
.figma-hotspot,.figma-hotspot:hover,.figma-hotspot:focus-visible,.figma-hotspot.selected,.figma-hotspot.just-added{
  appearance:none!important;outline:0!important;border-color:transparent!important;background:transparent!important;
  box-shadow:none!important;filter:none!important;transform:none!important;animation:none!important;transition:none!important
}
.ingredient-display-slots{
  position:absolute;z-index:5;left:calc(50% - 1.1538462%);top:73.9659367%;width:49.4871795%;height:3.7712895%;
  transform:translateX(-50%);pointer-events:none
}
.ingredient-slot{
  position:absolute;top:9.6774194%;width:15.2331606%;aspect-ratio:1;border:1px solid rgba(102,128,204,.2);border-radius:6px;
  background:rgba(31,26,51,.4);overflow:hidden
}
.ingredient-slot:nth-child(1){left:14.507772%}.ingredient-slot:nth-child(2){left:34.473057%}
.ingredient-slot:nth-child(3){left:54.438342%}.ingredient-slot:nth-child(4){left:74.403627%}
.ingredient-slot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 65%;image-rendering:pixelated}

/* V1.1.0 progression and cross-device text-size guard. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.hud-value-row{display:flex;align-items:baseline;gap:5px;min-width:0;white-space:nowrap}
#playerLevel{font:800 14px/1.1 var(--font-pixel);color:#ffd767;font-variant-numeric:tabular-nums}

/* Keep the status strip and order card separated by the same vertical rhythm. */
:root{--upper-scene-shift:36px}
.topbar{top:calc(44px + var(--upper-scene-shift))!important;--hud-start:22%}
.order-card{top:calc(10px + var(--upper-scene-shift))!important}

.level-overlay{z-index:55;background:rgba(2,5,18,.7)}
.levelup-panel{
  width:min(100%,398px);
  border-color:#f0ba3b!important;
  background:linear-gradient(155deg,#30220c,#15152f 70%);
  box-shadow:7px 7px 0 #a66b13,0 0 24px #f4c64c88!important;
}
.levelup-panel .result-glyph{color:#ffd767;text-shadow:0 0 18px #f7bd38}
.levelup-panel h2{color:#fff3cd}
.levelup-panel .result-copy{color:#ffe7a2}

@media(max-width:430px){
  .topbar{--hud-start:19%;grid-template-columns:var(--hud-start) minmax(104px,1fr) 82px 42px 42px}
  .stat-chip{padding-left:8px;gap:4px}
  .hud-copy b,.timer-chip b{font-size:13px}
  #playerLevel{font-size:12px}
  .hud-value-row{gap:3px}
}

/* Final alignment pass from mobile review. */
.topbar{top:44px}
.hunter-request,.recipe span{border-color:var(--quiet-frame)!important}
.order-card .price{flex:0 0 84px;min-width:84px;white-space:nowrap;text-align:center}
.guest-art{transform:scale(1.06);transform-origin:left bottom}

/* Figma tutorial overlay — node 59:2, scaled with the fixed-ratio game scene. */
.tutorial-overlay{position:absolute;inset:0;z-index:90;background:rgba(0,0,0,.55);cursor:pointer;opacity:1;transition:opacity .3s ease-out;overflow:hidden}
.tutorial-overlay.is-dismissing{opacity:0;pointer-events:none}
#cocktailGame.tutorial-active .guest,#cocktailGame.tutorial-active .order-card,#cocktailGame.tutorial-active .star-counter,#cocktailGame.tutorial-active .action-row{visibility:hidden}
.tutorial-focus{position:absolute;border:1px dashed #0849c9f8;border-radius:6px;background:rgba(25,221,255,.06);box-shadow:0 0 10px rgba(51,220,255,.24)}
.tutorial-focus-fruit{left:18.72%;top:51.09%;width:66.15%;height:8.76%}
.tutorial-focus-mixer{left:22.56%;top:61.8%;width:53.85%;height:8.76%}
.tutorial-focus-water{left:0;top:60.83%;width:21.79%;height:27.37%}
.tutorial-focus-spirits{left:78.21%;top:60.83%;width:21.79%;height:27.37%}
.tutorial-tip{position:absolute;display:flex;align-items:center;justify-content:space-around;color:#eef8ff;background:rgba(20,15,46,.9);border:transparent;border-radius:4px;font:600 14px/1.15 "Microsoft YaHei","PingFang SC",sans-serif;text-shadow:0 1px 2px #050718}
.tutorial-tip-fruit{left:16.92%;top:58.39%;width:68.72%;height:2.01%;padding:0 2px}
.tutorial-tip-fruit span{flex:1;text-align:center;white-space:nowrap}
.tutorial-tip-mixer{left:23.85%;top:69.61%;width:54.36%;height:2.01%;padding:0 3px}
.tutorial-tip-mixer span{flex:1;text-align:center;white-space:nowrap}
.tutorial-tip-water{left:2.82%;top:71.65%;width:14.1%;height:2.01%}
.tutorial-tip-rum{left:81.03%;top:71.65%;width:16.15%;height:2.01%}
.tutorial-tip-soda{left:1.03%;top:87.96%;width:16.67%;height:2.01%}
.tutorial-tip-vodka{left:82.05%;top:87.96%;width:17.44%;height:2.01%}
.tutorial-bottom{position:absolute;left:0;right:0;bottom:0;height:6.08%;background:linear-gradient(180deg,rgba(13,8,31,0),rgba(13,8,31,.92))}
.tutorial-dismiss{position:absolute;left:29.23%;top:88.93%;width:40.51%;height:5.47%;margin:0;display:grid;place-items:center;color:#fff;background:rgba(12,19,54,.92);border:1px solid #55eafa;border-radius:5px;font:600 14px/1.1 "Microsoft YaHei","PingFang SC",sans-serif;box-shadow:0 0 12px rgba(38,216,255,.25)}

@media(max-height:760px){
  .integrated-counter .ingredient{width:46px;height:46px;min-width:46px;min-height:46px}
  .integrated-counter .ingredient img{width:42px;height:42px}
  .integrated-counter .left-edge-hotspot,.integrated-counter .right-edge-hotspot{width:40px;height:48px;min-width:40px;min-height:48px}
  .integrated-counter .left-edge-hotspot img,.integrated-counter .right-edge-hotspot img{width:38px;height:46px}
  .integrated-counter .mixing-deck{top:75%;height:12%}
  .integrated-counter .cocktail-art{width:80px;height:80px}
  .integrated-counter .finished-zone{width:88px;height:84px}
}

/* Figma 28:86 — fixed 390 × 822 interaction coordinate system. */
.figma-mixing-scene{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.figma-hotspots{position:absolute;inset:0;pointer-events:none}
.figma-hotspot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);margin:0;padding:0;border:2px solid transparent;border-radius:2px;background:transparent;box-shadow:none;clip-path:none;pointer-events:auto;cursor:pointer;transition:filter .12s steps(2),border-color .12s,box-shadow .12s}
.figma-hotspot:hover,.figma-hotspot:focus-visible{outline:0;border-color:#61f2ff;box-shadow:inset 0 0 10px #39deff55,0 0 8px #39deff99;filter:brightness(1.2)}
.figma-hotspot.selected{border-color:#fff;box-shadow:0 0 0 2px #32dfe8,0 0 10px #32dfe8aa;background:#35deee18}
.figma-hotspot:disabled{cursor:default;border-color:transparent;box-shadow:none;background:transparent}
.drink-glass,.finished-drink{position:absolute;left:40.5128205%;top:77.7372263%;width:19.2307692%;height:9.7323601%;pointer-events:none}
.drink-glass{filter:drop-shadow(0 3px 2px #020516cc)}
.glass-layer{position:absolute;height:calc(15 / 80 * 100%);opacity:0;transition:opacity .12s steps(2),background-color .12s steps(2);z-index:1;clip-path:polygon(7% 0,93% 0,100% 100%,0 100%)}
.glass-layer.filled{opacity:.86}
.glass-layer-1{left:calc(17 / 75 * 100%);bottom:calc(9 / 80 * 100%);width:calc(41 / 75 * 100%)}
.glass-layer-2{left:calc(15 / 75 * 100%);bottom:calc(25 / 80 * 100%);width:calc(45 / 75 * 100%)}
.glass-layer-3{left:calc(13 / 75 * 100%);bottom:calc(41 / 80 * 100%);width:calc(49 / 75 * 100%)}
.glass-layer-4{left:calc(11 / 75 * 100%);bottom:calc(57 / 80 * 100%);width:calc(53 / 75 * 100%)}
.glass-image{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.finished-drink{z-index:3;background-position:center;background-repeat:no-repeat;background-size:contain;image-rendering:pixelated;opacity:0;transform:scale(.84);filter:drop-shadow(0 0 5px #5deaff);transition:opacity .14s steps(2),transform .14s steps(2)}
.finished-drink{top:74.5%}
.finished-drink.ready{opacity:1;transform:scale(1)}
.integrated-counter .mixing-deck{display:none!important}
.integrated-counter .action-row{z-index:10}

/* Preserve the 390:822 Figma composition: resize the complete scene rather
   than reflowing the artwork and its interaction hotspots. */
.game{width:min(100vw,560px);height:auto;aspect-ratio:390/822;min-height:0;max-height:none}

/* 2026-08-26 visual QA: keep scene art vivid and simplify interaction emphasis. */
.game:after{
  background:transparent;
}

/* The four HUD cells retain their cyan frames; the shared outer frame is neutral. */
.topbar{
  border-color:transparent;
  box-shadow:none;
}
.topbar:before{
  border-color:transparent;
  box-shadow:none;
}

/* Passive traveler nameplate: one structural accent on the left only. */
.guest-nameplate{
  border-right-color:transparent;
}
.guest-nameplate:before{
  display:none;
}

/* Improve small-screen readability without changing order-card information. */
.recipe span{
  font-size:13px;
}
.patience,
.patience b{
  font-size:11px;
}

/* Summary/result values use one readable saturated deep-blue semantic color. */
.summary-grid b,
#reward,
.reward{
  color:#2864d7;
  text-shadow:0 0 8px #8eb8ff66;
}

/* A filled glass narrows toward the base, matching the transparent glass art. */
.glass-layer{
  clip-path:polygon(0 0,100% 0,93% 100%,7% 100%);
}

/* Selection is intentionally quiet: one translucent white outline, no cyan halo. */
.figma-hotspot:hover,
.figma-hotspot:focus-visible,
.figma-hotspot.selected{
  border-color:rgba(255,255,255,.48);
  background:rgba(255,255,255,.035);
  box-shadow:none;
  filter:brightness(1.06);
}
.figma-hotspot:focus-visible{
  outline:2px solid rgba(255,255,255,.64);
  outline-offset:2px;
}

/* Finished cocktail replaces the empty glass at the same anchor, 20% larger. */
.finished-drink.ready{
  transform:scale(1.2);
}

/* 2026-08-27 splash, feedback and final interaction polish */
[hidden]{display:none!important}
.splash-screen{
 position:relative;width:min(100vw,560px);height:auto;aspect-ratio:390/822;min-height:0;max-height:none;
 margin:0 auto;overflow:hidden;background:#0d081f;color:#fff;isolation:isolate
}
.splash-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.splash-screen:after{display:none}
.splash-bottom{display:none}
.splash-start{
 position:absolute;z-index:2;left:50%;top:84%;width:66.154%;height:auto;aspect-ratio:258/74;margin:0;padding:0;
 transform:translate(-50%,-50%);clip-path:none;border:0;background:transparent;box-shadow:none;color:#fff
}
.splash-start img{display:block;width:100%;height:100%;object-fit:fill;image-rendering:pixelated;pointer-events:none}
.splash-start:active{transform:translate(-50%,-50%) scale(.96)}
.splash-credit{position:absolute;z-index:2;left:56%;top:88.8%;width:58%;margin:0;color:rgba(255,255,255,.78);font:400 clamp(10px, 2.2vw, 14px)/1.45 var(--font-cn,"Microsoft YaHei UI","PingFang SC",sans-serif);letter-spacing:.01em;text-align:left;pointer-events:none}

/* A rotated phone keeps the whole fixed-ratio scene on screen; both entry and
   gameplay use the same containment rule. */
@media (orientation:landscape) and (max-height:600px){
  .splash-screen,.game{width:min(100vw,calc(100svh * 390 / 822))}
}

/* The topbar itself is only a placement layer; the four children own the frames. */
#cocktailGame .topbar{background:transparent!important;border:0!important;box-shadow:none!important}
#cocktailGame .topbar:before,#cocktailGame .topbar:after{display:none!important}
.hud-copy small,.timer-chip span,.icon-btn small{font-size:9px!important;line-height:1.1}
.timer-chip{justify-content:center}

/* One deep-blue action semantic, replacing the remaining decorative purple CTAs. */
.primary-btn:not(:disabled),.modal-primary:not(:disabled),#restartBtn,#nextOrderBtn,#confirmHunterBtn:not(:disabled),#resumeBtn{
  background:linear-gradient(180deg,#2864d7,#173f86)!important;border-color:#61c8ef!important;box-shadow:4px 4px 0 #020617,inset 0 0 0 2px #8dc8ff44!important
}
#endShiftBtn{background:#303b65!important;border-color:#586994!important;color:#c8d4f2!important}

/* Move the customer/order composition toward the bar and strengthen labels. */
.guest-stage{transform:translateY(42px)}
.star-counter{top:337px}
.star-counter span{font-size:13px!important;padding:7px 10px!important;min-height:34px}
.guest-nameplate{display:flex!important;flex-direction:column;justify-content:center;min-height:48px;padding-block:6px!important;border-right-color:transparent!important}
.guest-nameplate span{font-size:8px!important;line-height:1.1!important}
.guest-nameplate strong{font-size:14px!important;line-height:1.15!important;margin-top:3px!important}
.order-card .eyebrow{font-size:11px!important}
.recipe span{font-size:13px!important}
.patience,.patience b{font-size:12px!important}

/* Ingredient feedback: restore the highlight box and add a position-safe press bounce. */
.figma-hotspot,.figma-hotspot:hover,.figma-hotspot:focus-visible,.figma-hotspot.selected{
  outline:0!important;background:transparent!important;filter:none!important
}
.figma-hotspot:after{content:none!important}
.figma-hotspot:hover,.figma-hotspot:focus-visible{border-color:rgba(255,255,255,.58)!important;box-shadow:0 0 0 2px rgba(255,255,255,.12)!important}
.figma-hotspot.selected{border-color:rgba(255,255,255,.82)!important;box-shadow:0 0 0 2px rgba(255,255,255,.22),0 0 8px rgba(255,255,255,.2)!important}
.figma-hotspot.just-added{animation:ingredientBounce .2s ease-out}
@keyframes ingredientBounce{0%,100%{transform:scale(1)}50%{transform:scale(.85)}}

/* Translucent liquid, with a reflected meniscus and softened joins. */
.glass-layer{border-top:2px solid rgba(255,255,255,.58);box-shadow:inset 0 3px 5px rgba(255,255,255,.14),0 -2px 3px rgba(255,255,255,.12);filter:saturate(1.08);clip-path:polygon(0 0,100% 0,93% 100%,7% 100%)}

/* Results: semantic blues for readable data; error frames use gentle lavender. */
.summary-grid small,.summary-grid span{font-size:11px!important}
.summary-grid b,#reward,.reward{color:#2864d7!important;text-shadow:0 0 8px #8eb8ff66!important}
.result-panel.is-error,.result-panel.error,.result-panel.lost{border-color:#b6a3ff!important;box-shadow:8px 8px 0 #7564ad,0 0 25px #b7a7ff55!important}
.result-copy[hidden]{display:none!important}

/* Seven hunters visible together: owner first, then two rows of three. */
.bottom-overlay#hunterOverlay{align-items:center;padding:12px}
.hunter-panel{width:min(94vw,620px)!important;max-height:94svh!important;padding:18px!important}
.hunter-track{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible!important;padding:5px 0 10px!important}
.hunter-card{min-width:0!important;width:auto!important;min-height:112px;padding:7px!important}
.hunter-card.hunter-1{grid-column:1/-1;display:grid;grid-template-columns:112px 1fr;grid-template-rows:1fr 1fr;column-gap:12px;min-height:82px;align-items:center}
.hunter-card.hunter-1 .portrait{grid-row:1/3;width:112px;height:68px}
.hunter-card.hunter-1 b{align-self:end}
.hunter-card.hunter-1 small{align-self:start}
.hunter-card .portrait{height:64px;background:linear-gradient(145deg,color-mix(in srgb,var(--hunter) 24%,#17233d),#0b1327)!important}
.hunter-card .portrait img{background:linear-gradient(145deg,color-mix(in srgb,var(--hunter) 30%,#f4f6ff),#d5ddec)!important}
.hunter-card b{font-size:11px}.hunter-card small{font-size:8px}

@media(max-width:430px){
  .guest-stage{transform:translateY(34px)}
  .star-counter{top:329px}
  .hunter-panel{padding:12px!important}
  .hunter-panel h2{font-size:21px;margin-bottom:9px}
  .target-reminder{margin:5px 0;font-size:10px}
  .hunter-track{gap:5px}
  .hunter-card{min-height:98px;padding:5px!important}
  .hunter-card .portrait{height:54px}
  .hunter-card.hunter-1{min-height:68px;grid-template-columns:88px 1fr}
  .hunter-card.hunter-1 .portrait{width:88px;height:54px}
  .hunter-card b{font-size:9px;margin-top:3px}.hunter-card small{font-size:7px}
}

/* Final mobile specificity layer: keep the upper scene calm and legible. */
.topbar{top:44px}
.order-card{background:#111b46!important;border-color:var(--quiet-frame)!important;box-shadow:6px 7px 0 #020617,9px 10px 0 #142743!important}
.order-card:after{display:none}
.order-card:before{background:#315783!important}
.recipe{flex-wrap:nowrap!important;gap:3px!important;margin:6px 0 7px!important}
.recipe span{flex:0 1 auto;white-space:nowrap;font-size:10px!important;padding:2px 4px!important}
.star-counter span{font-size:12px!important;border-color:var(--quiet-frame)!important;background:#0b1737!important;box-shadow:2px 2px 0 #020617!important}
.hunter-card b{font-size:13px!important}
.hunter-card small{font-size:10px!important}
.target-reminder{font-size:13px!important}
.service-scene img{z-index:1;right:-1%;width:68%;height:100%;transform:translateX(0);animation:none}
.service-scene img.is-entering{animation:hunterEnter .42s cubic-bezier(.2,.9,.2,1) both}
@keyframes hunterEnter{from{transform:translateX(110%)}to{transform:translateX(0)}}

/* Browser-review adjustments for the mobile order row. */
.hunter-request,.recipe span{border-color:var(--quiet-frame)!important}
.order-card .price{flex:0 0 84px;min-width:84px;white-space:nowrap;text-align:center}
.guest-art{transform:scale(1.06);transform-origin:left bottom}

/* Figma 3:3 final interaction layer. */
.figma-hotspot,.figma-hotspot:hover,.figma-hotspot:focus-visible,.figma-hotspot.selected,.figma-hotspot.just-added{
  appearance:none!important;outline:0!important;border-color:transparent!important;background:transparent!important;
  box-shadow:none!important;filter:none!important;transform:none!important;animation:none!important;transition:none!important
}
.ingredient-display-slots{
  position:absolute;z-index:5;left:calc(50% - 1.1538462%);top:73.9659367%;width:49.4871795%;height:3.7712895%;
  transform:translateX(-50%);pointer-events:none
}
.ingredient-slot{
  position:absolute;top:9.6774194%;width:15.2331606%;aspect-ratio:1;border:1px solid rgba(102,128,204,.2);border-radius:6px;
  background:rgba(31,26,51,.4);overflow:hidden
}
.ingredient-slot:nth-child(1){left:14.507772%}.ingredient-slot:nth-child(2){left:34.473057%}
.ingredient-slot:nth-child(3){left:54.438342%}.ingredient-slot:nth-child(4){left:74.403627%}
.ingredient-slot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 65%;image-rendering:pixelated}