/* KC-2000 — 90s digital camera simulator. All styling is hand-rolled;
   the only live pixels are the shader-driven LCD canvases. */

:root {
  --cam-body: #b9b3a6;
  --cam-body-dark: #8f897d;
  --cam-body-light: #d8d3c6;
  --cam-accent: #2e2e33;
  --cam-rubber: #3a3a40;
  --lcd-frame: #222227;
  --amber: #ffb43c;
  --led-red: #ff2a1a;
  --led-green: #4dff6a;
  --w98-face: #c0c0c0;
  --w98-dark: #808080;
  --w98-darker: #404040;
  --w98-light: #ffffff;
  --w98-title: linear-gradient(90deg, #000080, #1084d0);
  --teal: #008080;
  --mono: "Courier New", "Lucida Console", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--teal);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12px;
  overflow: hidden;
  color: #000;
  user-select: none;
}

/* ---------------- boot splash ---------------- */
#boot {
  position: fixed; inset: 0; z-index: 100;
  background: #0a0a14;
  display: flex; align-items: center; justify-content: center;
  color: #cdd6ff;
}
.boot-box { text-align: center; font-family: var(--mono); }
.boot-logo { font-size: 42px; letter-spacing: 6px; color: #ffb43c; text-shadow: 0 0 18px rgba(255,180,60,.6); }
.boot-logo span { font-size: 14px; vertical-align: super; }
.boot-sub { margin-top: 8px; letter-spacing: 3px; font-size: 11px; color: #8f9ac0; }
.boot-bar { width: 260px; height: 14px; border: 2px solid #4a5578; margin: 22px auto 10px; padding: 2px; }
#boot-fill { height: 100%; width: 0%; background: repeating-linear-gradient(90deg, #ffb43c 0 8px, #d88f22 8px 16px); }
#boot-msg { font-size: 10px; letter-spacing: 2px; color: #6f7aa0; }

/* ---------------- desktop ---------------- */
#desktop { position: fixed; inset: 0 0 30px 0; }
#desktop-icons { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 18px; z-index: 0; }
.desk-icon { width: 76px; text-align: center; color: #fff; font-size: 10px; letter-spacing: 1px; cursor: pointer; text-shadow: 1px 1px 0 #000; }
.desk-glyph { font-size: 30px; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.4)); }
.desk-icon span { display: block; margin-top: 4px; }

/* ---------------- win98 chrome ---------------- */
.win98 {
  background: var(--w98-face);
  border: 2px solid;
  border-color: var(--w98-light) var(--w98-darker) var(--w98-darker) var(--w98-light);
  box-shadow: inset 1px 1px 0 var(--w98-face), inset -1px -1px 0 var(--w98-dark), 6px 8px 24px rgba(0,0,0,.45);
}
#camera-window {
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  width: min(1060px, calc(100vw - 24px));
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
}
.win98-title {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--w98-title);
  color: #fff; padding: 3px 4px 3px 8px;
  font-weight: bold; font-size: 11px; letter-spacing: .5px;
}
.win98-title-btns { display: flex; gap: 2px; }
.wbtn {
  width: 20px; height: 18px; line-height: 1;
  background: var(--w98-face); border: 1px solid;
  border-color: var(--w98-light) var(--w98-darker) var(--w98-darker) var(--w98-light);
  font-size: 11px; font-weight: bold; cursor: pointer; color: #000;
}
.wbtn:active { border-color: var(--w98-darker) var(--w98-light) var(--w98-light) var(--w98-darker); }
.wbtn.muted { color: #a00; text-decoration: line-through; }
.win98-body { display: flex; gap: 10px; padding: 10px; overflow: auto; }
.win98-status {
  display: flex; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--w98-dark);
  padding: 3px 6px; font-size: 10px; color: #222;
}
.win98-status span { border: 1px solid; border-color: var(--w98-dark) var(--w98-light) var(--w98-light) var(--w98-dark); padding: 1px 8px; flex: 0 1 auto; }
#status-left { flex: 1; }

/* ---------------- camera body ---------------- */
#camera {
  flex: 0 0 auto;
  width: 700px;
  background: linear-gradient(165deg, var(--cam-body-light), var(--cam-body) 40%, var(--cam-body-dark));
  border-radius: 18px;
  padding: 14px 16px 10px;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.7),
    inset 0 -3px 6px rgba(0,0,0,.35),
    0 10px 28px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
