/* ============================================================
   VistaPix DC-900 — 90s digital camera simulator
   Territory: chunky grey-beige consumer plastic, washed LCD w/
   visible grid, teal-and-silver UI chrome, mall-photo nostalgia.
   ============================================================ */

:root {
  --teal: #0f7d7d;
  --teal-deep: #075c5c;
  --teal-lite: #35a8a0;
  --silver: #c9cdd2;
  --silver-hi: #eef1f4;
  --plastic: #c9c2ae;
  --plastic-hi: #e2dcc9;
  --plastic-lo: #9d957f;
  --plastic-dk: #6f6858;
  --ink: #2b2925;
  --lcd-bg: #101408;
  --amber: #ffb400;
  --w98-face: #c0c0c0;
  --w98-hi: #ffffff;
  --w98-lo: #808080;
  --w98-dk: #404040;
  --w98-title: #000080;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: var(--ink);
  overflow: hidden;
  background: var(--teal);
  user-select: none;
}

/* ================= DESKTOP ================= */
#desktop {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 55%),
    repeating-conic-gradient(rgba(255,255,255,.012) 0% .6%, transparent .6% 1.2%),
    linear-gradient(160deg, #0f8484, var(--teal) 45%, #0a6b6b);
  padding-bottom: 34px;
  overflow: auto;
}

.desk-icon {
  position: absolute; width: 74px; text-align: center;
  color: #fff; font-size: 11px; line-height: 1.15; cursor: pointer;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
  padding: 4px 2px; border: 1px dotted transparent;
}
.desk-icon:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
.desk-icon .icon-img {
  width: 38px; height: 34px; margin: 0 auto 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.4));
}
#icon-manual  { right: 112px; bottom: 46px; }
#icon-gallery { right: 26px;  bottom: 46px; }

/* ================= WIN98 WINDOWS ================= */
.win {
  position: absolute;
  background: var(--w98-face);
  border: 2px solid; border-color: var(--w98-hi) var(--w98-dk) var(--w98-dk) var(--w98-hi);
  box-shadow: 2px 2px 0 rgba(0,0,0,.35), inset 1px 1px 0 #dfdfdf;
  padding: 2px;
}
.win.hidden { display: none; }
.win-title {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, var(--w98-title), #1084d0);
  color: #fff; font-weight: bold; font-size: 11px;
  padding: 2px 4px 2px 6px; letter-spacing: .3px;
}
.wt-btns { display: flex; gap: 2px; }
.wt-btns i {
  font-style: normal; width: 15px; height: 13px; line-height: 11px;
  background: var(--w98-face); color: #000; text-align: center; font-size: 9px;
  border: 1px solid; border-color: var(--w98-hi) var(--w98-dk) var(--w98-dk) var(--w98-hi);
  cursor: pointer;
}
.win-body { background: var(--w98-face); border-top: 1px solid var(--w98-hi); }

.w98-btn {
  font-family: inherit; font-size: 11px; padding: 3px 10px;
  background: var(--w98-face); color: #000; cursor: pointer;
  border: 2px solid; border-color: var(--w98-hi) var(--w98-dk) var(--w98-dk) var(--w98-hi);
}
.w98-btn:active { border-color: var(--w98-dk) var(--w98-hi) var(--w98-hi) var(--w98-dk); }

/* ================= CAMERA WINDOW ================= */
#win-camera {
  left: 28px; top: 34px;
}
.cam-body-wrap { padding: 10px 12px 8px; }
#cam-scale { transform-origin: top center; }

.cam-hint {
  text-align: center; font-size: 10px; color: #444;
  padding-top: 6px; letter-spacing: .2px;
}

