/* ============================================================================
   SUSHI CHEF WORLD (sushichef.world) - Arcade Visual Styling & Animations
   Full-screen layout, bigger elements, and Windows Flag Emoji support
   ============================================================================ */

@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
  font-display: swap;
}

:root {
  --wood-dark: #451a03;
  --wood-mid: #78350f;
  --wood-light: #b45309;
  --lacquer-red: #991b1b;
  --lacquer-bright: #dc2626;
  --gold-bright: #facc15;
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body,
button,
input,
select,
option,
.flag-emoji {
  font-family: "Twemoji Country Flags", 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at center, #271206 0%, #0f0702 100%);
  overflow: hidden;
  height: 100dvh;
  width: 100vw;
  color: #f8fafc;
}

/* Arcade Text Stroke & Glow */
.arcade-title {
  font-family: "Twemoji Country Flags", 'Impact', 'Arial Black', sans-serif;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 #78350f, 0 4px 8px rgba(0, 0, 0, 0.75);
}

.combo-text {
  font-family: 'Impact', 'Arial Black', sans-serif;
  color: #bef264;
  -webkit-text-stroke: 2px #365314;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 18px rgba(190, 242, 100, 0.8);
}

/* Lacquered Red & Gold Top HUD Bar */
.hud-lacquer {
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 55%, #450a0a 100%);
  border-bottom: 3px solid #f59e0b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Shoji Screen & 5 Restaurant Back Wall Theme Variations */
.shoji-wall,
.bg-theme-shoji {
  background-color: #3b1908;
  background-image:
    linear-gradient(90deg, rgba(45, 18, 6, 0.88) 0%, rgba(69, 26, 3, 0.4) 15%, rgba(69, 26, 3, 0.4) 85%, rgba(45, 18, 6, 0.88) 100%),
    repeating-linear-gradient(90deg, transparent 0px, transparent 105px, #291004 105px, #291004 112px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 56px, rgba(41, 16, 4, 0.65) 56px, rgba(41, 16, 4, 0.65) 60px),
    linear-gradient(180deg, #78350f 0%, #d97706 35%, #f59e0b 70%, #b45309 100%);
  position: relative;
}

/* Variation 2: Mount Fuji & Kyoto Sakura Sunset */
.bg-theme-sakura {
  background-color: #4c0519;
  background-image:
    linear-gradient(90deg, rgba(59, 7, 100, 0.72) 0%, rgba(131, 24, 67, 0.25) 20%, rgba(131, 24, 67, 0.25) 80%, rgba(59, 7, 100, 0.72) 100%),
    repeating-linear-gradient(90deg, transparent 0px, transparent 115px, rgba(76, 5, 25, 0.45) 115px, rgba(76, 5, 25, 0.45) 121px),
    linear-gradient(180deg, #3b0764 0%, #9d174d 38%, #f43f5e 74%, #fb923c 100%);
  position: relative;
}
.bg-theme-sakura .paper-lantern {
  background: radial-gradient(circle at 50% 45%, #fff1f2 0%, #fda4af 55%, #e11d48 90%, #881337 100%);
  box-shadow: 0 0 28px 8px rgba(244, 63, 94, 0.6);
}

/* Variation 3: Tokyo Neon Night Skyline */
.bg-theme-tokyo {
  background-color: #0f172a;
  background-image:
    linear-gradient(90deg, rgba(2, 6, 23, 0.8) 0%, rgba(30, 27, 75, 0.25) 20%, rgba(30, 27, 75, 0.25) 80%, rgba(2, 6, 23, 0.8) 100%),
    repeating-linear-gradient(90deg, transparent 0px, transparent 110px, rgba(15, 23, 42, 0.5) 110px, rgba(15, 23, 42, 0.5) 116px),
    linear-gradient(180deg, #090d16 0%, #1e1b4b 38%, #4c1d95 72%, #831843 100%);
  position: relative;
}
.bg-theme-tokyo .paper-lantern {
  background: radial-gradient(circle at 50% 45%, #e0f2fe 0%, #38bdf8 55%, #0284c7 90%, #1e3a8a 100%);
  box-shadow: 0 0 28px 8px rgba(56, 189, 248, 0.65);
}

/* Variation 4: Emerald Bamboo Zen Courtyard */
.bg-theme-bamboo {
  background-color: #064e3b;
  background-image:
    linear-gradient(90deg, rgba(2, 44, 34, 0.82) 0%, rgba(6, 78, 59, 0.28) 20%, rgba(6, 78, 59, 0.28) 80%, rgba(2, 44, 34, 0.82) 100%),
    repeating-linear-gradient(90deg, transparent 0px, transparent 105px, rgba(2, 44, 34, 0.5) 105px, rgba(2, 44, 34, 0.5) 111px),
    linear-gradient(180deg, #022c22 0%, #065f46 38%, #10b981 74%, #65a30d 100%);
  position: relative;
}
.bg-theme-bamboo .paper-lantern {
  background: radial-gradient(circle at 50% 45%, #fefce8 0%, #bef264 55%, #65a30d 90%, #365314 100%);
  box-shadow: 0 0 28px 8px rgba(163, 230, 53, 0.55);
}

/* Variation 5: Ocean Wave Coastal Izakaya */
.bg-theme-ocean {
  background-color: #0c4a6e;
  background-image:
    linear-gradient(90deg, rgba(8, 47, 73, 0.82) 0%, rgba(12, 74, 110, 0.28) 20%, rgba(12, 74, 110, 0.28) 80%, rgba(8, 47, 73, 0.82) 100%),
    repeating-linear-gradient(90deg, transparent 0px, transparent 108px, rgba(8, 47, 73, 0.45) 108px, rgba(8, 47, 73, 0.45) 114px),
    linear-gradient(180deg, #082f49 0%, #0369a1 40%, #0ea5e9 75%, #2dd4bf 100%);
  position: relative;
}
.bg-theme-ocean .paper-lantern {
  background: radial-gradient(circle at 50% 45%, #fff7ed 0%, #fdba74 55%, #ea580c 90%, #9a3412 100%);
  box-shadow: 0 0 28px 8px rgba(251, 146, 60, 0.6);
}

/* Hanging Japanese Paper Lantern Glow */
.paper-lantern {
  background: radial-gradient(circle at 50% 45%, #fef9c3 0%, #fde047 55%, #f59e0b 90%, #b45309 100%);
  box-shadow: 0 0 28px 8px rgba(251, 191, 36, 0.55);
  animation: lanternSway 4.5s ease-in-out infinite alternate;
}

@keyframes lanternSway {
  0% { transform: rotate(-1.5deg); }
  100% { transform: rotate(1.5deg); }
}

/* Warm Grained Wood Countertop (Above & Below Conveyor Belt) */
.wood-counter {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(69, 26, 3, 0.14) 0px,
      rgba(69, 26, 3, 0.14) 24px,
      rgba(120, 53, 15, 0.08) 24px,
      rgba(120, 53, 15, 0.08) 48px
    ),
    linear-gradient(180deg, #b45309 0%, #92400e 45%, #78350f 85%, #451a03 100%);
  border-top: 3px solid #d97706;
  border-bottom: 3px solid #291004;
  box-shadow: inset 0 2px 4px rgba(254, 240, 138, 0.25);
}

/* Animated Interlocking Metallic Conveyor Belt Track */
.conveyor-housing {
  background: linear-gradient(180deg, #1e293b 0%, #334155 20%, #475569 50%, #1e293b 100%);
  border-top: 3px solid #0f172a;
  border-bottom: 4px solid #0f172a;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.75);
}

.conveyor-slats {
  background-image: repeating-linear-gradient(
    90deg,
    #64748b 0px,
    #94a3b8 10px,
    #cbd5e1 18px,
    #64748b 26px,
    #334155 30px,
    #1e293b 34px
  );
  background-size: 34px 100%;
  will-change: background-position;
}

/* Chef's Wooden Prep Station (Bottom Half) */
.wood-prep-station {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(45, 18, 6, 0.18) 0px,
      rgba(45, 18, 6, 0.18) 18px,
      transparent 18px,
      transparent 38px
    ),
    linear-gradient(180deg, #92400e 0%, #78350f 55%, #5c280b 100%);
  border-top: 4px solid #b45309;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.45);
}

/* Stainless Steel Recessed Ingredient Trays */
.steel-bin {
  background: linear-gradient(145deg, #475569 0%, #1e293b 45%, #0f172a 100%);
  border: 3px solid #cbd5e1;
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.08s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.steel-bin:hover:not(:disabled) {
  border-color: #facc15;
  transform: translateY(-2px);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(250, 204, 21, 0.5);
}

.steel-bin:active:not(:disabled) {
  transform: scale(0.95);
}

.steel-bin-empty-slot {
  background: linear-gradient(145deg, #334155 0%, #1e293b 60%, #0f172a 100%);
  border: 3px solid #64748b;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.85);
}

/* Woven Bamboo Rolling Mat (Makisu) */
.bamboo-mat {
  background:
    repeating-linear-gradient(
      90deg,
      #854d0e 0px,
      #a16207 6px,
      #ca8a04 10px,
      #713f12 14px
    );
  border: 3px solid #451a03;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.6),
    inset 0 0 12px rgba(0, 0, 0, 0.35);
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bamboo-mat::before,
.bamboo-mat::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    #fef3c7 0px,
    #fde68a 6px,
    #d97706 7px,
    #fef3c7 10px
  );
  border-top: 1px solid #92400e;
  border-bottom: 1px solid #92400e;
  pointer-events: none;
}

.bamboo-mat::before {
  top: 9px;
}

.bamboo-mat::after {
  bottom: 9px;
}

/* 0.5s Bamboo Mat Rolling Animation */
@keyframes rollBambooMat {
  0% {
    transform: scaleY(1) scaleX(1);
    filter: brightness(1);
  }
  40% {
    transform: scaleY(0.28) scaleX(0.92) rotate(-2deg);
    border-radius: 999px;
    filter: brightness(1.25);
  }
  75% {
    transform: scaleY(0.35) scaleX(1.04) rotate(2deg);
    border-radius: 999px;
  }
  100% {
    transform: scaleY(1) scaleX(1);
    filter: brightness(1);
  }
}

.mat-rolling {
  animation: rollBambooMat 0.62s ease-in-out forwards;
}

/* Customer Animations */
@keyframes customerEnter {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.customer-enter {
  animation: customerEnter 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes customerBob {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

.customer-idle {
  animation: customerBob 2.4s ease-in-out infinite;
}

@keyframes angryShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-2deg); }
  40% { transform: translateX(4px) rotate(2deg); }
  60% { transform: translateX(-4px) rotate(-1deg); }
  80% { transform: translateX(4px) rotate(1deg); }
}

.customer-angry-shake {
  animation: angryShake 0.4s ease-in-out infinite;
}

/* Glossy Customer Speech Bubble */
.speech-bubble {
  background: radial-gradient(circle at 50% 35%, #ffffff 0%, #f1f5f9 75%, #cbd5e1 100%);
  border: 3px solid #94a3b8;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5), inset 0 2px 4px #ffffff;
  position: relative;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 9px 0;
  border-style: solid;
  border-color: #cbd5e1 transparent transparent;
}

/* Special VIP Order Speech Bubble */
.speech-bubble-special {
  background: radial-gradient(circle at 50% 35%, #fff1f2 0%, #ffe4e6 70%, #fecdd3 100%);
  border: 3px solid #ec4899;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.7), 0 5px 12px rgba(0, 0, 0, 0.5);
}

.speech-bubble-special::after {
  border-color: #ec4899 transparent transparent;
}

/* Floating Score / Combo Popups */
@keyframes floatScoreUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.8);
  }
  25% {
    opacity: 1;
    transform: translateY(-16px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translateY(-54px) scale(0.95);
  }
}

.floating-popup {
  animation: floatScoreUp 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

/* Red Lacquered Recipe Book */
.recipe-book-cover {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 60%, #7f1d1d 100%);
  border: 3px solid #f59e0b;
  border-left: 8px solid #450a0a;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

/* Countertop White Push-Button Telephone */
.counter-phone {
  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 65%, #cbd5e1 100%);
  border: 3px solid #94a3b8;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.55), inset 0 2px 3px #ffffff;
}

/* Live Ad Containers (Clean & Transparent) */
.ad-slot {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Custom Scrollbar for Modals */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
}
::-webkit-scrollbar-thumb {
  background: #d97706;
  border-radius: 999px;
}