/* ============================================
   Game Creator - "Kashiwa Sato × Nintendo" Vision
   極限のミニマル × 遊び心 × 本物のガラス
   ============================================ */

/* ===== Design Tokens ===== */
:root {
  /* Signature Color - Nintendo Red meets Modern */
  --red: #FF3B30;
  --red-light: rgba(255, 59, 48, 0.1);
  --red-glow: rgba(255, 59, 48, 0.4);

  /* Minimal Palette */
  --white: #FFFFFF;
  --black: #000000;
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-400: #A3A3A3;
  --gray-600: #525252;
  --gray-900: #171717;

  /* Glass */
  --glass-white: rgba(255, 255, 255, 0.72);
  --glass-white-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --blur: 24px;

  /* Spacing - 8px grid */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;

  /* Radius */
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;
  --r-full: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.4s;
}

/* ===== Animations ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== Typography - Inter (loaded via HTML <link> for performance) ===== */
/* Font is loaded in HTML with rel="preconnect" to avoid render-blocking */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gray-100);
  color: var(--gray-900);
  line-height: 1.5;
}

/* ===== Background - Gradient Mesh ===== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(255, 59, 48, 0.15), transparent),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(255, 59, 48, 0.1), transparent),
    linear-gradient(180deg, var(--white) 0%, var(--gray-100) 100%);
  z-index: -1;
}

.hidden {
  display: none !important;
}

/* ===== Main Layout ===== */
.container {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* ===== Project List View - Nintendo × Kashiwa Sato ===== */
.project-list-view {
  height: 100%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Minimal Header */
.list-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-16) var(--s-32);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gray-100);
}

.list-header-left {
  display: flex;
  align-items: center;
  gap: var(--s-12);
}

.brand-mark {
  width: 28px;
  height: 28px;
  background: var(--red);
  border-radius: 8px;
  position: relative;
}

.brand-mark::after {
  content: '';
  position: absolute;
  inset: 6px;
  background: var(--white);
  border-radius: 4px;
}

.brand-text {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gray-900);
}

.list-header-right {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}

.connection-dot {
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.user-id {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-600);
}

.sign-out-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--r-8);
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sign-out-btn:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}

/* Notifications Button */
.notifications-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--r-8);
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.2s ease;
}

.notifications-btn:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}

.notifications-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--red);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn 0.3s var(--ease-out);
}

/* Hero Create Button (Floating) */
.create-hero {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: var(--s-24) var(--s-32);
}

@keyframes squish-to-pill {
  0% { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.15, 0.85); }
  75% { transform: scale(0.95, 1.02); }
  100% { transform: scale(1, 1); }
}

@keyframes squish-to-square {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1.1, 0.9); }
  50% { transform: scale(0.85, 1.15); }
  75% { transform: scale(1.02, 0.95); }
  100% { transform: scale(1, 1); }
}

.create-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-16);
  width: 160px;
  height: 160px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-24);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.create-btn:hover {
  border-color: var(--red);
  transform: scale(1.02);
}

.create-btn:hover .create-btn-icon {
  background: var(--red);
  color: var(--white);
  transform: rotate(90deg);
}

/* Scrolled state - horizontal pill shape */
.create-btn.scrolled {
  flex-direction: row;
  width: auto;
  height: auto;
  padding: var(--s-12) var(--s-24);
  gap: var(--s-12);
  border-radius: 100px;
  border-color: var(--red);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  animation: squish-to-pill 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.create-btn:not(.scrolled) {
  animation: squish-to-square 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.create-btn.scrolled .create-btn-icon {
  width: 40px;
  height: 40px;
  background: var(--red);
  color: var(--white);
}

.create-btn.scrolled .create-btn-icon svg {
  width: 20px;
  height: 20px;
}

.create-btn.scrolled .create-btn-text {
  font-size: 0.875rem;
}

.create-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--gray-100);
  border-radius: 50%;
  color: var(--gray-600);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.create-btn-icon svg {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.create-btn-text {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gray-900);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Games Section */
.games-section {
  flex: 1;
  padding: 0 var(--s-32) var(--s-64);
  margin-top: 240px;
}

/* Games Filter Bar - Nintendo × Kashiwa Sato Style */
.games-filter-bar {
  --slider-index: 0;
  position: relative;
  display: flex;
  background: var(--gray-100);
  border-radius: var(--r-16);
  padding: 4px;
  margin-bottom: var(--s-24);
  gap: 4px;
}

/* Animated Slider - Glassmorphism Water/Slime */
.filter-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px - 8px) / 3);
  background: var(--gray-100);
  border-radius: var(--r-12);
  z-index: 0;
  pointer-events: none;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-radius 0.3s ease;
  transform: translateX(calc(var(--slider-index) * (100% + 4px)));
}

/* Stretch effect when moving - more blobby */
.filter-slider.stretching {
  width: calc((100% - 8px - 8px) / 3 + 16px);
  border-radius: var(--r-16);
}

.filter-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--s-12) var(--s-8);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  background: transparent;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--r-12);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
  position: relative;
}

.filter-tab:hover {
  color: var(--gray-600);
}

.filter-tab.active {
  color: var(--gray-900);
}

.filter-count {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.filter-tab:active {
  transform: scale(0.95);
}

.filter-tab:active .filter-count {
  transform: scale(0.9);
}

/* Project Grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s-12);
}

/* Project Card - Minimal */
.project-card {
  position: relative;
  background: var(--gray-50);
  border-radius: var(--r-16);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  border: 1px solid transparent;
  overflow: hidden;
}

.project-card::before {
  content: '';
  position: absolute;
  top: var(--s-8);
  right: var(--s-8);
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s var(--ease-out);
  z-index: 2;
}

/* Project Card Thumbnail */
.project-card-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--gray-100);
  overflow: hidden;
}

.project-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Published Badge */
.project-card-badge {
  position: absolute;
  top: var(--s-8);
  left: var(--s-8);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--white);
  background: #34C759;
  border-radius: var(--r-full);
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.project-card-badge svg {
  flex-shrink: 0;
}

.project-card-thumbnail-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-16);
  box-sizing: border-box;
}

.project-card-thumbnail-placeholder .placeholder-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--white);
  text-align: center;
  line-height: 1.3;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.3);
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.project-card:hover {
  background: var(--white);
  border-color: var(--gray-200);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.project-card:hover::before {
  opacity: 1;
  transform: scale(1);
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-12);
  padding: var(--s-16) var(--s-16) 0;
}

.project-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.project-card-actions {
  display: flex;
  gap: var(--s-4);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.project-card:hover .project-card-actions {
  opacity: 1;
}

.project-card-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-8);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.project-card-actions button:hover {
  background: var(--gray-100);
}

.project-card-actions button.delete-btn:hover {
  background: var(--red-light);
  border-color: var(--red);
}

.project-card-meta {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-16) var(--s-16);
}

.project-card-date {
  font-size: 0.75rem;
  color: var(--gray-400);
  font-weight: 500;
}

/* Empty State */
.project-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-64);
  color: var(--gray-400);
}

.project-empty-icon {
  font-size: 3rem;
  margin-bottom: var(--s-16);
  opacity: 0.5;
}

.project-empty p {
  font-size: 0.875rem;
  margin-bottom: var(--s-24);
}

/* ===== Chat Panel - Main Glass Container ===== */
.chat-panel {
  width: 440px;
  min-width: 360px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--glass-white);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-right: 1px solid var(--glass-border);
  overflow: hidden;
}

.chat-header {
  flex-shrink: 0;
  padding: var(--s-16);
  display: flex;
  align-items: center;
  gap: var(--s-12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.chat-header h1 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header h1.editable {
  cursor: pointer;
  border-radius: var(--r-8);
  padding: var(--s-4) var(--s-8);
  margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-8));
  transition: background-color 0.2s ease;
}

.chat-header h1.editable:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.chat-header h1.editing {
  background-color: white;
  outline: 2px solid var(--primary);
  outline-offset: 0;
  white-space: normal;
  overflow: visible;
}

.home-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-12);
  background: transparent;
  border: none;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

#newProjectButton {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-12);
  background: var(--gray-100);
  border: none;
  border-radius: var(--r-full);
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}

#newProjectButton:hover {
  background: var(--gray-200);
  color: var(--gray-900);
  transform: scale(1.05);
}

#newProjectButton svg {
  width: 16px;
  height: 16px;
}

#playGameButton {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-12) var(--s-16);
  background: var(--red);
  border: none;
  border-radius: var(--r-full);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  box-shadow: 0 4px 12px var(--red-glow);
}

#playGameButton:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px var(--red-glow);
}

#playGameButton svg {
  width: 16px;
  height: 16px;
}

/* Publish Button - Secondary style */
#publishButton {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-12) var(--s-16);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-full);
  color: var(--gray-900);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}

#publishButton:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  transform: scale(1.05);
}

#publishButton svg {
  width: 16px;
  height: 16px;
}

.status-indicator {
  display: none;
  font-size: 0.75rem;
  font-weight: 500;
  padding: var(--s-4) var(--s-12);
  border-radius: var(--r-full);
  background: var(--gray-100);
  color: var(--gray-400);
}

.status-indicator.connected {
  background: rgba(52, 199, 89, 0.15);
  color: #34C759;
}

.status-indicator.processing {
  background: var(--red-light);
  color: var(--red);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ===== Chat Messages ===== */
.chat-messages {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-16);
  padding-bottom: var(--s-32);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  position: relative;
}

/* Extra space at bottom for scroll visibility */
.chat-messages::after {
  content: '';
  display: block;
  height: var(--s-16);
  flex-shrink: 0;
}

/* Message Bubbles */
.message {
  max-width: 85%;
  padding: var(--s-16) var(--s-24);
  border-radius: var(--r-24);
  font-size: 0.9375rem;
  line-height: 1.6;
  animation: messageIn 0.4s var(--ease-out);
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message.user {
  background: var(--red);
  color: var(--white);
  align-self: flex-end;
  border-bottom-right-radius: var(--r-8);
  box-shadow: 0 4px 16px var(--red-glow);
}

.message.assistant {
  background: var(--glass-white-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  color: var(--gray-900);
  align-self: flex-start;
  border-bottom-left-radius: var(--r-8);
  box-shadow: var(--glass-shadow);
}

/* Play Game Button in Assistant Messages */
.play-game-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  background: var(--red);
  color: var(--white);
  border: none;
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

.play-game-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 59, 48, 0.4);
}

.play-game-btn:active {
  transform: translateY(0);
}

.play-game-btn svg {
  width: 14px;
  height: 14px;
}

.message.system {
  background: var(--gray-100);
  color: var(--gray-600);
  align-self: center;
  font-size: 0.875rem;
  max-width: 100%;
  text-align: center;
}

.message.error {
  background: rgba(255, 59, 48, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 59, 48, 0.2);
}

/* Code Blocks */
.message pre {
  background: var(--gray-900);
  color: var(--gray-100);
  padding: var(--s-16);
  border-radius: var(--r-12);
  margin-top: var(--s-12);
  overflow-x: auto;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.8125rem;
}

.message code {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.875em;
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: var(--r-8);
}

.message.user code {
  background: rgba(255, 255, 255, 0.2);
}

/* Gemini Code Display */
.message.gemini-code {
  background: var(--glass-white-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  padding: 0;
  overflow: hidden;
}

.gemini-header {
  background: var(--gray-900);
  color: var(--white);
  padding: var(--s-12) var(--s-16);
  font-weight: 600;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.gemini-header::before {
  content: "✦";
  color: var(--red);
}

.gemini-code-block {
  background: var(--gray-900);
  padding: var(--s-16);
  overflow-x: auto;
  max-height: 400px;
}

.gemini-code-block pre {
  margin: 0;
  background: transparent;
  padding: 0;
}

.gemini-code-block code {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.8125rem;
  color: var(--gray-100);
  background: transparent;
  padding: 0;
  line-height: 1.7;
}

.gemini-code-block code.diff-old {
  display: block;
  background: rgba(255, 59, 48, 0.15);
  color: #FF6B6B;
  padding: var(--s-8);
  border-radius: var(--r-8);
  margin-bottom: var(--s-8);
}

.gemini-code-block code.diff-new {
  display: block;
  background: rgba(52, 199, 89, 0.15);
  color: #6EE7A8;
  padding: var(--s-8);
  border-radius: var(--r-8);
}

/* ===== Welcome Message ===== */
.welcome-message {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-24);
  overflow: hidden;
}

.welcome-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--red) 0%, #FF6B6B 100%);
  border-radius: var(--r-24);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-24);
  box-shadow: 0 8px 32px var(--red-glow);
  flex-shrink: 0;
}

