/* PLAY THE RULES（ルール体験）— 試作「PLAY THE RULES」をテーマ用にしたもの */
.ai-ptr{display:flex;flex-direction:column;gap:20px;--ink-soft:#244766;--f-jp-head:var(--f-head)}
.ai-ptr *{box-sizing:border-box}
.ai-ptr .stage{position:relative;border-radius:10px;overflow:hidden;background:#3AAEDD;box-shadow:0 0 0 4px var(--navy);aspect-ratio:16/10;max-width:100%}
.ai-ptr .stage canvas{display:block;width:100%;height:100%}
.ai-ptr .hint{position:absolute;left:16px;bottom:12px;font-family:var(--f-jp-head);color:var(--white);font-size:clamp(12px,1.8vw,16px);opacity:.95;pointer-events:none;text-shadow:0 1px 2px rgba(11,31,58,.5)}
.ai-ptr .fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:700;padding:16px;text-align:center}
/* 吹き出し（斜めの帯） */
.ai-ptr .pop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .2s;padding:12px}
.ai-ptr .pop.show{opacity:1}
.ai-ptr .band{transform:skewY(-4deg) scale(.6);transition:transform .35s cubic-bezier(.2,1.6,.4,1);background:var(--white);
  padding:clamp(14px,2.6vw,26px) clamp(22px,5vw,64px) clamp(22px,3.8vw,40px);box-shadow:10px 10px 0 var(--navy);text-align:center;width:min(92%,880px)}
.ai-ptr .pop.show .band{transform:skewY(-4deg) scale(1)}
.ai-ptr .band>*{transform:skewY(4deg)}
.ai-ptr .tag{display:inline-block;font-family:var(--f-display);font-size:clamp(14px,2vw,20px);letter-spacing:.08em;padding:2px 12px;border-radius:999px;color:var(--white);background:var(--navy)}
.ai-ptr .tag.ng{background:var(--ng)}
.ai-ptr .tag.pt{background:var(--orange);color:var(--navy)}
.ai-ptr .big{font-family:var(--f-display);font-size:clamp(44px,9vw,110px);line-height:1;margin:6px 0 4px;color:var(--navy)}
.ai-ptr .big.long{font-size:clamp(32px,6.6vw,84px)}
.ai-ptr .big em{font-style:normal;color:var(--orange)}
.ai-ptr .pop.ng .big{color:var(--ng)}
.ai-ptr .jp{font-family:var(--f-jp-head);font-size:clamp(16px,2.6vw,28px);margin:0}
.ai-ptr .sub{font-size:clamp(12px,1.6vw,16px);line-height:1.6;color:var(--ink-soft);margin:8px auto 0;font-weight:700;max-width:34em}
.ai-ptr .btns{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ai-ptr .btn{appearance:none;border:0;cursor:pointer;background:var(--navy);color:var(--white);border-radius:8px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .12s, background .12s;box-shadow:0 5px 0 #06122A}
.ai-ptr .btn.wide{grid-column:span 2}
.ai-ptr .btn .en{font-family:var(--f-display);font-size:clamp(22px,3.4vw,34px);letter-spacing:.03em;line-height:1}
.ai-ptr .btn .ja{font-family:var(--f-body);font-weight:700;font-size:13px;opacity:.8}
.ai-ptr .btn:hover{transform:translateY(-2px)}
.ai-ptr .btn:active{transform:translateY(3px);box-shadow:0 2px 0 #06122A}
.ai-ptr .btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.ai-ptr .btn.on{background:var(--orange);color:var(--navy);box-shadow:0 5px 0 #B85A00}
.ai-ptr .btn[disabled]{cursor:default}
.ai-ptr .btn[disabled]:not(.on){opacity:.45}
.ai-ptr .points{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;font-weight:700}
.ai-ptr .points span b{font-family:var(--f-display);font-weight:400;font-size:20px;color:var(--navy);margin-left:4px;font-variant-numeric:tabular-nums}
.ai-ptr .sub br.pc{display:none}
.ai-ptr @media (min-width:768px){.sub br.pc{display:inline}
.ai-ptr }
.note{font-size:12px;line-height:1.7;color:var(--ink-soft);margin:0}
.ai-ptr @media (max-width:640px){.btns{grid-template-columns:repeat(2,1fr)}
.ai-ptr }
@media (prefers-reduced-motion:reduce){.band{transition:none}

.ai-ptr .stage{box-shadow:0 0 0 4px var(--navy)}
.ai-ptr .note{max-width:60em}