/* ═══ MODAL (커스텀 confirm) ═══ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(26,18,8,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  transition: opacity 0.25s;
}
.modal-sheet {
  background: var(--cream);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(61, 122, 92, 0.13);
  padding: 2.2rem 2rem 1.5rem;
  min-width: 260px;
  max-width: 90vw;
  text-align: center;
  animation: modalPop 0.25s cubic-bezier(0.34,1.2,0.64,1);
}
.modal-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.15rem;
  color: var(--dark);
  margin-bottom: 1.5rem;
}
.modal-actions {
  display: flex; gap: 0.7rem; justify-content: center;
}
@keyframes modalPop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --cream: #faf7f2;
  --warm:  #f5ede0;
  --sand:  #e8d5b7;
  --brown: #8b6f47;
  --dark:  #1a1208;
  --char:  #2d2416;
  --text:  #3d2f1a;
  --muted: #9a8570;
  --accent:#d4562a;
  --green: #3d7a5c;
  --gold:  #c8952a;
  --blue:  #2a6ca8;
  --r: 16px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

body {
  background: var(--cream);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
}

/* ═══ SCREENS ═══ */
.screen{display:none;flex-direction:column;align-items:center;width:100%;min-height:100vh;max-width:480px;margin:0 auto;}
.screen.active{display:flex;}

/* ═══ TITLE SCREEN ═══ */
#title-screen {
  background: var(--dark);
  justify-content: space-between;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.title-bg-pattern {
  position:absolute;inset:0;
  background-image: repeating-linear-gradient(45deg,rgba(255,255,255,0.015) 0,rgba(255,255,255,0.015) 1px,transparent 0,transparent 50%);
  background-size: 30px 30px;
}
.title-hero {
  width:100%;
  padding: 4rem 2rem 2rem;
  position: relative;
  z-index:1;
}
.title-tag {
  display:inline-block;
  font-size:0.65rem;
  letter-spacing:0.25em;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:4px;
  padding:3px 10px;
  margin-bottom:1.5rem;
  text-transform:uppercase;
}
.title-main {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(3rem,12vw,4.5rem);
  line-height: 0.95;
  color: var(--cream);
  margin-bottom:0.75rem;
}
.title-main em { font-style:italic; color:var(--gold); }
.title-sub {
  font-size:0.85rem;
  color:var(--muted);
  letter-spacing:0.05em;
  line-height:1.6;
  max-width:280px;
}

