`src/styles.css`

106 lines
:root{
  --bg:#f7efe6; --surface:#fff9f1; --text:#3a2c22; --muted:#a08c7a;
  --accent:#c65f38; --accent2:#e0a458;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(120% 120% at 50% 0%,#20222e 0%,#12131a 55%,#0a0a0f 100%);
  color:var(--text);
  font-family:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  display:flex;align-items:center;justify-content:center;
  min-height:100%;padding:20px;overflow:hidden;
}
#wrap{
  position:relative;width:960px;max-width:100%;
  aspect-ratio:960/540;border-radius:14px;overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(224,164,88,.25);
  background:#1a1720;
}
canvas{display:block;width:100%;height:100%;image-rendering:auto}

/* overlays */
.overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(160deg,rgba(18,15,22,.86),rgba(30,20,14,.92));
  backdrop-filter:blur(2px);gap:16px;padding:32px;
  color:var(--bg);z-index:10;
}
.overlay.hide{display:none}
.kicker{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent2);font-weight:600;
  animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;
}
h1{
  font-family:'Playfair Display',Georgia,'Bodoni MT',serif;
  font-weight:800;font-size:clamp(38px,7vw,67px);line-height:.98;
  color:var(--surface);letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(224,164,88,.25);
  animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;animation-delay:.09s;
}
h1 .em{color:var(--accent2);font-style:italic}
.sub{
  max-width:520px;color:#e8dfd2;font-size:16px;line-height:1.5;
  animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;animation-delay:.18s;
}
.btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;animation-delay:.27s;}
button.play{
  font-family:inherit;cursor:pointer;border:none;border-radius:12px;
  padding:15px 26px;font-size:15px;font-weight:700;letter-spacing:.02em;
  color:#fff;background:linear-gradient(135deg,var(--accent),#a8471f);
  box-shadow:0 8px 24px rgba(198,95,56,.4);transition:transform .16s ease,box-shadow .16s ease;
}
button.play.alt{background:linear-gradient(135deg,#5c7d8f,#38505d);box-shadow:0 8px 24px rgba(75,107,122,.4)}
button.play.train{background:linear-gradient(135deg,#6a8f5c,#3d5d38);box-shadow:0 8px 24px rgba(106,143,92,.4)}
button.play:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(198,95,56,.5)}
button.play.alt:hover{box-shadow:0 16px 40px rgba(75,107,122,.5)}
button.play.train:hover{box-shadow:0 16px 40px rgba(106,143,92,.5)}

.diffrow{display:flex;align-items:center;gap:10px;font-size:13px;color:#e0d7c9;
  animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;animation-delay:.22s;}
.diffrow label{letter-spacing:.12em;text-transform:uppercase;font-size:11px;color:var(--accent2);font-weight:700}
select#difficulty{
  font-family:inherit;font-size:13px;color:#f2e9dd;background:#2a2530;
  border:1px solid #4a4150;border-radius:8px;padding:7px 12px;cursor:pointer;
}

.controls{
  display:flex;gap:32px;flex-wrap:wrap;justify-content:center;margin-top:6px;
  animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;animation-delay:.36s;
}
.ctrlcard{
  background:rgba(255,249,241,.06);border:1px solid rgba(224,164,88,.22);
  border-radius:12px;padding:14px 18px;min-width:200px;text-align:left;
}
.ctrlcard h4{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent2);margin-bottom:8px}
.ctrlcard .row{display:flex;justify-content:space-between;font-size:13px;color:#e0d7c9;margin:3px 0;gap:12px}
kbd{
  background:#2a2530;border:1px solid #4a4150;border-bottom-width:2px;border-radius:5px;
  padding:1px 7px;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#f2e9dd;
}
.result-name{font-family:'Playfair Display',Georgia,serif;font-style:italic}
.foot{position:absolute;bottom:12px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* pause overlay is lighter */
#pause{background:linear-gradient(160deg,rgba(18,15,22,.72),rgba(30,20,14,.8))}

/* ---- touch controls (mobile only) ---- */
#touch{
  position:absolute;inset:auto 0 0 0;z-index:8;display:none;
  justify-content:space-between;padding:0 14px 14px;pointer-events:none;
  user-select:none;-webkit-user-select:none;touch-action:none;
}
#touch .pad,#touch .acts{display:flex;gap:12px;pointer-events:auto}
#touch button{
  width:58px;height:58px;border-radius:50%;border:1px solid rgba(224,164,88,.4);
  background:rgba(30,25,32,.55);color:#f2e9dd;font-size:20px;font-weight:800;
  backdrop-filter:blur(3px);cursor:pointer;
}
#touch button.down{background:rgba(198,95,56,.75);transform:scale(.94)}
#touch button.sup{background:rgba(224,161,42,.35);font-size:15px}
@media (hover:none) and (pointer:coarse){ #touch{display:flex} .controls{display:none} }