:root {
  color-scheme: dark;
  --bg: #090b10;
  --surface: #11151d;
  --surface-2: #171c26;
  --surface-3: #202633;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f7f8fb;
  --muted: #9aa4b5;
  --yellow: #f5c34d;
  --teal: #63ddd0;
  --purple: #a68bf2;
  --red: #ff7588;
  --green: #64d9a2;
  --radius: 26px;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 12% -10%, rgba(99, 221, 208, 0.10), transparent 27%),
    radial-gradient(circle at 92% 0%, rgba(166, 139, 242, 0.09), transparent 25%),
    linear-gradient(180deg, #090b10 0%, #0b0e14 58%, #090b10 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }
.wrap { width: min(calc(100% - 32px), 1180px); margin-inline: auto; }

.skip {
  position: fixed;
  z-index: 100;
  left: 14px;
  top: 12px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 10px;
  color: #171300;
  background: var(--yellow);
  font-weight: 850;
}
.skip:focus { transform: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(9,11,16,.82);
  backdrop-filter: blur(18px) saturate(135%);
}
.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -.035em;
}
.brand-icon {
  width: 38px;
  height: 38px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: end;
  gap: 3px;
  border-radius: 12px;
  background: linear-gradient(145deg,#f8cf65,#e99d1c);
  box-shadow: 0 10px 30px rgba(245,195,77,.16);
}
.brand-icon i { display:block; border-radius:99px; background:#201805; }
.brand-icon i:nth-child(1) { height:45%; }
.brand-icon i:nth-child(2) { height:100%; }
.brand-icon i:nth-child(3) { height:70%; }
.header-link {
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 760;
}
.header-link:hover { color: var(--text); }

.view { display:none; }
.view.active { display:block; animation:view-in .2s ease; }
@keyframes view-in { from { opacity:0; transform:translateY(5px); } }

.home-layout { padding: 52px 0 90px; }
.library-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}
.library-head h1 {
  margin:0;
  font-size:clamp(2.5rem,5vw,4.4rem);
  line-height:.98;
  letter-spacing:-.065em;
}
.library-head p {
  margin:0 0 5px;
  color:var(--muted);
  font-size:.9rem;
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.card {
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:28px;
  color:var(--text);
  text-align:left;
  background:linear-gradient(180deg,#141923,#10141c);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card:hover {
  transform:translateY(-6px);
  border-color:var(--line-strong);
  box-shadow:0 34px 90px rgba(0,0,0,.48);
}
.card:active { transform:translateY(-2px); }
.status {
  position:absolute;
  right:16px;
  top:16px;
  z-index:4;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  color:#fff;
  background:rgba(8,11,16,.78);
  backdrop-filter:blur(12px);
  font-size:.75rem;
  font-weight:850;
}
.cover {
  position:relative;
  width:100%;
  aspect-ratio:1.32/1;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.cover::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:36%;
  background:linear-gradient(transparent,rgba(0,0,0,.22));
  pointer-events:none;
}
.chrono .cover {
  background:
    radial-gradient(circle at 50% 48%,rgba(245,195,77,.25),transparent 34%),
    radial-gradient(circle at 50% 48%,#2a2313 0,#171712 42%,#0e1118 78%);
}
.odd .cover {
  background:
    radial-gradient(circle at 50% 48%,rgba(166,139,242,.19),transparent 36%),
    linear-gradient(145deg,#1a1626,#10141c 66%);
}
.pulse .cover {
  background:
    radial-gradient(circle at 50% 48%,rgba(99,221,208,.22),transparent 38%),
    linear-gradient(145deg,#102026,#0f141d 66%);
}
.cover-medallion {
  position:relative;
  z-index:1;
  width:58%;
  max-width:190px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid rgba(245,195,77,.28);
  border-radius:50%;
  background:radial-gradient(circle,#1f1b12,#0b0e14 72%);
  box-shadow:0 24px 55px rgba(0,0,0,.48),0 0 0 18px rgba(245,195,77,.025);
}
.cover-hourglass {
  position:relative;
  width:86px;
  height:116px;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.5));
}
.cover-hourglass > i {
  position:absolute;
  left:5%;
  right:5%;
  height:15%;
  border-radius:99px;
  background:linear-gradient(180deg,#fff4b0,#d99b1e);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.55),0 1px 0 rgba(0,0,0,.45);
}
.cover-hourglass > i:first-child { top:0; }
.cover-hourglass > i:last-child { bottom:0; }
.cover-hourglass > b {
  width:66%;
  height:74%;
  display:block;
  clip-path:polygon(7% 0,93% 0,64% 47%,93% 100%,7% 100%,36% 47%);
  background:linear-gradient(180deg,#fff6c3 0 28%,#6f541b 28% 47%,#f0bc3d 47% 67%,#fff6c3 67% 100%);
  outline:3px solid rgba(255,244,176,.65);
  outline-offset:-2px;
}
.cover-grid {
  position:relative;
  z-index:1;
  width:148px;
  height:148px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:10px;
  transform:rotate(-3deg);
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.35));
}
.cover-grid i {
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
  background:linear-gradient(145deg,#eee9ff,#9d82eb);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.35);
}
.cover-grid i:nth-child(8) {
  border-radius:50%;
  background:linear-gradient(145deg,#ffb2c1,#ff5f7d);
  transform:rotate(12deg) scale(.83);
}
.cover-pulse {
  position:relative;
  z-index:1;
  width:190px;
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:22px;
  border:1px solid rgba(99,221,208,.24);
  border-radius:30px;
  background:rgba(6,12,17,.58);
  box-shadow:0 24px 55px rgba(0,0,0,.42),0 0 0 18px rgba(99,221,208,.025);
}
.cover-pulse i {
  width:13px;
  border-radius:99px;
  background:linear-gradient(180deg,#cafff8,#38bbaa);
  box-shadow:0 0 18px rgba(99,221,208,.25);
}
.cover-pulse i:nth-child(1) { height:28px; }
.cover-pulse i:nth-child(2) { height:66px; }
.cover-pulse i:nth-child(3) { height:104px; }
.cover-pulse i:nth-child(4) { height:66px; }
.cover-pulse i:nth-child(5) { height:28px; }
.card-info {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:19px 20px 21px;
}
.card-info > span { min-width:0; }
.card-info strong {
  display:block;
  font-size:1.25rem;
  letter-spacing:-.03em;
}
.card-info small {
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:.78rem;
}
.card-arrow {
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:13px;
  color:#c4cad5;
  background:rgba(255,255,255,.035);
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.card:hover .card-arrow { transform:translate(2px,-2px); background:rgba(255,255,255,.08); color:#fff; }

.game-wrap { padding:38px 0 80px; }
.gamebar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.back,.actions button,.dialog-actions button {
  min-height:44px;
  border:1px solid var(--line);
  border-radius:13px;
  padding:0 16px;
  color:var(--text);
  background:rgba(255,255,255,.045);
  font-weight:820;
  cursor:pointer;
  transition:background .15s ease,transform .15s ease,border-color .15s ease;
}
.back:hover,.actions button:hover,.dialog-actions button:hover { background:rgba(255,255,255,.085); border-color:var(--line-strong); }
.back:active,.actions button:active,.dialog-actions button:active { transform:scale(.98); }
.streak { color:var(--muted); font-size:.86rem; }
.game-head {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  padding:23px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(145deg,#151a24,#10141c);
  box-shadow:var(--shadow);
}
.game-emblem {
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:21px;
  color:#15110a;
  font-size:38px;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.3),0 12px 28px rgba(0,0,0,.28);
}
.game-head h1 {
  margin:0;
  font-size:clamp(2rem,5vw,3.25rem);
  line-height:1;
  letter-spacing:-.055em;
}
.game-head p,.hint { color:var(--muted); line-height:1.55; }
.game-head p { margin:6px 0 0; }
.daily-no { color:var(--muted); font-size:.86rem; font-weight:820; }
.metrics { display:flex; flex-wrap:wrap; gap:9px; margin:14px 0; }
.metrics span {
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#b2bac8;
  background:rgba(255,255,255,.035);
  font-size:.78rem;
  font-weight:760;
}
#stage {
  min-height:260px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(145deg,#131821,#0f131b);
  box-shadow:var(--shadow);
}
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.actions .primary,.dialog-actions #copy { color:#171300; background:var(--yellow); border-color:transparent; }
.hint { margin:13px 2px 0; font-size:.86rem; }

.timeline { display:grid; gap:10px; }
.event {
  display:grid;
  grid-template-columns:28px 1fr auto;
  align-items:center;
  gap:11px;
  min-height:70px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-2);
  cursor:grab;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,opacity .14s ease;
}
.event:hover { border-color:var(--line-strong); }
.event.dragging { opacity:.32; transform:scale(.985); }
.event.drop-before { box-shadow:0 -4px 0 var(--yellow); }
.event.drop-after { box-shadow:0 4px 0 var(--yellow); }
.event.correct { border-color:rgba(100,217,162,.55); background:rgba(100,217,162,.09); }
.event.wrong { border-color:rgba(255,117,136,.55); background:rgba(255,117,136,.09); }
.handle { color:#7f899b; font-size:22px; }
.event small { color:var(--muted); }
.event-controls { display:flex; gap:6px; }
.event-controls button {
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:11px;
  color:#fff;
  background:rgba(255,255,255,.045);
  cursor:pointer;
}
.event-controls button:hover:not(:disabled) { background:rgba(255,255,255,.1); }
.event-controls button:disabled { opacity:.28; cursor:default; }

.odd-grid {
  display:grid;
  gap:10px;
  width:min(100%,560px);
  margin:auto;
}
.odd-tile {
  aspect-ratio:1;
  min-width:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  display:grid;
  place-items:center;
  color:#d9d0ff;
  background:#202532;
  cursor:pointer;
  transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.odd-tile:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.25); background:#282e3d; }
.odd-tile:active { transform:scale(.96); }
.odd-tile svg { width:68%; height:68%; overflow:visible; }
.odd-tile.bad { animation:tile-error .28s ease; border-color:rgba(255,117,136,.7); background:rgba(255,117,136,.14); }
.odd-tile.good { border-color:rgba(100,217,162,.78); background:rgba(100,217,162,.15); box-shadow:0 0 0 4px rgba(100,217,162,.08); }
@keyframes tile-error { 35% { transform:translateX(-4px); } 70% { transform:translateX(4px); } }

.pulse-board {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:min(100%,540px);
  margin:auto;
}
.pad {
  min-height:145px;
  border:2px solid rgba(255,255,255,.12);
  border-radius:25px;
  cursor:pointer;
  opacity:.86;
  transition:transform .12s ease,opacity .12s ease,filter .12s ease,box-shadow .12s ease;
}
.pad:nth-child(1) { background:#f2c34d; }
.pad:nth-child(2) { background:#63ddd0; }
.pad:nth-child(3) { background:#a68bf2; }
.pad:nth-child(4) { background:#ff7588; }
.pad:hover:not(:disabled) { opacity:1; filter:brightness(1.08); }
.pad.active { opacity:1; transform:scale(.95); filter:brightness(1.3); box-shadow:0 0 0 5px rgba(255,255,255,.85),0 0 35px rgba(255,255,255,.26); }
.pad:disabled { cursor:default; }
.progress { display:flex; justify-content:center; gap:7px; margin-top:16px; }
.progress i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); }
.progress i.done { background:var(--green); box-shadow:0 0 12px rgba(100,217,162,.38); }

dialog {
  width:min(calc(100% - 28px),520px);
  padding:29px;
  border:1px solid var(--line);
  border-radius:28px;
  color:var(--text);
  background:#131821;
  box-shadow:0 34px 110px rgba(0,0,0,.76);
}
dialog::backdrop { background:rgba(4,6,10,.76); backdrop-filter:blur(9px); }
dialog .close {
  position:absolute;
  right:15px;
  top:12px;
  width:44px;
  height:44px;
  border:0;
  color:var(--muted);
  background:transparent;
  font-size:30px;
  cursor:pointer;
}
dialog p { margin:0; color:var(--muted); }
dialog h2 { margin:7px 0; font-size:2rem; }
.score { display:block; color:var(--yellow); font-size:4rem; letter-spacing:-.065em; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0; }
.result-stats span { padding:12px; border:1px solid var(--line); border-radius:13px; text-align:center; background:rgba(255,255,255,.025); }
.result-stats b { display:block; font-size:1.15rem; }
.result-stats small { color:var(--muted); }
pre { padding:14px; border-radius:13px; color:#aeb7c5; background:#0b0f16; white-space:pre-wrap; }
.dialog-actions { display:flex; gap:9px; }
.toast {
  position:fixed;
  z-index:80;
  left:50%;
  bottom:22px;
  transform:translate(-50%,20px);
  opacity:0;
  padding:11px 15px;
  border:1px solid var(--line);
  border-radius:12px;
  color:#fff;
  background:#1a2130;
  transition:.18s;
  pointer-events:none;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

footer { border-top:1px solid var(--line); }
.footer {
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-size:.82rem;
}
.footer nav { display:flex; gap:16px; }
.footer a { color:var(--muted); text-decoration:none; }
.footer a:hover { color:#fff; text-decoration:underline; }

:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }

@media (max-width:850px) {
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pulse { grid-column:span 2; max-width:calc(50% - 10px); }
}
@media (max-width:650px) {
  .wrap { width:min(calc(100% - 20px),1180px); }
  .header-inner { min-height:66px; }
  .header-link { display:none; }
  .home-layout { padding:34px 0 60px; }
  .library-head { align-items:flex-start; flex-direction:column; gap:7px; }
  .cards { grid-template-columns:1fr; }
  .pulse { grid-column:auto; max-width:none; }
  .cover { aspect-ratio:1.48/1; }
  .game-head { grid-template-columns:auto 1fr; padding:18px; }
  .daily-no { grid-column:1/-1; }
  .game-emblem { width:60px; height:60px; font-size:32px; }
  #stage { padding:14px; }
  .event { grid-template-columns:22px 1fr; }
  .event-controls { grid-column:2; }
  .event-controls button { width:44px; height:44px; }
  .odd-grid { gap:7px; }
  .odd-tile { border-radius:12px; }
  .pulse-board .pad { min-height:110px; }
  .actions,.dialog-actions { flex-direction:column; }
  .result-stats { grid-template-columns:1fr; }
  .footer { align-items:flex-start; flex-direction:column; justify-content:center; padding:18px 0; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}