/* One customer step per phone screen. Menus remain separate dialogs. */
#kd-market-v5 .market-pending-item{padding:5px 0;font-size:12px;border-bottom:1px dashed #d3c4df}
#kd-market-v5 .market-pending-pieces{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
#kd-market-v5 .market-pending-pieces img{width:25px;height:28px;object-fit:contain}
#kd-market-v5 .market-options{border:2px solid var(--m-purple);border-radius:18px;padding:14px;background:var(--m-paper);color:var(--m-ink);width:min(480px,calc(100vw - 24px));max-height:85dvh;overflow:auto}
#kd-market-v5 .market-options::backdrop{background:#23132ab8}
#kd-market-v5 .market-options>button{min-height:44px;border-radius:12px;padding:8px 16px;border:1px solid var(--m-purple);background:var(--m-white);color:var(--m-deep)}
@media(min-width:0px){
 html{height:100%;overflow:hidden}body{height:100dvh;min-height:0;overflow:hidden;padding:5px 5px 52px;box-sizing:border-box}body>main{height:100%;width:100%;max-width:100%}
 #kd-market-v5{height:100%;max-width:1200px;margin-inline:auto;display:flex;flex-direction:column;border-radius:17px;border-width:2px;box-sizing:border-box}
 #kd-market-v5 .market-top{flex:none;padding:5px 7px;gap:5px;min-height:54px}
 #kd-market-v5 .market-brand .kd-logo{width:clamp(85px,25vw,125px);max-height:34px;object-fit:contain}
 #kd-market-v5 .market-sub,#kd-market-v5 .market-top .market-level{display:none}
 #kd-market-v5 .market-top-actions{flex-wrap:nowrap;gap:4px}
 #kd-market-v5 .market-icon-button{padding:4px;min-width:44px;min-height:44px;font-size:12px}
 #kd-market-v5 [data-game]{flex:1;min-height:0;display:flex;flex-direction:column}
 #kd-market-v5 .market-instruction{flex:none;font-size:15px;line-height:1.2;padding:7px 10px;min-height:38px}
 #kd-market-v5 .market-feedback{flex:none;min-height:30px;padding:5px 8px;font-size:12px;line-height:1.2}
 #kd-market-v5 .market-caption{display:none}
 #kd-market-v5 .market-scene{flex:1;min-height:0;aspect-ratio:auto;background-size:cover;background-position:center}
 #kd-market-v5 .market-belt{flex:none;padding:5px 8px 8px}
 #kd-market-v5 .market-belt-title{padding:0;margin-bottom:5px;font-size:12px}
 #kd-market-v5 .market-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #kd-market-v5 .market-item{width:100%;min-width:0;max-width:none;padding:3px;min-height:44px}
 #kd-market-v5 .market-item img{height:clamp(36px,7dvh,65px);object-fit:contain}
 #kd-market-v5 .market-item-name,#kd-market-v5 .market-item-price{font-size:12px;line-height:1.15}
 #kd-market-v5 .market-item-qty{font-size:12px;padding:1px 4px;margin:0}
 #kd-market-v5 .market-piece-row{display:none}
 #kd-market-v5[data-phase="scan"] .market-desk{display:none}
 #kd-market-v5:is([data-phase="price"],[data-phase="multiplier"],[data-phase="quantity"],[data-phase="total"],[data-phase="recount"]) :is(.market-scene,.market-belt,.market-suspicion-notice){display:none}
 #kd-market-v5 .market-desk{flex:1;min-height:0;grid-template-columns:minmax(0,.9fr) minmax(152px,1.1fr);padding:4px 7px;gap:7px;align-items:stretch}
 #kd-market-v5 .market-register{padding:6px;min-height:0;border-radius:13px;display:flex;flex-direction:column;justify-content:center;gap:3px}
 #kd-market-v5 .market-register-label{font-size:12px;line-height:1.1;margin:0}
 #kd-market-v5 .market-entry-wrap{margin:0;min-height:36px}
 #kd-market-v5 .market-entry{height:44px;min-height:44px;font-size:24px;padding:3px 6px;min-width:0}
 #kd-market-v5 .market-keypad{gap:3px;margin:0;grid-auto-rows:44px}
 #kd-market-v5 .market-key{min-height:44px;padding:3px;font-size:19px}
 #kd-market-v5 .market-key.word{font-size:10px}
 #kd-market-v5 .market-key.times{font-size:16px}
 #kd-market-v5 .market-main{min-height:44px;padding:5px;font-size:13px;margin:3px 0}
 #kd-market-v5 .market-receipt{padding:7px;min-height:0;align-self:center;border-radius:9px}
 #kd-market-v5 .market-receipt-row{font-size:12px;padding:4px 0;gap:3px;grid-template-columns:24px minmax(0,1fr)}
 #kd-market-v5 .market-receipt-row img{height:25px;width:24px}
 #kd-market-v5 .market-receipt-title{font-size:12px;margin-bottom:5px}
 #kd-market-v5 .market-receipt-total{font-size:13px;padding-top:5px}
 #kd-market-v5 .market-receipt-empty,#kd-market-v5 .market-receipt-recheck{font-size:12px}
 #kd-market-v5 .market-count-dots:empty{display:none}
 #kd-market-v5 .market-money-hint,#kd-market-v5 .market-multiply-expression{font-size:11px;line-height:1.1;padding:2px 0;margin:0}
 #kd-market-v5 .market-suspicion-notice{flex:none;font-size:12px;padding:3px 7px}
 #kd-market-v5 .market-suspicion-notice:empty{display:none}
 #kd-market-v5 .market-pay,#kd-market-v5 .market-reward{flex:none;padding:8px}
 #kd-market-v5 .market-pay-inner{gap:15px}
 #kd-market-v5:is([data-phase="pay"],[data-phase="review"]) .market-belt{display:none}
 #kd-market-v5 .market-choose{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:10px}
 #kd-market-v5 .market-choose-title{font-size:21px;margin:4px 0 12px}
 #kd-market-v5 .market-choice img{height:clamp(100px,25dvh,210px)}
 #kd-market-v5 .market-customer-list,#kd-market-v5 .market-customers-title{display:none}
 #kd-market-v5 .market-scene.with-overlay{min-height:0}
 #kd-market-v5 .market-scene-card{padding:10px}
 #kd-market-v5 .market-scene-overlay.with-bear .market-scene-card{margin-left:0;width:100%}
 #kd-market-v5 .market-bear-front{display:none}
 #kd-market-v5 .market-scene-card .market-fair-text{font-size:14px;line-height:1.25}
 #kd-market-v5 .market-camera-overlay{height:100%;display:flex;flex-direction:column;padding:7px}
 #kd-market-v5 .market-camera-feed{flex:1;min-height:100px;height:auto}
 #kd-market-v5 .market-camera-caption{font-size:13px;line-height:1.25;min-height:0;margin:7px 0}
 #kd-market-v5 .market-camera-controls{padding-top:5px;gap:4px}
 #kd-market-v5 .market-camera-controls button{padding:4px 7px}
 #kd-market-v5 .market-camera-options{gap:5px}
 #kd-market-v5 .market-camera-options button{font-size:13px;min-width:100px;padding:5px}
}

