#monitor-layer { position: absolute; inset: 0; pointer-events: none; }
.pc-screen {
  position: absolute; left: var(--x); top: var(--y); width: var(--screen-width); height: var(--screen-height);
  clip-path: var(--screen-outline); background: linear-gradient(155deg,#25292c,#151719 62%);
}
.pc-screen.is-on {
  background: linear-gradient(145deg, #617f7a 0 36%, #b0c9b6 36% 40%, #87a99b 40% 100%);
}
.scene .seat-marker { margin-top: -16px; }
#stage-seated:not([hidden]) + #open-floor {
  margin-top: 7px; background: #e6e9de; color: #405248; border-color: #b3bcae; box-shadow: none;
}
#stage-seated:not([hidden]) + #open-floor:hover { background: #d6e0d1; }

.pc-desktop {
  width: min(1120px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
  border: 5px solid #555c55; border-radius: 10px; background: #343632; box-shadow: 0 12px 80px #11110f9c;
}
.pc-desktop[open] { animation: none; }
.pc-statusbar, .pc-bezel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 11px;
}
.pc-statusbar > span { color: #dce7d8; font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.pc-statusbar i, .pc-bezel i, .pc-status-dot {
  display: inline-block; width: 6px; height: 6px; background: #bbd2b8; box-shadow: 0 0 7px #c4ddc3; vertical-align: 1px;
}
.pc-statusbar .close { width: 30px; height: 28px; font-size: 20px; }
.pc-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pc-workspace {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 205px);
  grid-template-rows: 1fr auto; align-items: start; gap: 12px; min-height: clamp(400px, 55dvh, 600px);
  padding: clamp(8px, 2vw, 18px); background: #849484;
}
.pc-wallpaper, .wall-preview { object-fit: cover; }
.pc-wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.pc-wallpaper.pixel, .wall-preview.pixel { image-rendering: pixelated; }
.pc-workspace::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #24282724, transparent 44%, #20281c39);
}
.pc-shortcuts { display: grid; gap: 4px; justify-items: start; }
.pc-shortcut {
  display: grid; justify-items: center; gap: 4px; width: 76px; min-height: 62px; padding: 5px 3px;
  border: 1px solid transparent; border-radius: 4px; background: none;
  color: #fffaf0; font-size: 11px; font-weight: 750; text-shadow: 0 1px 3px #171b19, 0 0 6px #171b19;
}
.pc-shortcut:hover, .pc-shortcut:focus-visible { border-color: #eef5e284; background: #30382a45; }
.pc-shortcut .pc-app-icon { text-shadow: none; box-shadow: 0 2px 4px #222b2280; border: 1px solid #f5f6e880; }
.pc-cafe, .pc-launcher {
  border: 1px solid #b8c2b383; border-radius: 5px; background: #252c28ec; color: #f2f0e8;
  box-shadow: 0 4px 14px #1b231b55;
}
.pc-cafe { padding: 9px; }
.pc-panel-heading { display: flex; align-items: center; gap: 6px; }
.pc-panel-heading h3 { font-size: 12px; margin: 0; }
.pc-panel-heading h3:focus-visible { outline: 1px solid var(--mint); outline-offset: 3px; }
.pc-panel-heading > svg { width: 16px; height: 16px; color: #ccdbca; }
.pc-panel-heading > span:last-child:not(.pc-status-dot) { margin-left: auto; color: #d0d8cc; font-size: 9px; }
#pc-seat {
  margin: 7px 0 4px; padding: 6px 4px; background: #a4b7a62b;
  font-size: 11px; font-weight: 750; text-align: center;
}
.pc-cafe dl { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 6px 0 7px; font-size: 11px; }
.pc-cafe dd { margin: 0; color: #d4e1cf; }
.pc-cafe .enter { min-height: 33px; font-size: 11px; }
.pc-cafe .enter svg { width: 14px; height: 14px; }
#pc-order-summary { margin-top: 5px; color: #d0d8ce; font-size: 10px; text-align: center; }
.pc-end { display: block; margin: 4px auto 0; padding: 5px 6px 0; border: 0; color: #e5dfd6; background: none; font-size: 10px; text-decoration: underline; text-underline-offset: 2px; }

.pc-launcher { grid-column: 1 / -1; width: min(570px, 100%); align-self: end; padding: 8px; }
.pc-launcher .pc-panel-heading { margin-bottom: 6px; }
.pc-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pc-app {
  display: grid; grid-template-columns: 35px minmax(0, 1fr) 13px; gap: 7px; align-items: center;
  min-height: 51px; padding: 5px 7px; border: 1px solid #a4b1a1; border-radius: 4px;
  color: #353934; background: #e5e8df; text-align: left;
}
.pc-app:hover { background: #f2f3eb; border-color: #d7e0d0; }
.pc-app:focus-visible { outline-color: #92b2a0; }
.pc-app > svg { width: 13px; height: 13px; color: #687268; }
.pc-app strong, .pc-app small { display: block; word-break: keep-all; }
.pc-app strong { font-size: 12px; line-height: 1.25; }
.pc-app small { margin-top: 2px; color: #5c6158; font-size: 10px; line-height: 1.3; }
.pc-app-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 4px; font-size: 22px; }
.pc-app-icon svg { width: 20px; height: 20px; }
.pc-app-icon.lilac { color: #695a70; background: #dfd3e2; }
.pc-app-icon.sage { color: #496250; background: #d4dfd2; }
.pc-app-icon.cream, .order-row .activity-icon { color: #685946; background: #e5dacc; }

.pc-taskbar {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; min-height: 38px;
  padding: 3px 7px; border-top: 1px solid #a3b0a67f; background: #333e39; color: #f1f4ec;
}
.pc-start { position: relative; }
.pc-start summary, .pc-task {
  display: flex; align-items: center; gap: 5px; min-height: 29px; padding: 4px 8px; border: 1px solid #a4baab59;
  border-radius: 3px; background: #4d6558; font-size: 11px; font-weight: 750; cursor: pointer;
}
.pc-start summary { list-style: none; color: #f3f5ed; }
.pc-start summary::-webkit-details-marker { display: none; }
.pc-start summary:hover, .pc-task:hover { background: #5e7769; }
.pc-start summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.pc-start summary i { width: 5px; height: 5px; margin: -5px 5px 0 0; background: currentColor; box-shadow: 6px 0 currentColor, 0 6px currentColor, 6px 6px currentColor; }
.pc-task { background: #45524a; }
.pc-task svg { width: 14px; height: 14px; }
.pc-start-menu {
  position: absolute; bottom: calc(100% + 7px); left: 0; width: 151px; display: grid; gap: 2px;
  padding: 4px; border: 1px solid #7f9486; border-radius: 4px; background: #323d37; box-shadow: 0 4px 15px #17211980;
}
.pc-start-menu button { border: 0; border-radius: 2px; background: none; padding: 7px; font-size: 11px; text-align: left; }
.pc-start-menu button:hover { background: #4d6558; }
#pc-clock { margin-left: auto; font-size: 11px; color: #e4ebe1; }
.pc-bezel { justify-content: center; padding: 5px 9px; color: #e1e6da; font-size: 9px; letter-spacing: .12em; }

.wall-preview { width: 100%; display: block; aspect-ratio: 16 / 9; margin: 9px 0; border: 1px solid var(--line); border-radius: 4px; background: #586256; }
.wall-file-label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 750; }
.wall-file { max-width: 100%; width: 100%; color: var(--text); font: inherit; font-size: 12px; }
.wall-file::file-selector-button { padding: 6px 8px; margin-right: 6px; border: 1px solid #787c72; border-radius: 4px; color: var(--text); background: #454a42; cursor: pointer; }
.wall-help { margin: 6px 0 8px; color: var(--sub); font-size: 11px; }
.wall-effect { display: flex; align-items: center; gap: 7px; border-block: 1px solid var(--line); padding: 7px 0; font-size: 13px; }
.wall-effect input { accent-color: #a9c3ae; }
.wall-effect small { margin-left: auto; color: var(--sub); font-size: 11px; }
.wall-status { min-height: 1.5em; margin: 7px 0; color: var(--mint); font-size: 11px; line-height: 1.5; }
.wall-status[data-error] { color: #efc5ba; }
.wall-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7px; }

@media (max-width: 480px) {
  .pc-workspace { grid-template-columns: minmax(0, 1fr) minmax(122px, 41%); min-height: 373px; }
  .pc-app { grid-template-columns: 28px minmax(0, 1fr); padding-inline: 5px; }
  .pc-app > svg { display: none; }
  .pc-app-icon { width: 28px; height: 28px; font-size: 18px; }
  .pc-app-icon svg { width: 16px; height: 16px; }
  .pc-shortcut { min-height: 53px; width: 68px; font-size: 10px; }
  #pc-seat { font-size: 10px; }
}

.pair-hud { display: flex; justify-content: space-between; margin: 13px 0 8px; font-size: 12px; color: var(--sub); }
.pair-hud strong { color: var(--mint); }
.pair-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pair-card {
  display: grid; place-items: center; min-height: 45px; aspect-ratio: 1.25;
  border: 1px solid #797067; border-radius: 5px; color: var(--peach); background: #48433f;
  font-size: clamp(19px, 6vw, 30px); font-weight: 750;
}
.pair-card:hover { border-color: #c7cabc; }
.pair-card.revealed { color: #4c4353; background: #d6cbdc; }
.pair-card.matched { color: #405b4b; background: #c6d5c2; border-color: #a3b39f; cursor: default; }
#pair-reset { min-height: 38px; margin-top: 10px; }

@media (min-width: 620px) {
  .pc-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#mines { width: min(442px, calc(100% - 20px)); }
#mines .dialog-inner { padding: clamp(12px, 4vw, 20px); }
.mine-toolbar, .mine-hud { display: flex; align-items: center; gap: 10px; }
.mine-toolbar { justify-content: space-between; flex-wrap: wrap; margin: 13px 0 8px; }
.mine-hud { color: var(--sub); font-size: 12px; }
.mine-hud strong, #mine-time { color: var(--mint); font-variant-numeric: tabular-nums; }
.mine-toggle { min-height: 36px; }
.mine-toggle[aria-pressed="true"] { color: #2d4434; background: #c5d7ba; border-color: #e3ecd9; }
.mine-toggle:disabled { opacity: .68; cursor: default; }
.mine-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: clamp(2px, .8vw, 4px);
  padding: clamp(4px, 1.3vw, 7px);
  border: 1px solid #675c53;
  border-radius: 6px;
  background: #272422;
  user-select: none;
}
.mine-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid #857d6e;
  border-radius: 3px;
  background: #524c43;
  box-shadow: inset 0 2px #a79a8455, inset 0 -2px #28241e66;
  color: #ece2cb;
  font: 800 clamp(12px, 4vw, 18px) / 1 var(--mono);
  touch-action: manipulation;
}
.mine-cell[data-cell="closed"]:hover { background: #655e52; }
.mine-cell:focus-visible { position: relative; z-index: 1; outline: 2px solid #f5d9a4; outline-offset: 0; }
.mine-cell[data-cell="open"] { border-color: #aca491; background: #dbd3bf; color: #603c55; box-shadow: none; cursor: default; }
.mine-cell[data-number="1"] { color: #315470; }
.mine-cell[data-number="2"] { color: #28563e; }
.mine-cell[data-number="3"] { color: #8a3d33; }
.mine-cell[data-number="4"] { color: #514275; }
.mine-cell[data-cell="flag"] { background: #493d34; color: #ffcd92; }
.mine-cell[data-cell="mine"] { background: #493b3b; color: #ead3c7; box-shadow: none; }
.mine-cell:is([data-cell="hit"],[data-cell="wrong"]) { background: #824e49; color: #fff1df; box-shadow: none; }
.mine-board:is([data-state="won"],[data-state="lost"]) .mine-cell { cursor: default; }
#mine-reset { min-height: 36px; }

.order-row { display: grid; grid-template-columns: 33px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.order-product strong, .order-product small { display: block; word-break: keep-all; }
.order-product strong { font-size: 13px; }
.order-product small { color: var(--sub); font-size: 11px; margin-top: 2px; }
.order-quantity { display: grid; grid-template-columns: 30px 24px 30px; align-items: center; text-align: center; }
.order-quantity button {
  display: grid; place-items: center; padding: 0; min-height: 32px; background: #444740; color: #edf1e7;
  border: 1px solid #687564; border-radius: 5px; font-size: 15px; font-weight: 750;
}
.order-quantity button:hover:not(:disabled) { background: #536153; }
.order-quantity button:disabled { opacity: .5; }
.order-quantity output { color: var(--mint); font: 750 13px var(--mono); }
.order-receipt { margin: 9px 0; padding: 9px; border: 1px dashed #7d8c79; border-radius: 5px; background: #3a463d; }
.order-receipt strong { color: #dbe8d6; font-size: 13px; }
.order-receipt p { margin-top: 3px; color: #d6ded0; font-size: 12px; }
#place-order { margin-top: 9px; }

@media (prefers-reduced-motion: no-preference) {
  .pc-screen.is-on { animation: monitor-power .32s steps(4, end) both; }
  .pair-card { transition: background-color .16s ease, color .16s ease; }
  .pair-card.revealed, .pair-card.matched { animation: card-flip .18s ease-out; }
  .pc-app-icon { transition: transform .18s ease; }
  .pc-app:hover .pc-app-icon, .pc-app:focus-visible .pc-app-icon { transform: translateY(-2px); }
}
@keyframes monitor-power {
  from { filter: brightness(.25); }
  to { filter: brightness(1); }
}
@keyframes card-flip { from { transform: scaleX(.4); } to { transform: scaleX(1); } }