/* Direct manipulation and stable controls, shared by touch, mouse and keyboard. */
.stock-palette { min-height:108px; gap:12px; padding:9px; }
.stock-palette .tray-piece { position:relative; flex:1; max-width:120px; width:auto; min-width:64px; min-height:88px; padding:3px 6px 7px; font-size:13px; }
.stock-palette .tray-piece img { width:61px; height:61px; }
.stock-count { position:absolute; right:5px; top:4px; min-width:28px; padding:1px 5px; border-radius:12px; border:1px solid #ffe8a9; background:#ffe0a0; color:#513348; font-size:12px; line-height:19px; }
.stock-palette .depleted { opacity:.55; }
.stock-palette .depleted .sprite { opacity:.55; }
.stock-palette .depleted .stock-count { background:#adc9a0; border-color:#daebc4; color:#244a37; }
.slot:not(:disabled), .stock-palette .tray-piece:not(:disabled) { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.slot.ready-target { border-color:#adeafa; box-shadow:inset 0 0 15px #9be7ff22; }
.slot.selected, .stock-palette .selected { outline:3px solid #ffe99c; outline-offset:2px; }
.stock-palette .ready-target { box-shadow:0 0 0 2px #b1e9f6; }
.touch-coach { min-height:93px; padding:12px 1px 8px; }
.touch-coach>p { color:var(--text); font-size:13px; line-height:1.5; min-height:20px; text-align:center; margin-bottom:8px; }
.coach-actions { display:flex; justify-content:center; align-items:center; gap:9px; }
.coach-button { min-width:44px; min-height:44px; padding:7px 12px; font-size:14px; }
.coach-actions [data-action=hint] { margin-left:auto; color:var(--text); border-color:var(--gold); }
.coach-button.return-button { font-size:12px; }
.action-dock { padding-top:5px; }
.dock-status { min-height:18px; text-align:center; font-size:12px; color:var(--muted); margin:0 0 7px; }
.action-dock .service-controls { margin:0; align-items:stretch; gap:9px; }
.dock-side { display:flex; align-items:center; justify-content:center; flex-direction:column; flex-shrink:0; gap:2px; width:57px; min-height:56px; padding:4px; font-size:24px; line-height:1; }
.dock-side small { display:block; font-size:10px; font-weight:700; line-height:1.2; }
.action-dock .primary { margin:0; }
.queue-portrait.customer-info { padding:0; min-height:48px; min-width:48px; overflow:visible; }
.customer-info:focus-visible { outline-offset:5px; }
.customer-info:hover { filter:brightness(1.1); }
.customer-guide { display:flex; align-items:center; gap:15px; padding:0 0 16px; }
.customer-guide>img { width:100px; height:115px; flex-shrink:0; }
.customer-guide h3 { font-size:21px; margin-bottom:8px; }
.item-guide { display:flex; align-items:center; gap:14px; min-height:122px; }
.item-guide .sprite { width:90px; height:90px; flex-shrink:0; }
.item-guide p { margin-bottom:0; }
.sheet-options { display:grid; gap:11px; }
.sheet-option { display:flex; align-items:center; gap:14px; text-align:left; padding:15px; font-size:21px; min-height:74px; }
.sheet-option>span { font-size:15px; }
.sheet-option small { display:block; margin-top:4px; font-size:12px; font-weight:400; color:var(--muted); line-height:1.5; }
.sheet-options .setting { padding:0 0 15px; }
.modal-content .hint-panel { margin:0; padding:0; box-shadow:none; background:none; border:0; }
.modal-content .hint-header { margin-bottom:14px; font-size:11px; }
.modal-content .hint-panel>p { font-size:15px; }
.hint-buttons { align-items:stretch; }
.hint-buttons button { min-height:49px; font-size:13px; flex:1; }
.hint-buttons .primary { font-size:15px; }
#drag-layer { position:fixed; inset:0; z-index:40; pointer-events:none; overflow:hidden; }
.drag-ghost { position:absolute; top:0; left:0; width:90px; height:112px; padding:2px 5px 5px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px solid #ffecac; border-radius:17px; background:#57416def; box-shadow:0 12px 25px #09031f88,0 0 20px #ffd27255; will-change:transform; }
.drag-ghost .sprite { width:75px; height:75px; }
.drag-ghost>span { color:#fff1ce; font-size:12px; font-weight:800; }
.drag-source .sprite { opacity:.35; }
.slot.drop-ready, .stock-palette.drop-ready { outline:3px solid #aff395; outline-offset:3px; box-shadow:0 0 22px #a7ed8a55; }
.slot.drop-ready:after, .stock-palette.drop-ready:after { content:attr(data-drop-label); position:absolute; z-index:3; left:50%; bottom:4px; transform:translateX(-50%); white-space:nowrap; padding:3px 6px; border-radius:7px; background:#d7f7bb; color:#204337; border:1px solid #f1ffd5; font-size:10px; font-weight:900; }
.stock-palette { position:relative; }
.dragging-snack { cursor:grabbing; }
.dragging-snack * { cursor:grabbing!important; }
.dragging-snack .touch-coach>p { color:var(--accent); }

@media(max-width:700px) {
  html { scroll-padding-bottom:calc(110px + env(safe-area-inset-bottom,0px)); }
  body[data-screen=game][data-phase=planning], body[data-screen=game][data-phase=resolving] { padding-bottom:calc(110px + env(safe-area-inset-bottom,0px)); }
  .action-dock { position:fixed; z-index:12; left:0; right:0; bottom:0; width:100%; max-width:700px; margin:0 auto; padding:9px 12px max(10px,env(safe-area-inset-bottom,0px)); border:2px solid var(--gold); border-bottom:0; border-radius:21px 21px 0 0; background:linear-gradient(#ffffff0d,transparent),var(--cabinet); box-shadow:inset 0 1px var(--gold-light),0 -5px 22px #120c3155; }
  .action-dock .service-controls { gap:9px; }
  .action-dock .primary { min-height:55px; font-size:24px; border-radius:14px; gap:12px; }
  .action-dock .dock-side { width:57px; min-height:55px; }
  .action-dock .desktop-control { display:none; }
  .dock-status { font-size:11px; margin-bottom:6px; }
  .topbar { height:56px; }
  .game-heading { margin:3px auto 16px; }
  .game-heading .eyebrow { font-size:9px; letter-spacing:.06em; }
  .game-heading h1 { font-size:20px; }
  .machine-top { padding-bottom:7px; }
  .cabinet-cap { padding-block:4px; margin-bottom:5px; }
  .machine-label { font-size:9px; letter-spacing:.07em; }
  .machine-label b { font-size:15px; }
  .machine-glass { padding:9px 7px; }
  .goal-meter { margin-bottom:8px; }
  .mobile-tip { font-size:11px; line-height:1.5; margin:0 1px 8px; }
  .queue-line { padding-bottom:6px; margin-bottom:5px; }
  .queue-label { display:none; }
  .queue li>span { font-size:11px; }
  .queue small { font-size:9px; }
  .queue-portrait { width:48px; height:48px; }
  .queue-portrait img { width:52px; height:52px; }
  .inspect-label { font-size:9px; letter-spacing:0; margin-bottom:7px; }
  .slot { min-height:134px; }
  .sprite-frame { height:83px; }
  .slot .item-label { font-size:12px; }
  .slot .item-state { font-size:10px; min-height:18px; }
  .slot .slot-number { font-size:11px; }
  .stock-area { padding:8px 1px 0; }
  .tray-top { font-size:10px; letter-spacing:.04em; margin-bottom:5px; }
  .stock-palette { min-height:98px; padding:7px; gap:10px; }
  .stock-palette .tray-piece { min-height:82px; font-size:12px; max-width:118px; }
  .stock-palette .tray-piece img { width:55px; height:55px; }
  .touch-coach { min-height:80px; padding-top:7px; }
  .touch-coach>p { font-size:12px; min-height:18px; margin-bottom:6px; }
  .coach-actions { gap:8px; }
  .counter-bottom { padding-top:8px; }
  .playback-message { min-height:116px; padding-top:10px; gap:6px; }
  .playback-message>img { width:74px; height:80px; }
  .playback-message b { font-size:19px; }
  .playback-message p { font-size:12px; }
  .playback-status { font-size:10px; }
  .purchase-log { margin-top:7px; }
  .purchase-log summary, .score-details summary { font-size:12px; }
  .result-detail>span:last-child { font-size:12px; }
  .result-actions button { min-height:48px; font-size:13px; }
  .result-actions .primary { min-height:56px; font-size:20px; }
  dialog { position:fixed; inset:auto 0 0; width:100%; max-width:560px; max-height:min(82dvh,720px); margin:0 auto; padding:12px 21px max(22px,env(safe-area-inset-bottom,0px)); border:2px solid var(--gold); border-bottom:0; border-radius:25px 25px 0 0; overscroll-behavior:contain; }
  dialog:before { content:''; display:block; margin:0 auto 14px; width:38px; height:4px; border-radius:6px; background:var(--muted); opacity:.6; }
  .modal-header { margin-bottom:17px; }
  .modal-header h2 { font-size:25px; }
  .modal-content p, .modal-content ul { font-size:14px; }
  .sheet-option { min-height:80px; }
  .customer-guide { gap:8px; }
  .customer-guide>img { width:85px; height:108px; }
}
@media(max-width:350px) {
  .game-heading h1 { font-size:18px; }
  .game-heading .eyebrow { font-size:8px; }
  .machine-label b { font-size:14px; }
  .mobile-tip { font-size:10px; }
  .slot { min-height:130px; }
  .sprite-frame { height:79px; }
  .slot .item-label { font-size:11px; }
  .slot .item-state { font-size:9px; }
  .inspect-label { font-size:8px; gap:4px; }
  .queue li>span { font-size:10px; }
  .queue small { font-size:8px; }
  .stock-palette { gap:8px; }
  .stock-palette .tray-piece img { width:53px; height:55px; }
  .stock-palette .tray-piece { font-size:11px; }
  .stock-count { font-size:11px; min-width:25px; right:3px; top:3px; }
  .touch-coach>p { font-size:12px; }
  .action-dock { padding-inline:10px; }
  .action-dock .dock-side { width:53px; }
  .action-dock .primary { font-size:22px; }
  .customer-guide>img { width:72px; }
  .customer-guide h3 { font-size:19px; }
}