/* CANDY HEIST game layer on top of styles.css (shared with the look test) */
button { font: inherit; color: inherit; cursor: pointer; }
.top { align-items: center; gap: 18px; }
.stats { margin-left: auto; }
.acts { display: flex; align-items: center; gap: 8px; }
.ico { display: grid; place-items: center; height: 42px; min-width: 42px; padding: 0 14px; border-radius: 99px; background: rgba(18, 7, 9, .7); border: 1px solid var(--line); backdrop-filter: blur(8px); font-size: 13px; font-weight: 700; transition: border-color .2s, transform .2s; }
.ico svg { width: 20px; height: 20px; }
.ico.off .w { opacity: .2; }
.ico:hover, .join:hover { border-color: var(--corn); transform: translateY(-1px); }
.join { height: 44px; padding: 0 22px; border: 0; border-radius: 99px; background: var(--corn); color: var(--ink-dark); font-weight: 800; font-size: 14px; letter-spacing: .02em; box-shadow: 0 4px 0 #8a2e00, 0 0 30px rgba(255, 106, 19, .35); transition: transform .15s, box-shadow .15s; }
.join:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a2e00; }
.join.in { background: rgba(18, 7, 9, .75); color: var(--cream); box-shadow: none; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.join:disabled { cursor: default; transform: none; background: rgba(255, 106, 19, .16); color: var(--corn); border: 1px solid rgba(255, 106, 19, .5); box-shadow: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.loader { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 50; transition: opacity .6s; pointer-events: none; }
.loader svg { width: 72px; animation: spin 1.4s cubic-bezier(.6, 0, .4, 1) infinite; }
body:not(.loading) .loader { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.lanternbar { top: 96px; }
.reply, .mestrip { text-shadow: 0 1px 2px #000, 0 0 14px #000, 0 0 24px #000; }
.mestrip span { color: var(--cream); }
@media (min-width: 1101px) { .deck .mestrip { display: none; } }
/* vat card extras */
.clock b.warn { color: #ff4d4d; animation: pulse .5s ease-in-out infinite alternate; }
.meter em { left: 0; right: auto; width: 0; transition: left .6s, width .6s; }
.note { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); max-width: 30ch; }
.track { display: flex; gap: 5px; list-style: none; padding: 0; margin-top: 14px; }
.track li { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(251, 238, 221, .3); }
.track li.open { background: var(--gold); border-color: var(--gold); }
.track li.rolled { background: repeating-linear-gradient(-45deg, rgba(251, 238, 221, .35) 0 2px, transparent 2px 4px); }
.track li.now { border-color: var(--corn); box-shadow: 0 0 0 3px rgba(255, 106, 19, .3); }
.track li.mega { width: 30px; border-radius: 8px; border-color: var(--cherry); }

/* right column */
.side { position: fixed; right: var(--pad); top: 112px; width: 268px; display: flex; flex-direction: column; gap: 12px; }
.me, .feedbox { background: rgba(18, 7, 9, .66); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; backdrop-filter: blur(10px); }
.mycrew { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; margin: 4px 0 10px; }
.me dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.me dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.me dd { margin: 0; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.feed { list-style: none; padding: 0; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: hidden; font-size: 12.5px; }
.feed li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; }
.feed time { color: rgba(185, 164, 151, .7); font-variant-numeric: tabular-nums; font-size: 11px; }
.feed em { font-style: normal; font-weight: 800; color: var(--c); margin-right: 4px; }
.feed b { color: var(--gold); }
.feed .crack span { color: var(--gold); font-weight: 800; }
.feed .alarm span { color: #ff6fb5; font-weight: 800; }
.feed .spot span { color: #ff8a8a; }
.feed .empty { display: block; color: var(--muted); }

/* crews: bottom-left stack on desktop */
.crewdock { left: var(--pad); bottom: var(--pad); transform: none; flex-direction: column; gap: 6px; }
.crew { min-width: 210px; transition: border-color .3s, box-shadow .3s; }
.crew.lead .p { color: var(--gold); }
.crew.me { background: rgba(40, 14, 10, .8); }

/* deck: bottom centre */
.deck { position: fixed; left: 50%; bottom: max(var(--pad), env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(560px, calc(100vw - 2 * var(--pad))); }
.mestrip:empty { display: none; }
.mestrip { display: flex; gap: 14px; font-size: 12px; font-weight: 700; color: var(--muted); }
.mestrip span:first-child { font-weight: 800; }
.reply { min-height: 22px; font-size: 14px; font-weight: 700; text-align: center; color: var(--cream); text-shadow: 0 2px 10px #000; }
.reply.cold { color: var(--ice); } .reply.warm { color: #ffb347; } .reply.hot { color: #ff5a3c; } .reply.click { color: var(--gold); } .reply.err { color: #ff8a8a; }
.pips { display: flex; gap: 6px; }
.pip { display: grid; place-items: center; min-width: 40px; height: 26px; padding: 0 8px; font-size: 12px; font-weight: 800; color: var(--muted); background: rgba(18, 7, 9, .7); border: 1px solid var(--line); clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 25%, 100% 50%, calc(100% - 5px) 75%, 100% 100%, 0 100%, 5px 75%, 0 50%, 5px 25%); }
.pip.set { background: var(--gold); color: var(--ink-dark); border-color: var(--gold); }
.pip.cur { color: var(--cream); background: rgba(255, 106, 19, .35); }
.ctl { display: flex; align-items: center; gap: 8px; }
.nudge { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: rgba(18, 7, 9, .72); backdrop-filter: blur(8px); font-size: 22px; font-weight: 800; transition: border-color .2s, transform .1s; }
.nudge:hover { border-color: var(--corn); } .nudge:active { transform: scale(.92); }
.sniff { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 12px 0 30px; border: 0; border-radius: 99px; background: var(--corn); color: var(--ink-dark); box-shadow: 0 5px 0 #8a2e00, 0 0 40px rgba(255, 106, 19, .45); transition: transform .12s, box-shadow .12s, background .3s; }
.sniff span { font-family: var(--display); font-size: 26px; line-height: 1; }
.sniff b { display: grid; place-items: center; width: 54px; height: 42px; border-radius: 99px; background: var(--ink-dark); color: var(--gold); font-family: var(--display); font-weight: 400; font-size: 22px; font-variant-numeric: tabular-nums; }
.sniff:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a2e00; }
.sniff:disabled { filter: grayscale(.7) brightness(.7); cursor: default; }
.sniff.danger { background: #ff3b3b; box-shadow: 0 5px 0 #7a0a0a, 0 0 40px rgba(255, 40, 40, .5); }
.legend { display: flex; gap: 10px; align-items: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: -4px; }
.legend .cold { background: var(--ice); } .legend .warm { background: #ffb347; } .legend .hot { background: #ff5a3c; } .legend .click { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* floating answers over the carousel */
.float { position: absolute; transform: translate(-50%, -100%); font-family: var(--display); font-size: 30px; pointer-events: none; text-shadow: 0 3px 0 var(--ink-dark), 0 0 20px currentColor; animation: rise 1.5s cubic-bezier(.2, .8, .2, 1) forwards; }
.float.cold { color: var(--ice); } .float.warm { color: #ffb347; } .float.hot { color: #ff5a3c; } .float.click { color: var(--gold); font-size: 44px; } .float.spot { color: #ff4d4d; font-size: 24px; margin-top: -44px; }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -110%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }

/* states */
body.lit .vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(120, 0, 10, .55) 100%); }
body.rush .vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 50%, rgba(255, 30, 130, .28) 100%); }
.toast { position: fixed; left: 50%; top: 32%; transform: translate(-50%, -50%) rotate(-2deg); text-align: center; pointer-events: none; animation: pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.toast b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 6vw, 80px); line-height: 1; color: var(--gold); text-shadow: 4px 4px 0 var(--cherry), 8px 8px 0 var(--ink-dark); }
.toast small { display: inline-block; margin-top: 12px; padding: 6px 14px; background: var(--cream); color: var(--ink-dark); font-weight: 800; font-size: 13px; letter-spacing: .06em; }
.toast.roll b { color: var(--cream); text-shadow: 4px 4px 0 #444, 8px 8px 0 var(--ink-dark); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.4) rotate(-8deg); opacity: 0; } }

dialog { max-width: 560px; width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; margin: auto; padding: 28px 30px; border: 1px solid rgba(255, 106, 19, .4); border-radius: 22px; background: #160a0d; color: var(--cream); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
dialog::backdrop { background: rgba(5, 1, 3, .7); backdrop-filter: blur(4px); }
dialog h2 { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.02; margin: 14px 0 16px; }
dialog ol { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.5; color: #e4d3c4; }
dialog ol b { color: var(--cream); }
dialog .fine { margin-top: 16px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
dialog .x { position: absolute; right: 16px; top: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: none; font-size: 22px; }
dialog { position: fixed; }

@media (max-width: 1100px) { .side { display: none; } }
@media (max-width: 760px) {
  .top { flex-wrap: wrap; gap: 8px; }
  .stats { gap: 14px; }
  .acts { position: fixed; right: var(--pad); top: 172px; flex-direction: column; }
  .ico.txt { width: 42px; padding: 0; font-size: 0; } .ico.txt::before { content: '?'; font-size: 18px; font-weight: 800; }
  .join { display: none; }
  .join.in { display: none; }
  .vatcard { right: 70px; top: 86px; }
  .vatcard .note, .vatcard .track, .mrow #loot { display: none; }
  .crewdock { left: 50%; transform: translateX(-50%); bottom: auto; top: auto; flex-direction: row; display: flex; width: calc(100% - 2 * var(--pad)); position: fixed; bottom: calc(max(var(--pad), env(safe-area-inset-bottom)) + 196px); gap: 6px; }
  .crew { flex: 1; min-width: 0; padding: 6px; gap: 6px; border-radius: 12px; }
  .crew .n { display: none; } .crew .p { font-size: 11px; color: var(--cream); font-weight: 700; }
  .crew.lead .p { color: var(--gold); }
  .crew .lt { display: none; }
  .crew.lead { border-color: rgba(255, 200, 58, .6); }
  .crew i { width: 24px; height: 24px; font-size: 10px; flex: none; }
  .crew.me .n::after { content: none; }
  .crew.me { box-shadow: inset 0 0 0 1.5px var(--gold); }
  .lanternbar { top: auto; bottom: calc(max(var(--pad), env(safe-area-inset-bottom)) + 248px); padding: 8px 16px; font-size: 11px; }
  .deck { gap: 8px; }
  .reply { font-size: 13px; min-height: 18px; }
  .pip { min-width: 0; flex: 1; padding: 0 4px; font-size: 11px; height: 24px; }
  .pips { width: 100%; }
  .nudge { width: 46px; height: 46px; }
  .sniff { height: 58px; padding: 0 10px 0 22px; } .sniff span { font-size: 22px; }
  .legend { font-size: 10px; gap: 8px; }
  .mestrip { gap: 10px; font-size: 11px; }
  .toast { top: 40%; }
}

/* sugar rush: big entrance, then it settles into a badge under the lantern bar */
.rushbanner { animation: rushIn 3.2s cubic-bezier(.2, .9, .3, 1) forwards; transform-origin: 50% 0; }
@keyframes rushIn {
  0% { transform: translateX(-50%) rotate(-3deg) scale(.3); opacity: 0; top: 24%; }
  12% { transform: translateX(-50%) rotate(-3deg) scale(1.06); opacity: 1; top: 24%; }
  70% { transform: translateX(-50%) rotate(-3deg) scale(1); top: 24%; }
  100% { transform: translateX(-50%) rotate(-2deg) scale(.42); top: 150px; }
}
@media (max-width: 760px) { @keyframes rushIn { 0% { transform: translateX(-50%) scale(.3); opacity: 0; top: 40%; } 12% { transform: translateX(-50%) scale(1.06); opacity: 1; top: 40%; } 70% { transform: translateX(-50%) scale(1); top: 40%; } 100% { transform: translateX(-50%) scale(.5); top: 238px; } } }