/* The look of the new home, prices and groups pages and of the booking
 * sheet - loaded last, so it is the one word on colour, type and surface.
 *
 * Owner, 22 Oct 2026, after flat black ("black is to much aggresive"),
 * then flat grey ("cheap grey. school guy html class level"): depth rather
 * than a flat colour, the brand's own typeface, glass surfaces with a fine
 * light edge, and one strong action - the Level3 gradient - used only
 * where the guest books.
 */

@font-face{font-family:"Geomanist";src:url("/fonts/geomanist/Geomanist-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geomanist";src:url("/fonts/geomanist/Geomanist-Medium.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Geomanist";src:url("/fonts/geomanist/Geomanist-Bold.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}

/* ---- the two themes ------------------------------------------------------ */
:root{
  --bg:#0D0E13; --card:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022)); --solid:#16171E; --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.15);
  --txt:#F2F3F7; --mut:rgba(244,244,247,.62); --mut2:rgba(244,244,247,.38);
  --hi:inset 0 1px 0 rgba(255,255,255,.06);
  --lift:0 18px 50px rgba(0,0,0,.45);
  --top:#161821;
  --brand:linear-gradient(135deg,#D9138A 0%,#EE3F62 100%);
  --brandglow:0 6px 18px rgba(217,19,138,.22);
  --chip:rgba(255,255,255,.05); --chiphover:rgba(255,255,255,.09);
}
html[data-theme="light"]{
  --bg:#F1F2F6; --top:#FFFFFF; --card:#FFFFFF; --solid:#FFFFFF; --line:rgba(17,17,26,.07); --line2:rgba(17,17,26,.14);
  --txt:#15151C; --mut:rgba(21,21,28,.62); --mut2:rgba(21,21,28,.40);
  --hi:0 1px 2px rgba(17,17,26,.04);
  --lift:0 18px 50px rgba(17,17,26,.10);
  --brandglow:0 6px 16px rgba(217,19,138,.18);
  --chip:rgba(17,17,26,.045); --chiphover:rgba(17,17,26,.08);
}

/* ---- page: the brand's type, and depth instead of a flat fill ----------- */
body{
  font-family:"Geomanist",system-ui,-apple-system,"Segoe UI",Roboto,
    "Noto Sans Thai","Leelawadee UI","Sarabun","Noto Sans SC","PingFang SC","Microsoft YaHei",
    "Noto Sans JP","Hiragino Sans","Yu Gothic","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
  /* One still gradient: a touch lighter at the top of the page. */
  background:linear-gradient(180deg,var(--top) 0,var(--bg) 560px) no-repeat,var(--bg);
  color:var(--txt);
  letter-spacing:.005em;
}
h1,h2,h3,.stage h1,.phero h1{letter-spacing:-.025em}

/* ---- the menu ----------------------------------------------------------- */
.navlink{color:var(--mut);border-bottom-color:transparent}
.navlink:hover,.navlink.on{color:var(--txt)}
.navlink.on{border-bottom-color:transparent}

/* ---- buttons: one strong action, everything else glass ------------------ */
.navbook,.ctas .go,.exp .book,.cta button,.who + .cta button{
  background:var(--brand);color:#fff;border:0;box-shadow:var(--brandglow);
  font-weight:700;letter-spacing:.01em;transition:transform .15s,box-shadow .15s
}
.navbook:hover,.ctas .go:hover,.exp .book:hover,.cta button:hover{filter:brightness(1.06)}
.navbook{padding:9px 18px}
.book,.zone .book{
  background:transparent;color:var(--txt);border:1px solid var(--line2);box-shadow:none;font-weight:700;
  transition:background .15s,border-color .15s
}
.book:hover,.zone .book:hover{background:var(--chiphover);border-color:var(--mut2)}
.ctas .ghost{background:rgba(10,10,15,.35);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ---- surfaces: glass with a fine light edge ----------------------------- */
.zone,.exp,.aud,.deals,.findus,.card.contacts,.cta{
  background:var(--card);border:1px solid var(--line);box-shadow:var(--hi);
}
html[data-theme="light"] .zone,html[data-theme="light"] .exp,html[data-theme="light"] .aud,
html[data-theme="light"] .deals,html[data-theme="light"] .findus,html[data-theme="light"] .card.contacts,
html[data-theme="light"] .cta{border-color:transparent;box-shadow:0 1px 2px rgba(17,17,26,.04),0 8px 24px rgba(17,17,26,.05)}
.zone.z-racing,.zone.z-vr,.zone.z-pc{background:var(--card);border-color:var(--line)}
/* A card on a photo keeps the photo; only the edge is glass. */
.zone.ph{border-color:var(--line);background:#111}
.zones .zone,.exp,.aud{transition:transform .2s,box-shadow .2s,border-color .2s}
a.zone:hover{border-color:var(--line2)}

/* The Level3 card: a hairline of the gradient, and nothing louder. */
.exp,.zone.z-lvl3:not(.ph){border:1px solid transparent;
  background:linear-gradient(var(--solid),var(--solid)) padding-box,var(--brand) border-box}

/* Small labels: quiet, spaced capitals; a zone label keeps its stripe colour. */
.zl,.phero .kick,.deals .kick,.exp .badge,.aud .zl{font-weight:700;letter-spacing:.16em}
.aud .zl{color:var(--mut)}
.exp .badge{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Feature chips: glass pills, not boxes. */
.feats span{background:var(--chip);border:1px solid var(--line);color:var(--txt);font-weight:600}

/* Prices: the figure in the text colour, set like a price, not a heading. */
.pr{font-weight:700;letter-spacing:-.01em}
.pr small{font-weight:500}

/* The status line. */
.now span{background:var(--chip);border:1px solid var(--line);font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.now span i{background:#2BD576;box-shadow:0 0 0 3px rgba(43,213,118,.18)}
.now span.off i{background:var(--mut2);box-shadow:none}

/* The closing band: a glass panel with the one strong button. */
.cta{color:var(--txt)}
.cta span{color:var(--mut)}

/* Contacts: glass pills. */
.cbtn{background:var(--chip);border:1px solid var(--line);color:var(--txt)}
.cbtn:hover{background:var(--chiphover)}
.findus a{background:var(--chip);color:var(--txt);border:1px solid var(--line2)}

/* ---- the booking sheet -------------------------------------------------- */
dialog.l3b{background:var(--solid);border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.55);font-family:inherit}
html[data-theme="light"] dialog.l3b{border-color:transparent;box-shadow:0 40px 120px rgba(17,17,26,.22)}
dialog.l3b::backdrop{background:rgba(6,6,10,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.l3b .c{background:var(--chip);border:1px solid transparent;color:var(--txt);font-weight:600}
.l3b .c:hover:not(:disabled){background:var(--chiphover)}
/* A choice: a fine ring of the gradient around it, the fill barely lit. */
.l3b .c.on{
  border:1.5px solid transparent;color:var(--txt);
  background:linear-gradient(color-mix(in srgb,var(--solid) 88%,#EA009A),color-mix(in srgb,var(--solid) 88%,#EA009A)) padding-box,var(--brand) border-box
}
.l3b .x{background:var(--chip);color:var(--txt)}
.l3b .foot{background:var(--solid);border-top:1px solid var(--line)}
.l3b .apps a{color:var(--mut);font-weight:600}
.l3b .apps i{box-shadow:0 6px 18px rgba(0,0,0,.25)}
.l3b .call i{background:#3A3B45;color:#fff}
html[data-theme="light"] .l3b .call i{background:#2B2C35}
.l3b .us i{background:var(--brand)}
.l3b .drow input,.l3b textarea{background:var(--chip);border:1px solid var(--line)}
.l3b .drow button{background:var(--brand);box-shadow:var(--brandglow)}
.l3b .tip{background:var(--txt);color:var(--bg)}

/* ---- each zone in its two colours ----------------------------------------
 * The stripe colour on the wall, and the partner it takes on the venue's
 * screens: red into orange, cyan into blue, magenta into violet. The label
 * carries both; the card is lit in them where the pointer rests. */
.zone.z-racing{--z:#FF4438;--z2:#FF6A00}
.zone.z-pc{--z:#22D3EE;--z2:#2E7DFF}
.zone.z-vr{--z:#EA009A;--z2:#7C1FFF}
.zone.z-lvl3{--z:#EA009A;--z2:#FF6A3D}
html[data-theme="light"] .zone.z-racing{--z:#D02A1E;--z2:#E85A00}
html[data-theme="light"] .zone.z-pc{--z:#0C7F96;--z2:#1F5FD6}
html[data-theme="light"] .zone.z-vr{--z:#C4007F;--z2:#6A1BD6}
.zone .zl{background:linear-gradient(90deg,var(--z),var(--z2));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:1}
.zone.ph .zl{background:linear-gradient(90deg,color-mix(in srgb,var(--z) 70%,#fff),color-mix(in srgb,var(--z2) 70%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:1}

.deals .kick{color:var(--mut)}
/* A surface that is a gradient needs a solid one beneath it to sit on. */
.zone,.aud,.deals,.findus,.card.contacts,.cta{background-color:var(--bg)}
.exp,.zone.z-lvl3:not(.ph){background:linear-gradient(var(--solid),var(--solid)) padding-box,var(--brand) border-box}

/* ---- the main button: solid, no gradient, no glow ------------------------
 * White on the dark theme, charcoal on the light one (owner, 22 Oct 2026:
 * "change color of the main button. dontlike it. gradient. no. something
 * professional" - chose white on dark). On the banner photo it is white in
 * both themes. */
:root{--cta:#F2F3F7;--ctatxt:#111218}
html[data-theme="light"]{--cta:#1E1F26;--ctatxt:#FFFFFF}
.navbook,.exp .book,.cta button,.l3b .drow button{background:var(--cta);color:var(--ctatxt);box-shadow:none}
.ctas .go{background:#FFFFFF;color:#111218;box-shadow:none}
.navbook:hover,.ctas .go:hover,.exp .book:hover,.cta button:hover{filter:none;opacity:.88}
.l3b .us i{background:var(--cta);color:var(--ctatxt)}

/* ---- the home page's zone tiles ------------------------------------------
 * The layout the owner picked: a tile without a photo is lit from its top
 * corner in its zone's colour, edged in it, and carries its from-price in
 * it. The Experience tile is gold, as it was. */
.zones .zone.z-gold{--z:#E8B23A;--z2:#F59E0B}
html[data-theme="light"] .zones .zone.z-gold{--z:#A86F00;--z2:#C2410C}
.zones a.zone:not(.ph){
  background:radial-gradient(120% 110% at 100% 0%,color-mix(in srgb,var(--z) 26%,transparent) 0%,transparent 62%),var(--solid);
  border:1px solid color-mix(in srgb,var(--z) 38%,var(--line))
}
html[data-theme="light"] .zones a.zone:not(.ph){
  background:radial-gradient(120% 110% at 100% 0%,color-mix(in srgb,var(--z) 12%,transparent) 0%,transparent 62%),var(--solid);
  border-color:color-mix(in srgb,var(--z) 28%,var(--line))
}
.zones a.zone .pr{margin-top:10px;font-size:14px;font-weight:700;color:var(--z)}
.zones a.zone.ph .pr{color:#fff}
.zones a.zone:not(.ph) h3{color:var(--txt)}
.zones a.zone:not(.ph) p{color:var(--mut)}
.deals .dl b{font-size:19px}
.deals .dl span{display:block;margin-top:2px}

/* ---- the brand palette -----------------------------------------------------
 * Black, white and the logo's red (#EF0F0F, Level3.Web/wwwroot/branding),
 * with the zones' stripe colours as accents. No blue in the neutrals: the
 * blue-grey that stood here was in no part of the brand (owner, 22 Oct
 * 2026: "current grey is not the brand color at all"). Red marks only small
 * things - on a dark page it reads as light and gets loud fast. */
:root{
  --bg:#0B0B0C; --top:#121213; --solid:#151516;
  --card:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --txt:#F5F5F5; --mut:rgba(245,245,245,.62); --mut2:rgba(245,245,245,.38);
  --chip:rgba(255,255,255,.055); --chiphover:rgba(255,255,255,.1);
  --red:#EF0F0F;
}
html[data-theme="light"]{
  --bg:#F5F5F5; --top:#FFFFFF; --solid:#FFFFFF; --card:#FFFFFF;
  --line:rgba(0,0,0,.07); --line2:rgba(0,0,0,.14);
  --txt:#111111; --mut:rgba(17,17,17,.62); --mut2:rgba(17,17,17,.40);
  --chip:rgba(0,0,0,.045); --chiphover:rgba(0,0,0,.08);
  --cta:#111111; --red:#D90D0D;
}
.phero .kick{color:var(--red);opacity:1}
/* Over the banner photo red cannot be read: the line stays white there. */
.stage .kick{color:#fff;opacity:.8}
.stage .now span i{background:#2BD576}
.stage .now span.off i{background:rgba(255,255,255,.5)}
.stage .dots button.on{background:#FF3B3B}

/* Light theme: a white page, cards marked by a fine edge and a soft shadow -
 * an off-white page read as grey (owner, 22 Oct 2026: "on safari still gray
 * color"). */
html[data-theme="light"]{--bg:#FFFFFF;--top:#FFFFFF}
html[data-theme="light"] .zone,html[data-theme="light"] .exp,html[data-theme="light"] .aud,
html[data-theme="light"] .deals,html[data-theme="light"] .findus,html[data-theme="light"] .card.contacts,
html[data-theme="light"] .cta{border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05)}
html[data-theme="light"] .exp{border-color:transparent}
/* Photo tiles keep the photo's dark shade in both themes; their price is white. */
.zones .zone.ph{background:#111;border-color:rgba(255,255,255,.08)}
.zones a.zone.ph .pr{color:#fff;opacity:.95}

/* ---- the prices page: neutral frames ---------------------------------------
 * Its cards are <div>s (the home page's tiles are links). No zone-coloured
 * edges, tints or prices here, and no gradient edge on the Experience card:
 * only the small zone label keeps its colour (owner, 22 Oct 2026: "prices
 * page to much magenta frames etc"). */
div.zone.z-racing,div.zone.z-vr,div.zone.z-pc,div.zone,.exp{
  border:1px solid var(--line);background:var(--card);background-color:var(--solid)
}
html[data-theme="light"] div.zone,html[data-theme="light"] .exp{border:1px solid rgba(0,0,0,.08);background:#fff}
div.zone .pr,div.zone .room .p,.exp .pr{color:var(--txt)}
.exp .badge{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--mut)}
.who + .cta button,.cta button{background:var(--cta);color:var(--ctatxt);box-shadow:none}


/* ---- flat cards ------------------------------------------------------------
 * The dark cards were a white-to-clear gradient over black, which read as
 * brushed metal (owner, 22 Oct 2026: "still strange metallic gray surface in
 * dark mode of the blocks"). One flat near-black, one shade off the page. */
:root{--card:#141415;--solid:#141415}
html[data-theme="light"]{--card:#FFFFFF;--solid:#FFFFFF}
.zone,.exp,.aud,.deals,.findus,.card.contacts,.cta,div.zone,div.zone.z-racing,div.zone.z-vr,div.zone.z-pc{background:var(--card);background-image:none}
.zones a.zone:not(.ph){background:var(--card)}
.feats span,.now span,.cbtn,.l3b .c,.l3b .x,.l3b .drow input,.l3b textarea{background-color:rgba(255,255,255,.06);background-image:none}
html[data-theme="light"] .feats span,html[data-theme="light"] .now span,html[data-theme="light"] .cbtn,
html[data-theme="light"] .l3b .c,html[data-theme="light"] .l3b .x,html[data-theme="light"] .l3b .drow input,
html[data-theme="light"] .l3b textarea{background-color:rgba(0,0,0,.045)}
/* A choice in the booking sheet: a white ring, not a magenta one. */
.l3b .c.on{border:1.5px solid var(--txt);background:rgba(255,255,255,.12);color:var(--txt)}
html[data-theme="light"] .l3b .c.on{background:rgba(0,0,0,.06)}

/* The light theme's main button is the logo red (#EF0F0F); dark keeps white. */
html[data-theme="light"]{--cta:#EF0F0F;--ctatxt:#FFFFFF}
html[data-theme="light"] .navbook:hover,html[data-theme="light"] .exp .book:hover,html[data-theme="light"] .cta button:hover{opacity:1;background:#D50C0C}
/* The small line beside a card's button. */
.buy .std{font-size:13px;color:var(--mut)}