:root{color-scheme:light;--ink:#503226;--cream:#fff5df;--accent:#a14b35;--line:#dfc7a6;font-family:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif;color:var(--ink)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#523019 url('assets/ui/bg.webp') center/cover no-repeat}
body:before{content:"";position:fixed;inset:0;background:rgba(51,24,10,.2);pointer-events:none}
button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}
button:disabled{cursor:wait;opacity:.6}
button:focus-visible,canvas:focus-visible{outline:3px solid #f8dc79;outline-offset:3px}
#app{position:relative;width:100%;height:100%;height:100dvh;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));}
.layout{height:100%;width:min(100%,1050px);margin:auto;display:grid;--order-height:42px;grid-template-rows:auto auto var(--order-height) minmax(0,1fr) auto;grid-template-areas:"top" "boosters" "order" "stage" "bottom";}
.top{grid-area:top;display:grid;grid-template-columns:1fr 1.12fr 1fr;align-items:center;gap:3px;width:min(100%,440px);margin:0 auto;}
.logo{width:100%;height:88px;object-fit:contain;filter:drop-shadow(0 3px 3px #40220d40)}
.score-panel{height:76px;position:relative;background:url('assets/ui/score_panel.webp') center/contain no-repeat;}
.best-panel{background-image:url('assets/ui/best_panel.webp')}
.score-panel strong{position:absolute;left:15%;top:49%;width:70%;text-align:center;font-size:clamp(18px,4.9vw,25px);font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
#stage{grid-area:stage;min-width:0;min-height:0;position:relative;}
#game{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline-offset:-4px;}
.hint{position:absolute;top:3px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:750;background:#fff5e3ed;border-radius:20px;padding:5px 10px;white-space:nowrap;pointer-events:none;}
.danger{position:absolute;left:50%;top:25%;transform:translateX(-50%);width:min(230px,80%);color:#9a2827;background:#fff0e8ee;border:1px solid #d25b44;border-radius:12px;padding:6px 12px;text-align:center;pointer-events:none;}
.danger span{font-size:11px;font-weight:800}.danger>div{margin-top:4px;height:4px;border-radius:9px;background:#e7c0b1;overflow:hidden}.danger i{height:100%;background:#c74b36;display:block;transform-origin:left;}
.toast{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:max-content;max-width:94%;padding:12px 18px;border-radius:18px;background:#fff5e8ed;border:1px solid #fff9e8;color:#674325;font-size:15px;font-weight:850;text-align:center;box-shadow:0 12px 26px #40201a20;pointer-events:none;}
.bottom{grid-area:bottom;width:min(100%,430px);margin:auto;}
.tray{--tray-height:86px;height:var(--tray-height);display:flex;gap:8px;align-items:center;justify-content:center;padding:0 9% calc(var(--tray-height)*.07);}
.collection-btn{width:48%;height:44px;border:0;background:url('assets/ui/collection_bg.webp') center/100% 100% no-repeat;font-size:11px;font-weight:850;}
/* The tray interior is centred at 46.5% height; the next-slot recess at (19.2%, 48%). */
.next-box{position:relative;width:48%;height:44px;background:url('assets/ui/next_bg.webp') center/100% 100% no-repeat;min-width:0;}
#nextCanvas{display:block;position:absolute;left:19.2%;top:48%;transform:translate(-50%,-50%);width:25%;height:78%;object-fit:contain}.next-box>div{position:absolute;left:34%;right:9%;top:48%;transform:translateY(-50%);min-width:0;line-height:1.2}.next-box span{display:block;font-size:8px;letter-spacing:.08em}.next-box strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;}
.tools{display:flex;gap:8px;justify-content:center;align-items:center;padding:3px 0 1px;}
.boosters{grid-area:boosters;display:flex;gap:14px;align-items:center;justify-content:center;padding:4px 8px 6px;min-width:0;}
/* --size is the badge disc; --px/--py (from scripts/prepare_boosters.py) pad the box for the arrow or chopsticks so nothing is clipped. */
.booster{--size:clamp(50px,7.5dvh,64px);--px:0;--py:0;position:relative;flex-shrink:0;width:calc(var(--size) * (1 + 2 * var(--px)));height:calc(var(--size) * (1 + 2 * var(--py)));padding:0;border:0;border-radius:0;background:transparent center/100% 100% no-repeat;filter:drop-shadow(0 2px 3px #40220d55);transition:transform .15s,opacity .15s;}
.booster::after{content:"";position:absolute;inset:calc(var(--size) * var(--py) - 2px) calc(var(--size) * var(--px) - 2px);border-radius:50%;pointer-events:none;transition:box-shadow .15s;}
.booster[data-kind=smallest]{--px:0.034;--py:0.04;background-image:url('assets/ui/booster_smallest.png')}
.booster[data-kind=remove]{--px:0.097;--py:0.015;background-image:url('assets/ui/booster_remove.png')}
.booster[data-kind=upgrade]{--px:0.022;--py:0.016;background-image:url('assets/ui/booster_upgrade.png')}
.booster:disabled{opacity:.42;filter:grayscale(.8);cursor:default;}
.booster.active{transform:scale(1.1);}.booster:focus-visible{outline:0;}.booster.active::after,.booster:focus-visible::after{box-shadow:0 0 0 3px #f8dc79;}
.booster .count{position:absolute;z-index:1;right:calc(var(--size) * var(--px) - 4px);bottom:calc(var(--size) * var(--py) - 3px);min-width:21px;height:21px;padding:0 5px;border-radius:11px;background:#a14b35;color:#fff;font-size:11px;font-weight:900;line-height:17px;text-align:center;border:2px solid #fff5df;box-shadow:0 1px 3px #0004;}
.booster.ad .count{background:#2d8a4a;font-size:8px;letter-spacing:.04em;}
.booster.ad .count::before{content:"▶";font-size:7px;margin-right:2px;}
.pick{position:absolute;top:3px;left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:8px;max-width:96%;padding:3px 3px 3px 12px;border-radius:20px;background:#fff5e3f2;border:1px solid #f1d38f;box-shadow:0 4px 14px #3b21182a;font-size:11px;font-weight:800;white-space:nowrap;}
.pick button{border:0;background:#a14b35;color:#fff;border-radius:15px;padding:5px 11px;font-size:10px;font-weight:800;min-height:26px;}
.tools button{border:1px solid #e8cda5;background:#fff0d8ed;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700;min-height:30px;}
.dialog-layer{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:rgba(47,26,16,.46);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.dialog{width:min(460px,100%);max-height:100%;min-width:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;background:#fff8eafc;border:1px solid #fff;border-radius:27px;padding:24px;text-align:center;box-shadow:0 18px 65px #351a1940;outline:none;}
.dialog-hero{display:block;width:95px;height:85px;object-fit:contain;margin:0 auto 6px;}
.dialog-close{position:sticky;top:0;z-index:2;float:right;width:34px;height:34px;margin:-8px -8px -26px 8px;border:1px solid #e3c8a7;border-radius:12px;background:#f2dfc4;color:#795539;font-size:24px;line-height:1;box-shadow:0 2px 6px #6d4c2920;}
.tag{font-size:10px;letter-spacing:.15em;color:#9e7757;font-weight:800;}
h1{margin:8px 0;font-size:clamp(24px,5vw,31px);font-weight:900;line-height:1.1;letter-spacing:-.045em;}
.dialog p{font-size:13px;line-height:1.6;color:#866951;margin:10px auto 18px;max-width:340px;}
.dialog-actions{display:grid;gap:9px;}
.dialog-actions button{width:100%;border:1px solid #cc8654;padding:13px 16px;border-radius:15px;background:linear-gradient(#f0b16a,#dc8f48);box-shadow:0 4px 0 #a66a35;color:#4d2b18;font-size:14px;font-weight:850;min-height:44px;}
.dialog-actions button.secondary{background:#f4e7d3;border-color:#e4cfad;box-shadow:none;color:#816144;font-size:12px;}
.dialog-actions button:active{transform:translateY(1px);box-shadow:none;}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 18px;}
.stats>div{border:1px solid #e8d8c0;background:#fff2dd;padding:12px 8px;border-radius:15px;min-width:0;}
.stats strong{display:block;font-size:18px;overflow-wrap:anywhere;}.stats span{display:block;font-size:9px;color:#967555;margin-top:5px;text-transform:uppercase;letter-spacing:.06em;}
.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 16px;}
.collection-item{background:#f5e6cd;border:1px solid #e9d6b8;border-radius:16px;padding:7px 5px 10px;min-width:0;}
.collection-item img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;}
.collection-item strong{display:block;font-size:10px;min-height:24px;line-height:1.2;}.collection-item span{display:block;font-size:8px;letter-spacing:.06em;color:#937652;margin-top:4px;}.collection-item.locked img{filter:grayscale(1) brightness(.4);opacity:.45;}.collection-item.rare{background:#eee2ed;}
.save-notice{position:absolute;bottom:max(9px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;z-index:30;display:flex;align-items:center;gap:10px;background:#fff3dd;border:1px solid #a45a32;padding:10px 13px;border-radius:14px;box-shadow:0 4px 20px #41261255;font-size:12px;}
.save-notice button{border:0;background:#9e4f30;border-radius:9px;color:#fff;padding:8px;font-weight:700;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;}.no-script{position:absolute;inset:0;z-index:40;display:grid;place-content:center;background:#fff1d8;padding:30px;text-align:center;}
.system-paused *{animation-play-state:paused!important;transition:none!important;}
@media(max-width:350px){.booster{--size:42px}.logo{height:70px}.score-panel{height:64px}.tray{--tray-height:76px}.collection-btn{font-size:9px}.next-box strong{font-size:9px}.dialog{padding:17px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tools button{padding:4px 10px}.hint{font-size:9px;padding:4px 7px;}}
@media(min-aspect-ratio:6/5) and (min-width:480px){
  .layout{grid-template-columns:clamp(100px,20vw,170px) minmax(0,1fr) clamp(110px,19vw,160px);--order-height:clamp(18px,4.5dvh,32px);grid-template-rows:auto var(--order-height) minmax(0,1fr);grid-template-areas:"top boosters bottom" "top order bottom" "top stage bottom";column-gap:8px;row-gap:0;}
  .top{align-self:center;grid-template-columns:1fr 1fr;gap:8px 2px;}.logo{grid-column:1/-1;grid-row:1;height:104px;}.score-panel{height:70px}.score-panel strong{font-size:19px;top:48%}
  .bottom{align-self:center;}.tray{--tray-height:clamp(148px,50dvh,192px);padding-left:13px;padding-right:13px;flex-direction:column;gap:clamp(6px,2dvh,8px);}.collection-btn,.next-box{width:100%;height:clamp(32px,11dvh,43px);flex-shrink:0;}.collection-btn{font-size:11px;}.next-box strong{font-size:11px;}.tools{flex-wrap:wrap;gap:6px;}.booster{--size:clamp(44px,7dvh,64px);}.hint{font-size:9px;}
  .dialog{width:min(500px,100%);padding:20px;}.dialog-hero{width:65px;height:55px;}h1{font-size:26px;}.dialog p{margin:8px auto 12px;}.dialog-actions{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}
@media(max-height:440px) and (max-width:479px){.booster{--size:36px}.booster .count{min-width:17px;height:17px;line-height:13px;font-size:9px}.logo{height:52px}.score-panel{height:45px}.score-panel strong{font-size:14px}.tray{--tray-height:60px}.collection-btn,.next-box{height:35px}.tools button{min-height:25px;padding:3px 8px}.dialog-hero{width:55px;height:45px}}

/* Move the strip into its own row above the board. On portrait layouts the
   same height is removed from the footer, preserving the board dimensions. */
.tray{--preview-height:44px;height:var(--preview-height);flex-direction:column;gap:0;padding:0;}
.preview-row{width:100%;height:var(--preview-height);flex-shrink:0;display:flex;gap:8px;align-items:center;justify-content:center;padding:0 9%;}
.order-button{grid-area:order;justify-self:center;align-self:center;display:grid;place-items:center;width:min(100%,calc(var(--order-height) * 8.901639));height:var(--order-height);min-width:0;min-height:0;padding:0;border:0;border-radius:8px;background:transparent;}
/* The illustrated strip is y=240..484 of the supplied 2172×724 PNG. */
.order-picture{display:block;position:relative;width:100%;aspect-ratio:2172/244;overflow:hidden;pointer-events:none;}
.order-picture img{position:absolute;left:0;top:-98.360656%;display:block;width:100%;height:auto;max-width:none;}
.dialog.order-dialog{width:min(660px,100%);}
.order-dialog .collection-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.order-dialog .collection-item img{height:clamp(48px,10dvh,76px);aspect-ratio:auto;}
.order-dialog .collection-item strong{font-size:12px;min-height:30px;line-height:1.25;}
.order-dialog .collection-item span{font-size:9px;}
@media(min-aspect-ratio:6/5) and (min-width:480px){
  .tray{--preview-height:clamp(32px,11dvh,43px);height:var(--tray-height);gap:8px;padding:0 13px;}
  .preview-row{height:auto;flex-direction:column;gap:clamp(6px,2dvh,8px);padding:0;}
}
@media(max-width:350px){.layout{--order-height:32px;}}
@media(max-width:479px){.order-dialog .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-height:440px) and (max-width:479px){.layout{--order-height:25px;}.tray{--preview-height:35px;}}

/* Roomy desktop windows can show a readable strip across the centre column.
   Keep portrait phones and short landscape windows on their existing sizing. */
@media(min-width:1100px) and (min-height:650px) and (min-aspect-ratio:6/5){
  .layout{--order-height:clamp(52px,8dvh,80px);}
}