.welcome-icon svg {
  width: 40px;
  height: 40px;
  color: var(--white);
}

.welcome-message h3 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-8);
  color: var(--gray-900);
}

.welcome-message p {
  color: var(--gray-600);
  margin-bottom: var(--s-24);
  max-width: 300px;
  font-size: 1rem;
  line-height: 1.6;
}

.welcome-examples {
  width: 100%;
  max-width: 340px;
  flex-shrink: 1;
  overflow: hidden;
}

.example-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  margin-bottom: var(--s-12);
}

.example-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-8);
}

.example-chip {
  padding: var(--s-12) var(--s-16);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-full);
  color: var(--gray-900);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.example-chip:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 59, 48, 0.2);
}

/* ===== Input Area ===== */
.chat-input-container {
  flex-shrink: 0;
  padding: var(--s-16);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.5);
}

/* Attached Assets (thumbnails above textarea) */
.attached-assets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
  padding: var(--s-8);
  background: var(--gray-100);
  border-radius: var(--r-12);
}

.attached-assets.hidden {
  display: none;
}

.attached-asset-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-4) var(--s-8);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-8);
}

.attached-asset-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--r-4);
}

.attached-asset-number {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--red);
}

.attached-asset-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--gray-600);
  color: var(--white);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.attached-asset-remove:hover {
  background: var(--red);
}

/* Message Attached Assets (thumbnails in sent messages) */
.message-attached-assets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
}

.message-asset-thumb {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: var(--r-8);
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

.message-asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-asset-number {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 4px;
  border-radius: var(--r-4);
}

#chatInput {
  width: 100%;
  padding: var(--s-12) var(--s-16);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-16);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  overflow: hidden;
  transition: all 0.2s ease;
}

#chatInput:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-light);
}

#chatInput.expanded {
  min-height: calc(1.5em * 2 + var(--s-12) * 2 + 4px); /* 2 lines */
}

#chatInput::placeholder {
  color: var(--gray-400);
}

.button-row {
  display: flex;
  gap: var(--s-8);
  margin-top: var(--s-12);
}

#sendButton {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-16);
  background: var(--red);
  border: none;
  border-radius: var(--r-12);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  box-shadow: 0 4px 12px var(--red-glow);
}

#sendButton:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--red-glow);
}

#sendButton:active:not(:disabled) {
  transform: translateY(0);
}

#sendButton:disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  box-shadow: none;
  cursor: not-allowed;
}

#sendButton.reconnect-mode {
  background: var(--gray-600) !important;
  color: var(--white) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
}

#sendButton.reconnect-mode:hover {
  background: var(--gray-900) !important;
}

#sendButton svg {
  width: 20px;
  height: 20px;
}

#stopButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-16) var(--s-24);
  background: var(--gray-900);
  border: none;
  border-radius: var(--r-12);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#stopButton:hover {
  background: var(--black);
}

/* Input Extras */
.input-extras {
  flex-shrink: 0;
  display: flex;
  gap: var(--s-8);
  padding: 0 var(--s-16) var(--s-12);
}

.input-extras button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-12);
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-12);
  color: var(--gray-600);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.input-extras button:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

.input-extras button svg {
  width: 16px;
  height: 16px;
}

/* ===== Mobile Plus Menu ===== */
.input-row {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  position: relative;
}

.input-row textarea {
  flex: 1;
  min-height: 40px; /* Match plus button height */
}

/* Plus button - hidden on desktop, shown on mobile */
.plus-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: none;
  background: linear-gradient(135deg, #FFB6C1 0%, #DDA0DD 100%);
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(221, 160, 221, 0.3);
}

.plus-menu-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(221, 160, 221, 0.4);
}

.plus-menu-btn:active {
  transform: scale(0.95);
}

.plus-menu-btn.active {
  transform: rotate(45deg);
  background: linear-gradient(135deg, #DDA0DD 0%, #FFB6C1 100%);
}

/* Plus menu popup */
.plus-menu-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--glass-white-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: var(--r-16);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  z-index: 100;
  min-width: 160px;
  animation: slideUp 0.2s var(--ease-out);
}

.plus-menu-popup.hidden {
  display: none;
}

.plus-menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  border: none;
  background: transparent;
  border-radius: var(--r-12);
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
  color: var(--gray-600);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  width: 100%;
}

.plus-menu-item:hover {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.2) 0%, rgba(221, 160, 221, 0.2) 100%);
  color: var(--gray-900);
}

.plus-menu-item:active {
  transform: scale(0.98);
}

.plus-menu-item svg {
  flex-shrink: 0;
  color: #DDA0DD;
}

/* Mobile styles */
@media (max-width: 768px) {
  /* Show plus button on mobile */
  .plus-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide input-extras on mobile */
  .input-extras {
    display: none;
  }
}

/* Debug Options - Hidden */
.debug-options {
  display: none;
}

/* ===== Streaming Container ===== */
.streaming-container {
  flex-shrink: 0;
  margin: var(--s-16);
  background: var(--glass-white-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-16);
  overflow: hidden;
}

.streaming-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-12) var(--s-16);
  background: var(--red-light);
  border-bottom: 1px solid var(--glass-border);
}

.streaming-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--red);
}

.streaming-file {
  font-size: 0.75rem;
  color: var(--gray-600);
  font-family: 'SF Mono', Monaco, monospace;
}

.streaming-output {
  max-height: 100px;
  overflow-y: auto;
  padding: var(--s-12);
  background: var(--gray-900);
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.75rem;
  color: var(--gray-400);
  line-height: 1.6;
}

/* ===== Preview Panel ===== */
.preview-panel {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
  min-width: 0;
  overflow: hidden;
}

.preview-header {
  flex-shrink: 0;
  padding: var(--s-16) var(--s-24);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#previewTitle {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
}

.preview-actions {
  display: flex;
  gap: var(--s-8);
}

.preview-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-12);
  background: var(--gray-100);
  border: none;
  border-radius: var(--r-8);
  color: var(--gray-600);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preview-actions button:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.preview-actions button svg {
  width: 16px;
  height: 16px;
}

.preview-actions .icon-only-btn {
  padding: var(--s-8);
  width: 36px;
  height: 36px;
}

.preview-actions .icon-only-btn svg {
  width: 18px;
  height: 18px;
}

/* ===== Version Panel ===== */
.version-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  background: var(--glass-white-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-left: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  z-index: 20;
  transform: translateX(0);
  transition: transform var(--duration) var(--ease-out);
}

.version-panel.hidden {
  transform: translateX(100%);
  pointer-events: none;
}

.version-header {
  padding: var(--s-24);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.version-header h3 {
  font-size: 1rem;
  font-weight: 700;
}

.version-header button {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--gray-400);
  padding: var(--s-8);
  border-radius: var(--r-8);
  transition: all 0.2s ease;
}

.version-header button:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.version-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-16);
}

.version-item {
  padding: var(--s-16);
  border-radius: var(--r-12);
  transition: all 0.2s ease;
  margin-bottom: var(--s-8);
  background: var(--white);
  border: 1px solid var(--gray-200);
  position: relative;
}

.version-item:hover {
  border-color: var(--gray-300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.version-item.current {
  border-color: var(--red);
  background: var(--red-light);
}

.version-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-8);
}

.version-id {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: var(--r-8);
}

.version-item.current .version-id {
  background: rgba(255, 59, 48, 0.15);
  color: var(--red);
}

.version-time {
  font-size: 0.75rem;
  color: var(--gray-400);
}

.version-message {
  font-size: 0.875rem;
  color: var(--gray-900);
  line-height: 1.5;
  margin-bottom: var(--s-12);
}

.version-current-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red);
}

.version-restore {
  padding: var(--s-8) var(--s-16);
  background: var(--gray-100);
  border: none;
  border-radius: var(--r-8);
  color: var(--gray-600);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.version-restore:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--red-glow);
}

/* ===== Modals ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--white);
  border-radius: var(--r-24);
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
  transform: scale(0.95) translateY(20px);
  transition: transform var(--duration) var(--ease-out);
}

.modal-overlay.visible .modal-content {
  transform: scale(1) translateY(0);
}

.modal-header {
  padding: var(--s-24);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
}

.modal-close {
  width: 36px;
  height: 36px;
  border-radius: var(--r-8);
  background: var(--gray-100);
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--gray-600);
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.modal-body {
  padding: var(--s-24);
  overflow-y: auto;
  max-height: 60vh;
}

.modal-footer {
  padding: var(--s-24);
  border-top: 1px solid var(--gray-200);
  display: flex;
  gap: var(--s-12);
  justify-content: flex-end;
}

/* ===== Image Generation Modal ===== */
.image-gen-modal .modal-content {
  max-width: 600px;
}

.image-gen-preview {
  aspect-ratio: 1;
  background: var(--gray-100);
  border-radius: var(--r-16);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--s-16);
}

.image-gen-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-gen-placeholder {
  color: var(--gray-400);
  font-size: 0.875rem;
}

.image-gen-prompt {
  width: 100%;
  padding: var(--s-16);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-12);
  font-family: inherit;
  font-size: 0.9375rem;
  resize: vertical;
  min-height: 100px;
  outline: none;
  transition: border-color 0.2s ease;
}

.image-gen-prompt:focus {
  border-color: var(--red);
}

.image-gen-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-12);
  margin-top: var(--s-16);
}

.image-gen-footer button {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-12) var(--s-24);
  border: none;
  border-radius: var(--r-12);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.image-gen-footer button svg {
  width: 16px;
  height: 16px;
}

#generateImageButton {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 4px 12px var(--red-glow);
}

#generateImageButton:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--red-glow);
}

#generateImageButton:disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  box-shadow: none;
}

#downloadImageButton {
  background: var(--gray-100);
  color: var(--gray-900);
}

#downloadImageButton:hover:not(:disabled) {
  background: var(--gray-200);
}

/* ===== Back to Chat Button (Mobile only) ===== */
.back-to-chat-btn {
  display: none;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-16);
  background: var(--gray-100);
  border: none;
  border-radius: var(--r-12);
  color: var(--gray-600);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-to-chat-btn:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.back-to-chat-btn svg {
  width: 20px;
  height: 20px;
}

/* ===== Style Selection ===== */
.message.style-selection-message {
  max-width: 100% !important;
  width: 100%;
}

.style-scroll-container {
  width: 100%;
  margin-top: var(--s-12);
}

.style-scroll-track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-12);
  overflow-x: auto;
  padding: var(--s-8) 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.style-scroll-track::-webkit-scrollbar {
  display: none;
}

