/* ==========================================================================
   PHONE LAYOUT — applies only when js/device.js sets html[data-device="phone"].
   Desktop never sees any of this (the bar and sheet stay hidden there).
   ========================================================================== */

/* Hidden on desktop */
.phone-bar, .rooms-sheet, .tag__from, .view-switch { display: none; }

/* ---------- Bottom action bar ---------- */
[data-device="phone"] .phone-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9400;
  display: flex; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(13, 4, 24, .94); backdrop-filter: blur(8px);
  border-top: 4px solid; border-image: repeating-linear-gradient(-45deg, #ffd400 0 10px, #0d0418 10px 20px) 4;
}
[data-device="phone"] .phone-bar button {
  min-height: 54px; border: 3px solid #0d0418; border-radius: 12px; cursor: pointer;
  font: 400 1.15rem/1 'Anton', Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase;
}
[data-device="phone"] .phone-bar__rooms { flex: 0 0 34%; background: #f2ead3; color: #0d0418; box-shadow: 3px 3px 0 #39ff6a; }
[data-device="phone"] .phone-bar__order {
  flex: 1; color: #3b2300; box-shadow: 3px 3px 0 #ff2d7a;
  background: linear-gradient(105deg, #a8770a, #ffe27a 20%, #fff6c4 28%, #d4a017 45%, #ffe27a 65%, #9c6b05 85%);
  background-size: 220% 100%; animation: ticket-shine 4s linear infinite;
}
[data-device="phone"] .phone-bar__order b { font-weight: 400; color: #7a1d12; }

/* ---------- Slide-up rooms sheet ---------- */
[data-device="phone"] .rooms-sheet {
  display: block; position: fixed; inset: 0; z-index: 9450; visibility: hidden;
  background: rgba(10, 0, 20, 0); transition: background .3s, visibility .3s;
}
[data-device="phone"] .rooms-sheet.is-open { visibility: visible; background: rgba(10, 0, 20, .65); }
.rooms-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow: auto;
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
  background: #1a0633; color: #f2ead3; border-top: 4px solid #39ff6a; border-radius: 20px 20px 0 0;
  translate: 0 100%; transition: translate .35s cubic-bezier(.3,1.3,.5,1);
}
.rooms-sheet.is-open .rooms-sheet__panel { translate: 0 0; }
.rooms-sheet__grip { width: 54px; height: 6px; border-radius: 3px; background: #6b4a9a; margin: 2px auto 12px; }
.rooms-sheet a { color: inherit; text-decoration: none; }
.rooms-sheet__lab {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: .7em 1em;
  font: 400 1.4rem 'Rye', 'Anton', serif; background: #39ff6a; color: #0d0418 !important; border: 3px solid #0d0418; border-radius: 12px;
}
.rooms-sheet__lab small { font: 800 .8rem var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.rooms-sheet ul { list-style: none; display: grid; gap: 8px; }
.rooms-sheet li a {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; min-height: 64px;
  padding: .5em .8em; background: #f2ead3; color: #0d0418 !important; border: 3px solid #0d0418; border-radius: 12px;
  box-shadow: 3px 3px 0 #0d0418;
}
.rooms-sheet li a[aria-current="page"] { background: #ffd400; }
.rooms-sheet__icon { font-size: 2rem; text-align: center; }
.rooms-sheet li b { display: block; font: 400 1.25rem 'Anton', sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.rooms-sheet li small { font-weight: 800; color: #7a1fd1; }
.rooms-sheet li em { font: 400 1rem 'Anton', sans-serif; font-style: normal; color: #c4001a; white-space: nowrap; }
.rooms-sheet__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.rooms-sheet__foot > * {
  flex: 1; padding: .7em; text-align: center; font: 800 .9rem var(--font-body); cursor: pointer;
  background: transparent; color: #f2ead3; border: 2px solid #6b4a9a; border-radius: 10px;
}

/* ---------- Things the bar replaces on phones ---------- */
[data-device="phone"] .order-pill,
[data-device="phone"] .motion-toggle,
[data-device="phone"] .room-list,
[data-device="phone"] .wizard,
[data-device="phone"] .corner-tape,
[data-device="phone"] .page-hero .stamp { display: none !important; }
[data-device="phone"] body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* ==========================================================================
   HUB on phones: logo up top, then a list of room cards fed by one pipe
   ========================================================================== */
[data-device="phone"] body.hub-page { --u: 2.45vw; }
[data-device="phone"] .hub { min-height: auto; justify-content: flex-start; gap: 22px; padding: 14px 10px 30px; cursor: default; }
[data-device="phone"] .wing,
[data-device="phone"] .shelf-callout,
[data-device="phone"] .shelf__bookend,
[data-device="phone"] .ticket-row .click-arrow,
[data-device="phone"] .logo-word .click-arrow,
[data-device="phone"] .bulb:nth-child(2),
[data-device="phone"] .bulb:nth-child(3) { display: none !important; }
[data-device="phone"] .machine { max-width: none; }
[data-device="phone"] .machine__rig { gap: 2px; }
[data-device="phone"] .coil { width: calc(var(--u) * 9); }
[data-device="phone"] .logo-word { font-size: calc(var(--u) * 9); }
[data-device="phone"] .logo-block { min-height: calc(var(--u) * 50); padding: calc(var(--u) * 3) 0; }
[data-device="phone"] .logo-block > .lab__core { width: calc(var(--u) * 50); }
[data-device="phone"] .ticket-hand { width: calc(var(--u) * 10); min-width: 0; }
[data-device="phone"] .machine__base { width: 100%; padding: 6px 10px; }
[data-device="phone"] .warning-plate { font-size: .78rem; }
[data-device="phone"] .gauge { width: 34px; min-width: 0; }
[data-device="phone"] .siren { --siren: 26px; }

[data-device="phone"] .shelf { flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-width: none; margin-top: 18px; padding-left: 30px; }
[data-device="phone"] .specimen {
  flex: 0 0 auto; max-width: none; width: 100%; margin: 0 0 16px; padding: 0;
  grid-template-columns: 96px 1fr; grid-template-rows: auto auto auto; column-gap: 14px; align-content: start;
}
[data-device="phone"] .jar { grid-column: 1; grid-row: 1; width: 84px; min-width: 0; justify-self: center; }
[data-device="phone"] .jar .starburst { --sb: 46px !important; top: -10px; right: -16px; }
[data-device="phone"] .jar__base { grid-column: 1; grid-row: 2; width: 96px; min-width: 0; }
[data-device="phone"] .specimen::after { grid-column: 1 / -1; grid-row: 3; margin-inline: 0; }
[data-device="phone"] .tag {
  grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: stretch;
  width: 100%; max-width: none; min-height: 0; margin: 0; padding: .7em .9em;
  align-items: flex-start; text-align: left; rotate: -1deg;
}
[data-device="phone"] .specimen:nth-of-type(even) .tag { rotate: 1deg; }
[data-device="phone"] .tag::before { display: none; }
[data-device="phone"] .tag b { font-size: 1.3rem; }
[data-device="phone"] .tag small { font-size: 1.1rem; }
[data-device="phone"] .tag__from { display: block; margin-top: .35em; font: 400 1.1rem/1 'Anton', sans-serif !important; color: #c4001a !important; letter-spacing: .04em; }

/* ==========================================================================
   THEMED PAGES on phones: one clean column, big tap targets
   ========================================================================== */
[data-device="phone"] .page-main { padding: 72px 14px 30px; gap: 26px; }
[data-device="phone"] .back-sticker { top: 10px; left: 10px; font-size: .95rem; padding: .5em .8em; }
[data-device="phone"] .page-hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
[data-device="phone"] .page-hero__lede { font-size: 1rem; padding: 1em 1.1em; }
[data-device="phone"] .page-hero__lede .starburst,
[data-device="phone"] .cta .click-arrow { display: none; }
[data-device="phone"] .panel.torn { padding: 26px 18px; }
[data-device="phone"] .price-list { grid-template-columns: 1fr; gap: 14px; }
[data-device="phone"] .price-list li { padding-block: .9em; font-size: 1.05rem; }
[data-device="phone"] .gallery { grid-template-columns: 1fr; gap: 26px; }
[data-device="phone"] .steps { grid-template-columns: 1fr; }
[data-device="phone"] .realm-arrows { flex-direction: column; align-items: stretch; }
[data-device="phone"] .realm-arrow { justify-content: center; min-height: 52px; }
[data-device="phone"] .contraption { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); padding-inline: 6px; }
[data-device="phone"] .contraption__sign,
[data-device="phone"] .contraption__ticket { grid-column: 1 / -1; justify-self: center; }
[data-device="phone"] .cta-ticket { --u: 2.4vw; }
[data-device="phone"] .jg-near-layer, [data-device="phone"] .jg-vines { display: none; }

/* desktop view chosen on a phone: a small way back */
[data-device="desktop"] .view-switch {
  display: block; position: fixed; right: 10px; top: 10px; z-index: 9500;
  font: 800 .85rem var(--font-body); padding: .5em .8em; border: 3px solid #0d0418; border-radius: 999px;
  background: #39ff6a; color: #0d0418; text-decoration: none; box-shadow: 3px 3px 0 #0d0418;
}