/* Bertopia digital chrome. Colours live in --kd-*. Sizes come from --ks-* (kulibert-scale.css). */
:root {
  --kd-navy: #0a1428;
  --kd-navy-2: #16264a;
  --kd-key-top: #24406e;
  --kd-edge: #2f5a8a;
  --kd-bevel: #0c1830;
  --kd-teal: #2dd4bf;
  --kd-teal-2: #7ff5e3;
  --kd-trace: #145e56;
  --kd-orange: #ff8a1f;
  --kd-orange-2: #ffb36b;
  --kd-text: #e6f6ff;
  --kd-ink: #041410;
  --kd-red: #9f1239;
  --kd-red-text: #fff7ed;
}

.kd-panel {
  position: relative;
  box-sizing: border-box;
  width: var(--ks-panel-w);
  max-width: 100%;
  max-height: var(--ks-panel-h);
  color: var(--kd-text);
  background-color: var(--kd-navy);
  background-image:
    radial-gradient(circle at 8px 8px, var(--kd-teal) 1.5px, transparent 2px),
    radial-gradient(circle at 40px 40px, var(--kd-trace) 2px, transparent 2.6px),
    linear-gradient(90deg, transparent 10px, var(--kd-trace) 10px, var(--kd-trace) 12px, transparent 12px),
    linear-gradient(transparent 22px, var(--kd-trace) 22px, var(--kd-trace) 24px, transparent 24px),
    linear-gradient(var(--kd-navy-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--kd-navy-2) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 2px solid var(--kd-teal);
  border-radius: var(--ks-radius);
  box-shadow: 0 0 14px var(--kd-teal), inset 0 0 0 1px rgba(45, 212, 191, .35);
  padding: var(--ks-pad);
  overflow: visible;
}
.kd-panel::before,
.kd-panel::after {
  content: "";
  position: absolute;
  top: 0;
  height: calc(var(--ks-pad) / 3);
  width: calc(var(--ks-touch) * .8);
  background: var(--kd-orange);
  pointer-events: none;
  z-index: 2;
}
.kd-panel::before { inset-inline-start: var(--ks-pad); }
.kd-panel::after { inset-inline-start: calc(var(--ks-pad) + var(--ks-touch) * 1.15); }

.kd-plate {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ks-gap);
  min-width: 0;
  min-height: var(--ks-touch);
  padding: calc(var(--ks-pad) / 3) var(--ks-pad);
  border: 1px solid var(--kd-teal);
  border-radius: var(--ks-radius);
  background-color: rgba(10, 28, 40, .72);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(127, 245, 227, .16) 0 1px,
    transparent 1px 3px
  );
  box-shadow: inset 0 0 12px rgba(45, 212, 191, .35);
  overflow: hidden;
}
.kd-plate canvas {
  display: block;
  height: calc(var(--ks-touch) - var(--ks-pad));
  width: auto;
  max-width: calc(100% - var(--ks-touch) * 1.6);
  image-rendering: pixelated;
  flex: 0 1 auto;
}
.kd-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: calc(var(--ks-touch) * .5);
  padding: 0 calc(var(--ks-pad) / 2);
  border-radius: calc(var(--ks-radius) / 2);
  background: var(--kd-orange);
  color: var(--kd-ink);
  font-size: var(--ks-fs-xs);
  font-weight: 800;
  line-height: 1.2;
}
.kd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.kd-key,
.kd-go,
.kd-x {
  box-sizing: border-box;
  min-width: var(--ks-touch);
  min-height: var(--ks-touch);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--ks-gap) + 2px);
  padding: calc(var(--ks-pad) / 3) var(--ks-pad);
  border: 1px solid var(--kd-edge);
  border-bottom: calc(var(--ks-pad) / 4) solid var(--kd-bevel);
  border-radius: calc(var(--ks-radius) / 2);
  background: linear-gradient(180deg, var(--kd-key-top), var(--kd-navy-2));
  color: var(--kd-text);
  font-size: var(--ks-fs-s);
  font-weight: 700;
  line-height: 1.15;
  text-align: start;
  box-shadow: none;
}
.kd-key .gic,
.kd-x .gic {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  font-size: 0;
}
.kd-key canvas,
.kd-x canvas,
.kd-ico {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  display: block;
  pointer-events: none;
}
.kd-key .glbl {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  text-align: start;
  font-size: var(--ks-fs-s);
  font-weight: 700;
  color: var(--kd-text);
}
.kd-key:hover,
.kd-x:hover {
  box-shadow: 0 0 10px var(--kd-teal);
  border-color: var(--kd-teal);
}
.kd-key:active,
.kd-go:active,
.kd-x:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
}
.kd-key:focus-visible,
.kd-go:focus-visible,
.kd-x:focus-visible {
  outline: 2px solid var(--kd-orange);
  outline-offset: 2px;
}

