/* The CD-ROM drive in the case and the disc box (web/js/cdrom.js). Sizes inside the
   case are container-relative (cqw), like css/armdos.css. */

/* ------------------------------------------------------------------ the drive */
.bay.cd { z-index: 3; }
.cd-face {
  position: relative; height: 100%; border-radius: .3cqw; padding: .8cqw 1.2cqw .7cqw;
  background: linear-gradient(180deg, #e2dbc8, #cdc4ad 70%, #c3b9a1);
  box-shadow: inset 0 .12cqw 0 rgba(255,255,255,.75), inset 0 -.1cqw 0 rgba(0,0,0,.15);
  display: flex; flex-direction: column; gap: .75cqw;
}
.cd-door {
  position: relative; height: 2.1cqw; margin: 0 1%; border-radius: .25cqw;
  background: linear-gradient(180deg, #2c2b29, #161615 55%, #0d0d0c);
  box-shadow: inset 0 .1cqw 0 rgba(255,255,255,.14), 0 .1cqw 0 rgba(255,255,255,.6), 0 -.08cqw 0 rgba(0,0,0,.35);
  transition: transform .5s cubic-bezier(.4,.1,.3,1);
  z-index: 2;
}
.cd-door-lip { position: absolute; left: 3%; right: 3%; bottom: .3cqw; height: .15cqw; background: rgba(255,255,255,.08); border-radius: 1px; }
.cd-door::after { /* the silk-screened logo on the door */
  content: "DATA \00B7 AUDIO"; position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
  font: 600 .55cqw/1 var(--sans); letter-spacing: .3em; color: #6e685c;
}
/* the tray: slides out of the door toward you (seen from a little above) */
.cd-tray {
  position: absolute; left: 5%; right: 5%; top: 2.6cqw; height: 5.6cqw;
  transform-origin: 50% 0; transform: scaleY(0); opacity: 0;
  transition: transform .55s cubic-bezier(.4,.1,.3,1), opacity .15s .4s;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
  pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, #0e0e0d, #22211f 75%, #35342f 88%, #4b4a45 90%, #262522);
  filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.6));
}
.bay.cd.open .cd-tray { transform: scaleY(1); opacity: 1; transition: transform .55s cubic-bezier(.4,.1,.3,1), opacity .08s; }
.bay.cd.open .cd-door { transform: translateY(.15cqw); }
.cd-tray-well {
  position: absolute; left: 50%; top: 4%; width: 66%; height: 80%; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(ellipse closest-side, #0b0b0a 0 13%, #1a1917 14% 97%, #0a0a09 98%);
}
.cd-disc {
  position: absolute; inset: 2% 1%; border-radius: 50%; opacity: 0; transition: opacity .15s;
  background:
    radial-gradient(ellipse closest-side, rgba(0,0,0,0) 0 14%, #c9ced4 15% 30%, rgba(255,255,255,0) 31%),
    conic-gradient(from 30deg, #e6e9ee, #b8c7d9, #f2d9e8, #d8f0e0, #e9e3c3, #c7d3e8, #e6e9ee, #bfc8d6, #f0e2ee, #dcefe6, #e6e9ee);
  -webkit-mask: radial-gradient(ellipse closest-side, transparent 0 13%, #000 14%); mask: radial-gradient(ellipse closest-side, transparent 0 13%, #000 14%);
}
.bay.cd.has-disc .cd-disc { opacity: 1; }
.cd-row { display: flex; align-items: center; gap: .9cqw; }
.cd-jack {
  position: relative; width: 1.15cqw; height: 1.15cqw; border-radius: 50%; cursor: pointer; flex: none;
  background: radial-gradient(circle, #050505 0 34%, #8d8d8a 38% 58%, #d9d9d5 62% 70%, #6f6a5f 74%);
  box-shadow: 0 .06cqw 0 rgba(255,255,255,.6);
}
.cd-jack.plugged::before { /* the plug and its cable */
  content: ""; position: absolute; left: 50%; top: 50%; width: .75cqw; height: .75cqw; transform: translate(-50%,-50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #555, #111); box-shadow: 0 .1cqw .2cqw rgba(0,0,0,.6);
}
.cd-jack.plugged::after {
  content: ""; position: absolute; left: calc(50% - .12cqw); top: 60%; width: .24cqw; height: 3.2cqw; border-radius: .2cqw;
  background: linear-gradient(90deg, #111, #3a3a3a, #111); transform: rotate(8deg); transform-origin: top; pointer-events: none;
}
.cd-knob {
  --turn: 45deg;
  position: relative; width: 1.7cqw; height: 1.7cqw; border-radius: 50%; cursor: ns-resize; flex: none; touch-action: none;
  background: radial-gradient(circle at 40% 35%, #6a6760, #2d2b28 70%);
  box-shadow: 0 .12cqw .18cqw rgba(0,0,0,.5), inset 0 .06cqw 0 rgba(255,255,255,.25), 0 0 0 .12cqw #b3aa94;
}
.cd-knob i { position: absolute; inset: 0; transform: rotate(var(--turn)); transition: transform .06s; }
.cd-knob i::before { content: ""; position: absolute; left: calc(50% - .09cqw); top: .15cqw; width: .18cqw; height: .55cqw; border-radius: .1cqw; background: #f1ead6; }
.cd-logo { margin-left: auto; font: 600 .78cqw/1 var(--sans); color: #7d7462; letter-spacing: .16em; }
.cd-logo b { font-weight: 700; color: #fff; background: #4b5a70; padding: .12cqw .3cqw; border-radius: .15cqw; letter-spacing: .05em; margin-left: .2cqw; }
.cd-led.play { background: #6dff8e; box-shadow: 0 0 6px 1px rgba(90,255,130,.75), inset 0 -1px 1px rgba(0,80,20,.5); }
.cd-led.play.on { background: #ffb02e; box-shadow: 0 0 6px 1px rgba(255,170,40,.8); }
.cd-led.net { animation: netwait .5s ease-in-out infinite; }
.cd-btn {
  width: 3.4cqw; height: 1.25cqw; border: 0; border-radius: .25cqw; padding: 0; cursor: pointer; flex: none;
  background: linear-gradient(180deg, #57544d, #36342f); box-shadow: inset 0 .1cqw 0 rgba(255,255,255,.22), 0 .15cqw .2cqw rgba(0,0,0,.5);
  transition: transform .08s;
}
.cd-btn::after { /* the eject symbol */ content: "\23CF"; display: block; font: 700 .9cqw/1.25cqw var(--sans); color: #b9b3a5; text-align: center; }
.cd-btn:active { transform: translateY(.1cqw); }
.bay.cd.drag-over { outline: .3cqw dashed var(--accent); outline-offset: .3cqw; }

@container (max-width: 560px) {
  .cd-face { padding: 2cqw 3cqw 1.8cqw; gap: 1.8cqw; }
  .cd-door { height: 5cqw; }
  .cd-door::after { font-size: 1.4cqw; }
  .cd-tray { top: 6.8cqw; height: 13cqw; }
  .cd-row { gap: 2.2cqw; }
  .cd-jack { width: 3cqw; height: 3cqw; }
  .cd-jack.plugged::before { width: 2cqw; height: 2cqw; }
  .cd-jack.plugged::after { width: .6cqw; height: 7cqw; }
  .cd-knob { width: 4.4cqw; height: 4.4cqw; }
  .cd-knob i::before { width: .45cqw; height: 1.4cqw; top: .4cqw; }
  .cd-logo { font-size: 2.2cqw; }
  .cd-btn { width: 9cqw; height: 3.4cqw; }
  .cd-btn::after { font-size: 2.2cqw; line-height: 3.4cqw; }
}

/* ------------------------------------------------------------------ the disc box */
.cdbox-wrap { grid-column: 1 / -1; min-width: 0; }
.cdbox-shelf {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start;
  padding: 22px 20px; border-radius: 10px;
  background: linear-gradient(180deg, #23282a, #181b1d); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -18px 30px rgba(0,0,0,.35);
}
.jewel-wrap { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; min-width: 0; }
.jewel {
  position: relative; flex: none; width: 190px; height: 170px; border: 0; padding: 0; cursor: grab; border-radius: 3px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); /* the clear box */
  box-shadow: 0 10px 18px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .18s, opacity .2s;
}
.jewel:hover, .jewel:focus-visible { transform: translateY(-6px) rotate(-1deg); }
.jewel.in-drive { opacity: .35; cursor: default; transform: none; }
.jewel.in-drive::after { content: "IN THE DRIVE"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-8deg); z-index: 5; font: 700 12px/1 var(--sans); letter-spacing: .2em; color: #fff; background: #8e2b20; padding: 6px 9px; border-radius: 3px; }
.jewel-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; border-radius: 3px 0 0 3px; background: repeating-linear-gradient(0deg, #16181c 0 2px, #25282e 2px 4px); }
.jewel-hinge { position: absolute; left: 3px; width: 10px; height: 22px; top: 12px; border-radius: 2px; background: #3a3e45; box-shadow: 0 124px 0 #3a3e45; }
.jewel-inlay {
  position: absolute; left: 20px; right: 4px; top: 4px; bottom: 4px; overflow: hidden; border-radius: 1px;
  background: radial-gradient(120% 90% at 80% 10%, #3b2a7a, #14123a 55%, #0a0a1d);
  color: #fff; text-align: left; font-family: var(--sans);
}
.inlay-grid { /* the obligatory perspective grid */
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%;
  background: repeating-linear-gradient(90deg, rgba(255,64,200,.55) 0 1px, transparent 1px 16px), repeating-linear-gradient(0deg, rgba(255,64,200,.55) 0 1px, transparent 1px 12px);
  transform: perspective(120px) rotateX(55deg); transform-origin: bottom;
}
.inlay-shapes i { position: absolute; display: block; }
.inlay-shapes .s1 { right: 12px; top: 26px; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(180deg, #ffd23f, #ff3d7f); }
.inlay-shapes .s2 { right: 8px; top: 64px; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 24px solid #20e3b2; transform: rotate(-14deg); }
.inlay-shapes .s3 { right: 10px; top: 104px; width: 30px; height: 8px; background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 6px); transform: rotate(20deg); }
.inlay-shapes .s4 { right: 8px; top: 6px; width: 11px; height: 11px; border: 3px solid #29c5ff; transform: rotate(18deg); }
.inlay-top { position: absolute; left: 9px; top: 8px; font: 700 6.5px/1 var(--sans); letter-spacing: .22em; color: #b8b2ff; }
.inlay-title { position: absolute; left: 9px; top: 22px; font: 800 20px/.95 var(--sans); letter-spacing: -.01em; text-shadow: 2px 2px 0 #ff3d7f; }
.inlay-title em { font: italic 400 17px/1 var(--serif); color: #ffe66b; text-shadow: none; }
.inlay-title b { color: #29c5ff; }
.inlay-sub { position: absolute; left: 9px; top: 94px; font: 600 7px/1.35 var(--sans); letter-spacing: .08em; color: #d9d6ff; text-transform: uppercase; }
.inlay-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 4px 7px; background: rgba(0,0,0,.55); font: 600 6.5px/1 var(--sans); letter-spacing: .14em; color: #c9c6e6; }
.inlay-cd { font: 800 8px/1 var(--sans); color: #111; background: #fff; padding: 2px 3px; border-radius: 2px; letter-spacing: .04em; }
.jewel-glare { position: absolute; inset: 0; border-radius: 3px; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.28) 0 18%, rgba(255,255,255,0) 32% 62%, rgba(255,255,255,.1) 70%, rgba(255,255,255,0) 80%); }
.jewel-back { flex: 1 1 320px; min-width: 0; max-width: 620px; padding: 12px 16px 10px; border-radius: 4px; background: #f1ecdf; color: #1d1a26; box-shadow: 0 8px 16px rgba(0,0,0,.4); font: 14px/1.4 var(--serif); }
.back-title { font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #3b2a7a; margin-bottom: 8px; }
.back-tracks { margin: 0; padding-left: 26px; }
.back-tracks li { margin: 0 0 6px; }
.back-tracks li::marker { font: 700 12px var(--mono); color: #8e2b20; }
.bt-t { font-weight: 600; }
.bt-t small { font-weight: 400; color: #5a5566; }
.bt-len { font: 12px var(--mono); color: #5a5566; margin-left: 4px; }
.bt-credit { display: block; font-size: 12px; line-height: 1.35; color: #4a4558; }
.bt-credit a, .jewel-back a { color: #3b2a7a; }
.cd-status { margin-top: 10px; }
.cd-status.warn { color: #f0b3a6; }
@media (max-width: 480px) { .jewel-back { flex-basis: 100%; } }
/* no CD-ROM drive (web/js/openbox.js): a blank 5.25" plate */
.bay.cd-blank { flex: 0 0 auto; }
.bay.cd-blank .blank-plate { min-height: 0; height: 5.7cqw; }
.cd-own { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 8px; }
.cd-own .hint { margin: 0; }
.cdbox-wrap.drag-over { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 8px; }