/* 昭和のパワハラくそジジイを目指せ！ 共通CSS（昭和レトロ×悪ノリ） */
:root{
  --red:#D7263D; --red-d:#A01828; --gold:#E8B713; --ink:#1A1A1A; --paper:#F3ECD8;
  --paper-d:#E6DCC0; --black:#141414; --gray:#6b6b6b; --line:#3a3a3a; --green:#2e7d32;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:"Hiragino Mincho ProN","Yu Mincho",'Noto Serif JP',"MS PMincho",serif;
  background:var(--paper);color:var(--ink);line-height:1.7;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.02) 0 2px,transparent 2px 4px);}
.gothic{font-family:"Hiragino Kaku Gothic ProN",'Noto Sans JP',sans-serif;}
a{color:var(--red-d);text-decoration:none;}
.container{max-width:680px;margin:0 auto;padding:0 16px;}
/* header */
.site-header{background:var(--black);color:var(--paper);border-bottom:4px solid var(--gold);position:sticky;top:0;z-index:100;}
.header-inner{max-width:680px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-weight:900;font-size:1.05rem;color:var(--gold);letter-spacing:1px;}
.logo small{color:var(--paper);font-size:.7rem;font-weight:400;}
.nav{display:flex;gap:10px;align-items:center;}
.nav a{color:var(--paper);font-size:.82rem;}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer;
  font-family:inherit;font-weight:900;border-radius:6px;padding:13px 26px;font-size:1rem;transition:.12s;}