.kd-go {
  width: 100%;
  justify-content: center;
  min-height: calc(var(--ks-touch) + var(--ks-pad));
  background: var(--kd-teal);
  color: var(--kd-ink);
  border-color: var(--kd-teal-2);
  border-bottom-color: #0d6b60;
  box-shadow: 0 0 12px var(--kd-teal);
}
.kd-go .glbl { color: var(--kd-ink); text-align: center; }
.kd-go:hover { box-shadow: 0 0 16px var(--kd-teal); }

.kd-exit {
  background: var(--kd-red);
  color: var(--kd-red-text);
  border-color: #f43f5e;
  border-bottom-color: #4c0519;
}
.kd-exit .glbl { color: var(--kd-red-text); }
.kd-exit:hover { box-shadow: 0 0 10px #fb7185; }

.kd-x {
  justify-content: center;
  padding: 0;
  width: var(--ks-touch);
  flex: 0 0 auto;
}

.kd-group {
  display: flex;
  flex-direction: column;
  gap: var(--ks-gap);
  min-width: 0;
  min-height: 0;
}
.kd-group .kd-key { width: 100%; }
.kd-glab {
  display: flex;
  align-items: center;
  gap: calc(var(--ks-gap));
  margin: 0;
  max-width: 100%;
  width: fit-content;
  padding: 1px calc(var(--ks-pad) / 3);
  background: rgba(10, 20, 40, .88);
  color: var(--kd-teal-2);
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-size: var(--ks-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
}
.kd-prompt { color: var(--kd-orange); }
.kd-tag {
  display: inline-flex;
  align-items: center;
  margin-inline-start: calc(var(--ks-gap));
  padding: 0 calc(var(--ks-pad) / 2);
  border: 1px solid var(--kd-orange);
  border-radius: calc(var(--ks-radius) / 2);
  color: var(--kd-orange-2);
  font-size: var(--ks-fs-xs);
  font-weight: 700;
  line-height: 1.2;
}
.kd-teacher {
  outline: 2px solid var(--kd-orange);
  outline-offset: 2px;
  border-radius: calc(var(--ks-radius) / 2);
  padding: calc(var(--ks-pad) / 3);
}

.kd-card,
.kd-tip {
  background: var(--kd-navy);
  color: var(--kd-text);
  border: 1px solid var(--kd-teal);
  border-inline-start: calc(var(--ks-pad) / 3) solid var(--kd-orange);
  border-radius: var(--ks-radius);
  font-size: var(--ks-fs-s);
  font-weight: 700;
}
.kd-card { padding: var(--ks-pad); }
.kd-tip { padding: calc(var(--ks-pad) / 2) var(--ks-pad); border-radius: calc(var(--ks-radius) / 2); }
.kd-hotbar {
  background: rgba(10, 20, 40, .85);
  color: var(--kd-text);
  border: 1px solid #2f5a8a;
  border-radius: var(--ks-radius);
  box-shadow: none;
}

#sheet[data-panel="menu"] {
  align-items: center;
  justify-content: center;
  padding: var(--ks-pad);
  background: rgba(4, 8, 18, .72);
  overflow: hidden;
}
#sheet[data-panel="menu"] .sheet-bar { display: none; }
#sheet[data-panel="menu"] #sheet-body {
  flex: 0 1 auto;
  width: var(--ks-panel-w);
  max-width: 100%;
  max-height: min(var(--ks-panel-h), 100%);
  min-height: 0;
  overflow: visible;
  background: transparent;
  display: flex;
}
#sheet[data-panel="menu"] .ggrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto minmax(0, auto);
  grid-template-areas:
    "plate exit close"
    "go go go"
    "groups groups groups";
  align-items: center;
  gap: var(--ks-gap);
  width: 100%;
  max-height: 100%;
  overflow: visible;
  padding: var(--ks-pad);
}
#sheet[data-panel="menu"] .kd-plate { grid-area: plate; }
#sheet[data-panel="menu"] .kd-exit { grid-area: exit; }
#sheet[data-panel="menu"] .kd-x { grid-area: close; }
#sheet[data-panel="menu"] .kd-go { grid-area: go; }
#sheet[data-panel="menu"] .kd-groups {
  grid-area: groups;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ks-gap);
  min-width: 0;
  min-height: 0;
  align-items: start;
  overflow: hidden;
}
html[dir="rtl"] #sheet[data-panel="menu"] .ggrid,
html[dir="rtl"] #sheet[data-panel="menu"] .kd-groups { direction: rtl; }

