/* Yahiya portfolio stylesheet. Sections are in cascade order; later sections refine earlier ones. */

/* ===== Base: IDE shell and world ===== */
:root {
  --bg: #191d27;
  --panel: #151922;
  --border: #2c303b;
  --text: #dce0e8;
  --muted: #747c90;
  --green: #b2d896;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'DM Sans', sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}
button {
  border: 0;
}
button:disabled {
  cursor: wait;
}
button:hover {
  filter: brightness(1.12);
}
[hidden] {
  display: none !important;
}
::selection {
  background: #41614a;
}
#ide {
  height: 100dvh;
  min-height: 680px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.titlebar {
  height: 41px;
  flex-shrink: 0;
  background: #141820;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: 10px var(--mono);
  color: #b9bfcc;
  position: relative;
}
.traffic {
  position: absolute;
  left: 17px;
  display: flex;
  gap: 7px;
}
.traffic i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ed6a5e;
}
.traffic i:nth-child(2) {
  background: #e5b957;
}
.traffic i:nth-child(3) {
  background: #6ec086;
}
.dim {
  color: #697184;
}
.title-icon {
  font-size: 14px;
  color: var(--green);
}
.title-end {
  position: absolute;
  right: 20px;
  font-size: 8px;
  letter-spacing: 1.3px;
  color: #7e8698;
  display: flex;
  align-items: center;
  gap: 9px;
}
.title-end i,
.little-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--green);
  border-radius: 50%;
}
.workspace {
  display: flex;
  flex: 1;
  min-height: 0;
}
.activity {
  width: 51px;
  flex-shrink: 0;
  background: #131720;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-direction: column;
}
.activity button {
  position: relative;
  width: 51px;
  height: 55px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #687083;
}
.activity svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.activity .active {
  color: #d5dddf;
}
.activity .active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--green);
}
.activity-space {
  flex: 1;
}
.explorer {
  width: 190px;
  flex-shrink: 0;
  background: #171b24;
  border-right: 1px solid var(--border);
  position: relative;
  font: 11px var(--mono);
  padding-top: 19px;
}
.explorer-title {
  font-size: 9px;
  letter-spacing: 1px;
  padding: 0 18px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 28px;
  color: #a4abb9;
}
.folder-title {
  font-size: 9px;
  font-weight: 500;
  color: #c2c7d2;
  padding: 0 12px;
  margin-bottom: 12px;
}
.file {
  height: 33px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 0 13px 0 23px;
  text-align: left;
  font-size: 10px;
  color: #a3aab9;
}
.file.selected {
  background: #252c38;
  color: #e0e4eb;
}
.file-icon {
  font-size: 10px;
  font-weight: 500;
  width: 17px;
  flex-shrink: 0;
}
.md {
  color: #87b8ce;
}
.ts {
  color: #6da7da;
}
.json {
  color: #d8bc77;
}
.css {
  color: #b297cf;
}
.file-dot {
  color: #c9aa75;
  font-size: 8px;
  margin-left: auto;
}
.tree-folder {
  padding: 11px 20px;
  color: #9da4b3;
  font-size: 10px;
}
.tree-folder span {
  color: #8a9fae;
}
.explorer-bottom {
  position: absolute;
  bottom: 24px;
  left: 20px;
  font-size: 9px;
  color: #a0a99c;
  line-height: 1.9;
}
.explorer-bottom .little-dot {
  margin-right: 6px;
}
.explorer-bottom small {
  font-size: 8px;
  color: #5e6879;
  margin-left: 15px;
}
.editor-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.tabbar {
  height: 39px;
  display: flex;
  align-items: stretch;
  background: #141821;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tab {
  min-width: 153px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #171b24;
  border-right: 1px solid var(--border);
  font: 10px var(--mono);
  color: #858ea2;
  position: relative;
}
.tab.active {
  color: #d2d9e3;
  background: var(--bg);
}
.tab.active::before {
  content: '';
  height: 1px;
  background: var(--green);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.tab-x {
  margin-left: auto;
  font-size: 14px;
  color: #697184;
}
.tab-fill {
  flex: 1;
}
.editor-play {
  font-size: 22px;
  background: transparent;
  color: var(--green);
  padding: 0 17px;
}
.ellipsis {
  color: #929bab;
  font-size: 16px;
  padding: 7px 14px 0 0;
}
.breadcrumb {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 25px;
  color: #68748a;
  font: 9px var(--mono);
  flex-shrink: 0;
}
.breadcrumb > span:first-child,
.breadcrumb > span:nth-child(3) {
  color: #505a6a;
}
.crumb-current {
  color: #a5adbb;
}
.editor-content {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 28px;
  padding: 20px 35px 30px 0;
  min-height: 0;
  overflow: auto;
}
.welcome-copy {
  flex: 1;
  display: flex;
  min-width: 0;
  align-self: stretch;
  align-items: center;
}
.line-gutter {
  width: 52px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 20px;
  color: #384253;
  font: 10px/27px var(--mono);
  align-self: stretch;
  overflow: hidden;
  padding-top: 2px;
  user-select: none;
}
.welcome-inner {
  padding: 0 0 0 17px;
  max-width: 630px;
}
.code-comment {
  font: 9px var(--mono);
  color: #69766d;
  margin-bottom: 37px;
  white-space: nowrap;
}
.markdown-label {
  font: 9px var(--mono);
  letter-spacing: 2px;
  color: #9ca7b8;
}
.markdown-label span {
  color: var(--green);
  font-size: 15px;
  margin-right: 10px;
}
h1 {
  font-family: var(--sans);
  font-size: clamp(36px, 4vw, 64px);
  font-weight: 500;
  letter-spacing: -2.8px;
  line-height: 1.14;
  margin: 23px 0 23px;
  white-space: nowrap;
  color: #edf0ec;
}
h1 em {
  font-style: normal;
  color: var(--green);
}
.cursor {
  display: inline-block;
  width: 3px;
  height: 0.8em;
  background: var(--green);
  margin-left: 6px;
  animation: blink 1.2s step-end infinite;
}
.welcome-description {
  font-size: 13px;
  line-height: 1.85;
  color: #919aaa;
  margin-bottom: 25px;
}
.code-line {
  font: 9px var(--mono);
  color: #bdc9dc;
  white-space: nowrap;
  margin-bottom: 31px;
}
.syntax-purple {
  color: #b298d2;
}
.syntax-muted {
  color: #67768b;
}
.syntax-yellow {
  color: #d2ba7a;
}
.syntax-blue {
  color: #83b8cc;
}
.syntax-green {
  color: var(--green);
}
.launch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.launch {
  background: var(--green);
  color: #253324;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  font-size: 11px;
  font-weight: 650;
  box-shadow: 0 3px 16px #0001;
  transition: transform 0.2s;
}
.launch:hover {
  transform: translateY(-2px);
}
.launch > span {
  font-size: 10px;
}
.launch kbd {
  font: 12px var(--mono);
  opacity: 0.45;
  border-left: 1px solid #25332440;
  padding-left: 14px;
  margin-left: 5px;
}
.launch-note {
  font: 8px var(--mono);
  color: #626f82;
  max-width: 110px;
  line-height: 1.6;
}
.text-button {
  padding: 0;
  background: transparent;
  font-size: 9px;
  color: #7d899d;
  margin-top: 20px;
}
.text-button span {
  color: #a7b4c3;
  margin-left: 6px;
}
.welcome-foot {
  margin-top: 42px;
  display: flex;
  gap: 20px;
  font: 7px var(--mono);
  color: #5d6a7b;
  flex-wrap: wrap;
}
.welcome-foot i {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 5px;
}
.world-preview {
  width: 36%;
  max-width: 380px;
  flex-shrink: 0;
  border: 1px solid #343e43;
  border-radius: 9px;
  overflow: hidden;
  background: #1d252a;
  transform: rotate(1.5deg);
  box-shadow: 0 18px 55px #0003;
  margin-right: 8px;
}
.preview-label {
  display: flex;
  justify-content: space-between;
  padding: 14px;
  font: 7px var(--mono);
  letter-spacing: 1px;
  color: #aebbad;
  background: #1c2529;
}
.preview-label > span:first-child {
  display: flex;
  gap: 6px;
  align-items: center;
}
.preview-label i {
  width: 4px;
  height: 4px;
  background: #b9da9d;
  border-radius: 50%;
}
.preview-label > span:last-child {
  color: #63796c;
  font-size: 6px;
}
.preview-canvas-wrap {
  height: 285px;
  position: relative;
  background: #779c61;
}
#preview-canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}
.preview-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 40px #20372b30;
}
.preview-coordinate {
  position: absolute;
  left: 12px;
  bottom: 11px;
  font: 6px var(--mono);
  letter-spacing: 1.1px;
  color: #eff2d3;
  text-shadow: 1px 1px #334d39;
}
.preview-caption {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 19px 14px 20px;
}
.preview-star {
  font-size: 24px;
  color: var(--green);
}
.preview-caption strong {
  font-size: 9px;
  font-weight: 500;
  color: #c5d0c2;
}
.preview-caption p {
  font-size: 8px;
  margin: 6px 0 0;
  color: #708178;
}
.preview-arrow {
  margin-left: auto;
  font-size: 19px;
  color: #718576;
}
.terminal {
  height: 132px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: #171b24;
}
.terminal-tabs {
  display: flex;
  gap: 23px;
  height: 35px;
  align-items: center;
  padding: 0 24px;
  color: #687489;
  font: 8px var(--mono);
}
.terminal-tabs b {
  font-size: 7px;
  border-radius: 9px;
  background: #303642;
  padding: 1px 4px;
  font-weight: 400;
}
.terminal-active {
  color: #c7d2c5;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.terminal-active::after {
  content: '';
  height: 1px;
  background: var(--green);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.terminal-right {
  margin-left: auto;
}
.terminal-body {
  padding: 13px 25px;
  font: 9px/1.8 var(--mono);
}
.terminal-green {
  color: var(--green);
}
.terminal-blue {
  color: #82afc5;
}
.terminal-gray {
  color: #727e91;
}
.terminal-red {
  color: #c17f83;
}
.terminal-prompt {
  display: flex;
  gap: 12px;
}
.terminal-prompt button {
  background: transparent;
  padding: 0;
  font: 9px var(--mono);
  color: #bcc7d5;
}
.terminal-cursor {
  margin-left: 4px;
  color: #91a794;
  animation: blink 1.2s step-end infinite;
}
.statusbar {
  height: 25px;
  flex-shrink: 0;
  background: #a9c994;
  color: #293c2d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  font: 8px var(--mono);
}
.status-spaced {
  margin-left: 16px;
}
.status-middle {
  font-size: 7px;
  opacity: 0.8;
}
.file-preview {
  padding: 25px 40px;
  flex: 1;
  align-self: stretch;
  overflow: auto;
}
.file-preview pre {
  font: 12px/2 var(--mono);
  white-space: pre-wrap;
  color: #b4c6d2;
}
.file-preview h1 {
  font-size: 34px;
  white-space: normal;
}
.file-preview > p {
  line-height: 1.9;
  color: #8d9bae;
}
.file-preview .code-comment {
  white-space: normal;
}
.file-preview .launch {
  margin-top: 25px;
}
#world {
  position: fixed;
  inset: 0;
  background: #789b64;
  overflow: hidden;
}
#world-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  outline: none;
}
.world-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    #172d2210 0px,
    #172d2210 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.24;
}
.world-hud {
  position: absolute;
  top: 25px;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  pointer-events: none;
}
.world-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #f5f1deee;
  padding: 10px 17px 10px 12px;
  border: 1px solid #fff7;
  box-shadow: 0 3px 0 #30452d2b;
  border-radius: 7px;
  color: #334937;
}
.world-symbol {
  font-size: 33px;
  color: #768951;
  line-height: 1;
}
.world-brand strong {
  display: block;
  font: 10px var(--mono);
  letter-spacing: 1px;
}
.world-brand div > span {
  display: block;
  font-size: 9px;
  color: #7c826a;
  margin-top: 4px;
}
.world-actions {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.world-actions button,
#map-button {
  background: #f5f1deef;
  color: #40513c;
  padding: 11px 15px;
  border: 1px solid #fff6;
  border-radius: 5px;
  font: 10px var(--mono);
  box-shadow: 0 3px 0 #30452d2b;
}
.location-pill {
  position: absolute;
  top: 106px;
  left: 32px;
  font: 8px var(--mono);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fffce9;
  text-shadow: 1px 1px #334e36;
  letter-spacing: 1px;
}
.location-pill i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f5edb5;
}
.location-time {
  margin-left: 12px;
  opacity: 0.65;
  font-size: 7px;
}
.world-welcome {
  position: absolute;
  top: 115px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  pointer-events: none;
  color: #fffbe8;
  text-shadow: 0 2px 0 #30472a50;
  transition: opacity 1s;
}
.world-welcome > span {
  font: 7px var(--mono);
  letter-spacing: 2px;
}
.world-welcome h2 {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 650;
  letter-spacing: -1.5px;
  margin: 10px 0;
}
.world-welcome p {
  font-size: 11px;
  margin: 0;
  opacity: 0.9;
}
.world-welcome.fade {
  opacity: 0;
}
.world-bottom {
  position: absolute;
  bottom: 20px;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.world-note {
  font: 7px var(--mono);
  color: #f1f2d9;
  letter-spacing: 1px;
  display: flex;
  gap: 7px;
  align-items: center;
  text-shadow: 1px 1px #344e34;
}
.world-note i {
  width: 4px;
  height: 4px;
  background: #d1e4ae;
  border-radius: 50%;
}
.control-hint {
  display: flex;
  gap: 20px;
  font: 8px var(--mono);
  align-items: center;
  background: #263d31d9;
  color: #e1e7ce;
  padding: 10px 15px;
  border-radius: 5px;
  box-shadow: 0 2px 0 #0002;
}
.control-hint kbd {
  font: 7px var(--mono);
  border: 1px solid #bfc9a955;
  border-bottom-width: 2px;
  padding: 1px 3px;
  border-radius: 3px;
  margin-right: 2px;
}
#map-button {
  pointer-events: auto;
  padding: 10px 12px;
  font-size: 8px;
}
.interact {
  position: absolute;
  bottom: 95px;
  left: 50%;
  transform: translateX(-50%);
  background: #fcf7e8;
  color: #3b4f3b;
  padding: 13px 17px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-radius: 6px;
  box-shadow: 0 4px 0 #354b3244;
  font-size: 12px;
  white-space: nowrap;
}
.interact kbd {
  font: 10px var(--mono);
  background: #dfdfc5;
  padding: 4px 7px;
  border-radius: 3px;
}
.mobile-controls {
  display: none;
}
.travel-toast {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 15px;
  background: #263d31e8;
  border-radius: 5px;
  font: 10px var(--mono);
  color: #f4f0d8;
  text-align: center;
  max-width: 85%;
}
#boot {
  position: fixed;
  inset: 0;
  background: #151c22;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.boot-icon {
  font-size: 60px;
  color: var(--green);
  animation: spin 3s linear infinite;
}
#boot p {
  font: 12px var(--mono);
  color: #bfcfb8;
  margin-top: 25px;
}
.boot-track {
  height: 3px;
  width: 220px;
  background: #2b3437;
  overflow: hidden;
  margin: 20px 0;
}
.boot-track i {
  display: block;
  height: 100%;
  background: var(--green);
  animation: load 1.1s ease-out forwards;
}
#boot small {
  font: 8px var(--mono);
  color: #65776f;
}
dialog {
  background: #f8f5e9;
  color: #344638;
  border: 1px solid #fcfaef;
  border-radius: 10px;
  max-width: 590px;
  width: calc(100% - 36px);
  max-height: 80dvh;
  padding: 0;
  box-shadow:
    0 12px 0 #1f352225,
    0 30px 100px #10281d40;
}
dialog::backdrop {
  background: #162a24a0;
  backdrop-filter: blur(6px);
}
.panel-top {
  padding: 17px 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfe0cf;
  font: 8px var(--mono);
  letter-spacing: 1.3px;
  color: #809072;
}
.panel-top button {
  background: #e8e8d9;
  color: #617159;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  font-size: 10px;
}
#panel-content {
  padding: 28px 32px 32px;
}
#panel-content h2 {
  font:
    500 32px 'DM Sans',
    sans-serif;
  letter-spacing: -1px;
  margin: 10px 0 14px;
}
#panel-content p {
  font-size: 13px;
  line-height: 1.85;
  color: #78806d;
}
.panel-icon {
  font-size: 32px;
}
.panel-badge {
  display: inline-block;
  background: #e7ead9;
  color: #7b8869;
  padding: 5px 8px;
  font: 8px var(--mono);
  border-radius: 3px;
}
.panel-footer {
  font: 9px/1.8 var(--mono);
  color: #879078;
  border-top: 1px solid #dddfcd;
  margin-top: 25px;
  padding-top: 17px;
}
.place-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}
.place-list button {
  padding: 18px;
  background: #ececdd;
  border: 1px solid #dadfca;
  border-radius: 5px;
  text-align: left;
  display: flex;
  gap: 13px;
  align-items: center;
  color: #3e533e;
}
.place-list button > span:first-child {
  font-size: 24px;
}
.place-list strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.place-list small {
  display: block;
  font: 8px var(--mono);
  color: #8b947a;
  margin-top: 6px;
}
.panel-card {
  padding: 19px;
  background: #eaeedc;
  border: 1px dashed #bdc7aa;
  margin-top: 15px;
  border-radius: 5px;
}
.panel-card strong {
  font-size: 12px;
}
.panel-card p {
  font-size: 11px !important;
  margin-bottom: 0;
}
.panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.panel-tags span {
  background: #e4e8d5;
  padding: 8px 12px;
  font: 9px var(--mono);
  border-radius: 4px;
}
.panel-action {
  background: #405c42;
  color: #f3f4e3;
  padding: 12px 18px;
  border-radius: 4px;
  margin-top: 20px;
  font-size: 11px;
}
.map-canvas {
  width: 100%;
  image-rendering: pixelated;
  border-radius: 5px;
  border: 3px solid #dbe0c7;
  margin-top: 8px;
}
.map-caption {
  font: 9px var(--mono) !important;
}
.panel-input {
  width: 100%;
  padding: 12px 14px;
  background: #ececdd;
  border: 1px solid #c7cfb8;
  border-radius: 4px;
  color: #344638;
  font: 12px var(--mono);
  margin-top: 15px;
}
.no-results {
  font: 11px var(--mono);
  padding: 20px 0;
  color: #7d886f;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(180deg);
  }
}
@keyframes load {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@media (min-width: 1500px) {
  .editor-content {
    gap: 60px;
    padding-right: 65px;
  }
  .welcome-inner {
    padding-left: 40px;
  }
  .world-preview {
    max-width: 430px;
  }
  .preview-canvas-wrap {
    height: 360px;
  }
  h1 {
    font-size: 72px;
  }
  .welcome-description {
    font-size: 15px;
  }
}
@media (max-width: 1150px) {
  .explorer {
    width: 158px;
  }
  .welcome-inner {
    padding-left: 8px;
  }
  .editor-content {
    gap: 18px;
    padding-right: 24px;
  }
  .world-preview {
    width: 32%;
    margin: 0;
  }
  .preview-canvas-wrap {
    height: 250px;
  }
  .preview-caption {
    gap: 8px;
    padding: 15px 10px;
  }
  .preview-star {
    font-size: 20px;
  }
  .preview-caption strong {
    font-size: 8px;
  }
  .preview-caption p {
    font-size: 7px;
  }
  .preview-arrow {
    display: none;
  }
  .code-comment {
    font-size: 8px;
  }
  .launch-note {
    display: none;
  }
  .code-line {
    font-size: 8px;
  }
  .welcome-foot {
    gap: 10px;
    font-size: 6px;
  }
  h1 {
    font-size: 45px;
  }
}
@media (max-width: 900px) {
  .explorer {
    width: 145px;
  }
  .activity,
  .activity button {
    width: 43px;
  }
  .world-preview {
    display: none;
  }
  .welcome-copy {
    max-width: 650px;
    margin: auto;
  }
  .welcome-inner {
    padding: 15px 25px;
  }
  .editor-content {
    padding-right: 30px;
  }
  h1 {
    font-size: 65px;
  }
  .code-comment {
    font-size: 10px;
  }
  .welcome-description {
    font-size: 14px;
  }
  .code-line {
    font-size: 11px;
  }
  .launch-note {
    display: block;
  }
  .welcome-foot {
    font-size: 8px;
  }
  .world-welcome {
    top: 155px;
  }
  .world-welcome h2 {
    font-size: 30px;
  }
  .control-hint {
    gap: 12px;
  }
  .world-note {
    display: none;
  }
}
@media (max-width: 600px) {
  #ide {
    min-height: 600px;
  }
  .titlebar {
    height: 38px;
    font-size: 8px;
  }
  .title-end {
    display: none;
  }
  .traffic {
    left: 12px;
    gap: 5px;
  }
  .traffic i {
    width: 7px;
    height: 7px;
  }
  .activity,
  .activity button {
    width: 39px;
  }
  .activity button {
    height: 48px;
  }
  .activity svg {
    width: 19px;
  }
  .explorer {
    display: none;
    width: 145px;
  }
  .explorer.mobile-open {
    display: block;
    position: absolute;
    left: 39px;
    top: 38px;
    bottom: 24px;
    z-index: 2;
    box-shadow: 10px 0 30px #0004;
  }
  .tab {
    min-width: 140px;
    font-size: 9px;
  }
  .tab[data-file='world'] {
    display: none;
  }
  .breadcrumb {
    font-size: 8px;
    padding-left: 15px;
    gap: 9px;
  }
  .editor-content {
    padding: 15px 15px 26px 0;
  }
  .line-gutter {
    width: 27px;
    padding-right: 5px;
    font-size: 8px;
    line-height: 25px;
  }
  .welcome-inner {
    padding: 10px 0 5px 12px;
  }
  .code-comment {
    font-size: 7px;
    margin-bottom: 30px;
  }
  h1 {
    font-size: clamp(35px, 9.5vw, 56px);
    letter-spacing: -2px;
    margin: 22px 0;
  }
  .markdown-label {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .welcome-description {
    font-size: 12px;
  }
  .code-line {
    font-size: 7px;
    margin-bottom: 25px;
  }
  .launch {
    font-size: 10px;
    padding: 12px;
  }
  .launch-note {
    display: none;
  }
  .text-button {
    font-size: 8px;
  }
  .welcome-foot {
    font-size: 6px;
    gap: 10px;
    max-width: 250px;
    line-height: 1.8;
    margin-top: 30px;
  }
  .terminal {
    height: 118px;
  }
  .terminal-tabs {
    padding: 0 14px;
    font-size: 7px;
    gap: 17px;
  }
  .terminal-body {
    padding: 10px 14px;
    font-size: 8px;
  }
  .terminal-prompt button {
    font-size: 8px;
  }
  .statusbar {
    font-size: 7px;
    padding: 0 9px;
  }
  .status-middle {
    display: none;
  }
  .status-spaced {
    margin-left: 8px;
  }
  .file-preview {
    padding: 15px 20px;
  }
  .file-preview pre {
    font-size: 10px;
  }
  .file-preview h1 {
    font-size: 28px;
  }
  .world-hud {
    top: 16px;
    left: 14px;
    right: 14px;
  }
  .world-brand {
    padding: 8px 10px;
    gap: 7px;
  }
  .world-symbol {
    font-size: 25px;
  }
  .world-brand strong {
    font-size: 8px;
    letter-spacing: 0.5px;
  }
  .world-brand div > span {
    font-size: 7px;
  }
  .world-actions {
    gap: 6px;
  }
  .world-actions button {
    padding: 11px 12px;
    font-size: 12px;
  }
  .world-actions button span {
    display: none;
  }
  .location-pill {
    top: 83px;
    left: 17px;
    font-size: 7px;
  }
  .world-welcome {
    top: 120px;
    padding: 0 20px;
  }
  .world-welcome > span {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .world-welcome h2 {
    font-size: 28px;
  }
  .world-welcome p {
    font-size: 10px;
  }
  .world-bottom {
    bottom: 18px;
    left: 15px;
    right: 15px;
    justify-content: flex-end;
  }
  .control-hint {
    display: none;
  }
  .mobile-controls {
    position: absolute;
    display: grid;
    grid-template-columns: 40px 40px 40px;
    grid-template-rows: 40px 40px;
    gap: 3px;
    bottom: 22px;
    left: 18px;
    touch-action: none;
  }
  .mobile-controls button {
    background: #f5f1ded9;
    border: 1px solid #fff6;
    color: #4f6346;
    font: 18px var(--mono);
    border-radius: 4px;
    box-shadow: 0 3px 0 #30452d2b;
    touch-action: none;
    user-select: none;
  }
  .mobile-controls [data-direction='up'] {
    grid-column: 2;
  }
  .mobile-controls [data-direction='left'] {
    grid-column: 1;
    grid-row: 2;
  }
  .mobile-controls [data-direction='down'] {
    grid-column: 2;
    grid-row: 2;
  }
  .mobile-controls [data-direction='right'] {
    grid-column: 3;
    grid-row: 2;
  }
  .interact {
    bottom: 130px;
    font-size: 11px;
    padding: 11px 14px;
  }
  .travel-toast {
    bottom: 182px;
    font-size: 9px;
  }
  .place-list {
    gap: 8px;
  }
  .place-list button {
    padding: 14px 10px;
    gap: 8px;
  }
  .place-list strong {
    font-size: 10px;
  }
  .place-list small {
    font-size: 7px;
  }
  #panel-content {
    padding: 23px;
  }
  #panel-content h2 {
    font-size: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Handheld adventure styling, using the pixel font from the PokePixel reference. */
@font-face {
  font-family: 'Power Clear';
  src: url('assets/power-clear.woff2') format('woff2');
  font-display: swap;
}
:root {
  --pixel: 'Power Clear', 'IBM Plex Mono', monospace;
}
#world {
  background: #79bf65;
}
.world-grain {
  opacity: 0.08;
}
.world-brand,
.world-actions button,
#map-button,
.location-pill,
.interact,
.control-hint,
.travel-toast,
.mobile-controls button {
  border: 3px solid #34445c;
  border-radius: 2px;
  background: #fffde9;
  color: #34445c;
  box-shadow:
    inset 0 0 0 2px #d3ddc6,
    3px 3px 0 #34445c50;
}
.world-brand {
  padding: 10px 16px;
  gap: 13px;
}
.world-brand strong {
  font: 20px/1 var(--pixel);
  letter-spacing: 1px;
}
.world-brand div > span {
  font: 12px/1 var(--pixel);
  color: #748778;
  margin-top: 7px;
  letter-spacing: 1px;
}
.world-symbol {
  position: relative;
  width: 29px;
  height: 29px;
  border: 3px solid #34445c;
  border-radius: 50%;
  background: linear-gradient(#ef6865 0 43%, #34445c 43% 57%, #fff9e8 57%);
  flex-shrink: 0;
}
.world-symbol::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 7px;
  width: 6px;
  height: 6px;
  border: 2px solid #34445c;
  background: #fff9e8;
  border-radius: 50%;
}
.world-actions button {
  font: 19px/1 var(--pixel);
  padding: 12px 17px;
}
.location-pill {
  top: 115px;
  left: 30px;
  padding: 9px 14px;
  font: 18px/1 var(--pixel);
  text-shadow: none;
  letter-spacing: 1px;
  gap: 10px;
}
.location-pill i {
  border-radius: 0;
  width: 7px;
  height: 7px;
  background: #e66c66;
}
.location-time {
  font: 14px/1 var(--pixel);
  color: #839077;
  opacity: 1;
  border-left: 1px solid #c1c9ac;
  padding-left: 12px;
  margin-left: 4px;
}
.world-welcome {
  top: 135px;
  background: #fffde9;
  color: #34445c;
  border: 3px solid #34445c;
  box-shadow:
    inset 0 0 0 3px #d3ddc6,
    4px 4px 0 #34445c40;
  width: auto;
  min-width: 410px;
  max-width: 85%;
  padding: 17px 25px 19px;
  text-shadow: none;
}
.world-welcome > span {
  font: 13px var(--pixel);
  letter-spacing: 2px;
  color: #78876c;
}
.world-welcome h2 {
  font: 30px/1.1 var(--pixel);
  letter-spacing: 0;
  margin: 9px 0;
}
.world-welcome p {
  font: 18px var(--pixel);
  color: #708168;
}
.world-welcome.fade {
  visibility: hidden;
}
.interact {
  font: 22px/1 var(--pixel);
  padding: 12px 20px;
  gap: 17px;
}
.interact kbd {
  font: 17px var(--pixel);
  background: #f2dd93;
  border: 2px solid #9c8758;
  border-radius: 2px;
  padding: 3px 8px;
}
.control-hint {
  font: 16px/1 var(--pixel);
  padding: 10px 16px;
  gap: 20px;
}
.control-hint kbd {
  font: 12px var(--pixel);
  border-color: #9baa97;
  color: #53644f;
  padding: 2px 4px;
}
.world-note {
  display: flex;
  font: 15px/1 var(--pixel);
  background: #34445ce8;
  padding: 8px 12px;
  box-shadow: 3px 3px #223b3740;
  border: 2px solid #fff9e8aa;
  color: #fffde9;
  letter-spacing: 1px;
  text-shadow: none;
}
.world-note i {
  border-radius: 0;
  background: #f3d17b;
  width: 6px;
  height: 6px;
}
#map-button {
  font: 17px/1 var(--pixel);
  padding: 10px 14px;
}
.travel-toast {
  font: 20px/1.1 var(--pixel);
  padding: 10px 17px;
}
dialog {
  border: 4px solid #34445c;
  border-radius: 3px;
  background: #fffde9;
  box-shadow:
    inset 0 0 0 3px #c4d0b9,
    5px 5px 0 #34445c80,
    0 24px 64px rgba(0, 0, 0, 0.32);
}
.panel-top {
  border-bottom: 2px solid #cad4bd;
  font: 16px/1 var(--pixel);
  letter-spacing: 1px;
  color: #63775e;
  padding: 15px 22px;
}
.panel-top button {
  border: 2px solid #34445c;
  border-radius: 1px;
  background: #e5ebd5;
  color: #34445c;
}
.panel-icon {
  color: #e47a65;
}
#panel-content h2 {
  font: 32px/1.15 var(--pixel);
  letter-spacing: 0;
  color: #34445c;
  margin: 8px 0 17px;
}
#panel-content p {
  font: 22px/1.35 var(--pixel);
  color: #64755c;
}
.panel-badge {
  border: 1px solid #b3c0a5;
  border-radius: 0;
  font: 13px var(--pixel);
  letter-spacing: 0.5px;
  background: #eaf0d8;
  color: #758465;
}
.panel-card {
  border: 2px solid #bccbaa;
  border-radius: 0;
  background: #f0f1db;
}
.panel-card strong {
  font: 22px var(--pixel);
  color: #445e47;
}
.panel-card p {
  font: 19px/1.3 var(--pixel) !important;
}
.panel-footer {
  font: 16px/1.4 var(--pixel);
  color: #8a977d;
  border-top: 2px solid #d5ddc7;
}
.place-list button {
  border: 2px solid #aabb9d;
  border-radius: 1px;
  background: #eef1db;
  box-shadow: 2px 2px #c1cbb2;
}
.place-list strong {
  font: 21px/1 var(--pixel);
}
.place-list small {
  font: 13px var(--pixel);
  margin-top: 8px;
  letter-spacing: 0.5px;
}
.panel-action {
  font: 20px var(--pixel);
  border: 2px solid #34445c;
  border-radius: 1px;
  background: #557c5a;
  box-shadow: 2px 2px #b8c7a8;
}
.panel-tags span {
  font: 18px var(--pixel);
  border: 1px solid #bac7a6;
  border-radius: 0;
}
.panel-input {
  font: 20px var(--pixel);
  border: 2px solid #a7b996;
  background: #f4f5e3;
  border-radius: 1px;
}
.map-caption {
  font: 19px var(--pixel) !important;
}
.map-canvas {
  border: 3px solid #7b9873;
  border-radius: 0;
}
.no-results {
  font: 18px var(--pixel);
}
@media (max-width: 900px) {
  .world-note {
    display: none;
  }
  .location-pill {
    top: 110px;
  }
  .world-welcome {
    top: 170px;
    min-width: 360px;
  }
}
@media (max-width: 600px) {
  .world-brand {
    padding: 8px 10px;
    gap: 8px;
  }
  .world-brand strong {
    font-size: 16px;
    letter-spacing: 0.3px;
  }
  .world-brand div > span {
    font-size: 9px;
    letter-spacing: 0.6px;
    margin-top: 5px;
  }
  .world-symbol {
    width: 24px;
    height: 24px;
    border-width: 2px;
  }
  .world-symbol::after {
    left: 6px;
    top: 6px;
    width: 5px;
    height: 5px;
    border-width: 2px;
  }
  .world-actions button {
    font-size: 19px;
    padding: 10px 11px;
  }
  .location-pill {
    top: 92px;
    left: 15px;
    font-size: 16px;
    padding: 7px 10px;
    gap: 7px;
  }
  .location-time {
    font-size: 12px;
    margin-left: 0;
    padding-left: 8px;
  }
  .world-welcome {
    top: 150px;
    min-width: 0;
    width: calc(100% - 40px);
    max-width: none;
    padding: 15px 12px;
  }
  .world-welcome > span {
    font-size: 11px;
    letter-spacing: 1px;
  }
  .world-welcome h2 {
    font-size: 25px;
  }
  .world-welcome p {
    font-size: 17px;
  }
  .interact {
    font-size: 21px;
    padding: 10px 14px;
    bottom: 130px;
  }
  .interact kbd {
    font-size: 15px;
  }
  .mobile-controls button {
    border: 2px solid #34445c;
    font: 23px var(--pixel);
    border-radius: 1px;
  }
  .world-bottom {
    bottom: 18px;
  }
  .world-note {
    display: none;
  }
  #map-button {
    font-size: 17px;
    padding: 10px 13px;
  }
  .travel-toast {
    font-size: 18px;
  }
  .place-list strong {
    font-size: 19px;
  }
  .place-list small {
    font-size: 11px;
  }
  #panel-content h2 {
    font-size: 29px;
  }
  #panel-content p {
    font-size: 21px;
  }
  .panel-badge {
    font-size: 11px;
  }
  .panel-top {
    font-size: 14px;
  }
}
/* Short conversations belong to the world; long project details use the readable panel. */
#room-transition {
  position: absolute;
  inset: 0;
  background: #172b36;
  z-index: 5;
  animation: room-fade 0.18s ease-out;
}
.dialogue-box {
  position: absolute;
  left: 50%;
  bottom: 75px;
  transform: translateX(-50%);
  width: min(690px, calc(100% - 48px));
  background: #fffde9;
  border: 4px solid #34445c;
  box-shadow:
    inset 0 0 0 3px #c4d0b9,
    4px 4px 0 #34445c60;
  color: #34445c;
  padding: 17px 23px 12px;
  z-index: 4;
}
.dialogue-box > div {
  font: 15px var(--pixel);
  letter-spacing: 1px;
  color: #8a9979;
}
.dialogue-box p {
  font: 24px/1.25 var(--pixel);
  margin: 9px 0 13px;
  min-height: 56px;
}
.dialogue-box button {
  display: block;
  margin-left: auto;
  background: transparent;
  font: 18px var(--pixel);
  color: #6e8368;
  padding: 7px 0 2px 14px;
}
.dialogue-box button span {
  font-size: 12px;
  margin-left: 12px;
  color: #d9846a;
}
.world-welcome {
  top: 95px;
  padding: 12px 22px;
  min-width: 340px;
}
.world-welcome > span {
  display: none;
}
.world-welcome h2 {
  font-size: 25px;
}
.world-welcome p {
  font-size: 17px;
}
.world-brand {
  padding: 8px 12px;
}
.world-brand strong {
  font-size: 18px;
}
.world-brand div > span {
  font-size: 10px;
}
.world-symbol {
  width: 25px;
  height: 25px;
  border-width: 2px;
}
.world-symbol::after {
  left: 6px;
  top: 6px;
  width: 5px;
  height: 5px;
}
.location-pill {
  top: 98px;
  font-size: 16px;
  padding: 7px 11px;
}
.world-actions button {
  font-size: 18px;
  padding: 10px 13px;
}
.world-bottom {
  bottom: 15px;
}
.control-hint {
  font-size: 15px;
  padding: 8px 12px;
}
@keyframes room-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 900px) {
  .world-welcome {
    top: 151px;
  }
  .location-pill {
    top: 97px;
  }
  .world-actions button {
    padding: 10px 11px;
  }
}
@media (max-width: 600px) {
  .dialogue-box {
    width: calc(100% - 24px);
    bottom: 125px;
    padding: 14px 17px 9px;
  }
  .dialogue-box p {
    font-size: 22px;
    min-height: 80px;
  }
  .dialogue-box > div {
    font-size: 13px;
  }
  .world-brand {
    padding: 8px;
    gap: 7px;
  }
  .world-brand strong {
    font-size: 14px;
  }
  .world-brand div > span {
    font-size: 8px;
  }
  .world-actions {
    gap: 4px;
  }
  .world-actions button {
    padding: 9px 8px;
    font-size: 16px;
  }
  .location-pill {
    top: 85px;
    left: 15px;
  }
  .world-welcome {
    top: 131px;
    min-width: 0;
  }
  .world-welcome h2 {
    font-size: 24px;
  }
  .world-welcome p {
    font-size: 16px;
  }
  .world-actions #exit-room {
    background: #f0dc9b;
  }
}
.mini-map {
  position: absolute;
  top: 112px;
  right: 30px;
  width: 158px;
  padding: 4px;
  background: #fffde9;
  border: 3px solid #34445c;
  box-shadow: 3px 3px #34445c55;
}
.mini-map canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.mini-map > span {
  display: flex;
  justify-content: space-between;
  font: 13px var(--pixel);
  color: #657858;
  padding: 4px 2px 0;
}
.mini-map i {
  font-style: normal;
  color: #dc7967;
}
#journal-count {
  font-weight: 400;
  color: #82946f;
}
.journal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 23px;
}
.journal-tile {
  min-height: 145px;
  background: #ecedd9;
  border: 2px dashed #b6c3a6;
  color: #839174;
  padding: 18px 13px;
  text-align: left;
}
.journal-tile > span {
  display: block;
  font: 30px var(--pixel);
  margin-bottom: 10px;
}
.journal-tile strong {
  display: block;
  font: 23px/1.1 var(--pixel);
}
.journal-tile small {
  display: block;
  font: 12px/1.3 var(--pixel);
  margin-top: 12px;
}
.journal-tile.found {
  background: #e0ead0;
  border-style: solid;
  color: #4c6c4e;
  box-shadow: 3px 3px #bac9a4;
}
.journal-card {
  position: relative;
  border: 7px solid var(--card-color);
  outline: 2px solid #52664e;
  padding: 14px;
  background: #fff7dc;
  box-shadow: 4px 5px #34445c25;
  transition: transform 0.18s;
  overflow: hidden;
  --shine-x: 50%;
  --shine-y: 50%;
}
.journal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--shine-x) var(--shine-y), #fff9 0, transparent 44%);
  opacity: 0.25;
}
.card-header {
  display: flex;
  justify-content: space-between;
  font: 15px var(--pixel);
  color: #667c59;
}
.card-header b {
  font-weight: 400;
}
.card-picture {
  position: relative;
  margin: 13px 0;
  border: 3px solid var(--card-color);
  background: #7caf6a;
}
.card-picture canvas {
  width: 100%;
  height: 190px;
  display: block;
  image-rendering: pixelated;
  object-fit: cover;
}
.card-picture > span {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 37px;
  color: #fff5cd;
  text-shadow: 2px 2px #4f7255;
}
.card-tag {
  font: 13px var(--pixel);
  letter-spacing: 1px;
  color: #85906d;
}
.journal-card h2 {
  font-size: 30px !important;
  margin: 12px 0 !important;
}
.journal-card p {
  font-size: 21px !important;
}
.card-bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d3d9bd;
  padding-top: 12px;
  font: 12px var(--pixel);
  color: #8d9977;
}
.map-legend {
  display: flex;
  gap: 20px;
  margin: 18px 0 10px;
  font: 16px var(--pixel);
  color: #7a896a;
}
.map-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-legend i {
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid #a49d77;
}
.map-legend .info {
  background: #f4b47b;
}
.map-legend .discovery {
  background: #da7777;
}
.map-legend .visited {
  background: #effad7;
}
.map-note-links {
  display: flex;
  gap: 8px;
  margin-top: 17px;
  flex-wrap: wrap;
}
.map-note-links button {
  border: 1px solid #d3ac93;
  background: #f5e3c8;
  color: #986f5b;
  font: 17px var(--pixel);
  padding: 7px 12px;
}
@media (max-width: 900px) {
  .mini-map {
    width: 126px;
    top: 115px;
    right: 20px;
  }
  .world-actions button {
    padding: 10px;
  }
  .world-actions span {
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  .world-hud {
    left: 12px;
    right: 12px;
  }
  .world-brand {
    gap: 5px;
    padding: 7px 6px;
  }
  .world-brand strong {
    font-size: 13px;
  }
  .world-brand div > span {
    font-size: 7px;
    letter-spacing: 0.1px;
  }
  .world-symbol {
    width: 21px;
    height: 21px;
  }
  .world-symbol::after {
    left: 5px;
    top: 5px;
    width: 3px;
    height: 3px;
  }
  .world-actions button {
    font-size: 16px;
    padding: 9px 7px;
  }
  .world-actions span {
    display: none;
  }
  .mini-map {
    width: 102px;
    right: 14px;
    top: 136px;
    padding: 3px;
  }
  .mini-map > span {
    font-size: 10px;
  }
  .journal-tile {
    min-height: 140px;
    padding: 15px 10px;
  }
  .journal-tile strong {
    font-size: 21px;
  }
  .journal-tile small {
    font-size: 10px;
  }
  .map-legend {
    font-size: 14px;
    gap: 13px;
  }
  .card-picture canvas {
    height: 155px;
  }
  .journal-card {
    padding: 11px;
  }
  .card-header {
    font-size: 13px;
  }
  .card-tag {
    font-size: 11px;
  }
  .card-bottom {
    font-size: 10px;
  }
  .journal-card h2 {
    font-size: 28px !important;
  }
  .journal-card p {
    font-size: 20px !important;
  }
}
.work-detail > p {
  font: 14px/1.85 var(--sans) !important;
  color: #657360 !important;
}
.work-detail .panel-card p {
  font: 13px/1.7 var(--sans) !important;
}
.project-shot {
  display: block;
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  object-position: center;
  border: 3px solid #a1b08e;
  image-rendering: pixelated;
  margin: 22px 0;
}
.project-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 23px;
}
.project-actions a,
.project-actions button {
  display: inline-block;
  padding: 11px 16px;
  font: 20px var(--pixel);
  border: 2px solid #34445c;
  background: #66865d;
  color: #fff9df;
  box-shadow: 2px 2px #becbae;
}
.project-actions .secondary {
  background: #e7ebd6;
  color: #607354;
}
.project-selection {
  display: grid;
  gap: 12px;
  margin: 23px 0;
}
.project-selection button {
  text-align: left;
  background: #e8eed6;
  border: 2px solid #afbf9d;
  padding: 18px;
}
.project-selection button > span {
  display: inline-block;
  font: 15px var(--pixel);
  color: #8c9b77;
  margin-right: 12px;
}
.project-selection strong {
  font: 27px var(--pixel);
  color: #526e50;
}
.project-selection small {
  display: block;
  font: 17px var(--pixel);
  color: #8a967c;
  margin: 7px 0 0 28px;
}
.quest-project-art {
  padding: 45px 20px;
  background: #91b476;
  color: #f5f1cc;
  text-align: center;
  font: 25px var(--pixel);
  border: 3px solid #6f9360;
  margin-top: 20px;
}
.quest-project-art span {
  padding: 0 15px;
}
.trainer-card-label {
  font: 15px var(--pixel);
  letter-spacing: 1px;
  color: #91a17e;
}
.trainer-pass {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #e3ebd1;
  padding: 17px;
  border: 2px solid #a8bb94;
  margin: 22px 0;
}
.trainer-avatar {
  width: 64px;
  height: 80px;
  flex-shrink: 0;
  background-image: url('assets/trainer.png');
  background-size: 256px 384px;
  background-position: 0 -8px;
  image-rendering: pixelated;
}
.trainer-pass strong {
  font: 27px var(--pixel);
  display: block;
  color: #5b7758;
}
.trainer-pass span {
  font: 19px var(--pixel);
  display: block;
  color: #849275;
  margin-top: 6px;
}
.trainer-pass small {
  font: 11px var(--pixel);
  display: block;
  color: #9ba58c;
  margin-top: 10px;
}
.skill-entries {
  display: grid;
  gap: 10px;
  margin-top: 25px;
}
.skill-entries > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 5px 10px;
  border-bottom: 1px solid #d7dfc9;
  padding: 12px 0;
}
.skill-entries b {
  grid-row: span 2;
  font: 15px var(--pixel);
  color: #a6b18f;
}
.skill-entries strong {
  font: 24px var(--pixel);
  color: #5b7857;
  font-weight: 400;
}
.skill-entries span {
  font: 12px/1.6 var(--sans);
  color: #869178;
}
.world-tools {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
#time-button {
  font: 17px var(--pixel);
  padding: 10px 12px;
  background: #fffde9;
  color: #697c5d;
  border: 3px solid #34445c;
  box-shadow:
    inset 0 0 0 2px #d3ddc6,
    3px 3px #34445c50;
  border-radius: 2px;
}
.world-hud {
  z-index: 2;
}
.world-welcome {
  transition: opacity 0.6s;
  pointer-events: none;
}
.world-actions button {
  transition: transform 0.15s;
}
.world-actions button:hover {
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .world-tools {
    gap: 6px;
  }
  #time-button {
    padding: 10px;
    font-size: 17px;
  }
  #time-button span {
    display: none;
  }
  .trainer-pass {
    gap: 10px;
    padding: 12px;
  }
  .trainer-pass strong {
    font-size: 24px;
  }
  .trainer-pass span {
    font-size: 16px;
  }
  .trainer-pass small {
    font-size: 9px;
  }
  .project-selection strong {
    font-size: 25px;
  }
  .project-selection small {
    font-size: 16px;
  }
  .work-detail > p {
    font-size: 13px !important;
  }
  .project-actions a,
  .project-actions button {
    font-size: 18px;
    padding: 10px 13px;
  }
}
.resident-list {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}
.resident-list button {
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
  background: #e8eed6;
  border: 2px solid #b6c6a5;
  padding: 14px 16px;
  color: #607957;
  font: 22px var(--pixel);
}
.resident-list i {
  display: block;
  width: 17px;
  height: 24px;
  border: 2px solid #697b61;
  box-shadow: 0 -7px #a7a58b;
}
.resident-list small {
  display: block;
  font: 12px var(--pixel);
  color: #8b9a7b;
  margin-top: 5px;
}
.zoom-controls {
  position: absolute;
  right: 30px;
  top: 260px;
  display: flex;
  align-items: center;
  background: #fffde9;
  border: 2px solid #34445c;
  box-shadow: 2px 2px #34445c40;
  color: #647b61;
  z-index: 2;
  font: 15px var(--pixel);
}
.zoom-controls button {
  padding: 4px 10px;
  background: transparent;
  color: #647b61;
  font: 23px var(--pixel);
}
.zoom-controls span {
  padding: 0 3px;
}
.dex-entry {
  text-align: center;
}
.dex-entry canvas {
  display: block;
  width: 192px;
  height: 192px;
  image-rendering: pixelated;
  margin: 15px auto;
  background: radial-gradient(ellipse at center, #b9dcb7 0, #e5efd4 60%, transparent 62%);
}
.dex-type {
  display: inline-block;
  font: 20px var(--pixel);
  background: #d8e8c9;
  border: 1px solid #a3b993;
  padding: 7px 15px;
}
.dex-entry p {
  font: 20px/1.4 var(--pixel) !important;
}
@media (max-width: 900px) {
  .zoom-controls {
    right: 20px;
    top: 240px;
  }
}
@media (max-width: 600px) {
  .zoom-controls {
    right: 14px;
    top: 230px;
    font-size: 12px;
  }
  .zoom-controls button {
    font-size: 20px;
    padding: 3px 8px;
  }
  .dex-entry canvas {
    width: 160px;
    height: 160px;
  }
  .place-list strong {
    font-size: 17px;
  }
}
#partner-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  min-height: 44px;
}
#partner-button img {
  width: 25px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}
