/* ズボ活ゲーム 共通CSS — _build-games/shared.css から生成。直接編集しない。
   サイト側と同じ流儀で .zbr-game にスコープ済み。 */
.zbr-game{--card-sh:0 10px 0 -4px var(--paper3),0 14px 30px -10px rgba(91,70,54,.28)}
.zbr-game .wrap{max-width:720px;margin:0 auto;padding:0 20px}
@media(min-width:721px){.zbr-game .wrap{max-width:760px}}
.zbr-game .qbar{bottom:88px}
@media(min-width:768px){.zbr-game .qbar{bottom:0}}
.zbr-game .toast{bottom:110px}
/* =============================================================
   ズボ活ゲーム 共通CSS
   4本（検定／おみくじ／ルーレット／ズボラ名）で共有する。
   デザイントークンは ズボ連_おみくじ結果ページ案.html と同一。
   ゲーム固有のCSSは games/<name>.html の <style> に書く。
   ============================================================= */



.zbr-game .wrap{max-width:720px;margin:0 auto;padding:0 20px}


.zbr-game .nyan{filter:var(--sh)}
.zbr-game .zi{display:inline-block;width:1em;height:1em;vertical-align:-.14em}
.zbr-game [hidden]{display:none!important}

@keyframes zg-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes zg-pop{0%{transform:scale(.6) rotate(-8deg);opacity:0}60%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes zg-twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.12)}}
@keyframes zg-fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.zbr-game .bob{animation:zg-bob 3.2s ease-in-out infinite}
.zbr-game .spk{position:absolute;width:1em;animation:zg-twinkle 2.2s ease-in-out infinite;filter:drop-shadow(0 1px 1px rgba(240,160,0,.4))}

/* ---------- レビュー用の注記（実装時は消す） ---------- */




/* ---------- header ---------- */







