/*
 * The website in "Vidrio aireado" (owner 11/11, workshop spec docs/revision-hd/art145-ui-moderna/vidrio at 8be6d35d9): dark glass panels with
 * a thin 1 px line and one radius, Inter, green accent and ONE pure white primary button with the green ring (Play now). Loaded after
 * web.css and ../css/vidrio.css: it only consumes the tokens of vidrio.css and replaces the 9-slice images of the Obsidiana kit
 * (box, box-title, btn, menu, playnow, page texture) on the markup the pages already have. No image of the kit is used by this sheet.
 */

:root {
  --display: var(--vd-font); --body: var(--vd-font);
  --bg-0: rgb(var(--vd-tint)); --bg-1: rgba(0, 0, 0, 0.28); --panel: rgba(var(--vd-tint), var(--vd-a-side));
  --surface: var(--vd-fill); --surface-hi: var(--vd-fill-hi); --border: var(--vd-line); --border-hi: var(--vd-line-hi);
  --text: var(--vd-text); --dim: var(--vd-dim); --soft: var(--vd-text);
  --accent-2: var(--accent-hi); --go: var(--good); --navy: #0B1016; --line: var(--vd-line);
}

html, body { font-size: 14px; -webkit-font-smoothing: antialiased; }
body.zw-page { background: radial-gradient(120% 90% at 50% 0%, rgba(30, 50, 90, 0.55), rgb(var(--vd-tint)) 70%) fixed, rgb(var(--vd-tint)); }
a { color: var(--accent-hi); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
h1 { font-weight: 500; letter-spacing: 0.04em; }
h2 { font-weight: 500; letter-spacing: 0.02em; }

/* Header: the picture fades into the page; the top bar is two loose pills */
.zw-header { border-bottom: 0; }
.zw-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; background: linear-gradient(180deg, transparent, rgb(var(--vd-tint))); }
.head-in { position: relative; z-index: 1; }
.topbar { z-index: 2; height: auto; padding: 12px 20px; background: none; align-items: center; }
.topbar .status { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid var(--vd-line); border-radius: var(--vd-r); background: rgba(var(--vd-tint), var(--vd-a-over)); -webkit-backdrop-filter: var(--vd-bf); backdrop-filter: var(--vd-bf); color: var(--vd-text); }
.dot { width: 8px; height: 8px; border-radius: 50%; outline: 0; }
.dot.up { box-shadow: 0 0 8px var(--good); }
.langs { gap: 4px; }
.langs button, .langs button:hover { min-width: 38px; height: 28px; border: 1px solid var(--vd-line); border-radius: var(--vd-r); background: rgba(var(--vd-tint), var(--vd-a-over)); color: var(--vd-text); font: 500 12px/1 var(--vd-font); letter-spacing: 0.02em; box-shadow: none; }
.langs button:hover { border-color: var(--vd-line-hi); }
.langs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Buttons: glass with a thin line (.vd-btn) */
.pill, button {
  min-height: var(--vd-h); padding: 0 16px; border: 1px solid var(--vd-line); border-image: none; border-radius: var(--vd-r);
  background: var(--vd-fill); color: var(--vd-text); font: 500 13px/1 var(--vd-font); letter-spacing: 0;
  transition: background var(--vd-t), border-color var(--vd-t), transform var(--vd-t);
}
.pill:hover, button:hover { border-image: none; background: var(--vd-fill-hi); border-color: var(--vd-line-hi); color: var(--vd-text); }
.pill:active, button:active { border-image: none; background: rgba(255, 255, 255, 0.2); transform: translateY(1px); }
button:disabled { border-image: none; opacity: 0.45; cursor: not-allowed; color: var(--vd-text); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* Play now: the only primary of the page. Pure white, green ring, dark halo */
.head-play, a.play, .head-play:hover, a.play:hover {
  height: 60px; padding: 0 34px 0 26px; gap: 12px; border: 0; border-image: none; border-radius: var(--vd-r);
  background: var(--btn-primary-bg); color: var(--btn-primary-ink); text-shadow: none; animation: none;
  font: 500 19px/1 var(--vd-font); letter-spacing: 0.14em;
  box-shadow: 0 0 0 2px var(--btn-primary-ring), 0 0 0 5px var(--btn-primary-halo), 0 8px 24px color-mix(in srgb, var(--btn-primary-ring) 38%, transparent), inset 0 -3px 0 var(--btn-primary-lip), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: none; transition: filter var(--vd-t);
}
.head-play:hover, a.play:hover { filter: brightness(1.04); }
.head-play:active, a.play:active { filter: brightness(0.95); transform: none; box-shadow: 0 0 0 2px var(--btn-primary-ring), 0 0 0 5px var(--btn-primary-halo), inset 0 -3px 0 var(--btn-primary-lip); }
.head-play::before, a.play::before { border-width: 8px 0 8px 14px; border-color: transparent transparent transparent var(--btn-primary-ink); filter: none; }
.head-play:focus-visible, a.play:focus-visible { outline-offset: 7px; }

/* Menu on the left */
.side h3 { border-bottom: 0; margin: 14px 0 4px; padding: 0 10px; color: var(--vd-dim); font: 500 10px var(--vd-font); letter-spacing: 0.1em; }
.side .zw-menu, .side .zw-menu:hover { border: 1px solid transparent; border-image: none; border-radius: var(--vd-r); padding: 0 10px; margin: 0 0 4px; color: var(--vd-text); font-weight: 400; font-size: 13px; letter-spacing: 0; }
.side .zw-menu:hover { background: var(--vd-fill); }
.side .zw-menu.is-active, .side .zw-menu[aria-current] { border-image: none; color: var(--vd-text); background: rgba(var(--vd-tint), var(--vd-a-over)); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.side .zw-menu img { width: 28px; height: 28px; margin-left: 0; }

/* Boxes: a glass panel. The title bar that sat on the box becomes its label, inside */
.box {
  border: 1px solid var(--vd-line); border-image: none; border-radius: var(--vd-r); padding: var(--vd-pad);
  background: rgba(var(--vd-tint), var(--vd-a-side)); -webkit-backdrop-filter: var(--vd-bf); backdrop-filter: var(--vd-bf);
  box-shadow: var(--vd-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.tab > h1, #news-list > h1, .aside h2.bar {
  height: 34px; margin: 0; padding: 14px var(--vd-pad) 0; border: 0; border-image: none; text-align: left;
  font: 500 11px/16px var(--vd-font); letter-spacing: 0.12em; color: var(--vd-dim);
}
.tab > h1 + .box, #news-list > h1 + .box, .aside h2.bar + .box { margin-top: -34px; padding-top: 40px; }
.box .box { background: var(--vd-fill-lo); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Fields */
input, select { min-height: var(--vd-h); border: 1px solid var(--vd-line); border-radius: var(--vd-r); background: var(--vd-fill-lo); color: var(--vd-text); font: 400 13px var(--vd-font); }
input::placeholder { color: var(--vd-mute); }
input:hover, select:hover { border-color: var(--vd-line-hi); }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
label.check input[type="checkbox"] { accent-color: var(--check); }

/* The three steps, numbers of the side column */
.steps a { font-weight: 400; }
.steps b { width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--vd-r); outline: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-hi); font-weight: 400; font-size: 15px; }
.steps a:hover b { background: var(--accent); color: var(--accent-ink); }
.side-online b, .side-online strong { font-weight: 300; }

@media (pointer: coarse) { .pill, button, input, select { min-height: 44px; } .langs button, .langs button:hover { height: 32px; min-height: 0; } }

/* The labels carry no fill of their own, the boxes keep 14 px between them, and on low or narrow screens the logo sits under the pills */
.tab > h1, #news-list > h1, .aside h2.bar, h2.bar { background: none; }
.box { margin-bottom: 14px; }
#news-list > h1 { margin-top: 0; }
@media (max-width: 900px) { .topbar { padding: 6px 10px; } .head-in { padding-top: 40px; } .logo { height: 76px; } .head-play, a.play, .head-play:hover, a.play:hover { height: 48px; padding: 0 20px 0 16px; font-size: 16px; } }

/* The header picture (owner 11/11: his sunset illustration with the four vocations, instead of the map of the kit). Taller, so the four
   are seen from the back over the valley; the logo and Play now sit on the sky */
.zw-header { height: 400px; background: rgb(var(--vd-tint)) url(img/hero/fondo.webp) center 62% / cover no-repeat; }
.zw-header::after { height: 130px; }
.head-in { padding-top: 48px; }
.logo { height: 150px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55)); }
.head-play { margin-top: 44px; }
@media (max-width: 900px) { .zw-header { height: 200px; background-image: url(img/hero/fondo-960.webp); background-position: center 58%; } .zw-header::after { height: 70px; } .logo { height: 76px; } .head-play { margin-top: 6px; } }
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) { .zw-header { background-image: url(img/hero/fondo.webp); } }