#partner-button > span {
  font-size: 13px;
  opacity: 0.6;
}
#partner-button b {
  font: 18px var(--pixel);
  font-weight: 400;
}
#partner-button i {
  font-style: normal;
  font-size: 13px;
}
.partner-intro > p {
  font: 20px/1.3 var(--pixel) !important;
  color: #819174;
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 25px;
}
.partner-grid button {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 0;
  background: #e8eed9;
  border: 2px solid #b2c39e;
  box-shadow: 3px 3px #d3dcc5;
  padding: 15px 8px;
  color: #4e6b50;
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.partner-grid button:hover {
  transform: translateY(-3px);
  border-color: #647e5a;
}
.partner-grid button[aria-pressed='true'] {
  border-color: #527756;
  background: #d7e6ca;
  box-shadow:
    inset 0 0 0 2px #f8f7df,
    3px 3px #b9cda8;
}
.partner-grid img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  image-rendering: pixelated;
  padding: 8px;
}
.partner-grid strong {
  font: 23px var(--pixel);
  margin-top: 8px;
}
.partner-grid small {
  font: 14px var(--pixel);
  margin-top: 6px;
  color: #849574;
}
.partner-grid button > span {
  font: 11px var(--pixel);
  margin-top: 15px;
  color: #6c855e;
}
.world-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 70%;
}
@media (max-width: 900px) {
  #partner-button > span {
    display: none;
  }
  #partner-button {
    gap: 5px;
    padding: 4px 8px;
  }
  #partner-button b {
    font-size: 16px;
  }
  .world-actions {
    gap: 5px;
  }
}
@media (max-width: 600px) {
  .world-hud {
    gap: 7px;
  }
  .world-actions {
    max-width: 61%;
    gap: 4px;
  }
  #partner-button {
    order: 4;
    min-height: 35px;
    flex-basis: 100%;
    justify-content: center;
    padding: 2px 8px;
  }
  #partner-button img {
    height: 25px;
    width: 24px;
  }
  #partner-button b {
    font-size: 17px;
  }
  .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .partner-grid img {
    height: 82px;
  }
  .partner-grid strong {
    font-size: 22px;
  }
  .partner-grid button {
    padding: 9px 6px;
  }
  .partner-grid small {
    font-size: 13px;
  }
  .partner-grid button > span {
    font-size: 10px;
  }
}
@media (max-width: 600px) {
  .location-pill {
    top: 104px;
  }
  .world-welcome {
    top: 148px;
  }
  .mini-map {
    top: 150px;
  }
  .zoom-controls {
    top: 244px;
  }
}
/* Battle UI retains PokePixel's 512×384 layout and its original interface assets. */
#panel.battle-panel {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #111313;
  padding: 0;
  overflow: auto;
  color: #eee;
}
#panel.battle-panel .panel-top {
  display: none;
}
#panel.battle-panel #panel-content {
  padding: 0;
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
}
.repo-battle {
  width: min(1024px, 100vw);
  margin: auto;
}
.repo-game {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  image-rendering: pixelated;
}
.repo-game canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.battle-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.repo-move-targets {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 81%;
  height: 15%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr;
  gap: 0 2%;
}
.repo-move-targets button {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.repo-move-targets button:hover {
  background: #e6c45922;
}
.repo-move-targets button:focus-visible {
  outline: 2px solid #8b7540;
  outline-offset: -3px;
}
.repo-continue {
  position: absolute;
  bottom: 2%;
  right: 5%;
  font: clamp(13px, 2vw, 24px) var(--pixel);
  color: #555;
  background: #f8f8f8;
  padding: 3px 7px;
}
.repo-battle-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  color: #a3aba6;
  font: 16px var(--pixel);
  gap: 12px;
}
.repo-battle-footer button {
  background: transparent;
  color: #c5ccc7;
  font: inherit;
  padding: 8px;
}
.battle-panel::backdrop {
  background: #111313;
}
@media (min-width: 700px) and (max-height: 820px) {
  .repo-battle {
    width: min(1024px, 100vw, calc((100dvh - 60px) * 4 / 3));
  }
}
@media (max-width: 600px) {
  .repo-battle-footer {
    font-size: 14px;
    padding: 12px;
  }
  .repo-battle {
    width: 100vw;
  }
}
#panel.gym-panel {
  width: min(850px, calc(100% - 24px));
  max-width: 850px;
  background: #f3f3ee;
  color: #383c34;
  border: 4px solid #62685d;
  box-shadow:
    inset 0 0 0 3px #bfc0a7,
    5px 5px #151d2455;
}
.gym-panel #panel-content {
  padding: 24px;
}
.gym-panel .panel-top {
  background: #d8dbce;
}
.gym-leader {
  display: flex;
  gap: 22px;
  align-items: center;
  border-bottom: 2px solid #c8cebc;
  padding-bottom: 18px;
}
.gym-leader > img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  image-rendering: pixelated;
}
.gym-leader span {
  font: 14px var(--pixel);
  color: #849078;
}
.gym-leader h2 {
  font: 36px var(--pixel) !important;
  margin: 8px 0 !important;
  color: #3f513a;
}
.gym-leader p {
  font: 19px var(--pixel) !important;
  margin: 6px 0 !important;
}
.gym-leader strong {
  font: 15px var(--pixel);
  color: #a17d3a;
}
.gym-lobby h3 {
  font: 26px var(--pixel);
  font-weight: 400;
  margin: 20px 0 5px;
}
.gym-lobby p {
  font: 18px/1.3 var(--pixel) !important;
  color: #7c8872 !important;
  margin: 6px 0 12px !important;
}
.gym-roster > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: #e0e5d7;
  border: 2px solid #b6c2aa;
}
.gym-roster figure {
  margin: 0;
  text-align: center;
  padding: 4px 0 9px;
}
.gym-roster img {
  width: 80px;
  max-width: 100%;
  height: 70px;
  object-fit: contain;
  image-rendering: pixelated;
}
.gym-roster figcaption {
  font: 14px var(--pixel);
}
.gym-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.gym-team-grid > button {
  position: relative;
  background: #e6eadf;
  border: 2px solid #b9c6ac;
  padding: 10px 12px 12px;
  text-align: left;
  color: #44553b;
}
.gym-team-grid > button[aria-pressed='true'] {
  background: #d1dfbe;
  border-color: #576d46;
  box-shadow: inset 0 0 0 2px #f1f4e8;
}
.gym-team-grid img {
  width: 70px;
  height: 65px;
  object-fit: contain;
  image-rendering: pixelated;
  float: left;
  margin-right: 8px;
}
.gym-team-grid strong {
  font: 24px var(--pixel);
  display: block;
  margin-top: 8px;
}
.gym-team-grid small {
  font: 13px var(--pixel);
  display: block;
  margin-top: 4px;
  text-transform: capitalize;
}
.gym-order {
  font: 11px var(--pixel);
  display: block;
  margin-top: 7px;
  color: #7c8d68;
}
.gym-team-grid em {
  display: block;
  clear: both;
  font: 13px/1.3 var(--pixel);
  font-style: normal;
  color: #8b967e;
  padding-top: 7px;
  min-height: 42px;
}
.gym-start-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  font: 20px var(--pixel);
}
.gym-start-row button {
  font: 22px var(--pixel);
  padding: 12px 18px;
  background: #637f4e;
  color: #fffce9;
  border: 3px solid #3d5235;
}
.gym-start-row button:disabled {
  opacity: 0.4;
  cursor: default;
}
.gym-rules {
  font: 17px var(--pixel);
  margin-top: 22px;
  color: #849078;
}
.gym-rules p {
  font-size: 16px !important;
}
.gym-rules a {
  color: #607a4d;
}
.gym-map-link {
  display: block;
  width: 100%;
  padding: 16px;
  background: #e8ddbe;
  border: 2px solid #b3a170;
  text-align: left;
  color: #6c6345;
  margin-top: 14px;
}
.gym-map-link strong {
  font: 24px var(--pixel);
}
.gym-map-link small {
  display: block;
  font: 15px var(--pixel);
  margin-top: 6px;
}
.gym-battle-tools {
  padding: 8px 15px 0;
}
.gym-switches {
  display: flex;
  gap: 8px;
}
.gym-switches button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  background: #e0e1db;
  color: #49513f;
  border: 2px solid #6b7462;
  text-align: left;
  font: 20px var(--pixel);
  padding: 4px;
}
.gym-switches img {
  width: 55px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}
