/* phone.css - Phone UI + Schedule + SMS + Moments + Character + Minigame + Gallery */

/* === Phone Container === */
.phone-container { width:100%; height:100%; display:flex; flex-direction:column;
  background:linear-gradient(160deg,#fff0f5 0%,#e6e6fa 100%); position:relative; overflow:hidden; }
.phone-blob { position:absolute; border-radius:50%; filter:blur(40px); z-index:0; opacity:0.6;
  animation:phoneFloat 10s infinite ease-in-out; }
.phone-blob-1 { width:200px; height:200px; background:#ffc3d0; top:-50px; left:-50px; }
.phone-blob-2 { width:250px; height:250px; background:#d4c2fc; bottom:100px; right:-60px; animation-delay:-5s; }
@keyframes phoneFloat { 0%{transform:translate(0,0)} 50%{transform:translate(20px,30px)} 100%{transform:translate(0,0)} }

.phone-header { padding:40px 20px 16px; display:flex; justify-content:space-between; align-items:center; z-index:10; }
.date-badge { background:var(--glass-bg); padding:8px 16px; border-radius:20px; font-size:14px;
  font-weight:600; color:var(--text-dark); box-shadow:0 4px 12px rgba(0,0,0,0.05);
  display:flex; align-items:center; gap:6px; border:1px solid var(--glass-border); }
.stamina-box { background:var(--glass-bg); padding:6px 12px; border-radius:20px;
  border:1px solid var(--glass-border); box-shadow:0 4px 12px rgba(0,0,0,0.05);
  display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--text-dark); }
.stamina-icon { width:24px; height:24px; background:linear-gradient(135deg,#ff9a9e,#fecfef);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(255,139,167,0.4); color:#fff; font-size:12px; }

.phone-body { flex:1; z-index:10; overflow-y:auto; padding:0 20px 20px; }

/* Apps Grid */
.apps-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px; }
.app-item { background:rgba(255,255,255,0.75); border-radius:var(--radius-lg); padding:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; transition:all 0.3s; border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 10px 20px rgba(0,0,0,0.03); position:relative; }
.app-item:active { transform:scale(0.95); }
.app-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-size:24px; color:#fff; box-shadow:0 8px 16px rgba(0,0,0,0.1); }
.app-icon-sms { background:linear-gradient(135deg,#667eea,#764ba2); }
.app-icon-moments { background:linear-gradient(135deg,#ff9a9e,#fecfef); }
.app-icon-schedule { background:linear-gradient(135deg,#84fab0,#8fd3f4); }
.app-icon-gallery { background:linear-gradient(135deg,#fccb90,#d57eeb); }
.app-label { font-size:13px; color:var(--text-dark); font-weight:500; }
.badge { position:absolute; top:-5px; right:-5px; background:#FF4757; color:#fff; font-size:12px;
  font-weight:bold; height:22px; min-width:22px; border-radius:11px; display:flex;
  align-items:center; justify-content:center; border:2px solid #fff;
  box-shadow:0 4px 8px rgba(255,71,87,0.3); }

/* Bottom Nav */
.phone-nav { background:rgba(255,255,255,0.85); border-top:1px solid rgba(255,255,255,0.5);
  padding:12px 20px 24px; display:flex; justify-content:space-between; z-index:20;
  border-radius:30px 30px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,0.05); }
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:#A4B0BE; cursor:pointer; transition:all 0.3s; position:relative; }
.nav-item.active { color:var(--accent-pink); }
.nav-icon { font-size:20px; }
.nav-label { font-size:10px; font-weight:500; }

/* === Schedule === */
.schedule-wrap { width:100%; min-height:100%; padding:20px;
  background:linear-gradient(120deg,#a18cd1 0%,#fbc2eb 100%); }
.schedule-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.schedule-title { font-size:28px; font-weight:800; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.1); }
.schedule-sub { font-size:14px; color:rgba(255,255,255,0.9); }
.energy-box { background:rgba(255,255,255,0.25); padding:8px 16px; border-radius:30px;
  display:flex; align-items:center; gap:10px; border:1px solid var(--glass-border); }
.energy-bar-wrap { width:80px; height:8px; background:rgba(255,255,255,0.4); border-radius:4px; overflow:hidden; }
.energy-bar-fill { height:100%; background:linear-gradient(90deg,#FF9A9E,#FF758C); border-radius:4px;
  transition:width 0.5s; }
.energy-text { font-size:14px; font-weight:700; color:#fff; }

.timeline-section { background:rgba(255,255,255,0.75); border-radius:var(--radius-lg);
  padding:20px 0 24px; margin-bottom:20px; border:1px solid var(--glass-border);
  box-shadow:0 10px 30px -10px rgba(162,155,254,0.3); position:relative; overflow:hidden; }
.section-line { position:absolute; left:0; top:20px; bottom:20px; width:4px; border-radius:0 4px 4px 0; }
.line-done { background:#00b894; }
.line-active { background:var(--accent-pink); box-shadow:0 0 10px var(--accent-pink); }
.line-locked { background:#b2bec3; }
.section-head { padding:0 24px 16px; display:flex; justify-content:space-between; align-items:center; }
.time-label { font-size:18px; font-weight:700; color:var(--text-dark); }
.status-badge { font-size:12px; padding:4px 10px; border-radius:12px; font-weight:600; }
.badge-done { background:rgba(0,184,148,0.1); color:#00b894; }
.badge-active { background:rgba(255,117,140,0.1); color:var(--accent-pink); }
.badge-locked { background:rgba(178,190,195,0.2); color:#636e72; }

.scroll-row { display:flex; overflow-x:auto; padding:0 24px; gap:16px; scroll-behavior:smooth;
  -ms-overflow-style:none; scrollbar-width:none; }
.scroll-row::-webkit-scrollbar { display:none; }

.action-card { min-width:140px; height:150px; background:#fff; border-radius:var(--radius-md);
  padding:16px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 5px 15px rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.02);
  transition:all 0.3s; cursor:pointer; position:relative; }
.action-card:active { transform:scale(0.95); }
.action-card.done { background:#f8fdfb; border:1px solid #dff9fb; pointer-events:none; opacity:0.7; }
.action-card.locked { filter:grayscale(1); opacity:0.5; pointer-events:none; }
.card-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:22px; margin-bottom:10px; }
.bg-blue { background:#e3f2fd; }
.bg-orange { background:#fff3e0; }
.bg-purple { background:#f3e5f5; }
.bg-green { background:#e8f5e9; }
.bg-pink { background:#fce4ec; }
.card-title { font-size:14px; font-weight:600; color:var(--text-dark); margin-bottom:4px; }
.card-cost { font-size:12px; color:var(--text-light); display:flex; align-items:center; gap:4px; }
.card-check { position:absolute; top:10px; right:10px; color:#00b894; font-weight:bold; font-size:14px;
  background:rgba(0,184,148,0.1); width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; }
.back-bar { display:flex; align-items:center; gap:10px; margin-bottom:16px; cursor:pointer; }
.back-arrow { font-size:20px; color:#fff; }

/* === SMS === */
.sms-wrap { width:100%; height:100%; display:flex; flex-direction:column;
  background:linear-gradient(135deg,#fff0f3,#ffe3e9); }
.sms-header { padding:40px 20px 15px; background:rgba(255,255,255,0.85); display:flex;
  align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,0.5);
  box-shadow:0 4px 15px rgba(0,0,0,0.03); }
.sms-back { width:40px; height:40px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; cursor:pointer; color:var(--accent-pink); font-size:20px; }
.sms-contact-name { font-size:18px; font-weight:600; color:var(--text-dark); }

.sms-chat { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:15px; }
.sms-row { display:flex; align-items:flex-end; gap:10px; }
.sms-row.sent { flex-direction:row-reverse; }
.sms-avatar { width:32px; height:32px; border-radius:12px; overflow:hidden; flex-shrink:0;
  box-shadow:0 2px 5px rgba(0,0,0,0.05); }
.sms-avatar img { width:100%; height:100%; object-fit:cover; }
.sms-bubble { max-width:70%; padding:12px 16px; font-size:15px; line-height:1.5;
  box-shadow:0 4px 12px rgba(255,107,129,0.1); word-wrap:break-word; }
.sms-bubble.received { background:#fff; color:var(--text-dark); border-radius:18px 18px 18px 4px; }
.sms-bubble.sent { background:linear-gradient(135deg,#ff8fa3,#ff6b81); color:#fff;
  border-radius:18px 18px 4px 18px; }

.sms-replies { padding:10px 20px 20px; display:flex; gap:10px; overflow-x:auto;
  scrollbar-width:none; }
.sms-replies::-webkit-scrollbar { display:none; }
.sms-chip { background:rgba(255,255,255,0.9); border:1px solid rgba(255,107,129,0.2);
  padding:8px 16px; border-radius:20px; font-size:13px; color:#e84a64; white-space:nowrap;
  cursor:pointer; transition:all 0.2s; box-shadow:0 2px 8px rgba(255,107,129,0.1); }
.sms-chip:active { transform:scale(0.95); background:var(--accent-pink); color:#fff; }

/* === Moments === */
.moments-wrap { width:100%; min-height:100%; background:linear-gradient(180deg,#F8F9FE,#F0F2F9); }
.moments-header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,0.85);
  padding:40px 20px 15px; box-shadow:0 1px 0 rgba(0,0,0,0.03); display:flex;
  justify-content:space-between; align-items:center; }
.moments-title { font-size:22px; font-weight:800; background:linear-gradient(135deg,#FF6B95,#8A4FFF);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.moments-back { font-size:20px; cursor:pointer; color:var(--accent-purple); }

.moments-feed { padding:20px; padding-bottom:40px; }
.post-card { background:rgba(255,255,255,0.95); border-radius:var(--radius-lg); padding:24px;
  margin-bottom:20px; box-shadow:0 4px 12px rgba(138,79,255,0.05); }
.post-header { display:flex; align-items:center; margin-bottom:14px; }
.post-avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; margin-right:12px;
  border:2px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,0.1); }
.post-avatar img { width:100%; height:100%; object-fit:cover; }
.post-user-name { font-weight:700; font-size:16px; color:var(--text-dark); }
.post-time { font-size:12px; color:var(--text-light); }
.post-content { font-size:15px; color:#4A5568; margin-bottom:14px; line-height:1.6; }
.post-actions { display:flex; align-items:center; gap:20px; padding-top:14px;
  border-top:1px solid rgba(0,0,0,0.04); }
.like-btn { display:flex; align-items:center; gap:6px; color:var(--text-light); font-size:14px;
  font-weight:600; cursor:pointer; transition:all 0.2s; }
.like-btn.liked { color:var(--accent-pink); }
.like-btn:active { transform:scale(0.9); }

/* === Character === */
.character-wrap { width:100%; min-height:100%; display:flex; flex-direction:column;
  background:linear-gradient(135deg,#fbc2eb 0%,#a6c1ee 100%); }
.char-header { padding:40px 20px 10px; display:flex; justify-content:space-between; align-items:center; z-index:10; }
.char-back { font-size:20px; cursor:pointer; color:var(--text-dark); width:40px; height:40px;
  border-radius:12px; background:rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center; }
.char-list { display:flex; gap:16px; padding:10px 20px; overflow-x:auto; scrollbar-width:none; }
.char-list::-webkit-scrollbar { display:none; }
.char-tab { padding:8px 16px; border-radius:20px; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap; background:rgba(255,255,255,0.4); color:var(--text-dark);
  transition:all 0.3s; }
.char-tab.active { background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.1); }

.char-detail { flex:1; display:flex; flex-direction:column; }
.char-portrait { width:100%; height:300px; display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden; }
.char-portrait img { max-height:100%; object-fit:contain; filter:drop-shadow(0 10px 20px rgba(0,0,0,0.15)); }
.char-info-card { background:rgba(255,255,255,0.85); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:24px; margin-top:-20px; z-index:5; }
.char-name-line { margin-bottom:16px; }
.char-role { font-size:12px; color:#9b5de5; font-weight:700; background:rgba(155,93,229,0.1);
  padding:4px 10px; border-radius:20px; display:inline-block; margin-bottom:6px; }
.char-fullname { font-size:24px; font-weight:800; color:var(--text-dark); }
.affinity-section { margin-bottom:20px; }
.affinity-head { display:flex; justify-content:space-between; margin-bottom:6px;
  font-size:13px; color:var(--text-light); font-weight:500; }
.progress-track { height:10px; background:#e2e8f0; border-radius:10px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,#ff9a9e,#fecfef);
  border-radius:10px; transition:width 0.8s; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stat-item { background:rgba(255,255,255,0.5); padding:10px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,0.5); }
.stat-label { font-size:11px; color:var(--text-light); font-weight:600; display:flex;
  align-items:center; gap:6px; margin-bottom:6px; }
.stat-icon-dot { width:16px; height:16px; border-radius:6px; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:8px; }
.stat-bar-track { height:6px; background:rgba(0,0,0,0.05); border-radius:3px; overflow:hidden; }
.stat-bar-fill { height:100%; border-radius:3px; transition:width 0.8s; }

/* === Minigame === */
.minigame-wrap { width:100%; height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:20px;
  background:linear-gradient(160deg,#fff0f5 0%,#e6e6fa 100%); }
.mg-stats { display:flex; justify-content:space-between; width:100%; max-width:360px; margin-bottom:20px;
  background:var(--glass-bg); border:1px solid var(--glass-border); padding:16px 24px;
  border-radius:var(--radius-lg); box-shadow:0 10px 25px rgba(0,0,0,0.05); }
.mg-stat { display:flex; flex-direction:column; align-items:center; }
.mg-stat-label { font-size:12px; color:#888; font-weight:600; margin-bottom:4px; }
.mg-stat-val { font-size:24px; font-weight:800; }

.mg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:360px;
  margin-bottom:20px; }
.mg-card { aspect-ratio:3/4; background:linear-gradient(45deg,#ff9a9e,#fad0c4); border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:32px;
  color:#fff; font-weight:bold; transition:transform 0.3s; box-shadow:0 5px 15px rgba(0,0,0,0.1);
  border:2px solid #fff; }
.mg-card.flipped { background:#fff; color:var(--text-dark); }
.mg-card.matched { background:#f0fff0; opacity:0.6; pointer-events:none; }
.mg-card:active { transform:scale(0.95); }
.mg-msg { font-size:15px; color:#666; font-weight:500; text-align:center; }

/* Quiz minigame */
.quiz-question { font-size:1.1rem; font-weight:600; color:var(--text-dark); margin-bottom:20px;
  text-align:center; padding:20px; background:rgba(255,255,255,0.8); border-radius:var(--radius-md); }
.quiz-options { display:flex; flex-direction:column; gap:12px; width:100%; max-width:360px; }
.quiz-opt { padding:14px 20px; border:2px solid rgba(0,0,0,0.08); border-radius:14px;
  background:rgba(255,255,255,0.9); font-size:1rem; cursor:pointer; transition:all 0.2s; text-align:center; }
.quiz-opt:active { transform:scale(0.97); }
.quiz-opt.correct { background:#d4edda; border-color:#28a745; }
.quiz-opt.wrong { background:#f8d7da; border-color:#dc3545; }

/* Color match */
.color-display { display:flex; gap:12px; margin-bottom:20px; justify-content:center; }
.color-swatch { width:60px; height:60px; border-radius:14px; border:3px solid #fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.color-options { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:360px; }
.color-opt { aspect-ratio:1; border-radius:14px; cursor:pointer; transition:all 0.2s;
  border:3px solid transparent; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.color-opt.selected { border-color:var(--accent-pink); transform:scale(1.05); }

/* Dress up */
.dress-section { margin-bottom:16px; width:100%; max-width:360px; }
.dress-label { font-size:14px; font-weight:600; color:var(--text-dark); margin-bottom:8px; }
.dress-options { display:flex; gap:10px; }
.dress-opt { flex:1; padding:12px; border:2px solid rgba(0,0,0,0.08); border-radius:12px;
  background:rgba(255,255,255,0.9); font-size:13px; cursor:pointer; text-align:center;
  transition:all 0.2s; }
.dress-opt.selected { border-color:var(--accent-pink); background:#fff0f3; }

/* Ball catch canvas */
.catch-canvas { border-radius:var(--radius-md); box-shadow:0 10px 30px rgba(0,0,0,0.1);
  background:#fff; }

/* Minigame result modal */
.mg-modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3);
  display:flex; align-items:center; justify-content:center; z-index:100; }
.mg-modal-box { background:#fff; padding:32px; border-radius:var(--radius-lg); text-align:center;
  width:80%; max-width:320px; box-shadow:0 25px 50px rgba(0,0,0,0.15); }
.mg-modal-title { font-size:1.5rem; font-weight:700; margin-bottom:12px; }
.mg-modal-text { color:var(--text-light); margin-bottom:24px; }

/* === Gallery === */
.gallery-wrap { width:100%; min-height:100%; display:flex; flex-direction:column;
  background:linear-gradient(135deg,#fdfbfd,#f3e7f5); }
.gallery-header { padding:30px 20px 10px; display:flex; justify-content:space-between; align-items:center; }
.gallery-title { font-size:24px; font-weight:700; background:linear-gradient(to right,#d070b9,#9b6bcc);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.gallery-back { font-size:20px; cursor:pointer; color:var(--text-dark); }
.gallery-grid { padding:20px; column-count:2; column-gap:15px; padding-bottom:100px; }
.cg-card { break-inside:avoid; margin-bottom:15px; border-radius:20px; overflow:hidden;
  position:relative; background:#fff; box-shadow:0 8px 32px rgba(155,107,204,0.15);
  cursor:pointer; transition:transform 0.3s; }
.cg-card:active { transform:scale(0.98); }
.cg-card img { width:100%; display:block; object-fit:cover; }
.cg-card.locked img { filter:blur(8px) grayscale(0.5); opacity:0.6; }
.cg-lock-overlay { position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(240,235,245,0.9); display:flex; flex-direction:column; align-items:center;
  justify-content:center; }
.cg-lock-icon { font-size:24px; color:#9b6bcc; margin-bottom:8px; }
.cg-lock-text { font-size:12px; color:#887da1; }
.gallery-progress { position:fixed; bottom:20px; left:20px; right:20px; background:var(--glass-bg);
  border:1px solid var(--glass-border); padding:16px 24px; border-radius:24px;
  box-shadow:0 10px 40px rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:space-between;
  z-index:10; }
.gp-label { font-size:13px; font-weight:600; }
.gp-count { font-size:11px; color:var(--text-light); }
.gp-track { width:120px; height:8px; background:rgba(0,0,0,0.05); border-radius:10px; overflow:hidden; }
.gp-fill { height:100%; background:linear-gradient(90deg,#d070b9,#9b6bcc); border-radius:10px;
  transition:width 1s; }

/* === Saves === */
.saves-wrap { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#fff0f5 0%,#e6e6fa 100%); }
.saves-wrap .settings-inner { display:flex; flex-direction:column; gap:12px; }
.save-slot { display:flex; justify-content:space-between; align-items:center; padding:16px 20px;
  background:rgba(255,255,255,0.85); border-radius:var(--radius-md); border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 4px 12px rgba(0,0,0,0.04); }
.save-info { flex:1; }
.save-slot-num { font-size:14px; font-weight:700; color:var(--text-dark); margin-bottom:2px; }
.save-slot-label { font-size:12px; color:var(--text-light); }
.save-btns { display:flex; gap:8px; }

/* === SMS Contact List === */
.sms-list-wrap { width:100%; height:100%; display:flex; flex-direction:column;
  background:linear-gradient(135deg,#fff0f3,#ffe3e9); }
.contact-list { flex:1; overflow-y:auto; padding:10px 20px; }
.contact-item { display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:rgba(255,255,255,0.85); border-radius:var(--radius-md); margin-bottom:10px;
  cursor:pointer; transition:all 0.2s; border:1px solid rgba(0,0,0,0.03);
  box-shadow:0 4px 12px rgba(0,0,0,0.03); }
.contact-item:active { transform:scale(0.97); background:rgba(255,255,255,1); }
.contact-avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,0.08); }
.contact-avatar img { width:100%; height:100%; object-fit:cover; }
.contact-info { flex:1; min-width:0; }
.contact-name { font-size:16px; font-weight:700; color:var(--text-dark); margin-bottom:2px; }
.contact-preview { font-size:13px; color:var(--text-light); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.contact-heart { font-size:13px; color:var(--accent-pink); font-weight:600; flex-shrink:0; }

/* Chosen action in done period - highlight */
.action-card.done.chosen { opacity:1; background:#f0fff0; border:1px solid #00b894; }
.action-card.done:not(.chosen) .card-icon { filter:grayscale(0.8); }

/* === New Systems CSS === */

/* Weather badge */
.weather-badge { font-size:0.7rem; opacity:0.9; margin-left:6px; }
.weather-tip { font-size:0.7rem; color:rgba(255,255,255,0.8); margin-top:2px; }
.header-right { display:flex; align-items:center; gap:8px; }
.gold-badge { background:linear-gradient(135deg,#FFD700,#FFA500); color:#333; padding:2px 8px; border-radius:10px; font-size:0.75rem; font-weight:600; }
.gold-display { background:linear-gradient(135deg,#FFD700,#FFA500); color:#333; padding:4px 10px; border-radius:12px; font-size:0.8rem; font-weight:600; }
.schedule-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }

/* Shop */
.shop-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }
.shop-title { font-size:1.1rem; font-weight:700; }
.shop-gold { font-size:1rem; font-weight:700; }
.shop-list { padding:12px; display:flex; flex-direction:column; gap:8px; max-height:70vh; overflow-y:auto; }
.shop-item { display:flex; align-items:center; gap:12px; background:#fff; border-radius:12px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,0.08); cursor:pointer; transition:transform 0.2s; }
.shop-item:active { transform:scale(0.97); }
.shop-item.disabled { opacity:0.5; pointer-events:none; }
.shop-item-icon { font-size:1.8rem; }
.shop-item-info { flex:1; }
.shop-item-name { font-weight:600; font-size:0.9rem; }
.shop-item-desc { font-size:0.75rem; color:#888; margin-top:2px; }
.shop-item-right { text-align:right; }
.shop-item-price { font-weight:700; color:#FF8C00; }
.shop-item-owned { font-size:0.7rem; color:#2ecc71; }

/* Routes */
.route-notify { padding:20px; text-align:center; }
.route-title { font-size:1.2rem; font-weight:700; color:#667eea; margin-bottom:16px; }
.route-list { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.route-card { display:flex; align-items:center; gap:12px; background:#fff; border-radius:12px; padding:12px; border-left:4px solid; box-shadow:0 2px 8px rgba(0,0,0,0.08); cursor:pointer; }
.route-card:active { transform:scale(0.97); }
.route-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.route-info { text-align:left; }
.route-name { font-weight:600; }
.route-desc { font-size:0.8rem; color:#888; }

/* Confession */
.conf-panel { padding:20px; text-align:center; min-height:60vh; display:flex; flex-direction:column; justify-content:center; }
.conf-title { font-size:1.3rem; font-weight:700; margin-bottom:16px; background:linear-gradient(135deg,#FF69B4,#FF1493); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.conf-text { font-size:0.9rem; color:#666; margin-bottom:20px; line-height:1.6; }
.conf-choices { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.conf-choice { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px; border-radius:16px; border:3px solid; background:#fff; cursor:pointer; width:120px; transition:transform 0.2s; }
.conf-choice:active { transform:scale(0.95); }
.conf-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; }
.conf-name { font-weight:700; }
.conf-aff { font-size:0.8rem; color:#FF69B4; }
.conf-timer { font-size:1.5rem; font-weight:700; color:#FF69B4; margin-bottom:8px; }
.conf-progress { font-size:0.8rem; color:#888; margin-bottom:12px; }
.conf-phrase { font-size:1.1rem; min-height:40px; margin-bottom:16px; letter-spacing:2px; }
.conf-char { color:#ccc; }
.conf-char.correct { color:#2ecc71; }
.conf-char.wrong { color:#e74c3c; }
.conf-char.current { color:#333; text-decoration:underline; }
.conf-input { width:80%; max-width:300px; padding:12px; border:2px solid #FF69B4; border-radius:12px; font-size:1rem; text-align:center; outline:none; }
.conf-input:focus { border-color:#FF1493; box-shadow:0 0 10px rgba(255,105,180,0.3); }
.conf-result { animation:fadeIn 0.5s ease; }
.conf-emoji { font-size:3rem; margin-bottom:12px; }
.conf-quote { font-style:italic; color:#666; margin:12px 0; font-size:0.95rem; }
.conf-stats { display:flex; gap:16px; justify-content:center; margin:16px 0; }
.conf-stat { background:#f0f0f0; padding:8px 16px; border-radius:20px; font-size:0.85rem; font-weight:600; }

/* Work action card */
.bg-yellow { background:linear-gradient(135deg,#FFD700,#FFA500); }

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