/* 2026-11-01 item 4: 猫選び (4a) / チュートリアル (4b) / 30秒の遊び方アニメ (4c). Full-body cats: /assets/cats-body/<id>.webp */
/* top screen: one row of three small buttons under AI対戦 / 対人戦 */
.tt-more { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(6 * var(--u)); margin: calc(12 * var(--u)) 0 auto; }
.tt-mb { height: calc(52 * var(--u)); border-radius: calc(12 * var(--u)); padding: 0 calc(6 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); min-width: 0;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); color: #f1eaea; text-align: left; font-size: calc(12 * var(--u)); letter-spacing: -.02em; }
.tt-mb > i { font-style: normal; flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-size: calc(12 * var(--u));
  background: rgba(255, 77, 77, .18); border: 1px solid rgba(255, 120, 120, .6); }
.tt-mb span { min-width: 0; line-height: 1.15; } .tt-mb b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.tt-mb b.fit { font-size: calc(11.5 * var(--u)); letter-spacing: -.03em; } #ttTutor > i { display: none; } #ttTutor { padding-left: calc(10 * var(--u)); }
.tt-mb small { display: block; font-size: calc(10 * var(--u)); opacity: .7; white-space: nowrap; }
.tt-mb:active { transform: scale(.97); }
.tt-catimg { width: calc(28 * var(--u)) !important; height: calc(28 * var(--u)) !important; }
.tt-catimg, .catRowImg { flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .1); border: 1.5px solid #ffb4b4; display: grid; place-items: center; }
.tt-catimg img, .catRowImg img { width: 100%; height: 100%; object-fit: cover; }
@media (orientation: landscape) and (max-height: 520px) { .tt-more { grid-column: 2; grid-row: 5; margin: calc(10 * var(--u)) 0 auto; align-self: start; } }
/* settings screen: 「あなたの猫」 row under なまえ */
.catRow { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); --u: 1px; }
.catRow .catRowImg { width: 44px; height: 44px; }
.catRowTxt { flex: 1; min-width: 0; font-size: 13px; } .catRowTxt b { font-size: 15px; margin-left: 4px; } .catRowTxt small { display: block; font-size: 11px; opacity: .65; }