.gym-switches small {
  display: block;
  font: 12px var(--pixel);
  margin-top: 5px;
}
.gym-switches button:disabled {
  opacity: 0.4;
  cursor: default;
}
.gym-switches button.active {
  opacity: 0.8;
  border-color: #c5b26e;
}
.gym-move-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 11px 0;
  color: #d3d7c7;
  font: 14px var(--pixel);
}
.gym-move-guide strong {
  font-weight: 400;
  color: #d7c998;
  display: block;
}
.gym-move-guide small {
  font: 12px var(--pixel);
  display: block;
  margin-top: 4px;
  color: #98a28c;
}
.gym-decision {
  grid-column: 1/-1;
  font-size: 20px;
}
.gym-match .repo-battle-footer {
  padding: 3px 0 10px;
}
.gym-match {
  width: min(950px, 100vw);
}
@media (min-width: 700px) and (max-height: 1000px) {
  .repo-battle.gym-match {
    width: min(950px, 100vw, calc((100dvh - 165px) * 4 / 3));
  }
}
@media (max-width: 600px) {
  .gym-panel #panel-content {
    padding: 16px;
  }
  .gym-leader {
    gap: 8px;
  }
  .gym-leader > img {
    width: 80px;
    height: 90px;
  }
  .gym-leader h2 {
    font-size: 30px !important;
  }
  .gym-leader span {
    font-size: 10px;
  }
  .gym-leader p {
    font-size: 16px !important;
  }
  .gym-roster > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gym-team-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .gym-team-grid > button {
    padding: 8px;
  }
  .gym-team-grid img {
    width: 50px;
    height: 57px;
  }
  .gym-team-grid strong {
    font-size: 20px;
  }
  .gym-team-grid em {
    font-size: 12px;
  }
  .gym-start-row {
    font-size: 17px;
  }
  .gym-start-row button {
    font-size: 19px;
    padding: 9px;
  }
  .gym-switches {
    gap: 4px;
  }
  .gym-switches button {
    flex-direction: column;
    text-align: center;
    font-size: 16px;
    gap: 0;
  }
  .gym-switches img {
    width: 45px;
    height: 38px;
  }
  .gym-switches small {
    font-size: 10px;
  }
  .gym-move-guide {
    grid-template-columns: 1fr 1fr;
    font-size: 12px;
  }
  .gym-battle-tools {
    padding: 8px 9px 0;
  }
  .gym-move-guide small {
    font-size: 10px;
  }
  .gym-match .repo-battle-footer {
    font-size: 12px;
  }
}

