*{box-sizing:border-box;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans TC', 'Helvetica Neue', Arial;}

/* disable horizontal scrolling site-wide */
html, body { overflow-x: hidden; overscroll-behavior-x: none; }
/* disable vertical scrolling for the main page as requested */
html, body { overflow-y: hidden; }
body{margin:0;background:#f3f6f8;color:#111}
#app-header{height:96px;background-image:url('./image/UI/header_02.png');background-repeat:no-repeat;background-size:contain;background-position:left center;position:relative;padding:0 36px;display:flex;align-items:center}
/* header background has transparent area; allow table texture show underneath by not using opaque background */
#app-header::after{ content: ''; position:absolute; left:0; right:0; bottom:0; height:20px; background:transparent }

/* hide controls visually but keep in DOM (for future) */
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* seven-segment-like money display on header (right side) */
#money-display{margin-left:auto;font-family: 'Courier New', Courier, monospace;font-weight:700;color:#0ff;letter-spacing:2px;font-size:28px;padding-right:24px;margin-right:-48px;background:rgba(0,0,0,0);}
#money-display #money{display:inline-block;padding:4px 8px;border-radius:6px;color:#0ff;text-shadow:0 0 8px rgba(0,255,255,0.22), 0 0 2px rgba(0,200,200,0.4)}
#conveyor-wrap{height:48vh;padding:12px}
#conveyor{position:relative;height:100%;background-image:url('./image/road_01.png');background-size:cover;border:2px dashed #cfeaf8;overflow:hidden}

main{display:block}
#bottom-row{display:flex;gap:12px;padding:12px;align-items:stretch;min-height:22vh}
#desk-wrap{flex:1;display:flex;align-items:center}
.plate{width:150px;height:100px;border-radius:14px;display:inline-block;padding:10px;margin:12px;cursor:grab}
.plate-inner{background:#fff6e6;display:flex;align-items:center;justify-content:center;height:70px;border-radius:10px;border:1px solid #ddd;font-weight:600}
.price-tag{font-size:13px;color:#333;margin-top:6px;text-align:right}
#desk{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;background:none;padding:12px;border:0;height:100%;align-content:center}
.slot{min-height:140px;border-radius:10px;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,0.06);position:relative}
.slot .plate{cursor:default}

/* positioning relative to plate center: sizes assume plate base 120x80 */
.plate{width:120px;height:80px}
.sushi-icon, .sushi-phantom{width:40px;height:40px}
.cond-icon, .cond-phantom{width:36px;height:36px}

/* tool-plate specific sizing: larger tool icons inside plate */
.plate.tool-plate .sushi-icon{ width:84px; height:84px; }

/* single-sushi layout: place sushi centered (green box in spec) */
.pos-s1{left:50%;top:50%;transform:translate(-50%,-50%);z-index:10}

/* double-sushi layout: first sushi slightly left and lower, second sushi slightly right and higher */
.pos-s2{left:58%;top:62%;transform:translate(-50%,-50%);z-index:12}
.pos-s1.pos-s1double{left:42%;top:44%;transform:translate(-50%,-50%);z-index:8}

/* condiment positions and z-order rules */
.pos-c1{left:50%;top:60%;transform:translate(-50%,-50%);z-index:120} /* magenta: single-sushi first condiment moved down and above sushi */
.pos-c2{left:66%;top:46%;transform:translate(-50%,-50%);z-index:120} /* light-blue: above sushi */
.pos-c3{left:60%;top:62%;transform:translate(-50%,-50%);z-index:110} /* orange: below sushi; moved left for double-sushi */

/* image overlay styles */

.plate{position:relative;overflow:visible}
.plate-img{position:absolute;left:0;top:0;width:150px;height:100px;object-fit:cover;border-radius:14px}
.sushi-icon{position:absolute;width:50px;height:50px;image-rendering:pixelated;}
.cond-icon{position:absolute;width:44px;height:44px;image-rendering:pixelated}
.sushi-phantom{position:absolute;width:50px;height:50px;background:#f4c;display:flex;align-items:center;justify-content:center;border-radius:8px;color:#fff}
.cond-phantom{position:absolute;width:22px;height:22px;background:#aaf;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}
.price-badge{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:8px;z-index:9999}
.price-badge-img{width:72px;height:36px;object-fit:cover}
.price-text{font-weight:700;background:rgba(0,0,0,0.25);padding:4px 8px;border-radius:6px;color:#fff}

/* circular fallback (no rectangular white box) */
.plate-inner-circle{width:130px;height:80px;border-radius:999px;background:rgba(255,250,240,0.9);display:flex;align-items:center;justify-content:center;font-weight:700}

/* conveyor scaling: make items appear larger on the moving belt (3x) */
.on-conveyor{transform:scale(3);transform-origin:center center}
.on-conveyor .plate-img{width:150px;height:100px}
.on-conveyor .sushi-icon{width:150px;height:150px}
.on-conveyor .sushi-phantom{width:150px;height:150px}

/* smooth transition when plate switches to conveyor state */
.plate{transition:transform 220ms ease, right 260ms ease, top 220ms ease}
.on-conveyor{transition:transform 260ms ease}

/* dragging visual */
.plate.dragging{opacity:0.85;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.45));transform:scale(1.05)}

/* smoother transitions when placing/moving */
.plate{transition:transform 140ms ease, left 120ms ease, top 120ms ease, width 120ms ease, height 120ms ease, opacity 120ms ease}

/* desk size clamp: ensure elements inside slots are slightly smaller to fit nicely */
.slot .plate{width:200px;height:136px}
.slot .plate .sushi-icon{width:110px;height:110px}
.slot .plate .cond-icon{width:40px;height:40px}

/* cloned drag image: slightly smaller and no pointer events */
.drag-clone{transform:scale(0.9);opacity:0.98;pointer-events:none;border-radius:10px}

/* when a plate is on-conveyor and being dragged, shrink it so table drop preview is consistent */
.on-conveyor.dragging{transform:scale(1.1)!important}

/* highlight drop target */
.slot.drop-target{outline:3px solid rgba(255,255,255,0.12);box-shadow:0 6px 18px rgba(0,0,0,0.35) inset}

/* bounce back animation for failed drops (small translate) */
@keyframes bounce-back { 0% { transform: translateX(0); } 30% { transform: translateX(-18px); } 60% { transform: translateX(8px); } 100% { transform: translateX(0); } }
.anim-bounce-back{animation:bounce-back 360ms ease}

/* ensure conveyor plates are vertically centered on the belt */
#conveyor{display:flex;align-items:center;justify-content:flex-start}
.plate{margin:0 12px}

/* when plate is placed on desk, reset scale */
.on-desk{transform:none}

/* wood/retro pixel desk vibe */
body{background-image:url('./image/table_01.jpg');background-repeat:repeat;background-position:top left;background-size:500px auto}
/* keep conveyor background-image (road_01.png) set earlier; don't overwrite it with a gradient */
#conveyor{background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:6px;border:4px solid #222;box-shadow:inset 0 -6px 0 rgba(0,0,0,0.06)}
#desk{background:none}
.slot{width:180px;height:180px;border-radius:12px;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;min-height:0;border:2px solid rgba(255,255,255,0.06)}
.slot .plate{cursor:default}
/* locked slot visual */
.slot.locked{background:rgba(0,0,0,0.2);filter:grayscale(30%);opacity:0.9}
.slot.locked::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:158px;height:158px;background-image:url('./image/UI/table_lock.png');background-size:contain;background-repeat:no-repeat;pointer-events:none;opacity:0.98}
.slot.locked .plate{display:none}
#log{display:none}
.modal{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3)}
.modal.hidden{display:none}
.modal-content{background:#fff;padding:12px;width:640px;border-radius:8px}
.modal-content textarea{width:100%;height:240px;font-family:monospace}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.note{font-size:12px;color:#666}

.pad{width:100%}
#pad{width:440px;display:flex;flex-direction:column;gap:10px;align-items:center;padding:12px}
/* fixed pad/frame sizes so menu page doesn't resize the pad */
.pad-frame{width:100%;height:250px;background:linear-gradient(180deg,#111 0%,#1b1b1b 100%);border-radius:20px;padding:6px;box-shadow:0 18px 36px rgba(0,0,0,0.55), inset 0 2px 0 rgba(255,255,255,0.02);border:6px solid #222;display:flex;justify-content:center}
.pad-screen{width:100%;height:100%;background:linear-gradient(45deg,#0b1020 0%,#151a2b 100%);border-radius:14px;padding:6px;display:flex;flex-direction:column;align-items:stretch;gap:6px;box-shadow:inset 0 8px 18px rgba(0,0,0,0.6);overflow:hidden;position:relative}
.pad-row{display:flex;gap:8px;justify-content:space-between}
.pad-btn{flex:1;padding:16px 12px;border-radius:12px;border:2px solid rgba(255,255,255,0.06);font-weight:900;color:#fff;background:linear-gradient(180deg,#ff6f6f 0%,#ff3b3b 100%);box-shadow:0 8px 18px rgba(255,60,60,0.14), 0 0 14px rgba(255,100,100,0.14);cursor:pointer;font-size:20px}
.pad-btn[data-key="B"]{background:linear-gradient(180deg,#6feeff 0%,#3bd2ff 100%);box-shadow:0 6px 12px rgba(60,210,255,0.12)}
.pad-btn[data-key="C"]{background:linear-gradient(180deg,#ffd46f 0%,#ffc43b 100%);color:#111;box-shadow:0 6px 12px rgba(255,196,59,0.12)}
.pad-btn[data-key="D"]{background:linear-gradient(180deg,#8aff6f 0%,#46ff3b 100%);color:#111}
.pad-btn[data-key="E"]{background:linear-gradient(180deg,#c98aff 0%,#9b3bff 100%)}
.pad-btn[data-key="F"]{background:linear-gradient(180deg,#ff8aa8 0%,#ff3b9b 100%)}
.pad-btn:active{transform:translateY(2px)}

/* override pad button text colors to requested deep tones */
.pad-btn[data-key="A"]{ color: #8B0000; }    /* 深紅 */
.pad-btn[data-key="B"]{ color: #00008B; }    /* 深藍 */
.pad-btn[data-key="C"]{ color: #B8860B; }    /* 深黃 */
.pad-btn[data-key="D"]{ color: #006400; }    /* 深綠 */
.pad-btn[data-key="E"]{ color: #4B0082; }    /* 深紫色 */
.pad-btn[data-key="F"]{ color: #C71585; }    /* 深粉色 */
/* keep pad footer fixed at bottom of pad-screen so homebar is never pushed up */
.pad-footer{display:flex;justify-content:center;position:absolute;left:0;right:0;bottom:6px;padding:4px 0;pointer-events:none}
/* allow the homebar button itself to receive pointer events */
.pad-footer .pad-home{pointer-events:auto;cursor:pointer}
/* homebar: thin bar instead of big button (like iOS homebar) */
.pad-home{width:60%;height:6px;border-radius:999px;background:linear-gradient(90deg,#ddd 0%,#fff 60%);border:none;box-shadow:none;padding:0;margin:6px 0}
.pad-home:focus{outline:none}

/* Pad menu styles */
.pad-menu{background:linear-gradient(180deg,#07101a 0%,#0b1620 100%);border-radius:10px;padding:8px;display:none;flex-direction:column;gap:6px;overflow:hidden;position:absolute;left:6px;right:6px;top:6px;bottom:12px}
.pad-menu-tabs{display:flex;gap:6px;margin-bottom:6px}
.pad-menu-tab{flex:1;padding:8px;border-radius:8px;background:transparent;color:#cfeef8;border:1px solid rgba(255,255,255,0.04);cursor:pointer}
.pad-menu-tab.active{background:linear-gradient(180deg,#0ef 0%,#06c 100%);color:#003;box-shadow:0 6px 18px rgba(6,140,204,0.12);font-weight:800}
.pad-menu-list{flex:1;overflow-y:auto;padding:6px 6px 48px 6px;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:7px}
/* Use padding-bottom trick to guarantee square tiles and avoid relying solely on aspect-ratio (fallback/stability) */
.pad-menu-item{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#101820 0%,#0c1320 100%);cursor:pointer;border:1px solid rgba(255,255,255,0.03);box-shadow:inset 0 2px 6px rgba(0,0,0,0.4);height:0;padding-bottom:112%}
.pad-menu-item > img{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);max-width:76%;max-height:76%;image-rendering:pixelated}
.pad-menu-item .pad-menu-overlay{position:absolute;left:6px;right:6px;top:6px;bottom:6px;padding:8px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.6));color:#fff;font-weight:700;display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;gap:6px;font-size:12px;opacity:0;transition:opacity 160ms linear}
.pad-menu-item:hover .pad-menu-overlay{opacity:1}
.pad-menu-item .pad-menu-overlay .price{background:rgba(255,255,255,0.06);padding:4px 6px;border-radius:6px;font-size:11px}
.pad-menu-item .pad-menu-overlay .persec{background:rgba(0,0,0,0.3);padding:4px 6px;border-radius:6px;font-size:11px}

.pad-menu.hidden{display:none}

/* Upgrades panel styles */
.pad-upgrades{background:linear-gradient(180deg,#051018 0%,#081220 100%);border-radius:10px;padding:8px;display:none;flex-direction:column;gap:6px;overflow:hidden;position:absolute;left:6px;right:6px;top:6px;bottom:12px}
.pad-upgrades-list{height:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:10px;padding:12px 12px 48px 12px}

/* Tasks panel - similar to upgrades but task cards arranged horizontally per row and vertical scroll only */
#pad-tasks .pad-upgrades-list{padding:12px 12px 48px 12px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden}
.task-row{display:flex;align-items:stretch;gap:12px}
.task-card{flex:1;display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;padding:12px;border-radius:10px;background:linear-gradient(180deg,#102024,#081218);border:1px solid rgba(255,255,255,0.04)}
.task-card{position:relative;overflow:hidden}
.task-card .task-left, .task-card .task-right{position:relative;z-index:2}
.task-time-overlay{position:absolute;right:0;top:0;bottom:0;width:100%;z-index:1;transition:width 400ms linear;opacity:0.12}
.task-time-easy{background:linear-gradient(90deg,#3be86a,#11c24a)}
.task-time-medium{background:linear-gradient(90deg,#ffb86b,#ff8a3b)}
.task-time-hard{background:linear-gradient(90deg,#ff6b6b,#ff3b3b)}
.task-left{flex:1;display:flex;flex-direction:column;gap:6px}
.task-title{font-weight:900;color:#fff}
.task-progress{font-size:13px;color:#dfe;text-align:left}
.task-right{display:flex;align-items:center}
.task-claim{padding:8px 12px;border-radius:8px;background:linear-gradient(180deg,#06c 0%,#038 100%);color:#fff;border:none;font-weight:800;cursor:pointer}
.task-claim[disabled]{opacity:0.4;cursor:default;background:linear-gradient(180deg,#444,#222)}
.task-timer-bar{width:100%;height:10px;background:rgba(0,0,0,0.12);border-radius:6px;overflow:hidden;margin-top:6px;position:relative}
.task-timer-fill{position:absolute;right:0;top:0;bottom:0;background:linear-gradient(90deg,#3be86a,#11c24a);width:100%;transition:width 300ms linear}
.upgrade-item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:10px;background:linear-gradient(180deg,#0b1620 0%,#09121a 100%);border:1px solid rgba(255,255,255,0.04);width:200px;box-sizing:border-box;min-height:72px}
.upgrade-item .ui{display:flex;align-items:flex-start;gap:12px}
.upgrade-item img{width:30px;height:30px;object-fit:contain}
.upgrade-item .desc{color:#fff;font-weight:700;flex:1;font-size: 12px;}
.upgrade-item .actions{display:flex;align-items:center;gap:8px}
.upgrade-item button{padding:6px 10px;border-radius:8px;border:none;background:linear-gradient(180deg,#06c 0%,#038 100%);color:#fff;font-weight:800;margin-right: 36px;}
/* Save/Load buttons share the visual style but should not have the large right margin */
.upgrade-item .save-btn,
.upgrade-item .load-btn{
	padding:6px 10px;
	border-radius:8px;
	border:none;
	background:linear-gradient(180deg,#06c 0%,#038 100%);
	color:#fff;
	font-weight:800;
	margin-right: 0; /* overridden to remove spacing for Save/Load */
}

/* English mode: stack Save/Load vertically in the settings row (only for pad area) */
.lang-en #pad .upgrade-item[data-setting-id="save_load"] .actions{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:stretch;
}
.lang-en #pad .upgrade-item[data-setting-id="save_load"] .actions .pad-btn{
    width:100%;
    margin-right:0;
}
.upgrade-item button.max{background:linear-gradient(180deg,#444 0%,#222 100%);cursor:default}
/* disabled upgrade buttons should visually match the 'max' appearance */
.upgrade-item button[disabled]{background:linear-gradient(180deg,#444 0%,#222 100%);cursor:default;opacity:0.85;color:#ddd}

/* Custom panel (客製) reuses pad-upgrades look but uses rows for horizontal selectors */
.pad-custom{display:none}
.custom-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:10px;background:linear-gradient(180deg,#0b1620 0%,#09121a 100%);border:1px solid rgba(255,255,255,0.04);box-sizing:border-box;min-height:56px}
.custom-left{display:flex;align-items:center;gap:8px;min-width:48px}
.custom-thumb{width:40px;height:40px;object-fit:contain;border-radius:6px;background:rgba(0,0,0,0.06)}
.custom-mid{display:none}
.custom-actions{display:flex;align-items:center;gap:8px}
.custom-btn{padding:8px 10px;border-radius:8px;border:none;background:linear-gradient(180deg,#06c 0%,#038 100%);color:#fff;font-weight:800}
.custom-buy-row{display:flex;justify-content:center;padding:12px}
.custom-buy-row .pad-btn{min-width:220px}

/* visually indicate disabled state for custom buy button */
.custom-buy-row .pad-btn[disabled], .custom-buy-row .pad-btn.disabled{
	opacity: 0.45;
	cursor: default;
	filter: grayscale(40%);
	box-shadow: none;
}

/* Tools panel styles: similar to upgrades but force vertical list and item layout */
#pad-tools .pad-upgrades-list{padding:12px 12px 48px 12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.tool-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#0b1620 0%,#09121a 100%);border:1px solid rgba(255,255,255,0.04)}
.tool-left{display:flex;align-items:center;gap:10px}
.tool-icon{width:46px;height:46px;object-fit:contain;border-radius:8px;background:rgba(0,0,0,0.06);padding:4px}
.tool-desc{flex:1;color:#fff;font-weight:700}
.tool-buy{padding:8px 12px;border-radius:8px;border:none;background:linear-gradient(180deg,#06c 0%,#038 100%);color:#fff;font-weight:800}
.tool-buy{background:linear-gradient(180deg,#666 0%,#444 100%);color:#fff}
.tool-buy.disabled{opacity:0.6;cursor:default}
.tool-buy.active{background:linear-gradient(180deg,#06c 0%,#038 100%);color:#fff}
.tool-item.disabled{opacity:0.6;background:linear-gradient(180deg,#071018 0%,#081220 100%)}
.custom-buy-btn{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:10px;padding:12px 16px}
.buy-price-line{font-weight:900;font-size:16px}
.buy-badge-line{font-size:13px;color:#fff;background:rgba(0,0,0,0.12);padding:4px 8px;border-radius:8px;margin-top:2px}

/* badge stack in header */
#badge-wrap{display:flex;align-items:center;gap:0;/* badges overlap, gap handled by negative margin */}
.badge-item{width:44px;height:44px;object-fit:contain;border-radius:6px;box-shadow:0 6px 14px rgba(0,0,0,0.35);position:relative;margin-left:-12px;border:2px solid rgba(0,0,0,0.18);background:#111}
.badge-item:first-child{margin-left:0}
/* ensure later badges render on top */
.badge-item:nth-child(1){z-index:11}
.badge-item:nth-child(2){z-index:12}
.badge-item:nth-child(3){z-index:13}
.badge-item:nth-child(4){z-index:14}
.badge-item:nth-child(5){z-index:15}
.badge-item:nth-child(6){z-index:16}
.badge-item:nth-child(7){z-index:17}
.badge-item:nth-child(8){z-index:18}
.badge-item:nth-child(9){z-index:19}
.badge-item:nth-child(10){z-index:20}
.badge-more{font-weight:900;color:#fff;background:rgba(0,0,0,0.45);padding:6px 8px;border-radius:8px;margin-left:-6px}

/* hide native scrollbars in pad lists for cleaner UI */
.pad-upgrades-list::-webkit-scrollbar, .pad-menu-list::-webkit-scrollbar, #pad-custom-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pad-upgrades-list, .pad-menu-list, #pad-custom-list { -ms-overflow-style: none; scrollbar-width: none; }

/* when menu is open, hide only pad rows (button grid); keep footer (homebar) visible */
.pad-screen.menu-open .pad-row{display:none}
.pad-screen.menu-open .pad-menu:not(.hidden){display:flex}
.pad-screen.menu-open .pad-upgrades:not(.hidden){display:flex}
/* keep footer/homebar on top */
.pad-footer{z-index:40}
.pad-home{z-index:50}
.pad-messages{margin-top:8px;font-size:13px;color:#f3f3f3;max-height:180px;overflow:auto;padding:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.06));border-radius:10px}

/* hide messages area visually (no button-function logs shown) */
#messages{display:none}

/* stylistic neon borders to give entertainment vibe */
.pad-frame::before{ content:'';position:absolute;left:8px;right:8px;top:8px;height:6px;background:linear-gradient(90deg,#ff3b3b,#3bd2ff,#ffc43b);filter:blur(6px);opacity:0.12;border-radius:6px}

/* responsive: shrink pad on small screens */
@media(max-width:900px){ #pad{width:280px} .pad-btn{font-size:16px;padding:10px} .pad-frame{height:260px} }

/* floating money animation shown when a plate yields income */
.floating-money{pointer-events:none;display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(0);transition:opacity 160ms linear, transform 800ms ease-out;z-index:100000}
.floating-money-icon{width:22px;height:22px;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.38));}
.floating-money-text{font-weight:900;color:#fff;background:rgba(0,0,0,0.6);padding:6px 10px;border-radius:10px;font-size:16px;text-shadow:0 2px 6px rgba(0,0,0,0.6)}
.floating-money-animate{opacity:1;transform:translateY(-36px);} 

/* Auction UI styles */
.auction-btn-wrap{position:absolute;width:260px;height:70px;pointer-events:auto;display:block;text-align:center;z-index:100020}
.auction-btn{background:linear-gradient(180deg,#ff4b4b 0%,#c92b2b 100%);color:#fff;padding:14px 20px;border-radius:14px;border:2px solid rgba(255,255,255,0.06);font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,0.45);cursor:pointer;min-width:200px;display:inline-block}
/* icons positioned absolutely so they don't affect button layout */
.auction-btn-wrap .auction-player-icon, .auction-btn-wrap .auction-customer-icon{position:absolute;top:50%;transform:translateY(-50%);width:64px;height:64px;object-fit:contain;max-width:none !important;max-height:none !important}
.auction-btn-wrap .auction-player-icon{left:-80px}
.auction-btn-wrap .auction-customer-icon{right:-80px}
.auction-plate .price-text{animation: auction-flash 900ms infinite;}
@keyframes auction-flash { 0%{ color: #fff } 50%{ color: #ff7070 } 100%{ color: #fff } }
.auction-icon{position:absolute;top:-18px;right:8px;width:20px;height:20px}

/* customer hand styles */
.customer-hand{width:120px;height:auto;pointer-events:none;transition:left 160ms linear, top 160ms linear;z-index:200000}

/* Enchant glow levels for sushi icons — single-layer drop-shadow for performance */
.sushi-icon.enchant-1, .sushi-phantom.enchant-1 { filter: drop-shadow(0 4px 8px rgba(42, 197, 76, 0.65)); }
.sushi-icon.enchant-2, .sushi-phantom.enchant-2 { filter: drop-shadow(0 6px 12px rgba(54, 137, 255, 0.68)); }
.sushi-icon.enchant-3, .sushi-phantom.enchant-3 { filter: drop-shadow(0 8px 14px rgba(163, 64, 255, 0.7)); }
.sushi-icon.enchant-4, .sushi-phantom.enchant-4 { filter: drop-shadow(0 10px 18px rgba(255, 198, 56, 0.75)); }
.sushi-icon.enchant-5, .sushi-phantom.enchant-5 { filter: drop-shadow(0 12px 20px rgba(255,90,180,0.85)); }

/* subtle pulsing for highest rarity — animate filter (drop-shadow) only so translate positioning isn't overwritten */
.sushi-icon.enchant-5 { animation: enchant-pulse 1800ms ease-in-out infinite; }
@keyframes enchant-pulse {
	0% { filter: drop-shadow(0 10px 16px rgba(255,90,180,0.68)); }
	50% { filter: drop-shadow(0 16px 28px rgba(255,90,180,0.95)); }
	100% { filter: drop-shadow(0 10px 16px rgba(255,90,180,0.68)); }
}

/* Fly bug styles */
.fly-bug{
	width:28px;
	height:28px;
	object-fit:contain;
	pointer-events:auto;
	transition:transform 160ms linear,left 120ms linear,top 120ms linear;
	transform-origin:center center;
	filter:drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}

/* Experience bar under conveyor */
.exp-wrap{display:flex;align-items:center;gap:10px;position:relative;margin-top:1px;padding:6px 8px;border-radius:10px;
	/* shift the whole exp UI visually down so it appears under the desktop slots
	   This uses a pure-CSS transform so JS and numeric values (EXP math) remain unchanged. */
	transform: translateY(260px);
	transition: transform 220ms ease;
}
.active-tools-wrap{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:6px;z-index:120000;}
.active-tool-icon{width:28px;height:28px;object-fit:contain;border-radius:6px;background:rgba(0,0,0,0.18);padding:4px;cursor:default}
.active-tool-icon:hover{filter:drop-shadow(0 6px 10px rgba(0,0,0,0.4));}
.active-tool-tooltip{position:absolute;display:none;white-space:nowrap;background:rgba(0,0,0,0.8);color:#fff;padding:6px 8px;border-radius:6px;font-weight:700;font-size:13px;transform:translateY(-120%);}
.active-tool-wrap-item{position:relative}
.active-tool-wrap-item:hover .active-tool-tooltip{display:block}
.exp-icon{width:28px;height:28px;object-fit:contain;transition:transform 220ms ease}
.exp-drag-preview{width:56px;height:56px;object-fit:contain;transform:translate(-50%,-50%);transition:transform 120ms linear, opacity 120ms linear;pointer-events:none;}
.exp-bar-outer{flex:0 0 1050px; /* tripled: originally 420px */
	width:1000px; max-width:90vw; height:14px;background:linear-gradient(180deg,#153b17,#0f2e12);border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.04)}
.exp-bar-fill{height:100%;background:linear-gradient(90deg,#3be86a,#11c24a);width:0%;transition:width 500ms cubic-bezier(.2,.9,.3,1);} 

/* Responsive tweaks: slightly less vertical shift and narrower bar on small screens */
@media(max-width:900px){
	.exp-wrap{ transform: translateY(200px); }
	/* tripled small-screen width: originally 260px */
	.exp-bar-outer{ flex:0 0 780px; width:780px; max-width:94vw; }
}
.exp-glow{box-shadow:0 0 12px rgba(59,232,106,0.75);}
.exp-level-text{min-width:48px;color:#dfffe6;font-weight:800;text-align:right}
@keyframes expIconShake{0%{transform:rotate(-12deg)}25%{transform:rotate(8deg)}50%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}100%{transform:rotate(0deg)}}
.exp-icon-shake{animation: expIconShake 700ms ease-in-out}

/* smoke overlay for enchant visual (covers plate area) */
.smoke-overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:0.98;z-index:5000}

/* smoke pop animations: pop-in (scale from 0.6 -> 1.05 -> 1) then pop-out (scale to 0.6 + fade)
	 We use transform and opacity only (no layout) for performance. */
.smoke-pop{transform:scale(0.6);opacity:0;animation: smokePopIn 220ms cubic-bezier(.2,.9,.3,1) forwards;}
.smoke-pop-out{animation: smokePopOut 220ms cubic-bezier(.2,.9,.3,1) forwards;}

@keyframes smokePopIn{
	0%{ transform:scale(0.6); opacity:0; }
	60%{ transform:scale(1.05); opacity:0.95; }
	100%{ transform:scale(1); opacity:1; }
}
@keyframes smokePopOut{
	0%{ transform:scale(1); opacity:1; }
	100%{ transform:scale(0.6); opacity:0; }
}

/* exp icon glow when draggable (level>4 and has enchant stones) */
.exp-icon.draggable-ready{filter: drop-shadow(0 0 12px rgba(60,220,140,0.9)) drop-shadow(0 0 24px rgba(60,180,255,0.25));transform:scale(1.06)}

/* Rebirth button and progress UI inside pad settings */
.rebirth-btn{background:linear-gradient(180deg,#ff5252 0%,#d92b2b 100%);color:#fff;border:2px solid rgba(255,255,255,0.06);padding:10px 16px;border-radius:10px;cursor:pointer;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.rebirth-btn[disabled]{background:linear-gradient(180deg,#6b1f1f 0%,#4b1515 100%);color:#fff;opacity:1;cursor:default;box-shadow:none}
/* inner progress overlay (inside button) */
.rebirth-prog-inner{height:100%;position:absolute;left:0;top:0;border-radius:8px;z-index:0}
.rebirth-btn > span{position:relative;z-index:2}

/* celebration confetti items */
.celebration-item{pointer-events:auto;transition:transform 360ms linear, opacity 400ms linear;filter:drop-shadow(0 6px 12px rgba(0,0,0,0.45));cursor:pointer}

.rebirth-prog-wrap{display:inline-flex;align-items:center}

/* shake animation for disabled click feedback */
@keyframes rebirthShake{ 0%{ transform: translateX(0) } 20%{ transform: translateX(-8px) } 40%{ transform: translateX(8px) } 60%{ transform: translateX(-6px) } 80%{ transform: translateX(6px) } 100%{ transform: translateX(0) } }
.rebirth-btn.shake{ animation: rebirthShake 520ms cubic-bezier(.2,.9,.3,1); }

/* slight glow when enabled to highlight interactivity */
.rebirth-btn.enabled-glow{ box-shadow: 0 8px 28px rgba(217,43,43,0.28), inset 0 -6px 14px rgba(0,0,0,0.15); }

/* Rebirth central popup */
.rebirth-popup{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(0.6);z-index:2000000;color:#fff;font-weight:900;font-size:72px;padding:12px 18px;border-radius:12px;pointer-events:none;opacity:0;display:inline-block;text-align:center}
@keyframes rebirthPopIn{
	0%{ transform:translate(-50%,-50%) scale(0.6); opacity:0 }
	60%{ transform:translate(-50%,-50%) scale(1.14); opacity:1 }
	100%{ transform:translate(-50%,-50%) scale(1.0); opacity:1 }
}

/* small sublabel under rebirth main label */
.rebirth-sub{ display:block; font-size:12px; font-weight:700; line-height:1; margin-top:4px; color:rgba(255,255,255,0.95); }
@keyframes rebirthPopOut{
	0%{ transform:translate(-50%,-50%) scale(1.0); opacity:1 }
	100%{ transform:translate(-50%,-50%) scale(0.6); opacity:0 }
}

/* small toast used for save/load confirmations and lightweight messages */
.shi-toast{background:rgba(0,0,0,0.78);color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,0.6);font-weight:800;opacity:0;pointer-events:none;transition:opacity 220ms ease, transform 220ms ease;display:inline-block}
.shi-toast.show{opacity:1;transform:translateY(-6px);pointer-events:auto}
.shi-toast-container{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;z-index:99999;display:flex;flex-direction:row;gap:12px;align-items:center}

/* ensure fly-bug hit area is visually clickable on mobile (no change to appearance) */
.fly-bug{touch-action:none}

/* icons used in pad settings (left side) */
.pad-setting-icon{width:36px;height:36px;object-fit:contain;margin-right:8px;vertical-align:middle}

/* Language-specific adjustments: English mode narrower pad buttons (scope to #pad only)
	 This prevents other global buttons (like auction buttons) from being affected. */
.lang-en #pad .pad-btn{
		/* reduce flexible growth and padding so English labels fit better visually */
		flex: 0 0 auto;
		min-width: 60px; /* ensure buttons don't collapse too small */
		padding: 0px 0px;
		font-size:18px;
}

/* optionally reduce gap between buttons in English mode for compactness */
.lang-en #pad .pad-row{gap:6px}

/* Ensure auction buttons keep their intended appearance even when .lang-en is present */
.lang-en .auction-btn{
	background: linear-gradient(180deg,#ff4b4b 0%,#c92b2b 100%);
	color: #fff;
	padding: 14px 20px;
	border-radius: 14px;
	border: 2px solid rgba(255,255,255,0.06);
	font-weight: 900;
	box-shadow: 0 12px 28px rgba(0,0,0,0.45);
	cursor: pointer;
	min-width: 200px;
	display: inline-block;
}

/* Hide the 'Other' pad-menu tab to prevent exposing easter-egg content.
	 This uses a strong selector and !important to ensure it's not visible. */
.pad-menu-tab[data-cat="other"], .pad-menu-tab[data-i18n="other"]{
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}