/* floating dish preview */
.title-dish-row {
  display:flex;
  gap:1rem;
  padding:1.5rem 2rem;
  overflow-x:auto;
  scrollbar-width:none;
  position:relative;z-index:1;
}
.title-dish-row::-webkit-scrollbar{display:none;}
.dish-preview-card {
  flex-shrink:0;
  width:100px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r);
  padding:1rem 0.75rem 0.75rem;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  animation: floatCard 3s ease-in-out infinite;
}
.dish-preview-card:nth-child(2){animation-delay:0.5s;}
.dish-preview-card:nth-child(3){animation-delay:1s;}
.dish-preview-card:nth-child(4){animation-delay:1.5s;}
.dish-preview-card:nth-child(5){animation-delay:2s;}
@keyframes floatCard{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.dpc-emoji{font-size:2rem;line-height:1;}
.dpc-name{font-size:0.6rem;color:var(--muted);letter-spacing:0.05em;text-align:center;}

.title-actions {
  width:100%;
  padding:2rem;
  display:flex;flex-direction:column;gap:0.75rem;
  position:relative;z-index:1;
  background: linear-gradient(to top, rgba(26,18,8,1) 60%, transparent);
}

/* ═══ BUTTONS ═══ */
.btn {
  width:100%;
  padding:1rem;
  border:none;border-radius:var(--r);
  font-family:'DM Sans',sans-serif;
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.04em;
  cursor:pointer;
  transition:transform 0.15s,filter 0.15s;
  position:relative;overflow:hidden;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 20px rgba(212,86,42,0.4);}
.btn-secondary{background:rgba(255,255,255,0.07);color:var(--cream);border:1px solid rgba(255,255,255,0.12);}
.btn-light{background:var(--cream);color:var(--dark);}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--sand);}
.btn-green{background:var(--green);color:#fff;box-shadow:0 4px 20px rgba(61,122,92,0.35);}

/* ═══ MODE SELECT ═══ */
#mode-screen {
  background:var(--cream);
  padding:2rem;
  gap:1.5rem;
  justify-content:center;
}
.mode-header{text-align:center;}
.mode-title{font-family:'DM Serif Display',serif;font-size:2rem;color:var(--dark);margin-bottom:0.4rem;}
.mode-sub{font-size:0.8rem;color:var(--muted);}
.mode-cards{width:100%;display:flex;flex-direction:column;gap:1rem;}
.mode-card{
  background:#fff;
  border:1.5px solid var(--sand);
  border-radius:20px;
  padding:1.5rem;
  cursor:pointer;
  transition:all 0.2s;
  position:relative;overflow:hidden;
}
.mode-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 30px rgba(212,86,42,0.12);}
.mode-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,86,42,0.04),transparent);opacity:0;transition:opacity 0.2s;}
.mode-card:hover::before{opacity:1;}
.mc-emoji{font-size:2.5rem;margin-bottom:0.75rem;display:block;}
.mc-name{font-family:'DM Serif Display',serif;font-size:1.3rem;color:var(--dark);margin-bottom:0.3rem;}
.mc-desc{font-size:0.78rem;color:var(--muted);line-height:1.5;}
.mc-badge{
  position:absolute;top:1rem;right:1rem;
  font-size:0.6rem;letter-spacing:0.1em;
  padding:3px 8px;border-radius:20px;
  font-weight:600;
}
.badge-new{background:rgba(212,86,42,0.12);color:var(--accent);}
.badge-hard{background:rgba(139,111,71,0.12);color:var(--brown);}

/* ═══ GAME SCREEN ═══ */
#game-screen{
  background:var(--cream);
  justify-content:flex-start;
  padding:0;
  position:relative;
}

/* Top bar */
.game-topbar{
  width:100%;
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.25rem 0.75rem;
  background:var(--cream);
  border-bottom:1px solid var(--sand);
  flex-shrink:0;
}
.topbar-left{display:flex;flex-direction:column;gap:2px;}
.topbar-stage{font-size:0.6rem;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;}
.topbar-score{font-family:'DM Serif Display',serif;font-size:1.6rem;color:var(--dark);line-height:1;}
.topbar-center{text-align:center;}
.topbar-dish-name{font-size:0.75rem;font-weight:600;color:var(--dark);}
.topbar-right{display:flex;align-items:center;gap:0.5rem;}
.heart-row{display:flex;gap:3px;}
.heart{font-size:0.9rem;transition:all 0.3s;}
.heart.empty{opacity:0.2;filter:grayscale(1);}

/* Progress stars */
.stage-progress{
  width:100%;
  padding:0.5rem 1.25rem;
  display:flex;gap:4px;
  flex-shrink:0;
}
.stage-dot{flex:1;height:3px;border-radius:2px;background:var(--sand);transition:background 0.4s;}
.stage-dot.done{background:var(--accent);}
.stage-dot.current{background:var(--gold);}

/* Cook area */
.cook-area{
  flex:1;
  width:100%;
  display:flex;flex-direction:column;
  align-items:center;
  padding:1rem 1.25rem;
  gap:1rem;
  overflow-y:auto;
}