/* ===== Portfolio documents ===== */
#editor-tabs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.editor-tab-wrap {
  display: flex;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  background: #171b24;
}
.editor-tab-wrap.is-active {
  background: var(--bg);
}
.editor-tab-wrap .tab {
  min-width: 0;
  border-right: 0;
  padding: 0 16px;
}
.close-file {
  background: transparent;
  color: #a5afbe;
  padding: 0 12px 0 2px;
  font-size: 17px;
}
.command-list {
  border: 1px solid #35413e;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 28px;
  background: #1b2328;
}
.command-line {
  width: 100%;
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 4px 12px;
  padding: 16px 20px;
  text-align: left;
  background: transparent;
}
.command-line + .command-line {
  border-top: 1px solid #35413e;
}
.command-line:hover {
  background: #25322f;
  filter: none;
}
.command-line:focus-visible {
  outline-offset: -3px;
}
.command-line code {
  font: clamp(13px, 1.3vw, 18px) var(--mono);
  color: #dce0e8;
}
.command-arrow {
  color: #b2d896;
  font: 18px var(--mono);
  grid-row: span 2;
}
.command-description {
  font: 11px var(--sans);
  color: #a6b2bd;
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.command-help {
  font: 10px/1.8 var(--mono);
  color: #9aa6b7;
  margin: 15px 0 0;
}
.welcome-inner {
  max-width: 640px;
}
.welcome-foot {
  margin-top: 24px;
}
.code-comment {
  margin-bottom: 25px;
}
.terminal {
  height: 155px;
}
.terminal-body {
  font-size: 11px;
  padding-top: 10px;
}
.terminal-prompt {
  align-items: center;
}
.terminal-prompt input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 5px 0;
  color: #e3e9ef;
  font: 12px var(--mono);
  outline: none;
}
.terminal-prompt input:focus-visible {
  box-shadow: 0 1px #b2d896;
}
.terminal-prompt input::placeholder {
  color: #8996a8;
}
.terminal-prompt button {
  font: 18px var(--mono);
  padding: 3px 10px;
  color: #b2d896;
}
#terminal-output {
  font: 10px/1.5 var(--mono);
  color: #b7c6af;
  max-height: 42px;
  overflow: auto;
}
.editor-content.reading-file {
  padding: 0;
  align-items: stretch;
}
.reading-file .world-preview {
  display: none;
}
.reading-file .file-preview {
  padding: 42px clamp(24px, 5vw, 80px);
  overflow: auto;
}
.editor-document {
  max-width: 1000px;
  margin: auto;
  font-size: 14px;
  line-height: 1.75;
  color: #b6c0cf;
}
.editor-document header {
  margin-bottom: 32px;
}
.document-label {
  font: 10px var(--mono);
  letter-spacing: 2px;
  color: #b2d896;
}
.editor-document h1 {
  font:
    500 clamp(28px, 3.5vw, 44px) / 1.2 'DM Sans',
    sans-serif;
  letter-spacing: -1.4px;
  margin: 16px 0;
  color: #edf0ec;
  white-space: normal;
}
.editor-document h1:focus {
  outline: none;
}
.document-intro {
  max-width: 640px;
  font-size: 15px;
  color: #a6b3c4;
}
.editor-document h2 {
  font: 550 19px/1.4 var(--sans);
  color: #e1e7e6;
  margin: 10px 0;
}
.editor-placeholder {
  border: 1px dashed #425048;
  background: #1d2627;
  border-radius: 7px;
  padding: 24px;
  margin: 25px 0;
}
.editor-placeholder > span,
.editor-skill-grid section > span,
.editor-project-copy > span {
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: #b2c99e;
}
.editor-placeholder p {
  margin-bottom: 0;
  max-width: 680px;
}
.editor-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 30px 0;
}
.pending-label {
  font: 10px var(--mono);
  color: #d4bc89;
}
.editor-skill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.editor-skill-grid section {
  border-top: 1px solid #465147;
  padding-top: 20px;
}
.editor-skill-grid p {
  font-size: 13px;
}
.editor-projects {
  display: grid;
  gap: 24px;
}
.editor-projects article {
  border: 1px solid #37433e;
  border-radius: 7px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 32% 1fr;
  background: #1b2328;
}
.editor-project-image {
  display: block;
  background: #354d3b;
}
.editor-project-image img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  image-rendering: pixelated;
}
.editor-project-copy {
  padding: 24px;
}
.editor-project-copy p {
  font-size: 13px;
}
.editor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0;
}
.editor-tags span {
  font: 10px var(--mono);
  padding: 5px 8px;
  background: #27332f;
  color: #bdcdb4;
  border-radius: 3px;
}
.editor-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.editor-links a,
.editor-links button {
  color: #b2d896;
  text-decoration: none;
  background: transparent;
  padding: 5px 0;
  font: 12px var(--mono);
}
.editor-links a:hover {
  text-decoration: underline;
}
.editor-document details {
  border-top: 1px solid #36443d;
  margin-top: 17px;
  padding-top: 12px;
}
.editor-document summary {
  cursor: pointer;
  font-size: 12px;
  color: #bcc8d4;
  min-height: 28px;
}
.editor-world-art {
  background: radial-gradient(ellipse at top, #3d6046, #22392f);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 25px;
  color: #dae6b8;
}
.editor-world-art > span {
  font-size: 60px;
}
.editor-world-art strong {
  font: 500 25px/1.3 var(--mono);
  margin: 10px 0;
}
.editor-world-art small {
  font: 8px var(--mono);
  letter-spacing: 1px;
}
.editor-contact-link {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 25px;
  border: 1px solid #465147;
  border-radius: 6px;
  color: #dce8d5;
  text-decoration: none;
}
.editor-contact-link > span {
  font: 11px var(--mono);
  color: #b2d896;
}
.editor-contact-link > span:last-child {
  margin-left: auto;
}
.editor-document footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font: 10px var(--mono);
  color: #91a18f;
}
.editor-document footer button {
  background: transparent;
  color: #b2d896;
  font: inherit;
}
.mobile-files-toggle {
  display: none;
}
@media (max-width: 1100px) {
  .world-preview {
    width: 30%;
  }
  .preview-canvas-wrap {
    height: 220px;
  }
  .editor-content {
    gap: 20px;
    padding-right: 25px;
  }
  .welcome-inner {
    padding-left: 0;
  }
  .welcome-inner h1 {
    font-size: 42px;
  }
  .editor-skill-grid {
    grid-template-columns: 1fr;
  }
  .editor-skill-grid section {
    padding-top: 14px;
  }
  .editor-projects article {
    grid-template-columns: 1fr;
  }
  .editor-project-image img {
    height: 180px;
    min-height: 0;
  }
  .editor-world-art {
    min-height: 180px;
  }
  .editor-world-art > span {
    display: none;
  }
  .editor-world-art strong {
    font-size: 24px;
  }
  .editor-world-art strong br {
    display: none;
  }
}
@media (max-width: 750px) {
  .world-preview {
    display: none;
  }
  .welcome-inner {
    width: 100%;
    max-width: 580px;
    padding-right: 15px;
  }
  .welcome-copy {
    justify-content: center;
  }
  .editor-columns {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .terminal-tabs {
    gap: 15px;
  }
  .terminal-body {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (max-width: 600px) {
  #ide {
    min-height: 100dvh;
    height: 100dvh;
  }
  .title-end {
    display: none;
  }
  .editor-content {
    padding: 20px 16px;
    align-items: start;
  }
  .welcome-inner {
    padding: 0;
  }
  .welcome-copy {
    align-items: start;
  }
  .welcome-inner h1 {
    font-size: 38px;
    letter-spacing: -1.7px;
    margin: 18px 0;
  }
  .welcome-description {
    font-size: 13px;
    margin-bottom: 18px;
  }
  .code-comment {
    font-size: 9px;
    white-space: normal;
    margin-bottom: 20px;
  }
  .command-list {
    margin-top: 20px;
  }
  .command-line {
    padding: 14px;
  }
  .command-line code {
    font-size: 14px;
  }
  .command-description {
    font-size: 11px;
  }
  .welcome-foot {
    font-size: 8px;
    margin-top: 20px;
  }
  .terminal {
    height: 160px;
  }
  .terminal-tabs {
    padding-left: 16px;
  }
  .terminal-body {
    font-size: 10px;
  }
  .terminal-prompt input {
    font-size: 11px;
    min-height: 36px;
  }
  #terminal-output {
    font-size: 10px;
  }
  .breadcrumb {
    padding: 0 12px;
    gap: 8px;
    font-size: 9px;
  }
  .mobile-files-toggle {
    display: block;
    background: transparent;
    color: #b2d896;
    font: 10px var(--mono);
    padding: 8px 0;
    margin-right: 6px;
  }
  .breadcrumb > span:last-child {
    display: none;
  }
  .explorer.mobile-open {
    z-index: 30;
    box-shadow: 15px 10px 35px #0009;
    width: 225px;
  }
  .file {
    height: 43px;
    font-size: 12px;
  }
  .folder-title {
    font-size: 11px;
  }
  .reading-file .file-preview {
    padding: 12px 3px;
  }
  .editor-document {
    font-size: 13px;
  }
  .editor-document h1 {
    font-size: 30px;
  }
  .editor-project-copy {
    padding: 20px;
  }
  .editor-placeholder {
    padding: 20px;
  }
  .editor-contact-link {
    padding: 18px;
    gap: 14px;
  }
  .editor-document footer {
    font-size: 9px;
  }
  .editor-tab-wrap .tab {
    font-size: 10px;
    padding: 0 12px;
  }
  .line-gutter {
    display: none;
  }
}
@media (max-height: 850px) {
  .welcome-copy {
    align-items: flex-start;
  }
  .welcome-inner {
    padding-top: 10px;
    padding-bottom: 25px;
  }
}
.file-icon {
  white-space: nowrap;
}

/* ===== Readability and HUD ===== */
.skip-portfolio {
  position: fixed;
  top: 8px;
  left: 10px;
  transform: translateY(-160%);
  z-index: 100;
  background: #c6e5ad;
  color: #172019;
  padding: 12px 20px;
  border-radius: 4px;
  font: 14px var(--sans);
}
.skip-portfolio:focus {
  transform: none;
}
.title-end a {
  color: #bdcdba;
  text-decoration: none;
  letter-spacing: 0;
  font-size: 9px;
  border-left: 1px solid #4c5851;
  padding-left: 10px;
}
.role-placeholder {
  font: 11px/1.6 var(--mono);
  color: #aab7c6;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
}
.role-placeholder span {
  font-size: 9px;
  color: #c5d2c0;
  border: 1px dashed #58644f;
  padding: 2px 6px;
  border-radius: 3px;
}
.welcome-description {
  color: #b1bdcc;
  font-size: 14px;
  line-height: 1.8;
}
.command-list {
  max-width: 490px;
}
.command-help {
  color: #adbacb;
}
.welcome-foot {
  color: #a4b1c2;
  font-size: 9px;
}
.code-comment {
  color: #acbca9;
  font-size: 11px;
}
.markdown-label {
  color: #b5c3d3;
}
.file {
  font-size: 11px;
  height: 37px;
}
.file.selected {
  border-left: 2px solid #b2d896;
  padding-left: 21px;
}
.explorer-bottom small {
  color: #a0adbc;
}
.breadcrumb {
  color: #a3afc0;
}
.terminal-tabs {
  color: #a5b1c2;
}
.title-end {
  color: #a4b49f;
}
.preview-caption strong {
  font-size: 11px;
}
.preview-caption p {
  font-size: 10px;
  color: #a6b7ac;
}
.preview-label {
  font-size: 9px;
}
.preview-coordinate {
  font-size: 8px;
  letter-spacing: 0.6px;
}
.world-preview {
  transform: none;
  border-radius: 6px;
  box-shadow: 0 12px 35px #0002;
}
.preview-caption {
  padding: 18px;
}
.editor-document {
  color: #bdc8d6;
  font-size: 15px;
}
.editor-document h2 {
  font-size: 21px;
}
.editor-project-copy p {
  font-size: 14px;
  line-height: 1.8;
}
.editor-project-copy > span,
.editor-placeholder > span,
.editor-skill-grid section > span {
  font-size: 10px;
}
.editor-links a,
.editor-links button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}
.editor-document summary {
  font-size: 14px;
  min-height: 44px;
  line-height: 1.6;
  padding: 8px 0;
}
.case-study summary > span {
  display: block;
  padding-left: 15px;
  font-size: 11px;
  color: #a6b8c7;
}
.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.case-grid section {
  border-left: 2px solid #465c4b;
  padding-left: 16px;
}
.case-grid h3 {
  margin: 0 0 8px;
  font: 550 14px var(--sans);
  color: #e0e7e1;
}
.case-grid p {
  margin: 0;
  font-size: 13px;
}
.case-pending {
  color: #b6bdc7;
}
.editor-projects article {
  grid-template-columns: 29% 1fr;
}
.editor-project-image {
  max-height: 260px;
}
.editor-world-art {
  max-height: 280px;
}
.editor-project-image img {
  min-height: 240px;
  height: 100%;
  object-fit: contain;
}
.editor-document footer {
  color: #aebdaa;
}
.editor-document details {
  scroll-margin-top: 20px;
}
.world-hud {
  top: 18px;
  left: 20px;
  right: 20px;
  gap: 15px;
  align-items: flex-start;
}
.world-brand {
  background: #fffde9f2;
  border: 1px solid #697762;
  border-radius: 4px;
  box-shadow: 0 2px 6px #243a2520;
  padding: 8px 12px;
  gap: 9px;
}
.world-brand strong {
  font: 19px var(--pixel);
}
.world-brand div > span {
  font: 8px var(--mono);
  margin-top: 4px;
  letter-spacing: 0.6px;
  color: #52644f;
}
.world-symbol {
  width: 23px;
  height: 23px;
}
.world-actions {
  display: flex;
  gap: 8px;
  max-width: none;
  flex-wrap: nowrap;
  align-items: start;
}
.world-actions > button,
.world-menu > summary {
  min-height: 43px;
  border: 1px solid #697762;
  border-radius: 4px;
  box-shadow: 0 2px 6px #243a2520;
  background: #fffde9f2;
  color: #344c3a;
  padding: 11px 14px;
  font: 16px var(--pixel);
  pointer-events: auto;
}
.world-actions > button:hover {
  transform: none;
}
.world-actions #back-editor {
  background: #304d3c;
  color: #fffde9;
  border-color: #304d3c;
  font: 13px var(--sans);
  font-weight: 600;
}
.world-actions #back-editor span {
  font: inherit;
}
.world-actions #partner-button {
  min-height: 43px;
  padding: 4px 10px;
}
.world-actions #partner-button b {
  font: 17px var(--pixel);
}
.world-menu {
  position: relative;
  pointer-events: auto;
}
.world-menu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}
.world-menu > summary::-webkit-details-marker {
  display: none;
}
.world-menu > summary:focus-visible {
  outline: 3px solid #365d46;
  outline-offset: 3px;
}
.world-menu-content {
  position: absolute;
  right: 0;
  top: 51px;
  width: 240px;
  background: #fffdeefc;
  border: 1px solid #697762;
  padding: 12px;
  border-radius: 5px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 3px;
  color: #344c3a;
  max-height: calc(100dvh - 95px);
  overflow: auto;
}
.world-menu-content button {
  min-height: 42px;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
  font: 14px var(--sans);
  padding: 10px;
  color: #344c3a;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-radius: 3px;
}
.world-menu-content button span {
  font: inherit;
}
.world-menu-content button:hover {
  background: #dfe8d3;
  transform: none;
}
.menu-label {
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: #5a6c54;
  margin: 10px 10px 3px;
}
.world-menu-content .zoom-controls {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0;
  border: 1px solid #b8c5ac;
  box-shadow: none;
  border-radius: 3px;
  font: 14px var(--sans);
}
.world-menu-content .zoom-controls button {
  display: block;
  font: 20px var(--sans);
  min-width: 50px;
  text-align: center;
  padding: 5px;
}
.world-menu-content #time-button {
  border: 0;
  box-shadow: none;
  font: 14px var(--sans);
  background: transparent;
}
.world-welcome {
  display: none;
}
.location-pill {
  top: 88px;
  left: 20px;
  border: 0;
  background: #fffde9e0;
  box-shadow: none;
  border-radius: 3px;
  font: 16px var(--pixel);
  padding: 6px 10px;
  letter-spacing: 0.5px;
}
.location-pill .location-time {
  color: #52644f;
  font-size: 13px;
}
.mini-map {
  right: 20px;
  top: 88px;
  width: 140px;
  border: 1px solid #697762;
  box-shadow: 0 2px 6px #243a2520;
  border-radius: 3px;
  padding: 5px;
}
.mini-map > span {
  color: #40583d;
  font-size: 12px;
}
.world-bottom {
  left: 20px;
  right: 20px;
  bottom: 18px;
  justify-content: space-between;
}
.world-note {
  font: 11px var(--sans);
  color: #fffde9;
  background: #304d3cd9;
  box-shadow: none;
  padding: 7px 10px;
  border-radius: 3px;
}
.world-tools {
  display: none;
}
.control-hint {
  border: 1px solid #7f8f72;
  border-radius: 3px;
  box-shadow: none;
  font: 13px var(--sans);
  padding: 9px 12px;
  background: #fffde9ef;
  transition: opacity 0.3s;
}
.control-hint kbd {
  font: 11px var(--mono);
}
.control-hint.hint-dismissed {
  opacity: 0;
  pointer-events: none;
}
.interact {
  border: 1px solid #697762;
  border-radius: 4px;
  box-shadow: 0 2px 6px #243a2520;
  font: 18px var(--pixel);
  padding: 12px 18px;
}
.travel-toast {
  font: 14px/1.5 var(--sans);
  box-shadow: none;
  border: 1px solid #7f8f72;
  border-radius: 4px;
  max-width: calc(100% - 32px);
  text-align: center;
}
.dialogue-box {
  border: 2px solid #60765b;
  box-shadow: 0 3px 14px #243a2530;
  border-radius: 4px;
}
.dialogue-box p {
  font: 15px/1.7 var(--sans);
  min-height: 50px;
}
.dialogue-box > div {
  font: 13px var(--pixel);
  color: #4f664b;
}
.dialogue-box button {
  font: 13px var(--sans);
  color: #405e3d;
  min-height: 44px;
}
#panel:not(.battle-panel) {
  border: 1px solid #64775a;
  box-shadow: 0 15px 60px #14251e55;
  border-radius: 5px;
}
#panel:not(.battle-panel) #panel-content p,
#panel:not(.battle-panel) .panel-card p {
  font: 15px/1.8 var(--sans) !important;
  color: #465944 !important;
}
#panel:not(.battle-panel) .panel-badge,
#panel:not(.battle-panel) .panel-footer {
  font: 11px/1.7 var(--sans);
  color: #52664b;
}
#panel:not(.battle-panel) .place-list strong {
  font: 550 17px var(--sans);
  color: #3a5337;
}
#panel:not(.battle-panel) .place-list small {
  font: 10px var(--mono);
  color: #55694e;
}
.partner-grid small,
.partner-grid button > span {
  color: #4d6745;
}
.project-selection small {
  color: #4b6546;
}
#file-search-results {
  display: grid;
  gap: 5px;
  margin-top: 16px;
}
#file-search-results button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  background: #e5ecd7;
  color: #314c34;
  padding: 12px;
  font: 13px var(--mono);
  text-align: left;
}
#file-search-results button:hover {
  background: #d7e4c6;
}
.panel-input {
  font-size: 16px !important;
}
input:focus-visible,
summary:focus-visible {
  outline: 2px solid #b2d896;
  outline-offset: 3px;
}
#world :focus-visible,
#panel :focus-visible {
  outline-color: #345b40;
}
html[data-motion='reduced'] *,
html[data-motion='reduced'] *::before,
html[data-motion='reduced'] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (max-width: 1100px) {
  .editor-projects article {
    grid-template-columns: 1fr;
  }
  .editor-project-image {
    height: 200px;
  }
  .editor-project-image img {
    min-height: 0;
  }
  .editor-world-art {
    min-height: 160px;
  }
  .world-brand strong {
    font-size: 17px;
  }
  .world-actions > button,
  .world-menu > summary {
    padding: 11px;
  }
  .case-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .title-end {
    display: none;
  }
  .role-placeholder {
    font-size: 10px;
    flex-wrap: wrap;
    gap: 7px;
  }
  .code-comment {
    font-size: 10px;
  }
  .command-description {
    font-size: 12px;
  }
  .file {
    font-size: 12px;
    height: 44px;
  }
  .world-hud {
    top: 12px;
    left: 12px;
    right: 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .world-brand {
    width: max-content;
    padding: 6px 9px;
  }
  .world-brand strong {
    font-size: 17px;
  }
  .world-brand div > span {
    display: none;
  }
  .world-symbol {
    width: 19px;
    height: 19px;
  }
  .world-symbol::after {
    left: 4px;
    top: 4px;
  }
  .world-actions {
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
    max-width: none;
  }
  .world-actions > button,
  .world-menu > summary {
    min-height: 42px;
    font-size: 16px;
    padding: 10px;
  }
  .world-actions #partner-button {
    flex-basis: auto;
    order: 0;
    padding: 3px 8px;
    min-height: 42px;
  }
  .world-actions #partner-button b {
    font-size: 16px;
  }
  .world-actions #partner-button img {
    height: 26px;
  }
  .world-actions #partner-button > span {
    display: none;
  }
  .world-actions #back-editor span {
    display: inline;
  }
  .world-menu {
    margin-left: auto;
  }
  .world-menu > summary span {
    display: inline;
  }
  .world-menu-content {
    width: 230px;
  }
  .world-menu-content button span {
    display: inline;
  }
  .location-pill {
    top: 113px;
    left: 12px;
    font-size: 14px;
    padding: 6px 8px;
  }
  .location-pill .location-time {
    font-size: 11px;
  }
  .mini-map {
    top: 150px;
    right: 12px;
    width: 100px;
    padding: 3px;
  }
  .world-bottom {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .world-note {
    display: none;
  }
  .control-hint {
    display: none;
  }
  .interact {
    font-size: 18px;
    padding: 12px;
    bottom: 135px;
  }
  .travel-toast {
    font-size: 13px;
    bottom: 195px;
  }
  .dialogue-box p {
    font-size: 14px;
  }
  .world-actions #exit-room {
    padding: 10px 8px;
  }
  .world-actions #exit-room span {
    display: none;
  }
  .editor-document {
    font-size: 14px;
  }
  .editor-project-copy p {
    font-size: 14px;
  }
  .editor-document h1 {
    font-size: 30px;
  }
  .editor-document footer {
    font-size: 10px;
  }
  .editor-document summary {
    font-size: 14px;
  }
}
.world-menu-content .menu-label {
  display: block;
  font: 9px var(--mono);
}
.world-menu-content .zoom-controls > span {
  display: inline;
  font: 14px var(--sans);
}
.world-menu-content #time-button > span {
  display: inline !important;
  font: 14px var(--sans);
}
@media (max-width: 600px) {
  .world-menu-content .menu-label {
    display: block;
    font-size: 9px;
  }
  .world-menu-content .zoom-controls > span {
    display: inline;
  }
}

/* ===== Touch controls ===== */
.touch-joystick,
#touch-action-idle {
  display: none;
}
#world-canvas {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#world button,
#world summary {
  touch-action: manipulation;
}
.world-menu-content {
  touch-action: pan-y;
  overscroll-behavior: contain;
}
@media (any-pointer: coarse), (max-width: 600px), (max-width: 1000px) and (max-height: 500px) {
  #world .mobile-controls {
    display: none;
  }
  .touch-joystick {
    display: flex;
    position: absolute;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: calc(22px + env(safe-area-inset-left, 0px));
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
  }
  .touch-control-label {
    font: 10px var(--mono);
    letter-spacing: 2px;
    color: #fffde9;
    text-shadow: 0 1px 3px #243d2c;
    background: #304d3caa;
    padding: 4px 8px;
    border-radius: 3px;
  }
  #touch-stick {
    position: relative;
    display: grid;
    place-items: center;
    width: 136px;
    height: 136px;
    padding: 0;
    border: 2px solid #f3f5dbbb;
    border-radius: 50%;
    background: #233d33a8;
    box-shadow:
      inset 0 0 0 10px #e9f1d312,
      0 3px 12px #14362733;
    touch-action: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }
  #touch-stick:hover {
    filter: none;
  }
  .stick-cross {
    font: 58px var(--sans);
    color: #e3edcd55;
    line-height: 1;
    pointer-events: none;
  }
  #touch-stick-knob {
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    width: 50px;
    height: 50px;
    border: 2px solid #eef4df;
    border-radius: 50%;
    background: #c8d9b4;
    box-shadow: 0 3px 8px #0c312e55;
    pointer-events: none;
    will-change: transform;
  }
  #touch-stick.is-held {
    background: #234733bb;
    border-color: #fffde9;
  }
  #touch-stick.is-held #touch-stick-knob {
    background: #edf4d9;
  }
  #world .interact {
    left: auto;
    right: calc(25px + env(safe-area-inset-right, 0px));
    bottom: calc(39px + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: 82px;
    height: 82px;
    min-height: 82px;
    border-radius: 50%;
    border: 2px solid #f6f8df;
    background: #34553deb;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
    color: #fffde9;
  }
  #world .interact:active {
    background: #6d9256;
    transform: scale(0.96);
  }
  #world .interact kbd {
    font-size: 0;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    margin: 0;
    box-shadow: none;
  }
  #world .interact kbd::after {
    content: 'A';
    font: 500 32px var(--sans);
  }

  #world #interact-label {
    display: block;
    position: absolute;
    bottom: calc(100% + 11px);
    right: -14px;
    width: 155px;
    max-width: calc(50vw - 15px);
    text-align: center;
    border: 1px solid #7d906a;
    border-radius: 5px;
    background: #fffde9f2;
    color: #344e3a;
    padding: 8px 10px;
    font: 13px/1.4 var(--sans);
    overflow-wrap: anywhere;
    pointer-events: none;
    box-shadow: 0 2px 8px #193a2422;
  }
  #touch-action-idle {
    position: absolute;
    right: calc(25px + env(safe-area-inset-right, 0px));
    bottom: calc(39px + env(safe-area-inset-bottom, 0px));
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 2px solid #f3f5db88;
    background: #233d3366;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
    color: #edf3d5aa;
  }
  #touch-action-idle b {
    font: 500 32px var(--sans);
  }
  #touch-action-idle span {
    position: absolute;
    bottom: calc(100% + 12px);
    font: 9px var(--mono);
    letter-spacing: 1px;
    background: #304d3c99;
    padding: 4px 7px;
    border-radius: 3px;
    color: #edf3d5;
  }
  #world:has(#interact:not([hidden])) #touch-action-idle {
    display: none;
  }
  #world .world-bottom {
    bottom: calc(185px + env(safe-area-inset-bottom, 0px));
  }
  #world .world-note,
  #world .control-hint {
    display: none;
  }
  #world .travel-toast {
    bottom: calc(215px + env(safe-area-inset-bottom, 0px));
  }
  #world .dialogue-box {
    bottom: calc(185px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 330px);
    overflow: auto;
  }
  #world .world-hud {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    top: max(12px, env(safe-area-inset-top, 0px));
  }
  html[data-touch-mode='dpad'] .touch-joystick {
    display: none;
  }
  html[data-touch-mode='dpad'] #world .mobile-controls {
    display: grid;
    grid-template-columns: 52px 52px 52px;
    grid-template-rows: 52px 52px;
    gap: 4px;
    left: calc(14px + env(safe-area-inset-left, 0px));
    bottom: calc(25px + env(safe-area-inset-bottom, 0px));
    z-index: 1;
    touch-action: none;
  }
  #world .mobile-controls button {
    border: 1px solid #dfe9c9;
    border-radius: 6px;
    background: #304d3cdd;
    color: #fffde9;
    box-shadow: 0 2px 6px #193a2422;
    font: 24px var(--sans);
    touch-action: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }
  #world .mobile-controls button.is-held {
    background: #87a86d;
    color: #192f25;
  }
  #world .mobile-controls button:active {
    filter: none;
  }
  .world-menu-content button {
    min-height: 46px;
  }
  #world .world-menu-content #touch-mode span {
    display: inline;
    font: 13px var(--sans);
  }
  .terminal-prompt input {
    font-size: 16px;
    min-height: 38px;
  }
  .repo-move-targets button {
    min-height: 36px;
  }
  .repo-battle-footer button {
    min-height: 46px;
    font: 14px var(--sans);
  }
}
@media (pointer: coarse) and (min-width: 901px) {
  .touch-joystick {
    left: calc(30px + env(safe-area-inset-left, 0px));
  }
  #world .interact,
  #touch-action-idle {
    right: calc(35px + env(safe-area-inset-right, 0px));
  }
}
@media (max-height: 520px) and (max-width: 1000px) {
  .touch-joystick {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: calc(20px + env(safe-area-inset-left, 0px));
    gap: 5px;
  }
  #touch-stick {
    width: 108px;
    height: 108px;
  }
  .touch-control-label {
    font-size: 8px;
    padding: 3px 6px;
  }
  #world .interact,
  #touch-action-idle {
    bottom: calc(25px + env(safe-area-inset-bottom, 0px));
    width: 72px;
    height: 72px;
    min-height: 72px;
  }
  #world #interact-label {
    font-size: 12px;
    bottom: calc(100% + 6px);
    padding: 6px 8px;
  }
  #world .world-hud {
    display: flex;
    align-items: start;
    gap: 10px;
  }
  #world .world-brand {
    padding: 6px 9px;
  }
  #world .world-brand strong {
    font-size: 17px;
  }
  #world .world-brand div > span {
    display: none;
  }
  #world .world-actions {
    width: auto;
    margin-left: auto;
  }
  #world .location-pill {
    top: 67px;
  }
  #world .mini-map {
    top: 77px;
    width: 92px;
  }
  #world .world-menu-content {
    max-height: calc(100dvh - 75px);
    top: 48px;
  }
  #world .dialogue-box {
    bottom: 25px;
    width: min(440px, calc(100% - 330px));
    max-height: calc(100dvh - 110px);
  }
  html[data-touch-mode='dpad'] #world .mobile-controls {
    grid-template-columns: 46px 46px 46px;
    grid-template-rows: 46px 46px;
    bottom: 15px;
  }
}
@media (pointer: coarse), (max-width: 900px) {
  .repo-game {
    aspect-ratio: auto;
  }
  .repo-game canvas {
    height: auto;
    aspect-ratio: 4/3;
  }
  .repo-move-targets {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    gap: 8px;
    height: auto;
    padding: 10px 12px;
    background: #eceee1;
  }
  .repo-move-targets button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 8px;
    background: #fffde9;
    color: #344c3a;
    border: 1px solid #8b9d7c;
    border-radius: 4px;
    touch-action: manipulation;
  }
  .repo-move-targets button:hover {
    background: #dde7cf;
  }
  .repo-move-targets .battle-sr {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    font: 14px/1.35 var(--sans);
    text-align: center;
  }
  .repo-move-targets:not(:has(button:not([hidden]))) {
    display: none;
  }
  .repo-battle-footer {
    padding: 8px 14px;
    align-items: center;
    font: 12px/1.5 var(--sans);
    gap: 12px;
  }
  .repo-battle-footer > span {
    max-width: 55%;
  }
  .repo-battle-footer button {
    font: 13px/1.4 var(--sans);
    padding: 8px;
  }
  .gym-switches button {
    min-height: 54px;
    font: 15px var(--sans);
  }
  .gym-switches small {
    font: 11px/1.4 var(--sans);
  }
  .gym-move-guide {
    font: 12px/1.5 var(--sans);
  }
  .gym-move-guide small {
    font: 11px/1.5 var(--sans);
  }
}
@media (max-height: 520px) and (max-width: 1000px) {
  .repo-battle:not(.gym-match) {
    width: min(100vw, calc((100dvh - 185px) * 4 / 3));
  }
  .repo-battle.gym-match {
    width: min(100vw, 500px);
  }
  .repo-move-targets button {
    min-height: 44px;
    padding: 7px;
  }
  .repo-move-targets .battle-sr {
    font-size: 12px;
  }
}