.style-card-chat {
  flex: 0 0 auto;
  width: 140px;
  background: var(--white);
  border-radius: var(--r-16);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s var(--ease-out);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.style-card-chat:hover {
  border-color: var(--red);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.style-card-chat.selected {
  border-color: var(--red);
  background: var(--red-light);
}

.style-card-chat.style-card-hidden {
  display: none;
}

.style-card-image-chat {
  width: 100%;
  height: 100px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.style-card-image-chat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.style-card-info-chat {
  padding: var(--s-12);
  text-align: center;
}

.style-card-name-chat {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-900);
}

.style-card-more {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.style-more-btn {
  padding: var(--s-16);
  background: transparent;
  border: 2px dashed var(--gray-300);
  border-radius: var(--r-16);
  color: var(--gray-400);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.style-more-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  body {
    height: 100vh;
    height: 100dvh;
  }

  .container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    flex-direction: column;
  }

  .chat-panel {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-right: none;
  }

  .chat-panel.mobile-hidden {
    display: none;
  }

  .preview-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: none;
  }

  .preview-panel.mobile-active {
    display: flex;
  }

  .back-to-chat-btn {
    display: flex;
  }

  .chat-header h1 {
    font-size: 1.125rem;
  }

  #newProjectButton {
    padding: var(--s-8) var(--s-12);
    font-size: 0.8125rem;
  }

  .message {
    max-width: 90%;
  }

  /* Project List View - Mobile */
  .list-header {
    padding: var(--s-12) var(--s-16);
  }

  .brand-text {
    font-size: 0.6875rem;
  }

  .create-hero {
    top: 64px;
    padding: var(--s-16) var(--s-16);
  }

  .create-btn {
    width: 130px;
    height: 130px;
    gap: var(--s-12);
    border-radius: var(--r-16);
    border-color: var(--red);
  }

  .create-btn-icon {
    width: 48px;
    height: 48px;
    background: var(--red);
    color: var(--white);
  }

  .create-btn-icon svg {
    width: 22px;
    height: 22px;
  }

  .create-btn-text {
    font-size: 0.8125rem;
  }

  .create-btn:active {
    transform: scale(0.95);
  }

  .create-btn:active .create-btn-icon {
    transform: rotate(90deg);
  }

  .games-section {
    padding: 0 var(--s-16) var(--s-32);
    margin-top: 180px;
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-8);
  }

  .project-card {
    background: var(--white);
    border-color: var(--gray-200);
  }

  .project-card-thumbnail {
    aspect-ratio: 1 / 1;
  }

  .project-card-header {
    padding: var(--s-8) var(--s-8) 0;
  }

  .project-card-meta {
    padding: var(--s-4) var(--s-8) var(--s-8);
  }

  .project-card-title {
    font-size: 0.875rem;
  }

  .project-card-date {
    font-size: 0.6875rem;
  }

  .project-card-thumbnail-placeholder {
    padding: var(--s-8);
  }

  .project-card-thumbnail-placeholder .placeholder-title {
    font-size: 0.875rem;
    -webkit-line-clamp: 3;
  }

  .project-card-badge {
    padding: 3px 6px;
    font-size: 0.5625rem;
  }

  .project-card-badge svg {
    width: 8px;
    height: 8px;
  }

  .games-filter-bar {
    margin-bottom: var(--s-16);
  }

  .filter-tab {
    padding: var(--s-8) var(--s-4);
  }

  .filter-count {
    font-size: 1.25rem;
  }

  /* Show red dot by default on mobile */
  .project-card::before {
    opacity: 1;
    transform: scale(1);
  }

  .project-card-actions {
    opacity: 1;
  }

  .project-card:active {
    transform: scale(0.98);
    background: var(--gray-50);
  }
}

@media (max-width: 480px) {
  .chat-header h1 {
    font-size: 1rem;
  }

  #chatInput {
    font-size: 16px;
  }

  .welcome-message {
    padding: var(--s-16);
  }

  .welcome-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--s-16);
  }

  .welcome-icon svg {
    width: 32px;
    height: 32px;
  }

  .welcome-message h3 {
    font-size: 1.5rem;
  }

  .welcome-message p {
    font-size: 0.9375rem;
    margin-bottom: var(--s-16);
  }

  .example-chip {
    padding: var(--s-8) var(--s-12);
    font-size: 0.875rem;
  }
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
  :root {
    --glass-white: rgba(255, 255, 255, 0.95);
    --glass-border: var(--gray-400);
  }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Login View ===== */
.login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-24);
}

.login-container {
  width: 100%;
  max-width: 400px;
  background: var(--glass-white-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-24);
  padding: var(--s-48);
  box-shadow: var(--glass-shadow);
}

.login-header {
  text-align: center;
  margin-bottom: var(--s-32);
}

.login-header h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gray-900);
  margin-bottom: var(--s-8);
}

.login-subtitle {
  font-size: 0.875rem;
  color: var(--gray-400);
  font-weight: 500;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-600);
}

.form-group input {
  padding: var(--s-16);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-12);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: all 0.2s ease;
}

.form-group input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-light);
}

.form-group input::placeholder {
  color: var(--gray-400);
}

.login-error {
  padding: var(--s-12) var(--s-16);
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.2);
  border-radius: var(--r-12);
  color: var(--red);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}

.login-button {
  padding: var(--s-16) var(--s-24);
  background: var(--red);
  border: none;
  border-radius: var(--r-12);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  box-shadow: 0 4px 12px var(--red-glow);
}

.login-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--red-glow);
}

.login-button:active:not(:disabled) {
  transform: translateY(0);
}

.login-button:disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  box-shadow: none;
  cursor: not-allowed;
}

/* User Info in Header */
.user-info {
  display: flex;
  align-items: center;
  gap: var(--s-12);
}

.user-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-600);
}

.logout-btn {
  padding: var(--s-8) var(--s-12);
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-8);
  color: var(--gray-600);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.logout-btn:hover {
  border-color: var(--gray-400);
  color: var(--gray-900);
  background: var(--gray-50);
}

@media (max-width: 480px) {
  .login-container {
    padding: var(--s-32);
  }

  .login-header h1 {
    font-size: 1.5rem;
  }
}

/* ===== Input Buttons ===== */
.input-buttons {
  display: flex;
  gap: var(--s-8);
  margin-top: var(--s-12);
}

/* ===== Modal Base ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal .modal-content {
  background: var(--white);
  border-radius: var(--r-24);
  width: 90%;
  max-width: 640px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

.modal .modal-header {
  padding: var(--s-24);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal .modal-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.modal .modal-close {
  width: 36px;
  height: 36px;
  border-radius: var(--r-8);
  background: var(--gray-100);
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal .modal-close:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

/* ===== New Game Modal - Nintendo × Kashiwa Sato ===== */
.new-game-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: modalFadeIn 0.3s var(--ease-out);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.new-game-modal.hidden {
  display: none;
}

.new-game-content {
  background: var(--white);
  border-radius: var(--r-24);
  width: 90%;
  max-width: 400px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
  animation: modalSlideUp 0.4s var(--ease-out);
  overflow: hidden;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.new-game-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-32) var(--s-32) var(--s-24);
}

.new-game-icon {
  width: 56px;
  height: 56px;
  background: var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.new-game-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

.new-game-body {
  padding: 0 var(--s-32) var(--s-24);
}

.new-game-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--s-8);
}

.new-game-input {
  width: 100%;
  padding: var(--s-16);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-12);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-900);
  background: var(--gray-50);
  transition: all 0.2s ease;
  outline: none;
}

.new-game-input:focus {
  border-color: var(--red);
  background: var(--white);
  box-shadow: 0 0 0 4px var(--red-light);
}

.new-game-input::placeholder {
  color: var(--gray-400);
  font-weight: 400;
}

.new-game-hint {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: var(--s-8);
  text-align: center;
}

.new-game-actions {
  display: flex;
  gap: var(--s-12);
  padding: var(--s-24) var(--s-32) var(--s-32);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
}

.new-game-cancel,
.new-game-confirm {
  flex: 1;
  padding: var(--s-16);
  border-radius: var(--r-12);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.new-game-cancel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
}

.new-game-cancel:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.new-game-confirm {
  background: var(--red);
  border: none;
  color: var(--white);
}

.new-game-confirm:hover {
  background: #E5352B;
  transform: scale(1.02);
}

.new-game-confirm:active {
  transform: scale(0.98);
}

/* Delete Modal Specific */
.new-game-icon.delete-icon {
  background: var(--red-light);
  color: var(--red);
}

.delete-message {
  font-size: 1rem;
  color: var(--gray-900);
  margin: 0;
  text-align: center;
}

.delete-warning {
  font-size: 0.8125rem;
  color: var(--gray-400);
  margin: var(--s-8) 0 0;
  text-align: center;
}

.delete-confirm {
  background: var(--red);
}

.delete-confirm:hover {
  background: #E5352B;
}

/* ===== Asset Modal ===== */
.asset-modal {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  height: 85vh;
  max-height: 85vh;
}

.asset-tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200);
  padding: 0 var(--s-24);
  flex-shrink: 0;
}

.asset-tab {
  padding: var(--s-16) var(--s-12);
  background: transparent;
  border: none;
  white-space: nowrap;
  color: var(--gray-400);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.asset-tab:hover {
  color: var(--gray-600);
}

.asset-tab.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.asset-content {
  padding: var(--s-24);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.asset-tab-content {
  display: none;
}

.asset-tab-content.active {
  display: block;
}

.asset-search {
  margin-bottom: var(--s-16);
}

.asset-search input {
  width: 100%;
  padding: var(--s-12) var(--s-16);
  background: var(--gray-100);
  border: 2px solid transparent;
  border-radius: var(--r-12);
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
  transition: all 0.2s ease;
}

.asset-search input:focus {
  background: var(--white);
  border-color: var(--red);
}

.asset-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

/* Asset Group (Project-based grouping) */
.asset-group {
  background: var(--gray-50);
  border-radius: var(--r-12);
  overflow: hidden;
}

.asset-group.current-project {
  background: var(--red-light);
  border: 2px solid var(--red);
}

.asset-group-header {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-12) var(--s-16);
  background: var(--gray-100);
  font-weight: 600;
  font-size: 0.875rem;
}

.asset-group.current-project .asset-group-header {
  background: var(--red);
  color: var(--white);
}

.asset-group-icon {
  font-size: 1rem;
}

.asset-group-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-group-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: var(--s-4) var(--s-12);
  border-radius: var(--r-8);
  background: var(--gray-200);
  color: var(--gray-600);
  letter-spacing: 0.02em;
}

.asset-group-badge.current {
  background: var(--white);
  color: var(--red);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.asset-group-count {
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--s-8);
  border-radius: var(--r-8);
  background: var(--gray-200);
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.asset-group.current-project .asset-group-count {
  background: rgba(255, 255, 255, 0.25);
  color: var(--white);
}

.asset-group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-12);
  padding: var(--s-12);
}

.asset-group.unassigned {
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
}

.asset-group.unassigned .asset-group-header {
  background: var(--gray-50);
  color: var(--gray-500);
}

.asset-item {
  position: relative;
  aspect-ratio: 1;
  background: var(--gray-100);
  border-radius: var(--r-12);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.asset-item:hover {
  border-color: var(--gray-300);
}

.asset-item.selected {
  border: 3px solid var(--red);
  box-shadow: 0 0 0 4px var(--red-light), 0 4px 12px rgba(255, 75, 75, 0.3);
  transform: scale(1.02);
  z-index: 1;
}

.asset-item.selected::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: var(--red);
  border-radius: 50%;
  color: white;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.asset-thumb {
  position: absolute;
  inset: 0;
}

.asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-name {
  display: none;
}

/* Upload Tab */
.upload-area {
  border: 2px dashed var(--gray-300);
  border-radius: var(--r-16);
  padding: var(--s-48);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-area:hover {
  border-color: var(--red);
  background: var(--red-light);
}

.upload-area.dragging {
  border-color: var(--red);
  background: var(--red-light);
}

.upload-prompt {
  color: var(--gray-600);
}

.upload-icon {
  margin-bottom: var(--s-16);
  color: var(--gray-400);
}

.upload-prompt p {
  margin-bottom: var(--s-4);
}

.upload-hint {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: var(--s-8);
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  margin-top: var(--s-16);
}

.upload-form input {
  padding: var(--s-12) var(--s-16);
  background: var(--gray-100);
  border: 2px solid transparent;
  border-radius: var(--r-12);
  font-family: inherit;
  font-size: 0.9375rem;
  outline: none;
}

.upload-form input:focus {
  background: var(--white);
  border-color: var(--red);
}

.upload-form button {
  padding: var(--s-12) var(--s-24);
  background: var(--red);
  border: none;
  border-radius: var(--r-12);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--red-glow);
}

.upload-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--s-8);
  margin-top: var(--s-16);
}