/* Recipe card */
.recipe-card{
  width:100%;
  background:#fff;
  border-radius:20px;
  border:1.5px solid var(--sand);
  padding:1.25rem;
  display:flex;
  align-items:center;
  gap:1rem;
}
.rc-emoji{font-size:3rem;flex-shrink:0;line-height:1;}
.rc-info{flex:1;}
.rc-name{font-family:'DM Serif Display',serif;font-size:1.2rem;color:var(--dark);}
.rc-desc{font-size:0.72rem;color:var(--muted);margin-top:2px;line-height:1.5;}
.rc-stars{display:flex;gap:2px;margin-top:6px;}
.rc-star{font-size:0.7rem;}

/* Steps container */
.steps-container{width:100%;display:flex;flex-direction:column;gap:0.75rem;}

/* Step card */
.step-card{
  width:100%;
  background:#fff;
  border-radius:16px;
  border:1.5px solid var(--sand);
  overflow:hidden;
  transition:all 0.3s;
  position:relative;
}
.step-card.active{border-color:var(--accent);box-shadow:0 4px 20px rgba(212,86,42,0.15);}
.step-card.done{border-color:var(--green);background:#f6fbf8;}
.step-card.done .step-timing-bar{background:rgba(61,122,92,0.08);}
.step-card.failed{border-color:#d4562a;background:#fff8f6;}
.step-card.locked{opacity:0.45;}

.step-header{padding:0.85rem 1rem 0.5rem;display:flex;align-items:center;gap:0.75rem;}
.step-num{
  width:24px;height:24px;border-radius:50%;
  background:var(--sand);
  font-size:0.65rem;font-weight:700;color:var(--brown);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.step-card.active .step-num{background:var(--accent);color:#fff;}
.step-card.done .step-num{background:var(--green);color:#fff;}
.step-name{font-size:0.82rem;font-weight:600;color:var(--dark);flex:1;}
.step-result-badge{
  font-size:0.62rem;font-weight:700;
  padding:2px 8px;border-radius:20px;
}
.badge-perfect{background:rgba(200,149,42,0.15);color:var(--gold);}
.badge-good{background:rgba(61,122,92,0.12);color:var(--green);}
.badge-bad{background:rgba(212,86,42,0.12);color:var(--accent);}

/* Timing bar */
.step-timing-bar{
  padding:0.5rem 1rem 1rem;
  display:none;
}
.step-card.active .step-timing-bar{display:block;}

.timing-track{
  width:100%;
  height:36px;
  background:var(--warm);
  border-radius:8px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  border:1.5px solid var(--sand);
}
/* perfect zone */
.zone-perfect{
  position:absolute;
  top:0;bottom:0;
  background:rgba(200,149,42,0.25);
  border-left:2px solid rgba(200,149,42,0.5);
  border-right:2px solid rgba(200,149,42,0.5);
}
/* good zone */
.zone-good{
  position:absolute;
  top:0;bottom:0;
  background:rgba(61,122,92,0.15);
}
/* needle */
.timing-needle{
  position:absolute;
  top:0;bottom:0;
  width:3px;
  background:var(--accent);
  border-radius:2px;
  transform:translateX(-50%);
  transition:left 0.016s linear;
  box-shadow:0 0 8px rgba(212,86,42,0.5);
}
.timing-needle::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:11px;height:11px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid #fff;
}
/* zone labels */
.zone-label{
  position:absolute;
  top:50%;transform:translateY(-50%);
  font-size:0.5rem;font-weight:700;letter-spacing:0.1em;
  color:rgba(0,0,0,0.3);pointer-events:none;
}

.tap-instruction{
  margin-top:0.5rem;
  text-align:center;
  font-size:0.7rem;color:var(--muted);
  letter-spacing:0.05em;
}
.tap-instruction strong{color:var(--accent);}

/* Multitask warning */
.multitask-warning{
  width:100%;
  background:rgba(200,149,42,0.1);
  border:1.5px solid rgba(200,149,42,0.3);
  border-radius:12px;
  padding:0.6rem 1rem;
  font-size:0.72rem;
  color:var(--gold);
  text-align:center;
  font-weight:500;
  display:none;
}
.multitask-warning.show{display:block;}

/* Bottom action */
.game-bottom{
  width:100%;
  padding:1rem 1.25rem;
  background:var(--cream);
  border-top:1px solid var(--sand);
  flex-shrink:0;
}

/* ═══ RESULT OVERLAY ═══ */
.result-overlay{
  position:fixed;inset:0;
  background:rgba(26,18,8,0.75);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  z-index:100;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s;
}
.result-overlay.show{opacity:1;pointer-events:all;}
.result-modal{
  width:88%;max-width:360px;
  background:var(--cream);
  border-radius:24px;
  overflow:hidden;
  transform:translateY(40px) scale(0.95);
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 40px 80px rgba(0,0,0,0.4);
}
.result-overlay.show .result-modal{transform:translateY(0) scale(1);}

.result-hero{
  padding:2rem;
  text-align:center;
  background:var(--dark);
  position:relative;
}
.result-emoji{font-size:4rem;display:block;margin-bottom:0.75rem;animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;}
@keyframes popIn{from{transform:scale(0);}to{transform:scale(1);}}
.result-verdict{font-family:'DM Serif Display',serif;font-size:1.8rem;color:var(--cream);}
.result-dish{font-size:0.8rem;color:var(--muted);margin-top:4px;}
.result-stars{display:flex;justify-content:center;gap:6px;margin-top:1rem;}
.res-star{font-size:1.6rem;opacity:0.2;transition:opacity 0.3s,transform 0.3s;}
.res-star.lit{opacity:1;animation:starPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;}
@keyframes starPop{from{transform:scale(0) rotate(-30deg);}to{transform:scale(1) rotate(0);}}

.result-stats{padding:1.25rem;display:flex;flex-direction:column;gap:0.6rem;}
.res-stat{display:flex;justify-content:space-between;align-items:center;padding:0.6rem 0.75rem;background:#fff;border-radius:10px;border:1px solid var(--sand);}
.res-stat-label{font-size:0.75rem;color:var(--muted);}
.res-stat-val{font-size:0.9rem;font-weight:700;color:var(--dark);}
.res-stat-val.gold{color:var(--gold);}
.res-stat-val.green{color:var(--green);}

.result-actions{padding:0 1.25rem 1.5rem;display:flex;flex-direction:column;gap:0.6rem;}

/* ═══ HUB SCREEN ═══ */
#hub-screen{
  background:var(--cream);
  padding:0;
  justify-content:flex-start;
}
.hub-topbar{
  width:100%;
  padding:1.5rem 1.25rem 1rem;
  display:flex;justify-content:space-between;align-items:flex-start;
  background:var(--dark);
}
.hub-greeting{font-size:0.7rem;letter-spacing:0.1em;color:var(--muted);margin-bottom:4px;}
.hub-chef-name{font-family:'DM Serif Display',serif;font-size:1.6rem;color:var(--cream);}
.hub-currency{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:6px 14px;}
.hub-coin{font-size:1rem;}
.hub-coin-val{font-size:0.85rem;font-weight:700;color:var(--gold);}

.hub-tabs{
  display:flex;width:100%;
  background:var(--dark);
  border-bottom:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
}
.hub-tab{
  flex:1;padding:0.75rem 0.5rem;
  font-size:0.65rem;font-weight:600;letter-spacing:0.08em;
  color:var(--muted);text-align:center;
  border:none;background:none;cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all 0.2s;text-transform:uppercase;
}
.hub-tab.active{color:var(--cream);border-bottom-color:var(--accent);}

.hub-content{
  flex:1;
  width:100%;
  overflow-y:auto;
  padding:1.25rem;
  max-height:calc(100vh - 170px); /* 상단바/탭바 높이 감안 */
  scrollbar-width:thin;
  scrollbar-color:var(--sand) transparent;
}

/* Stage list */
.stage-section-title{
  font-family:'DM Serif Display',serif;font-size:1.1rem;color:var(--dark);
  margin-bottom:0.75rem;
  display:flex;align-items:center;gap:0.5rem;
}
.section-tag{font-size:0.6rem;padding:2px 8px;border-radius:20px;background:var(--sand);color:var(--brown);font-family:'DM Sans',sans-serif;font-weight:600;}

.stage-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.75rem;
  margin-bottom:1.5rem;
  max-height:60vh;
  overflow-y:auto;
  padding-right:4px;
}
.stage-card{
  background:#fff;border:1.5px solid var(--sand);border-radius:16px;
  padding:1rem;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden;
}
.stage-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(212,86,42,0.1);}
.stage-card.locked{opacity:0.5;cursor:not-allowed;}
.stage-card.locked:hover{transform:none;border-color:var(--sand);box-shadow:none;}
.sc-emoji{font-size:1.8rem;margin-bottom:0.4rem;}
.sc-name{font-size:0.78rem;font-weight:600;color:var(--dark);margin-bottom:2px;}
.sc-stars{display:flex;gap:2px;margin-bottom:4px;}
.sc-star{font-size:0.65rem;opacity:0.2;}
.sc-star.lit{opacity:1;}
.sc-lock{position:absolute;top:8px;right:8px;font-size:0.75rem;color:var(--muted);}

/* Upgrade cards */
.upgrade-grid{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  max-height:60vh;
  overflow-y:auto;
  padding-right:4px;
}
.upgrade-card{
  background:#fff;border:1.5px solid var(--sand);border-radius:16px;
  padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;
}
.uc-icon{font-size:2rem;flex-shrink:0;}
.uc-info{flex:1;}
.uc-name{font-size:0.85rem;font-weight:600;color:var(--dark);}
.uc-desc{font-size:0.7rem;color:var(--muted);margin-top:2px;}
.uc-level{font-size:0.6rem;color:var(--accent);font-weight:700;margin-top:4px;}
.uc-btn{
  flex-shrink:0;
  background:var(--accent);color:#fff;
  border:none;border-radius:10px;
  padding:0.5rem 0.75rem;
  font-size:0.7rem;font-weight:700;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;
  transition:all 0.15s;
}
.uc-btn:active{transform:scale(0.95);}
.uc-btn.maxed{background:var(--sand);color:var(--muted);cursor:default;}
.uc-cost{font-size:0.6rem;opacity:0.85;}

/* Codex */
.codex-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0.6rem;
  max-height:60vh;
  overflow-y:auto;
  padding-right:4px;
}
.codex-item{
  aspect-ratio:1;background:#fff;border:1.5px solid var(--sand);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:1.5rem;cursor:pointer;transition:all 0.2s;position:relative;
}
.codex-item:hover{transform:scale(1.06);border-color:var(--accent);}
.codex-item.locked{filter:grayscale(1);opacity:0.35;}
.codex-item .codex-name{font-size:0.5rem;color:var(--muted);text-align:center;line-height:1.2;}
.codex-new-dot{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--accent);}

