/* ===== パワハラ王 v2 デザインシステム：ダーク×ネオン・ミニマル ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Oswald:wght@500;600;700&display=swap');
:root{
  --p:#a06bff;       /* 主役：パープル */
  --p-d:#6d3bd6;
  --p-soft:rgba(160,107,255,.14);
  --gold:#ffd24a;    /* 差し色：決定/強調のみ */
  --ink:#ece7ff;     /* 文字 */
  --mut:#9b93c4;     /* 補助文字 */
  --bg0:#0c0718;     /* 背景最暗 */
  --bg1:#150d28;
  --card:rgba(255,255,255,.045);
  --line:rgba(160,107,255,.22);
  --r:18px;          /* 統一角丸 */
  --gap:16px;
  --sh1:0 2px 8px rgba(0,0,0,.3);
  --sh2:0 8px 30px rgba(0,0,0,.45);
  --shp:0 8px 36px rgba(109,59,214,.35);
}
*{box-sizing:border-box}
body.ux{margin:0;color:var(--ink);font-family:'Noto Sans JP',sans-serif;line-height:1.7;
  background:
    radial-gradient(900px 500px at 50% -10%,rgba(160,107,255,.22),transparent 60%),
    linear-gradient(180deg,#120a24,#0c0718 60%);
  background-attachment:fixed;background-color:var(--bg0);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* うっすら粒状ノイズ（高級感） */
body.ux::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.ux>*{position:relative;z-index:1}
.ux a{text-decoration:none;color:inherit}
.ux .hidden{display:none}
.uxwrap{max-width:560px;margin:0 auto;padding:0 20px 90px}
.h-eng{font-family:'Oswald',sans-serif;letter-spacing:.12em;text-transform:uppercase}
/* ヘッダー：薄いガラス */
.uxhead{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;
  background:rgba(12,7,24,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.uxhead .lg{font-weight:900;font-size:15px;letter-spacing:.02em;color:#fff;display:flex;align-items:center;gap:7px}
.uxhead .lg .dot{width:8px;height:8px;border-radius:50%;background:var(--p);box-shadow:0 0 10px var(--p)}
.uxhead .nav a{margin-left:6px;font-size:12px;color:var(--mut);padding:7px 13px;border-radius:99px;border:1px solid var(--line)}
.uxhead .nav a:hover{color:#fff;border-color:var(--p)}
/* ガラスカード共通 */
.glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh2);backdrop-filter:blur(6px)}
/* セクション見出し */
.sec-label{font-family:'Oswald',sans-serif;letter-spacing:.22em;font-size:12px;color:var(--p);text-transform:uppercase;text-align:center;margin:0 0 6px}
.sec-title{text-align:center;font-weight:900;font-size:22px;color:#fff;margin:0 0 26px;letter-spacing:.02em}
/* ボタン：階層を明確に。primary=gold(決定のみ)/secondary=purple outline/ghost */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font-weight:900;font-size:16px;
  padding:16px;border-radius:14px;border:1px solid transparent;cursor:pointer;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s,background .15s;letter-spacing:.02em}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,#ffe07a,var(--gold));color:#1a1300;box-shadow:0 6px 22px rgba(255,210,74,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,210,74,.45)}
.btn-purple{background:linear-gradient(180deg,var(--p),var(--p-d));color:#fff;box-shadow:var(--shp)}
.btn-purple:hover{transform:translateY(-2px)}
.btn-outline{background:transparent;border:1px solid var(--p);color:var(--ink)}
.btn-outline:hover{background:var(--p-soft)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--mut)}
.uxfoot{text-align:center;padding:28px 20px;font-size:12px;color:var(--mut);border-top:1px solid var(--line);letter-spacing:.02em}
/* ===== TITLE（index） ===== */
.hero2{position:relative;margin:24px auto 0;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh2)}
.hero2 img{width:100%;display:block}
.hero2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,7,24,.85));pointer-events:none}
.title-meta{text-align:center;margin:22px 0 0}
.title-meta .cat{font-family:'Oswald',sans-serif;letter-spacing:.2em;font-size:12px;color:var(--p)}
.title-meta h1{font-size:clamp(20px,5.2vw,26px);font-weight:900;color:#fff;margin:8px 0 0;line-height:1.4}
.start-area{margin:30px 0 0}
.start-area .hint{text-align:center;color:var(--mut);font-size:12px;margin-top:14px;letter-spacing:.18em;font-family:'Oswald',sans-serif}
.note{text-align:center;color:var(--mut);font-size:11px;line-height:1.9;margin:34px 0 0;opacity:.8}
/* ===== STAGE SELECT（difficulty） ===== */
.stages2{display:grid;gap:14px}
.stage2{display:flex;align-items:center;gap:16px;padding:18px;border-radius:var(--r);cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);
  box-shadow:var(--sh1);transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s,box-shadow .18s}