/* ===== IDE visual system ===== */
:root {
  --bg: #1c1d1f;
  --panel: #17181a;
  --border: #303134;
  --text: #e5e6e3;
  --muted: #a5a8a5;
  --green: #b2cc9c;
  --taste-ground: #1c1d1f;
  --taste-surface: #17181a;
  --taste-raised: #242628;
  --taste-ink: #e5e6e3;
  --taste-secondary: #b2b6b0;
  --taste-faint: #9b9f99;
  --taste-accent: #b2cc9c;
  --taste-radius: 4px;
  --taste-gap: 24px;
}
#ide {
  background: var(--taste-ground);
  color: var(--taste-ink);
}
#ide .workspace {
  position: relative;
}
#ide .titlebar {
  height: 42px;
  background: var(--taste-surface);
  border-color: var(--border);
  font-size: 11px;
  color: var(--taste-secondary);
}
#ide .title-end {
  font: 11px var(--sans);
  letter-spacing: 0;
  right: 22px;
}
#ide .title-end a {
  border: 0;
  padding: 8px 0;
  color: var(--taste-secondary);
  font-size: 11px;
}
#ide .traffic {
  gap: 7px;
}
#ide .traffic i {
  width: 8px;
  height: 8px;
  opacity: 0.7;
}
#ide .activity {
  width: 52px;
  background: var(--taste-surface);
  border-color: var(--border);
}
#ide .activity button {
  width: 52px;
  height: 50px;
  color: var(--taste-faint);
}
#ide .activity .active {
  color: var(--taste-ink);
}
#ide .activity .active::before {
  width: 1px;
  background: var(--taste-accent);
}
#ide .explorer {
  width: 216px;
  background: var(--taste-surface);
  border-color: var(--border);
  padding-top: 22px;
}
#ide .explorer-title {
  font: 12px var(--sans);
  letter-spacing: 0;
  color: var(--taste-secondary);
  margin-bottom: 24px;
  padding: 0 20px;
}
#ide .folder-title {
  font: 12px var(--mono);
  padding-left: 20px;
  color: var(--taste-ink);
  margin-bottom: 10px;
}
#ide .file {
  height: 40px;
  padding-left: 25px;
  font: 12px var(--mono);
  color: var(--taste-secondary);
  border: 0;
  gap: 10px;
}
#ide .file:hover {
  filter: none;
  color: var(--taste-ink);
  background: #202123;
}
#ide .file.selected {
  background: var(--taste-raised);
  color: var(--taste-ink);
  position: relative;
  padding-left: 25px;
}
#ide .file.selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--taste-accent);
}
#ide .file-icon {
  font-size: 11px;
  width: 19px;
}
#ide .tree-folder {
  font: 12px var(--mono);
  padding-left: 22px;
  color: var(--taste-faint);
}
#ide .explorer-bottom {
  font: 12px/1.8 var(--sans);
  left: 22px;
  bottom: 24px;
  color: var(--taste-secondary);
}
#ide .explorer-bottom .little-dot {
  display: none;
}
#ide .explorer-bottom small {
  font: 11px var(--sans);
  margin: 0;
  color: var(--taste-faint);
}
#ide .tabbar {
  height: 42px;
  background: var(--taste-surface);
  border-color: var(--border);
}
#ide .editor-tab-wrap {
  background: var(--taste-surface);
  border-color: var(--border);
}
#ide .editor-tab-wrap.is-active {
  background: var(--taste-ground);
}
#ide .editor-tab-wrap .tab {
  height: 42px;
  background: transparent;
  color: var(--taste-faint);
  font: 12px var(--mono);
  gap: 8px;
  padding: 0 16px;
}
#ide .editor-tab-wrap .tab.active {
  color: var(--taste-ink);
}
#ide .tab.active::before {
  background: var(--taste-accent);
}
#ide .close-file {
  color: var(--taste-faint);
  font-size: 17px;
}
#ide .editor-play {
  color: var(--taste-secondary);
  padding: 0 20px;
}
#ide .breadcrumb {
  height: 38px;
  padding-left: 30px;
  font: 11px var(--mono);
  color: var(--taste-faint);
  gap: 12px;
}
#ide .crumb-current {
  color: var(--taste-secondary);
}
#ide .editor-content {
  padding: 36px 48px;
  gap: 40px;
  align-items: center;
}
#ide .welcome-copy {
  align-items: center;
  align-self: stretch;
  flex: 1.1;
  min-width: 0;
}
#ide .line-gutter {
  display: none;
}
#ide .welcome-inner {
  padding: 0;
  max-width: 580px;
  width: 100%;
}
#ide .code-comment {
  font: 12px/1.7 var(--mono);
  color: var(--taste-faint);
  white-space: normal;
  margin-bottom: 30px;
}
#ide .welcome-inner h1 {
  font: 500 clamp(38px, 3.6vw, 56px) / 1.12 var(--sans);
  letter-spacing: -0.045em;
  white-space: normal;
  color: var(--taste-ink);
  margin: 0 0 24px;
}
#ide h1 em {
  font-style: normal;
  color: inherit;
}
#ide .cursor {
  width: 2px;
  margin-left: 7px;
  background: var(--taste-secondary);
}
#ide .welcome-description {
  font: 15px/1.8 var(--sans);
  color: var(--taste-secondary);
  margin: 0 0 28px;
  max-width: 430px;
}
#ide .role-placeholder {
  display: none;
}
#ide .command-list {
  border: 0;
  border-radius: var(--taste-radius);
  background: var(--taste-surface);
  margin-top: 0;
  max-width: 490px;
}
#ide .command-line {
  padding: 20px;
  grid-template-columns: 14px 1fr;
  gap: 6px 12px;
  min-height: 88px;
  border: 0;
  background: transparent;
}
#ide .command-line + .command-line {
  border-top: 1px solid var(--border);
}
#ide .command-line:hover {
  background: #242628;
  filter: none;
}
#ide .command-line code {
  font: 16px var(--mono);
  color: var(--taste-ink);
}
#ide .command-arrow {
  color: var(--taste-secondary);
  font-size: 20px;
}
#ide .syntax-blue {
  color: #b8c6d0;
}
#ide .syntax-green {
  color: #b8c9aa;
}
#ide .syntax-yellow {
  color: #c9c2aa;
}
#ide .command-description {
  font: 13px/1.5 var(--sans);
  color: var(--taste-secondary);
  align-items: center;
}
#ide .command-help {
  font: 12px/1.8 var(--sans);
  color: var(--taste-faint);
  margin: 16px 0 0;
}
#ide .world-preview {
  flex: 1;
  width: 44%;
  max-width: 480px;
  min-width: 0;
  margin: 0;
  border: 0;
  background: var(--taste-surface);
  border-radius: var(--taste-radius);
  box-shadow: none;
  transform: none;
  overflow: hidden;
}
#ide .preview-label {
  background: var(--taste-surface);
  padding: 15px 18px;
  color: var(--taste-ink);
  font: 12px var(--sans);
  letter-spacing: 0;
}
#ide .preview-label > span:last-child {
  color: var(--taste-faint);
  font: 11px var(--sans);
}
#ide .preview-label i {
  display: none;
}
#ide .preview-canvas-wrap {
  height: 310px;
}
#ide .preview-vignette {
  display: none;
}
#ide .preview-caption {
  padding: 20px 18px;
  gap: 10px;
}
#ide .preview-caption strong {
  font: 500 14px var(--sans);
  color: var(--taste-ink);
}
#ide .preview-caption p {
  font: 12px/1.6 var(--sans);
  color: var(--taste-secondary);
  margin-top: 7px;
}
#ide .preview-arrow {
  font-size: 18px;
  color: var(--taste-faint);
}
#ide .terminal {
  height: 146px;
  background: var(--taste-surface);
  border-color: var(--border);
}
#ide .terminal-tabs {
  height: 35px;
  padding: 0 28px;
  font: 11px var(--sans);
  color: var(--taste-faint);
}
#ide .terminal-active {
  color: var(--taste-ink);
}
#ide .terminal-active::after {
  background: var(--taste-accent);
}
#ide .terminal-body {
  padding: 10px 28px;
  font: 11px/1.8 var(--mono);
}
#ide .terminal-gray {
  color: var(--taste-faint);
}
#ide .terminal-blue,
#ide .terminal-green {
  color: var(--taste-secondary);
}
#ide .terminal-prompt input {
  font: 12px var(--mono);
  color: var(--taste-ink);
  min-height: 34px;
}
#ide .terminal-prompt input::placeholder {
  color: var(--taste-faint);
}
#ide .terminal-prompt button {
  color: var(--taste-ink);
  font-size: 18px;
}
#ide #terminal-output {
  font: 11px/1.6 var(--mono);
  color: var(--taste-secondary);
}
#ide .statusbar {
  height: 26px;
  background: var(--taste-surface);
  color: var(--taste-faint);
  border-top: 1px solid var(--border);
  font: 11px var(--sans);
  padding: 0 16px;
}
#ide .status-middle {
  font-size: 11px;
  color: var(--taste-secondary);
}
#ide .editor-content.reading-file {
  padding: 0;
  align-items: stretch;
}
#ide .reading-file .file-preview {
  padding: 40px 48px;
}
#ide .editor-document {
  font: 15px/1.8 var(--sans);
  color: var(--taste-secondary);
  max-width: 1100px;
}
#ide .document-label {
  display: none;
}
#ide .editor-document header {
  margin-bottom: 30px;
}
#ide .editor-document h1 {
  font: 550 32px/1.2 var(--sans);
  letter-spacing: -0.035em;
  color: var(--taste-ink);
  margin: 0 0 14px;
}
#ide .document-intro {
  font: 15px/1.8 var(--sans);
  color: var(--taste-secondary);
  max-width: 650px;
  margin: 0;
}
#ide .editor-document h2 {
  font: 550 20px/1.4 var(--sans);
  color: var(--taste-ink);
}
#ide .editor-placeholder {
  border: 0;
  border-radius: var(--taste-radius);
  padding: 24px;
  background: var(--taste-surface);
  margin: 24px 0;
}
#ide .editor-placeholder > span {
  font: 12px/1.6 var(--sans);
  letter-spacing: 0;
  color: var(--taste-faint);
}
#ide .editor-placeholder p {
  margin-top: 10px;
}
#ide .editor-columns {
  gap: 32px;
  margin: 32px 0;
  align-items: start;
}
#ide .pending-label {
  font: 12px var(--sans);
  color: var(--taste-faint);
}
#ide .editor-skill-grid {
  display: block;
}
#ide .editor-skill-grid section {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
}
#ide .editor-skill-grid h2 {
  font-size: 16px;
  margin: 0;
}
#ide .editor-skill-grid p {
  font: 14px var(--sans);
  color: var(--taste-faint);
  margin: 0;
}
#ide .editor-projects {
  gap: 32px;
}
#ide .editor-projects article {
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  border: 0;
  background: var(--taste-surface);
  border-radius: var(--taste-radius);
  overflow: hidden;
  align-items: start;
}
#ide .editor-project-image {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #212722;
  display: block;
  width: 100%;
  height: 260px;
  max-height: none;
  overflow: hidden;
  text-align: left;
}
#ide .editor-project-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
}
#ide .editor-project-image[data-play-world] img {
  object-fit: cover;
}
#ide .editor-project-copy {
  padding: 26px;
}
#ide .editor-project-copy > span {
  font: 12px/1.5 var(--sans);
  letter-spacing: 0;
  color: var(--taste-faint);
}
#ide .editor-project-copy h2 {
  font-size: 22px;
  margin: 9px 0 12px;
}
#ide .editor-project-copy p {
  font: 14px/1.8 var(--sans);
  color: var(--taste-secondary);
}
#ide .editor-tags {
  gap: 14px;
  margin: 18px 0;
}
#ide .editor-tags span {
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--taste-faint);
  font: 12px var(--sans);
}
#ide .editor-links {
  gap: 24px;
}
#ide .editor-links a,
#ide .editor-links button {
  font: 13px var(--sans);
  color: var(--taste-ink);
  min-height: 42px;
  text-decoration: underline;
  text-decoration-color: #60655c;
  text-underline-offset: 5px;
}
#ide .editor-document details {
  border-color: var(--border);
  margin-top: 16px;
  padding-top: 8px;
}
#ide .editor-document summary {
  font: 14px/1.8 var(--sans);
  color: var(--taste-ink);
  min-height: 44px;
}
#ide .case-study summary > span {
  font: 12px var(--sans);
  color: var(--taste-faint);
  padding-left: 15px;
  line-height: 1.6;
}
#ide .case-grid {
  grid-template-columns: 1fr;
  gap: 24px;
}
#ide .case-grid section {
  border: 0;
  padding: 0;
}
#ide .case-grid h3 {
  color: var(--taste-ink);
  font: 550 14px var(--sans);
}
#ide .case-grid p {
  font-size: 14px;
}
#ide .case-pending {
  color: var(--taste-faint) !important;
}
#ide .editor-contact-link {
  padding: 24px;
  background: var(--taste-surface);
  border: 0;
  border-radius: var(--taste-radius);
}
#ide .editor-contact-link > span {
  color: var(--taste-faint);
  font: 12px var(--sans);
  letter-spacing: 0;
}
#ide .editor-contact-link strong {
  font: 500 20px var(--sans);
  color: var(--taste-ink);
}
#ide .editor-document footer {
  margin-top: 32px;
  padding-top: 20px;
  border-color: var(--border);
  font: 12px var(--sans);
  color: var(--taste-faint);
}
#ide .editor-document footer button {
  color: var(--taste-secondary);
}
#file-drawer-scrim {
  display: none;
}
@media (max-width: 1100px) {
  #ide .explorer {
    width: 190px;
  }
  #ide .editor-content {
    padding: 32px;
    gap: 24px;
  }
  #ide .welcome-inner h1 {
    font-size: 44px;
  }
  #ide .preview-canvas-wrap {
    height: 250px;
  }
  #ide .reading-file .file-preview {
    padding: 32px;
  }
  #ide .editor-projects article {
    grid-template-columns: 1fr;
  }
  #ide .editor-project-image {
    height: 230px;
  }
}
@media (max-width: 1000px) {
  #ide .world-preview {
    display: none;
  }
  #ide .welcome-copy {
    max-width: 650px;
    margin: 0 auto;
  }
}
@media (max-width: 900px) {
  #ide .explorer {
    display: none;
    position: absolute;
    left: 52px;
    top: 0;
    bottom: 0;
    width: 260px;
    z-index: 25;
    box-shadow: 12px 0 30px #0004;
  }
  #ide .explorer.mobile-open {
    display: block;
  }
  #ide .mobile-files-toggle {
    display: block;
    background: transparent;
    color: var(--taste-secondary);
    font: 12px var(--sans);
    padding: 10px 0;
    margin-right: 8px;
  }
  #ide .file {
    height: 44px;
    font-size: 13px;
  }
  #file-drawer-scrim:not([hidden]) {
    display: block;
    position: absolute;
    inset: 0;
    background: #0008;
    z-index: 24;
    cursor: default;
  }
  #ide .welcome-inner {
    max-width: 580px;
  }
  #ide .breadcrumb {
    padding-left: 26px;
  }
  #ide .editor-skill-grid section {
    grid-template-columns: 200px 1fr;
  }
}
@media (max-width: 600px) {
  #ide .activity {
    display: none;
  }
  #ide .titlebar {
    height: 36px;
    font-size: 11px;
  }
  #ide .title-end {
    display: none;
  }
  #ide .traffic {
    left: 12px;
  }
  #ide .explorer {
    left: 0;
    width: min(280px, 85vw);
  }
  #ide .tabbar {
    height: 42px;
  }
  #ide .editor-play {
    padding: 0 15px;
  }
  #ide .breadcrumb {
    height: 42px;
    padding: 0 20px;
    font-size: 11px;
    gap: 8px;
  }
  #ide .mobile-files-toggle {
    font-size: 12px;
    margin-right: 0;
    white-space: nowrap;
  }
  #ide .breadcrumb > span:last-child {
    display: none;
  }
  #ide .editor-content {
    padding: 24px 22px;
    align-items: flex-start;
  }
  #ide .welcome-copy {
    align-items: start;
    margin: 0;
    width: 100%;
  }
  #ide .welcome-inner {
    padding: 0;
  }
  #ide .code-comment {
    font-size: 11px;
    line-height: 1.7;
    margin-bottom: 22px;
    max-width: 310px;
  }
  #ide .welcome-inner h1 {
    font-size: 40px;
    line-height: 1.12;
    margin-bottom: 20px;
  }
  #ide .welcome-description {
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 24px;
  }
  #ide .welcome-description br {
    display: none;
  }
  #ide .command-line {
    min-height: 86px;
    padding: 17px 16px;
    gap: 7px 10px;
  }
  #ide .command-line code {
    font-size: 15px;
  }
  #ide .command-description {
    font-size: 13px;
  }
  #ide .command-help {
    font-size: 12px;
    line-height: 1.7;
    margin-top: 16px;
  }
  #ide .terminal {
    height: 142px;
  }
  #ide .terminal-tabs {
    padding: 0 20px;
    font-size: 11px;
  }
  #ide .terminal-right {
    font-size: 11px;
  }
  #ide .terminal-body {
    padding: 9px 20px;
  }
  #ide .terminal-body > div:first-child {
    font-size: 10px;
    line-height: 1.6;
  }
  #ide .terminal-prompt input {
    font-size: 16px;
    min-height: 38px;
  }
  #ide .terminal-prompt button {
    min-width: 38px;
  }
  #ide #terminal-output {
    font-size: 11px;
    max-height: 35px;
  }
  #ide .statusbar {
    height: 25px;
    padding: 0 12px;
    font-size: 11px;
  }
  #ide .statusbar .status-spaced {
    display: none;
  }
  #ide .reading-file .file-preview {
    padding: 4px 0;
  }
  #ide .editor-document h1 {
    font-size: 28px;
  }
  #ide .editor-document header {
    margin-bottom: 24px;
  }
  #ide .document-intro {
    font-size: 14px;
  }
  #ide .editor-placeholder {
    padding: 20px;
    margin: 24px 0;
  }
  #ide .editor-project-copy {
    padding: 22px;
  }
  #ide .editor-project-image {
    height: 200px;
  }
  #ide .editor-projects {
    gap: 24px;
  }
  #ide .editor-skill-grid section {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }
  #ide .editor-skill-grid h2 {
    font-size: 16px;
  }
  #ide .editor-columns {
    gap: 20px;
  }
  #ide .editor-document footer {
    font-size: 11px;
    gap: 15px;
  }
  #ide .editor-document footer button {
    font-size: 11px;
  }
  #ide .editor-contact-link {
    padding: 20px;
    gap: 14px;
  }
}
@media (max-height: 760px) {
  #ide .welcome-copy {
    align-items: flex-start;
  }
  #ide .editor-content {
    padding-top: 26px;
  }
  #ide .code-comment {
    margin-bottom: 22px;
  }
  #ide .welcome-inner h1 {
    font-size: 42px;
  }
}
#ide .dim {
  color: var(--taste-faint);
}
@media (max-width: 600px) {
  #ide .terminal {
    height: 160px;
  }
  #ide .terminal-body > div:first-child {
    font-size: 11px;
  }
}
@media (max-width: 900px) {
  #ide .breadcrumb {
    height: 46px;
  }
  #ide .mobile-files-toggle {
    min-height: 44px;
  }
}
@media (max-width: 600px) {
  #ide .tabbar,
  #ide .editor-tab-wrap .tab {
    height: 44px;
  }
  #ide .close-file {
    min-width: 40px;
  }
  #ide .terminal-prompt button {
    min-width: 44px;
    min-height: 44px;
  }
}
#ide .skills-group {
  margin: 32px 0;
}
#ide .skills-group > h2 {
  font: 550 20px/1.4 var(--sans);
  margin: 0 0 10px;
}
#ide .skills-group > p {
  font: 14px/1.8 var(--sans);
  color: var(--taste-secondary);
  margin: 0 0 12px;
}
#ide .skills-group .editor-skill-grid h3 {
  font: 550 15px/1.5 var(--sans);
  margin: 0;
  color: var(--taste-ink);
}
#ide .skills-group .editor-skill-grid p {
  font: 14px/1.8 var(--sans);
  color: var(--taste-secondary);
}

/* ===== Welcome and editor refinements ===== */
#ide .welcome-inner h1 {
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}
#ide .welcome-description {
  margin-bottom: 16px;
}
#ide .welcome-role {
  font: 14px/1.65 var(--sans);
  color: var(--taste-ink);
  margin: 0 0 28px;
}
#ide .welcome-role span {
  color: var(--taste-secondary);
}
#ide .command-primary {
  background: #2c332b;
}
#ide .command-primary:hover {
  background: #343e32;
}
#ide .command-primary .command-description {
  color: var(--taste-ink);
  font-weight: 600;
}
#ide .command-primary code {
  color: var(--taste-accent);
}
#ide .world-preview {
  max-width: 420px;
  flex: 0.85;
}
#ide .preview-canvas-wrap {
  height: 260px;
}
.files-help-mobile {
  display: none;
}
#ide .terminal {
  flex-shrink: 0;
}
#ide .terminal-tabs {
  height: 44px;
  padding-right: 28px;
}
#ide #terminal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  color: var(--taste-ink);
  font: 12px var(--sans);
  border: 0;
  cursor: pointer;
}
#ide .terminal-active::after {
  display: none;
}
#ide .terminal-chevron {
  font-size: 16px;
  transform: rotate(180deg);
}
#ide .is-collapsed .terminal-chevron {
  transform: none;
}
#ide .terminal.is-collapsed {
  height: 44px;
}
#ide .terminal-body[hidden] {
  display: none;
}
#ide .terminal-body {
  padding-top: 4px;
}
#ide .editor-help-button {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  color: var(--taste-secondary);
  font: 12px var(--sans);
  border: 0;
  cursor: pointer;
}
#ide .editor-help-button:hover,
#ide #terminal-toggle:hover {
  color: var(--taste-ink);
}
#ide .breadcrumb {
  min-height: 44px;
}
#ide .editor-links a,
#ide .editor-links button {
  min-height: 44px;
  padding: 6px 8px;
  margin-left: -8px;
  margin-right: 8px;
}
#ide .editor-project-image img,
#ide .editor-project-image[data-play-world] img {
  object-fit: contain;
}
#ide .editor-document footer button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
}
#ide .close-file {
  min-width: 44px;
  min-height: 44px;
}
#ide .tabbar,
#ide .editor-tab-wrap .tab {
  min-height: 44px;
}
#ide .editor-play {
  min-width: 44px;
  min-height: 44px;
}
#ide ::selection {
  background: #b2cc9c;
  color: #17181a;
}
#ide input {
  caret-color: var(--taste-accent);
}
#ide :focus-visible {
  outline: 2px solid var(--taste-accent);
  outline-offset: -3px;
}
#panel.editor-panel {
  background: var(--taste-ground);
  color: var(--taste-ink);
  border-color: var(--border);
  font-family: var(--sans);
}
#panel.editor-panel::backdrop {
  background: #0009;
  backdrop-filter: none;
}
#panel.editor-panel .panel-top {
  border-color: var(--border);
  color: var(--taste-secondary);
}
#panel.editor-panel h2 {
  font: 550 28px/1.25 var(--sans);
  letter-spacing: -0.025em;
  color: var(--taste-ink);
}
#panel.editor-panel #panel-content p {
  color: var(--taste-secondary) !important;
}
#panel.editor-panel #close-panel {
  color: var(--taste-ink);
  background: transparent;
  min-width: 44px;
  min-height: 44px;
  border: 0;
}
#panel.editor-panel .help-terminal {
  min-height: 44px;
  padding: 10px 16px;
  font: 14px var(--sans);
  background: var(--taste-accent);
  color: var(--taste-surface);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