/* ================= CAMERA BODY ================= */
.camera {
  position: relative;
  width: 860px; height: 560px;
  border-radius: 26px;
  background:
    radial-gradient(ellipse 130% 70% at 50% -8%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(ellipse 120% 60% at 50% 115%, rgba(0,0,0,.28), transparent 55%),
    linear-gradient(180deg, var(--plastic-hi), var(--plastic) 30%, #b8b09a 78%, var(--plastic-lo));
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.65),
    inset 0 -3px 6px rgba(0,0,0,.3),
    inset 2px 0 3px rgba(255,255,255,.3),
    inset -2px 0 3px rgba(0,0,0,.18),
    0 14px 34px rgba(0,0,0,.5);
  overflow: visible;
}
/* speckled ABS texture */
.camera::before {
  content: ""; position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(0,0,0,.05) 0 1px, transparent 1.5px),
    radial-gradient(circle at 64% 71%, rgba(255,255,255,.16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 88%, rgba(0,0,0,.04) 0 1px, transparent 1.5px),
    radial-gradient(circle at 83% 15%, rgba(0,0,0,.05) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 40%, rgba(255,255,255,.1) 0 1px, transparent 1.5px);
  background-size: 37px 41px, 29px 31px, 43px 47px, 31px 37px, 53px 49px;
  opacity: .5;
}

/* ---- top ridge: viewfinder bump, status LCD, flash ---- */
.cam-top {
  position: absolute; left: 0; right: 0; top: 0; height: 108px;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 34px 0 118px;
}
.viewfinder-bump {
  width: 120px; height: 74px; margin-top: -4px;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, #b3ab95, #8f8874);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
}
.vf-glass {
  width: 62px; height: 40px; border-radius: 8px;
  background: radial-gradient(ellipse at 35% 30%, #4b5e66, #16211f 70%);
  box-shadow: inset 0 0 8px #000, 0 1px 0 rgba(255,255,255,.3);
  position: relative;
}
.vf-glass::after { content: ""; position: absolute; left: 8px; top: 6px; width: 18px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.28); filter: blur(2px); }

#status-lcd-wrap {
  margin-top: 8px; padding: 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, #8f8874, #6f6858);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.35);
}
#status-lcd {
  display: block; width: 200px; height: 56px;
  border-radius: 4px;
  background: #9aa48a;
  box-shadow: inset 0 0 6px rgba(0,0,0,.4);
  image-rendering: pixelated;
}