/* ===== Asset Footer - Nintendo + Sato Kashiwa Style ===== */
.asset-footer {
  padding: var(--s-16) var(--s-24);
  border-top: 1px solid var(--gray-200);
  background: var(--white);
  display: flex;
  align-items: center;
  gap: var(--s-16);
  flex-shrink: 0;
}

.asset-selected-name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* All buttons grouped together */
.asset-footer-buttons {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  flex-shrink: 0;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.icon-btn:hover {
  border-color: var(--gray-400);
  background: var(--gray-100);
  color: var(--gray-800);
}

.icon-btn:active {
  transform: scale(0.95);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

/* Danger icon button (delete) */
.icon-btn-danger:hover {
  border-color: #f8d7da;
  background: #fff5f5;
  color: #dc3545;
}

/* Primary action - Large pill button */
.primary-action-btn {
  min-width: 130px;
  height: 44px;
  padding: 0 var(--s-20);
  background: var(--red);
  border: none;
  border-radius: 22px;
  color: var(--white);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 14px var(--red-glow);
}

.primary-action-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px var(--red-glow);
}

.primary-action-btn:active {
  transform: translateY(0) scale(0.98);
}

.primary-action-btn svg {
  transition: transform 0.2s ease;
}

.primary-action-btn:hover svg {
  transform: translateX(3px);
}

/* Secondary action - Edit button (same size as primary, blue color) */
.secondary-action-btn {
  min-width: 100px;
  height: 44px;
  padding: 0 var(--s-16);
  background: var(--white);
  border: 2px solid #3b82f6;
  border-radius: 22px;
  color: #3b82f6;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.secondary-action-btn:hover {
  background: #3b82f6;
  color: var(--white);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

.secondary-action-btn:active {
  transform: translateY(0) scale(0.98);
}

.secondary-action-btn svg {
  transition: transform 0.2s ease;
}

/* Ghost button (edit) - Secondary text action */
.ghost-btn {
  height: 44px;
  padding: 0 var(--s-16) 0 0;
  background: transparent;
  border: 1.5px solid var(--gray-300);
  border-radius: 22px;
  color: var(--gray-600);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  transition: all 0.2s ease;
  flex-shrink: 0;
}


.ghost-btn:hover {
  border-color: var(--gray-500);
  background: var(--gray-100);
  color: var(--gray-900);
}

.ghost-btn:active {
  transform: scale(0.97);
}

.ghost-btn svg {
  width: 18px;
  height: 18px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .asset-footer {
    flex-wrap: wrap;
    padding: var(--s-12) var(--s-16);
    gap: var(--s-8);
  }

  .asset-footer > .icon-btn-danger {
    order: 1;
  }

  .asset-selected-name {
    order: 0;
    flex-basis: 100%;
    font-size: 0.8125rem;
    text-align: center;
  }

  .asset-footer-buttons {
    order: 2;
    flex: 1;
    justify-content: flex-end;
    gap: var(--s-8);
  }

  .icon-btn {
    width: 38px;
    height: 38px;
  }

  .icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .secondary-action-btn {
    height: 40px;
    min-width: 80px;
    padding: 0 var(--s-12);
    font-size: 0.8125rem;
  }

  .ghost-btn {
    height: 40px;
    padding: 0 var(--s-12) 0 0;
    font-size: 0.8125rem;
  }

  .primary-action-btn {
    height: 40px;
    padding: 0 var(--s-16);
    font-size: 0.8125rem;
    min-width: 100px;
  }
}

/* ===== Image Editor Modal ===== */
.image-editor-modal {
  max-width: 900px;
  width: 95vw;
}

.image-editor-body {
  padding: var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

.editor-canvas-area {
  position: relative;
  background: var(--gray-100);
  border-radius: var(--r-12);
  min-height: 300px;
  max-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.canvas-wrapper {
  position: relative;
  display: inline-block;
}

#editorCanvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Cropper.js container */
.cropper-container-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cropper-container-wrapper img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Circle crop mode indicator */
.cropper-container-wrapper.circle-mode .cropper-view-box,
.cropper-container-wrapper.circle-mode .cropper-face {
  border-radius: 50%;
}

/* Cropper.js overrides - Product style (red accent, clean) */
.cropper-view-box {
  outline: 2px solid #e53935;
  outline-offset: -2px;
}

.cropper-line {
  background-color: #e53935;
  opacity: 0.6;
}

/* All handles - red */
.cropper-point {
  background-color: #e53935 !important;
  opacity: 1 !important;
  border-radius: 0 !important;
}

/* Corner handles - L-shaped thick lines */
.cropper-point.point-nw {
  width: 20px !important;
  height: 4px !important;
  border-left: 4px solid #e53935 !important;
  border-top: 4px solid #e53935 !important;
  background: transparent !important;
  box-sizing: border-box;
}
.cropper-point.point-nw::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 20px;
  background: #e53935;
}

.cropper-point.point-ne {
  width: 20px !important;
  height: 4px !important;
  border-right: 4px solid #e53935 !important;
  border-top: 4px solid #e53935 !important;
  background: transparent !important;
  box-sizing: border-box;
}
.cropper-point.point-ne::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 20px;
  background: #e53935;
}

.cropper-point.point-sw {
  width: 20px !important;
  height: 4px !important;
  border-left: 4px solid #e53935 !important;
  border-bottom: 4px solid #e53935 !important;
  background: transparent !important;
  box-sizing: border-box;
}
.cropper-point.point-sw::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 20px;
  background: #e53935;
}

.cropper-point.point-se {
  width: 20px !important;
  height: 4px !important;
  border-right: 4px solid #e53935 !important;
  border-bottom: 4px solid #e53935 !important;
  background: transparent !important;
  box-sizing: border-box;
}
.cropper-point.point-se::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 4px;
  height: 20px;
  background: #e53935;
}

/* Edge handles - bars */
.cropper-point.point-n,
.cropper-point.point-s {
  width: 40px !important;
  height: 4px !important;
  margin-left: -20px !important;
}

.cropper-point.point-e,
.cropper-point.point-w {
  width: 4px !important;
  height: 40px !important;
  margin-top: -20px !important;
}

.crop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
}

.crop-overlay.active {
  pointer-events: auto;
  z-index: 50;
}

/* Dark overlay outside selection */
.crop-dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.crop-dark {
  background: rgba(0, 0, 0, 0.6);
}

.crop-dark-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.crop-dark-middle {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
}

.crop-dark-left {
  height: 100%;
}

.crop-dark-right {
  height: 100%;
  margin-left: auto;
}

.crop-dark-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Selection box */
.crop-selection-box {
  position: absolute;
  border: 2px solid var(--white);
  box-sizing: border-box;
}

/* Grid lines (rule of thirds) */
.crop-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.crop-grid-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
}

.crop-grid-v1 { left: 33.33%; top: 0; bottom: 0; width: 1px; }
.crop-grid-v2 { left: 66.66%; top: 0; bottom: 0; width: 1px; }
.crop-grid-h1 { top: 33.33%; left: 0; right: 0; height: 1px; }
.crop-grid-h2 { top: 66.66%; left: 0; right: 0; height: 1px; }

/* Corner handles - Instagram/X style L-shaped */
.crop-handle {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: auto;
}

.crop-handle::before,
.crop-handle::after {
  content: '';
  position: absolute;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.crop-handle-nw { top: -3px; left: -3px; cursor: nw-resize; }
.crop-handle-nw::before { top: 0; left: 0; width: 24px; height: 4px; }
.crop-handle-nw::after { top: 0; left: 0; width: 4px; height: 24px; }

.crop-handle-ne { top: -3px; right: -3px; cursor: ne-resize; }
.crop-handle-ne::before { top: 0; right: 0; width: 24px; height: 4px; }
.crop-handle-ne::after { top: 0; right: 0; width: 4px; height: 24px; }

.crop-handle-sw { bottom: -3px; left: -3px; cursor: sw-resize; }
.crop-handle-sw::before { bottom: 0; left: 0; width: 24px; height: 4px; }
.crop-handle-sw::after { bottom: 0; left: 0; width: 4px; height: 24px; }

.crop-handle-se { bottom: -3px; right: -3px; cursor: se-resize; }
.crop-handle-se::before { bottom: 0; right: 0; width: 24px; height: 4px; }
.crop-handle-se::after { bottom: 0; right: 0; width: 4px; height: 24px; }

.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
}

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--s-8) var(--s-12);
  background: var(--gray-100);
  border: 2px solid transparent;
  border-radius: var(--r-8);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 64px;
  flex-shrink: 0;
}

.tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tool-btn:disabled:hover {
  background: var(--gray-100);
}

.tool-btn:hover {
  background: var(--gray-200);
}

.tool-btn[data-tool].active {
  background: var(--red-light);
  border-color: var(--red);
  color: var(--red);
}

.tool-btn svg {
  width: 24px;
  height: 24px;
}

.tool-btn span {
  font-size: 0.75rem;
  font-weight: 600;
}

.tool-panels {
  min-height: 100px;
}

.tool-panel {
  background: var(--gray-50);
  border-radius: var(--r-12);
  padding: var(--s-16);
}

.panel-title {
  font-weight: 600;
  margin-bottom: var(--s-12);
  color: var(--gray-700);
}

.panel-desc {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: var(--s-12);
}

.preset-ratios {
  display: flex;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
  flex-wrap: wrap;
}

.ratio-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--s-8);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-8);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 52px;
}

.ratio-btn:hover {
  border-color: var(--gray-400);
}

.ratio-btn.active {
  background: var(--red-light);
  border-color: var(--red);
}

.ratio-btn.active .ratio-shape {
  border-color: var(--red);
}

.ratio-btn.active .ratio-label {
  color: var(--red);
}

.ratio-shape {
  border: 2px solid var(--gray-400);
  background: transparent;
}

.ratio-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-600);
}

/* Ratio shape variants */
.ratio-free {
  width: 24px;
  height: 18px;
  border-style: dashed;
  border-radius: 2px;
}

.ratio-1-1 {
  width: 20px;
  height: 20px;
  border-radius: 2px;
}

.ratio-4-3 {
  width: 24px;
  height: 18px;
  border-radius: 2px;
}

.ratio-16-9 {
  width: 28px;
  height: 16px;
  border-radius: 2px;
}

.ratio-9-16 {
  width: 14px;
  height: 24px;
  border-radius: 2px;
}

.ratio-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.crop-info {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: var(--s-12);
}

.resize-inputs {
  display: flex;
  gap: var(--s-16);
  margin-bottom: var(--s-12);
}

.input-group {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.input-group label {
  font-size: 0.875rem;
  color: var(--gray-600);
  min-width: 30px;
}

.input-group input {
  width: 80px;
  padding: var(--s-8);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-8);
  font-size: 0.875rem;
  text-align: center;
}

.input-group input:focus {
  outline: none;
  border-color: var(--red);
}

.input-group span {
  font-size: 0.75rem;
  color: var(--gray-400);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: var(--s-12);
  cursor: pointer;
}

.checkbox-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}

.rotate-buttons {
  display: flex;
  gap: var(--s-8);
}

.rotate-btn {
  flex: 1;
  padding: var(--s-12);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-8);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rotate-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

.rotate-btn:active {
  transform: scale(0.98);
}

.panel-actions {
  display: flex;
  gap: var(--s-12);
  margin-top: var(--s-16);
}

.panel-cancel-btn {
  flex: 1;
  padding: var(--s-12);
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--r-8);
  color: var(--gray-600);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.panel-cancel-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

.apply-btn {
  flex: 2;
  padding: var(--s-12);
  background: var(--red);
  border: none;
  border-radius: var(--r-8);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.apply-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--red-glow);
}

.processing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-16);
  color: var(--gray-600);
}

.processing-indicator .spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-200);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Background removal method selector */
.bg-method-selector {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin-bottom: var(--s-16);
}