/* Landscape phones: put the number pad beside the display, not below it. */
@media(min-width:500px) and (max-height:640px){
 #kd-market-v5 .market-top{min-height:46px;padding:2px 7px}
 #kd-market-v5 .market-instruction{min-height:28px;padding:4px 7px;font-size:13px}
 #kd-market-v5 .market-feedback{min-height:25px;padding:3px 7px;font-size:11px}
 #kd-market-v5 .market-desk{grid-template-columns:minmax(120px,.7fr) minmax(360px,2fr);gap:6px;padding:3px 6px}
 #kd-market-v5 .market-register{align-self:stretch;display:grid;grid-template-columns:minmax(100px,.8fr) minmax(235px,1.7fr);grid-template-rows:auto 50px minmax(44px,1fr) auto;gap:3px 7px;padding:4px}
 #kd-market-v5 .market-register-label,#kd-market-v5 .market-entry-wrap,#kd-market-v5 .market-register>.market-main,#kd-market-v5 .market-multiply-expression{grid-column:1}
 #kd-market-v5 .market-register-label{grid-row:1}
 #kd-market-v5 .market-entry-wrap{grid-row:2;padding:0 4px}
 #kd-market-v5 .market-entry{min-height:44px;height:44px;font-size:24px}
 #kd-market-v5 .market-register>.market-main{grid-row:3;margin:0;align-self:center;font-size:12px}
 #kd-market-v5 .market-multiply-expression{grid-row:4;margin:0}
 #kd-market-v5 .market-keypad{grid-column:2;grid-row:1 / 5;grid-template-columns:repeat(5,minmax(44px,1fr));grid-auto-rows:minmax(44px,1fr);gap:3px;align-self:stretch}
 #kd-market-v5 .market-register .market-count-dots,#kd-market-v5 .market-money-hint{display:none}
 #kd-market-v5 .market-receipt{max-height:100%;overflow:auto;box-sizing:border-box}
 #kd-market-v5 .market-receipt-row{padding:2px 0;font-size:11px}
}