/* Owner 11/11: the page keeps its navy; the header picture is the see-through one, so its warm colours sink into the navy instead of
   meeting it at a line. The picture is drawn in ::before at 70 % and fades out over its lower half */
.zw-header { background: rgb(var(--vd-tint)); }
.zw-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(img/hero/fondo.webp) center 62% / cover no-repeat; opacity: 0.7;
  -webkit-mask: linear-gradient(180deg, #000 45%, transparent 100%); mask: linear-gradient(180deg, #000 45%, transparent 100%);
}
.zw-header::after { display: none; }
@media (max-width: 900px) { .zw-header::before { background-image: url(img/hero/fondo-960.webp); background-position: center 58%; } }

/* "Your adventure. On any device." (owner 11/11, as Minibia's home): the text, real captures of the game in a laptop and two phones, and
   three cards (computer, phone, browser) */
.devices { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px 18px; align-items: center; }
.dev-title { margin: 0 0 10px; font-size: 26px; line-height: 1.12; font-weight: 600; letter-spacing: 0; text-transform: none; }
.dev-title span, .dev-title em { display: block; }
.dev-title em { font-style: normal; color: var(--accent-hi); }
.dev-lead { margin: 0 0 8px; font-size: 15px; color: var(--vd-text); }
.dev-sub { margin: 0; color: var(--vd-dim); font-size: 13px; }
.dev-shots { position: relative; margin: 0; aspect-ratio: 16 / 11; }
.dev-laptop { position: absolute; left: 4%; top: 0; width: 86%; padding: 3.5% 3.5% 4.5%; border-radius: 10px; background: #0b0f1a; border: 1px solid var(--vd-line-hi); box-shadow: var(--vd-shadow); }
.dev-laptop::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -5%; height: 5%; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #2a3142, #151a26); }
.dev-phone { position: absolute; padding: 2.2%; border-radius: 14px; background: #0b0f1a; border: 1px solid var(--vd-line-hi); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); }
.dev-phone--land { left: 0; bottom: 10%; width: 56%; }
.dev-phone--port { right: 0; bottom: 4%; width: 22%; }
.dev-shots img { display: block; width: 100%; height: auto; border-radius: 6px; }
.dev-shots figcaption { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; font-size: 11px; color: var(--vd-dim); }
.dev-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.dev-card { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--vd-line); border-radius: var(--vd-r); background: var(--vd-fill-lo); color: var(--vd-text); text-decoration: none; transition: border-color var(--vd-t), background var(--vd-t); }
.dev-card:hover { border-color: var(--vd-line-hi); background: var(--vd-fill); color: var(--vd-text); }
.dev-card .vd-ico { width: 34px; height: 34px; color: var(--accent-hi); flex: none; }
.dev-card span { display: flex; flex-direction: column; min-width: 0; }
.dev-card small { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vd-dim); }
.dev-card b { font-weight: 600; font-size: 14px; }
.dev-card i { font-style: normal; font-size: 12px; color: var(--accent-hi); }
@media (max-width: 900px) {
  .devices { grid-template-columns: 1fr; }
  .dev-cards { grid-template-columns: 1fr; }
  .dev-title { font-size: 22px; }
}