.bg-method-option {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  padding: var(--s-12);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.bg-method-option:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.bg-method-option:has(input:checked) {
  border-color: var(--red);
  background: rgba(255, 107, 107, 0.05);
}

.bg-method-option input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--red);
}

.bg-method-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bg-method-name {
  font-weight: 500;
  color: var(--gray-700);
  font-size: 0.875rem;
}

.bg-method-desc {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.bg-error-message {
  margin-top: var(--s-12);
  padding: var(--s-12);
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.2);
  border-radius: var(--radius-md);
  color: #dc3545;
  font-size: 0.8125rem;
  text-align: center;
}

/* Background removal threshold control */
.bg-threshold-control {
  margin-bottom: var(--s-16);
}

.threshold-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-8);
  font-size: 0.875rem;
  color: var(--gray-700);
}

.threshold-value {
  font-weight: 500;
  color: var(--red);
}

.threshold-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--gray-200);
  border-radius: 3px;
  outline: none;
}

.threshold-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--red);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}

.threshold-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.threshold-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--red);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.threshold-hints {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-4);
  font-size: 0.75rem;
  color: var(--gray-400);
}

.image-editor-footer {
  padding: var(--s-16) var(--s-24);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-12);
}

.secondary-btn {
  padding: var(--s-12) var(--s-20);
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--r-8);
  color: var(--gray-700);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.secondary-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

.secondary-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.primary-btn {
  padding: var(--s-12) var(--s-24);
  background: var(--red);
  border: none;
  border-radius: var(--r-8);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--red-glow);
}

/* ===== Mobile Image Editor - Instagram/X Style (Light) ===== */
@media (max-width: 768px) {
  /* Full-screen modal */
  .image-editor-modal {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background: var(--white);
    overflow: hidden;
  }

  /* Minimal header */
  .image-editor-modal .modal-header {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    padding: var(--s-12) var(--s-16);
    flex-shrink: 0;
  }

  .image-editor-modal .modal-header h3 {
    font-size: 1rem;
    font-weight: 600;
  }

  /* Main body - flex layout */
  .image-editor-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--gray-50);
  }

  /* Canvas area takes most of the screen */
  .editor-canvas-area {
    flex: 1;
    min-height: 0;
    max-height: none;
    background: var(--gray-100);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    touch-action: none;
  }

  .canvas-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
  }

  /* Ensure crop overlay covers canvas properly on mobile */
  .crop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
  }

  #editorCanvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Bottom toolbar */
  .editor-toolbar {
    flex-shrink: 0;
    display: flex;
    gap: 0;
    justify-content: flex-start;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: var(--s-8) var(--s-12);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .editor-toolbar::-webkit-scrollbar {
    display: none;
  }

  /* Tool buttons */
  .tool-btn {
    flex: 0 0 auto;
    min-width: 56px;
    padding: var(--s-8) var(--s-8);
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--gray-500);
    transition: all 0.15s ease;
    position: relative;
  }

  .tool-btn:disabled {
    opacity: 0.35;
  }

  .tool-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--red);
    transition: width 0.2s ease;
  }

  .tool-btn:hover,
  .tool-btn:active {
    background: var(--gray-50);
    color: var(--gray-700);
  }

  .tool-btn[data-tool].active {
    color: var(--red);
    background: transparent;
  }

  .tool-btn[data-tool].active::after {
    width: 24px;
  }

  .tool-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
  }

  .tool-btn span {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-top: var(--s-4);
  }

  /* Tool panels - slide up from bottom */
  .tool-panels {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    min-height: 0;
    pointer-events: none;
  }

  .tool-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: 16px 16px 0 0;
    padding: var(--s-16);
    padding-bottom: calc(var(--s-16) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: auto;
    max-height: 40vh;
    overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  }

  .tool-panel:not(.hidden) {
    transform: translateY(0);
  }

  /* Panel drag indicator */
  .tool-panel::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--gray-300);
    border-radius: 2px;
  }

  .panel-title {
    color: var(--gray-800);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--s-12);
    text-align: center;
    padding-top: var(--s-4);
  }

  .panel-desc {
    color: var(--gray-500);
    text-align: center;
    font-size: 0.8125rem;
    margin-bottom: var(--s-12);
  }

  /* Ratio buttons - 6 columns grid */
  .preset-ratios {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--s-6);
    margin-bottom: var(--s-12);
  }

  .ratio-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: var(--s-8) var(--s-4);
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--r-8);
    min-width: 0;
    min-height: 52px;
  }

  .ratio-btn:hover {
    background: var(--gray-100);
  }

  .ratio-btn.active {
    background: var(--red-light);
    border-color: var(--red);
  }

  .ratio-shape {
    border-width: 1.5px;
    transform: scale(0.85);
  }

  .ratio-label {
    font-size: 0.5625rem;
  }

  .ratio-label {
    font-size: 0.625rem;
  }

  .crop-info {
    color: var(--gray-500);
    text-align: center;
    font-size: 0.8125rem;
  }

  /* Resize inputs */
  .resize-inputs {
    display: flex;
    gap: var(--s-10);
    justify-content: center;
    margin-bottom: var(--s-12);
  }

  .input-group {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    background: var(--gray-100);
    border-radius: 10px;
    padding: var(--s-6) var(--s-10);
  }

  .input-group label {
    color: var(--gray-500);
    font-size: 0.6875rem;
    min-width: auto;
  }

  .input-group input {
    width: 50px;
    padding: var(--s-4);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--gray-300);
    color: var(--gray-800);
    font-size: 0.875rem;
    text-align: center;
  }

  .input-group input:focus {
    border-bottom-color: var(--red);
    outline: none;
  }

  .input-group span {
    color: var(--gray-400);
    font-size: 0.6875rem;
  }

  .checkbox-label {
    color: var(--gray-600);
    justify-content: center;
    margin-bottom: var(--s-8);
    font-size: 0.8125rem;
  }

  .checkbox-label input {
    accent-color: var(--red);
    width: 16px;
    height: 16px;
  }

  /* Rotate buttons */
  .rotate-buttons {
    display: flex;
    gap: var(--s-8);
    justify-content: center;
  }

  .rotate-btn {
    flex: none;
    width: 80px;
    padding: var(--s-12);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    color: var(--gray-700);
    font-size: 0.8125rem;
    transition: all 0.2s ease;
  }

  .rotate-btn:hover,
  .rotate-btn:active {
    background: var(--gray-200);
    transform: scale(0.98);
  }

  /* Panel actions - compact */
  .panel-actions {
    display: flex;
    gap: var(--s-10);
    margin-top: var(--s-12);
  }

  .panel-cancel-btn {
    flex: 1;
    padding: var(--s-12);
    background: var(--gray-100);
    border: none;
    border-radius: 10px;
    color: var(--gray-700);
    font-size: 0.9375rem;
    font-weight: 600;
    min-height: 46px;
    transition: background 0.15s ease;
  }

  .panel-cancel-btn:active {
    background: var(--gray-200);
  }

  .apply-btn {
    flex: 1.5;
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: 10px;
    padding: var(--s-12);
    font-size: 0.9375rem;
    font-weight: 600;
    margin-top: 0;
    min-height: 46px;
    transition: opacity 0.15s ease;
  }

  .apply-btn:active {
    opacity: 0.85;
    transform: none;
    box-shadow: none;
  }

  .crop-info {
    font-size: 0.75rem;
    text-align: center;
    color: var(--gray-500);
    margin-bottom: 0;
  }

  /* Processing indicator */
  .processing-indicator {
    color: var(--gray-600);
  }

  .processing-indicator .spinner {
    border-color: var(--gray-200);
    border-top-color: var(--red);
  }

  /* Footer */
  .image-editor-footer {
    flex-shrink: 0;
    padding: var(--s-16);
    padding-bottom: calc(var(--s-16) + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: var(--s-12);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* Hide footer and toolbar when tool panel is open */
  .image-editor-modal.tool-active .image-editor-footer,
  .image-editor-modal.tool-active .editor-toolbar {
    display: none;
  }

  /* Tool panel becomes part of normal flow when active */
  .image-editor-modal.tool-active .tool-panels {
    position: relative;
    z-index: auto;
  }

  .image-editor-modal.tool-active .tool-panel:not(.hidden) {
    position: relative;
    transform: none;
    border-radius: 0;
    max-height: none;
  }

  /* Canvas area takes remaining space */
  .image-editor-modal.tool-active .editor-canvas-area {
    flex: 1;
    min-height: 200px;
  }

  /* Footer buttons - outline style to differentiate from tool panel */
  .image-editor-footer .secondary-btn {
    flex: 1;
    padding: var(--s-14);
    background: transparent;
    border: 1.5px solid var(--gray-300);
    border-radius: 12px;
    color: var(--gray-600);
    font-size: 0.9375rem;
    font-weight: 600;
    min-height: 48px;
  }

  .image-editor-footer .secondary-btn:active {
    background: var(--gray-100);
    border-color: var(--gray-400);
  }

  .image-editor-footer .primary-btn {
    flex: 1.5;
    padding: var(--s-14);
    background: transparent;
    border: 1.5px solid var(--red);
    border-radius: 12px;
    color: var(--red);
    font-size: 0.9375rem;
    font-weight: 600;
    min-height: 48px;
  }

  .image-editor-footer .primary-btn:active {
    background: var(--red-light);
  }

  .secondary-btn:hover {
    background: var(--gray-200);
  }

  .secondary-btn:disabled {
    color: var(--gray-400);
    background: var(--gray-50);
  }

  .primary-btn {
    padding: var(--s-10) var(--s-20);
    background: var(--red);
    color: var(--white);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .primary-btn:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.9;
  }

  /* Larger crop handles for touch */
  .crop-handle {
    width: 44px;
    height: 44px;
  }

  .crop-handle::before,
  .crop-handle::after {
    background: var(--white);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  }

  .crop-handle-nw { top: -6px; left: -6px; }
  .crop-handle-nw::before { width: 32px; height: 5px; }
  .crop-handle-nw::after { width: 5px; height: 32px; }

  .crop-handle-ne { top: -6px; right: -6px; }
  .crop-handle-ne::before { width: 32px; height: 5px; }
  .crop-handle-ne::after { width: 5px; height: 32px; }

  .crop-handle-sw { bottom: -6px; left: -6px; }
  .crop-handle-sw::before { width: 32px; height: 5px; }
  .crop-handle-sw::after { width: 5px; height: 32px; }

  .crop-handle-se { bottom: -6px; right: -6px; }
  .crop-handle-se::before { width: 32px; height: 5px; }
  .crop-handle-se::after { width: 5px; height: 32px; }

  /* Make selection box border thicker on mobile */
  .crop-selection-box {
    border-width: 3px;
  }

  /* Cropper.js mobile overrides - larger touch targets */
  .cropper-view-box {
    outline: 3px solid #e53935;
    outline-offset: -3px;
  }

  .cropper-line {
    background-color: #e53935;
  }

  /* Corner handles - larger L-shapes for touch */
  .cropper-point.point-nw,
  .cropper-point.point-ne,
  .cropper-point.point-sw,
  .cropper-point.point-se {
    width: 28px !important;
    height: 6px !important;
    border-width: 6px !important;
  }
  .cropper-point.point-nw::after,
  .cropper-point.point-ne::after,
  .cropper-point.point-sw::after,
  .cropper-point.point-se::after {
    width: 6px;
    height: 28px;
  }

  /* Edge handles - larger bars for touch */
  .cropper-point.point-n,
  .cropper-point.point-s {
    width: 56px !important;
    height: 6px !important;
    margin-left: -28px !important;
  }

  .cropper-point.point-e,
  .cropper-point.point-w {
    width: 6px !important;
    height: 56px !important;
    margin-top: -28px !important;
  }

  /* Add padding to canvas area so crop handles aren't at edge */
  .editor-canvas-area {
    padding: var(--s-16);
  }
}

/* ===== Image Generation Modal ===== */
.image-gen-modal {
  max-width: 900px;
}

.image-gen-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-24);
  padding: var(--s-24);
}