#camera::after { /* subtle body texture */
  content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

.cam-top {
  display: flex; align-items: flex-end; gap: 14px;
  padding: 4px 6px 0;
}
.top-left-cluster { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.brand { font-family: var(--mono); font-weight: bold; font-size: 15px; letter-spacing: 3px; color: #4a4438; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.model-badge { font-size: 9px; letter-spacing: 1px; color: #6b6353; }
.model-badge em { font-style: normal; color: #8a2f22; }

.top-panel {
  background: #1c1c20;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.35);
  transform: perspective(300px) rotateX(14deg);
}
#top-lcd {
  display: block; width: 212px; height: 65px;
  image-rendering: pixelated;
  background: #9aa578;
  border-radius: 2px;
}

.flash-head {
  width: 66px; height: 44px;
  background: linear-gradient(180deg, #2a2a2e, #17171a);
  border-radius: 6px 6px 3px 3px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.4);
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.flash-grid {
  flex: 1; width: 86%; margin-top: 5px;
  background: repeating-linear-gradient(90deg, #d9d9cf 0 4px, #9a9a90 4px 8px);
  border-radius: 3px;
  opacity: .8;
  box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}
.flash-label { font-size: 7px; color: #888; letter-spacing: 2px; padding: 2px 0 3px; }
.flash-head.firing { animation: flashPop .35s ease-out; }
@keyframes flashPop {
  0% { box-shadow: 0 0 60px 30px rgba(255,255,255,.95); }
  100% { box-shadow: inset 0 2px 4px rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.4); }
}

.shutter-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.shutter {
  width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8e2d4, #b5ad9c 60%, #8f897d);
  border: 3px solid #6b6558;
  box-shadow: 0 4px 0 #54503f, 0 6px 10px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.8);
  cursor: pointer;
}
.shutter:active, .shutter.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #54503f, 0 2px 4px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.8); }
.shutter-label { font-size: 8px; letter-spacing: 2px; color: #5b5546; }

.cam-front {
  display: flex; align-items: center; gap: 16px;
  padding: 0 10px;
}
.lens-barrel {
  width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle, #3c3c42 40%, #232327 75%, #131316);
  box-shadow: 0 4px 10px rgba(0,0,0,.55), inset 0 2px 4px rgba(255,255,255,.2);
  position: relative; flex: 0 0 auto;
}
.lens-ring { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.08); }
.lens-ring.r1 { inset: 10px; }
.lens-ring.r2 { inset: 20px; border-color: rgba(0,0,0,.5); }
.lens-glass {
  position: absolute; inset: 30px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #28455f, #0c1522 65%, #05080e);
  box-shadow: inset 0 0 14px rgba(0,0,0,.9);
  overflow: hidden;
}
.lens-glare { position: absolute; width: 40%; height: 26%; left: 14%; top: 12%; border-radius: 50%; background: radial-gradient(ellipse, rgba(160,210,255,.5), transparent 70%); }
.lens-text { position: absolute; bottom: -16px; width: 200%; left: -50%; text-align: center; font-size: 7px; letter-spacing: 1px; color: #6b6553; }
.light-sensor { width: 18px; height: 18px; border-radius: 4px; background: radial-gradient(circle at 35% 30%, #4a5a4a, #1c261c); box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
.af-lamp { width: 12px; height: 12px; border-radius: 50%; background: #3a2222; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.af-lamp.on { background: #ff5a3c; box-shadow: 0 0 10px #ff5a3c; }

.cam-back { display: flex; gap: 14px; align-items: stretch; }

.lcd-bezel {
  background: linear-gradient(180deg, #a39d8f, #8a8478);
  border-radius: 12px;
  padding: 10px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.4);
  flex: 0 0 auto;
}
.lcd-tag { font-size: 8px; letter-spacing: 2px; color: #57524a; text-align: center; margin-bottom: 6px; }
.lcd-outer {
  background: var(--lcd-frame);
  border-radius: 6px;
  padding: 12px;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.9);
  position: relative;
}
#lcd {
  display: block;
  width: 320px; height: 240px;
  image-rendering: pixelated;
  background: #0b0e0b;
  cursor: grab;
}
#lcd:active { cursor: grabbing; }
.lcd-scan {
  position: absolute; inset: 12px; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.lcd-glare {
  position: absolute; inset: 12px; pointer-events: none; border-radius: 2px;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 26%);
}

.back-controls { display: flex; gap: 12px; align-items: stretch; flex: 1; }
.card-door {
  background: linear-gradient(180deg, #a09a8c, #7f796d);
  border-radius: 8px;
  width: 74px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
  border: 1px dashed rgba(0,0,0,.25);
}
.card-door-label { font-size: 8px; text-align: center; color: #4e4a40; letter-spacing: 1px; line-height: 1.5; }
.card-led {
  width: 12px; height: 12px; border-radius: 50%;
  background: #402222;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.8);
}
.card-led.busy { background: var(--led-red); box-shadow: 0 0 10px var(--led-red); animation: ledBlink .18s steps(2) infinite; }
.card-led.ok { background: var(--led-green); box-shadow: 0 0 8px var(--led-green); }
@keyframes ledBlink { 50% { opacity: .25; } }

.btn-col { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.cam-btn {
  font-family: var(--mono);
  font-size: 10px; font-weight: bold; letter-spacing: 1px;
  color: #2c2c30;
  background: linear-gradient(180deg, #e2dcd0, #b5ad9c);
  border: 2px solid #6b6558;
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  box-shadow: 0 3px 0 #54503f, 0 4px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.7);
}
.cam-btn:active, .cam-btn.pressed { transform: translateY(2px); box-shadow: 0 1px 0 #54503f, 0 2px 3px rgba(0,0,0,.4); }
.cam-btn.wide { min-width: 92px; text-align: center; }
.cam-btn.danger { color: #7a1a12; }
.cam-btn.active-mode { background: linear-gradient(180deg, #ffd98a, #d8a44a); }

.dpad {
  position: relative;
  width: 118px; height: 118px;
  background: radial-gradient(circle, #c9c3b6 30%, #a8a294 75%);
  border-radius: 50%;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.3);
  align-self: center;
  flex: 0 0 auto;
}
.dpad .cam-btn {
  position: absolute;
  width: 34px; height: 34px; padding: 0;
  border-radius: 8px;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.dpad-up { top: 2px; left: 42px; }
.dpad-down { bottom: 2px; left: 42px; }
.dpad-left { left: 2px; top: 42px; }
.dpad-right { right: 2px; top: 42px; }
.dpad-ok { left: 42px; top: 42px; border-radius: 50%; font-size: 8px; }
.dpad-label { position: absolute; bottom: -14px; width: 100%; text-align: center; font-size: 7px; letter-spacing: 2px; color: #57524a; }

.cam-bottom {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid rgba(0,0,0,.2);
  padding-top: 6px;
}
.grip-lines { display: flex; gap: 3px; }
.grip-lines i { width: 8px; height: 14px; background: var(--cam-rubber); border-radius: 2px; }
.serial { font-size: 7px; letter-spacing: 1px; color: #6b6553; margin-left: auto; }
.tripod { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #555; background: radial-gradient(circle, #222 40%, #444); }

/* powered-off look */
#camera.powered-off #lcd { filter: brightness(.25) saturate(.3); }
#camera.powered-off #top-lcd { filter: brightness(.2); }

/* ---------------- side dock ---------------- */
#side-dock { flex: 1 1 auto; min-width: 190px; display: flex; flex-direction: column; gap: 10px; }
.dock-hint {
  background: #fffbe0;
  border: 1px solid #a8a070;
  padding: 8px; font-size: 10px; line-height: 1.7; color: #333;
}
.kbd {
  font-family: var(--mono); font-size: 9px;
  background: #eee; border: 1px solid #999; border-bottom-width: 2px;
  padding: 0 4px; border-radius: 3px;
}
.dock-meter { display: flex; flex-direction: column; gap: 6px; background: #efefef; border: 1px solid #aaa; padding: 8px; }
.dock-meter-row { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; }
.dock-meter-row span { width: 34px; }
.dock-meter-bar { flex: 1; height: 10px; background: #d6d6d6; border: 1px solid #999; }
#dock-card-fill { height: 100%; width: 0%; background: repeating-linear-gradient(90deg, #2a6ad4 0 6px, #1c4ea0 6px 12px); }
#dock-batt-fill { height: 100%; width: 100%; background: repeating-linear-gradient(90deg, #3aa84a 0 6px, #2a8036 6px 12px); }
#dock-batt-fill.low { background: repeating-linear-gradient(90deg, #d43a2a 0 6px, #a0281c 6px 12px); }
.dock-offload {
  font-family: var(--mono); font-size: 11px; font-weight: bold;
  background: var(--w98-face); border: 2px solid;
  border-color: var(--w98-light) var(--w98-darker) var(--w98-darker) var(--w98-light);
  padding: 9px 6px; cursor: pointer;
}
.dock-offload:active { border-color: var(--w98-darker) var(--w98-light) var(--w98-light) var(--w98-darker); }

/* ---------------- dialogs ---------------- */
.dialog {
  position: fixed; z-index: 60;
  width: min(480px, calc(100vw - 40px));
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column;
}
.dialog.hidden { display: none; }
.dialog-body { padding: 10px; max-height: 70vh; overflow: auto; }
.dialog-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

#help-text { font-family: var(--mono); font-size: 11px; white-space: pre-wrap; line-height: 1.6; }

.exif-tabs { margin-bottom: 8px; }
.exif-tab { font-size: 10px; font-weight: bold; border: 1px solid #999; border-bottom: none; padding: 3px 10px; background: #e8e8e8; }
#exif-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
#exif-table td { border: 1px solid #bbb; padding: 3px 6px; }
#exif-table td:first-child { background: #e4e4e4; width: 42%; font-weight: bold; }
.exif-raw-wrap { margin-top: 10px; }
.exif-raw-title { font-size: 9px; font-weight: bold; letter-spacing: 1px; margin-bottom: 4px; }
#exif-raw { font-family: var(--mono); font-size: 9px; background: #101018; color: #7fffd4; padding: 8px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 120px; }

.offload-path { font-family: var(--mono); font-size: 10px; margin-bottom: 8px; }
#offload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 46vh; overflow: auto; padding: 2px; }
.offload-thumb { border: 2px solid #999; background: #fff; padding: 3px; cursor: pointer; text-align: center; }
.offload-thumb img { width: 100%; display: block; image-rendering: pixelated; }
.offload-thumb .tname { font-family: var(--mono); font-size: 8px; margin-top: 2px; }
.offload-thumb.selected { border-color: #000080; background: #d0d8ff; }
.offload-note { font-size: 9px; color: #555; }

/* ---------------- taskbar ---------------- */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 30px; z-index: 50;
  background: var(--w98-face);
  border-top: 2px solid var(--w98-light);
  display: flex; align-items: center; gap: 6px; padding: 2px 6px;
}
.start-btn {
  font-weight: bold; font-size: 12px; font-style: italic;
  border: 2px solid; border-color: var(--w98-light) var(--w98-darker) var(--w98-darker) var(--w98-light);
  padding: 2px 8px; display: flex; align-items: center; gap: 4px;
}
.start-logo { color: #d43a2a; }
.task-item {
  border: 2px solid; border-color: var(--w98-darker) var(--w98-light) var(--w98-light) var(--w98-darker);
  background: #dedede; padding: 3px 10px; font-size: 11px;
  max-width: 260px; overflow: hidden; white-space: nowrap;
}
.task-clock { margin-left: auto; border: 1px solid; border-color: var(--w98-dark) var(--w98-light) var(--w98-light) var(--w98-dark); padding: 3px 10px; font-size: 11px; }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  #camera { width: 100%; }
  .win98-body { flex-direction: column; align-items: center; }
  #side-dock { width: 100%; }
}
@media (max-width: 760px) {
  .cam-front { display: none; }
  .cam-back { flex-wrap: wrap; justify-content: center; }
  .lcd-outer { padding: 8px; }
  #lcd { width: min(320px, calc(100vw - 170px)); height: auto; aspect-ratio: 4/3; }
  .cam-top { flex-wrap: wrap; }
  #camera-window { top: 46%; }
  #desktop-icons { display: none; }
}