@media(max-width:680px) and (max-height:640px){
 #kd-market-v5 .market-top>div:first-child{display:none}
 #kd-market-v5 .market-top{min-height:44px;padding:3px 7px}
 #kd-market-v5 .market-top-actions{width:100%;justify-content:space-between}
 #kd-market-v5 .market-instruction{padding:4px 7px;min-height:32px;font-size:14px}
 #kd-market-v5 .market-entry{min-height:44px;height:44px}
 #kd-market-v5 .market-entry-wrap{padding:1px 6px;min-height:50px}
 #kd-market-v5 .market-register{padding:4px;gap:2px}
 #kd-market-v5 .market-feedback{min-height:26px;padding:3px 7px;font-size:11px}
 #kd-market-v5 .market-money-hint{display:none}
}

/* Narrative and camera have their own close controls: give them the full stage. */
#kd-market-v5:has([data-story-overlay]:not([hidden]),[data-camera-overlay]:not([hidden])) :is(.market-top,.market-instruction,.market-feedback,.market-belt,.market-desk,.market-pay,.market-reward,.market-suspicion-notice){display:none}
#kd-market-v5 .market-scene.with-overlay .market-scene-overlay{padding:8px;height:100%;box-sizing:border-box}
#kd-market-v5 .market-scene.with-overlay .market-scene-card{max-height:100%;box-sizing:border-box;overflow:auto}
#kd-market-v5 .market-camera-overlay{box-sizing:border-box}
#kd-market-v5 .market-camera-feedback:empty{display:none}
@media(min-width:500px) and (max-height:640px){
 #kd-market-v5 .market-scene.with-overlay .market-scene-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.9fr);gap:4px 12px;padding:10px}
 #kd-market-v5 .market-scene-card .market-story-product{display:none}
 #kd-market-v5 .market-scene-card .market-fair-title{grid-column:1;grid-row:1;font-size:17px;margin:0}
 #kd-market-v5 .market-scene-card .market-fair-text{grid-column:1;grid-row:2;font-size:13px}
 #kd-market-v5 .market-scene-card .market-document{grid-column:1;grid-row:3;margin:0;padding:4px}
 #kd-market-v5 .market-scene-card .market-fair-options{grid-column:2;grid-row:1 / 4;margin:0;align-content:center}
 #kd-market-v5 .market-scene-card .market-fair-options button{flex-basis:100%;padding:5px;font-size:13px}
 #kd-market-v5 .market-scene-card .market-overlay-feedback{grid-column:1;grid-row:4;margin:0;font-size:12px;min-height:0}
 #kd-market-v5 .market-scene-card .market-close-story{grid-column:2;grid-row:4;margin:0;min-height:44px}
 #kd-market-v5 .market-camera-overlay{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(220px,1fr);grid-template-rows:44px minmax(44px,1fr) auto auto;gap:4px 8px}
 #kd-market-v5 .market-camera-bar{grid-column:1 / 3;grid-row:1;padding:0}
 #kd-market-v5 .market-camera-feed{grid-column:1;grid-row:2 / 5;min-height:0}
 #kd-market-v5 .market-camera-controls{grid-column:2;grid-row:2;padding:0;align-content:start}
 #kd-market-v5 .market-camera-caption{grid-column:2;grid-row:3;margin:0;font-size:12px}
 #kd-market-v5 .market-camera-options{grid-column:2;grid-row:4}
 #kd-market-v5 .market-camera-options button{min-width:80px;font-size:12px;min-height:44px;padding:3px}
 #kd-market-v5 .market-camera-feedback:not(:empty){grid-column:1 / 3;margin:0;font-size:11px}
 #kd-market-v5 .market-camera-repair-text{font-size:11px;line-height:1.2;padding:5px}
}

/* Keep age and language controls independently reachable. */
body #age3-change{right:62px}

/* A short landscape screen needs the checkout beside the customer, so the
   payment card and next-customer action stay inside the game, not below it. */
