:root {
  --bg: #0b1a2e;
  --panel: rgba(0, 0, 0, 0.35);
  --wood: linear-gradient(90deg, #4a2a12, #7a4a22 40%, #8f5a2c 50%, #7a4a22 60%, #4a2a12);
  --wood-h: linear-gradient(180deg, #8f5a2c, #5a3418);
  --text: #f4ecd8;
  --muted: #b9ae95;
  --gold: #ffd36b;
  --good: #7dff8a;
  --bad: #ff7a7a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 20% 30%, #16345a 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 80%, #10294a 0%, transparent 55%);
  color: var(--text);
  font-family: 'Merriweather', Georgia, serif;
  font-size: 13px;
  overflow: hidden;
  user-select: none;
}
body.elder1 { background-color: #2a1220; }
body.elder2 { background-color: #3a0f18; }
body.elder3 { background-color: #4a0a0a; }
button { font-family: inherit; color: inherit; cursor: pointer; }
h2, h3, .title, #bakeryName, #cookieCount, .storeTitle { font-family: 'Kavoon', 'Merriweather', serif; font-weight: normal; }
b { color: var(--gold); font-weight: 700; }

#game { display: grid; grid-template-columns: minmax(300px, 30%) 1fr minmax(320px, 340px); height: 100vh; }
#game > section { position: relative; overflow: hidden; display: flex; flex-direction: column; }
#middle, #right { border-left: 12px solid transparent; border-image: var(--wood) 1; }

/* ---------- left ---------- */
#left { align-items: center; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,0.06), transparent 50%); }
#bakeryName {
  width: 100%; text-align: center; padding: 8px; font-size: 22px; background: rgba(0,0,0,0.4);
  text-shadow: 0 2px 4px #000; cursor: pointer;
}
#cookieCount { text-align: center; padding: 10px 4px 0; font-size: 26px; text-shadow: 0 2px 4px #000, 0 0 10px #000; z-index: 3; }
#cps { font-size: 15px; color: var(--text); opacity: 0.9; }
#cps.withered { color: #e9a0ff; }
#cookieWrap { position: relative; width: 300px; height: 300px; margin: 18px 0 6px; flex-shrink: 0; z-index: 2; }
#cookieGlow {
  position: absolute; inset: -60px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 10deg, rgba(255,240,200,.18) 10deg 20deg, transparent 20deg 40deg,
    rgba(255,240,200,.18) 40deg 50deg, transparent 50deg 70deg, rgba(255,240,200,.18) 70deg 80deg, transparent 80deg 100deg,
    rgba(255,240,200,.18) 100deg 110deg, transparent 110deg 130deg, rgba(255,240,200,.18) 130deg 140deg, transparent 140deg 160deg,
    rgba(255,240,200,.18) 160deg 170deg, transparent 170deg 190deg, rgba(255,240,200,.18) 190deg 200deg, transparent 200deg 220deg,
    rgba(255,240,200,.18) 220deg 230deg, transparent 230deg 250deg, rgba(255,240,200,.18) 250deg 260deg, transparent 260deg 280deg,
    rgba(255,240,200,.18) 280deg 290deg, transparent 290deg 310deg, rgba(255,240,200,.18) 310deg 320deg, transparent 320deg 340deg,
    rgba(255,240,200,.18) 340deg 350deg, transparent 350deg);
  mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: spin 30s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#bigCookie {
  position: absolute; inset: 25px; border: none; background: none; padding: 0; border-radius: 50%;
  transition: transform .08s; filter: drop-shadow(0 8px 12px rgba(0,0,0,.6));
}
#bigCookie:hover { transform: scale(1.04); }
#bigCookie:active, #bigCookie.pressed { transform: scale(0.97); }
#bigCookie svg { width: 100%; height: 100%; display: block; }
#floaters { position: absolute; inset: -40px; pointer-events: none; overflow: visible; }
.floater {
  position: absolute; font-weight: bold; font-size: 18px; pointer-events: none; white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 4px #000; animation: floatUp 1.2s ease-out forwards; transform: translate(-50%, -50%);
}
.floater small { display: block; font-size: 10px; text-align: center; opacity: .85; }
@keyframes floatUp { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -70px; } }
.crumb { position: absolute; font-size: 14px; pointer-events: none; animation: crumb .9s ease-in forwards; }
@keyframes crumb { to { transform: translate(var(--dx), 120px) rotate(var(--r)); opacity: 0; } }

.wrinkler {
  position: absolute; width: 44px; height: 74px; left: 50%; top: 50%; cursor: pointer; z-index: 3;
  transform-origin: 50% 50%;
}
.wrinkler .body {
  width: 100%; height: 100%; border-radius: 50% 50% 45% 45% / 35% 35% 65% 65%;
  background: radial-gradient(ellipse at 50% 30%, #f6e2f0, #c9a4c0 60%, #8e6286);
  box-shadow: inset 0 -6px 10px rgba(80,30,70,.5), 0 2px 6px rgba(0,0,0,.5);
  position: relative; animation: wobble 1.6s ease-in-out infinite;
}
.wrinkler .body::before, .wrinkler .body::after {
  content: ''; position: absolute; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: #2b0a20;
}
.wrinkler .body::before { left: 11px; } .wrinkler .body::after { right: 11px; }
.wrinkler.hit .body { animation: hit .2s; }
@keyframes wobble { 50% { transform: scaleY(1.06) scaleX(0.95); } }
@keyframes hit { 50% { transform: scale(0.85) rotate(8deg); filter: brightness(1.4); } }

#buffs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 34px; z-index: 3; }
.buff {
  background: rgba(0,0,0,.6); border: 2px solid var(--gold); border-radius: 8px; padding: 3px 8px; font-size: 12px;
  position: relative; overflow: hidden;
}
.buff.bad { border-color: var(--bad); }
.buff .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gold); }
.buff.bad .bar { background: var(--bad); }

