/* ズボ活「ズボラ検定」固有CSS — _build-games/games/kentei.html から生成。直接編集しない。 */
/* --- 設問画面（検定だけ） --- */
.zbr-game .quiz{padding:18px 0 130px;animation:zg-fadeup .5s both}
.zbr-game .qhead{position:sticky;top:56px;z-index:30;background:rgba(255,250,242,.95);backdrop-filter:blur(6px);padding:12px 20px 10px;margin:0 -20px 6px;border-bottom:2px solid var(--paper3)}
.zbr-game .qhead .row{display:flex;align-items:baseline;gap:10px;font-family:var(--disp);font-weight:900}
.zbr-game .qhead .who{font-size:15px;color:var(--ink2);margin-right:auto}
.zbr-game .qhead .cnt{font-size:14px;color:var(--ink2)}
.zbr-game .qhead .cnt b{font-family:var(--latin);font-size:24px;color:var(--coral)}
.zbr-game .bar{height:12px;background:var(--paper3);border-radius:8px;overflow:hidden;margin-top:8px}
.zbr-game .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--coral));border-radius:8px;transition:width .3s cubic-bezier(.34,1.4,.64,1)}
.zbr-game .qlead{text-align:center;font-family:var(--disp);font-weight:900;font-size:19px;margin:18px 0 4px}
.zbr-game .qlead .u{background:var(--yellow);border-radius:6px;padding:0 8px}
.zbr-game .qlead .p{display:block;font-family:var(--body);font-weight:500;font-size:14.5px;color:var(--ink2);margin-top:4px}
.zbr-game .qlist{display:grid;gap:12px;margin-top:16px}
.zbr-game .q{background:#fff;border:3px solid var(--paper3);border-radius:20px;padding:15px 18px 16px;transition:.18s;box-shadow:0 5px 0 -1px var(--paper3)}
.zbr-game .q .qn{font-family:var(--latin);font-weight:700;font-size:13px;color:var(--ink3);letter-spacing:.06em}
.zbr-game .q .qt{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.6;margin-top:2px}
.zbr-game .q .qnote{font-size:13.5px;color:var(--ink2);font-weight:500;line-height:1.7;margin-top:5px}
/* 3択。1行に3つ並べる（「ときどき」が4文字なので最小幅は詰めておく） */
.zbr-game .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}
.zbr-game .opts button{font-family:var(--disp);font-weight:900;font-size:15.5px;color:var(--ink2);background:var(--paper);
  border:2.5px solid var(--paper3);border-radius:14px;padding:12px 4px;cursor:pointer;transition:.16s;line-height:1.3}
.zbr-game .opts button:hover{border-color:var(--pink);color:var(--ink)}
.zbr-game .opts button.on{background:var(--coral);border-color:var(--coral);color:#fff;box-shadow:0 4px 0 var(--coral-d)}
.zbr-game .q.done{border-color:var(--coral-l)}
.zbr-game .qbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:3px solid var(--coral-l);padding:14px 20px calc(14px + env(safe-area-inset-bottom))}
.zbr-game .qbar .in{max-width:680px;margin:0 auto}
.zbr-game .qbar .btn{width:100%;padding:16px 20px;font-size:20px}
@media(min-width:721px){.zbr-game .q .qt{font-size:19px}}

/* --- 結果：ズボラ度の大きな数字 --- */
.zbr-game .big{font-family:var(--latin);font-weight:700;color:var(--coral);line-height:1;margin-top:6px;letter-spacing:-.02em}
.zbr-game .big span{font-size:96px}
.zbr-game .big small{font-size:34px;margin-left:4px}
.zbr-game .tname{display:inline-block;background:var(--coral);color:#fff;font-family:var(--disp);font-weight:900;font-size:19px;
  padding:6px 26px;border-radius:20px;margin-top:12px;letter-spacing:.06em}
.zbr-game .tlead{font-family:var(--disp);font-weight:900;font-size:20px;margin-top:12px;line-height:1.5}
.zbr-game .rbody{font-size:15px;font-weight:500;line-height:1.95;margin-top:14px;text-align:left;color:var(--ink2)}
.zbr-game .avg{font-size:13.5px;color:var(--ink3);font-weight:500;margin-top:10px}
.zbr-game .avg b{font-family:var(--latin);font-size:16px;color:var(--ink2)}

/* --- 称号のランク表 --- */
.zbr-game .ranks{width:100%;border-collapse:collapse;margin-top:22px;font-size:14.5px;background:var(--paper);border-radius:14px;overflow:hidden}
.zbr-game .ranks td{padding:9px 12px;border-top:2px solid var(--paper2);text-align:left;font-weight:500;color:var(--ink2)}
.zbr-game .ranks tr:first-child td{border-top:none}
.zbr-game .ranks td:first-child{font-family:var(--latin);font-weight:600;white-space:nowrap;width:1%}
.zbr-game .ranks td:nth-child(2){font-family:var(--disp);font-weight:700;white-space:nowrap}
.zbr-game .ranks td:last-child{text-align:right;white-space:nowrap;font-family:var(--disp);font-weight:900;color:var(--coral)}
.zbr-game .ranks tr.me td{background:var(--coral-l);color:var(--outline)}
.zbr-game .ranks tr.me td:nth-child(2){color:var(--coral-d)}
/* 375px では「81〜100％／ズボラ上級者／◀ あなた」の3列が入りきらず、称号が2行に割れる。
   折り返しを止めたうえで、字と余白を詰めて収める */
@media(max-width:420px){
  .zbr-game .ranks{font-size:13px}
  .zbr-game .ranks td{padding:8px 7px}
  .zbr-game .ranks td:last-child{font-size:12.5px}
}

/* --- 4つの内訳の横棒 --- */
.zbr-game .axes{margin-top:24px;display:grid;gap:11px}
.zbr-game .ax{display:grid;grid-template-columns:7.5em 1fr 3.2em;align-items:center;gap:10px}
.zbr-game .ax .nm{font-family:var(--disp);font-weight:700;font-size:14px;text-align:left;line-height:1.35}
.zbr-game .ax .track{height:14px;background:var(--paper3);border-radius:8px;overflow:hidden}
.zbr-game .ax .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:8px;transition:width .8s cubic-bezier(.16,.84,.28,1)}
.zbr-game .ax .pct{font-family:var(--latin);font-weight:600;font-size:14.5px;color:var(--ink2);text-align:right}
.zbr-game .ax.low .track i{background:linear-gradient(90deg,var(--pink),var(--coral))}
.zbr-game .ax.low .nm{color:var(--coral-d)}
@media(max-width:400px){.zbr-game .ax{grid-template-columns:6.6em 1fr 3em}.zbr-game .ax .nm{font-size:13px}}

/* --- ヒント --- */
.zbr-game .hint{margin-top:30px;background:var(--pink-l);border:2.5px solid var(--pink);border-radius:22px;padding:22px 22px 20px;text-align:left}
.zbr-game .hint h3{font-family:var(--disp);font-weight:900;font-size:16.5px;color:var(--pink-d);line-height:1.5}
.zbr-game .hint p{font-size:15px;font-weight:500;line-height:1.95;margin-top:9px}

/* --- 他のズボ活（検定だけ2列＋説明つき） --- */
.zbr-game .more .mg{grid-template-columns:repeat(2,1fr)}
.zbr-game .more .mg a{padding:16px 12px}
.zbr-game .more .mg .e{font-size:38px;margin-bottom:4px}
.zbr-game .more .mg .d{display:block;font-size:12px;color:var(--ink2);font-weight:500;line-height:1.6;margin-top:4px}