/* Mini-game modal */
.minigame-overlay{
  position:fixed;inset:0;background:rgba(26,18,8,0.8);backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:150;opacity:0;pointer-events:none;transition:opacity 0.3s;
}
.minigame-overlay.show{opacity:1;pointer-events:all;}
.minigame-sheet{
  width:100%;max-width:480px;
  background:var(--cream);border-radius:24px 24px 0 0;
  padding:0 1.25rem 2rem;
  transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.34,1.2,0.64,1);
  max-height:85vh;overflow-y:auto;
}
.minigame-overlay.show .minigame-sheet{transform:translateY(0);}
.minigame-handle{width:36px;height:4px;border-radius:2px;background:var(--sand);margin:1rem auto 1.5rem;}
.mg-title{font-family:'DM Serif Display',serif;font-size:1.4rem;color:var(--dark);margin-bottom:0.4rem;}
.mg-desc{font-size:0.78rem;color:var(--muted);margin-bottom:1.5rem;line-height:1.6;}
.mg-basket{
  width:100%;height:180px;
  background:var(--warm);border-radius:16px;border:2px solid var(--sand);
  position:relative;overflow:hidden;margin-bottom:1rem;cursor:pointer;
}
.mg-ingredient{
  position:absolute;font-size:1.8rem;
  animation:mgFall linear forwards;
  cursor:pointer;
}
@keyframes mgFall{from{top:-40px;}to{top:200px;}}
.mg-basket-icon{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  font-size:2rem;transition:left 0.1s;
}
.mg-score-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.mg-score-label{font-size:0.75rem;color:var(--muted);}
.mg-score-val{font-family:'DM Serif Display',serif;font-size:1.5rem;color:var(--dark);}
.mg-timer-bar{width:100%;height:6px;background:var(--sand);border-radius:3px;overflow:hidden;margin-bottom:1.5rem;}
.mg-timer-fill{height:100%;background:var(--accent);border-radius:3px;transition:width 0.1s linear;}

