@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700;800;900&family=Rajdhani:wght@600;700&display=swap");
:root{
  --page-w: max(960px, min(980px, 96vw));
  --fg:#eae8f5; --muted:#bcb7cc; --fg-weak:#d7d3e3;
  --panel:#19151e; --panel-2:#201a27; --border: rgba(255,255,255,.08);
  --font-ui: "M PLUS 1p", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
  --font-num: "Rajdhani", "M PLUS 1p", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --BEGINNER:#2196f3; --NORMAL:#4caf50; --HYPER:#ffc107; --ANOTHER:#f44336;
  --MASTER:#ff9800; --LEGGENDARIA:#9c27b0; --SPECIAL:#e91e63; --LUNATIC:#c71585;
  --UNDEFINED:#6699cc; --REVIVAL:#66ccff; --ETUDE:#9999ff;
}

body{ background:#120e17; color:var(--fg); font-family:var(--font-ui); margin:0; }

/* Header (smaller) */
.course-top{ width:var(--page-w); margin:10px auto 6px; padding:8px 10px; border-radius:12px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(0,0,0,.30); display:flex; align-items:center; gap:10px;
}
.course-top .banner{ width:156px; height:52px; object-fit:contain; image-rendering:auto;
  background:#0f0b10; border-radius:8px; border:1px solid var(--border);
}
.course-top .title{ font-weight:900; font-size: clamp(18px,2.4vw,24px); line-height:1.05; color:var(--fg); }

/* List */
.course-wrap{ width: var(--page-w); margin: 6px auto 8px; }
.course-stages{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }

.stage-row{
  display:grid; grid-template-columns: auto max-content; align-items:center; gap:10px;
  padding:8px 10px; border-radius:12px; background:linear-gradient(180deg,var(--panel),var(--panel-2));
  box-shadow:0 4px 12px rgba(0,0,0,.30); border:1px solid var(--border);
}

.stage-left{ display:grid; grid-template-columns: 200px 1fr; gap:10px; align-items:center; }
.stage-left .banner{ width:200px; height:40px; object-fit:contain; image-rendering:auto;
  background:#0f0b10; border-radius:8px; border:1px solid var(--border);
}
.stage-left .texts .genre{ color:var(--muted); font-size:11.5px; margin-bottom:1px; }
.stage-left .texts .title{ font-weight:800; color:var(--fg); line-height:1.15; font-size:15px; }
.stage-left .texts .artist{ color:var(--muted); font-size:11.5px; margin-top:1px; }
.stage-left .texts .artist a{ color:#9ad9ff; text-decoration:none; }
.stage-left .texts .artist a:hover{ text-decoration:underline; }

.stage-right{ display:flex; align-items:baseline; gap:12px; letter-spacing:.2px; }
.stage-right .diff{ font-family: var(--font-num); text-transform: uppercase; font-weight:700; font-size:18px;
  text-shadow: 0 0 1px currentColor, 0 0 6px rgba(0,0,0,.22);
}
.stage-right .level{ font-family: var(--font-num); font-weight:700; font-size:26px; line-height:1; }
.stage-right .notes{ font-family: var(--font-num); font-weight:600; font-size:12px; color: var(--fg-weak); }

.footer{ width:var(--page-w); margin: 6px auto 16px; padding: 4px 2px 14px; color: var(--muted); }
.footer a{ color:#9ad9ff; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }


/* --- size tweaks --- */
.course-top{ margin:10px auto 6px; padding:10px 12px; }
.course-top .title{ font-size: clamp(19px,2.6vw,25px); }

.stage-row{ padding:9px 12px; }
.stage-right .diff{ font-size:22px; }
.stage-right .level{ font-size:32px; }

/* Stack Notes and BPM vertically to the right, align to right edge */
.stage-right .meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.stage-right .meta .notes, .stage-right .meta .bpm{
  font-family: var(--font-num); font-weight:650; font-size:14px; color: var(--fg-weak);
}


/* ==== Alignment & Rendering Tweaks (v12) ==== */

/* Better glyph rendering (platform-dependent but harmless fallbacks) */
html, body, .course-wrap, .stage-left .texts {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-smooth: always;
}

/* Slightly calmer weights to avoid jagged look on some environments */
.stage-left .texts .title { font-weight: 700; }
.stage-left .texts .genre,
.stage-left .texts .artist { font-weight: 500; letter-spacing: 0.01em; }

/* Right side: use fixed columns so LEVEL starts at the same X across rows */
.stage-right{
  display: grid;
  grid-template-columns: 12ch 3ch auto;  /* DIFF | LV | META */
  align-items: center;
  column-gap: 12px;
}

/* DIFF label gets a fixed box; overflow hidden to avoid pushing */
.stage-right .diff{
  width: 12ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* LEVEL: tabular numbers for consistent width; fixed box (up to 3 digits) */
.stage-right .level{
  width: 3ch;
  font-variant-numeric: tabular-nums;
}

/* META (Notes/BPM) stays stacked and right-aligned */
.stage-right .meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }

/* Optional: remove subtle shadow from small text to keep edges crisp */
.stage-right .diff, .stage-right .level, .stage-left .texts .title { text-shadow: none; }


/* ==== v13: lock right column width & tighten inner grid ==== */

/* Row: left = flexible, right = fixed width so left edge aligns across rows */
.stage-row{
  grid-template-columns: 1fr 300px; /* <- adjust if needed (280–320px推奨) */
}

/* Right block should hug the right edge */
.stage-right{ justify-self: end; }

/* Inside right block: switch to px metrics for stability */
.stage-right{
  display: grid;
  grid-template-columns: 128px 48px 1fr; /* DIFF | LV | META */
  column-gap: 12px;
  align-items: center;
}

/* DIFF label box */
.stage-right .diff{
  width: 128px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* LEVEL box with tabular numbers */
.stage-right .level{
  width: 48px;
  text-align: left;                 /* keep left edges consistent */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "pnum" 0;
}

/* Meta stays stacked and right-aligned */
.stage-right .meta{ align-items: flex-end; }

/* Small rendering tune to reduce jitter on some setups */
.stage-left .texts .title{ line-height: 1.1; -webkit-font-smoothing: antialiased; }
.stage-left .texts .genre, .stage-left .texts .artist{ line-height: 1.1; }


/* ==== v14: hard lock alignment (with !important) ==== */
.stage-row{
  display: grid !important;
  grid-template-columns: 1fr 320px !important; /* right block fixed */
  align-items: center;
}

/* Right block box is fixed width; hug right edge */
.stage-right{
  justify-self: end !important;
  width: 320px !important;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: 140px 56px 1fr !important; /* DIFF | LV | META */
  column-gap: 12px;
  align-items: center;
}

/* DIFF label fixed box */
.stage-right .diff{
  width: 140px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* LEVEL fixed box with tabular numbers */
.stage-right .level{
  width: 56px !important;
  text-align: left !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "pnum" 0;
}

/* META keeps stacking and right-aligned */
.stage-right .meta{
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}

/* Optional rendering tweaks to reduce shimmer */
.stage-left .texts .title{ -webkit-font-smoothing: antialiased; text-shadow: none; }
.stage-left .texts .genre, .stage-left .texts .artist{ text-shadow: none; }