/* まぜる漢字「役札」 — mazeru.html の色（--paper, --sumi, --shu など）を使う */
.y-busy .ytile,.y-busy .btn{pointer-events:none}

/* はじめ */
.y-title{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;min-height:calc(100dvh - var(--hdr) - 80px)}
.y-h1{font-family:var(--mincho);font-weight:800;font-size:clamp(52px,8vw,92px);line-height:1.05;letter-spacing:.06em}
.y-h1 small{display:inline-block;font-size:16px;letter-spacing:.2em;color:var(--dim);margin-left:12px;vertical-align:middle}
.y-sub{font-size:15.5px;color:var(--sumi2);max-width:30em;margin-top:12px;word-break:auto-phrase}
.y-sub b{color:var(--shu-d)}
.y-start{margin-top:22px;display:flex;flex-direction:column;gap:10px;max-width:440px}
.y-rec{padding:12px 14px;display:grid;gap:2px}
.y-rec small{font-size:12px;color:var(--dim)}
.y-rec b{font-size:18px;font-weight:900}
.y-rec span{font-size:13.5px}
.y-rec .btn{justify-self:start;margin-top:6px}
.y-howlink{margin-top:12px;font-size:14px;font-weight:700;color:var(--shu-d);text-decoration:underline;text-underline-offset:3px}
.y-demo{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 18px;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 34px rgba(29,27,25,.08)}
.y-demo-hand{display:flex;gap:8px}
.y-demo-word{font-family:var(--mincho);font-weight:800;font-size:42px;line-height:1.1}
.y-demo-word small{display:block;text-align:center;font-family:inherit;font-size:13px;color:var(--dim);font-weight:500}
.y-demo-j{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.y-demo-arrow{font-size:20px;color:var(--shu)}

/* 札 */
.ytile{position:relative;width:64px;height:76px;border-radius:12px;background:linear-gradient(#fffdf8,#f6efe2);border:1.5px solid #d9cfbd;box-shadow:0 3px 0 #d4c8b3,0 6px 12px rgba(29,27,25,.08);display:inline-grid;place-items:center;transition:transform .12s,box-shadow .12s,border-color .12s;color:var(--sumi)}
.ytile .ch{font-family:var(--mincho);font-weight:800;font-size:36px;line-height:1}
.ytile small{position:absolute;right:6px;top:3px;font-size:10.5px;color:var(--faint);font-weight:700}
.ytile em{position:absolute;left:-6px;top:-8px;width:22px;height:22px;border-radius:50%;background:var(--shu);color:#fff;font-style:normal;font-size:12px;font-weight:900;display:grid;place-items:center}
.ytile i{position:absolute;left:0;right:0;bottom:4px;font-style:normal;font-size:10px;color:var(--dim);text-align:center}
.ytile.sel{transform:translateY(-10px);border-color:var(--shu);box-shadow:0 3px 0 var(--shu-d),0 12px 20px rgba(200,68,47,.22)}
.ytile.seal::after{content:"印";position:absolute;left:5px;bottom:5px;width:16px;height:16px;border-radius:4px;background:var(--shu);color:#fff;font-size:10px;line-height:16px;text-align:center;font-family:var(--mincho);font-weight:800}
.ytile.out{opacity:.25;transform:translateY(-24px) scale(.9)}
.ytile.big{width:78px;height:92px}
.ytile.big .ch{font-size:44px}
.ytile.sm{width:42px;height:50px;border-radius:9px;box-shadow:0 2px 0 #d4c8b3}
.ytile.sm .ch{font-size:23px}
.ytile.sm small{font-size:9px;right:4px;top:1px}
.ytile:disabled{opacity:.4}
@media (hover:hover){ .ytile:not(.sel):not(:disabled):hover{transform:translateY(-3px)} }

/* 局 */
.y-game{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.y-hud{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--sumi);color:#fff;border-radius:16px;padding:10px 14px}
.y-round b{font-family:var(--mincho);font-size:24px;font-weight:800}
.y-round small{font-size:13px;color:rgba(255,255,255,.65);margin-left:2px}
.y-bossname{display:block;font-size:12px;font-weight:900;color:#ffb39f;letter-spacing:.04em}
.y-target span{font-size:13px;color:rgba(255,255,255,.75)}
.y-target b{color:#fff;font-size:16px}
.y-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-bottom:4px}
.y-bar i{display:block;height:100%;background:linear-gradient(90deg,#e8664c,#ffb35c);border-radius:999px;transition:width .5s}
.y-res{display:flex;gap:12px;align-items:center;font-size:12.5px;color:rgba(255,255,255,.75)}
.dots{display:inline-flex;gap:3px;vertical-align:middle;margin-left:3px}
.dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4)}
.dots i.on{background:#ffb35c;border-color:#ffb35c}
.dots i.on.d{background:#8fc3ff;border-color:#8fc3ff}
.y-money{font-family:var(--mincho);font-size:22px;font-weight:800;color:#ffd77a}
.y-money small{font-size:12px;margin-left:1px}
.y-bossnote{background:var(--shu-l);border:1px solid rgba(200,68,47,.3);color:var(--shu-d);border-radius:12px;padding:7px 12px;font-size:13.5px;font-weight:700}
.y-bossnote b{background:var(--shu);color:#fff;border-radius:6px;padding:1px 7px;margin-right:8px;font-size:12px}
.y-jokers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.yj{position:relative;min-height:74px;border-radius:12px;background:#24313f;color:#eef2f8;border:1.5px solid #3b4c60;display:flex;flex-direction:column}
.yj.rare{background:linear-gradient(160deg,#3a2a12,#24313f);border-color:#b8892a}
.yj-face{flex:1;text-align:left;padding:8px 9px;color:inherit;display:block}
.yj b{display:block;font-size:13px;font-weight:900;line-height:1.3;color:#ffd77a}
.yj small{display:block;font-size:10.5px;line-height:1.4;color:#c7d2e0;margin-top:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.yj.empty{background:transparent;border:1.5px dashed var(--line2);color:var(--faint);align-items:center;justify-content:center}
.yj.empty small{color:var(--faint)}
.yj.mini{min-height:0;padding:6px 10px;display:inline-block}
.yj.fire{animation:yjfire .45s ease}
@keyframes yjfire{0%{transform:scale(1)}40%{transform:scale(1.1) translateY(-4px);box-shadow:0 0 0 3px #ffb35c}100%{transform:scale(1)}}
.yj-ops{display:flex;gap:4px;padding:0 6px 6px;justify-content:space-between}
.yj-ops .btn{height:28px;padding:0 7px;font-size:11.5px;background:#33445a;color:#fff;border-color:#4c607a}
.y-stage{min-height:150px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;text-align:center}
.y-stage.idle p,.y-stage.bad p{color:var(--dim);font-size:14px}
.y-stage.bad .y-word{color:var(--faint);text-decoration:line-through;text-decoration-thickness:2px}
.y-word{font-family:var(--mincho);font-weight:800;font-size:40px;line-height:1.1;letter-spacing:.04em}
.y-word small{display:block;font-family:"Zen Maru Gothic",system-ui,sans-serif;font-size:13px;color:var(--dim);font-weight:500;letter-spacing:0}
.y-rare{font-size:12.5px;color:var(--gold);font-weight:700}
.y-calc{display:flex;align-items:center;gap:8px;font-weight:900}
.y-calc .c,.y-calc .m{min-width:58px;padding:4px 10px;border-radius:10px;font-size:22px;color:#fff;text-align:center}
.y-calc .c{background:#2f6db5}
.y-calc .m{background:var(--shu)}
.y-calc i{font-style:normal;color:var(--dim);font-size:18px}
.y-calc b{font-size:28px;font-family:var(--mincho)}
.y-calc .bump,.y-calc b.bump{animation:bump .28s ease}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.y-fires{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.y-fires span{font-size:12px;font-weight:700;background:#24313f;color:#ffd77a;border-radius:999px;padding:2px 10px}
.y-fx{min-height:26px}
.y-fx .pop{display:inline-block;font-size:13.5px;font-weight:900;padding:3px 12px;border-radius:999px;background:#24313f;color:#ffd77a;animation:popin .25s ease}
.y-fx .pop.tile{background:#2f6db5;color:#fff}
.y-fx .pop.seal{background:var(--shu);color:#fff}
.y-fx .pop.base{background:var(--sumi);color:#fff}
@keyframes popin{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.y-hand{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:14px 4px 4px}
.y-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.y-play{min-width:130px}
.y-can{text-align:center;font-size:13px;color:var(--dim)}
.y-can b{color:var(--sumi)}
.y-can span{margin-left:8px;color:var(--faint)}

/* 店 */
.y-shop{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.y-win h2{font-family:var(--mincho);font-weight:800;font-size:34px;line-height:1.2}
.y-win h2 small{font-size:15px;color:var(--dim);margin-left:8px}
.y-pay{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--dim);margin-top:6px}
.y-pay b{color:var(--sumi)}
.y-pay .sum{width:100%;font-size:15px;color:var(--sumi)}
.y-pay .sum b{color:var(--gold);font-size:17px}
.y-h3{font-size:16px;font-weight:900;margin-top:6px}
.y-h3 small{font-size:12px;color:var(--dim);font-weight:700;margin-left:8px}
.y-offers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.y-offer{border-radius:14px;background:#24313f;color:#eef2f8;padding:12px;display:flex;flex-direction:column;gap:6px;border:1.5px solid #3b4c60}
.y-offer.rare{background:linear-gradient(160deg,#3a2a12,#24313f);border-color:#b8892a}
.y-offer b{color:#ffd77a;font-size:16px}
.y-offer small{font-size:12.5px;color:#c7d2e0;line-height:1.5;flex:1}
.y-offer .btn{align-self:flex-start}
.y-offer .btn:not(.primary){background:#33445a;color:#fff;border-color:#4c607a}
.y-offer .btn.primary{background:#ffd77a;color:#1d1b19;border-color:#ffd77a}
.y-offer.sold{background:transparent;border:1.5px dashed var(--line2);align-items:center;justify-content:center;color:var(--faint);min-height:110px}
.y-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.y-tool{border-radius:12px;background:var(--card);border:1px solid var(--line);padding:10px;text-align:left;display:flex;flex-direction:column;gap:2px}
.y-tool b{font-size:15px}
.y-tool small{font-size:11.5px;color:var(--dim);line-height:1.4;flex:1}
.y-tool span{font-weight:900;color:var(--gold);font-size:14px}
.y-tool:disabled{opacity:.45;cursor:default}
.y-tool:not(:disabled):hover{border-color:var(--sumi)}
.y-pack{padding:12px 14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.y-pack-row{display:flex;gap:12px}
.y-deck{display:flex;flex-wrap:wrap;gap:6px}
.y-next{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.y-next small{display:block;font-size:12px;color:var(--dim)}
.y-next b{font-size:18px}
.y-next .y-bossname{color:var(--shu-d);font-size:12.5px}
.y-deckview summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--dim)}
.y-deckview .y-deck{margin-top:8px}

/* おわり */
.y-result{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.y-result h2{font-family:var(--mincho);font-weight:800;font-size:32px;line-height:1.25}
.y-total{font-size:15px}
.y-total b{font-size:20px}
.y-total small{color:var(--dim);margin:0 4px}
.y-result .row2{display:flex;gap:8px;flex-wrap:wrap}
.y-again{display:flex;gap:8px;flex-wrap:wrap}
.y-words{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.y-words li{display:flex;align-items:baseline;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.y-words b{font-family:var(--mincho);font-size:18px}
.y-words small{font-size:11.5px;color:var(--dim);flex:1}
.y-words span{font-size:12px;font-weight:900;color:var(--gold)}
.y-learn{padding:14px}
.y-learn p{font-size:13.5px;color:var(--dim);margin:2px 0 8px}

@media (max-width:760px){
  .y-title{grid-template-columns:1fr;gap:18px;min-height:0}
  .y-demo{order:-1;padding:16px 12px;gap:8px}
  .y-demo-word{font-size:32px}
  .y-h1{font-size:56px}
  .y-hud{grid-template-columns:auto 1fr;gap:8px 12px;padding:9px 12px}
  .y-res{grid-column:1 / -1;justify-content:space-between}
  .y-jokers{gap:5px}
  .yj{min-height:62px}
  .yj-face{padding:6px}
  .yj b{font-size:11px}
  .yj small{font-size:9.5px;-webkit-line-clamp:2}
  .yj-ops{flex-wrap:wrap;padding:0 4px 4px}
  .yj-ops .btn{height:26px;padding:0 5px;font-size:10.5px}
  .y-stage{min-height:130px}
  .y-word{font-size:34px}
  .ytile{width:calc((100vw - 32px - 30px) / 4);max-width:72px;height:72px}
  .y-hand{gap:10px 8px}
  .y-tools{grid-template-columns:1fr 1fr}
  .y-offers{grid-template-columns:1fr}
  .y-calc .c,.y-calc .m{min-width:50px;font-size:19px}
  .y-calc b{font-size:24px}
}
/* 店の役札は幅を広く取り、操作ボタンを収める */
.y-jokers.shop{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.y-jokers.shop .yj small{-webkit-line-clamp:4}
.yj-ops{display:grid;grid-template-columns:30px 1fr 30px;gap:4px}
.yj-ops .btn{min-width:0;padding:0 4px}
.y-pr{font-size:12.5px;color:var(--dim);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.y-pr .tag{font-size:10px;font-weight:900;border:1px solid var(--line2);border-radius:4px;padding:0 4px}
.y-pr small{width:100%;font-size:11px;color:var(--faint)}