/* ---------- 共通ボタン ---------- */
.zbr-game .btn{font-family:var(--disp);font-weight:900;font-size:21px;border:none;cursor:pointer;padding:17px 40px;border-radius:18px;text-decoration:none;display:inline-block;transition:.22s;text-align:center;line-height:1.4}
.zbr-game .btn-primary{background:var(--coral);color:#fff;box-shadow:0 6px 0 var(--coral-d)}
.zbr-game .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--coral-d)}
.zbr-game .btn-primary:disabled{background:var(--ink3);box-shadow:0 6px 0 #9c8871;cursor:not-allowed;transform:none}
.zbr-game .btn-ghost{background:#fff;color:var(--ink2);border:2.5px solid var(--paper3);box-shadow:0 5px 0 var(--paper3);font-size:17px;padding:14px 30px}
.zbr-game .btn-ghost:hover{transform:translateY(-2px)}
.zbr-game .btn-block{display:block;width:100%}

/* ================= スタート画面 ================= */
.zbr-game .start{text-align:center;padding:26px 0 20px;position:relative;animation:zg-fadeup .5s both}
.zbr-game .start .cat{width:240px;margin:0 auto;position:relative;z-index:1}
.zbr-game .start .kicker{font-family:var(--disp);font-weight:700;color:var(--pink-d);font-size:16px;background:#fff;display:inline-block;padding:6px 22px;border-radius:20px;box-shadow:2px 2px 0 var(--pink)}
.zbr-game .start h1{font-family:var(--disp);font-weight:900;font-size:44px;color:var(--coral);line-height:1.25;letter-spacing:.04em;margin-top:12px;text-shadow:3px 3px 0 #fff,5px 5px 0 var(--coral-l)}
.zbr-game .start h1 .sub{display:block;font-size:17px;color:var(--ink2);letter-spacing:.02em;margin-top:10px;text-shadow:none;font-weight:700}
.zbr-game .taken{display:inline-flex;align-items:center;gap:9px;background:var(--yellow-l);border:2px dashed var(--orange);border-radius:18px;padding:9px 22px;margin-top:18px;font-weight:800;color:var(--outline);font-size:15.5px}
.zbr-game .taken b{font-family:var(--latin);color:var(--coral);font-size:23px}
.zbr-game .namecard{background:#fff;border-radius:26px;box-shadow:var(--card-sh);border:3px solid var(--yellow);padding:26px 24px;margin-top:26px;text-align:left}
.zbr-game .namecard label{display:block;font-family:var(--disp);font-weight:900;font-size:17px;margin-bottom:4px}
.zbr-game .namecard .hint{font-size:13px;color:var(--ink3);margin-bottom:12px;font-weight:500}
.zbr-game .namecard input{width:100%;font-family:var(--body);font-weight:700;font-size:21px;color:var(--ink);padding:14px 18px;border:2.5px solid var(--paper3);border-radius:14px;background:var(--paper);outline:none;transition:.2s}
.zbr-game .namecard input:focus{border-color:var(--coral);background:#fff}
.zbr-game .namecard input::placeholder{color:var(--ink3);font-weight:500}
.zbr-game .freetag{display:inline-block;background:var(--mint);color:#2f6b52;font-family:var(--disp);font-weight:900;font-size:13px;padding:4px 15px;border-radius:14px;margin-bottom:14px}
.zbr-game .start .go{margin-top:22px}
.zbr-game .start .sub2{font-size:13px;color:var(--ink3);margin-top:14px;font-weight:500}

/* ================= 結果カード ================= */
.zbr-game .result{padding:36px 0 20px;animation:zg-fadeup .5s both}
.zbr-game .rcard{background:#fff;border-radius:30px;box-shadow:var(--card-sh);border:3px solid var(--yellow);padding:34px 26px 30px;position:relative;margin-top:80px;text-align:center}
.zbr-game .rcard .cat{width:190px;margin:-150px auto 0;position:relative;animation:zg-pop .7s cubic-bezier(.34,1.56,.64,1) both}
.zbr-game .rcard .kicker{font-family:var(--disp);font-weight:700;color:var(--pink-d);font-size:15px;background:var(--pink-l);display:inline-block;padding:5px 20px;border-radius:20px;margin-top:10px}
.zbr-game .rcard .rank{font-family:var(--disp);font-weight:900;font-size:62px;color:var(--coral);line-height:1.15;letter-spacing:.06em;margin-top:8px}
.zbr-game .score{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--latin);font-weight:700;color:var(--outline);font-size:19px;background:var(--yellow-l);border-radius:16px;padding:6px 20px;margin-top:6px}
.zbr-game .score b{font-size:38px;color:var(--coral)}
.zbr-game .score .m{font-size:15px;color:var(--ink2)}
.zbr-game .rcard .msg{font-size:17px;font-weight:500;margin-top:16px;line-height:1.9}
.zbr-game .rcard .msg em{font-style:normal;color:var(--coral-d);font-weight:700;background:var(--yellow-l);padding:0 5px;border-radius:5px}
.zbr-game .gain{display:inline-flex;align-items:center;gap:8px;background:var(--yellow-l);border:2px dashed var(--orange);border-radius:18px;padding:11px 24px;margin-top:22px;font-weight:800;color:var(--outline);font-size:16.5px}
.zbr-game .gain b{font-family:var(--latin);color:var(--coral);font-size:26px}
.zbr-game .daily{font-size:13px;color:var(--ink3);font-weight:500;margin-top:14px;text-align:center}

/* ================= 持ち帰り画像（検定証・名刺など） ================= */
.zbr-game .cert{margin-top:34px;text-align:center}
.zbr-game .cert h3{font-family:var(--disp);font-weight:900;font-size:19px;margin-bottom:4px}
.zbr-game .cert h3 .u{background:var(--yellow);border-radius:6px;padding:0 8px}
.zbr-game .cert .lead{font-size:14px;color:var(--ink2);font-weight:500;margin-bottom:16px}
.zbr-game .certbox{background:#fff;padding:12px;border-radius:20px;box-shadow:var(--card-sh);border:2.5px solid var(--paper3)}
.zbr-game .certbox canvas{display:block;width:100%;height:auto;border-radius:10px}
.zbr-game .cert .save{margin-top:18px}
.zbr-game .cert .save .btn{font-size:19px;padding:15px 34px}
.zbr-game .cert .cap{font-size:13px;color:var(--ink3);margin-top:10px;font-weight:500}

/* ================= シェア ================= */
.zbr-game .share{margin-top:30px;background:#fff;border-radius:22px;box-shadow:var(--card-sh);border:2.5px solid var(--paper3);overflow:hidden}
.zbr-game .share .th{background:var(--yellow);font-family:var(--disp);font-weight:900;font-size:17px;color:var(--outline);text-align:center;padding:11px}
.zbr-game .share .bd{padding:18px}
.zbr-game .share textarea{width:100%;font-family:var(--body);font-size:14.5px;line-height:1.9;color:var(--ink);background:var(--paper);border:2px solid var(--paper3);border-radius:14px;padding:14px 16px;resize:none}
.zbr-game .sns{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.zbr-game .sns a,.zbr-game .sns button{font-family:var(--disp);font-weight:900;font-size:15.5px;color:#fff;border:none;border-radius:14px;padding:14px 10px;text-decoration:none;text-align:center;cursor:pointer;transition:.18s;display:flex;align-items:center;justify-content:center;gap:7px}
.zbr-game .sns a:hover,.zbr-game .sns button:hover{transform:translateY(-2px);filter:brightness(1.06)}
.zbr-game .sns .x{background:#111}
.zbr-game .sns .fb{background:#1877f2}
.zbr-game .sns .line{background:#06c755}
.zbr-game .sns .copy{background:var(--ink2)}
.zbr-game .sns svg{width:19px;height:19px;fill:#fff}
.zbr-game .toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);background:var(--outline);color:#fff;font-family:var(--disp);font-weight:900;font-size:15px;padding:12px 26px;border-radius:30px;opacity:0;pointer-events:none;transition:.28s;z-index:99}
.zbr-game .toast.on{opacity:1;transform:translate(-50%,0)}

/* ================= 会員登録訴求 ================= */
.zbr-game .conv{margin-top:34px;background:linear-gradient(180deg,#fff,var(--coral-l));border:3px solid var(--coral);border-radius:26px;padding:30px 26px 28px;position:relative;box-shadow:var(--card-sh);text-align:center}
.zbr-game .conv .peek{position:absolute;width:84px;top:-58px;right:18px;filter:var(--sh)}
.zbr-game .conv .warn{display:inline-block;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;padding:4px 15px;border-radius:14px;margin-bottom:12px}
.zbr-game .conv h2{font-family:var(--disp);font-weight:900;font-size:25px;color:var(--coral-d);line-height:1.5}
.zbr-game .conv h2 .free{font-family:var(--latin);background:var(--yellow);color:var(--outline);border-radius:10px;padding:1px 12px;font-size:19px;margin-left:4px}
.zbr-game .conv .lead{font-size:14.5px;color:var(--ink2);font-weight:500;margin-top:6px}
.zbr-game .conv ul{list-style:none;display:grid;gap:9px;margin:16px auto 20px;text-align:left;max-width:440px}
/* テキストノードが個別のflexアイテムになって列組みになるため、中身は必ず <span> でくるむ */
.zbr-game .conv li{display:flex;gap:9px;font-size:14.5px;font-weight:500;line-height:1.75}
.zbr-game .conv li span{flex:1;min-width:0}
.zbr-game .conv li::before{content:"";flex:none;width:1em;height:1em;margin-top:.35em;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20role%3D%22img%22%20aria-label%3D%22%E8%82%89%E7%90%83%EF%BC%88%E7%8F%8A%E7%91%9A%EF%BC%89%22%3E%20%3Cpath%20fill%3D%22%23f25257%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23593823%22%20stroke-width%3D%2218.7%22%20stroke-linejoin%3D%22round%22%20d%3D%22M192%2081C187.6%2081.5%20180.7%2084.3%20177%2086.7C173.3%2089.2%20169.8%2093.1%20167.3%2097.4C164.9%20101.7%20161.8%20109.9%20160.6%20115.1C159.4%20120.2%20159%20126.3%20159.5%20131.7C160.1%20137.2%20162.1%20146.2%20164.2%20151.5C166.3%20156.8%20169.9%20163%20173.6%20167.1C177.3%20171.2%20184.5%20176.6%20188.9%20178.8C193.3%20180.9%20198.5%20181.8%20203%20181.4C207.4%20180.9%20214.8%20178.1%20218.6%20175.7C222.3%20173.2%20225.8%20168.9%20228.2%20165C230.6%20161.1%20233.2%20155.2%20234.4%20149.9C235.6%20144.6%20236.4%20135.5%20236%20129.6C235.5%20123.8%20233.4%20116.1%20231.3%20110.9C229.2%20105.8%20225.6%2099.4%20221.9%2095.3C218.2%2091.2%20211.1%2085.8%20206.6%2083.6C202.1%2081.5%20196.5%2080.6%20192%2081ZM299.2%2081C295.5%2081.6%20288.9%2083.1%20284.6%2085.7C280.3%2088.3%20274.1%2094.3%20270.8%2098.4C267.6%20102.6%20264.7%20108.8%20263%20113.5C261.3%20118.3%20259.7%20124.7%20259.4%20130.2C259.1%20135.6%20259.8%20144.7%20260.9%20149.9C262.1%20155.1%20264.8%20161.1%20267.2%20165C269.6%20168.9%20273.1%20173.2%20276.8%20175.7C280.5%20178.1%20287.4%20180.9%20291.9%20181.4C296.3%20181.8%20302%20180.9%20306.4%20178.8C310.9%20176.6%20318.1%20171.2%20321.8%20167.1C325.5%20163%20329%20156.7%20331.1%20151.5C333.2%20146.3%20335.4%20138%20335.8%20132.2C336.3%20126.5%20335.7%20118.5%20334.3%20113C332.9%20107.5%20329.2%2099.5%20326.5%2095.3C323.7%2091.1%20318.4%2087.2%20315.8%2085.2C313.2%2083.2%20311.5%2082.7%20309%2082.1C306.5%2081.4%20302.8%2080.5%20299.2%2081ZM92.7%20140.8C88.3%20141%2082.6%20143%2079.2%20145C75.8%20147%2072.3%20150.1%2070.1%20154.1C67.9%20158.1%2064.9%20166.1%2064.4%20171.8C63.8%20177.5%2065%20186.6%2066.5%20192C67.9%20197.5%2070.9%20203.5%2074.3%20208.2C77.7%20212.8%2084.5%20219.8%2089.1%20223C93.6%20226.1%20100.2%20228.4%20104.7%20229.2C109.2%20230%20115.8%20229%20119.2%20228.2C122.7%20227.3%20124.9%20226%20127.6%20223.5C130.2%20221%20134.8%20214.8%20136.7%20211.3C138.5%20207.7%20139.6%20204.9%20139.8%20199.8C139.9%20194.8%20138.9%20182.7%20137.7%20177.5C136.5%20172.3%20134.4%20168.8%20132%20165C129.6%20161.2%20125.3%20155.4%20121.8%20152.3C118.4%20149.1%20113.2%20145.7%20108.8%20143.9C104.5%20142.2%2097.2%20140.7%2092.7%20140.8ZM395.9%20141.3C391.8%20141.8%20387.3%20143.2%20383.4%20145.5C379.5%20147.8%20372.6%20153.8%20369.6%20156.7C366.6%20159.6%20365.3%20161.3%20363.4%20165C361.4%20168.7%20357.8%20175.8%20356.6%20181.1C355.4%20186.4%20355.3%20195.8%20355.6%20200.4C355.9%20205%20357.1%20208.5%20358.7%20211.8C360.3%20215.1%20363.2%20219.8%20366.2%20222.5C369.2%20225.1%20374.6%20228.3%20378.7%20229.2C382.9%20230.2%20388.7%20230.3%20393.8%20228.7C398.9%20227.1%20408.1%20221.8%20412.5%20218.3C416.9%20214.8%20420.5%20210.4%20423.2%20205.6C425.9%20200.7%20429.4%20191.7%20430.5%20185.8C431.5%20179.9%20431%20171%20429.9%20166C428.9%20161%20426.6%20156.1%20423.7%20152.5C420.8%20149%20414.6%20144.1%20410.4%20142.4C406.3%20140.7%20399.9%20140.9%20395.9%20141.3ZM246.6%20276.5C237.6%20277%20224.5%20279.1%20217%20280.7C209.5%20282.3%20203.7%20283.9%20196.7%20286.9C189.8%20290%20176.8%20296.9%20170.7%20301C164.7%20305.1%20160%20309.8%20156.4%20314.2C152.8%20318.6%20148.5%20326.1%20146.5%20330.4C144.6%20334.7%20143.4%20337.7%20143.4%20342.8C143.4%20348%20144.6%20359%20146.5%20364.7C148.5%20370.4%20152.8%20376.4%20156.4%20380.8C160%20385.2%20164.7%20390%20170.7%20394.1C176.8%20398.2%20189.8%20405.1%20196.7%20408.1C203.7%20411.1%20209.5%20412.8%20217%20414.3C224.5%20415.9%20237.6%20418%20246.6%20418.5C255.7%20419%20268.4%20418.6%20277.3%20417.5C286.3%20416.4%20298.7%20413.6%20306.4%20411.2C314.2%20408.9%20322.8%20405.1%20328.8%20401.9C334.8%20398.7%20341.5%20394.4%20346.5%20389.9C351.4%20385.4%20358.5%20377.6%20361.8%20372C365.1%20366.3%20368%20358.4%20368.6%20352.2C369.1%20346%20367.4%20336.1%20365.5%20330.4C363.5%20324.7%20360.1%20319.3%20355.6%20314.2C351%20309.2%20341.9%20301.2%20335%20296.8C328.1%20292.4%20318.2%20287.7%20309.6%20284.9C300.9%20282%20286.8%20278.8%20277.3%20277.6C267.9%20276.3%20255.7%20276.1%20246.6%20276.5Z%22%2F%3E%20%3C%2Fsvg%3E") center/contain no-repeat}
.zbr-game .conv li b{color:var(--coral-d)}
.zbr-game .conv .sub{font-size:12.5px;color:var(--ink3);margin-top:12px;font-weight:500}
.zbr-game .conv .login{color:var(--coral);text-decoration:underline;font-weight:700}

/* ================= サポーター広告枠（B6） ================= */
.zbr-game .ad{margin-top:30px}
.zbr-game .ad .lbl{font-family:var(--disp);font-weight:700;font-size:12px;color:var(--ink3);letter-spacing:.1em;margin-bottom:6px;text-align:center}
.zbr-game .adbox{background:repeating-linear-gradient(45deg,var(--paper2),var(--paper2) 10px,var(--paper3) 10px,var(--paper3) 20px);border:3px dashed var(--ink3);border-radius:20px;padding:26px 20px;text-align:center}
.zbr-game .adbox .t{font-family:var(--disp);font-weight:900;font-size:17px;color:var(--ink2)}
.zbr-game .adbox .d{font-size:13.5px;color:var(--ink3);font-weight:500;margin-top:6px;line-height:1.8}

/* ================= 他のズボ活 ================= */
.zbr-game .more{margin-top:40px;text-align:center}
.zbr-game .more h3{font-family:var(--disp);font-weight:900;font-size:19px;margin-bottom:16px}
.zbr-game .more h3 .u{background:var(--yellow);border-radius:6px;padding:0 8px}
.zbr-game .mg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.zbr-game .mg a{background:#fff;border-radius:18px;padding:18px 8px;text-decoration:none;color:var(--ink);box-shadow:var(--card-sh);border:2.5px dashed var(--pink);transition:.2s}
.zbr-game .mg a:hover{transform:translateY(-4px)}
.zbr-game .mg .e{font-size:46px;display:block;margin-bottom:6px;line-height:1}
.zbr-game .mg h4{font-family:var(--disp);font-weight:900;font-size:15px}
.zbr-game .again{text-align:center;margin-top:30px}




@media(max-width:640px){
  .zbr-game .start h1{font-size:36px}
  .zbr-game .rcard .rank{font-size:48px}
  .zbr-game .sns{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:721px){
  .zbr-game .wrap{max-width:760px}
}