@media (max-width: 699px) {
  #sheet[data-panel="menu"] .kd-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-y: auto;
  }
}
@media (max-height: 500px) {
  #sheet[data-panel="menu"] { padding: calc(var(--ks-pad) / 3); }
  #sheet[data-panel="menu"] .ggrid,
  #sheet[data-panel="menu"] .kd-panel { padding: calc(var(--ks-pad) / 3); gap: 2px; }
  #sheet[data-panel="menu"] .kd-go { min-height: var(--ks-touch); }
  #sheet[data-panel="menu"] .kd-group { gap: 2px; }
  #sheet[data-panel="menu"] .kd-glab { font-size: var(--ks-fs-xs); line-height: 1.05; }
  #sheet[data-panel="menu"] .kd-key .glbl { white-space: nowrap; display: block; -webkit-line-clamp: 1; }
  #sheet[data-panel="menu"] .kd-groups { overflow: hidden; }
}
@media (max-width: 699px) and (min-height: 500px) {
  #sheet[data-panel="menu"] .kd-groups { overflow-y: auto; }
}

html[data-kp-contrast="1"] #sheet[data-panel="menu"] .kd-panel {
  background-image: none;
  outline: 3px solid var(--kd-text);
}
html[data-kp-motion="less"] .kd-key,
html[data-kp-motion="less"] .kd-go,
html[data-kp-motion="less"] .kd-x { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .kd-key:active, .kd-go:active, .kd-x:active,
  #sheet.kd-panel .keycap:active, #sheet.kd-panel .gtile:active,
  #sheet.kd-panel #sheet-x:active, #sheet.kd-panel #sheet-back:active,
  #hotbar.kd-hotbar .bag-tile:active { transform: none; }
}
html[data-kp-motion="less"] .kd-key:active,
html[data-kp-motion="less"] .kd-go:active,
html[data-kp-motion="less"] .kd-x:active,
html[data-kp-motion="less"] #sheet.kd-panel .keycap:active,
html[data-kp-motion="less"] #sheet.kd-panel .gtile:active,
html[data-kp-motion="less"] #hotbar.kd-hotbar .bag-tile:active { transform: none; }