#panel.editor-panel .help-note {
  font-size: 13px !important;
  margin-top: 24px;
}
#panel.editor-panel :focus-visible {
  outline: 2px solid var(--taste-accent);
  outline-offset: 3px;
}
#world .world-menu-content .menu-label {
  font: 12px/1.5 var(--sans);
  letter-spacing: 0;
  color: #4d6047;
}
#world .world-menu-content button {
  min-height: 44px;
}
#world .world-actions > button,
#world .world-menu > summary {
  min-height: 44px;
}
#world .touch-control-label,
#touch-action-idle span {
  font: 11px/1.4 var(--sans);
  letter-spacing: 0.04em;
  background: #304d3c;
  color: #fffde9;
}
#boot small {
  font-size: 11px;
}
@media (max-width: 1100px) {
  #ide .welcome-role {
    margin-bottom: 22px;
  }
  #ide .preview-canvas-wrap {
    height: 240px;
  }
  #ide .editor-project-image {
    height: auto;
    aspect-ratio: 16/9;
  }
}
@media (max-width: 900px) {
  #ide .welcome-copy {
    max-width: 580px;
  }
  #ide .editor-help-button {
    padding-right: 16px;
  }
}
@media (max-width: 600px) {
  #ide .welcome-inner h1 {
    font-size: 40px;
  }
  #ide .welcome-role {
    font-size: 13px;
    margin-bottom: 24px;
  }
  #ide .welcome-description {
    margin-bottom: 12px;
  }
  #ide .code-comment {
    margin-bottom: 20px;
  }
  #ide .terminal-tabs {
    padding: 0 20px;
  }
  #ide .terminal-right {
    font-size: 11px;
  }
  #ide .terminal:not(.is-collapsed) {
    height: 160px;
  }
  #ide .breadcrumb {
    gap: 6px;
    padding-left: 20px;
    padding-right: 8px;
  }
  #ide .breadcrumb > span:last-child {
    display: none;
  }
  #ide .files-help-desktop {
    display: none;
  }
  #ide .files-help-mobile {
    display: inline;
  }
  #ide .editor-document footer {
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
  }
  #ide .editor-help-button {
    padding: 0 8px;
  }
  #panel.editor-panel h2 {
    font-size: 25px;
  }
}

/* ===== World panels and menus ===== */
#world,
#boot,
.world-panel {
  --world-paper: #fffde9;
  --world-ink: #304638;
  --world-muted: #52634c;
  --world-edge: #75836a;
  --world-fill: #e7ecd8;
}
#world .world-brand {
  background: var(--world-paper);
  box-shadow: none;
}
#world .world-brand strong {
  font: 26px/1 var(--pixel);
  letter-spacing: 0;
}
#world .world-brand div > span {
  display: none;
}
#world .world-actions > button,
#world .world-menu > summary {
  font: 14px/1.3 var(--sans);
  min-height: 44px;
  background: var(--world-paper);
  color: var(--world-ink);
  box-shadow: none;
  border-color: var(--world-edge);
}
#world .world-actions #back-editor {
  background: var(--world-ink);
  color: var(--world-paper);
  border-color: var(--world-ink);
}
#world .world-actions #partner-button b {
  font: 500 14px/1.3 var(--sans);
}
#world .world-actions #partner-button {
  min-height: 44px;
}
#world .location-pill {
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 0;
  background: var(--world-paper);
  padding: 8px 12px;
}
#world .location-pill .location-time {
  font: 12px/1.4 var(--sans);
  color: var(--world-muted);
}
#world .mini-map {
  background: var(--world-paper);
  border-color: var(--world-edge);
  box-shadow: none;
}
#world .mini-map > span {
  font: 11px/1.4 var(--sans);
  letter-spacing: 0;
  padding-top: 4px;
}
#world .world-menu-content {
  background: var(--world-paper);
  border-color: var(--world-edge);
  box-shadow: 0 12px 28px #142a2529;
  border-radius: 4px;
  padding: 10px;
}
#world .world-menu-content .menu-label {
  font: 600 12px/1.5 var(--sans);
  color: var(--world-muted);
  margin: 12px 10px 4px;
}
#world .world-menu-content button {
  font: 14px/1.4 var(--sans);
  color: var(--world-ink);
  min-height: 44px;
}
#world .world-menu-content button:hover {
  background: var(--world-fill);
  filter: none;
}
#world .control-hint {
  font: 13px/1.4 var(--sans);
  background: var(--world-paper);
  color: var(--world-ink);
}
#world .interact {
  font: 600 14px/1.4 var(--sans);
  box-shadow: none;
}
#world .dialogue-box {
  background: var(--world-paper);
  border: 2px solid var(--world-edge);
  border-radius: 4px;
  box-shadow: 0 8px 24px #142a2529;
  padding: 20px 24px;
}
#world #dialogue-speaker {
  font: 26px/1.2 var(--pixel);
  color: var(--world-ink);
  letter-spacing: 0;
}
#world #dialogue-text {
  font: 16px/1.65 var(--sans);
  color: var(--world-ink);
  margin: 12px 0;
}
#world #dialogue-close {
  font: 600 14px/1.4 var(--sans);
  min-height: 44px;
  color: var(--world-ink);
}
#world .travel-toast {
  background: var(--world-paper);
  font: 14px/1.5 var(--sans);
  color: var(--world-ink);
}
#world ::selection,
.world-panel ::selection {
  background: #c4d5ad;
  color: #263b2d;
}
#panel.world-panel:not(.battle-panel) {
  background: var(--world-paper);
  color: var(--world-ink);
  border: 1px solid var(--world-edge);
  border-radius: 4px;
  box-shadow: 0 16px 48px #10231d40;
  max-width: 680px;
  max-height: 88dvh;
}
#panel.world-panel::backdrop {
  background: #14251db3;
  backdrop-filter: none;
}
#panel.world-panel:not(.battle-panel) .panel-top {
  padding: 10px 16px 10px 24px;
  font: 14px/1.4 var(--sans);
  letter-spacing: 0;
  color: var(--world-muted);
  border-color: #d4dbc4;
}
#panel.world-panel:not(.battle-panel) #close-panel {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  font: 18px var(--sans);
  background: transparent;
  color: var(--world-ink);
  border: 0;
}
#panel.world-panel:not(.battle-panel) #panel-content {
  padding: 24px 28px 28px;
}
#panel.world-panel:not(.battle-panel) #panel-title {
  font: 36px/1.15 var(--pixel) !important;
  letter-spacing: 0;
  margin: 0 0 16px;
  color: var(--world-ink);
}
#panel.world-panel:not(.battle-panel) #panel-content p {
  font: 15px/1.7 var(--sans) !important;
  color: var(--world-muted) !important;
}
#panel.world-panel:not(.battle-panel) h3 {
  font: 26px/1.2 var(--pixel);
  color: var(--world-ink);
  margin: 28px 0 10px;
}
#panel.world-panel:not(.battle-panel) .panel-footer {
  font: 13px/1.6 var(--sans);
  color: var(--world-muted);
  border: 0;
  margin-top: 24px;
  padding-top: 0;
}
#panel.world-panel:not(.battle-panel) .place-list {
  gap: 10px;
}
#panel.world-panel:not(.battle-panel) .place-list button {
  background: var(--world-fill);
  border: 0;
  box-shadow: none;
  border-radius: 4px;
  min-height: 80px;
  padding: 16px;
}
#panel.world-panel:not(.battle-panel) .place-list small {
  font: 12px/1.5 var(--sans);
  color: var(--world-muted);
}
#panel.world-panel:not(.battle-panel) .place-list strong {
  font: 600 16px/1.4 var(--sans);
  color: var(--world-ink);
}
#panel.world-panel .partner-grid {
  gap: 12px;
  margin-top: 24px;
}
#panel.world-panel .partner-grid button {
  background: var(--world-fill);
  color: var(--world-ink);
  border: 2px solid transparent;
  border-radius: 4px;
  box-shadow: none;
  padding: 16px 10px;
  transition: background 0.15s;
}
#panel.world-panel .partner-grid button:hover {
  transform: none;
  background: #dde6c8;
  filter: none;
}
#panel.world-panel .partner-grid button[aria-pressed='true'] {
  border-color: var(--world-ink);
  background: #d5e2c2;
  box-shadow: none;
}
#panel.world-panel .partner-grid strong {
  font: 26px/1.2 var(--pixel);
  color: var(--world-ink);
}
#panel.world-panel .partner-grid small,
#panel.world-panel .partner-grid button > span {
  font: 12px/1.5 var(--sans);
  color: var(--world-muted);
}
#panel.world-panel .partner-grid button > span {
  margin-top: 12px;
}
#panel.world-panel .gym-leader span,
#panel.world-panel .gym-leader strong {
  font: 13px/1.5 var(--sans);
  color: var(--world-muted);
}
#panel.world-panel .gym-roster figcaption {
  font: 12px/1.5 var(--sans);
  color: var(--world-ink);
}
#panel.world-panel .gym-team-grid > button {
  background: var(--world-fill);
  border: 2px solid transparent;
  border-radius: 4px;
  color: var(--world-ink);
}
#panel.world-panel .gym-team-grid > button[aria-pressed='true'] {
  border-color: var(--world-ink);
  box-shadow: none;
  background: #d5e2c2;
}
#panel.world-panel .gym-team-grid small,
#panel.world-panel .gym-team-grid em,
#panel.world-panel .gym-order {
  font: 12px/1.5 var(--sans);
  color: var(--world-muted);
}
#panel.world-panel .gym-team-grid em {
  min-height: 0;
}
#panel.world-panel .gym-start-row {
  font: 14px/1.5 var(--sans);
  gap: 16px;
}
#panel.world-panel .gym-start-row button {
  font: 600 14px/1.5 var(--sans);
  min-height: 44px;
  background: var(--world-ink);
  color: var(--world-paper);
  border: 0;
  border-radius: 4px;
  padding: 12px 16px;
}
#panel.world-panel .gym-start-row button:disabled {
  opacity: 1;
  background: #dce2d0;
  color: #58664f;
  cursor: default;
}
#panel.world-panel .gym-rules {
  font: 14px/1.6 var(--sans);
}
#panel.world-panel .gym-rules summary {
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
}
/* ===== Loading screen: a random partner colours the screen and reacts while the world loads ===== */
#boot {
  --face-size: min(clamp(164px, 32vh, 280px), 76vw);
  --world-ink: var(--boot-ink, #304638);
  --world-muted: var(--boot-ink, #52634c);
  background: var(--boot-bg, #edf0dc);
  color: var(--world-ink);
  z-index: 100;
  padding: 24px;
  overflow: auto;
  justify-content: safe center;
  transition: background 0.3s;
}
#boot .boot-card {
  width: min(560px, 100%);
  text-align: center;
  margin: auto;
  -webkit-user-select: none;
  user-select: none;
}
#boot .boot-scene {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
/* The face is a real button: pokeable by mouse, touch, and Enter or Space. */
#boot #boot-face {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#boot #boot-face:hover {
  animation: boot-wobble 0.6s ease-in-out;
}
/* One ring pulse about a second in, until the visitor has poked once this session */
#boot.boot-hint #boot-face::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 3px solid var(--boot-ink);
  opacity: 0;
  pointer-events: none;
  animation: boot-hint-ring 1.1s ease-out 2;
}
/* Sticker look: white rim plus a soft shadow under the face */
#boot .face {
  display: block;
  width: var(--face-size);
  height: var(--face-size);
  overflow: visible;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.16));
}
/* Only animated parts use fill-box; mirrored groups rely on the default view-box origin */
#boot .face .idle-pikachu,
#boot .face .ear,
#boot .face .idle-chikorita,
#boot .face .leaf,
#boot .face .idle-jigglypuff,
#boot .face .idle-oshawott,
#boot .face .cheek,
#boot .face .heart,
#boot .face .puff,
#boot .face .anger,
#boot .face .sob,
#boot .face .drop {
  transform-box: fill-box;
}
/* Each partner idles its own way */
#boot .face .idle-pikachu {
  transform-origin: 50% 100%;
  animation: boot-pk-bounce 0.9s ease-in-out infinite;
}
#boot .face .idle-pikachu .ear {
  transform-origin: 70% 100%;
  animation: boot-pk-ear 1.3s ease-in-out infinite;
}
#boot .face .idle-chikorita {
  transform-origin: 50% 100%;
  animation: boot-ck-sway 2s ease-in-out infinite;
}
#boot .face .idle-chikorita .leaf {
  transform-origin: 0% 100%;
  animation: boot-ck-leaf 1.4s ease-in-out infinite alternate;
}
#boot .face .idle-jigglypuff {
  transform-origin: 50% 50%;
  animation: boot-jp-float 2.6s ease-in-out infinite;
}
#boot .face .idle-oshawott {
  transform-origin: 50% 85%;
  animation: boot-os-tilt 1.6s ease-in-out infinite;
}
/* Mood loop (3s): the calm face for a moment, then the reaction holds most of the loop */
#boot .face .rest {
  animation: boot-rest-cycle 3s ease-in-out infinite;
}
#boot .face .react {
  opacity: 0;
  animation: boot-react-cycle 3s ease-in-out infinite;
}
#boot .face .zap {
  animation: boot-zap 0.18s steps(2) infinite;
}
#boot .face .zap.late {
  animation-delay: 0.09s;
}
#boot .face .cheek {
  transform-origin: 50% 50%;
  animation: boot-cheek-swell 3s ease-in-out infinite;
}
#boot .face .heart {
  animation: boot-heart-rise 3s ease-out infinite;
}
#boot .face .heart.h1 {
  animation-delay: 0.25s;
}
#boot .face .heart.h2 {
  animation-delay: 0.5s;
}
#boot .face .puff {
  transform-origin: 50% 60%;
  animation: boot-puff-up 3s ease-in-out infinite;
}
#boot .face .anger {
  transform-origin: 50% 50%;
  animation: boot-anger-pulse 0.45s ease-in-out infinite alternate;
}
#boot .face .sob {
  transform-origin: 50% 100%;
  animation: boot-sob 3s linear infinite;
}
#boot .face .tear {
  stroke-dasharray: 5 6;
  animation: boot-tear-flow 0.4s linear infinite;
}
#boot .face .drop {
  animation: boot-drop-fall 0.8s ease-in infinite;
}
/* Pokes: squish, straight into the reaction, plus a burst. The second is bigger and shakes the
   card; the third is the partner's showpiece. */
#boot .face .burst,
#boot .face .show {
  opacity: 0;
  pointer-events: none;
}
#boot .face.poked {
  animation: boot-poke-squish 0.45s ease-out;
}
#boot .face.poked .rest {
  animation: none;
  opacity: 0;
}
#boot .face.poked .react {
  animation: none;
  opacity: 1;
}
#boot .face.poked .burst {
  transform-box: view-box;
  transform-origin: 60px 66px;
  animation: boot-burst-pop 1s ease-out;
}
#boot .face.poked-2 {
  animation: boot-poke-squish-2 0.5s ease-out;
}
#boot .face.poked-2 .burst {
  animation: boot-burst-pop-2 1s ease-out;
}
#boot .face .show > * {
  transform-box: fill-box;
  transform-origin: center;
}
#boot .face.poked-3 .show {
  opacity: 1;
}
#boot .face.poked-3 .show > * {
  animation: boot-show-fly 1.3s ease-out forwards;
}
#boot .face.poked-3 .puff {
  animation: boot-mega-puff 1.3s ease-out;
}
#boot .face.poked-3 .sob {
  animation: none;
}
#boot.boot-shake .boot-card {
  animation: boot-card-shake 0.4s ease-out;
}
#boot.boot-flash::after {
  content: '';
  position: fixed;
  inset: 0;
  background: #fff;
  pointer-events: none;
  animation: boot-flash 0.6s ease-out forwards;
}
#boot #boot-title {
  font: 400 clamp(44px, 6vw, 72px) / 1.1 var(--pixel);
  letter-spacing: 0;
  margin: 0 0 14px;
  color: var(--world-ink);
}
/* Two lines are always reserved, so the bar does not jump when the line changes length */
#boot #boot-text {
  font: 500 clamp(16px, 1.4vw, 19px) / 1.5 var(--sans);
  color: var(--world-ink);
  min-height: 3em;
  display: grid;
  place-items: center;
  margin: 0 0 20px;
}
#boot .boot-track {
  height: 8px;
  width: 100%;
  background: var(--boot-track, #d2dcc0);
  margin: 0 0 12px;
  border-radius: 4px;
  overflow: hidden;
}
#boot .boot-track i {
  height: 100%;
  width: 0;
  background: var(--boot-fill, #526f45);
  border-radius: 4px;
  animation: none;
  transition: width 0.18s ease-out;
}
#boot .boot-track.full {
  transform-origin: center;
  animation: boot-bar-squash 0.3s ease-out;
}
/* The detail line is read aloud at milestones; it is shown only in the error state */
#boot #boot-detail {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#boot.boot-error #boot-detail {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  white-space: normal;
  font: 15px/1.5 var(--sans);
  color: var(--world-ink);
  margin: 10px 0 0;
}
#boot .boot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
#boot .boot-actions:has(#boot-retry[hidden]) {
  display: none;
}
#boot .boot-actions button {
  min-height: 44px;
  background: transparent;
  color: var(--world-ink);
  font: 14px var(--sans);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 8px 0;
}
#boot #boot-retry {
  background: var(--world-ink);
  color: var(--world-paper);
  padding: 10px 16px;
  border-radius: 4px;
  text-decoration: none;
}
#boot .boot-tip {
  font: 16px/1.6 var(--sans);
  color: var(--world-ink);
  margin: 22px 0 0;
  max-width: none;
  white-space: nowrap;
}
/* The exit lives inside the card, under the tip: one composed object, and in thumb reach on a phone */
#boot #boot-cancel {
  display: inline-block;
  margin-top: 18px;
  min-height: 44px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  color: var(--world-ink);
  font: 500 15px var(--sans);
  cursor: pointer;
}
#boot #boot-cancel:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Ready beat: the bar snaps full, the face reacts once more, then the screen fades out */
#boot.boot-ready .boot-track i {
  transition: width 0.15s ease-out;
}
#boot.boot-leaving {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
/* Hold still on error */
#boot.boot-error .face *,
#boot.boot-error .face {
  animation: none !important;
}
#boot.boot-error .face .react {
  opacity: 0;
}
#boot.boot-error .face .rest {
  opacity: 1;
}
#world :focus-visible,
.world-panel :focus-visible,
#boot :focus-visible {
  outline: 2px solid #304638;
  outline-offset: 3px;
}
@keyframes boot-pk-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-6px) scale(0.98, 1.03);
  }
  70% {
    transform: translateY(0) scale(1.03, 0.97);
  }
}
@keyframes boot-pk-ear {
  0%,
  60%,
  100% {
    transform: rotate(0);
  }
  70% {
    transform: rotate(-9deg);
  }
  85% {
    transform: rotate(5deg);
  }
}
@keyframes boot-ck-sway {
  0%,
  100% {
    transform: rotate(-4deg) translateX(-2px);
  }
  50% {
    transform: rotate(4deg) translateX(2px);
  }
}
@keyframes boot-ck-leaf {
  from {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(10deg);
  }
}
@keyframes boot-jp-float {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-8px) rotate(3deg);
  }
}
@keyframes boot-os-tilt {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
@keyframes boot-rest-cycle {
  0%,
  8% {
    opacity: 1;
  }
  12%,
  84% {
    opacity: 0;
  }
  88%,
  100% {
    opacity: 1;
  }
}
@keyframes boot-react-cycle {
  0%,
  8% {
    opacity: 0;
  }
  12%,
  84% {
    opacity: 1;
  }
  88%,
  100% {
    opacity: 0;
  }
}
@keyframes boot-zap {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}
@keyframes boot-cheek-swell {
  0%,
  8%,
  88%,
  100% {
    transform: scale(1);
  }
  14%,
  82% {
    transform: scale(1.18);
  }
}
@keyframes boot-heart-rise {
  0%,
  12% {
    transform: translateY(6px) scale(0.6);
    opacity: 0;
  }
  22% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  78% {
    transform: translateY(-12px) scale(1);
    opacity: 1;
  }
  86%,
  100% {
    transform: translateY(-16px) scale(1);
    opacity: 0;
  }
}
@keyframes boot-puff-up {
  0%,
  8%,
  88%,
  100% {
    transform: scale(1);
  }
  16%,
  82% {
    transform: scale(1.09, 1.04);
  }
}
@keyframes boot-anger-pulse {
  from {
    transform: scale(0.85);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes boot-sob {
  0%,
  10%,
  86%,
  100% {
    transform: translateY(0);
  }
  14%,
  24%,
  34%,
  44%,
  54%,
  64%,
  74% {
    transform: translateY(-2px);
  }
  19%,
  29%,
  39%,
  49%,
  59%,
  69%,
  79% {
    transform: translateY(1px);
  }
}
@keyframes boot-tear-flow {
  to {
    stroke-dashoffset: -11;
  }
}
@keyframes boot-drop-fall {
  0% {
    transform: translateY(-4px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}
@keyframes boot-poke-squish {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.14, 0.86);
  }
  60% {
    transform: scale(0.94, 1.08);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes boot-burst-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  25% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes boot-wobble {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-5deg) scale(1.04);
  }
  75% {
    transform: rotate(5deg) scale(1.04);
  }
}
@keyframes boot-hint-ring {
  0% {
    opacity: 0.7;
    transform: scale(0.8);
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}
@keyframes boot-poke-squish-2 {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3, 0.72);
  }
  60% {
    transform: scale(0.9, 1.16);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes boot-burst-pop-2 {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  25% {
    opacity: 1;
    transform: scale(1.5);
  }
  70% {
    opacity: 1;
    transform: scale(1.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}
@keyframes boot-show-fly {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, -40px)) scale(1.2);
  }
}
@keyframes boot-mega-puff {
  0%,
  100% {
    transform: scale(1);
  }
  30%,
  70% {
    transform: scale(1.35, 1.25);
  }
}
@keyframes boot-card-shake {
  0%,
  100% {
    transform: translate(0);
  }
  20% {
    transform: translate(-6px, 2px);
  }
  40% {
    transform: translate(6px, -2px);
  }
  60% {
    transform: translate(-4px, 1px);
  }
  80% {
    transform: translate(4px, -1px);
  }
}
@keyframes boot-flash {
  0% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@keyframes boot-bar-squash {
  0% {
    transform: scaleY(1);
  }
  40% {
    transform: scaleY(1.8);
  }
  100% {
    transform: scaleY(1);
  }
}
@media (max-width: 600px) {
  #world .world-brand strong {
    font-size: 23px;
  }
  #world .world-brand {
    padding: 7px 9px;
  }
  #world .world-actions > button,
  #world .world-menu > summary {
    font-size: 13px;
    padding: 10px;
  }
  #world .world-actions #partner-button b {
    font-size: 13px;
  }
  #world .location-pill {
    font-size: 11px;
    top: 119px;
    padding: 6px 9px;
  }
  #world .location-pill .location-time {
    font-size: 11px;
  }
  #panel.world-panel:not(.battle-panel) #panel-content {
    padding: 20px;
  }
  #panel.world-panel:not(.battle-panel) #panel-title {
    font-size: 32px !important;
  }
  #panel.world-panel:not(.battle-panel) .panel-top {
    padding-left: 20px;
  }
  #panel.world-panel .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #panel.world-panel .partner-grid img {
    height: 84px;
  }
  #panel.world-panel .partner-grid strong {
    font-size: 24px;
  }
  #panel.world-panel .gym-team-grid strong {
    font: 23px var(--pixel);
  }
  #panel.world-panel .gym-start-row {
    flex-wrap: wrap;
  }
  #panel.world-panel .gym-start-row button {
    width: 100%;
  }
  #panel.world-panel .place-list {
    grid-template-columns: 1fr;
  }
  #world .dialogue-box {
    padding: 16px;
  }
  #world #dialogue-text {
    font-size: 14px;
    line-height: 1.6;
  }
  #boot .boot-tip {
    white-space: normal;
    text-wrap: balance;
  }
}
@media (max-height: 520px) and (max-width: 1000px) {
  #boot {
    --face-size: 110px;
  }
  #boot .boot-scene {
    margin-bottom: 8px;
  }
  #boot .boot-tip {
    display: none;
  }
  #boot #boot-title {
    font-size: 32px;
  }
  #world .location-pill {
    top: 70px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #boot .face *,
  #boot .face,
  #boot .boot-card,
  #boot::after,
  #boot #boot-face,
  #boot #boot-face::after,
  #boot .boot-track {
    animation: none !important;
  }
  #boot .face .react {
    opacity: 0;
  }
  #boot .face .rest {
    opacity: 1;
  }
  #boot .boot-track i {
    transition: none;
  }
}
html[data-motion='reduced'] #boot .face *,
html[data-motion='reduced'] #boot .face,
html[data-motion='reduced'] #boot .boot-card,
html[data-motion='reduced'] #boot::after,
html[data-motion='reduced'] #boot #boot-face,
html[data-motion='reduced'] #boot #boot-face::after,
html[data-motion='reduced'] #boot .boot-track {
  animation: none !important;
}
html[data-motion='reduced'] #boot .face .react {
  opacity: 0;
}
html[data-motion='reduced'] #boot .face .rest {
  opacity: 1;
}