/* Event banner */
.event-banner{
  width:100%;background:linear-gradient(135deg,var(--gold),var(--accent));
  border-radius:16px;padding:1rem 1.25rem;
  display:flex;align-items:center;gap:1rem;margin-bottom:1rem;
  cursor:pointer;transition:transform 0.2s;
}
.event-banner:hover{transform:translateY(-2px);}
.eb-emoji{font-size:2rem;flex-shrink:0;}
.eb-text{flex:1;}
.eb-title{font-weight:700;color:#fff;font-size:0.9rem;}
.eb-sub{font-size:0.72rem;color:rgba(255,255,255,0.8);margin-top:2px;}
.eb-arrow{color:rgba(255,255,255,0.7);font-size:1.1rem;}

/* Endless mode */
.endless-hud{
  width:100%;background:var(--dark);
  padding:0.75rem 1.25rem;
  display:flex;justify-content:space-between;align-items:center;
  flex-shrink:0;
}
.endless-label{font-size:0.6rem;letter-spacing:0.15em;color:var(--muted);text-transform:uppercase;}
.endless-val{font-family:'DM Serif Display',serif;font-size:1.4rem;color:var(--cream);}
.endless-streak{color:var(--gold);}

/* toast */
.toast{
  position:fixed;bottom:5rem;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--dark);color:var(--cream);
  font-size:0.78rem;font-weight:500;
  padding:0.6rem 1.2rem;border-radius:20px;
  opacity:0;transition:all 0.3s;
  z-index:200;white-space:nowrap;
  pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* floating score */
.float-score{
  position:fixed;pointer-events:none;z-index:180;
  font-family:'DM Serif Display',serif;font-size:1.2rem;
  animation:floatUp2 0.9s ease forwards;
}
@keyframes floatUp2{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-60px);}}