@media (max-width: 768px) {
  /* Full-screen modal on mobile */
  .image-gen-modal {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  .image-gen-modal .modal-header {
    flex-shrink: 0;
    padding: var(--s-12) var(--s-16);
  }

  .image-gen-modal .modal-header h3 {
    font-size: 1rem;
  }

  .image-gen-content {
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
    padding: var(--s-12);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  /* Preview area - compact square */
  .image-gen-preview {
    order: -1;
    aspect-ratio: 1;
    width: 50%;
    max-width: 200px;
    margin: 0 auto;
    flex-shrink: 0;
  }

  .image-gen-form {
    gap: var(--s-8);
  }

  .image-gen-form .form-label {
    font-size: 0.75rem;
  }

  .image-gen-form textarea {
    padding: var(--s-8);
    font-size: 0.875rem;
    min-height: 60px;
  }

  .image-gen-options {
    gap: var(--s-8);
  }

  .option-label {
    font-size: 0.625rem;
  }

  .option-group select {
    padding: var(--s-8);
    font-size: 0.8125rem;
  }

  .generate-btn {
    padding: var(--s-10);
    font-size: 0.875rem;
  }

  .image-gen-footer {
    flex-shrink: 0;
    padding: var(--s-8) var(--s-12);
    gap: var(--s-8);
  }

  .image-gen-footer button {
    padding: var(--s-8) var(--s-12);
    font-size: 0.8125rem;
    flex: 1;
  }

  /* When image is generated: full-screen image view */
  .image-gen-modal.has-image .image-gen-preview {
    width: 100%;
    max-width: none;
    flex: 1;
    min-height: 0;
  }

  .image-gen-modal.has-image .image-gen-form {
    display: none;
  }
}

.image-gen-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-600);
}

.image-gen-form textarea {
  padding: var(--s-16);
  background: var(--gray-100);
  border: 2px solid transparent;
  border-radius: var(--r-12);
  font-family: inherit;
  font-size: 0.9375rem;
  resize: vertical;
  outline: none;
  transition: all 0.2s ease;
}

.image-gen-form textarea:focus {
  background: var(--white);
  border-color: var(--red);
}

.image-gen-options {
  display: flex;
  gap: var(--s-16);
}

.option-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.option-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.option-group select {
  padding: var(--s-12);
  background: var(--gray-100);
  border: 2px solid transparent;
  border-radius: var(--r-12);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option-group select:focus {
  background: var(--white);
  border-color: var(--red);
}

.generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-16);
  background: var(--red);
  border: none;
  border-radius: var(--r-12);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  box-shadow: 0 4px 12px var(--red-glow);
}

.generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--red-glow);
}

.generate-btn:disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  box-shadow: none;
  cursor: not-allowed;
}

.image-gen-preview {
  aspect-ratio: 1;
  background: var(--gray-100);
  border-radius: var(--r-16);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  color: var(--gray-400);
  text-align: center;
  padding: var(--s-24);
}

.image-placeholder svg {
  opacity: 0.5;
}

.image-placeholder span {
  font-size: 0.875rem;
}

.image-gen-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-gen-loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-16);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.image-gen-loading span {
  font-size: 0.875rem;
  color: var(--gray-600);
}

.image-gen-footer {
  padding: var(--s-16) var(--s-24);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: var(--s-12);
}

.image-gen-footer button {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-12) var(--s-24);
  border: none;
  border-radius: var(--r-12);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.image-gen-footer button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#insertImageButton {
  background: var(--red);
  color: var(--white);
}

#insertImageButton:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--red-glow);
}

#downloadImageButton {
  background: var(--gray-100);
  color: var(--gray-900);
}

#downloadImageButton:hover:not(:disabled) {
  background: var(--gray-200);
}

/* ===== Preview Container ===== */
.preview-container {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
}

.no-project-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--gray-400);
}

.no-project-message svg {
  margin-bottom: var(--s-16);
  opacity: 0.5;
}

.no-project-message p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

/* ===== Error Panel ===== */
.error-panel {
  position: absolute;
  bottom: var(--s-16);
  left: var(--s-16);
  right: var(--s-16);
  background: var(--white);
  border-radius: var(--r-16);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  max-height: 200px;
  z-index: 10;
}

.error-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-12) var(--s-16);
  background: rgba(255, 59, 48, 0.1);
  border-bottom: 1px solid rgba(255, 59, 48, 0.2);
}

.error-panel-title {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-weight: 600;
  color: var(--red);
  font-size: 0.875rem;
}

.error-icon {
  color: var(--red);
}

.error-panel-actions {
  display: flex;
  gap: var(--s-8);
}

.auto-fix-btn {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-12);
  background: var(--red);
  border: none;
  border-radius: var(--r-8);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auto-fix-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--red-glow);
}

.close-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--r-8);
  color: var(--gray-600);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.error-panel-content {
  padding: var(--s-12);
  max-height: 120px;
  overflow-y: auto;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.75rem;
  color: var(--red);
  line-height: 1.6;
}

/* ===== Game Status ===== */
.game-status {
  position: absolute;
  top: var(--s-16);
  right: var(--s-16);
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-16);
  background: var(--glass-white-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  color: var(--gray-600);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.game-status-icon svg {
  display: block;
}

.game-status-text {
  font-weight: 500;
}

/* ===== Game Preview iframe ===== */
#gamePreview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: var(--white);
}

/* ===== Toggle Switch (Debug) ===== */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  cursor: pointer;
}

.toggle-switch input {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--gray-300);
  border-radius: var(--r-full);
  transition: all 0.3s ease;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--red);
}

.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(20px);
}

.toggle-label {
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* ===== Chat Suggestions (2Dで作成/3Dで作成 etc) ===== */
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-top: var(--s-12);
  padding-top: var(--s-12);
  border-top: 1px solid var(--gray-200);
}

.suggestion-btn {
  background: var(--white);
  color: var(--red);
  border: 2px solid var(--gray-200);
  padding: var(--s-8) var(--s-16);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.suggestion-btn:hover {
  background: var(--red-light);
  border-color: var(--red);
  transform: translateY(-2px);
}

/* ===== Style Selection Custom/Skip ===== */
.style-custom-chat {
  text-align: center;
  margin-top: var(--s-12);
}

.style-custom-btn-chat {
  padding: var(--s-12) var(--s-24);
  background: transparent;
  border: 2px dashed var(--gray-300);
  border-radius: var(--r-12);
  color: var(--gray-400);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.style-custom-btn-chat:hover:not(:disabled) {
  border-color: var(--red);
  color: var(--red);
}

.style-custom-btn-chat:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Restore Buttons ===== */
.restore-buttons {
  display: flex;
  gap: var(--s-12);
  margin-top: var(--s-12);
}

.restore-btn {
  padding: var(--s-12) var(--s-24);
  border-radius: var(--r-12);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.restore-btn.confirm {
  background: var(--red);
  color: var(--white);
  border: none;
  box-shadow: 0 4px 12px var(--red-glow);
}

.restore-btn.confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--red-glow);
}

.restore-btn.cancel {
  background: var(--gray-100);
  color: var(--gray-600);
  border: none;
}

.restore-btn.cancel:hover {
  background: var(--gray-200);
}

/* ===== Markdown Body ===== */
.markdown-body {
  line-height: 1.6;
}

.markdown-body p {
  margin: 0 0 0.8em 0;
}

.markdown-body p:last-child {
  margin-bottom: 0;
}

.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  margin: 1em 0 0.5em 0;
  color: var(--gray-900);
}

.markdown-body h2 { font-size: 1.2rem; }
.markdown-body h3 { font-size: 1.1rem; }
.markdown-body h4 { font-size: 1rem; }

.markdown-body strong {
  color: var(--gray-900);
}

.markdown-body code {
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: var(--r-8);
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.9em;
  color: var(--red);
}

.markdown-body ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.markdown-body li {
  margin: 0.3em 0;
}

.message.chat-response {
  max-width: 95%;
}

/* ===== Gemini Code Display Extended ===== */
.gemini-summary {
  padding: var(--s-8) var(--s-12);
  color: var(--gray-600);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--gray-200);
}

.gemini-file {
  border-top: 1px solid var(--gray-200);
}

.gemini-file:first-of-type {
  border-top: none;
}

.gemini-file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-8) var(--s-12);
  background: var(--gray-100);
}

.gemini-filename {
  font-family: 'SF Mono', Monaco, monospace;
  color: var(--red);
  font-size: 0.85rem;
}

.gemini-toggle {
  background: var(--gray-200);
  color: var(--gray-600);
  border: none;
  padding: var(--s-4) var(--s-8);
  border-radius: var(--r-8);
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}

.gemini-toggle:hover {
  background: var(--gray-300);
  color: var(--gray-900);
}

.gemini-code-block.collapsed {
  display: none;
}

/* ===== Preset Buttons (Mobile) ===== */
.preset-buttons {
  display: none;
  padding: var(--s-8) var(--s-12);
  background: var(--glass-white);
  border-top: 1px solid var(--glass-border);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.preset-buttons::-webkit-scrollbar {
  display: none;
}

.preset-btn {
  display: inline-block;
  padding: var(--s-8) var(--s-16);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-full);
  color: var(--gray-600);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: var(--s-8);
}

.preset-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ===== Scrollbar Styling ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* ===== Code Viewer Modal ===== */
.code-viewer-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--s-24);
}

.code-viewer-modal.hidden {
  display: none;
}

.code-viewer-content {
  width: 100%;
  max-width: 900px;
  max-height: 80vh;
  background: var(--white);
  border-radius: var(--r-24);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.code-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-16) var(--s-24);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.code-viewer-header h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
}

.code-viewer-actions {
  display: flex;
  align-items: center;
  gap: var(--s-12);
}

.code-action-btn {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-16);
  background: var(--gray-100);
  border: none;
  border-radius: var(--r-8);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
}

.code-action-btn:hover {
  background: var(--red);
  color: var(--white);
}

.code-action-btn.copied {
  background: #10B981;
  color: var(--white);
}

.code-close-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border: none;
  border-radius: var(--r-8);
  font-size: 1.5rem;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
}

.code-close-btn:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.code-viewer-pre {
  flex: 1;
  margin: 0;
  padding: var(--s-24);
  background: #1e1e1e;
  overflow: auto;
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

.code-viewer-pre code {
  color: #d4d4d4;
  white-space: pre;
}

/* ===== Version Restore Modal - Nintendo × Kashiwa Sato ===== */
.restore-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  animation: modalFadeIn 0.3s var(--ease-out);
}

.restore-modal.hidden {
  display: none;
}

.restore-modal-content {
  background: var(--white);
  border-radius: var(--r-24);
  width: 90%;
  max-width: 400px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
  animation: modalSlideUp 0.4s var(--ease-out);
  overflow: hidden;
}

.restore-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-32) var(--s-32) var(--s-24);
}

.restore-modal-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--red) 0%, #FF6B6B 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 8px 24px var(--red-glow);
}

.restore-modal-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

.restore-modal-body {
  padding: 0 var(--s-32) var(--s-24);
  text-align: center;
}

.restore-modal-body p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.6;
}

.restore-modal-hint {
  font-size: 0.875rem !important;
  color: var(--gray-400) !important;
  margin-top: var(--s-8);
}

.restore-modal-actions {
  display: flex;
  gap: var(--s-12);
  padding: var(--s-24) var(--s-32) var(--s-32);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
}

.restore-modal-cancel,
.restore-modal-confirm {
  flex: 1;
  padding: var(--s-16);
  border-radius: var(--r-12);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.restore-modal-cancel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
}

.restore-modal-cancel:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.restore-modal-confirm {
  background: var(--red);
  border: none;
  color: var(--white);
  box-shadow: 0 4px 12px var(--red-glow);
}

.restore-modal-confirm:hover {
  background: #E5352B;
  transform: scale(1.02);
  box-shadow: 0 6px 16px var(--red-glow);
}

.restore-modal-confirm:active {
  transform: scale(0.98);
}

/* Restore modal loading state */
.restore-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 16px;
}