/* ===== Welcome: secondary game entry ===== */
#ide .welcome-bonus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  min-height: 44px;
  background: transparent;
  border: 1px dashed #3a3f3c;
  border-radius: var(--taste-radius);
  color: var(--taste-secondary);
  font: 13px/1.5 var(--sans);
  text-align: left;
  cursor: pointer;
}
#ide .welcome-bonus:hover {
  border-color: var(--taste-accent);
  color: var(--taste-ink);
}
#ide .welcome-bonus code {
  margin-left: auto;
  font: 12px var(--mono);
  color: var(--taste-faint);
}
#ide .welcome-bonus-tag {
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 6px;
  border-radius: 3px;
  background: #2a2f2a;
  color: var(--taste-accent);
}
#ide .command-help code {
  font: 12px var(--mono);
  color: var(--taste-ink);
}
@media (max-width: 600px) {
  #ide .welcome-bonus code {
    margin-left: 0;
  }
}

/* ===== Phone game HUD: one compact row, smaller map ===== */
@media (max-width: 600px) {
  #world .world-hud .world-brand {
    display: none;
  }
  #world .location-pill.location-pill {
    top: 68px;
    left: 12px;
    font-size: 13px;
    padding: 5px 8px;
  }
  #world #mini-map.mini-map {
    top: 68px;
    right: 12px;
    width: 84px;
    padding: 3px;
  }
  #world #mini-map.mini-map > span {
    display: none;
  }
}
/* Headings focused by script are not controls; keep keyboard focus on links and buttons. */
#ide .editor-document h1:focus {
  outline: none;
}

/* ===== Touch controls are for phones only; computers and tablets keep keyboard hints and click-to-walk ===== */
@media not (pointer: coarse) {
  #world .mobile-controls,
  #world #touch-mode {
    display: none;
  }
}
@media (pointer: coarse) and (min-width: 601px) and (min-height: 501px) {
  #world .mobile-controls,
  #world #touch-mode {
    display: none;
  }
}

/* Work experience: one reading column, shared with the Field Lab journal. */
#ide .experience-entry,
.world-panel .experience-entry {
  max-width: 72ch;
}
#ide .experience-entry h2 {
  margin: 0 0 8px;
  font-size: 24px;
}
#ide .experience-role,
.world-panel .experience-role {
  margin: 0;
  font-weight: 600;
  color: var(--taste-ink);
}
#ide .experience-dates,
.world-panel .experience-dates {
  margin: 8px 0 24px;
  font-size: 13px;
}
.experience-contributions {
  margin: 0;
  padding-left: 21px;
  line-height: 1.8;
}
.experience-contributions li {
  padding-left: 5px;
  margin-bottom: 20px;
}
#ide .experience-contributions strong {
  font-weight: 600;
  color: var(--taste-ink);
}
#panel.world-panel .experience-entry h2 {
  font: 28px/1.2 var(--pixel);
  margin: 24px 0 10px;
  color: var(--world-ink);
}
#panel.world-panel .experience-contributions {
  font: 15px/1.7 var(--sans);
  color: var(--world-muted);
}
#panel.world-panel .experience-contributions strong {
  color: var(--world-ink);
  font-weight: 600;
}

.project-selection > button:only-child {
  grid-column: 1/-1;
}

/* ===== Editor: critique pass =====
   One place for the editor's final look. The frame separates its panels by tone instead of lines,
   the interface reads in the text face (monospace stays for real code and the terminal), and the
   visible type scale is five steps: 13 meta, 16 body, 20 lead, 40 title, display. */
:root {
  --edit-frame: #141517;
  --edit-panel: #17181a;
  --edit-page: #1f2023;
  --edit-raised: #25272a;
  --edit-ink: #e8e9e6;
  --edit-soft: #b9bdb7;
  --edit-quiet: #9fa49d;
  --edit-accent: #b9d6a0;
  --edit-display: clamp(44px, min(5vw, 9vh), 76px);
}
#ide {
  background: var(--edit-page);
}
#ide .icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ide .editor-play .icon {
  fill: currentColor;
  stroke: none;
}
#ide ::selection {
  background: #3d4a33;
  color: var(--edit-ink);
}
#ide :focus-visible {
  outline: 2px solid var(--edit-accent);
  outline-offset: 2px;
}

/* Frame: tone steps, no divider lines, text face at 13px. */
#ide .titlebar,
#ide .activity,
#ide .explorer,
#ide .tabbar,
#ide .editor-tab-wrap,
#ide .terminal,
#ide .statusbar,
#ide .breadcrumb {
  border: 0;
  box-shadow: none;
}
#ide .titlebar,
#ide .statusbar {
  background: var(--edit-frame);
  font: 13px var(--sans);
  color: var(--edit-soft);
}
#ide .traffic,
#ide .explorer-title > span {
  display: none;
}
#ide .activity,
#ide .explorer,
#ide .tabbar,
#ide .editor-tab-wrap,
#ide .terminal {
  background: var(--edit-panel);
}
#ide .activity button {
  color: var(--edit-quiet);
}
#ide .activity .active,
#ide .activity button:hover {
  color: var(--edit-ink);
}
#ide .activity .active::before,
#ide .file.selected::before {
  width: 2px;
  background: var(--edit-accent);
}
#ide .explorer-title,
#ide .folder-title,
#ide .file,
#ide .editor-tab-wrap .tab,
#ide .breadcrumb {
  font: 13px var(--sans);
  letter-spacing: 0;
}
#ide .explorer-title {
  color: var(--edit-soft);
}
#ide .folder-title,
#ide .file.selected,
#ide .file:hover,
#ide .editor-tab-wrap .tab.active {
  color: var(--edit-ink);
}
#ide .file,
#ide .editor-tab-wrap .tab {
  color: var(--edit-soft);
}
#ide .file.selected {
  background: var(--edit-raised);
}
#ide .file-icon,
#ide .editor-tab-wrap .tab > span {
  font: 600 11px var(--mono);
}
#ide .editor-tab-wrap.is-active {
  background: var(--edit-page);
}
#ide .tab.active::before {
  height: 2px;
  background: var(--edit-accent);
}
#ide .close-file {
  display: grid;
  place-items: center;
  width: 32px;
  color: var(--edit-quiet);
}
#ide .close-file .icon {
  width: 14px;
  height: 14px;
}
#ide .editor-help-button,
#ide .editor-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  font: 13px var(--sans);
  color: var(--edit-soft);
  cursor: pointer;
}
#ide .editor-play {
  color: var(--edit-accent);
  margin-right: 8px;
}
#ide .editor-help-button:hover,
#ide .editor-play:hover {
  color: var(--edit-ink);
  background: var(--edit-raised);
}
#ide .editor-play .icon {
  width: 14px;
  height: 14px;
}
#ide .mobile-files-toggle {
  display: none;
}
#ide .breadcrumb {
  background: var(--edit-page);
  color: var(--edit-quiet);
  padding: 0 48px;
}
#ide .breadcrumb #crumb-file,
#ide .crumb-current {
  color: var(--edit-soft);
}
#ide .statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  padding: 0 20px;
}

/* Welcome: the person leads, recent work answers on the right, the game is one quiet invitation. */
#ide .editor-content:not(.reading-file) {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  align-items: center;
  gap: 64px;
  padding: 40px 56px 48px;
}
#ide .welcome-copy {
  display: block;
  align-self: center;
}
#ide .welcome-inner {
  max-width: 620px;
}
#ide .welcome-inner h1 {
  font: 500 var(--edit-display) / 0.98 var(--sans);
  letter-spacing: -0.035em;
  color: var(--edit-ink);
  margin: 0 0 28px;
}
#ide .cursor {
  width: 0.06em;
  height: 0.78em;
  margin-left: 0.08em;
  vertical-align: -0.04em;
  background: var(--edit-accent);
}
@media (prefers-reduced-motion: reduce) {
  #ide .cursor {
    animation: none;
  }
}
html[data-motion='reduced'] #ide .cursor {
  animation: none;
}
#ide .welcome-role {
  font: 500 20px/1.4 var(--sans);
  color: var(--edit-ink);
  margin: 0 0 12px;
}
#ide .welcome-description {
  font: 16px/1.65 var(--sans);
  color: var(--edit-soft);
  max-width: 46ch;
  margin: 0 0 32px;
}
#ide .command-list {
  display: grid;
  gap: 2px;
  max-width: 520px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
}
#ide .command-line {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  min-height: 0;
  padding: 16px 20px;
  border: 0;
  background: var(--edit-panel);
  text-align: left;
  cursor: pointer;
}
#ide .command-line + .command-line {
  border: 0;
}
#ide .command-line:hover {
  background: var(--edit-raised);
}
#ide .command-primary {
  background: #283124;
}
#ide .command-primary:hover {
  background: #313c2c;
}
#ide .command-line code {
  grid-row: 1;
  font: 16px var(--mono);
  color: var(--edit-ink);
}
#ide .command-description {
  grid-row: 2;
  font: 500 16px/1.4 var(--sans);
  color: var(--edit-soft);
}
#ide .command-primary .command-description {
  color: var(--edit-ink);
}
#ide .command-line > .icon {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--edit-soft);
}
#ide .welcome-game {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin-top: 20px;
  padding: 8px 16px 8px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font: 16px/1.45 var(--sans);
  color: var(--edit-soft);
  cursor: pointer;
}
#ide .welcome-game:hover {
  background: var(--edit-panel);
}
#ide .welcome-game strong {
  font-weight: 500;
  color: var(--edit-ink);
}
#ide .welcome-game-shot {
  display: block;
  width: 96px;
  height: 64px;
  overflow: hidden;
  border-radius: 4px;
  background: #79bf65;
}
#ide .welcome-game-shot canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
#ide .welcome-game code {
  font: 13px var(--mono);
  color: var(--edit-quiet);
}
#ide .welcome-work {
  align-self: center;
  max-width: 440px;
  padding: 28px;
  border-radius: 8px;
  background: var(--edit-panel);
}
#ide .reading-file .welcome-work,
#ide .reading-file .welcome-copy {
  display: none;
}
#ide .welcome-work h2 {
  font: 500 20px/1.3 var(--sans);
  color: var(--edit-ink);
  margin: 0 0 20px;
}
#ide .welcome-work ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
#ide .welcome-work li {
  font: 16px/1.55 var(--sans);
  color: var(--edit-soft);
}
#ide .welcome-work strong {
  font-weight: 500;
  color: var(--edit-ink);
}
#ide .welcome-work-link,
#ide .document-next button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  font: 500 16px var(--sans);
  color: var(--edit-accent);
  cursor: pointer;
}
#ide .welcome-work-link:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Terminal: one compact band, echoed commands, readable at 13px. */
#ide .terminal-tabs {
  height: 40px;
  padding: 0 28px;
}
#ide #terminal-toggle {
  font: 500 13px var(--sans);
  color: var(--edit-ink);
  gap: 6px;
}
#ide .terminal-chevron {
  display: inline-grid;
  transform: none;
}
#ide .terminal-chevron .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}
#ide .terminal.is-collapsed .terminal-chevron .icon {
  transform: rotate(180deg);
}
#ide .terminal-right {
  font: 13px var(--sans);
  color: var(--edit-quiet);
}
#ide .terminal-body {
  max-height: 168px;
  overflow: auto;
  padding: 4px 28px 12px;
  font: 13px/1.7 var(--mono);
}
#ide .terminal-greeting,
#ide .terminal-gray {
  color: var(--edit-quiet);
}
#ide .terminal-blue {
  color: #c4d2dc;
}
#ide .terminal-green {
  color: var(--edit-accent);
}
#ide .terminal-entry {
  margin-top: 8px;
}
#ide .terminal-echo {
  color: var(--edit-ink);
}
#ide .terminal-result {
  color: var(--edit-soft);
  white-space: pre-wrap;
}
#ide .terminal-link {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: #c4d2dc;
  text-decoration: underline;
  text-decoration-color: #5d6a73;
  text-underline-offset: 3px;
  cursor: pointer;
}
#ide .terminal-link:hover {
  color: var(--edit-ink);
}
#ide .terminal-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
#ide .terminal-prompt label {
  font: 13px var(--mono);
  white-space: nowrap;
}
#ide .terminal-prompt input {
  flex: 1;
  min-width: 0;
  font: 13px var(--mono);
  color: var(--edit-ink);
  caret-color: var(--edit-accent);
}
#ide .terminal-prompt button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--edit-soft);
}

/* Documents: one reading column, 16px body, a 40px title, and a next step at the end. */
#ide .editor-document {
  max-width: 720px;
}
#ide .editor-document h1 {
  font: 500 40px/1.1 var(--sans);
  letter-spacing: -0.025em;
  color: var(--edit-ink);
  margin: 0 0 16px;
}
#ide .editor-document h1:focus {
  outline: none;
}
#ide .document-intro {
  font: 20px/1.5 var(--sans);
  color: var(--edit-soft);
  margin: 0 0 40px;
}
#ide .editor-document h2 {
  font: 500 20px/1.35 var(--sans);
  color: var(--edit-ink);
}
#ide .editor-document h3 {
  font: 600 16px/1.4 var(--sans);
  color: var(--edit-ink);
}
#ide .editor-document p,
#ide .editor-document li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--edit-soft);
  max-width: 34rem;
}
#ide .editor-document strong {
  color: var(--edit-ink);
  font-weight: 600;
}
#ide .document-next {
  margin-top: 56px;
  padding: 0;
  border: 0;
}
#ide .document-next button {
  margin: 0;
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--edit-panel);
  color: var(--edit-ink);
}
#ide .document-next button:hover {
  background: var(--edit-raised);
}
#ide .document-next button span {
  font: 13px var(--sans);
  color: var(--edit-quiet);
}
#ide .document-next .icon {
  color: var(--edit-accent);
}

/* Editor dialogs (Help, Find a file) share the editor's dark panels. */
#panel.editor-panel .panel-input {
  width: 100%;
  margin: 16px 0 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--edit-raised);
  font: 16px var(--sans);
  color: var(--edit-ink);
}
#panel.editor-panel #file-search-results button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: 16px var(--sans);
  color: var(--edit-ink);
  text-align: left;
}
#panel.editor-panel #file-search-results button:hover,
#panel.editor-panel #file-search-results button:focus-visible {
  background: var(--edit-raised);
}
#panel.editor-panel #file-search-results .icon {
  margin-left: auto;
  color: var(--edit-quiet);
}
#panel.editor-panel .search-file-icon {
  width: 28px;
  font: 600 11px var(--mono);
  color: var(--edit-quiet);
}
#panel .icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tablet and phone: the explorer becomes a drawer opened from the tab bar. */
@media (max-width: 900px) {
  #ide .mobile-files-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 42px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    font: 500 13px var(--sans);
    color: var(--edit-ink);
  }
  #ide .editor-content:not(.reading-file) {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 32px 32px 40px;
    align-items: start;
  }
  #ide .welcome-work {
    max-width: 620px;
  }
}
@media (max-width: 600px) {
  #ide .titlebar,
  #ide .statusbar,
  #ide .breadcrumb {
    display: none;
  }
  #ide .editor-play span,
  #ide .mobile-files-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #ide .editor-play,
  #ide .editor-help-button,
  #ide .mobile-files-toggle {
    padding: 0 14px;
    margin: 0;
  }
  #ide .editor-content:not(.reading-file) {
    padding: 28px 22px 32px;
    gap: 32px;
  }
  #ide .welcome-inner h1 {
    font-size: clamp(40px, 11vw, 48px);
    margin-bottom: 20px;
  }
  #ide .welcome-role {
    font-size: 18px;
  }
  #ide .welcome-description {
    margin-bottom: 24px;
  }
  #ide .welcome-game {
    grid-template-columns: 72px 1fr;
    padding: 8px;
  }
  #ide .welcome-game-shot {
    width: 72px;
    height: 56px;
  }
  #ide .welcome-game code {
    display: none;
  }
  #ide .welcome-work {
    padding: 24px 20px;
  }
  #ide .terminal-tabs {
    padding: 0 20px;
  }
  #ide .editor-document h1 {
    font-size: 32px;
  }
  #ide .document-intro {
    font-size: 18px;
  }
}

/* Short laptop screens: tighten the welcome so both columns stay on the first screen. */
@media (min-width: 901px) and (max-height: 780px) {
  #ide .editor-content:not(.reading-file) {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  #ide .welcome-inner h1 {
    margin-bottom: 20px;
  }
  #ide .welcome-description {
    margin-bottom: 24px;
  }
  #ide .welcome-work {
    padding: 24px;
  }
  #ide .welcome-work ul {
    gap: 12px;
  }
  #ide .welcome-work li {
    line-height: 1.5;
  }
  #ide .welcome-work-link {
    margin-top: 16px;
  }
}

/* ===== Documents: each file looks like its type =====
   Markdown headings carry their # markers, skills.json renders as JSON, and the wide files
   (projects, experience) use the full reading width while running text keeps a ~72-character measure. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#ide .reading-file .file-preview {
  padding: 48px 56px 64px;
}
#ide .editor-document {
  max-width: 960px;
  margin: 0 auto;
}
#ide .editor-document header {
  margin-bottom: 0;
}
#ide .editor-document[data-kind='md'] h1::before,
#ide .editor-document[data-kind='md'] h2::before {
  content: '# ' / '';
  font: 400 0.62em var(--mono);
  vertical-align: 0.18em;
  color: var(--edit-quiet);
}
#ide .editor-document[data-kind='md'] h2::before {
  content: '## ' / '';
  vertical-align: 0.05em;
}

/* about.md: four short notes, two by two. */
#ide .editor-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
  margin: 0 0 40px;
}
#ide .editor-columns h2 {
  margin: 0 0 8px;
}
#ide .editor-columns p {
  margin: 0;
}

/* skills.json: the real thing, syntax-coloured. */
#ide .json-view {
  margin: 8px 0 0;
  padding: 28px 32px;
  border-radius: 8px;
  background: var(--edit-panel);
  font: 16px/1.9 var(--mono);
  white-space: pre-wrap;
  overflow-x: auto;
}
#ide .json-line {
  display: block;
  padding-left: 4ch;
  text-indent: -2ch;
}
#ide .json-punct {
  color: var(--edit-quiet);
}
#ide .json-key {
  color: #c4d2dc;
}
#ide .json-string {
  color: #c9dcae;
}

/* experience.md: who and when on the left, what was built on the right. */
#ide .experience-entry {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
  max-width: none;
  margin-top: 8px;
}
#ide .experience-entry > h2,
#ide .experience-role,
#ide .experience-dates {
  grid-column: 1;
  margin: 0;
}
#ide .experience-entry > h2 {
  font-size: 20px;
}
#ide .experience-role {
  margin-top: 8px;
  font: 500 16px/1.5 var(--sans);
  color: var(--edit-ink);
}
#ide .experience-dates {
  margin-top: 4px;
  font: 16px/1.5 var(--sans);
  color: var(--edit-quiet);
}
#ide .experience-contributions {
  grid-column: 2;
  grid-row: 1 / span 4;
  margin: 0;
  padding-left: 20px;
}
#ide .experience-contributions li {
  margin: 0 0 20px;
  padding-left: 4px;
}
#ide .experience-contributions li::marker {
  color: var(--edit-quiet);
}

/* projects.ts: one case in depth with real screenshots, then production work. */
#ide .project-case {
  margin-top: 8px;
}
#ide .project-case + .project-case {
  margin-top: 96px;
}
#ide .project-head h2 {
  font: 500 28px/1.2 var(--sans);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