/* Sound btn */
.snd-btn{background:none;border:none;cursor:pointer;font-size:1.1rem;padding:4px;line-height:1;}

/* ═══ 오늘 뭐 먹을까 ═══ */
.wfd-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--gold), var(--accent));
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(212,86,42,0.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: fabPulse 3s ease-in-out infinite;
}
.wfd-fab:active { transform: scale(0.93); }
@keyframes fabPulse {
  0%,100% { box-shadow: 0 6px 24px rgba(212,86,42,0.45); }
  50%      { box-shadow: 0 6px 32px rgba(212,86,42,0.7), 0 0 0 8px rgba(212,86,42,0.08); }
}

.wfd-overlay {
  position: fixed; inset: 0;
  background: rgba(26,18,8,0.82);
  backdrop-filter: blur(10px);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.wfd-overlay.show { opacity: 1; pointer-events: all; }

.wfd-sheet {
  width: 100%; max-width: 480px;
  background: var(--cream);
  border-radius: 28px 28px 0 0;
  padding: 0 1.5rem 2.5rem;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.34,1.2,0.64,1);
  max-height: 92vh;
  overflow-y: auto;
}
.wfd-overlay.show .wfd-sheet { transform: translateY(0); }
.wfd-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--sand); margin: 1.1rem auto 1.6rem; }

