/* Foldman CD D-84: the playable CD player (partials/discman.html, js/dm-player.js).
   Used on the home page and the Foldman CD page. Finish colours come from the app's HERITAGE body. */
.dmp{
  --body:#CDCFD3;--body-lo:#AEB1B7;--edge:#7C8088;--panel:#9A9EA6;--print:#26282C;
  --lcd:#B2BDA9;--lcd-ink:#1C2019;--accent:#FF5A00;
}
.dmp[data-finish="black"]{--body:#232427;--body-lo:#141517;--edge:#0A0A0B;--panel:#3A3C40;--print:#C9CBD0}
.dmp[data-finish="champagne"]{--body:#DCCDAE;--body-lo:#C6B48F;--edge:#8E7B57;--panel:#B59F75;--print:#3B2F1C}

.dmp-unit{display:flex;flex-wrap:wrap;gap:26px 28px;align-items:flex-start}
.dmp-body{
  position:relative;flex:0 1 380px;min-width:0;max-width:380px;
  display:grid;gap:14px;padding:16px 18px 18px;border-radius:36px 36px 30px 30px;
  background:linear-gradient(155deg,var(--body) 0%,var(--body-lo) 100%);
  border:3px solid #000;box-shadow:7px 9px 0 #000,inset 0 2px 0 rgba(255,255,255,.45),inset 0 -5px 0 var(--edge);
  transition:background .3s;
}
.dmp-print{display:flex;justify-content:space-between;align-items:baseline;color:var(--print);padding:0 8px;line-height:1}
.dmp-name{font:400 1.35rem/1 var(--marker);transform:rotate(-2deg)}
.dmp-code{font:700 .85rem/1 var(--type);letter-spacing:.12em;border:2px solid currentColor;border-radius:4px;padding:3px 6px 2px}

/* the window: tray, disc, smoked lid */
.dmp-well{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#2A2C30 0 60%,#141517 100%);border:3px solid #000;box-shadow:0 0 0 5px var(--panel),0 0 0 8px #000}
.dmp-disc{position:absolute;inset:4.5%;border-radius:50%;will-change:transform;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.dmp-disc svg{display:block;width:100%;height:100%;transform:rotate(var(--spin,0deg))}
.dmp-lid{
  position:absolute;inset:-1px;border-radius:50%;border:3px solid #000;transform-origin:50% 0;
  background:
    linear-gradient(118deg,transparent 30%,rgba(255,255,255,.26) 38%,transparent 47%),
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.22),transparent 42%),
    radial-gradient(circle,rgba(36,44,56,.22),rgba(12,15,20,.5));
  display:flex;align-items:flex-end;justify-content:center;
  transition:transform .55s cubic-bezier(.3,1.35,.5,1),opacity .55s;
}
.dmp-lid span{font:700 .62rem/1 var(--type);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:9%}
.dmp.open .dmp-lid{transform:perspective(700px) rotateX(66deg) translateY(-6%);opacity:.55}
.dmp.open .dmp-disc{transform:translateY(-2%) scale(1.03)}

/* LCD and volume */
.dmp-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.dmp-lcd{position:relative;background:linear-gradient(var(--lcd),#C3CDBA);border:3px solid #000;border-radius:9px;box-shadow:inset 0 3px 0 rgba(0,0,0,.18);padding:5px 8px 4px}
.dmp-seg{display:block;width:100%;height:auto}
.dmp-seg .s{fill:rgba(0,0,0,.07)}
.dmp-seg .s.on{fill:var(--lcd-ink)}
.dmp-seg text{font:700 5.5px var(--type);fill:#5F6A58;letter-spacing:.08em}
.dmp-ind{position:absolute;right:9px;top:4px;font:700 .62rem/1 var(--type);color:var(--lcd-ink);letter-spacing:.06em}
.dmp-vol{display:grid;justify-items:center;gap:2px;color:var(--print);font:700 .7rem/1 var(--type);letter-spacing:.12em}
.dmp-vol input{width:86px;accent-color:#000;margin:0}

/* flat tab keys along the front edge */
.dmp-keys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.dmp-key{
  display:grid;justify-items:center;gap:3px;padding:9px 0 7px;min-height:52px;cursor:pointer;color:#000;
  background:linear-gradient(#F4F5F3,#D0D3D7);border:2.5px solid #000;border-radius:7px 7px 13px 13px;
  box-shadow:0 4px 0 #000;transition:transform .06s,box-shadow .06s;touch-action:none;user-select:none;-webkit-user-select:none;
}
.dmp-key b{font:700 1rem/1 var(--type);letter-spacing:-.04em}
.dmp-key small{font:700 .56rem/1 var(--type);letter-spacing:.08em}
.dmp-key.play{background:linear-gradient(#FF7E3A,var(--accent));color:#fff}
.dmp-key:active,.dmp-key.down{transform:translateY(3px);box-shadow:0 1px 0 #000}
.dmp-key[data-k="rep"][data-rep="1"],.dmp-key[data-k="rep"][data-rep="2"]{background:linear-gradient(#FFF97A,var(--yellow))}

/* the disc's track list, beside the player */
.dmp-side{flex:1 1 200px;min-width:0;max-width:340px}
.dmp-list-h{font:400 1.3rem/1.15 var(--marker);margin:2px 0 8px;transform:rotate(-1.5deg)}
.dmp-list{list-style:none;margin:0 0 18px;padding:0;border-top:2px solid #000}
.dmp-tr{
  width:100%;display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;gap:6px;align-items:baseline;text-align:left;
  background:none;border:0;border-bottom:1.5px dashed rgba(0,0,0,.35);padding:8px 2px;font:400 .98rem/1.3 var(--type);color:#000;cursor:pointer;
}
.dmp-tr .n{font-weight:700}
.dmp-tr .l{font-size:.86rem;color:var(--ink2)}
.dmp-tr:hover{background:rgba(242,239,46,.45)}
.dmp-tr[aria-current="true"]{font-weight:700;background:var(--yellow)}
.dmp-tr[aria-current="true"] .n::before{content:"▶";font-size:.7em;margin-right:2px}
.dmp-finish{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.dmp-finish button{display:inline-flex;align-items:center;gap:7px;font:700 .82rem/1 var(--type);padding:7px 10px;background:var(--sheet);border:2px solid #000;border-radius:999px;cursor:pointer}
.dmp-finish button[aria-pressed="true"]{background:#000;color:#fff}
.dmp-finish i{width:14px;height:14px;border-radius:50%;border:1.5px solid #000;background:#CDCFD3}
.dmp-finish [data-f="black"] i{background:#232427}
.dmp-finish [data-f="champagne"] i{background:#DCCDAE}
.dmp-notes{list-style:none;margin:0;padding:0;display:grid;gap:8px;font:400 1.02rem/1.25 var(--marker);color:var(--red)}
.dmp-notes li::before{content:"↖ "}
.dmp-help{margin:30px 0 0;font-size:.9rem;color:var(--ink2);max-width:56ch}

:lang(th) .dmp-notes,:lang(th) .dmp-list-h{line-height:1.45}
:lang(th) .dmp-lid span{letter-spacing:.1em}

@media (max-width:640px){
  .dmp-body{flex-basis:100%;max-width:400px;margin:0 auto}
  .dmp-side{max-width:none}
  .dmp-vol input{width:70px}
}
@media (prefers-reduced-motion:reduce){
  .dmp-lid,.dmp-disc{transition:none}
}