/* =========================================================
   おうちの人の マシン（v13.12）
   子どもの 画面（カプセルマシンの 4つめの 台・もちものの チケット）と
   おうちの人ページの「ごほうびマシン」（明るい 紙色・.pp の 部品を 借りる）。
   ルールは js/core/prize.js・画面は js/ui/prize.js と js/ui/capsule.js。
   ========================================================= */

.przico { display: inline-block; flex: none; line-height: 0; }
.przico svg { display: block; overflow: visible; }

/* ---- 子どもの マシン ---- */
.capchips--one { display: none; }
.capchip--home { color: #ffe9a3; background: linear-gradient(#5a3f16, #3b2a0e); box-shadow: 0 4px 0 #1e1506, inset 0 2px 0 rgba(255,240,190,.18); }
.capchip--home.is-on { color: #3a2606; background: linear-gradient(#fff3c4, #ffc93c 60%, #f2a01c); box-shadow: 0 4px 0 #a06a10, inset 0 2px 0 rgba(255,255,255,.7), 0 0 14px rgba(255,212,71,.5); }

/* 金の マシン（ふつうの マシンの 色ちがい） */
.capstage--home { height: 124px; margin-top: 4px; }
.capmc--home { transform: scale(.8); transform-origin: 50% 100%; }
.capmc--home .capmc__dome { background: linear-gradient(160deg, rgba(255,250,228,.96), rgba(255,214,120,.78)); box-shadow: inset 0 4px 0 rgba(255,255,255,.8), inset 0 -6px 10px rgba(140,90,10,.3), 0 3px 0 #8a5a08; }
.capmc--home .capmc__body { background: linear-gradient(#ffd45a, #e0a019 55%, #b8791f); box-shadow: 0 6px 0 #7a4f08, inset 0 3px 0 rgba(255,255,255,.5); }
.capmc--home .capmc__knob { background: linear-gradient(#ff8a7a, #e0463c); box-shadow: 0 3px 0 #8a1f18, inset 0 2px 0 rgba(255,255,255,.6); }
.capmc--home .capmc__slot { background: #4a2e06; }
.capmc--home .capmc__ball--1 { background: #ff8fb0; }
.capmc--home .capmc__ball--2 { background: #4fd3ff; }
.capmc--home .capmc__ball--3 { background: #ffd447; }

.caphome__lead { margin: 4px 0 6px; font-family: var(--f-head); font-size: 14px; color: #ffd447; }
/* 景品の ならび（8こまで。高い ときは この 中だけ スクロール） */
.caphome__list { display: flex; flex-direction: column; gap: 6px; max-height: 216px; overflow-y: auto; margin: 0 0 10px; padding: 2px; text-align: left; }
.caphome__one {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 12px; background: rgba(10,16,36,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.caphome__one.lv--3, .caphome__one.lv--4 { box-shadow: inset 0 0 0 1px rgba(255,212,71,.55); }
.caphome__one.lv--5 { box-shadow: inset 0 0 0 1px rgba(180,140,255,.8), 0 0 12px rgba(180,140,255,.35); }
.caphome__one.is-due { box-shadow: inset 0 0 0 2px #ffd447, 0 0 14px rgba(255,212,71,.55); }
.caphome__txt { display: flex; flex-direction: column; min-width: 0; }
.caphome__name { font-family: var(--f-head); font-size: 14px; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.caphome__note { font-size: 11px; font-weight: 700; line-height: 1.35; color: #ffd447; }
.caphome__pct { padding: 2px 8px; border-radius: 999px; background: #0f1730; color: #cfe0ff; font-family: var(--f-head); font-size: 13px; font-variant-numeric: tabular-nums; }
.lv--5 .caphome__pct { color: #e3d2ff; }
.caphome__none { margin: 10px 0; font-size: 13px; color: var(--tx-sub); text-align: center; }

/* 当たった ときの チケット */
.capticket {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px;
  margin: 4px 0 2px; padding: 8px 26px; border-radius: 8px;
  background: linear-gradient(#fff6d8, #ffe39a); color: #5a3a06;
  box-shadow: 0 4px 0 #b8791f, 0 0 18px rgba(255,212,71,.55);
}
.capticket::before, .capticket::after { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #0b1128; }
.capticket::before { left: -7px; }
.capticket::after { right: -7px; }
.capticket__t { font-family: var(--f-head); font-size: 16px; }
.capticket__s { font-size: 11px; font-weight: 700; }

/* なかまタブの ボタン：おうちの マシンが ある ときは 光の ふち */
.capbtn--home { box-shadow: 0 7px 0 #a06a10, 0 12px 20px rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.6), 0 0 0 3px rgba(255,240,190,.55); }

/* ---- もちもの：ごほうび チケット ---- */
.tix {
  position: relative; margin-top: 12px; padding: 12px 10px; border-radius: 16px;
  background: linear-gradient(var(--hd-1), var(--hd-2));
  box-shadow: 0 6px 0 var(--hd-edge), inset 0 0 0 2px rgba(255,212,71,.6), inset 0 2px 0 rgba(255,255,255,.1);
}
.tix__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tix__one {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 8px; border-radius: 10px; background: linear-gradient(#fff6d8, #ffe39a); color: #4a3006;
  box-shadow: 0 3px 0 #b8791f;
}
.tix__one .przico { grid-row: span 2; }
.tix__name { font-family: var(--f-head); font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.tix__st { font-size: 11px; font-weight: 700; color: #a8741a; }
.tix__one.is-given { background: #2a3456; color: #9fb2dd; box-shadow: none; opacity: .7; }
.tix__one.is-given .tix__st { color: #9fb2dd; }

/* ---- おうちの人ページ ---- */
.przintro p { margin: 0; line-height: 1.7; }
.przintro p + p { margin-top: 6px; }
.przpin { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.przpin__t { margin: 0; font-family: var(--pp-fh); font-weight: 700; font-size: 17px; color: var(--pp-ink); }
.przpin__s { margin: 0; max-width: 30em; line-height: 1.6; }
.przpin__dots { display: flex; gap: 14px; margin: 4px 0; }
.przpin__dots i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px #cfc7b6; }
.przpin__dots i.is-on { background: var(--pp-ink); box-shadow: none; }
.przpin__keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; }
.przpin__k { height: 54px; border: 1px solid #d9d3c6; border-radius: 14px; background: #fff; color: var(--pp-ink); font-family: var(--pp-fh); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; cursor: pointer; }
.przpin__k:active { background: #f1ece1; }
.przpin__k--del { font-size: 14px; color: var(--pp-mut); }
.przpin__forgot { width: auto; padding: 4px 8px; text-align: center; }
.przpin.is-bad { animation: przShake .36s linear; }
.przpin.is-bad .przpin__dots i { box-shadow: inset 0 0 0 2px var(--pp-weak); }
@keyframes przShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.przforgot { display: flex; flex-direction: column; gap: 8px; }
.przforgot p { margin: 0; line-height: 1.7; }

.przrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.przrow--add { margin-top: 10px; }
.przrow--foot { justify-content: space-between; }
.przbtn--danger { color: var(--pp-weak); }
.pp-btn--p.przbtn--danger { background: var(--pp-weak); color: #fff; }

.przitem { justify-content: flex-start; }
.przitem__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.przitem__name { font-weight: 700; font-size: 15px; color: var(--pp-ink); overflow-wrap: anywhere; }
.przitem__state { font-size: 11px; font-weight: 700; color: var(--pp-weak); }
.przitem.is-off .przico, .przitem.is-off .przitem__name { opacity: .5; }
.przhome__t { flex: 1; min-width: 0; line-height: 1.6; }
.przhome__t.is-wait { font-weight: 700; color: #a8741a; }

.przwarn { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #fdecea; color: #8a2a24; font-size: 13px; font-weight: 700; line-height: 1.6; }
.przform { gap: 12px; background: #fbf8f1; }
.przform__h { font-family: var(--pp-fh); font-weight: 700; font-size: 15px; }
.przform__f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--pp-mut); }
.przform__f > span:first-child { font-weight: 700; color: var(--pp-ink); }
.przform .pp-segrow { flex-wrap: wrap; }
.przform__date { max-width: 200px; }
.przicons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.przicons__b { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border: 1px solid #e0d9cb; border-radius: 12px; background: #fff; color: var(--pp-mut); font-size: 11px; cursor: pointer; }
.przicons__b.is-on { border-color: var(--pp-ink); box-shadow: inset 0 0 0 1px var(--pp-ink); color: var(--pp-ink); font-weight: 700; }

.przrates { display: flex; flex-direction: column; gap: 8px; }
.przrate { display: grid; grid-template-columns: minmax(0, 9em) 1fr 3.6em; align-items: center; gap: 10px; font-size: 13px; }
.przrate__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.przrate__bar { height: 8px; border-radius: 4px; background: var(--pp-line2); overflow: hidden; }
.przrate__bar i { display: block; height: 100%; border-radius: 4px; background: var(--pp-gold); }
.przrate__p { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .przpin.is-bad { animation: none; } }