.wfd-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.35rem;
}
.wfd-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem; color: var(--dark); line-height: 1.1;
}
.wfd-close {
  background: var(--warm); border: none; border-radius: 50%;
  width: 34px; height: 34px;
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: background 0.15s;
}
.wfd-close:hover { background: var(--sand); }
.wfd-sub { font-size: 0.78rem; color: var(--muted); margin-bottom: 1.5rem; }

/* Spin / shuffle button */
.wfd-spin-btn {
  width: 100%; padding: 0.9rem;
  border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--gold), var(--accent));
  color: #fff; font-family: 'DM Serif Display', serif;
  font-size: 1rem; letter-spacing: 0.03em;
  cursor: pointer; margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(212,86,42,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative; overflow: hidden;
}
.wfd-spin-btn:active { transform: scale(0.97); }
.wfd-spin-btn.spinning { animation: btnShake 0.5s ease; }
@keyframes btnShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-4px) rotate(-1deg); }
  40%      { transform: translateX(4px) rotate(1deg); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

/* Cards row */
.wfd-cards {
  display: flex; gap: 0.75rem;
  margin-bottom: 1.5rem;
  perspective: 600px;
}
.wfd-card {
  flex: 1;
  background: #fff;
  border: 2px solid var(--sand);
  border-radius: 18px;
  padding: 1rem 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  transform-origin: center bottom;
}
.wfd-card:hover {
  border-color: var(--accent);
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 10px 28px rgba(212,86,42,0.15);
}
.wfd-card.selected {
  border-color: var(--gold);
  background: linear-gradient(160deg, #fffdf5, #fff8e8);
  box-shadow: 0 8px 30px rgba(200,149,42,0.25);
  transform: translateY(-6px) scale(1.05);
}
.wfd-card.unselected {
  opacity: 0.45;
  transform: scale(0.96);
}
.wfd-card.flip-in { animation: cardFlip 0.45s ease both; }
@keyframes cardFlip {
  0%   { transform: rotateY(90deg) scale(0.8); opacity: 0; }
  100% { transform: rotateY(0deg) scale(1);   opacity: 1; }
}
.wfd-card-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 0.5rem; display: block; }
.wfd-card-name  { font-family: 'DM Serif Display', serif; font-size: 0.85rem; color: var(--dark); margin-bottom: 0.3rem; }
.wfd-card-ch    { font-size: 0.58rem; color: var(--muted); letter-spacing: 0.08em; }
.wfd-card-diff  { font-size: 0.62rem; margin-top: 4px; }
.wfd-card-lock  {
  position: absolute; top: 7px; right: 7px;
  font-size: 0.65rem; background: var(--warm);
  border-radius: 20px; padding: 2px 6px;
  color: var(--muted);
}

/* Detail panel */
.wfd-detail {
  background: var(--dark);
  border-radius: 20px;
  padding: 1.4rem;
  transform: translateY(10px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.34,1.2,0.64,1);
  pointer-events: none;
  display: none;
}
.wfd-detail.show {
  transform: translateY(0); opacity: 1;
  pointer-events: all; display: block;
}
.wfd-detail-top {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;
}
.wfd-detail-emoji { font-size: 3rem; flex-shrink: 0; }
.wfd-detail-info { flex: 1; }
.wfd-detail-name { font-family: 'DM Serif Display', serif; font-size: 1.2rem; color: var(--cream); }
.wfd-detail-desc { font-size: 0.72rem; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.wfd-detail-meta {
  display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap;
}
.wfd-meta-tag {
  font-size: 0.58rem; padding: 2px 8px; border-radius: 20px; font-weight: 600;
  letter-spacing: 0.06em;
}
.meta-diff1 { background: rgba(61,122,92,0.25); color: #6ee7b7; }
.meta-diff2 { background: rgba(200,149,42,0.25); color: #fcd34d; }
.meta-diff3 { background: rgba(212,86,42,0.25); color: #fca5a5; }
.meta-chapter { background: rgba(255,255,255,0.08); color: var(--muted); }
.meta-special { background: rgba(212,86,42,0.35); color: #fca5a5; }
.meta-cleared { background: rgba(61,122,92,0.25); color: #6ee7b7; }

.wfd-ing-title {
  font-size: 0.65rem; letter-spacing: 0.18em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 0.85rem;
}
.wfd-ing-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0.5rem;
  margin-bottom: 1rem;
}
.wfd-ing-item {
  background: rgba(255,255,255,0.05);
  border-radius: 10px; padding: 0.55rem 0.3rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.06);
}
.wfd-ing-emoji { font-size: 1.3rem; display: block; line-height: 1; margin-bottom: 3px; }
.wfd-ing-name  { font-size: 0.52rem; color: var(--muted); line-height: 1.3; }

.wfd-steps-title {
  font-size: 0.65rem; letter-spacing: 0.18em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 0.85rem;
}
.wfd-steps-list {
  display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.25rem;
}
.wfd-step-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.wfd-step-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wfd-step-name { font-size: 0.75rem; color: var(--cream); }

.wfd-action-row {
  display: flex; gap: 0.6rem;
}
.wfd-play-btn {
  flex: 1; padding: 0.85rem;
  border: none; border-radius: 12px;
  background: var(--accent); color: #fff;
  font-family: 'DM Serif Display', serif;
  font-size: 0.95rem; cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 16px rgba(212,86,42,0.35);
}
.wfd-play-btn:active { transform: scale(0.97); }
.wfd-respin-btn {
  padding: 0.85rem 1rem;
  border: 1.5px solid rgba(255,255,255,0.15); border-radius: 12px;
  background: transparent; color: var(--muted);
  font-size: 0.85rem; cursor: pointer;
  transition: all 0.15s;
}
.wfd-respin-btn:hover { background: rgba(255,255,255,0.06); color: var(--cream); }

.audio-pulse{
  display:flex;gap:3px;align-items:flex-end;height:16px;
}
.ap-bar{
  width:3px;border-radius:2px;background:var(--accent);opacity:0.6;
  animation:audioPulse 0.8s ease-in-out infinite;
}
.ap-bar:nth-child(2){animation-delay:0.1s;height:60%;}
.ap-bar:nth-child(3){animation-delay:0.2s;height:100%;}
.ap-bar:nth-child(4){animation-delay:0.3s;height:70%;}
.ap-bar:nth-child(5){animation-delay:0.15s;height:40%;}
@keyframes audioPulse{0%,100%{transform:scaleY(0.4);}50%{transform:scaleY(1);}}

/* scrollbar */
.hub-content::-webkit-scrollbar{width:4px;}
.hub-content::-webkit-scrollbar-track{background:transparent;}
.hub-content::-webkit-scrollbar-thumb{background:var(--sand);border-radius:2px;}

.stage-grid::-webkit-scrollbar,
.upgrade-grid::-webkit-scrollbar,
.codex-grid::-webkit-scrollbar {
  width:4px;
}
.stage-grid::-webkit-scrollbar-thumb,
.upgrade-grid::-webkit-scrollbar-thumb,
.codex-grid::-webkit-scrollbar-thumb {
  background:var(--sand);
  border-radius:2px;
}

/* Special event flash */
.event-flash{
  position:fixed;inset:0;background:rgba(200,149,42,0.15);
  pointer-events:none;z-index:50;
  animation:flashAnim 0.5s ease forwards;
}
@keyframes flashAnim{0%{opacity:1;}100%{opacity:0;}}