/* Panels other than the pause menu. #sheet stays full-bleed; the class turns the chrome digital. */
#sheet.kd-panel {
  width: auto;
  max-width: none;
  max-height: none;
  overflow: hidden;
  color: var(--kd-text);
  background-color: rgba(4, 8, 18, .72);
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#sheet.kd-panel::before,
#sheet.kd-panel::after { content: none; }
#sheet.kd-panel .sheet-bar.kd-plate::before,
#sheet.kd-panel .sheet-bar.kd-plate::after {
  content: "";
  position: absolute;
  top: 0;
  height: calc(var(--ks-pad) / 3);
  width: calc(var(--ks-touch) * .8);
  background: var(--kd-orange);
  pointer-events: none;
  z-index: 3;
}
#sheet.kd-panel .sheet-bar.kd-plate::before { inset-inline-start: var(--ks-pad); }
#sheet.kd-panel .sheet-bar.kd-plate::after { inset-inline-start: calc(var(--ks-pad) + var(--ks-touch) * 1.15); }
#sheet.kd-panel .sheet-bar.kd-plate {
  position: sticky;
  top: 0;
  z-index: 2;
  overflow: visible;
  width: var(--ks-panel-w);
  max-width: 100%;
  box-sizing: border-box;
  color: var(--kd-text);
  background-color: var(--kd-navy);
  background-image:
    radial-gradient(circle at 8px 8px, var(--kd-teal) 1.5px, transparent 2px),
    linear-gradient(var(--kd-navy-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--kd-navy-2) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 2px solid var(--kd-teal);
  border-bottom: 0;
  border-radius: var(--ks-radius) var(--ks-radius) 0 0;
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .35);
}
#sheet.kd-panel #sheet-body {
  color: var(--kd-text);
  background-color: var(--kd-navy);
  background-image:
    radial-gradient(circle at 40px 40px, var(--kd-trace) 2px, transparent 2.6px),
    linear-gradient(var(--kd-navy-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--kd-navy-2) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 2px solid var(--kd-teal);
  border-top: 0;
  border-radius: 0 0 var(--ks-radius) var(--ks-radius);
  box-shadow: 0 0 14px rgba(45, 212, 191, .35), inset 0 0 0 1px rgba(45, 212, 191, .35);
}
#sheet.kd-panel #sheet-title {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-size: var(--ks-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--kd-teal-2);
  background: rgba(10, 20, 40, .88);
}
#sheet.kd-panel #sheet-title::before { content: ">_ "; color: var(--kd-orange); }
#sheet.kd-panel .gnote.ghead,
#sheet.kd-panel .crate-tab,
#sheet.kd-panel .machine-name,
#sheet.kd-panel .kd-glab {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-size: var(--ks-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--kd-teal-2);
  background: rgba(10, 20, 40, .88);
  width: fit-content;
  max-width: 100%;
}
#sheet.kd-panel .kd-glab:not(:has(.kd-prompt))::before,
#sheet.kd-panel .gnote.ghead::before,
#sheet.kd-panel .crate-tab::before,
#sheet.kd-panel .machine-name::before { content: ">_ "; color: var(--kd-orange); }
#sheet.kd-panel .ks-lab {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-size: var(--ks-fs-xs);
  font-weight: 700;
  color: var(--kd-teal-2);
  background: transparent;
  width: auto;
  white-space: normal;
}
#sheet.kd-panel .keycap,
#sheet.kd-panel .gtile:not(.well):not(.ks-slot):not(.wall-slot),
#sheet.kd-panel .ks-choice,
#sheet.kd-panel #sheet-x,
#sheet.kd-panel #sheet-back {
  background: linear-gradient(180deg, var(--kd-key-top), var(--kd-navy-2));
  color: var(--kd-text);
  border: 1px solid var(--kd-edge);
  border-bottom: calc(var(--ks-pad) / 4) solid var(--kd-bevel);
  box-shadow: none;
  font-size: var(--ks-fs-s);
  font-weight: 700;
}
#sheet.kd-panel .keycap.make,
#sheet.kd-panel .keycap.shop-go,
#sheet.kd-panel .keycap.xmax-yes,
#sheet.kd-panel .bed-rest,
#sheet.kd-panel .decor-make,
#sheet.kd-panel .kd-go {
  width: auto;
  background: var(--kd-teal);
  color: var(--kd-ink);
  border-color: var(--kd-teal-2);
  border-bottom-color: #0d6b60;
  box-shadow: 0 0 12px var(--kd-teal);
}
#sheet.kd-panel .keycap.make .glbl,
#sheet.kd-panel .kd-go .glbl { color: var(--kd-ink); }
#sheet.kd-panel .ks-slot,
#sheet.kd-panel .well,
#hotbar.kd-hotbar .slot {
  background-color: #050b18;
  background-image: none;
  border: 2px solid #1c3354;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(28, 51, 84, .85);
  outline: 1px dashed rgba(159, 184, 208, .45);
  outline-offset: calc(var(--ks-pad) / -3);
  color: #fff;
}
#sheet.kd-panel .ks-slot:hover,
#sheet.kd-panel .well:hover,
#hotbar.kd-hotbar .slot:hover {
  border-color: var(--kd-teal);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), 0 0 10px var(--kd-teal);
}
#sheet.kd-panel .ks-slot:focus-visible,
#sheet.kd-panel .well:focus-visible,
#sheet.kd-panel .keycap:focus-visible,
#sheet.kd-panel .gtile:focus-visible,
#sheet.kd-panel .ks-choice:focus-visible,
#sheet.kd-panel #sheet-x:focus-visible,
#sheet.kd-panel #sheet-back:focus-visible,
#hotbar.kd-hotbar .slot:focus-visible,
#hotbar.kd-hotbar .bag-tile:focus-visible {
  outline: 2px solid var(--kd-orange);
  outline-offset: 2px;
}
#sheet.kd-panel .ks-slot.ks-pick,
#sheet.kd-panel .ks-slot[aria-pressed="true"],
#sheet.kd-panel .well.on,
#sheet.kd-panel .well.pick,
#sheet.kd-panel .keycap.on,
#sheet.kd-panel .gtile.on,
#hotbar.kd-hotbar .slot[aria-pressed="true"] {
  border-color: var(--kd-orange);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55), 0 0 12px var(--kd-orange);
}
#sheet.kd-panel .slot-fuel { border-color: var(--kd-orange-2); }
#sheet.kd-panel .slot-out,
#sheet.kd-panel .slot-output,
#sheet.kd-panel .well.result { border-color: var(--kd-teal); }
#sheet.kd-panel .ks-badge,
#sheet.kd-panel .badge,
#sheet.kd-panel .count,
#hotbar.kd-hotbar .count,
#hotbar.kd-hotbar .digit {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-size: var(--ks-fs-xs);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: transparent;
  text-shadow: 0 1px 0 #041018, 1px 0 0 #041018, -1px 0 0 #041018, 0 -1px 0 #041018;
}
#sheet.kd-panel .book .well,
#sheet.kd-panel .book .well.wide {
  border: 2px solid #1c3354;
  background-color: #050b18;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55);
}
#sheet.kd-panel .wlab,
#sheet.kd-panel .book .well .wlab {
  color: #9fb8d0;
  font-size: var(--ks-fs-s);
}
#sheet.kd-panel .arrow-bar,
#sheet.kd-panel .kd-track {
  background-color: #050b18;
  box-shadow: inset 0 0 0 2px #1c3354, inset 0 2px 6px rgba(0, 0, 0, .6);
}
#sheet.kd-panel .arrow-fill,
#sheet.kd-panel .kd-meter {
  background: var(--kd-teal);
  box-shadow: 0 0 10px var(--kd-teal);
}
#sheet.kd-panel .flame path { fill: var(--kd-orange); }
#sheet.kd-panel .flame .core { fill: var(--kd-orange-2); }
#sheet.kd-panel .flame-side.out .flame path { fill: #6b7280; }
#sheet.kd-panel .flame-side.burn .flame path { fill: var(--kd-orange); }
#sheet.kd-panel .burn-bar { background: var(--kd-orange); box-shadow: 0 0 8px var(--kd-orange); }
#sheet.kd-panel .build-tray,
#sheet.kd-panel .station-crate,
#sheet.kd-panel .machine,
#sheet.kd-panel .bag-card {
  background-color: var(--kd-navy);
  color: var(--kd-text);
  border-color: var(--kd-teal);
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .35);
}
#sheet.kd-panel .build-tray::after,
#sheet.kd-panel .station-crate::after { content: none; }
#hotbar.kd-hotbar {
  background-color: rgba(10, 20, 40, .85);
  background-image: none;
  border: 1px solid #2f5a8a;
  box-shadow: none;
  color: var(--kd-text);
}
#hotbar.kd-hotbar .bag-tile {
  background: linear-gradient(180deg, var(--kd-key-top), var(--kd-navy-2));
  color: var(--kd-text);
  border: 1px solid var(--kd-edge);
  border-bottom: calc(var(--ks-pad) / 4) solid var(--kd-bevel);
  box-shadow: none;
}
#hotbar.kd-hotbar .slot[aria-pressed="true"]::after,
#sheet.kd-panel .well.on::after { border-top-color: var(--kd-orange); }
#toast.kd-tip,
#menu-hint.kd-tip,
#held-chip.kd-tip,
#fs-hint.kd-card,
#inspect-card.kd-card,
#about .card.kd-card,
#path-chip,
#sheet.kd-panel .bag-card,
#sheet.kd-panel .well.on .glbl,
#shop-safe .card {
  background: var(--kd-navy);
  color: var(--kd-text);
  border: 1px solid var(--kd-teal);
  border-inline-start: calc(var(--ks-pad) / 3) solid var(--kd-orange);
  font-size: var(--ks-fs-s);
}
#inspect-close.kd-key,
#fs-hint-close.kd-key,
#about-close.kd-key,
#path-chip .path-x {
  box-sizing: border-box;
  min-width: var(--ks-touch);
  min-height: var(--ks-touch);
}
html[dir="rtl"] #sheet.kd-panel .sheet-bar,
html[dir="rtl"] #sheet.kd-panel .ggrid,
html[dir="rtl"] #sheet.kd-panel .kd-group { direction: rtl; }
html[data-kp-contrast="1"] #sheet.kd-panel,
html[data-kp-contrast="1"] #sheet.kd-panel .sheet-bar,
html[data-kp-contrast="1"] #sheet.kd-panel #sheet-body,
html[data-kp-contrast="1"] #hotbar.kd-hotbar {
  background-image: none;
  outline: 2px solid var(--kd-text);
}