#milk { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 1; transition: height 2s, background 2s; pointer-events: none; opacity: .85; }
#milkWave {
  position: absolute; top: -12px; left: 0; right: 0; height: 14px;
  background: radial-gradient(circle at 10px -4px, transparent 12px, currentColor 13px) repeat-x;
  background-size: 20px 14px; animation: wave 4s linear infinite;
}
@keyframes wave { to { background-position: 40px 0; } }

#chatBox {
  position: absolute; left: 8px; right: 8px; bottom: 8px; height: 30%; min-height: 150px; z-index: 4;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; display: flex; flex-direction: column;
}
#chatLog { flex: 1; overflow-y: auto; padding: 6px 8px; font-size: 12px; user-select: text; }
#chatLog .msg { margin: 2px 0; word-wrap: break-word; }
#chatLog .sys { color: var(--muted); font-style: italic; }
#chatLog .buy { color: #9ec6ff; opacity: .75; font-size: 11px; }
#chatLog .time { color: #777; font-size: 10px; margin-right: 4px; }
#chatInput {
  width: 100%; border: none; border-top: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
  color: var(--text); padding: 7px 8px; font-family: inherit; border-radius: 0 0 8px 8px; outline: none;
}

/* ---------- middle ---------- */
#ticker {
  height: 46px; display: flex; align-items: center; justify-content: center; padding: 0 16px; text-align: center;
  background: rgba(0,0,0,.45); font-style: italic; font-size: 14px; border-bottom: 2px solid #5a3418;
}
#tickerText { transition: opacity .4s; }
#tabs { display: flex; gap: 4px; padding: 6px; background: rgba(0,0,0,.3); flex-wrap: wrap; }
#tabs button, .btn {
  background: linear-gradient(#5d3a1a, #3d2410); border: 1px solid #8f5a2c; border-radius: 5px; padding: 5px 12px; font-size: 13px;
}
#tabs button:hover, .btn:hover { filter: brightness(1.25); }
#tabs button.active { background: linear-gradient(#a06a35, #6a4019); }
#legacyBtn { margin-left: auto; }
#legacyBtn.ready { box-shadow: 0 0 10px var(--gold); color: var(--gold); }
#voteBanner {
  margin: 6px; padding: 10px; background: rgba(90, 60, 150, .6); border: 2px solid #b39ddb; border-radius: 8px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#panel { flex: 1; overflow-y: auto; padding: 8px; }