.restore-modal-loading .spinner {
  width: 32px;
  height: 32px;
}

.restore-modal-loading-text {
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* ============================================
   Bottom Navigation Bar (SNS-style)
   ============================================ */
.bottom-nav {
  position: fixed;
  bottom: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  height: 52px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  z-index: 2000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 52px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

.nav-item svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}

.nav-item span {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.9;
}

.nav-item.active {
  color: var(--gray-900);
}

.nav-item.active svg {
  stroke-width: 2.25;
}

.nav-item:active {
  transform: scale(0.95);
}

/* ============================================
   Discover View
   ============================================ */
.discover-view {
  position: fixed;
  inset: 0;
  background: var(--gray-50);
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.discover-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  padding-top: calc(16px + env(safe-area-inset-top));
  background: var(--glass-white-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--glass-border);
  z-index: 10;
}

.discover-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--gray-900);
}

.search-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--gray-100);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.2s ease;
}

.search-btn:active {
  background: var(--gray-200);
}

.discover-content {
  padding: 16px;
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.discover-card {
  aspect-ratio: 1;
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
  position: relative;
  animation: scaleIn 0.4s var(--ease-out) backwards;
}

.discover-card:nth-child(1) { animation-delay: 0.05s; }
.discover-card:nth-child(2) { animation-delay: 0.1s; }
.discover-card:nth-child(3) { animation-delay: 0.15s; }
.discover-card:nth-child(4) { animation-delay: 0.2s; }
.discover-card:nth-child(5) { animation-delay: 0.25s; }
.discover-card:nth-child(6) { animation-delay: 0.3s; }

.discover-card:active {
  transform: scale(0.97);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.discover-card-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, #FFE5E5, #E5F0FF);
}

.discover-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: var(--white);
}

.discover-card-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.discover-card-creator {
  font-size: 11px;
  opacity: 0.9;
  margin-top: 2px;
}

.discover-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 20px;
  color: var(--gray-400);
  text-align: center;
}

.discover-empty svg {
  margin-bottom: 16px;
  opacity: 0.5;
}

.discover-empty p {
  font-size: 14px;
}

/* ============================================
   Zapping Mode (Fullscreen Game Carousel)
   ============================================ */
.zapping-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(76px + env(safe-area-inset-bottom));
  background: var(--gray-100);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.3s var(--ease-out);
}

/* Top bar - glass morphism */
.zapping-topbar {
  height: 56px;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass-white-strong);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.zapping-back {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: transparent;
  border: none;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.zapping-back:active {
  background: var(--gray-200);
}

.zapping-topbar-info {
  flex: 1;
  min-width: 0;
}

.zapping-game-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zapping-creator {
  font-size: 12px;
  color: var(--gray-600);
}

.zapping-topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.zapping-topbar-action {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--gray-900);
  cursor: pointer;
  border-radius: var(--r-12);
  transition: background 0.2s ease;
}

.zapping-topbar-action:active {
  background: var(--gray-200);
}

.zapping-topbar-action svg {
  width: 20px;
  height: 20px;
}

.zapping-topbar-action span {
  font-size: 13px;
  font-weight: 500;
}

.zapping-topbar-action.liked svg {
  fill: var(--red);
  stroke: var(--red);
}

.zapping-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  margin: 12px;
  margin-top: 0;
  border-radius: var(--r-16);
  box-shadow: var(--glass-shadow);
}

.zapping-slide {
  position: absolute;
  inset: 0;
  transition: transform 0.3s var(--ease-out);
}

.zapping-slide iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--r-16);
  background: var(--white);
}

.zapping-slide.prev {
  transform: translateY(-100%);
}

.zapping-slide.current {
  transform: translateY(0);
}

.zapping-slide.next {
  transform: translateY(100%);
}

/* Nav zapping button - accent style */
.nav-zapping {
  color: var(--red);
  background: var(--red-light);
}

.nav-zapping svg {
  stroke: var(--red);
}

.nav-zapping span {
  color: var(--red);
}

/* Zapping play overlay */
.zapping-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 5;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.zapping-play-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.zapping-play-btn {
  width: 80px;
  height: 80px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.zapping-play-btn svg {
  width: 32px;
  height: 32px;
  color: var(--gray-900);
  margin-left: 4px;
}

/* Adjust existing views when bottom nav is visible */
.project-list-view.with-nav {
  padding-bottom: calc(76px + env(safe-area-inset-bottom) + 20px);
}

/* Mobile adjustments for editor with bottom nav */
@media (max-width: 768px) {
  .container.with-nav {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

/* ===== Message Buttons Container ===== */
.message-buttons {
  display: flex;
  gap: var(--s-8);
  margin-top: var(--s-12);
  flex-wrap: wrap;
}

/* ===== View Changes Button - Nintendo × Kashiwa Sato ===== */
.view-changes-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  background: var(--white);
  color: var(--gray-900);
  border: none;
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.view-changes-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.view-changes-btn:active {
  transform: translateY(0);
}

.view-changes-btn svg {
  width: 14px;
  height: 14px;
  color: var(--red);
}

/* ===== Changes Modal - Nintendo × Kashiwa Sato ===== */
.changes-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-24);
}

.changes-modal.hidden {
  display: none;
}

.changes-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: fadeIn 0.2s ease-out;
}

.changes-modal-content {
  position: relative;
  background: var(--white);
  border-radius: var(--r-24);
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 8px 40px rgba(0, 0, 0, 0.12),
    0 24px 80px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  animation: scaleIn 0.3s var(--ease-out);
}

/* Header - Minimal with Red Accent */
.changes-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-24);
  border-bottom: 1px solid var(--gray-100);
}

.changes-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: var(--s-12);
  letter-spacing: -0.01em;
}

.changes-modal-header h3::before {
  content: '';
  width: 4px;
  height: 20px;
  background: var(--red);
  border-radius: 2px;
}

.changes-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-8);
  background: transparent;
  border: none;
  font-size: 1.25rem;
  color: var(--gray-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.changes-modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}

/* Body */
.changes-modal-body {
  padding: var(--s-24);
  padding-top: var(--s-16);
  overflow-y: auto;
  flex: 1;
}

/* Summary Card - Clean & Minimal */
.changes-summary {
  padding: var(--s-16);
  background: transparent;
  margin-bottom: var(--s-20);
  color: var(--gray-600);
  font-size: 0.875rem;
  line-height: 1.6;
  position: relative;
  padding-left: var(--s-16);
  border-left: 2px solid var(--gray-200);
}

.changes-summary::before {
  content: '変更内容';
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-8);
}

/* File Changes - Nintendo Clean Style */
.changes-file {
  margin-bottom: var(--s-16);
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--gray-900);
}

.changes-file:last-child {
  margin-bottom: 0;
}

.changes-file-header {
  background: var(--gray-900);
  padding: var(--s-12) var(--s-16);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 0.75rem;
  color: var(--gray-400);
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.changes-file-header::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: var(--r-full);
  opacity: 0.8;
}

/* Code Diff - Dark Theme */
.changes-diff,
.changes-code {
  margin: 0;
  padding: var(--s-16);
  background: var(--gray-900);
  overflow-x: auto;
  font-size: 0.8125rem;
}

.changes-diff code,
.changes-code code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  line-height: 1.6;
}

/* Deleted Code Block */
.changes-diff code.diff-old {
  display: block;
  background: rgba(255, 59, 48, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--s-12) var(--s-16);
  padding-right: var(--s-48);
  border-radius: var(--r-8);
  margin-bottom: var(--s-8);
  white-space: pre-wrap;
  word-break: break-all;
  position: relative;
  border: 1px solid rgba(255, 59, 48, 0.2);
}

.changes-diff code.diff-old::before {
  content: '−';
  position: absolute;
  top: var(--s-12);
  right: var(--s-12);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--red);
  background: rgba(255, 59, 48, 0.15);
  border-radius: var(--r-full);
}

/* Added Code Block */
.changes-diff code.diff-new {
  display: block;
  background: rgba(52, 199, 89, 0.1);
  color: rgba(255, 255, 255, 0.9);
  padding: var(--s-12) var(--s-16);
  padding-right: var(--s-48);
  border-radius: var(--r-8);
  white-space: pre-wrap;
  word-break: break-all;
  position: relative;
  border: 1px solid rgba(52, 199, 89, 0.2);
}

.changes-diff code.diff-new::before {
  content: '+';
  position: absolute;
  top: var(--s-12);
  right: var(--s-12);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #34C759;
  background: rgba(52, 199, 89, 0.15);
  border-radius: var(--r-full);
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .changes-modal {
    padding: var(--s-16);
    align-items: flex-end;
  }

  .changes-modal-content {
    max-height: 85vh;
    border-radius: var(--r-24) var(--r-24) 0 0;
    animation: slideUp 0.3s var(--ease-out);
  }
}

/* ===========================================
   My Page - Nintendo Showcase Style
   "Fill Your Collection" Psychology
   =========================================== */

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.3); }
  50% { box-shadow: 0 0 20px 4px rgba(255, 59, 48, 0.15); }
}

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

.mypage-view {
  height: 100%;
  height: 100dvh;
  background:
    radial-gradient(ellipse 100% 60% at 50% -20%, rgba(255, 59, 48, 0.06), transparent),
    linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

/* Header */
.mypage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-12) var(--s-16);
  padding-top: calc(var(--s-12) + env(safe-area-inset-top));
}

.mypage-header-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: 0.05em;
}

.mypage-header-spacer {
  width: 40px;
}

.mypage-back-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--white);
  border: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mypage-back-btn:active {
  transform: scale(0.95);
  background: var(--gray-100);
}

/* Profile Card - Compact & Elegant */
.mypage-profile-card {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  margin: var(--s-8) var(--s-16);
  padding: var(--s-16);
  background: var(--white);
  border-radius: var(--r-16);
  border: 1px solid var(--gray-100);
  animation: slideUp 0.4s var(--ease-out);
}

.mypage-avatar-ring {
  position: relative;
  padding: 3px;
  background: linear-gradient(135deg, var(--red), #FF6B6B);
  border-radius: var(--r-full);
  animation: pulseGlow 3s ease-in-out infinite;
}

.mypage-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
}

.mypage-profile-info {
  flex: 1;
  min-width: 0;
}

.mypage-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mypage-bio {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gray-500);
  margin-top: var(--s-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mypage-edit-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--gray-50);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mypage-edit-btn:active {
  transform: scale(0.95);
  background: var(--gray-100);
  color: var(--gray-600);
}

/* Collection Counter - Bold & Motivating */
.mypage-collection {
  text-align: center;
  padding: var(--s-24) var(--s-16);
  animation: slideUp 0.5s var(--ease-out) 0.1s both;
}

.mypage-collection-label {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--gray-300);
  letter-spacing: 0.2em;
  margin-bottom: var(--s-8);
}

.mypage-collection-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-8);
}

.mypage-count-number {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.04em;
  line-height: 1;
}

.mypage-count-unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: 0.02em;
}

/* ========================================
   Game Showcase - Miyamoto Style
   "触って楽しい、見て嬉しい"
   ======================================== */

@keyframes cardBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(60px) rotate(-8deg);
  }
  60% {
    transform: scale(1.1) translateY(-10px) rotate(2deg);
  }
  80% {
    transform: scale(0.95) translateY(5px) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

@keyframes emptyPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

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

.mypage-showcase {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--s-16);
}