#ide .project-summary {
  margin: 0;
}
#ide .project-meta {
  margin: 12px 0 0;
  font: 13px/1.5 var(--sans);
  color: var(--edit-quiet);
}
#ide .project-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 12px 18px;
  border: 0;
  border-radius: 6px;
  background: var(--edit-accent);
  font: 500 16px var(--sans);
  color: #172012;
  cursor: pointer;
}
#ide .project-primary:hover {
  background: #cbe5b4;
}
#ide .project-primary .icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}
#ide .project-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 40px 0 0;
}
#ide .project-gallery figure {
  margin: 0;
}
#ide .project-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--edit-panel);
  image-rendering: pixelated;
}
#ide .project-gallery figcaption {
  margin-top: 10px;
  font: 13px/1.5 var(--sans);
  color: var(--edit-quiet);
}
#ide .project-notes {
  margin-top: 56px;
}
#ide .project-notes h3 {
  font: 500 20px/1.35 var(--sans);
  margin: 0 0 24px;
}
#ide .project-notes .case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 56px;
}
#ide .project-notes h4 {
  margin: 0 0 6px;
  font: 600 16px/1.4 var(--sans);
  color: var(--edit-ink);
}
#ide .project-notes p {
  margin: 0;
}
#ide .project-points {
  margin: 28px 0 0;
  padding-left: 20px;
}
#ide .project-points li {
  margin-bottom: 14px;
  padding-left: 4px;
}
#ide .project-points li::marker {
  color: var(--edit-quiet);
}
#ide .project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  font: 500 16px var(--sans);
  color: var(--edit-accent);
  cursor: pointer;
}
#ide .project-link:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 900px) {
  #ide .reading-file .file-preview {
    padding: 36px 32px 48px;
  }
  #ide .experience-entry {
    grid-template-columns: 1fr;
  }
  #ide .experience-contributions {
    grid-column: 1;
    grid-row: auto;
    margin-top: 28px;
  }
}
@media (max-width: 600px) {
  #ide .reading-file .file-preview {
    padding: 28px 20px 40px;
  }
  #ide .editor-columns,
  #ide .project-gallery,
  #ide .project-notes .case-grid {
    grid-template-columns: 1fr;
  }
  #ide .json-view {
    padding: 20px;
    font-size: 13px;
  }
  #ide .project-head h2 {
    font-size: 24px;
  }
}
#ide .json-brace {
  display: block;
}

/* PokeWorld HUD: one icon set, a readable Partner label, and the way back first. */
#world .icon,
#panel.world-panel .icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#world .world-actions > button,
#world .world-menu-content > button,
#world #map-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#world #partner-button i {
  display: inline-grid;
}
#world #partner-button > span {
  opacity: 1;
  color: #55614f;
}
#world .world-menu > summary .icon {
  width: 14px;
  height: 14px;
}

/* ===== Motion: one arrival, then quiet feedback =====
   The welcome assembles once, top to bottom, inside 0.9s; a newly opened file settles in the same way,
   faster. Everything is already laid out (only opacity and a short rise move), and reduced motion skips it. */
@keyframes edit-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
#ide .welcome-inner > *,
#ide .welcome-work {
  animation: edit-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#ide .welcome-inner > :nth-child(2) {
  animation-delay: 0.08s;
}
#ide .welcome-inner > :nth-child(3) {
  animation-delay: 0.14s;
}
#ide .welcome-inner > :nth-child(4) {
  animation-delay: 0.2s;
}
#ide .welcome-inner > :nth-child(5),
#ide .welcome-work {
  animation-delay: 0.26s;
}
#ide .editor-document > * {
  animation: edit-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#ide .editor-document > :nth-child(2) {
  animation-delay: 0.05s;
}
#ide .editor-document > :nth-child(n + 3) {
  animation-delay: 0.1s;
}
#ide .command-line,
#ide .welcome-game,
#ide .document-next button,
#ide .project-primary,
#ide .file,
#ide .editor-tab-wrap .tab {
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out;
}
#ide .command-line > .icon,
#ide .welcome-work-link .icon,
#ide .document-next .icon,
#ide .project-link .icon {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#ide .command-line:hover > .icon,
#ide .welcome-work-link:hover .icon,
#ide .document-next button:hover .icon,
#ide .project-link:hover .icon {
  transform: translate(2px, -2px);
}
#ide .welcome-description {
  font-size: 18px;
  line-height: 1.6;
}
#ide .file-icon,
#ide .editor-tab-wrap .tab > span,
#panel.editor-panel .search-file-icon {
  font-family: var(--sans);
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  #ide .welcome-inner > *,
  #ide .welcome-work,
  #ide .editor-document > * {
    animation: none;
  }
  #ide .command-line > .icon,
  #ide .welcome-work-link .icon,
  #ide .document-next .icon,
  #ide .project-link .icon {
    transition: none;
  }
}
html[data-motion='reduced'] #ide .welcome-inner > *,
html[data-motion='reduced'] #ide .welcome-work,
html[data-motion='reduced'] #ide .editor-document > * {
  animation: none;
}

#ide .terminal-body samp,
#ide .terminal-body kbd {
  font: inherit;
}
#ide .terminal-echo,
#ide .terminal-result {
  display: block;
}

/* Nothing meant to be read sits under 13px; phones show only the open tab. */
#ide .file-icon,
#ide .editor-tab-wrap .tab > span {
  font-size: 13px;
}
#ide .document-next strong {
  font: 500 16px var(--sans);
  color: var(--edit-ink);
}
#ide .editor-contact-link span,
#ide .editor-placeholder > span {
  font-size: 13px;
  letter-spacing: 0;
}
@media (max-width: 600px) {
  #ide .editor-tab-wrap:not(.is-active) {
    display: none;
  }
}
#world .menu-label,
#world .mini-map > span,
#world .location-pill,
#world .location-pill span,
#world .world-note,
#world .world-note span,
#world .control-hint,
#world .control-hint kbd {
  font-size: 13px;
  letter-spacing: 0.02em;
}
#world .world-menu-content .menu-label,
#world .location-pill .location-time {
  font-size: 13px;
  letter-spacing: 0.02em;
}
#world .touch-control-label {
  font-size: 13px;
}

/* Terminal sizes to its content (up to a short scrollback) instead of a fixed height it can overflow. */
#ide .terminal,
#ide .terminal:not(.is-collapsed) {
  height: auto;
}
#ide .terminal.is-collapsed {
  height: 40px;
}
#ide .terminal-body {
  max-height: 184px;
}
#ide #terminal-output {
  font: 13px/1.7 var(--mono);
  color: var(--edit-soft);
}

/* Editor dialogs: header in the text face, no divider, and the browser's own search clear button themed away. */
#panel.editor-panel .panel-top {
  border: 0;
}
#panel.editor-panel #panel-eyebrow {
  font: 13px var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--edit-quiet);
}
#panel.editor-panel .panel-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* The sidebar reads as its own surface: darker than the page, darkest at the activity bar. */
#ide .activity {
  background: #0e0f11;
}
#ide .explorer {
  background: #131416;
}
#ide .file.selected {
  background: #22242a;
}

/* The game invitation never squeezes: thumbnail, then text with the command under it. */
#ide .welcome-game {
  grid-template-columns: 96px 1fr;
  row-gap: 4px;
}
#ide .welcome-game-shot {
  grid-row: 1 / span 2;
}
#ide .welcome-game code {
  grid-column: 2;
}
@media (max-width: 1199px) {
  #ide .editor-content:not(.reading-file) {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 40px;
  }
  #ide .welcome-work {
    max-width: 620px;
    align-self: start;
  }
}
@media (max-width: 600px) {
  #ide .welcome-game {
    grid-template-columns: 72px 1fr;
  }
}

/* ===== Round 2 ===== */

/* Welcome actions: the plain words lead, the code underneath is a quiet caption. */
#ide .command-line .command-description {
  grid-row: 1;
  font: 500 16px/1.4 var(--sans);
  color: var(--edit-ink);
}
#ide .command-line code {
  grid-row: 2;
  font: 13px var(--mono);
  color: var(--edit-quiet);
}
#ide .command-line .syntax-blue,
#ide .command-line .syntax-yellow {
  color: inherit;
}
#ide .welcome-work-link {
  min-height: 44px;
}

/* One left edge for every view: documents start where the welcome starts. */
#ide .editor-document {
  margin: 0;
  max-width: 1060px;
}
#ide .reading-file .file-preview {
  padding-left: 56px;
  padding-right: 56px;
}
@media (max-width: 900px) {
  #ide .reading-file .file-preview {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 600px) {
  #ide .reading-file .file-preview {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Projects: the first screenshot answers the intro on the right, the other three share a row. */
@media (min-width: 1200px) {
  #ide .project-case:has(.project-gallery) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 40px;
    align-items: start;
  }
  #ide .project-case:has(.project-gallery) > .project-head {
    grid-column: 1 / span 3;
  }
  #ide .project-gallery {
    display: contents;
  }
  #ide .project-gallery figure:first-child {
    grid-column: 4 / span 3;
    grid-row: 1;
  }
  #ide .project-gallery figure:not(:first-child) {
    grid-column: span 2;
    margin-top: 40px;
  }
  #ide .project-case:has(.project-gallery) > .project-notes {
    grid-column: 1 / -1;
  }
}
#ide .project-notes .case-grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Explorer header: a visible way into search. */
#ide .explorer-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 12px;
}
#ide .explorer-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: 13px var(--sans);
  color: var(--edit-quiet);
  cursor: pointer;
}
#ide .explorer-search:hover {
  background: var(--edit-raised);
  color: var(--edit-ink);
}
#ide .explorer-search kbd {
  font: 600 12px var(--sans);
}
#ide .folder-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
#ide .folder-title .icon {
  width: 14px;
  height: 14px;
}

/* Phones keep the words on the tab bar's two actions. */
@media (max-width: 600px) {
  #ide .editor-play span,
  #ide .mobile-files-toggle span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
  #ide .editor-play span {
    font-size: 0;
  }
  #ide .editor-play span::after {
    content: 'Play';
    font-size: 13px;
  }
  #ide .editor-play,
  #ide .editor-help-button,
  #ide .mobile-files-toggle {
    padding: 0 12px;
  }
}

/* Terminal: a faint completion after the caret, and room for a real scrollback. */
#ide .terminal-prompt {
  position: relative;
}
#ide .terminal-hint {
  position: absolute;
  left: calc(var(--prompt-width, 0px) + 10px + var(--typed, 0) * 1ch);
  pointer-events: none;
  font: 13px var(--mono);
  color: var(--edit-quiet);
  opacity: 0.7;
  white-space: pre;
}
#ide .terminal-body {
  max-height: 232px;
}

/* Search: file name with a snippet of the match. */
#panel.editor-panel .search-status {
  margin: 0 0 8px;
  font: 13px/1.5 var(--sans);
  color: var(--edit-quiet);
}
#panel.editor-panel .search-suggestion {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--edit-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#panel.editor-panel .search-file-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#panel.editor-panel .search-file-text small {
  font: 13px/1.5 var(--sans);
  color: var(--edit-quiet);
}
#panel.editor-panel .search-file-text mark {
  background: #3d4a33;
  color: var(--edit-ink);
  border-radius: 2px;
  padding: 0 2px;
}

/* skills.json on a phone: brackets and quotes wrap badly, so show the readable groups instead. */
@media (max-width: 600px) {
  #ide .json-view {
    display: none;
  }
  #ide .editor-skill-grid.visually-hidden {
    position: static !important;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: grid;
    gap: 20px;
  }
  #ide .editor-skill-grid h2 {
    margin: 0 0 4px;
  }
  #ide .editor-skill-grid p {
    margin: 0;
  }
}

/* PokeWorld More menu: icon and label together on the left, any current value on the right. */
#world .world-menu-content > button {
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
}
#world #touch-mode span,
#world #motion-button span,
#world #journal-button b {
  margin-left: auto;
}
#panel .panel-action ~ .panel-action,
#panel .panel-action + button {
  margin-top: 10px;
}

/* The variable DM Sans cuts its display sizes tighter, so the large type needs less negative tracking. */
#ide .welcome-inner h1 {
  letter-spacing: -0.015em;
}
#ide .editor-document h1,
#ide .project-head h2 {
  letter-spacing: -0.01em;
}
@media (max-width: 600px) {
  #ide .terminal-right {
    display: none;
  }
}

#ide,
#panel {
  font-optical-sizing: none;
}
@media (max-width: 600px) {
  #ide .editor-skill-grid section {
    border: 0;
    padding: 0;
  }
}

/* One phone margin for every view. */
@media (max-width: 900px) {
  #ide .editor-content.reading-file {
    padding: 0;
  }
}
@media (max-width: 600px) {
  #ide .reading-file .file-preview {
    padding-left: 22px;
    padding-right: 22px;
  }
}
@media (max-width: 1199px) {
  #ide .welcome-copy,
  #ide .welcome-work {
    justify-self: start;
    margin-left: 0;
  }
  #ide .welcome-inner {
    margin-left: 0;
  }
}

/* Laptop heights: the terminal opens compact on the welcome screen, about three lines tall. */
@media (max-height: 999px) {
  #ide .terminal-body {
    max-height: 104px;
  }
  #ide .terminal-tabs {
    height: 34px;
  }
}
/* Tab bar: tabs scroll, the actions never wrap. */
#ide #editor-tabs {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
#ide .editor-play,
#ide .editor-help-button,
#ide .mobile-files-toggle {
  white-space: nowrap;
  flex: none;
}

/* Search: the option Enter opens is visibly selected; keys are listed under the results. */
#panel.editor-panel #file-search-results [aria-selected="true"] {
  background: var(--edit-raised);
  box-shadow: inset 2px 0 0 var(--edit-accent);
}
#panel.editor-panel .search-keys {
  margin: 12px 0 0;
  font: 13px var(--sans);
  color: var(--edit-quiet);
}
#panel.editor-panel kbd,
#panel .help-keys kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-right: 2px;
  border-radius: 4px;
  background: var(--edit-raised);
  font: 600 12px var(--sans);
  color: var(--edit-ink);
  text-align: center;
}
#panel .help-keys {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 16px 0;
  font: 15px/1.5 var(--sans);
}
#panel .help-keys dt,
#panel .help-keys dd {
  margin: 0;
}

/* Small polish from the second critique. */
#ide .editor-document p,
#ide .editor-document li,
#ide .project-gallery figcaption,
#ide .welcome-work li,
#ide .welcome-description {
  text-wrap: pretty;
}
#ide .editor-document[data-kind='md'] h1::before,
#ide .editor-document[data-kind='md'] h2::before {
  opacity: 0.55;
}
#ide .project-link {
  min-height: 44px;
}
#ide .editor-document > * {
  animation-duration: 0.3s;
}
#ide .editor-document > :nth-child(n) {
  animation-delay: 0s;
}
@media (max-width: 900px) {
  #ide .activity {
    display: none;
  }
}
@media (pointer: coarse) {
  #ide .explorer-search kbd {
    display: none;
  }
}

/* ===== Round 4 ===== */
/* A terminal the visitor opened gets real room; the automatic strip stays short. */
#ide .terminal.is-chosen .terminal-body {
  max-height: min(40vh, 320px);
}
@media (max-width: 600px) {
  #ide .terminal.is-chosen .terminal-body {
    max-height: 50vh;
  }
}

/* The next-file button: an older footer rule zeroed its side padding. */
#ide .editor-document footer.document-next button {
  padding: 14px 20px;
}
/* On touch, the action label above A is part of the button, so tapping it acts instead of walking away. */
#world .interact #interact-label {
  pointer-events: auto;
}

/* One entry point per tool: Search lives in the Explorer header, Help in the tab bar.
   The activity-bar buttons stay in the page for the code that triggers them. */
#ide #search-button,
#ide #help-button {
  display: none;
}
/* The title bar only repeated the name; the space goes to content. */
#ide .titlebar {
  display: none;
}

/* Explorer rows: file name, a quiet plain-English name, and the number key on hover or focus. */
#ide .file {
  display: flex;
  align-items: center;
}
#ide .file-label {
  margin-left: 8px;
  font: 13px var(--sans);
  color: var(--edit-quiet);
  opacity: 0.8;
}
#ide .file-key {
  margin-left: auto;
  margin-right: 14px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--edit-raised);
  font: 600 12px var(--sans);
  color: var(--edit-soft);
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
#ide .file:hover .file-key,
#ide .file:focus-visible .file-key {
  opacity: 1;
}
@media (pointer: coarse) {
  #ide .file-key {
    display: none;
  }
}

/* Status bar: the shortcuts, quietly. */
#ide .statusbar kbd {
  padding: 0 5px;
  border-radius: 3px;
  background: var(--edit-raised);
  font: 600 12px var(--sans);
  color: var(--edit-soft);
}

/* Phones: the play button says it is a game. */
@media (max-width: 600px) {
  #ide .editor-play span::after {
    content: 'Game';
  }
}

/* Pending contact details read as a quiet note, not a panel with the weight of a real link. */
#ide .editor-placeholder {
  margin: 32px 0 0;
  padding: 0;
  background: transparent;
}
#ide .editor-placeholder > span {
  display: none;
}
#ide .editor-placeholder h2 {
  font: 500 16px/1.5 var(--sans);
  color: var(--edit-soft);
  margin: 0;
}
#ide .editor-placeholder p {
  margin: 4px 0 0;
  font: 16px/1.6 var(--sans);
  color: var(--edit-quiet);
}
/* The labels repeated the file names and pushed past the sidebar; the names say enough. */
#ide .file-label {
  display: none;
}

/* ===== Round 5 ===== */
/* Terminal: the body is the one scroller. The log had its own 42px scroller from the first design, which hid every answer after the first. */
#ide #terminal-output {
  max-height: none;
  overflow: visible;
}

/* Tab bar: tabs fade at the edge they scroll past, and a rule separates them from Help and Play. */
#ide #editor-tabs.fade-end {
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
#ide #editor-tabs.fade-start {
  mask-image: linear-gradient(to right, transparent, #000 40px);
}
#ide #editor-tabs.fade-start.fade-end {
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
#ide .tabbar .editor-help-button {
  border-left: 1px solid var(--border);
}

/* Search: the palette sits at a fixed height so the field never moves while you type, and the field comes first. */
#panel.editor-panel:has(#file-search) {
  margin-top: 12vh;
  margin-bottom: auto;
}
#panel.editor-panel:has(#file-search) {
  position: fixed;
}
#panel.editor-panel:has(#file-search) .panel-top {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 0;
  border: 0;
}
#panel.editor-panel:has(#file-search) #panel-eyebrow {
  display: none;
}
#panel.editor-panel:has(#file-search) #panel-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* contact.md: GitHub is the action, and the last file ends on the two strongest places instead of looping to the start. */
#ide .editor-contact-link em {
  font: 14px var(--sans);
  font-style: normal;
  color: var(--taste-faint);
}
#ide .editor-document footer.document-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
#ide .document-end p {
  flex-basis: 100%;
  margin: 0 0 4px;
  font: 16px/1.6 var(--sans);
  color: var(--edit-quiet);
}
#ide .editor-document footer.document-end {
  justify-content: flex-start;
}
#ide .editor-document footer.document-end p {
  flex: 0 0 100%;
}
#panel.editor-panel:has(#file-search) #panel-content {
  padding-top: 52px;
}
#ide .editor-document footer.document-end button {
  margin: 0;
}
#ide .editor-document footer.document-end p {
  max-width: none;
}
@media (max-width: 600px) {
  #ide .editor-contact-link em {
    display: none;
  }
}

/* ===== Round 6 ===== */
/* Welcome: a quiet way to reach me, under the two main actions. */
#ide .welcome-reach {
  margin: 20px 0 0;
  font: 15px/1.6 var(--sans);
  color: var(--edit-quiet);
}
#ide .welcome-reach a,
#ide .welcome-reach button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--edit-ink);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 4px;
  cursor: pointer;
}
#ide .welcome-reach a:hover,
#ide .welcome-reach button:hover {
  text-decoration-color: currentColor;
}

/* Phones: an open terminal takes at most 40% of the screen, and its links are full-size tap targets. */
@media (max-width: 600px) {
  #ide .terminal.is-chosen .terminal-body {
    max-height: 40vh;
  }
  #ide .terminal-link {
    display: inline-block;
    min-height: 44px;
    padding: 10px 2px;
    line-height: 24px;
  }
}

/* ===== Round 7 ===== */
/* The prompt stays in view: a long answer scrolls up behind it instead of pushing it off a phone screen. */
#ide .terminal-body > .terminal-prompt {
  position: sticky;
  bottom: -12px;
  z-index: 1;
  margin-top: 0;
  padding: 8px 0 12px;
  background: var(--edit-panel);
}
/* One style for "Play PokeWorld" inside documents: the quiet dark button from the contact.md ending,
   so the case study is read before the game pulls the eye away. */
#ide .project-primary {
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--edit-panel);
  color: var(--edit-ink);
}
#ide .project-primary:hover {
  background: var(--edit-raised);
}
#ide .project-primary .icon {
  fill: var(--edit-accent);
}

/* Game controls from the Codex pass: phones always get the joystick (the D-pad is gone), and the
   browser must never treat a joystick drag as a scroll. */
@media (any-pointer: coarse), (max-width: 600px), (max-width: 1000px) and (max-height: 500px) {
  #world .touch-joystick {
    display: flex;
  }
}
#world .touch-joystick,
#world #touch-stick {
  touch-action: none;
}
/* Links inside experience entries (Pond) read as text, marked by an underline, in the editor and the game. */
.experience-contributions a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Phones: inputs at 16px, so iOS Safari doesn't zoom the page when one is focused. */
@media (max-width: 600px) {
  #ide .terminal-prompt input,
  #ide .terminal-hint,
  #panel .panel-input {
    font-size: 16px;
  }
}

/* experience.md and the Field Lab: a rule between roles, so each employer's bullets read as their own block. */
#ide .experience-entry + .experience-entry {
  margin-top: 16px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
#panel.world-panel .experience-entry + .experience-entry {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #30463833;
}

/* ===== Colour: monochrome, with one warm colour reserved for the game ===== */
/* The accent tokens (cursor, links, active file and tab, focus, terminal prompt, search) become the
   ink itself; hierarchy comes from contrast, and the only colour left in the editor means "play". */
:root {
  --taste-accent: #e5e6e3;
  --edit-accent: #e8e9e6;
  --play: #f2b84b;
}
/* The primary action is the one light surface on the page. */
#ide .command-primary {
  background: #e9e7e2;
}
#ide .command-primary:hover {
  background: #ffffff;
}
#ide .command-primary .command-description,
#ide .command-primary > .icon {
  color: #17181a;
}
#ide .command-primary code {
  color: #55585c;
}
/* Play PokeWorld: the tab bar, projects.ts and the contact.md ending. */
#ide .editor-play,
#ide .editor-play .icon {
  color: var(--play);
}
#ide .project-primary .icon {
  fill: var(--play);
}
#ide .document-end [data-play-world] .icon {
  color: var(--play);
}
/* Search matches and selected text: a neutral highlight, not a green one. */
#panel.editor-panel .search-file-text mark,
#ide ::selection {
  background: #3a3c40;
  color: var(--edit-ink);
}