/* STREAMING_CHUNK:Configuring root variables and base mobile styles... */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800;900&family=Noto+Sans+TC:wght@700;900&display=swap');

:root {
--sat: env(safe-area-inset-top, 0px);
--sab: env(safe-area-inset-bottom, 0px);
--sal: env(safe-area-inset-left, 0px);
--sar: env(safe-area-inset-right, 0px);
--cocoa-line: #4A3326;
--cocoa-soft: #6E4F3A;
--cream-bg: #FFFDF7;
}

{
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
}

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
height: 100dvh;
overflow: hidden;
position: fixed;
inset: 0;
background: #EAD7C0;
touch-action: none;
overscroll-behavior: none;
font-family: 'M PLUS Rounded 1c', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
color: #4A3326;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

img, svg, canvas {
-webkit-user-drag: none;
user-select: none;
}

#shelf-canvas {
touch-action: none;
}

button {
touch-action: manipulation;
}

.safe-top    { padding-top: max(0.35rem, var(--sat)); }
.safe-bottom { padding-bottom: max(0.4rem, var(--sab)); }

/* STREAMING_CHUNK:Styling clean scene backgrounds without top fog overlays... */
.scene-bg-lobby {
background: linear-gradient(180deg, #D8F3DC 0%, #FFF8EC 46%, #FFE5D9 82%, #F9DCC4 100%);
}
.scene-bg-game {
background: linear-gradient(180deg, #FFFDF7 0%, #FDF0D5 52%, #F4E1C1 100%);
}
.scene-bg-map {
background: linear-gradient(180deg, #FFE5B4 0%, #FFD194 45%, #FFAD87 82%, #F39A7E 100%);
}
.scene-bg-gacha {
background: linear-gradient(180deg, #FFEFF4 0%, #FFF5E4 50%, #FDE2E4 85%, #F9C6C9 100%);
}
.scene-bg-shop {
background-color: #F4F9F4;
background-image:
linear-gradient(rgba(107,163,104,0.14) 1px, transparent 1px),
linear-gradient(90deg, rgba(107,163,104,0.14) 1px, transparent 1px);
background-size: 22px 22px, 22px 22px;
}
.scene-bg-quests {
background: linear-gradient(180deg, #FBF6EE 0%, #F2E5D0 55%, #E5D1B8 100%);
}

.scene-layer {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}

/* STREAMING_CHUNK:Defining interior and street background layers... */
.scene-lobby-street {
background:
repeating-linear-gradient(96deg, transparent 0 22px, rgba(74,51,38,0.07) 22px 24px),
repeating-linear-gradient(84deg, transparent 0 18px, rgba(74,51,38,0.05) 18px 20px),
linear-gradient(180deg, #FFEFD9 0%, #FFD194 32%, #FFF3D6 55%, #EAD7C0 100%);
}

.scene-game-interior {
background:
repeating-linear-gradient(0deg, rgba(140,88,58,0.10) 0 2px, transparent 2px 26px),
repeating-linear-gradient(90deg, rgba(74,51,38,0.06) 0 1px, transparent 1px 44px),
linear-gradient(180deg, #F8E3C4 0%, #F1DCBD 55%, #E3C7A2 100%);
}

.scene-map-dusk {
background:
radial-gradient(ellipse 46% 32% at 78% 58%, transparent 62%, rgba(140,88,58,0.32) 63%),
repeating-linear-gradient(90deg,
transparent 0 18px,
rgba(140,88,58,0.18) 18px 38px,
transparent 38px 58px,
rgba(140,88,58,0.24) 58px 78px),
linear-gradient(180deg, transparent 0 68%, rgba(74,51,38,0.28) 68% 69%, transparent 69%),
linear-gradient(180deg, transparent 0 78%, rgba(74,51,38,0.22) 78% 79%, transparent 79%),
linear-gradient(180deg, #FFE5B4 0%, #FFD194 30%, #FFB07C 60%, #E88E6E 100%);
}

.scene-gacha-shrine {
background:
linear-gradient(90deg,
transparent 0 14%,
rgba(217,78,103,0.62) 14% 17%,
transparent 17% 83%,
rgba(217,78,103,0.62) 83% 86%,
transparent 86% 100%),
linear-gradient(180deg,
transparent 0 22%,
rgba(217,78,103,0.72) 22% 26%,
transparent 26% 30%,
rgba(217,78,103,0.55) 30% 33%,
transparent 33%),
repeating-linear-gradient(180deg,
transparent 0 82%,
rgba(74,51,38,0.16) 82% 83%,
transparent 83% 88%,
rgba(74,51,38,0.12) 88% 89%,
transparent 89% 100%),
linear-gradient(180deg, #FFF0F5 0%, #FFF5E4 50%, #FDE2E4 100%);
}

.scene-shop-workroom {
background:
repeating-linear-gradient(0deg, rgba(107,163,104,0.10) 0 1px, transparent 1px 42px),
repeating-linear-gradient(90deg, rgba(107,163,104,0.10) 0 1px, transparent 1px 42px),
radial-gradient(circle at 22% 70%, rgba(200,138,85,0.24) 0 3px, transparent 3px),
radial-gradient(circle at 66% 78%, rgba(200,138,85,0.20) 0 2px, transparent 2px),
radial-gradient(circle at 42% 86%, rgba(200,138,85,0.18) 0 3px, transparent 3px),
radial-gradient(circle at 84% 88%, rgba(200,138,85,0.22) 0 2px, transparent 2px),
linear-gradient(180deg, #F4F9F4 0%, #E9F3E7 60%, #D8EBD5 100%);
}

.scene-quests-tatami {
background:
repeating-linear-gradient(0deg, rgba(74,51,38,0.10) 0 1px, transparent 1px 34px),
repeating-linear-gradient(90deg, rgba(74,51,38,0.10) 0 1px, transparent 1px 34px),
linear-gradient(180deg, transparent 0 8%, rgba(217,78,103,0.18) 8% 52%, transparent 52%),
repeating-linear-gradient(90deg, rgba(140,88,58,0.06) 0 2px, transparent 2px 22px),
linear-gradient(180deg, #FBF6EE 0%, #F2E5D0 55%, #E5D1B8 100%);
}

/* STREAMING_CHUNK:Configuring keyframe animations and UI components... */
@keyframes lanternFloat {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50%      { transform: translateY(-7px) rotate(2deg); }
}
.lantern-deco {
position: absolute;
will-change: transform;
animation: lanternFloat 5s ease-in-out infinite;
}

@keyframes petalFall {
0%   { transform: translate(0, -12px) rotate(0deg); opacity: 0; }
15%  { opacity: 0.9; }
100% { transform: translate(28px, 100vh) rotate(340deg); opacity: 0; }
}
.petal {
position: absolute;
width: 7px;
height: 7px;
background: radial-gradient(circle at 30% 30%, #FFC2D1, #FF85A1);
border-radius: 50% 0 50% 50%;
will-change: transform, opacity;
animation: petalFall linear infinite;
pointer-events: none;
}

.shelf-floor-bg {
background:
repeating-linear-gradient(90deg, rgba(74,51,38,0.06) 0 1px, transparent 1px 40px),
linear-gradient(180deg, #F8E3C4 0%, #E8D0B0 62%, #C89F78 100%);
}

.anime-border { border: 2.5px solid #4A3326; }

.anime-panel {
background: linear-gradient(180deg, #FFFFFF 0%, #FFF9EE 100%);
border: 2.5px solid #4A3326;
box-shadow: 0 3px 0 #4A3326, 0 5px 12px rgba(74,51,38,0.12);
contain: layout paint;
}

.anime-btn {
border: 2.5px solid #4A3326;
box-shadow: 0 3px 0 #4A3326;
transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s;
}
.anime-btn:active:not(:disabled) {
transform: translateY(2.5px) scale(0.97);
box-shadow: 0 0.5px 0 #4A3326;
}

.anime-stroke {
text-shadow:
-1.5px -1.5px 0 #4A3326, 1.5px -1.5px 0 #4A3326,
-1.5px  1.5px 0 #4A3326, 1.5px  1.5px 0 #4A3326,
0px    2.5px 0 #4A3326;
}
.anime-stroke-sm {
text-shadow:
-1.2px -1.2px 0 #4A3326, 1.2px -1.2px 0 #4A3326,
-1.2px  1.2px 0 #4A3326, 1.2px  1.2px 0 #4A3326;
}

.pop-btn { transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pop-btn:active:not(:disabled) { transform: translateY(2px) scale(0.95); }

.bamboo-slot {
background-color: #F7E6C4;
background-image:
repeating-linear-gradient(45deg, rgba(164,107,71,0.1) 0px, rgba(164,107,71,0.1) 4px, transparent 4px, transparent 8px),
repeating-linear-gradient(-45deg, rgba(164,107,71,0.1) 0px, rgba(164,107,71,0.1) 4px, transparent 4px, transparent 8px);
border: 2.5px solid #4A3326;
box-shadow: inset 0 2px 5px rgba(74,51,38,0.2), 0 2px 0 #4A3326;
}

@keyframes mascotBreathe {
0%, 100% { transform: translateY(0px) scaleY(1); }
50%      { transform: translateY(-3px) scaleY(1.015); }
}
.mascot-breathe {
will-change: transform;
animation: mascotBreathe 3s ease-in-out infinite;
transform-origin: bottom center;
}

@keyframes mascotBlink {
0%, 92%, 100% { transform: scaleY(1); }
96%           { transform: scaleY(0.08); }
}
.mascot-eye-blink { animation: mascotBlink 4.2s infinite; transform-origin: center; }

@keyframes toastPopIn {
0%   { transform: translateY(-10px) scale(0.94); opacity: 0; }
18%  { transform: translateY(0px) scale(1.02); opacity: 1; }
30%  { transform: translateY(0px) scale(1); opacity: 1; }
85%  { transform: translateY(0px) scale(1); opacity: 1; }
100% { transform: translateY(-6px) scale(0.96); opacity: 0; }
}
.toast-banner-anim { animation: toastPopIn 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes gachaShake {
0%, 100% { transform: rotate(0deg) scale(1); }
20%      { transform: rotate(-5deg) scale(1.03); }
40%      { transform: rotate(5deg) scale(1.03); }
60%      { transform: rotate(-3deg) scale(1.01); }
80%      { transform: rotate(3deg) scale(1.01); }
}
.gacha-shaking { animation: gachaShake 0.4s ease-in-out infinite; }

@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin-slow { animation: spinSlow 14s linear infinite; }

.noren-stripes {
background: repeating-linear-gradient(90deg, #FF85A1, #FF85A1 18px, #FFFDF7 18px, #FFFDF7 36px);
}

.mini-scene {
width: 40px;
height: 40px;
border-radius: 11px;
border: 2.5px solid #4A3326;
overflow: hidden;
flex-shrink: 0;
position: relative;
box-shadow: inset 0 -2px 4px rgba(74,51,38,0.12);
}
.mini-scene svg { display: block; width: 100%; height: 100%; }

.nav-card {
min-height: 58px;
padding: 6px 10px;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.allow-scroll-y { touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.allow-scroll-x { touch-action: pan-x; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }