/* ==========================================================================
   PixelCortex studio chrome for hosted games (see studio.js).
   Studio print look, same as the site: cream paper, ink, flat inks, hard offset shadows. No glow.
   A game pads its non-game screens by var(--pc-bar) so nothing sits under the bar.
   ========================================================================== */

@font-face { font-family: 'PC Display'; src: url('fonts/anybody.woff2') format('woff2-variations'), url('fonts/anybody.woff2') format('woff2'); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: 'PC Body'; src: url('fonts/geist.woff2') format('woff2-variations'), url('fonts/geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'PC Pixel'; src: url('../laya/fonts/silkscreen-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'PC Pixel'; src: url('../laya/fonts/pc-arrows.woff2') format('woff2'); unicode-range: U+2190-2193, U+2196-2197, U+25B6, U+25B8, U+25AE, U+2726, U+2713, U+275A; }

:root {
  --pc-bar: 0px;
  --pc-ink: #14120e;
  --pc-shadow: #000;
  --pc-paper: #f1e9dc;
  --pc-paper-2: #e7dcca;
  --pc-paper-3: #d6c8b1;
  --pc-red: #e5392a;
  --pc-yellow: #ffbf1f;
  --pc-muted: #6b6356;
  --pc-gut: clamp(12px, 2.4vw, 28px);
}
html.pc-studio { --pc-bar: 68px; }
/* A match is on: the bar gets out of the way. */
html.pc-studio:has(#app[data-screen='game']) { --pc-bar: 0px; }

/* ------------------------------------------------------------------ bar */

.pcbar {
  position: fixed; top: 12px; left: var(--pc-gut); right: var(--pc-gut); z-index: 55;
  display: flex; align-items: center; gap: 8px; height: 44px;
  font: 11px/1 'PC Pixel', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--pc-ink); pointer-events: none; -webkit-font-smoothing: antialiased;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, visibility 0s;
}
.pcbar *, .pcbar *::before, .pcbar *::after { box-sizing: border-box; }
html.pc-studio:has(#app[data-screen='game']) .pcbar { transform: translateY(-150%); opacity: 0; visibility: hidden; transition: transform 0.35s, opacity 0.2s, visibility 0s 0.35s; }
.pcbar > * { pointer-events: auto; }
.pcbar a { color: inherit; text-decoration: none; }

.pcbar__seg {
  height: 44px; display: flex; align-items: center; flex: none;
  background: var(--pc-paper); color: var(--pc-ink);
  border: 2.5px solid var(--pc-ink); border-radius: 11px; box-shadow: 3px 3px 0 var(--pc-shadow);
}
.pcbar__brand { gap: 9px; padding: 0 14px 0 10px; transition: transform 0.12s, box-shadow 0.12s; }
.pcbar__brand:hover, .pcbar__brand:focus-visible { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--pc-shadow); outline: none; }
.pcbar__brand .logo-mark { width: 28px; height: auto; display: block; }
.pcbar__brand:hover .logo-accent { fill: var(--pc-yellow); }
.pcbar__word { font: 900 15px/1 'PC Display', 'Arial Black', system-ui, sans-serif; font-stretch: 140%; letter-spacing: -0.01em; text-transform: none; }

.pcbar__crumbs { flex: 0 1 auto; min-width: 0; gap: 2px; padding: 0 5px; margin-right: auto; }
.pcbar__crumbs a { flex: none; padding: 8px 10px 7px; border-radius: 7px; transition: background 0.15s; }
.pcbar__crumbs a:hover, .pcbar__crumbs a:focus-visible { background: var(--pc-yellow); outline: none; }
.pcbar__sep { flex: none; color: var(--pc-paper-3); }
.pcbar__here { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 10px 7px 6px; }
.pcbar__here i { flex: none; width: 9px; height: 9px; background: var(--pc-accent, var(--pc-red)); box-shadow: 1.5px 1.5px 0 var(--pc-ink); }
.pcbar__here span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pcbar__cabs { gap: 9px; padding: 0 12px 0 14px; font: inherit; text-transform: inherit; cursor: pointer; transition: background 0.15s; }
.pcbar__cabs:hover, .pcbar__cabs:focus-visible, .pcbar__cabs[aria-expanded='true'] { background: var(--pc-yellow); outline: none; }
.pcbar__cabs b { font-weight: 400; padding: 4px 5px 3px; color: var(--pc-paper); background: var(--pc-ink); border-radius: 4px; }
.pcbar__cabs i { font-style: normal; display: inline-block; transition: transform 0.2s; }
.pcbar__cabs[aria-expanded='true'] i { transform: rotate(90deg); }

/* ------------------------------------------------------------------ cabinet menu */

.pcbar__menu {
  position: absolute; top: calc(100% + 12px); right: 0; width: min(390px, calc(100vw - 2 * var(--pc-gut)));
  padding: 14px; color: var(--pc-ink); background: var(--pc-paper);
  border: 2.5px solid var(--pc-ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--pc-shadow);
  transform-origin: top right; animation: pcbar-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pcbar__menu[hidden] { display: none; }
@keyframes pcbar-in { from { transform: translateY(-6px) scale(0.97); opacity: 0; } }
.pcbar__k { display: flex; justify-content: space-between; margin: 2px 2px 10px; color: var(--pc-muted); }
.pcbar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pcbar__cab {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 6px 10px 6px 6px; background: var(--pc-paper-2); border: 2px solid var(--pc-ink); border-radius: 10px;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
a.pcbar__cab:hover, a.pcbar__cab:focus-visible { background: var(--pc-yellow); transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--pc-ink); outline: none; }
.pcbar__cab img, .pcbar__q { width: 78px; height: 50px; border: 2px solid var(--pc-ink); border-radius: 6px; display: block; object-fit: cover; background: var(--pc-ink); }
.pcbar__q { display: grid; place-items: center; color: var(--pc-paper-3); font-size: 18px; background: repeating-linear-gradient(45deg, #211e18 0 6px, #2e2a22 6px 12px); }
.pcbar__cab b { display: block; font: 900 15px/1.05 'PC Display', 'Arial Black', system-ui, sans-serif; font-stretch: 112%; text-transform: none; }
.pcbar__cab small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.2; color: var(--pc-muted); }
.pcbar__cab em { font-style: normal; font-size: 10px; padding: 5px 7px 4px; color: var(--pc-paper); background: var(--pc-ink); border-radius: 5px; white-space: nowrap; }
.pcbar__cab.is-here { background: var(--pc-paper); border-style: dashed; }
.pcbar__cab.is-here em { background: var(--pc-accent, var(--pc-red)); color: var(--pc-ink); box-shadow: 1.5px 1.5px 0 var(--pc-ink); }
.pcbar__cab.is-locked { background: transparent; border-style: dashed; border-color: var(--pc-paper-3); }
.pcbar__cab.is-locked b, .pcbar__cab.is-locked small { color: var(--pc-muted); }
.pcbar__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 2px dashed var(--pc-paper-3); }
.pcbar__foot a { padding: 8px 9px 7px; border: 2px solid var(--pc-ink); border-radius: 7px; transition: background 0.15s; }
.pcbar__foot a:hover, .pcbar__foot a:focus-visible { background: var(--pc-yellow); outline: none; }

/* ------------------------------------------------------------------ "A PixelCortex game" stamp */

.pc-stamp {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 13px 7px 9px;
  color: var(--pc-ink); background: var(--pc-paper); text-decoration: none; text-align: left;
  border: 2.5px solid var(--pc-ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--pc-shadow);
  transform: rotate(-2deg); transition: transform 0.15s, box-shadow 0.15s; -webkit-font-smoothing: antialiased;
}
.pc-stamp:hover, .pc-stamp:focus-visible { transform: rotate(-2deg) translate(-1px, -2px); box-shadow: 5px 5px 0 var(--pc-shadow); outline: none; }
.pc-stamp .logo-mark { width: 32px; height: auto; display: block; flex: none; }
.pc-stamp b { display: block; font: 900 13px/1 'PC Display', 'Arial Black', system-ui, sans-serif; font-stretch: 135%; text-transform: uppercase; letter-spacing: 0; }
.pc-stamp small { display: block; margin-top: 4px; font: 9.5px/1.2 'PC Pixel', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0; color: var(--pc-muted); }

/* ------------------------------------------------------------------ pixel wipe between the site and the games */

.pc-wipe { position: fixed; inset: 0; z-index: 2147482000; width: 100%; height: 100%; pointer-events: none; }
html.pc-covered::after { content: ''; position: fixed; inset: 0; z-index: 2147482001; background: #0d0c0a; }

/* ------------------------------------------------------------------ small screens */

@media (max-width: 760px) {
  html.pc-studio { --pc-bar: 58px; }
  .pcbar { top: 8px; height: 40px; gap: 6px; }
  .pcbar__seg { height: 40px; border-radius: 10px; }
  .pcbar__brand { padding: 0 10px 0 9px; }
  .pcbar__word, .pcbar__sep, .pcbar__here { display: none; }
  .pcbar__cabs { padding: 0 10px; }
  .pcbar__cabs span { display: none; }
}
/* Short screens (laptops): a slimmer bar keeps the title screens on one screen. */
@media (max-height: 820px) and (min-width: 761px) {
  html.pc-studio { --pc-bar: 58px; }
  .pcbar { top: 8px; height: 40px; }
  .pcbar__seg { height: 40px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcbar, .pcbar__menu, .pcbar__cab, .pc-stamp { transition: none; animation: none; }
}