@media(min-width:500px) and (max-height:640px){
 #kd-market-v5:is([data-phase="scan"],[data-phase="review"],[data-phase="pay"],[data-phase="done"]) [data-game]{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1fr) auto}
 #kd-market-v5:is([data-phase="scan"],[data-phase="review"],[data-phase="pay"],[data-phase="done"]) .market-instruction{grid-column:1 / -1;grid-row:1}
 #kd-market-v5:is([data-phase="scan"],[data-phase="review"],[data-phase="pay"],[data-phase="done"]) .market-scene{grid-column:1;grid-row:2;min-width:0}
 #kd-market-v5:is([data-phase="pay"],[data-phase="done"]) :is(.market-suspicion-notice,.market-camera-trigger){display:none}
 #kd-market-v5:is([data-phase="scan"],[data-phase="review"],[data-phase="pay"],[data-phase="done"]) .market-feedback{grid-column:1 / -1;grid-row:3}
 #kd-market-v5 .market-camera-trigger{display:none}
 #kd-market-v5 .market-belt,#kd-market-v5 .market-review-prompt{grid-column:2;grid-row:2;min-width:0;align-self:center}
 #kd-market-v5 .market-items:has(.market-item:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 #kd-market-v5 .market-items:has(.market-item:nth-child(4)) .market-item img{height:32px}
 #kd-market-v5 .market-suspicion-notice{grid-column:1;grid-row:2;align-self:end;z-index:6;pointer-events:none;background:var(--m-paper)}
 #kd-market-v5 :is(.market-pay,.market-reward){grid-column:2;grid-row:2;min-height:0;padding:5px;display:flex;flex-direction:column;justify-content:center}
 #kd-market-v5 .market-pay-title{font-size:16px;line-height:1.15;margin:0 0 4px}
 #kd-market-v5 .market-pay-inner{gap:8px;min-height:0}
 #kd-market-v5 .market-bank-card{width:160px;max-width:65%;min-height:80px;padding:8px}
 #kd-market-v5 .market-card-title{font-size:13px}
 #kd-market-v5 .market-card-chip{margin:5px 0;height:16px}
 #kd-market-v5 .market-card-small{font-size:12px;line-height:1.2}
 #kd-market-v5 .market-terminal{width:70px;padding:6px;border-radius:12px}
 #kd-market-v5 .market-terminal-screen{font-size:16px;padding:7px 2px}
 #kd-market-v5 .market-terminal-dots{font-size:12px;line-height:1;padding-top:5px}
 #kd-market-v5 .market-medal{font-size:24px;line-height:1}
 #kd-market-v5 .market-reward-title{font-size:18px;line-height:1.1;margin:3px 0}
 #kd-market-v5 .market-reward-text{font-size:12px;line-height:1.2}
 #kd-market-v5 .market-reward .market-main{margin:5px 0 0;max-width:none;width:100%;flex-shrink:0}
 #kd-market-v5:is([data-phase="scan"],[data-phase="review"],[data-phase="pay"],[data-phase="done"]) .market-name{font-size:11px;padding:3px 5px}

 /* Keep all four receipt totals visible beside the keypad. The product icon
    keeps its accessible name; the calculation and line total stay separate. */
 #kd-market-v5 .market-desk{grid-template-columns:minmax(120px,1fr) minmax(330px,1.7fr)}
 #kd-market-v5 .market-receipt{padding:4px;align-self:center}
 #kd-market-v5 .market-receipt-title{padding-bottom:3px;margin-bottom:2px}
 #kd-market-v5 .market-receipt-row{grid-template-columns:18px minmax(0,1fr) auto;gap:3px;padding:2px 0;min-height:24px;line-height:1.1}
 #kd-market-v5 .market-receipt-row img{width:18px;height:18px;grid-row:auto}
 #kd-market-v5 .market-receipt-row .line-price{grid-column:3;white-space:nowrap}
 #kd-market-v5 .market-receipt-row :is(.market-receipt-product,.market-receipt-separator){display:none}
 #kd-market-v5 .market-receipt-calculation{white-space:nowrap}
 #kd-market-v5 .market-receipt-total{padding:3px 0 0}
 #kd-market-v5 .market-receipt-recheck{display:none}
 #kd-market-v5 .market-entry-wrap{gap:3px}
 #kd-market-v5 .market-entry-wrap [data-unit]{font-size:12px}
 #kd-market-v5 .market-entry{min-width:44px;font-size:22px}
}