.row {
  position: relative; height: 64px; margin-bottom: 4px; border-radius: 4px; overflow: hidden;
  display: flex; align-items: center; padding-left: 8px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), inset 0 3px 0 rgba(255,255,255,.15);
}
.row .label { position: absolute; right: 8px; top: 4px; font-size: 11px; color: #222; font-weight: bold; background: rgba(255,255,255,.55); padding: 1px 6px; border-radius: 8px; }
.row .icons { font-size: 24px; letter-spacing: -6px; white-space: nowrap; overflow: hidden; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.row .icons span { display: inline-block; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }

.panelBox { background: var(--panel); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.panelBox h3 { margin: 0 0 8px; font-size: 20px; color: var(--gold); }
.statLine { padding: 2px 0; }
.statLine .k { color: var(--muted); }
table.players { width: 100%; border-collapse: collapse; }
table.players td, table.players th { padding: 4px 6px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); }
table.players th { color: var(--muted); font-weight: normal; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.offline { opacity: .45; }
.achGrid { display: flex; flex-wrap: wrap; gap: 4px; }
.ach {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: rgba(255,255,255,.08); border-radius: 6px; border: 2px solid transparent;
}
.ach.won { background: rgba(255, 211, 107, .18); border-color: var(--gold); }
.ach:not(.won) { filter: grayscale(1) brightness(.45); }
input.text, select {
  background: rgba(255,255,255,.08); color: var(--text); border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 5px 7px; font-family: inherit;
}
#tinyCookie { font-size: 9px; cursor: pointer; }

/* ---------- right / store ---------- */
#right { background: rgba(0,0,0,.25); }
#queueBox { background: rgba(0,0,0,.45); border-bottom: 2px solid #5a3418; padding: 6px 8px; max-height: 32%; display: flex; flex-direction: column; }
#queueBox h3 { margin: 0 0 4px; font-size: 15px; }
#queueCount { color: var(--muted); font-size: 12px; font-family: 'Merriweather', serif; }
#queue { overflow-y: auto; }
#queue:empty::after { content: 'Nothing queued — buy something! Purchases wait here in order until the team can afford them.'; color: var(--muted); font-size: 11px; font-style: italic; }
.qItem { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; padding: 4px; border-radius: 4px; margin-bottom: 3px; background: rgba(255,255,255,.05); font-size: 12px; }
.qItem.head { background: rgba(255, 211, 107, .12); }
.qItem .qBar { grid-column: 1 / -1; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.qItem .qBar div { height: 100%; background: var(--good); transition: width .25s; }
.qItem .qMeta { color: var(--muted); font-size: 11px; }
.qItem button { background: rgba(255,255,255,.1); border: none; border-radius: 3px; padding: 1px 6px; font-size: 11px; }
.storeTitle { text-align: center; font-size: 22px; padding: 4px; background: var(--wood-h); text-shadow: 0 2px 2px #000; }
#upgrades, #tech { display: flex; flex-wrap: wrap; gap: 3px; padding: 5px; background: rgba(0,0,0,.35); }
#upgrades { min-height: 58px; max-height: 128px; overflow-y: auto; }
#tech:empty { display: none; }
#tech { border-top: 1px dashed rgba(255,255,255,.15); }
.upg {
  width: 48px; height: 48px; border-radius: 6px; position: relative; display: flex; align-items: center; justify-content: center;
  font-size: 26px; cursor: pointer; border: 2px solid rgba(0,0,0,.5); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
  opacity: .5; filter: saturate(.6);
}
.upg.afford { opacity: 1; filter: none; }
.upg.queued { outline: 2px dashed var(--good); outline-offset: -2px; }
.upg:hover { transform: scale(1.06); }
.upg .badge { position: absolute; right: -2px; bottom: -4px; font-size: 16px; }
#buyMode { display: flex; gap: 3px; padding: 5px; background: rgba(0,0,0,.4); align-items: center; }
#buyMode button { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: 3px 10px; }
#buyMode button.active { background: rgba(255, 211, 107, .3); border-color: var(--gold); }
#buyMode .sep { flex: 1; }
#buildings { flex: 1; overflow-y: auto; }
.bld {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 6px; padding: 4px 8px; height: 64px;
  background: linear-gradient(90deg, rgba(160, 110, 60, .55), rgba(110, 70, 35, .55)); border-bottom: 2px solid rgba(0,0,0,.4);
  cursor: pointer; opacity: .55;
}
.bld.afford { opacity: 1; }
.bld.afford:hover { filter: brightness(1.2); }
.bld.sell { background: linear-gradient(90deg, rgba(160, 60, 60, .55), rgba(110, 35, 35, .55)); opacity: 1; }
.bld.mystery { cursor: default; opacity: .35; }
.bld .bIcon { font-size: 38px; text-align: center; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.bld .bName { font-family: 'Kavoon', serif; font-size: 19px; text-shadow: 0 1px 2px #000; }
.bld .bPrice { font-size: 12px; color: var(--good); }
.bld:not(.afford):not(.sell) .bPrice { color: var(--bad); }
.bld .bAmt { font-family: 'Kavoon', serif; font-size: 34px; color: rgba(255,255,255,.35); }

/* ---------- overlays ---------- */
#tooltip {
  position: fixed; z-index: 100; max-width: 340px; background: #120b06; border: 2px solid #8f5a2c; border-radius: 6px;
  padding: 8px 10px; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.7); font-size: 12px; line-height: 1.45;
}
#tooltip .tName { font-family: 'Kavoon', serif; font-size: 17px; }
#tooltip .tTag { float: right; font-size: 10px; color: var(--muted); margin-left: 8px; }
#tooltip .tPrice { color: var(--good); }
#tooltip .tPrice.no { color: var(--bad); }
#tooltip hr { border: none; border-top: 1px solid rgba(255,255,255,.15); margin: 6px 0; }
#tooltip .tFlavor { color: var(--muted); font-style: italic; }

#goldenLayer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.goldenCookie {
  position: absolute; width: 90px; height: 90px; pointer-events: auto; cursor: pointer; border: none; background: none; padding: 0;
  animation: goldPulse 2s ease-in-out infinite, goldIn 1s ease-out; transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 14px rgba(255, 215, 80, .9));
}
.goldenCookie.wrath { filter: drop-shadow(0 0 14px rgba(255, 40, 40, .9)); }
.goldenCookie svg { width: 100%; height: 100%; }
@keyframes goldPulse { 50% { transform: translate(-50%, -50%) rotate(8deg) scale(1.08); } }
@keyframes goldIn { from { opacity: 0; } }
.goldBurst { position: absolute; font-size: 22px; font-weight: bold; color: var(--gold); text-shadow: 0 0 6px #000; animation: floatUp 2.5s forwards; transform: translate(-50%, -50%); white-space: nowrap; }

#notifs { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.notif {
  background: rgba(20, 12, 6, .95); border: 2px solid var(--gold); border-radius: 8px; padding: 8px 14px; min-width: 260px; max-width: 460px;
  display: flex; gap: 10px; align-items: center; animation: notifIn .3s ease-out; box-shadow: 0 6px 16px rgba(0,0,0,.6);
}
.notif .nIcon { font-size: 28px; }
.notif .nTitle { font-family: 'Kavoon', serif; font-size: 15px; color: var(--gold); }
.notif.out { animation: notifOut .5s forwards; }
@keyframes notifIn { from { transform: translateY(-20px); opacity: 0; } }
@keyframes notifOut { to { transform: translateY(-20px); opacity: 0; } }

#ascendOverlay {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto; padding: 30px;
  background: radial-gradient(circle at 50% 20%, #3b2a6b, #120a2a 60%, #05030d);
  text-align: center;
}
#ascendOverlay h2 { font-size: 40px; margin: 0; color: #fff3c4; text-shadow: 0 0 20px #ffd36b; }
.heavenGrid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 900px; margin: 24px auto; }
.heavenUp {
  width: 150px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.15); cursor: pointer;
}
.heavenUp .hIcon { font-size: 36px; }
.heavenUp.owned { border-color: var(--gold); background: rgba(255, 211, 107, .15); cursor: default; }
.heavenUp.locked { opacity: .3; cursor: default; }
.heavenUp.poor { opacity: .6; }
.bigBtn {
  font-family: 'Kavoon', serif; font-size: 22px; padding: 10px 28px; border-radius: 10px; border: 2px solid var(--gold);
  background: linear-gradient(#ffdd88, #c98a2a); color: #3a1f05;
}
.bigBtn:disabled { opacity: .4; cursor: default; }

#nameModal, #disconnected {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center;
}
#nameModal[hidden], #disconnected[hidden], #voteBanner[hidden], #ascendOverlay[hidden], #tooltip[hidden] { display: none; }
#disconnected { font-size: 22px; font-family: 'Kavoon', serif; }
#nameForm { background: #2a1a0c; border: 3px solid #8f5a2c; border-radius: 12px; padding: 24px 30px; text-align: center; max-width: 380px; }
#nameForm input { width: 100%; font-size: 18px; padding: 8px; margin: 10px 0; border-radius: 6px; border: 1px solid #8f5a2c; background: #120b06; color: var(--text); }
#nameForm button { font-family: 'Kavoon', serif; font-size: 18px; padding: 8px 20px; border-radius: 8px; border: none; background: var(--gold); color: #3a1f05; }

.fallingCookie { position: absolute; top: -40px; pointer-events: none; z-index: 0; opacity: .5; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(var(--r)); } }

