/* ==========================================================================
   Honeybell Games - mobile design layer
   A separate phone design. Desktop is untouched above 768px.
   ========================================================================== */

/* The dock is injected into every page by mobile.js, so it must be hidden by
   default. Without this it renders unstyled under the footer on desktop.
   The media query below turns it back on. */
.hb-dock { display: none; }

@media (max-width: 767px) {

/* ---- palette per page ---- */
body {
    --hb-ink: #0a0a0a;
    --hb-accent: #f97316;
    --hb-accent-soft: rgba(249, 115, 22, 0.16);
    --hb-edge: rgba(255, 255, 255, 0.14);
    --hb-card: rgba(255, 255, 255, 0.035);
}
body[data-page="suds"]        { --hb-ink:#12060a; --hb-accent:#fb7185; --hb-accent-soft:rgba(251,113,133,.16); }
body[data-page="flowstate"]   { --hb-ink:#060b13; --hb-accent:#2dd4bf; --hb-accent-soft:rgba(45,212,191,.14); }
body[data-page="tumbletilt"]  { --hb-ink:#0a0a0a; --hb-accent:#f3931a; --hb-accent-soft:rgba(243,147,26,.16); }
body[data-page="escapequest"] { --hb-ink:#070c14; --hb-accent:#60a5fa; --hb-accent-soft:rgba(96,165,250,.14); }
body[data-page="games"]       { --hb-ink:#0a0a0a; --hb-accent:#fb923c; --hb-accent-soft:rgba(251,146,60,.16); }

body {
    overflow-x: hidden;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* ---- slim top bar ---- */
header.main-header,
header#mainHeader {
    background: var(--hb-ink) !important;
    backdrop-filter: none !important;
    border-bottom: 2px solid var(--hb-accent);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
header#mainHeader .container > div { padding-top: .5rem !important; padding-bottom: .5rem !important; }
header#mainHeader .logo img { height: 26px !important; }
#mobileMenuBtn { display: none !important; }

/* ---- bottom thumb dock ---- */
.hb-dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--hb-ink);
    border-top: 2px solid var(--hb-accent);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.55);
}
.hb-dock a,
.hb-dock button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 62px;
    padding: 8px 2px 7px;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
}
.hb-dock i { font-size: 17px; line-height: 1; }
.hb-dock a:active,
.hb-dock button:active { background: var(--hb-accent-soft); }
.hb-dock .is-active { color: var(--hb-accent); }
.hb-dock .is-active::before {
    content: "";
    position: absolute;
    top: -2px; left: 22%; right: 22%;
    height: 3px;
    background: var(--hb-accent);
}

/* ---- full screen panel, reused by the dock More button ---- */
.mobile-nav { background: var(--hb-ink) !important; backdrop-filter: none !important; }
.mobile-nav nav a {
    font-size: 1.75rem !important;
    padding: .55rem 0;
    border-bottom: 1px solid var(--hb-edge);
}
.mobile-nav nav { gap: 0 !important; }
.mobile-nav nav > a + a { margin-top: 0 !important; }

/* ---- vertical rhythm ---- */
/* the header is fixed, so each page's own pt-28/32/36/40 is the only thing
   keeping the hero clear of it. Never override the first section's top. */
main > section + section { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
main > section:first-child { padding-bottom: 2.25rem !important; }
main > section > .container,
main > section .container { padding-left: 1.15rem !important; padding-right: 1.15rem !important; }

h1 { letter-spacing: .01em; }
h2 { line-height: .95; }
p  { text-wrap: pretty; }

/* ---- chunky thumb buttons ---- */
main a[class*="px-"][class*="py-"][class*="font-bold"],
main a[class*="px-"][class*="py-"][class*="font-black"],
main a[class*="px-"][class*="py-"][class*="font-semibold"],
main button[class*="px-"][class*="py-"][class*="font-bold"],
main button[class*="px-"][class*="py-"][class*="font-black"],
main button[class*="px-"][class*="py-"][class*="font-semibold"] {
    min-height: 54px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}
main .flex.gap-4 > a,
main .flex.gap-3 > a { flex: 1 1 100%; }

/* ---- calmer motion on a phone ---- */
.bubble:nth-child(n+4) { display: none; }
.bubble { animation-duration: 26s !important; opacity: .5; }
.marquee-track { animation-duration: 34s !important; }
.radar-sweep, .blip, .searchlight, .seal-spin, .portal-spin, .runner { animation-duration: 14s !important; }
.wobble-letter { animation: none !important; }

/* ==========================================================================
   SUDS - the sticker sheet
   ========================================================================== */
body[data-page="suds"] main > section:first-child { min-height: auto !important; padding-top: 5.5rem !important; }
body[data-page="suds"] .sticker { transform: rotate(-3deg); font-size: .8rem !important; }
body[data-page="suds"] .ticket {
    border-width: 2px;
    box-shadow: 4px 4px 0 #000;
    scroll-snap-align: center;
    flex: 0 0 78%;
}
body[data-page="suds"] .hb-rail {
    display: flex;
    gap: .85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .35rem 1.15rem 1rem;
    margin: 0 -1.15rem;
}
body[data-page="suds"] .hb-rail::-webkit-scrollbar { display: none; }
body[data-page="suds"] .polaroid { transform: rotate(-1.5deg); }
body[data-page="suds"] .update-panel { border-width: 2px; }
body[data-page="suds"] .update-shot { border-width: 2px; box-shadow: 4px 4px 0 rgba(0,0,0,.55); }

/* ==========================================================================
   FlowState ATC - the strip board
   ========================================================================== */
body[data-page="flowstate"] .radar-bg { background-size: 26px 26px !important; }
body[data-page="flowstate"] .monitor { border-width: 6px !important; border-radius: 12px !important; }
body[data-page="flowstate"] .board-row {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas: "code status" "text text";
    gap: .3rem .6rem;
    align-items: center;
    border-left: 4px solid var(--hb-accent);
    border-bottom: 1px solid var(--hb-edge);
    padding: .7rem .8rem;
    background: rgba(255, 255, 255, .02);
}
body[data-page="flowstate"] .board-row > span:nth-child(1) { grid-area: code; font-size: .72rem; }
body[data-page="flowstate"] .board-row > span:nth-child(2) { grid-area: text; font-size: .92rem; line-height: 1.35; }
body[data-page="flowstate"] .board-row > span:nth-child(3) { grid-area: status; justify-self: end; font-size: .62rem; letter-spacing: .12em; }
body[data-page="flowstate"] .mono { font-size: .68rem; letter-spacing: .1em; }
body[data-page="flowstate"] iframe { border-radius: 8px; }

/* ==========================================================================
   Tumble Tilt - it stays crooked
   ========================================================================== */
body[data-page="tumbletilt"] .tilt-card,
body[data-page="tumbletilt"] .tilt-card-l,
body[data-page="tumbletilt"] .tilt-card-r { transform: rotate(-1.4deg); transition: transform .18s ease; }
body[data-page="tumbletilt"] .tilt-card:nth-of-type(even) { transform: rotate(1.4deg); }
body[data-page="tumbletilt"] .tilt-card:active,
body[data-page="tumbletilt"] .tilt-card-l:active,
body[data-page="tumbletilt"] .tilt-card-r:active { transform: rotate(0deg) scale(.985); }
body[data-page="tumbletilt"] .quest-frame { width: min(82vw, 330px) !important; height: min(82vw, 330px) !important; }
body[data-page="tumbletilt"] .lvl { width: 26px; height: 26px; }
body[data-page="tumbletilt"] .hero-logo { max-width: 78vw; }
body[data-page="tumbletilt"] .env-card { border-radius: 0; }

/* ==========================================================================
   Escape Quest - the case file
   ========================================================================== */
body[data-page="escapequest"] .blueprint { background-size: 22px 22px !important; }
body[data-page="escapequest"] .stamp { font-size: .95rem !important; transform: rotate(-6deg); }
body[data-page="escapequest"] .evidence { margin-left: -1.15rem; margin-right: -1.15rem; border-radius: 0; }
body[data-page="escapequest"] .tally { flex-wrap: wrap; gap: .35rem; }
body[data-page="escapequest"] .searchlight { opacity: .35; }

/* ==========================================================================
   Games hub - four full bleed panels
   ========================================================================== */
body[data-page="games"] [class*="panel-"] {
    margin-left: -1.15rem;
    margin-right: -1.15rem;
    border-radius: 0 !important;
    border-top: 3px solid var(--hb-accent);
    padding: 1.6rem 1.15rem !important;
}
body[data-page="games"] .panel-flowstate { --hb-accent: #2dd4bf; }
body[data-page="games"] .panel-suds      { --hb-accent: #fb7185; }
body[data-page="games"] .panel-tilt      { --hb-accent: #f3931a; }
body[data-page="games"] .panel-escape    { --hb-accent: #60a5fa; }
body[data-page="games"] .stub {
    position: absolute;
    top: 0; right: 1.15rem;
    transform: none !important;
    font-size: .6rem;
    padding: .3rem .6rem;
}
body[data-page="games"] .tilt-img, body[data-page="games"] .tilt-word { transform: rotate(-1.2deg); }

/* ==========================================================================
   Index - light touch only. The page already ships its own mobile hero,
   so this just fixes tap targets and spacing around it.
   ========================================================================== */
/* the hero is its own layout, so keep the generic section rules off it */
body[data-page="home"] .hero-section .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
body[data-page="home"] .mobile-hero-content .flex.gap-3 > a,
body[data-page="home"] .mobile-hero-content a[class*="px-"] { min-height: 50px; }

/* game cards get a full width tap target and a little more breathing room */
body[data-page="home"] .game-card { margin-bottom: .25rem; }
body[data-page="home"] .game-card a[class*="px-"][class*="py-"] { min-height: 50px; }

/* ---- footer ---- */
footer { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
footer .grid { gap: 1.5rem !important; }
footer h3 { font-size: 1rem !important; margin-bottom: .5rem !important; }
footer a { padding: .18rem 0; display: inline-block; }

/* ---- accessibility ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

}