.stage2:hover{transform:translateY(-3px);border-color:var(--p);box-shadow:var(--shp)}
.stage2 .lv-badge{flex:0 0 auto;width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:900;color:#fff;position:relative}
.stage2.l1 .lv-badge{background:linear-gradient(150deg,#2e8f63,#1c6b48)}
.stage2.l2 .lv-badge{background:linear-gradient(150deg,#3a72c4,#274f8c)}
.stage2.l3 .lv-badge{background:linear-gradient(150deg,#c98a2e,#9c6418)}
.stage2.l4 .lv-badge{background:linear-gradient(150deg,#c43a55,#8c2438)}
.stage2 .body{flex:1;min-width:0}
.stage2 .nm{font-weight:900;font-size:17px;color:#fff}
.stage2 .meta{font-size:12px;color:var(--mut);margin-top:2px;letter-spacing:.04em}
.stage2 .stars{color:var(--gold);font-size:11px;letter-spacing:2px;margin-top:3px}
.stage2 .chev{flex:0 0 auto;color:var(--p);font-size:20px}
.howto2{margin-top:26px;padding:20px;border-radius:var(--r);background:var(--p-soft);border:1px solid var(--line)}
.howto2 h3{font-family:'Oswald',sans-serif;letter-spacing:.12em;color:var(--p);font-size:13px;margin:0 0 10px;text-transform:uppercase}
.howto2 p{margin:0;font-size:13px;color:var(--ink);line-height:1.9}
.howto2 b{color:var(--gold)}
/* ===== PLAY ===== */
.hud2{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
.hud2 .qc{font-family:'Oswald',sans-serif;font-size:15px;color:var(--mut);letter-spacing:.1em}
.hud2 .qc b{color:#fff;font-size:20px}
.hud2 .dn{font-size:12px;color:var(--p);border:1px solid var(--p);padding:5px 14px;border-radius:99px}
.gbar2{height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin:12px 0 0}
.gbar2 i{display:block;height:100%;background:linear-gradient(90deg,var(--p),var(--gold));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.scene2{margin:22px 0;padding:26px 22px;border-radius:var(--r);position:relative;
  background:linear-gradient(180deg,rgba(160,107,255,.12),rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:var(--sh2)}
.scene2 .htag{display:inline-block;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.12em;color:var(--p);border:1px solid var(--p);padding:3px 12px;border-radius:99px;margin-bottom:14px}
.scene2 .txt{font-size:1.08rem;font-weight:700;color:#fff;line-height:1.85}
.pick2{text-align:center;color:var(--mut);font-size:12px;letter-spacing:.1em;margin:0 0 14px}
.choices2{display:grid;gap:11px}
.choice2{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:.98rem;
  transition:transform .12s,border-color .12s,background .12s}
.choice2:hover{border-color:var(--p);background:var(--p-soft);transform:translateX(2px)}
.choice2.selected{border-color:var(--gold);background:rgba(255,210,74,.12)}
.choice2 .mk{flex:0 0 auto;width:30px;height:30px;line-height:30px;text-align:center;border-radius:9px;background:var(--p-soft);border:1px solid var(--p);color:var(--p);font-family:'Oswald',sans-serif;font-weight:700}
.loadbox2{text-align:center;padding:60px 20px;color:var(--mut)}
.loadbox2 .spin{font-size:2.4rem;display:inline-block;animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ===== RESULT ===== */
.r-eyebrow{text-align:center;font-family:'Oswald',sans-serif;letter-spacing:.24em;color:var(--p);font-size:12px;margin:18px 0 0}
.score2{text-align:center;margin:10px 0 0}
.score2 .big{font-family:'Oswald',sans-serif;font-weight:700;font-size:5.4rem;line-height:1;color:#fff;text-shadow:0 0 40px rgba(160,107,255,.6)}
.score2 .big .of{font-size:1.4rem;color:var(--mut);margin-left:4px}
.score2 .lbl{color:var(--mut);font-size:13px;letter-spacing:.08em}
.score2 .meta{color:var(--mut);font-size:12px;margin-top:8px}
.titleband2{text-align:center;font-weight:900;font-size:1.3rem;color:var(--gold);margin:18px 0;padding:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.charc{text-align:center;padding:24px;margin:16px 0;border-radius:var(--r)}
.charc .em{font-size:3.6rem;margin:6px 0}
.charc .nm{font-weight:900;font-size:1.4rem;color:#fff}
.charc .rr{display:inline-block;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.1em;color:#1a1300;padding:3px 14px;border-radius:99px;margin-top:8px;background:var(--gold)}
.charc .desc{color:var(--mut);font-size:13px;margin-top:12px;line-height:1.85}
.katsu2{display:flex;gap:14px;padding:18px;border-radius:var(--r);background:var(--p-soft);border:1px solid var(--line);margin:16px 0}
.katsu2 .lbl{flex:0 0 auto;font-family:'Oswald',sans-serif;color:var(--p);font-weight:700;font-size:13px;letter-spacing:.1em;padding-top:2px}
.katsu2 .tx{color:var(--ink);font-size:13px;line-height:1.85}
.rbtns{display:grid;gap:10px;margin-top:18px}
.disc2{text-align:center;font-size:11px;color:var(--mut);line-height:1.9;margin-top:20px;opacity:.8}
/* ===== RANKING ===== */
.rk-tabs{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:0 0 18px}
.rk-tab{font-size:12px;padding:8px 16px;border-radius:99px;border:1px solid var(--line);color:var(--mut);cursor:pointer;transition:all .15s}
.rk-tab.on{background:var(--p);color:#fff;border-color:var(--p);box-shadow:var(--shp)}
.rk-list{display:grid;gap:9px}
.rk-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.rk-row .no{flex:0 0 auto;width:34px;text-align:center;font-family:'Oswald',sans-serif;font-weight:700;font-size:17px;color:var(--mut)}
.rk-row.top .no{color:var(--gold);font-size:20px}
.rk-row .info{flex:1;min-width:0}
.rk-row .nm{font-weight:900;color:#fff;font-size:1rem}
.rk-row .sub{font-size:11px;color:var(--mut);margin-top:1px}
.rk-row .sc{flex:0 0 auto;font-family:'Oswald',sans-serif;font-weight:700;font-size:1.4rem;color:#fff}
.rk-row .sc small{font-size:11px;color:var(--mut);margin-left:2px}
@media(min-width:600px){.uxwrap{max-width:600px}}