/*! ポケカ攻略 ルール体験 pokeka-tutorial.css v7（pokeka-solo.css のあとに読み込む）
 *  札の大きさは幅で決めた固定値。画面の高さに入りきらないときだけ、盤面全体を同じ比率で縮める（JS）。
 */
#pktut.pks{container-type:inline-size;margin:0 0 2em;
  --ob:30px;--oa:42px;--ma:62px;--mb:48px;--hw:50px}
@container (min-width:480px){#pktut .pkt-stage{--ob:38px;--oa:50px;--ma:76px;--mb:56px;--hw:58px}}
@container (max-width:339px){#pktut .pkt-stage{--ob:28px;--oa:38px;--ma:56px;--mb:44px;--hw:46px}}

/* 進み具合 */
.pkt-prog{flex:1 1 100%;height:4px;background:#2b2b2e;border-radius:2px;overflow:hidden}
.pkt-prog i{display:block;height:100%;background:var(--acc);transition:width .3s}

/* 盤面 */
.pkt-stage{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:5px;transform-origin:top center}
.pkt-stage .pks-bar{position:static;flex:none;padding:5px 8px 6px;gap:4px 6px}
.pkt-stage .pks-tn b{font-size:15px}
.pkt-stage .pks-tb{padding:6px 10px !important}
.pkt-step{color:var(--acc);font-weight:700;margin-left:6px}
.pkt-board{display:flex;flex-direction:column;gap:4px}
.pkt-lb{position:absolute;left:8px;top:3px;font-size:10px;font-weight:700;color:var(--sub);margin:0 !important;line-height:1.2;pointer-events:none}
.pkt-opp,.pkt-mine,.pkt-hand{position:relative;border-radius:12px;padding:14px 6px 6px}
.pkt-opp{background:#f4eef0}
.pkt-mine{background:var(--felt);display:flex;flex-direction:column;gap:6px;padding-bottom:9px}
.pkt-hand{padding:14px 8px 5px;background:var(--soft)}

/* 札（幅を固定、高さはカードの縦横比） */
.pkt-board .pks-slot{flex:none;aspect-ratio:215/300;height:auto}
.pkt-board .pks-slot.is-empty{font-size:9px;line-height:1.2;text-align:center}
.pkt-obench{display:flex;justify-content:center;gap:4px}
.pkt-obench .pks-slot{width:var(--ob)}
.pkt-orow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:5px}
.pkt-oa .pks-slot{width:var(--oa)}
.pkt-mrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.pkt-ma .pks-slot{width:var(--ma)}
.pkt-mbench{display:flex;justify-content:center;gap:5px}
.pkt-mbench .pks-slot{width:var(--mb)}

/* 山札・トラッシュ（自分は右、相手は左） */
.pkt-piles,.pkt-opiles{display:flex;flex-direction:column;gap:4px;min-width:0;width:100%;max-width:120px}
.pkt-piles{justify-self:start}
.pkt-opiles{justify-self:end}
.pkt-piles .pks-pile,.pkt-opiles .pks-pile{flex-direction:row;justify-content:space-between;align-items:baseline;gap:4px;padding:3px 8px !important;white-space:nowrap}
.pkt-piles .pks-pile b{font-size:16px}
.pkt-opiles .pks-pile{padding:1px 7px !important}
.pkt-opiles .pks-pile span{font-size:10px}
.pkt-opiles .pks-pile b{font-size:13px}
.pkt-oh{font-size:10px;color:var(--sub);background:#fff;border-radius:8px;padding:1px 7px;display:flex;justify-content:space-between;align-items:baseline;white-space:nowrap}
.pkt-oh b{font-size:13px;color:var(--ink)}

/* サイド（自分は左、相手は右。2列×3段で少し重ねる） */
.pkt-prz{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.pkt-mrow .pkt-prz{justify-self:end}
.pkt-orow .pkt-prz{justify-self:start}
.pkt-prz>span{position:absolute;top:50%;right:100%;margin-right:5px;transform:translateY(-50%);font-size:10px;color:var(--sub);font-weight:700;white-space:nowrap;writing-mode:vertical-rl;letter-spacing:.1em}
.pkt-prz.is-opp>span{right:auto;left:100%;margin:0 0 0 5px}
.pkt-prz>span b{font-size:12px;color:var(--ink);text-combine-upright:all}
.pkt-pzg{--pw:calc(var(--ma) * 1.395 / 3.04);display:grid;grid-template-columns:repeat(2,var(--pw));grid-auto-rows:calc(var(--pw) * .82);column-gap:4px;padding-bottom:calc(var(--pw) * .575)}
.pkt-prz.is-opp .pkt-pzg{--pw:calc(var(--oa) * 1.395 / 3.04);column-gap:3px}
.pkt-pz{display:block;width:var(--pw);aspect-ratio:215/300;padding:0 !important;border-radius:4px !important;position:relative}
.pkt-pz .pkt-back{border-width:1.5px;border-radius:4px}
.pkt-pz.is-empty{border:1.5px dashed #c5cfc8;background:transparent}
.pkt-prz.is-opp .pkt-pz{pointer-events:none}

/* スタジアム（おたがいの場のあいだ） */
.pkt-stadrow{display:flex;justify-content:center}
.pkt-stadrow .pks-stad{min-height:0;height:26px;padding:2px 10px 2px 3px !important;font-size:11px;gap:6px;max-width:100%}
.pkt-stadrow .pks-stad img{width:auto;height:100%;border-radius:2px}
.pkt-stadrow .pks-stad span small{display:inline;margin-left:6px;font-size:10px;font-weight:400;color:var(--sub)}
.pkt-stadrow .pks-stad.is-empty{width:min(300px,100%);font-size:10px;padding:2px 8px !important}

/* 手札（1列。多いときは少し重ねる） */
.pkt-hrow{display:flex;justify-content:center;height:calc(var(--hw) * 1.395 + 2px)}
.pkt-hrow .pks-hc{flex:0 0 auto;width:var(--hw);height:calc(var(--hw) * 1.395);position:relative;box-shadow:-2px 0 4px rgba(0,0,0,.15)}
.pkt-hrow .pks-hc + .pks-hc{margin-left:min(4px,calc((100cqw - 24px - var(--n) * var(--hw)) / var(--n1)))}
.pkt-hrow .pks-empty{align-self:center;padding:0}

/* 札の上の表示（小さい札でもはみ出さない大きさ） */
.pkt-board .pks-dmg{font-size:10px;min-width:20px;height:18px;line-height:18px;right:-4px;top:-4px}
.pkt-board .pks-stk{font-size:9px;bottom:auto;top:16px;right:2px}
.pkt-board .pks-es{bottom:-6px}
.pkt-board .pks-e{width:13px;height:13px;line-height:13px;font-size:8px}
.pkt-board .pks-cd i{font-size:9px;line-height:14px}
.pkt-hp{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);white-space:nowrap;font-size:9px;font-weight:800;color:#fff;background:rgba(0,0,0,.72);border-radius:5px;padding:0 4px;line-height:14px}
.pkt-oa .pkt-hp{font-size:8px;padding:0 3px;line-height:12px;bottom:7px}

/* カードの向き（特殊状態） */
.pkt-pi{display:block;width:100%;height:100%;transition:transform .45s}
.pkt-pi img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.pkt-pi.is-sleep{transform:rotate(-90deg) scale(.72)}
.pkt-pi.is-para{transform:rotate(90deg) scale(.72)}
.pkt-pi.is-conf{transform:rotate(180deg)}
.pkt-back{display:block;width:100%;height:100%;border-radius:6px;background:linear-gradient(135deg,#2e4a8b,#1b2d57);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.pkt-cd{display:inline-block;font-size:10px;font-weight:800;color:#fff;border-radius:4px;padding:0 3px;line-height:16px;margin-right:4px}

/* 光らせる */
.pks .pkt-hl,.pkt-layer .pkt-hl{position:relative;z-index:3;outline:3px solid var(--acc) !important;outline-offset:2px;animation:pktpulse 1.2s ease-in-out infinite}
.pks .pkt-hl2{outline:2px dashed #e0b400 !important;outline-offset:2px}
.pks .pkt-sel{outline:3px solid var(--red) !important;outline-offset:1px;transform:translateY(-6px);z-index:4}
@keyframes pktpulse{0%,100%{box-shadow:0 0 0 0 rgba(245,196,0,.65)}50%{box-shadow:0 0 0 8px rgba(245,196,0,0)}}
.pks-hand.pkt-hl2{outline-offset:4px;border-radius:8px}

/* 動き */
.is-shuf{animation:pktshuf .6s}
@keyframes pktshuf{0%,100%{transform:none}20%{transform:translateX(-6px) rotate(-4deg)}40%{transform:translateX(6px) rotate(4deg)}60%{transform:translateX(-4px) rotate(-2deg)}80%{transform:translateX(4px) rotate(2deg)}}
.pkt-in{animation:pktin .45s ease-out}
@keyframes pktin{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}

/* ガイド（盤面の下。高さはいちばん長い説明に合わせて固定。広い画面ではボタンを右に） */
.pkt-guide{flex:none;height:var(--pkt-gh,auto);overflow:auto;background:#fff;border:2px solid var(--acc);border-radius:14px;padding:6px 12px 8px}
.pkt-guide.pkt-meas{position:absolute;visibility:hidden;height:auto;left:0;top:0;pointer-events:none}
.pkt-gh{font-size:11px;color:var(--sub);margin:0 0 2px !important;font-weight:700}
.pkt-say{font-size:13px;line-height:1.55}
.pkt-say small,.pkt-sg small{display:inline-block;font-size:12px;color:var(--sub);line-height:1.5;margin-top:2px}
.pkt-gb .pks-btns{margin:6px 0 0}
.pkt-gb .pks-b{min-height:38px;padding:6px 12px !important}
@container (min-width:560px){
  .pkt-guide:not(.is-end){display:flex;gap:14px;align-items:center}
  .pkt-guide:not(.is-end) .pkt-gt{flex:1 1 auto;min-width:0}
  .pkt-guide:not(.is-end) .pkt-gb{flex:0 0 170px}
  .pkt-guide:not(.is-end) .pkt-gb .pks-btns{margin:0}
  .pkt-say{font-size:14px}
}
.pkt-guide.is-end{border-color:var(--good)}
.pkt-guide.is-end .pkt-gh{color:var(--good);font-size:13px}
.pkt-guide.is-end .pks-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pkt-guide.is-end .pks-b{font-size:13px;min-height:40px}
.pkt-sg{background:#fff8d6;border:1px solid #f0dc8a;border-radius:10px;padding:8px 10px;font-size:13px;margin:0 40px 10px 0}

/* パネル */
.pkt-se{font-size:12px;color:var(--ink);font-weight:700}
.pkt-cost{display:inline-flex;gap:1px;color:#9a9a9a;font-size:12px}
.pkt-coin{width:120px;height:120px;border-radius:50%;margin:14px auto;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;color:#5b4300;background:radial-gradient(circle at 35% 30%,#fff2a8,#f5c400 55%,#c99a00);box-shadow:0 4px 10px rgba(0,0,0,.25),inset 0 -4px 0 rgba(0,0,0,.12)}
.pkt-coin.is-flip{animation:pktflip 1s ease-out}
.pkt-coin.is-tail{background:radial-gradient(circle at 35% 30%,#e8ecf3,#9aa6b8 60%,#6b778a);color:#253042}
@keyframes pktflip{0%{transform:translateY(0) rotateX(0)}40%{transform:translateY(-40px) rotateX(900deg)}100%{transform:translateY(0) rotateX(1800deg)}}
.pkt-cr{text-align:center;font-weight:800;font-size:16px}
.pkt-tw{overflow-x:auto;margin:6px 0}
.pkt-tbl{border-collapse:collapse;width:100%;font-size:12px;min-width:460px}
.pkt-tbl th,.pkt-tbl td{border:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}
.pkt-tbl thead th{background:var(--soft);font-size:11px}
.pkt-tbl tbody th{white-space:nowrap;background:#fffdf3}
.pkt-ul{font-size:13px;margin:8px 0 !important}
.pkt-ul li{margin:3px 0}

/* メッセージはガイドに重ならないよう上に出す */
.pkt-layer .pks-toast{top:calc(var(--wp-admin--admin-bar--height,0px) + 64px);bottom:auto;transform:translate(-50%,-20px)}
.pkt-layer .pks-toast.is-on{transform:translate(-50%,0)}
.pkt-stage .pks-tn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}