@media (max-width: 900px) {
  body { overflow: auto; }
  #game { grid-template-columns: 1fr; height: auto; }
  #game > section { min-height: 60vh; }
  #middle, #right { border-left: none; border-top: 12px solid #5a3418; }
  #chatBox { position: relative; height: 200px; width: calc(100% - 16px); margin-top: auto; }
}

body.hideBuys #chatLog .buy { display: none; }
[hidden] { display: none !important; }

/* ---------- kitchen (co-op recipe orders) ---------- */
#kitchen { margin: 6px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); }
#kitchen.closed { font-size: 12px; color: var(--muted); }
#kitchen.order { background: rgba(120, 70, 20, .45); border: 2px solid var(--gold); box-shadow: 0 0 14px rgba(255, 211, 107, .25); }
#kitchen .kHead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#kitchen .kTime { margin-left: auto; font-size: 12px; color: var(--muted); }
#kitchen .kMuted { color: var(--muted); font-size: 12px; }
#kitchen .kNew { font-size: 11px; background: var(--gold); color: #3a1f05; padding: 1px 6px; border-radius: 8px; }
#kitchen .kSteps { display: flex; align-items: center; gap: 4px; margin: 8px 0 6px; flex-wrap: wrap; min-height: 34px; }
#kitchen .step { font-size: 22px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.08); border: 2px solid transparent; }
#kitchen .step.done { opacity: .35; background: rgba(125, 255, 138, .15); }
#kitchen .step.now { border-color: var(--gold); animation: pulseStep 1s ease-in-out infinite; }
@keyframes pulseStep { 50% { transform: scale(1.1); } }
#kitchen .arrow { color: var(--muted); }
#kitchen .bowlIng { font-size: 20px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid; background: rgba(255,255,255,.08); }
#kitchen .kTimer { height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
#kitchen .kTimer div { height: 100%; background: var(--gold); transition: width .25s linear; }
#kitchen .kHand { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#kitchen .kLabel { font-size: 12px; color: var(--muted); }
#kitchen .card { display: flex; flex-direction: column; align-items: center; width: 62px; padding: 4px 2px; font-size: 24px; border-radius: 8px;
  background: linear-gradient(#fff8e6, #e8d3a8); color: #3a1f05; border: 2px solid #8f5a2c; box-shadow: 0 3px 0 #5a3418; }
#kitchen .card small { font-size: 10px; }
#kitchen .card:hover { transform: translateY(-3px); }
#kitchen .card:disabled { opacity: .4; transform: none; }
#kitchen .kOthers { margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.recipeGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.recipe { background: rgba(255, 211, 107, .1); border: 1px solid var(--gold); border-radius: 8px; padding: 8px; position: relative; }
.recipe.locked { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.recipe .rName { font-weight: 700; }
.recipe .rSteps { font-size: 20px; margin: 6px 0; display: flex; gap: 3px; flex-wrap: wrap; }
.recipe.locked .rSteps span { width: 24px; height: 24px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border-radius: 4px; color: var(--muted); }
.recipe .rMeta { font-size: 11px; color: var(--muted); }
.recipe .rBonus { position: absolute; top: 8px; right: 8px; font-size: 11px; color: var(--good); }
#kitchen.order.modded { border-color: #ff8a3d; box-shadow: 0 0 16px rgba(255, 138, 61, .35); }
#kitchen .kTier { font-size: 11px; color: var(--muted); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 0 6px; }
#kitchen .kMod { font-size: 11px; background: #ff8a3d; color: #2a1200; padding: 1px 7px; border-radius: 8px; font-weight: 700; cursor: help; }
#kitchen .kRules { font-size: 12px; color: #ffcf9e; margin-bottom: 6px; }
h4.rTier { margin: 14px 0 6px; font-family: 'Kavoon', serif; font-weight: normal; font-size: 16px; }
h4.rTier span { color: var(--muted); font-size: 12px; font-family: 'Merriweather', serif; }
h4.rTier small { color: var(--muted); font-family: 'Merriweather', serif; font-size: 11px; }

/* ---------- queue now sits under the store ---------- */
#queueBox { border-bottom: none; border-top: 2px solid #5a3418; max-height: 30%; }

/* ---------- emotes ---------- */
#emoteBar { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; z-index: 3; margin-bottom: 4px; }
#emoteBar button { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); border-radius: 50%; width: 30px; height: 30px; font-size: 16px; padding: 0; }
#emoteBar button:hover { transform: scale(1.2); background: rgba(255,255,255,.15); }
.emoteFloat { position: absolute; font-size: 40px; pointer-events: none; text-align: center; animation: emoteUp 2.2s ease-out forwards; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.emoteFloat small { display: block; font-size: 11px; font-weight: bold; text-shadow: 0 1px 2px #000; }
@keyframes emoteUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }

/* ---------- reindeer ---------- */
.reindeer { position: absolute; left: -80px; pointer-events: auto; background: none; border: none; font-size: 54px; cursor: pointer; padding: 0;
  animation: flyRight linear forwards; filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); }
.reindeer.rtl { left: auto; right: -80px; animation-name: flyLeft; }
.reindeer.rtl span { display: inline-block; transform: scaleX(-1); }
.reindeer span { display: inline-block; animation: hop .6s ease-in-out infinite; }
@keyframes flyRight { to { transform: translateX(calc(100vw + 160px)); } }
@keyframes flyLeft { to { transform: translateX(calc(-100vw - 160px)); } }
@keyframes hop { 50% { margin-top: -10px; } }
.goldenCookie.business .money { font-size: 64px; display: block; }

/* ---------- seasons ---------- */
body.season-halloween { background-color: #1d0f24; }
body.season-christmas { background-color: #0d2230; }
body.season-valentines { background-color: #2a1020; }
body.season-easter { background-color: #12261a; }
body.season-business { background-color: #10241a; }

/* ---------- kitchen paused ---------- */
#kitchen.order.paused { border-color: #8aa4c8; box-shadow: none; opacity: .85; }

/* ---------- minigames ---------- */
.mgTabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.mgTabs .btn.active { background: linear-gradient(#a06a35, #6a4019); }
.mgLocked { font-size: 14px; }
.btn.mini { padding: 2px 7px; font-size: 11px; }
.btn:disabled { opacity: .4; cursor: default; }
.up { color: var(--good); } .down { color: var(--bad); }
.godSlots { display: flex; gap: 8px; flex-wrap: wrap; }
.godSlot { flex: 1; min-width: 150px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 8px; }
.godInSlot { margin-top: 4px; font-size: 14px; }
.godGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.godCard { background: var(--panel); border-radius: 8px; padding: 8px; border: 1px solid rgba(255,255,255,.1); font-size: 12px; }
.godCard.slotted { border-color: var(--gold); }
.godHead { display: flex; gap: 8px; align-items: center; }
.godHead small { color: var(--muted); }
.godIcon { font-size: 30px; }
.godEffects { margin: 6px 0; color: var(--muted); }
.godEffects .on { color: var(--text); font-weight: 700; }
.godBtns { display: flex; gap: 3px; flex-wrap: wrap; }
table.market { width: 100%; border-collapse: collapse; font-size: 12px; }
table.market td { padding: 4px 5px; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: middle; }
table.market tr.mgDim { opacity: .4; }
table.market small { color: var(--muted); }
.mgBtns { white-space: nowrap; }
.spark { display: block; }
.dragonBox { text-align: center; }
.dragonArt { font-size: 90px; animation: bob 3s ease-in-out infinite; }
.mgReq { color: var(--muted); font-size: 12px; margin-left: 8px; }
.auraSlots { display: flex; gap: 14px; justify-content: center; margin: 12px 0 4px; flex-wrap: wrap; }
.auraItem { text-align: left; font-size: 12px; padding: 3px 0; color: var(--muted); }
.auraItem.on { color: var(--text); }
.seasonGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.seasonCard { background: var(--panel); border-radius: 8px; padding: 8px; border: 1px solid rgba(255,255,255,.1); font-size: 12px; }
.seasonCard.on { border-color: var(--gold); }
.seasonHead { font-size: 14px; } .seasonHead small { color: var(--muted); margin-left: 4px; }
.drops { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 6px; }
.drop { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(255,255,255,.06); color: var(--muted); }
.drop.got { background: rgba(255, 211, 107, .2); }
#bigCookie .calArt { display: none; }
#kitchen .kWarm { font-size: 12px; font-weight: 700; color: #ff9d4d; animation: pulseStep 1.2s ease-in-out infinite; }
body.boss #kitchen .kWarm { color: #1f1f1f; animation: none; }
#kitchen .cardWrap { position: relative; display: inline-block; }
#kitchen .discard { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #8f5a2c; background: #3d2410; color: #fff; font-size: 11px; padding: 0; line-height: 18px; }
#kitchen .discard:hover { background: #8f5a2c; }
.recipe .btn.mini { margin-top: 6px; }
body.boss #kitchen .discard { background: #fff; color: #1f1f1f; border-color: #c8c8c8; }

/* ---------- casino ---------- */
.casinoRow { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.wheelWrap { position: relative; width: 220px; height: 220px; flex-shrink: 0; }
.wheel { width: 220px; height: 220px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.wheelPointer { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--gold); font-size: 22px; text-shadow: 0 2px 3px #000; }
#wheelResult { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Kavoon', serif; font-size: 34px; color: #fff; text-shadow: 0 2px 4px #000; }
#wheelResult.res { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid #d4af37; animation: pop .3s; }
#wheelResult.red { background: #c0262d; } #wheelResult.black { background: #1b1b1b; } #wheelResult.green { background: #0f8a3c; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.3); } }
.casinoControls { flex: 1; min-width: 240px; }
.cLabel { font-size: 12px; color: var(--muted); margin: 6px 0 3px; }
.betRow { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.betRow .btn.active, .betBtn.active { background: linear-gradient(#e0b04a, #9c6a1a); color: #2a1200; border-color: var(--gold); }
.betBtn.red { border-color: #c0262d; } .betBtn.black { border-color: #555; }
#spinBtn { margin: 10px 0 6px; }
.pot { font-size: 18px; margin: 4px 0; }
.potBtn { margin: 3px 4px 3px 0; padding: 6px 12px; }
.potBtn.danger { border-color: #ff8a3d; }
.coin { font-size: 48px; display: inline-block; animation: flip .25s linear infinite; }
@keyframes flip { 50% { transform: scaleX(0.05); } }
#casinoStats { margin-top: 10px; }
body.boss #casino .wheel, body.boss .coin { filter: grayscale(1); }
body.boss #casino .betRow .btn.active, body.boss .betBtn.active { background: #e9f5ee; color: #1f1f1f; }