/* iOS Carousel Container */
.mypage-showcase-scroll {
  display: flex;
  align-items: flex-start;
  gap: var(--s-24);
  padding: var(--s-16) calc(50% - 100px);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mypage-showcase-scroll::-webkit-scrollbar {
  display: none;
}

/* Game Card - Kashiwa Sato × iOS Style */
.mypage-game-case {
  flex-shrink: 0;
  width: 200px;
  position: relative;
  scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
  animation: cardBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  will-change: transform, opacity;
}

/* Staggered animation for each card */
.mypage-game-case:nth-child(1) { animation-delay: 0.1s; }
.mypage-game-case:nth-child(2) { animation-delay: 0.15s; }
.mypage-game-case:nth-child(3) { animation-delay: 0.2s; }
.mypage-game-case:nth-child(4) { animation-delay: 0.25s; }
.mypage-game-case:nth-child(5) { animation-delay: 0.3s; }
.mypage-game-case:nth-child(6) { animation-delay: 0.35s; }

.mypage-game-case:active {
  transform: scale(0.95) !important;
}

/* Visual - Thumbnail */
.mypage-case-visual {
  width: 100%;
  aspect-ratio: 9 / 14;
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--gray-100);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

.mypage-case-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mypage-case-visual img.img-error {
  opacity: 0;
}

/* Info - Kashiwa Sato Typography */
.mypage-case-info {
  padding: var(--s-12) var(--s-4);
}

.mypage-case-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mypage-case-desc {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-400);
  margin-top: var(--s-4);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Empty Slot - Minimal */
.mypage-empty-case {
  flex-shrink: 0;
  width: 200px;
  scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
  animation: cardBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  will-change: transform, opacity;
}

.mypage-empty-case-visual {
  width: 100%;
  aspect-ratio: 9 / 14;
  border: 3px dashed var(--gray-200);
  border-radius: var(--r-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  background: var(--gray-50);
  transition: all 0.2s ease;
}

.mypage-empty-case:active {
  transform: scale(0.95) !important;
}

.mypage-empty-case:active .mypage-empty-case-visual {
  border-color: var(--red);
  background: rgba(255, 59, 48, 0.04);
}

.mypage-empty-case:active .mypage-empty-case-icon {
  background: var(--red);
  color: var(--white);
  transform: rotate(90deg);
}

.mypage-empty-case-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: iconBounce 2s ease-in-out infinite;
}

.mypage-empty-case-icon svg {
  width: 28px;
  height: 28px;
}

.mypage-empty-case-text {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-300);
  letter-spacing: -0.02em;
}

/* ========================================
   Game Start Animation - Card Insert
   サムネイルが「カチャッ」と差し込まれる
   ======================================== */

@keyframes cardInsert {
  0% {
    transform: translate(-50%, -120%) scale(1);
  }
  50% {
    transform: translate(-50%, -45%) scale(1);
  }
  65% {
    transform: translate(-50%, -55%) scale(1);
  }
  80% {
    transform: translate(-50%, -48%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes slotGlow {
  0% { box-shadow: 0 0 0 rgba(255, 59, 48, 0); }
  50% { box-shadow: 0 0 40px rgba(255, 59, 48, 0.6); }
  100% { box-shadow: 0 0 60px rgba(255, 59, 48, 0.8); }
}

@keyframes flashBang {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}

.game-start-overlay {
  position: fixed;
  inset: 0;
  background: var(--gray-900);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.game-start-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Slot - 差し込み口 */
.game-start-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 320px;
  border: 4px solid var(--gray-700);
  border-radius: var(--r-24);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.game-start-overlay.active .game-start-slot {
  opacity: 1;
  animation: slotGlow 0.5s ease-out 0.3s forwards;
}

/* The Card - サムネイルカード */
.game-start-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 280px;
  border-radius: var(--r-16);
  background-size: cover;
  background-position: center;
  background-color: var(--gray-800);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -120%);
}

.game-start-overlay.active .game-start-card {
  animation: cardInsert 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

/* Flash */
.game-start-flash {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
}

.game-start-overlay.active .game-start-flash {
  animation: flashBang 0.3s ease-out 0.55s forwards;
}

/* Footer */
.mypage-footer {
  padding: var(--s-32) var(--s-24);
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  text-align: center;
}

.mypage-logout-btn {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-300);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s-8) var(--s-16);
  transition: color 0.2s ease;
}

.mypage-logout-btn:hover {
  color: var(--gray-500);
}

.mypage-logout-btn:active {
  color: var(--red);
}

/* ============================================
   Notifications Page
   ============================================ */
/* Enable scroll on notifications page */
html:has(body[data-page="notifications"]),
body[data-page="notifications"] {
  overflow-y: auto;
  height: auto;
}

.notifications-view {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(255, 59, 48, 0.08), transparent),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(255, 59, 48, 0.06), transparent),
    linear-gradient(180deg, var(--white) 0%, var(--gray-100) 100%);
}

/* Notifications Header */
.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-16) var(--s-24);
  background: var(--glass-white);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.notifications-header h1 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
}

.notifications-back-btn,
.notifications-mark-all-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: none;
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.notifications-back-btn:hover,
.notifications-mark-all-btn:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.notifications-mark-all-btn:hover {
  color: var(--red);
}

/* Filter Tabs */
.notifications-tabs {
  display: flex;
  gap: var(--s-8);
  padding: var(--s-16) var(--s-24);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}

.notifications-tab {
  padding: var(--s-8) var(--s-16);
  border-radius: var(--r-full);
  border: none;
  background: transparent;
  color: var(--gray-400);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notifications-tab:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}

.notifications-tab.active {
  background: var(--red);
  color: var(--white);
}

/* Notifications Content */
.notifications-content {
  padding: var(--s-24);
  padding-bottom: calc(80px + var(--s-24) + env(safe-area-inset-bottom));
  max-width: 640px;
  margin: 0 auto;
}

/* Loading State */
.notifications-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-64) var(--s-24);
  color: var(--gray-400);
}

.notifications-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: var(--s-16);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.notifications-loading p {
  font-size: 0.875rem;
}

/* Empty State */
.notifications-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-64) var(--s-24);
  color: var(--gray-400);
}

.notifications-empty svg {
  margin-bottom: var(--s-16);
  opacity: 0.5;
}

.notifications-empty p {
  font-size: 0.9375rem;
}

/* Notifications List */
.notifications-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

/* Notification Item */
.notification-item {
  position: relative;
  display: flex;
  gap: var(--s-16);
  padding: var(--s-16);
  background: var(--glass-white-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-16);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  animation: slideUp 0.4s var(--ease-out);
}

.notification-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.notification-item.unread {
  background: var(--white);
  border-color: var(--red-light);
  box-shadow: 0 4px 16px rgba(255, 59, 48, 0.08);
}

.notification-item.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: var(--red);
  border-radius: 0 var(--r-8) var(--r-8) 0;
}

/* Notification Icon */
.notification-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-icon.system {
  background: var(--gray-100);
  color: var(--gray-600);
}

.notification-icon.project {
  background: var(--red-light);
  color: var(--red);
}

.notification-icon.success {
  background: rgba(52, 199, 89, 0.15);
  color: #34C759;
}

.notification-icon.warning {
  background: rgba(255, 149, 0, 0.15);
  color: #FF9500;
}

/* Notification Content */
.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--s-4);
  line-height: 1.4;
}

.notification-message {
  font-size: 0.8125rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin-bottom: var(--s-8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-meta {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-size: 0.75rem;
  color: var(--gray-400);
}

.notification-time {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.notification-badge {
  padding: 2px var(--s-8);
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.notification-badge.system {
  background: var(--gray-100);
  color: var(--gray-600);
}

.notification-badge.project {
  background: var(--red-light);
  color: var(--red);
}

/* Date Divider */
.notifications-date-divider {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  margin: var(--s-24) 0 var(--s-16);
}

.notifications-date-divider:first-child {
  margin-top: 0;
}

.notifications-date-divider span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.notifications-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

/* Notifications Mobile */
@media (max-width: 640px) {
  .notifications-header {
    padding: var(--s-12) var(--s-16);
  }

  .notifications-tabs {
    padding: var(--s-12) var(--s-16);
    gap: var(--s-4);
  }

  .notifications-tab {
    padding: var(--s-8) var(--s-12);
    font-size: 0.8125rem;
  }

  .notifications-content {
    padding: var(--s-16);
    padding-bottom: calc(80px + var(--s-16) + env(safe-area-inset-bottom));
  }

  .notification-item {
    padding: var(--s-12);
  }

  .notification-icon {
    width: 36px;
    height: 36px;
  }
}

/* ===== Project Title Animation ===== */
#projectTitle {
  transition: opacity 0.15s ease, transform 0.3s var(--ease-out), color 0.3s ease;
}

#projectTitle.title-updating {
  opacity: 0;
  transform: translateY(-4px);
}

#projectTitle.title-updated {
  animation: titlePop 0.6s var(--ease-out);
}

@keyframes titlePop {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================
   PLAY SCREEN - Full Screen Game View
   ============================================= */

.play-view {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--black);
  overflow: hidden;
}

/* Top Bar */
.play-top-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: var(--s-12) var(--s-16);
  padding-top: calc(var(--s-12) + env(safe-area-inset-top));
  background: var(--black);
}

.play-back-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-full);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.play-back-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.play-back-btn:active {
  transform: scale(0.95);
}

.play-top-spacer {
  flex: 1;
}

.play-top-actions {
  display: flex;
  gap: var(--s-8);
}

.play-action-btn {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-12);
  border: none;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-full);
  color: var(--white);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.play-action-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.play-action-btn:active {
  transform: scale(0.95);
}

.play-action-btn.liked {
  background: var(--red);
}

.play-action-btn.liked svg {
  fill: currentColor;
}

.play-action-count {
  font-variant-numeric: tabular-nums;
}

/* Game Container */
.play-game-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.play-game-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: var(--black);
}

/* Bottom Bar */
.play-bottom-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: var(--s-12) var(--s-16);
  padding-bottom: calc(var(--s-12) + env(safe-area-inset-bottom));
  background: var(--black);
}

.play-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-16);
  border: none;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-16);
  color: var(--white);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.play-nav-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.play-nav-btn:active {
  transform: scale(0.95);
}

.play-nav-create {
  background: var(--red);
}

.play-nav-create:hover {
  background: #ff5247;
}

/* Bottom Sheet Overlay */
.play-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.play-sheet-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Bottom Sheet */
.play-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 210;
  max-height: 70vh;
  background: var(--white);
  border-radius: var(--r-24) var(--r-24) 0 0;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out);
  overflow: hidden;
}

.play-bottom-sheet.active {
  transform: translateY(0);
}

.play-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--gray-200);
  border-radius: var(--r-full);
  margin: var(--s-12) auto;
}

.play-sheet-content {
  padding: 0 var(--s-24) var(--s-32);
  padding-bottom: calc(var(--s-32) + env(safe-area-inset-bottom));
  max-height: calc(70vh - 28px);
  overflow-y: auto;
}

.play-sheet-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: var(--s-8);
  letter-spacing: -0.02em;
}

.play-sheet-creator {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: var(--s-16);
}

.play-sheet-description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-600);
  margin-bottom: var(--s-16);
}

.play-sheet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}

.play-tag {
  padding: var(--s-4) var(--s-12);
  background: var(--gray-100);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  color: var(--gray-600);
}

/* Comments */
.play-comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

.play-comments-empty {
  text-align: center;
  color: var(--gray-400);
  padding: var(--s-32) 0;
}

/* Play Screen Mobile Optimizations */
@media (max-width: 640px) {
  .play-top-bar {
    padding: var(--s-8) var(--s-12);
    padding-top: calc(var(--s-8) + env(safe-area-inset-top));
  }

  .play-back-btn {
    width: 36px;
    height: 36px;
  }

  .play-action-btn {
    padding: var(--s-8) var(--s-8);
  }

  .play-action-btn svg {
    width: 20px;
    height: 20px;
  }

  .play-action-count {
    font-size: 0.8125rem;
  }

  .play-bottom-bar {
    padding: var(--s-8) var(--s-12);
    padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom));
  }

  .play-nav-btn {
    padding: var(--s-8) var(--s-12);
    font-size: 0.6875rem;
  }

  .play-nav-btn svg {
    width: 20px;
    height: 20px;
  }

  .play-sheet-content {
    padding: 0 var(--s-16) var(--s-24);
    padding-bottom: calc(var(--s-24) + env(safe-area-inset-bottom));
  }

  .play-sheet-title {
    font-size: 1.25rem;
  }
}