.flash-unit {
  margin-top: 6px; padding: 6px 8px 4px;
  border-radius: 8px;
  background: linear-gradient(180deg, #b3ab95, #948c76);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.2);
  text-align: center;
}
.flash-lens {
  width: 86px; height: 34px; border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #dfe7ea, #a8b6ba 55%, #8d9ba0);
  box-shadow: inset 0 0 6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.35);
  transition: box-shadow .1s;
}
.flash-unit.firing .flash-lens {
  background: #fff;
  box-shadow: 0 0 44px 16px rgba(255,255,240,.95), inset 0 0 8px #fff;
}
.flash-label { font-size: 7px; letter-spacing: 2px; color: #4e4838; padding-top: 3px; font-weight: bold; }

/* ---- face ---- */
.cam-face {
  position: absolute; left: 0; right: 0; top: 108px; bottom: 56px;
  display: flex; padding: 0 26px;
}
.face-left { width: 118px; padding-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.brand-badge {
  border-radius: 6px; padding: 7px 9px 6px;
  background: linear-gradient(180deg, var(--silver-hi), var(--silver) 55%, #9aa0a7);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.3);
}
.brand-name { font-size: 15px; font-weight: 800; font-style: italic; color: var(--teal-deep); letter-spacing: .5px; }
.brand-model { font-size: 6.5px; letter-spacing: 1.1px; color: #555b63; font-weight: bold; padding-top: 1px; }

.speaker-grille { display: flex; flex-wrap: wrap; gap: 5px; width: 60px; padding-left: 6px; }
.speaker-grille i { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #55503f, #35311f); box-shadow: inset 0 1px 2px #000; }

.card-door {
  margin-top: 4px; width: 74px; height: 86px; border-radius: 7px;
  background: linear-gradient(180deg, #b5ad97, #9c947d);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.25);
  position: relative; padding: 6px;
}
.card-door-label { font-size: 7px; letter-spacing: 2px; color: #5a5340; font-weight: bold; }
.card-led {
  position: absolute; right: 7px; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #6d2a20, #3d130e);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
}
.card-led.on { background: radial-gradient(circle at 40% 35%, #ff7a5c, #e02109); box-shadow: 0 0 8px 2px rgba(255,60,30,.8); }
.card-door::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 10px; height: 8px; border-radius: 2px; background: #2e2b22; box-shadow: inset 0 1px 2px #000; }

.face-mid { flex: 1; display: flex; align-items: center; justify-content: center; }
.lcd-bezel {
  padding: 14px; border-radius: 14px;
  background: linear-gradient(180deg, #565c63, #33383d 60%, #22262a);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.28), inset 0 -3px 5px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.35);
}
.lcd-stack {
  position: relative; width: 480px; height: 360px; border-radius: 5px; overflow: hidden;
  background: var(--lcd-bg);
  box-shadow: 0 0 0 2px #10130f, inset 0 0 22px rgba(0,0,0,.8);
}
#lcd-gl, #lcd-ovl { position: absolute; inset: 0; width: 480px; height: 360px; }
#lcd-gl { image-rendering: pixelated; }
.lcd-glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 18% -8%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(ellipse 50% 30% at 85% 108%, rgba(255,255,255,.05), transparent 60%);
}
.lcd-tag { text-align: center; padding-top: 7px; }
.lcd-tag span { font-size: 8px; letter-spacing: 2px; color: #aab3ba; font-weight: bold; }

.face-right { width: 150px; display: flex; justify-content: flex-end; }
.btn-col { display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 14px; }

.cbtn {
  font-family: inherit; font-weight: bold; font-size: 9px; letter-spacing: 1px;
  color: #3c382c; cursor: pointer;
  border-radius: 7px; border: 0;
  background: linear-gradient(180deg, var(--plastic-hi), #b3ab94 60%, #98907a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.3), 0 2px 3px rgba(0,0,0,.4);
  padding: 7px 12px;
}
.cbtn:active, .cbtn.pressed {
  background: linear-gradient(180deg, #98907a, #b3ab94);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.3);
  transform: translateY(1px);
}
.cbtn.teal {
  color: #e8fffb;
  background: linear-gradient(180deg, var(--teal-lite), var(--teal) 55%, var(--teal-deep));
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.cbtn.teal:active, .cbtn.teal.pressed { background: linear-gradient(180deg, var(--teal-deep), var(--teal)); }
.cbtn.wide { width: 106px; }

.dpad { position: relative; width: 104px; height: 104px; margin: 4px 0; }
.dpad::before {
  content: ""; position: absolute; inset: 30px; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #b5ad97, #8d8570);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.3);
}
.dpad-b { position: absolute; width: 34px; height: 34px; padding: 0; font-size: 10px; }
.dpad-b.up    { left: 35px; top: 0; }
.dpad-b.down  { left: 35px; bottom: 0; }
.dpad-b.left  { left: 0; top: 35px; }
.dpad-b.right { right: 0; top: 35px; }
.dpad-b.ok    { left: 35px; top: 35px; border-radius: 50%; font-size: 8px; }

.zoom-rocker { display: flex; gap: 3px; }
.zoom-rocker .rocker { width: 52px; font-size: 9px; padding: 7px 4px; }
.zoom-rocker .rocker:first-child { border-radius: 7px 2px 2px 7px; }
.zoom-rocker .rocker:last-child  { border-radius: 2px 7px 7px 2px; }

/* ---- bottom strip ---- */
.cam-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.3));
}
.model-strip { font-size: 8px; letter-spacing: 2.4px; color: rgba(60,55,40,.75); font-weight: bold; }
.battery-door {
  font-size: 8px; color: #5a5340; font-weight: bold; letter-spacing: 1px;
  border: 1px solid rgba(0,0,0,.25); border-radius: 5px; padding: 5px 10px;
  background: linear-gradient(180deg, #b3ab94, #98907a);
}
.batt-lines { height: 3px; margin-bottom: 3px; background: repeating-linear-gradient(90deg, #6f6858 0 6px, transparent 6px 10px); }

/* ---- shutter, dial, power, strap ---- */
#btn-shutter {
  position: absolute; top: -14px; right: 74px;
  width: 64px; height: 34px; border: 0; cursor: pointer;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, var(--silver-hi), var(--silver) 50%, #8f959c);
  box-shadow: inset 0 2px 0 #fff, inset 0 -3px 4px rgba(0,0,0,.35), 0 3px 5px rgba(0,0,0,.45);
}
#btn-shutter span { display: block; margin: 5px auto 0; width: 44px; height: 14px; border-radius: 6px; background: linear-gradient(180deg, var(--teal-lite), var(--teal-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
#btn-shutter:active, #btn-shutter.pressed { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4); }

.dial-wrap { position: absolute; top: -16px; left: 60px; }
#mode-dial {
  position: relative; width: 66px; height: 66px; border-radius: 50%;
  background: conic-gradient(from 200deg, #9a927c, #cfc7b1 20%, #8d8570 45%, #c9c1ab 70%, #9a927c);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.5), inset 0 -3px 5px rgba(0,0,0,.4), 0 3px 6px rgba(0,0,0,.45);
}
.dial-cap { position: absolute; inset: 14px; border-radius: 50%; background: linear-gradient(180deg, var(--silver-hi), #a7adb4); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.4); }
.dial-notch { position: absolute; left: 50%; top: 2px; width: 4px; height: 10px; margin-left: -2px; border-radius: 2px; background: var(--teal-deep); }
.dial-marks span { position: absolute; font-size: 6.5px; font-weight: bold; letter-spacing: .5px; color: #4e4838; }
.dial-marks .m-off  { left: -4px; top: 28px; }
.dial-marks .m-rec  { right: -6px; top: 10px; }
.dial-marks .m-play { right: -10px; bottom: 8px; }
#mode-dial { transition: transform .18s ease; }

.power-btn {
  position: absolute; top: 52px; right: 34px;
  width: 40px; height: 22px; border: 0; cursor: pointer; border-radius: 11px;
  font-size: 10px; color: #3c382c; font-weight: bold;
  background: linear-gradient(180deg, var(--plastic-hi), #98907a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.3), 0 2px 3px rgba(0,0,0,.4);
}
.power-btn:active { transform: translateY(1px); }

.wrist-strap {
  position: absolute; right: -16px; top: 300px; width: 26px; height: 130px;
  border-radius: 14px;
  background: linear-gradient(90deg, #34565a, #4d7d82 40%, #2b464a);
  box-shadow: inset 0 0 6px rgba(0,0,0,.5), 2px 3px 5px rgba(0,0,0,.35);
}

/* ================= GALLERY WINDOW ================= */
#win-gallery { right: 26px; top: 60px; width: 372px; }
.gal-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px; border-bottom: 1px solid var(--w98-lo); }
.gal-mem { margin-left: auto; font-size: 10px; color: #333; font-weight: bold; }
.gal-grid {
  height: 300px; overflow-y: auto; padding: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  background: #fff; border: 2px solid; border-color: var(--w98-lo) var(--w98-hi) var(--w98-hi) var(--w98-lo); margin: 6px;
}
.gal-empty { width: 100%; text-align: center; color: #777; padding-top: 110px; line-height: 1.6; }
.gal-item { width: 100px; text-align: center; cursor: pointer; padding: 3px; border: 1px solid transparent; }
.gal-item:hover { border-color: #7080c0; background: #e8ecf8; }
.gal-item.sel { border-color: var(--w98-title); background: #d0d8f0; }
.gal-item img { display: block; width: 94px; height: 70px; object-fit: cover; border: 1px solid #999; image-rendering: pixelated; background: #111; }
.gal-item .gi-name { font-size: 10px; padding-top: 2px; }
.gal-item .gi-size { font-size: 9px; color: #777; }
.gal-status { font-size: 10px; color: #333; border-top: 1px solid var(--w98-lo); padding: 4px 8px; }

/* ================= MANUAL ================= */
#win-manual { left: 90px; top: 70px; width: 430px; z-index: 40; }
.manual-body { height: 380px; overflow: auto; background: #fff; margin: 6px; border: 2px solid; border-color: var(--w98-lo) var(--w98-hi) var(--w98-hi) var(--w98-lo); }
.manual-body pre { font: 11px/1.5 "Lucida Console", Monaco, monospace; padding: 12px; white-space: pre-wrap; user-select: text; }

/* ================= TASKBAR ================= */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 34px; z-index: 100;
  background: var(--w98-face);
  border-top: 2px solid var(--w98-hi);
  display: flex; align-items: center; gap: 8px; padding: 3px 6px;
}
.start-btn {
  font-weight: bold; font-size: 12px; padding: 3px 12px 3px 8px;
  border: 2px solid; border-color: var(--w98-hi) var(--w98-dk) var(--w98-dk) var(--w98-hi);
  background: var(--w98-face); cursor: pointer;
}
.start-btn:active { border-color: var(--w98-dk) var(--w98-hi) var(--w98-hi) var(--w98-dk); }
.task-items { display: flex; gap: 4px; flex: 1; }
.task-item {
  font-size: 11px; padding: 4px 10px; min-width: 130px;
  border: 2px solid; border-color: var(--w98-hi) var(--w98-dk) var(--w98-dk) var(--w98-hi);
}
.task-item.active { border-color: var(--w98-dk) var(--w98-hi) var(--w98-hi) var(--w98-dk); background: repeating-conic-gradient(#e8e8e8 0 .0001%, #d0d0d0 .0002% .0003%); font-weight: bold; }
.tray { display: flex; align-items: center; gap: 8px; border: 1px solid; border-color: var(--w98-lo) var(--w98-hi) var(--w98-hi) var(--w98-lo); padding: 3px 10px; font-size: 11px; }
.tray-btn { border: 0; background: none; cursor: pointer; font-size: 13px; }

/* ================= FLASH BURST OVERLAY ================= */
#flash-burst {
  position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 90;
  transition: opacity .35s ease-out;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1420px) {
  #win-gallery { width: 330px; }
  .gal-grid { height: 240px; }
}
@media (min-width: 1900px) {
  /* room for both: nudge camera toward centre-left */
  #win-camera { left: calc(50% - 560px); }
}
@media (max-width: 1330px) {
  /* stack: camera first, gallery flows beneath */
  #win-camera { position: relative; left: 12px; top: 12px; }
  #win-gallery { position: relative; right: auto; top: auto; margin: 18px 12px; width: auto; max-width: 680px; }
  .desk-icon { display: none; }
}