/* MYCOLUX – page, start page, cabinet frame of the Original, touch bar, toasts */
:root {
  --bg: #04060f;
  --ink: #e9fbff;
  --dim: #93a9c2;
  --cyan: #2ee8ff;
  --mag: #ff4fd0;
  --amber: #ffc24a;
  --lime: #8dff5a;
  --glass: rgba(10, 18, 34, 0.62);
  --edge: rgba(120, 220, 255, 0.22);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none;
}
#app { position: fixed; inset: 0; }
.layer { position: absolute; inset: 0; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ start page */
#select {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y;
  background: radial-gradient(ellipse at 50% 110%, rgba(4, 6, 15, 0) 0%, rgba(4, 6, 15, 0.55) 55%, rgba(4, 6, 15, 0.92) 100%),
              linear-gradient(rgba(4, 6, 15, 0.35), rgba(4, 6, 15, 0.75)),
              url("../assets/img/title.jpg") center 35% / cover no-repeat, var(--bg);
}
@media (max-aspect-ratio: 4/5) {
  #select { background-image: radial-gradient(ellipse at 50% 110%, rgba(4, 6, 15, 0) 0%, rgba(4, 6, 15, 0.55) 55%, rgba(4, 6, 15, 0.92) 100%),
              linear-gradient(rgba(4, 6, 15, 0.35), rgba(4, 6, 15, 0.8)), url("../assets/img/title_m.jpg"); }
}
#select canvas.spores { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sel-inner {
  position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(10px, 2.2vh, 26px); padding: max(18px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
#select header { text-align: center; width: 100%; }
#select canvas.logo {
  height: clamp(100px, 26vh, 300px); width: auto; max-width: 92vw; object-fit: contain; aspect-ratio: 1728 / 814; opacity: 0; transition: opacity .8s;
}
#select canvas.logo.ready { opacity: 1; animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .86; } }
.tagline { margin: -0.4em 0 0; color: var(--dim); font-size: clamp(14px, 1.9vw, 18px); letter-spacing: .02em; text-shadow: 0 2px 8px #000; }

.cards { display: flex; gap: clamp(12px, 2.4vw, 28px); justify-content: center; flex-wrap: wrap; width: 100%; }
.card {
  position: relative; width: min(380px, 44vw); border: 1px solid var(--edge); border-radius: 18px; padding: 0 0 16px; cursor: pointer;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: left;
  display: flex; flex-direction: column; overflow: hidden; transition: transform .18s, border-color .18s, box-shadow .18s;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.card .shot { display: block; aspect-ratio: 16 / 10; background: #000 center / cover; overflow: hidden; }
.card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.card .ttl { display: block; padding: 14px 18px 4px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: .12em; }
.card[data-mode=original] .ttl { color: var(--amber); }
.card[data-mode=modern] .ttl { color: var(--cyan); }
.card .sub { display: block; padding: 0 18px; color: var(--dim); font-size: 14px; line-height: 1.45; min-height: 3.6em; }
.card .best { display: block; padding: 10px 18px 0; font-size: 12px; letter-spacing: .18em; color: #c9d8e8; opacity: .75; }
.card:hover, .card.on { transform: translateY(-4px); border-color: rgba(46, 232, 255, 0.7); box-shadow: 0 0 0 1px rgba(46, 232, 255, 0.35), 0 0 38px rgba(46, 232, 255, 0.25), 0 14px 46px rgba(0, 0, 0, 0.6); }
.card[data-mode=original]:hover, .card[data-mode=original].on { border-color: rgba(255, 194, 74, 0.75); box-shadow: 0 0 0 1px rgba(255, 194, 74, 0.35), 0 0 38px rgba(255, 140, 40, 0.25), 0 14px 46px rgba(0, 0, 0, 0.6); }
.card:hover .shot img, .card.on .shot img { transform: scale(1.04); }
.card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.sel-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pill {
  border: 1px solid var(--edge); background: rgba(10, 18, 34, 0.7); border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font-size: 13px; letter-spacing: .12em; color: var(--ink);
}
.pill:hover { border-color: var(--cyan); }
.how { max-width: 760px; background: var(--glass); border: 1px solid var(--edge); border-radius: 14px; padding: 6px 20px; font-size: 14px; line-height: 1.5; color: #cfe2f2; }
footer { text-align: center; max-width: 820px; }
footer p { margin: 4px 0; font-size: 11.5px; color: #8296ad; line-height: 1.45; }
footer .remake { color: #b9c9da; letter-spacing: .08em; }

@media (max-height: 820px) and (min-width: 721px) {
  .card .shot { aspect-ratio: 16 / 8; }
  .card .ttl { padding-top: 10px; }
  .card .sub { font-size: 13px; min-height: 3.3em; }
  .sel-inner { gap: 12px; }
  footer p { font-size: 11px; margin: 2px 0; }
}
@media (max-width: 720px) {
  .card { width: min(420px, 92vw); }
  .card .shot { aspect-ratio: 16 / 8; }
  .card .sub { min-height: 0; }
}

/* ------------------------------------------------------------------ Original: monitor and cabinet sides */
#orig-wrap { display: flex; align-items: center; justify-content: center; background: #000; }
.cab-monitor { position: relative; flex: none; background: #000; }
.cab-monitor canvas { width: 100%; height: 100%; display: block; image-rendering: auto; }
.cab-monitor::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 62%, rgba(0,0,0,0.38) 100%);
}
.cab-side { flex: none; height: 100%; position: relative; overflow: hidden; }
.cab-side .art { position: absolute; inset: 0; background: center / cover no-repeat; filter: saturate(1.05) brightness(.85); }
.cab-side.left .art { background-image: url("../assets/img/bezel_left.jpg"); }
.cab-side.right .art { background-image: url("../assets/img/bezel_right.jpg"); }
.cab-side::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cab-side.left::after { background: linear-gradient(90deg, rgba(0,0,0,0.15), rgba(0,0,0,0.85)); }
.cab-side.right::after { background: linear-gradient(270deg, rgba(0,0,0,0.15), rgba(0,0,0,0.85)); }
#orig-wrap.no-bezel .cab-side { display: none; }

/* ------------------------------------------------------------------ touch bar, toast, fade, loading */
#touchbar { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); display: flex; gap: 8px; z-index: 5; }
#touchbar button {
  background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; color: #fff;
  padding: 8px 12px; font-size: 13px; letter-spacing: .1em;
}
#toast {
  position: absolute; left: 50%; top: 12%; transform: translate(-50%, -10px); opacity: 0; transition: opacity .2s, transform .2s;
  background: rgba(4, 8, 18, 0.85); border: 1px solid var(--edge); border-radius: 999px; padding: 8px 18px; font-size: 13px; letter-spacing: .15em;
  pointer-events: none; z-index: 20;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 30; }
#modern-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; letter-spacing: .3em; color: var(--cyan); background: var(--bg); z-index: 25; }
#modern-loading.fail { letter-spacing: normal; padding: 16px; }
#modern-loading.fail > div { max-width: 560px; text-align: center; background: var(--glass); border: 1px solid var(--edge); border-radius: 18px; padding: 22px 24px; }
#modern-loading.fail h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: .08em; color: var(--cyan); }
#modern-loading.fail .why { color: #d6e6f4; font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
#modern-loading.fail .err { color: #7f94ab; font-size: 12px; margin: 0 0 16px; word-break: break-word; }
#modern-loading.fail .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#modern-loading.fail button { border: 1px solid rgba(46, 232, 255, 0.6); background: rgba(46, 232, 255, 0.12); color: #fff; border-radius: 12px; padding: 10px 18px; letter-spacing: .14em; cursor: pointer; }
#gl { width: 100%; height: 100%; display: block; }