/* shared overlay */
.gd-ov { position: fixed; inset: 0; z-index: 60; background: radial-gradient(120% 90% at 50% 0%, #3a0d12 0%, #160709 55%, #0b0405 100%); color: #f4eeee;
  display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.gd-ov.hidden { display: none; }
.gd-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 77, 77, .25); }
.gd-head h2 { margin: 0; flex: 1; font-size: 18px; letter-spacing: .06em; }
.gd-x { width: 38px; height: 38px; border-radius: 50%; padding: 0; font-size: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.gd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; width: 100%; max-width: 760px; margin: 0 auto; }
.gd-foot { flex: none; display: flex; gap: 10px; padding: 10px 14px 14px; width: 100%; max-width: 760px; margin: 0 auto; }
.gd-foot button { flex: 1; height: 46px; border-radius: 12px; font-size: 15px; font-weight: 800; }
.gd-btn2 { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #eee; }
.gd-btn1 { background: linear-gradient(135deg, #d42a35, #7a0f19); border: 1px solid #ff8a8a; color: #fff; }
.gd-btn1:disabled, .gd-btn2:disabled { opacity: .35; }

/* 4a 猫選び */
.cp-wrap { display: flex; gap: 14px; align-items: stretch; }
.cp-prev { flex: none; width: 34%; max-width: 230px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center;
  background: radial-gradient(closest-side, rgba(255, 77, 77, .28), transparent 80%); }
.cp-prev img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); animation: cpBob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.cp-prev .cp-rand { width: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center; font-size: 64px; }
.cp-prev b { font-size: 20px; margin-top: 4px; } .cp-prev small { font-size: 11px; opacity: .7; }
@keyframes cpBob { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-4px) scaleY(1.015); } }
.cp-grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-content: start; }
.cp-c { position: relative; padding: 4px 2px 3px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .12); color: #eee; display: flex; flex-direction: column; align-items: center; }
.cp-c img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }
.cp-c span { font-size: 11px; font-weight: 700; white-space: nowrap; }
.cp-c[aria-pressed="true"] { border-color: #ffd36b; background: rgba(255, 211, 107, .14); box-shadow: 0 0 0 2px rgba(255, 211, 107, .35); }
.cp-c[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 3px; right: 5px; width: 18px; height: 18px; border-radius: 50%; background: #ffd36b; color: #3a0d12; font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.cp-rnd { grid-column: 1 / -1; padding: 8px; flex-direction: row; justify-content: center; gap: 6px; }
.cp-rnd span { font-size: 13px; }
.cp-note { font-size: 11.5px; opacity: .72; margin: 10px 0 0; line-height: 1.5; }
@media (max-width: 560px) { .cp-wrap { flex-direction: column; } .cp-prev { width: 100%; max-width: none; flex-direction: row; justify-content: center; gap: 10px; height: 27vh; }
  .cp-prev img, .cp-prev .cp-rand { width: auto; height: 100%; } .cp-prev .cp-pn { display: flex; flex-direction: column; text-align: left; } }
@media (orientation: landscape) and (max-height: 520px) { .cp-prev { max-width: 160px; } .cp-grid { grid-template-columns: repeat(5, 1fr); } .cp-c img { max-height: 17vh; } .cp-prev .cp-pn { display: flex; flex-direction: column; align-items: center; } .cp-prev .cp-rand { font-size: 48px; } }

/* 4b チュートリアル */
.tu-page { display: flex; flex-direction: column; gap: 10px; }
.tu-guide { display: flex; align-items: flex-end; gap: 8px; }
.tu-guide img { flex: none; width: 96px; aspect-ratio: 3 / 4; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); animation: cpBob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.tu-bub { position: relative; flex: 1; margin-bottom: 18px; padding: 10px 12px; border-radius: 14px; background: #fff7ef; color: #2a1414; font-size: 14px; line-height: 1.6; font-weight: 600; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.tu-bub::before { content: ""; position: absolute; left: -9px; bottom: 16px; border: 9px solid transparent; border-right-color: #fff7ef; border-left: 0; }
.tu-bub small { display: block; font-size: 11px; color: #9a5b5b; font-weight: 800; letter-spacing: .08em; }
.tu-h { margin: 2px 0 0; font-size: 19px; color: #ffd36b; letter-spacing: .04em; }
.tu-ill { border-radius: 14px; background: rgba(10, 70, 45, .55); border: 1px solid rgba(160, 255, 200, .2); padding: 12px; }
.tu-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; flex-wrap: wrap; }
.tu-lab { flex: none; min-width: 64px; font-size: 12px; font-weight: 800; color: #bfe9cf; }
.tu-cards { display: flex; gap: 4px; }
.tu-card { width: 38px; aspect-ratio: 5 / 7; border-radius: 4px; background: #fff center/cover no-repeat; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); transition: transform .3s, box-shadow .3s, opacity .3s; }
.tu-card.on { box-shadow: 0 0 0 2px #ffd36b, 0 4px 10px rgba(255, 211, 107, .5); transform: translateY(-4px); }
.tu-card.dim { opacity: .35; }
.tu-card.sel { transform: translateY(-12px); box-shadow: 0 0 0 2px #ff6b6b, 0 6px 12px rgba(0, 0, 0, .6); }
.tu-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.tu-flow span { padding: 5px 9px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-weight: 700; }
.tu-flow span.hl { background: rgba(255, 211, 107, .2); border-color: #ffd36b; color: #ffe39a; }
.tu-flow i { font-style: normal; opacity: .55; }
.tu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tu-side { border-radius: 12px; padding: 9px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .15); font-size: 12.5px; line-height: 1.5; }
.tu-side h4 { margin: 0 0 4px; font-size: 14px; } .tu-side.b h4 { color: #8fd3ff; } .tu-side.h h4 { color: #ffb37a; }
.tu-side .tu-card { width: 26px; }
.tu-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tu-games li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border-radius: 10px; background: rgba(0, 0, 0, .25); font-size: 12.5px; line-height: 1.45; }
.tu-games b { flex: none; min-width: 7.2em; color: #ffd36b; }
.tu-dots { display: flex; justify-content: center; gap: 6px; padding-top: 4px; }
.tu-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); } .tu-dots i.on { background: #ffd36b; width: 18px; border-radius: 4px; }
.tu-note { font-size: 12px; opacity: .78; line-height: 1.55; margin: 0; }
@media (min-width: 700px) { .tu-guide img { width: 140px; } .tu-card { width: 50px; } .tu-bub { font-size: 15px; } }
@media (orientation: landscape) and (max-height: 520px) { .tu-guide { align-items: center; } .tu-guide img { width: 62px; } .tu-bub { margin: 0; font-size: 13px; line-height: 1.5; padding: 7px 12px; } .tu-bub::before { bottom: 50%; transform: translateY(50%); } .tu-h { margin: 8px 0 6px; } }

/* 4c 30秒の遊び方アニメ */
.ht-stage { position: relative; flex: 1; min-height: 0; width: 100%; max-width: 760px; margin: 0 auto; overflow: hidden; }
.ht-felt { position: absolute; left: 4%; right: 4%; top: 4%; bottom: 33%; border-radius: 26px; background: radial-gradient(ellipse at 50% 40%, #1e8a5a 0%, #0f5a3a 60%, #093826 100%);
  box-shadow: inset 0 0 0 5px #5a2a12, inset 0 0 0 7px #c48a3a, 0 10px 30px rgba(0, 0, 0, .6); }
.ht-ttl { position: absolute; left: 0; right: 0; top: 18%; text-align: center; transition: opacity .5s, transform .5s; z-index: 3; }
.ht-ttl b { display: block; font-size: clamp(22px, 6vw, 38px); letter-spacing: .08em; color: #ffe39a; text-shadow: 0 3px 0 #5a1010, 0 0 18px rgba(255, 120, 80, .5); }
.ht-ttl small { font-size: 13px; opacity: .85; }
.ht-cats { position: absolute; left: 0; right: 0; top: 36%; display: flex; justify-content: center; gap: 2%; z-index: 3; transition: opacity .5s; }
.ht-cats img { width: 22%; max-width: 120px; aspect-ratio: 3 / 4; object-fit: contain; animation: htHop 1.2s ease-in-out infinite; transform-origin: 50% 100%; }
.ht-cats img:nth-child(2) { animation-delay: -.4s; } .ht-cats img:nth-child(3) { animation-delay: -.8s; }
@keyframes htHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10%) scaleY(1.03); } 55% { transform: translateY(0) scaleY(.97); } }
.ht-stage:not(.s0) .ht-ttl, .ht-stage:not(.s0) .ht-cats { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.ht-lab { position: absolute; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #bfe9cf; opacity: 0; transition: opacity .4s; }
.ht-board { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); display: flex; gap: 1.2%; width: 74%; justify-content: center; }
.ht-board .ht-lab { left: 0; right: 0; top: -20px; text-align: center; }
.ht-hand { position: absolute; left: 50%; bottom: 35%; transform: translateX(-50%); display: flex; gap: 1.2%; width: 74%; justify-content: center; }
.ht-hand .ht-lab { left: 0; right: 0; bottom: -20px; text-align: center; }
.ht-stage.s1 .ht-hand .ht-lab, .ht-stage.s2 .ht-board .ht-lab { opacity: 1; }
.ht-c { position: relative; width: 17%; max-width: 74px; aspect-ratio: 5 / 7; perspective: 600px; }
.ht-c > i { position: absolute; inset: 0; border-radius: 6%; background: #fff center/cover no-repeat; box-shadow: 0 3px 8px rgba(0, 0, 0, .55); backface-visibility: hidden; transition: transform .5s; }
.ht-c > i.bk { transform: rotateY(180deg); }
.ht-stage.s4 .ht-c.x > i.fr { transform: rotateY(-180deg); } .ht-stage.s4 .ht-c.x > i.bk { transform: rotateY(0deg); }
.ht-hand .ht-c { opacity: 0; transform: translateY(-160%) scale(.6); transition: opacity .35s, transform .55s cubic-bezier(.2, .8, .3, 1.1); transition-delay: calc(var(--i) * .15s); }
.ht-stage.s1 .ht-hand .ht-c { opacity: 1; transform: none; }
.ht-board .ht-c { opacity: 0; transform: translateY(40%) scale(.7); transition: opacity .35s, transform .5s cubic-bezier(.2, .8, .3, 1.1); transition-delay: calc(var(--i) * .18s); }
.ht-stage.s2 .ht-board .ht-c.f { opacity: 1; transform: none; }
.ht-stage.s5 .ht-board .ht-c.t { opacity: 1; transform: none; transition-delay: 0s; }
.ht-stage.s5b .ht-board .ht-c.r { opacity: 1; transform: none; transition-delay: 0s; }
.ht-stage.s3 .ht-hand .ht-c.x { transform: translateY(-22%); transition-delay: 0s; }
.ht-stage.s3 .ht-hand .ht-c.x > i { box-shadow: 0 0 0 3px #ff6b6b, 0 6px 12px rgba(0, 0, 0, .6); }
.ht-stage.s4 .ht-hand .ht-c.x { transform: none; }
.ht-stage.s4 .ht-hand .ht-c.x > i { box-shadow: 0 0 0 3px #ffd36b, 0 4px 12px rgba(255, 211, 107, .6); }
.ht-xtag { position: absolute; left: 50%; top: -24%; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; background: #ff4d4d; color: #fff; font-size: 10px; font-weight: 900; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.ht-stage.s3:not(.s4) .ht-c.x .ht-xtag { opacity: 1; }
.ht-pot { position: absolute; left: 50%; top: 47%; transform: translateX(-50%); display: flex; gap: 8px; opacity: 0; transition: opacity .4s; }
.ht-stage.s2 .ht-pot { opacity: 1; }
.ht-pot span { padding: 4px 12px; border-radius: 99px; background: rgba(0, 0, 0, .45); border: 1px solid #ffd36b; color: #ffe39a; font-weight: 800; font-size: 13px; white-space: nowrap; transition: transform .6s, background .4s, border-color .4s; }
.ht-pot span.h2 { display: none; }
.ht-stage.s6 .ht-pot span.h1 { transform: translateX(-12%); border-color: #8fd3ff; color: #cfeaff; } .ht-stage.s6 .ht-pot span.h2 { display: inline-block; border-color: #ffb37a; color: #ffd9b8; transform: translateX(12%); }
.ht-stage.s6 .ht-c { transition-delay: 0s !important; }
.ht-stage.s6:not(.s7) .ht-c.bs > i { box-shadow: 0 0 0 3px #8fd3ff, 0 0 14px rgba(143, 211, 255, .8); }
.ht-stage.s6:not(.s7) .ht-c:not(.bs) { opacity: .35 !important; }
.ht-stage.s7:not(.s8) .ht-hand .ht-c > i { box-shadow: 0 0 0 3px #ffb37a, 0 0 14px rgba(255, 179, 122, .8); }
.ht-stage.s7:not(.s8) .ht-board .ht-c { opacity: .35 !important; }
.ht-res { position: absolute; left: 50%; top: 39%; transform: translateX(-50%); width: max-content; max-width: 92%; z-index: 3; padding: 5px 12px; border-radius: 10px; background: rgba(0, 0, 0, .62); text-align: center; line-height: 1.35; font-weight: 900; font-size: clamp(13px, 3.6vw, 18px); opacity: 0; transition: opacity .4s; text-shadow: 0 2px 4px rgba(0, 0, 0, .8); }
.ht-res.b { color: #cfeaff; } .ht-res.h { color: #ffd9b8; }
.ht-stage.s6:not(.s7) .ht-res.b, .ht-stage.s7:not(.s8) .ht-res.h { opacity: 1; }
.ht-games { position: absolute; left: 6%; right: 6%; top: 12%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; z-index: 4; }
.ht-games span { padding: 9px 6px; border-radius: 12px; text-align: center; background: rgba(20, 6, 8, .88); border: 1px solid #ffd36b; color: #ffe39a; font-weight: 800; font-size: clamp(12px, 3.4vw, 15px);
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .3, 1.3); transition-delay: calc(var(--i) * .2s); }
.ht-stage.s8 .ht-games span { opacity: 1; transform: none; }
.ht-stage.s8 .ht-felt, .ht-stage.s8 .ht-board, .ht-stage.s8 .ht-hand, .ht-stage.s8 .ht-pot { filter: blur(2px) brightness(.5); transition: filter .5s; }
.ht-end { position: absolute; left: 0; right: 0; top: 60%; display: flex; justify-content: center; gap: 10px; z-index: 5; opacity: 0; pointer-events: none; transition: opacity .4s; }
.ht-stage.s9 .ht-end { opacity: 1; pointer-events: auto; }
.ht-end button { height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 800; font-size: 15px; }
.ht-nar { position: absolute; left: 2%; right: 2%; bottom: 1%; height: 31%; display: flex; align-items: flex-end; gap: 6px; z-index: 6; }
.ht-nar img { flex: none; height: 100%; aspect-ratio: 3 / 4; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); animation: cpBob 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.ht-nar img.pop { animation: htPop .45s ease-out, cpBob 1.6s ease-in-out .45s infinite; }
@keyframes htPop { 0% { transform: translateY(30%) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ht-say { position: relative; flex: 1; margin-bottom: 8%; padding: 10px 12px; border-radius: 14px; background: #fff7ef; color: #2a1414; font-size: clamp(13px, 3.7vw, 17px); line-height: 1.5; font-weight: 700; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.ht-say::before { content: ""; position: absolute; left: -9px; bottom: 16px; border: 9px solid transparent; border-right-color: #fff7ef; border-left: 0; }
.ht-say small { display: block; font-size: 11px; color: #a0524f; letter-spacing: .08em; }
.ht-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; width: 100%; max-width: 760px; margin: 0 auto; }
.ht-bar button { width: 40px; height: 40px; border-radius: 50%; padding: 0; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 15px; }
.ht-prog { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; } .ht-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff6b6b, #ffd36b); }
.ht-time { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.ht-stage.seek, .ht-stage.seek * { transition: none !important; }
@media (orientation: landscape) and (max-height: 520px) {
  .ht-felt { left: 26%; right: 2%; bottom: 3%; } .ht-board, .ht-hand { left: 63%; width: 68%; } .ht-hand { bottom: 8%; } .ht-board { top: 16%; } .ht-pot { left: 63%; top: 46%; }
  .ht-c { max-width: 54px; } .ht-res { left: 63%; top: 37%; max-width: 70%; } .ht-ttl, .ht-cats, .ht-games, .ht-end { left: 26%; } .ht-games { top: 8%; }
  .ht-nar { left: 1%; right: auto; width: 25%; height: 96%; flex-direction: column; align-items: stretch; justify-content: flex-end; } .ht-nar img { height: 46%; align-self: center; }
  .ht-say { margin: 0 0 4px; order: -1; font-size: 13px; } .ht-say::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .cp-prev img, .tu-guide img, .ht-nar img, .ht-cats img { animation: none; } }