/* How to play: the steps to add the game to the home screen, iPhone and Android side by side */
.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.install-grid > div { padding: 12px 14px; border: 1px solid var(--vd-line); border-radius: var(--vd-r); background: var(--vd-fill-lo); }
.install-grid h3 { margin: 0 0 8px; font: 600 14px var(--vd-font); color: var(--accent-hi); letter-spacing: 0; text-transform: none; border: 0; padding: 0; }
.install-grid ol { margin: 0; padding-left: 20px; } .install-grid li { margin: 0 0 6px; }
@media (max-width: 900px) { .install-grid { grid-template-columns: 1fr; } }

/* The copyright notice under the footer links (owner 11/11) */
.foot .foot-legal { display: block; max-width: 760px; margin: 6px auto 0; font-size: 11.5px; line-height: 1.45; color: var(--vd-mute); }

/* Zillaz NFT: what it gives today and the 2.0 swap (1 Zilla + 1 Baby Zilla -> 1 Zillaz 2.0, the old ones burned) */
.nft-list { margin: 0; padding-left: 20px; } .nft-list li { margin: 0 0 6px; }
.nft-swap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.nft-swap > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; text-align: center; border: 1px solid var(--vd-line); border-radius: var(--vd-r); background: var(--vd-fill-lo); }
.nft-swap b { font-size: 24px; font-weight: 300; color: var(--accent-hi); }
.nft-note { color: var(--vd-dim); font-size: 13px; margin: 0; }
@media (max-width: 600px) { .nft-swap { grid-template-columns: 1fr; } }

/* The menu's illustrated icons of the workshop (art167: an object and a small Zilla, 128 px native), shown at 44 px */
.side .zw-menu { height: 52px; }
.side .zw-menu img { width: 44px; height: 44px; }
@media (max-width: 600px) { .side .zw-menu { height: 48px; padding: 0 2px; justify-content: center; } .side .zw-menu img { width: 40px; height: 40px; } }