.btn-primary{background:var(--red);color:#fff;border:2px solid var(--red-d);box-shadow:3px 3px 0 var(--ink);}
.btn-primary:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink);}
.btn-gold{background:var(--gold);color:var(--ink);border:2px solid #b8930f;box-shadow:3px 3px 0 var(--ink);}
.btn-gold:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink);}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);}
.btn-dark{background:var(--ink);color:var(--paper);border:2px solid var(--ink);}
.btn-block{width:100%;}
.btn-sm{padding:8px 16px;font-size:.85rem;box-shadow:2px 2px 0 var(--ink);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
/* card / panel */
.panel{background:var(--paper);border:3px solid var(--ink);border-radius:10px;padding:24px;margin-bottom:18px;
  box-shadow:5px 5px 0 rgba(0,0,0,.18);}
.panel-dark{background:var(--black);color:var(--paper);border:3px solid var(--gold);}
.stamp{display:inline-block;border:3px double var(--red);color:var(--red);font-weight:900;
  padding:3px 12px;border-radius:6px;transform:rotate(-6deg);font-size:.85rem;letter-spacing:1px;}
/* hero */
.hero{text-align:center;padding:30px 10px 10px;}
.hero .title{font-size:2.1rem;font-weight:900;line-height:1.3;color:var(--ink);text-shadow:3px 3px 0 var(--gold);}
.hero .title .em{color:var(--red);}
.hero .sub{font-size:.95rem;color:var(--ink);margin-top:14px;background:var(--gold);display:inline-block;padding:5px 16px;border-radius:4px;transform:rotate(-1deg);font-weight:700;}
.hero .jiji{font-size:5rem;line-height:1;margin:8px 0;}
/* difficulty */
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.diff-card{background:#fff;border:3px solid var(--ink);border-radius:10px;padding:18px;text-align:center;cursor:pointer;
  box-shadow:4px 4px 0 rgba(0,0,0,.15);transition:.12s;}
.diff-card:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.15);background:var(--gold);}
.diff-card .lv{font-size:1.3rem;font-weight:900;color:var(--red);}
.diff-card .q{font-size:.85rem;color:var(--gray);margin-top:4px;}
.diff-card .em{font-size:2rem;}
/* game */
.qmeter{background:var(--black);color:var(--paper);border-radius:8px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;font-family:"Hiragino Kaku Gothic ProN",sans-serif;font-weight:700;margin-bottom:14px;}
.qbar{height:8px;background:#444;border-radius:99px;overflow:hidden;margin-top:8px;}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--red));}
.scene-box{background:#fff;border:3px solid var(--ink);border-radius:10px;padding:22px;margin-bottom:16px;position:relative;box-shadow:4px 4px 0 rgba(0,0,0,.15);}
.scene-box .badge{position:absolute;top:-12px;left:16px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;padding:3px 12px;border-radius:99px;font-family:sans-serif;}
.scene-box .scene{font-size:1.15rem;font-weight:700;line-height:1.7;}
.choices{display:grid;gap:12px;}
.choice{background:#fff;border:2.5px solid var(--ink);border-radius:10px;padding:16px 18px;cursor:pointer;font-size:1rem;font-weight:600;text-align:left;transition:.12s;box-shadow:3px 3px 0 rgba(0,0,0,.13);font-family:inherit;}
.choice:hover{background:var(--paper-d);transform:translate(1px,1px);}
.choice.selected{background:var(--red);color:#fff;border-color:var(--red-d);}
.choice .mk{display:inline-block;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;text-align:center;line-height:26px;font-weight:900;margin-right:10px;font-family:sans-serif;}
/* result */
.result-score{text-align:center;}
.result-score .big{font-size:5rem;font-weight:900;color:var(--red);line-height:1;text-shadow:3px 3px 0 var(--gold);}
.result-score .of{font-size:1.2rem;color:var(--gray);}
.title-band{background:var(--ink);color:var(--gold);text-align:center;font-size:1.5rem;font-weight:900;padding:12px;border-radius:8px;margin:14px 0;letter-spacing:2px;}
.char-card{text-align:center;border:4px double var(--ink);border-radius:14px;padding:24px;margin:16px 0;background:#fff;}
.char-card .em{font-size:5rem;}
.char-card .nm{font-size:1.6rem;font-weight:900;}
.char-card .rr{display:inline-block;color:#fff;font-weight:900;padding:3px 18px;border-radius:99px;margin:6px;font-family:sans-serif;letter-spacing:1px;}
.katsu{background:#fff;border:3px solid var(--red);border-left:10px solid var(--red);border-radius:8px;padding:18px 20px;font-size:1.02rem;line-height:1.9;margin:14px 0;}
.katsu .lbl{display:inline-block;background:var(--red);color:#fff;font-weight:900;padding:2px 14px;border-radius:4px;font-family:sans-serif;margin-bottom:8px;}
/* form */
.form-group{margin-bottom:14px;}
.form-label{display:block;font-weight:700;margin-bottom:6px;font-family:sans-serif;font-size:.9rem;}
.form-input,.form-select{width:100%;border:2.5px solid var(--ink);border-radius:8px;padding:11px 14px;font-size:1rem;font-family:inherit;background:#fff;}
.form-input:focus{outline:none;border-color:var(--red);}
/* table */
.tbl{width:100%;border-collapse:collapse;font-size:.85rem;font-family:sans-serif;}
.tbl th{background:var(--ink);color:var(--gold);padding:9px;text-align:left;}
.tbl td{border-bottom:1px solid #ccc;padding:8px 9px;}
.tbl tr:nth-child(even) td{background:rgba(0,0,0,.03);}
.rank-no{font-weight:900;color:var(--red);}
.notice{border-radius:8px;padding:11px 15px;font-size:.9rem;margin-bottom:12px;font-family:sans-serif;}
.notice-warn{background:#fde8eb;color:var(--red-d);border:2px solid var(--red);}
.notice-ok{background:#e8f5e9;color:var(--green);border:2px solid var(--green);}
.hidden{display:none!important;}
.text-c{text-align:center;}.muted{color:var(--gray);}.sm{font-size:.85rem;}
.mt16{margin-top:16px;}.mb8{margin-bottom:8px;}
.disclaimer{font-size:.72rem;color:var(--gray);text-align:center;padding:16px;font-family:sans-serif;line-height:1.6;}
footer.site-footer{background:var(--black);color:var(--paper);text-align:center;padding:18px;font-size:.72rem;margin-top:30px;font-family:sans-serif;}
@media(max-width:480px){.hero .title{font-size:1.55rem;}.diff-grid{grid-template-columns:1fr;}}
/* shake */
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
.shake{animation:shake .3s;}