body.pigs-game { background:#f3f8ee; color:#496268; }
body.pigs-game .site-header,body.pigs-game > footer { display:none; }
body.pigs-game #app { width:min(1100px,calc(100% - 28px)); max-width:1100px; padding:0; margin:0 auto; }
.pg-shell { min-height:100dvh; padding:6px 0 18px; }.pg-shell * { box-sizing:border-box; letter-spacing:0; }.pg-shell h1,.pg-shell h2,.pg-shell h3,.pg-shell p { margin-top:0; }.pg-shell h2:focus { outline:none; }
.pg-shell button,.pg-shell .button,.pg-shell summary { min-width:48px; min-height:48px; font:inherit; line-height:1.3; border-radius:6px; }.pg-shell button { cursor:pointer; }.pg-shell button:disabled { cursor:default; }.pg-shell button:focus-visible,.pg-shell input:focus-visible,.pg-shell select:focus-visible,.pg-shell a:focus-visible,.pg-shell summary:focus-visible { outline:3px solid #ad91bb; outline-offset:3px; }
.pg-shell .pg-primary { padding:10px 17px; font-size:18px; font-weight:750; color:#fff; background:#4c9394; border:2px solid #3b7d80; box-shadow:0 3px 0 #386b71; }.pg-primary:hover { background:#3a8185; }.pg-shell .pg-primary:disabled { background:#d7e1d3; border-color:#b7c7b3; color:#728678; box-shadow:none; }.pg-shell .pg-secondary { padding:9px 13px; font-size:16px; color:#57767a; background:#fffdf1; border:2px solid #c4cfba; }.pg-secondary:disabled,.pg-key:disabled { opacity:.55; }
.pg-toolbar { display:grid; grid-template-columns:auto 1fr auto 48px auto; align-items:center; gap:10px; min-height:64px; padding-bottom:7px; }.pg-toolbar h1 { font-family:inherit; font-size:18px; line-height:1.25; margin:0 0 3px; }.pg-toolbar span { font-size:13px; }.pg-toolbar .pg-back { padding:8px; color:#79384b; font-size:14px; white-space:nowrap; }.pg-toolbar .pg-sound { padding:0; font-size:23px; }.pg-motion { display:flex; align-items:center; gap:5px; min-width:48px; min-height:48px; font-size:13px; }.pg-motion input { width:22px; height:22px; accent-color:#4c9394; }
.pg-intro { text-align:center; }.pg-intro > span { display:block; margin:14px 0 9px; font-weight:700; color:#aa8a60; }.pg-intro h2 { font-size:33px; color:#5a8879; margin:0 0 12px; }.pg-intro p { font-size:19px; line-height:1.5; max-width:830px; margin:0 auto 17px; }.pg-cover-image { display:block; width:100%; height:auto; }.pg-intro > .pg-cover-image { max-height:420px; object-fit:contain; margin:20px auto 12px; }.card-art .pg-cover-image { width:100%; height:100%; object-fit:cover; background:#e6edd0; }.pg-intro .pg-intro-note { font-size:15px; }
.pg-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:35px; padding:4px 0; }.pg-heading > span { font-size:15px; font-weight:750; color:#a38c66; }.pg-heading h2 { font-family:inherit; font-size:22px; color:#5b8b7b; margin:0; }.pg-condition { min-height:92px; padding:8px 12px; background:#fffdf2; border-left:4px solid #d4bd87; border-radius:4px; margin:4px 0 9px; }.pg-condition p { font-size:19px; line-height:1.4; margin:0; }.pg-condition > span { display:block; font-size:14px; color:#81917a; line-height:1.35; margin-top:4px; }
.pg-layout { display:grid; grid-template-columns:minmax(0,1fr) 205px; gap:17px; align-items:start; margin:0; min-height:344px; }.pg-cart-scene { min-width:0; position:relative; }.pg-portraits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); height:105px; position:relative; align-items:end; }.pg-yard { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }.pg-portrait { position:relative; display:flex; flex-direction:column; align-items:center; height:103px; z-index:1; }.pg-portrait .pg-pig { height:83px; width:90px; }.pg-portrait > span { font-size:13px; line-height:18px; font-weight:750; color:#627a6a; background:#f3f8eecc; padding:0 7px; border-radius:3px; }
.pg-cart-frame { background:#9ecac4; border:4px solid #76a9a7; border-radius:7px; padding:5px 7px; box-shadow:0 4px 0 #698f8b; }.pg-compartments { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.pg-compartment { background:#e7ecd6; border:2px solid #b8c6a4; border-radius:5px; padding:0 5px 5px; min-width:0; }.pg-basket { display:block; width:100%; height:57px; }.pg-basket-label { display:flex; justify-content:center; align-items:center; gap:7px; min-height:48px; }.pg-basket-label > span,.pg-total-board > span { font-size:14px; color:#5f776b; }.pg-number { display:flex; align-items:center; justify-content:center; font-size:27px; line-height:1.2; min-width:48px; min-height:48px; color:#4c6f73; font-weight:750; }.pg-basket-label .pg-number { background:#fffdf0; border:1px solid #d0c8a5; border-radius:5px; }.pg-input-label { display:block; flex:none; }.pg-input-label input { width:78px; max-width:100%; height:52px; border:3px solid #6d9ca8; background:#fffdf2; border-radius:5px; font:inherit; font-size:29px; font-weight:750; text-align:center; color:#4f7783; }.pg-input-label input::placeholder { opacity:1; color:#8aa8ac; }.pg-total-board { display:flex; justify-content:center; align-items:center; gap:13px; min-height:58px; padding:3px 8px; margin:6px auto 0; max-width:430px; background:#fff2c8; border:2px solid #cbbb90; border-radius:5px; }.pg-total-board > span:first-child { font-size:17px; font-weight:750; }.pg-confirmed { color:#477a66; background:#e0eedc!important; }
.pg-cart-wheels { display:flex; justify-content:space-between; width:76%; height:21px; margin:auto; position:relative; z-index:-1; }.pg-cart-wheels i { display:block; width:38px; height:30px; margin-top:-8px; border:7px solid #849190; background:#dce4d4; border-radius:50%; }.pg-helper { min-height:65px; padding:5px 8px 0; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; color:#66857c; font-size:18px; line-height:1.3; }.pg-helper strong { font-size:20px; color:#547c78; }.pg-helper > span { font-size:15px; }.pg-helper .pg-input-label input { height:48px; width:70px; font-size:25px; }.pg-helper label[for] { font-size:18px; }.pg-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip-path:inset(50%); white-space:nowrap; }
.pg-keypad { display:grid; grid-template-columns:repeat(3,minmax(48px,1fr)); gap:4px; }.pg-shell .pg-key { height:48px; border:2px solid #c0cebb; background:#fffdf0; color:#52777b; font-size:23px; font-weight:750; }.pg-key:hover:not(:disabled) { background:#f5e9c7; }.pg-sidebar h3 { font-family:inherit; font-size:13px; margin:8px 0 5px; color:#7f9276; }.pg-boxes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }.pg-box { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:48px; border:1px dashed #c5ccb7; border-radius:3px; color:#a8af9a; font-size:12px; text-align:center; padding:2px; }.pg-box-packed { border:1px solid #c4b18f; background:#f0e0bb; color:#7d7862; }.pg-box strong { font-size:10px; line-height:1.25; }.pg-box > span { font-size:10px; }
.pg-feedback { display:flex; flex-direction:column; justify-content:center; min-height:90px; padding:8px 12px; margin:9px 0 7px; background:#fcfaee; border-left:4px solid #d0b68c; border-radius:4px; font-size:18px; line-height:1.4; }.pg-feedback strong { font-size:13px; margin-bottom:3px; color:#aa8b6c; }.pg-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:57px; }.pg-tools { display:flex; gap:8px; }.pg-wait { font-size:18px; color:#6c8c7b; }
.pg-help { width:min(660px,calc(100% - 28px)); max-height:90dvh; border:2px solid #b0c6b5; border-radius:8px; padding:22px; background:#fffdf2; color:#496268; font-size:18px; line-height:1.5; }.pg-help::backdrop { background:#49626855; }.pg-help h2 { font-size:25px; }
.pg-finish { text-align:center; }.pg-finish h2 { margin:16px 0 10px; font-size:31px; color:#5a8879; }.pg-finish > p { font-size:19px; }.pg-barn { position:relative; width:min(760px,100%); margin:0 auto 15px; }.pg-barn-art { display:block; width:100%; height:auto; }.pg-barn-sign { position:absolute; left:38%; top:18%; width:24%; font-size:16px; line-height:1.2; color:#8e8267; }.pg-barn-boxes { position:absolute; left:36%; top:44%; width:28%; }.pg-barn-boxes .pg-box { min-height:52px; }.pg-barn-boxes .pg-box strong { font-size:11px; }.pg-finish-pigs { position:absolute; inset:38% 4% 0; display:flex; justify-content:space-between; pointer-events:none; }.pg-finish-pigs .pg-pig { width:22%; height:100%; }.pg-finish-pigs .pg-pig-1 { position:absolute; right:0; }.pg-finish-pigs .pg-pig-2 { position:absolute; right:16%; }
.pg-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0; }.pg-stats > div { padding:12px; border:1px solid #ccd5bd; border-radius:6px; background:#fffdf1; display:flex; flex-direction:column; gap:5px; }.pg-stats strong { font-size:28px; color:#609787; }.pg-stats span { font-size:14px; }.pg-finish-actions { display:flex; justify-content:center; gap:12px; margin:16px 0; }.pg-finish details { text-align:left; border-top:1px solid #c4d2b9; padding:8px 0; font-size:18px; line-height:1.5; }.pg-finish summary { padding:10px 0; cursor:pointer; font-weight:750; }.pg-bonus-options { display:flex; gap:10px; }.pg-bonus-feedback { min-height:54px; margin:10px 0; }.pg-decor fieldset { display:flex; gap:15px; flex-wrap:wrap; border:0; padding:8px 0; margin:0; }.pg-decor legend { font-size:15px; }.pg-decor label { min-height:48px; display:flex; align-items:center; gap:8px; font-size:15px; cursor:pointer; }.pg-decor input { width:23px; height:23px; accent-color:#4c9394; }.pg-swatch { width:26px; height:28px; border:1px solid #a5b7a6; border-radius:3px; }.pg-swatch-0 { background:#93bfc2; }.pg-swatch-1 { background:#d9a594; }.pg-swatch-2 { background:#a9bd94; }.pg-select-label { display:inline-flex!important; margin-right:20px; }.pg-select-label select { min-height:48px; max-width:100%; font:inherit; padding:7px 9px; border:1px solid #b4c7b3; border-radius:5px; background:#fffdf1; color:#567778; }
@keyframes pg-pig-hop { 35%,65% { transform:translateY(-6px); } }
@keyframes pg-wheel-roll { to { transform:rotate(180deg); } }
@keyframes pg-wagon-depart { 0% { transform:translateX(0); } 65% { transform:translateX(7px); } 100% { transform:translateX(0); } }
.phase-travel .pg-pig { animation:pg-pig-hop .65s ease-in-out 2; }.phase-travel .pg-cart-wheels i { animation:pg-wheel-roll 1.3s ease-in-out; }.phase-travel .pg-cart-frame { animation:pg-wagon-depart 1.3s ease; }.pg-paused * { animation:none!important; transition:none!important; }
@media (min-width:901px) and (max-height:760px) { .pg-shell { padding-top:3px; }.pg-toolbar { min-height:59px; }.pg-condition { min-height:85px; }.pg-portraits { height:93px; }.pg-portrait { height:91px; }.pg-portrait .pg-pig { height:73px; }.pg-layout { min-height:332px; }.pg-feedback { min-height:82px; margin-top:7px; } }
@media (max-width:1000px) { .pg-toolbar { grid-template-columns:auto 1fr auto 48px; }.pg-motion { grid-column:1/-1; justify-self:end; }.pg-layout { grid-template-columns:minmax(0,1fr) 170px; gap:10px; }.pg-compartments { gap:4px; }.pg-compartment { padding-left:2px; padding-right:2px; }.pg-basket-label { gap:3px; }.pg-basket-label > span { font-size:11px; }.pg-input-label input { width:66px; }.pg-basket-label .pg-number { min-width:42px; }.pg-condition { min-height:110px; }.pg-condition p { font-size:18px; }.pg-boxes { grid-template-columns:1fr 1fr; }.pg-barn-boxes .pg-boxes { grid-template-columns:repeat(3,1fr); }.pg-controls { flex-wrap:wrap; } }
@media (max-width:760px) { .pg-layout { display:flex; flex-direction:column; min-height:0; }.pg-cart-scene { width:100%; }.pg-sidebar { width:100%; display:grid; grid-template-columns:170px 1fr; gap:8px 14px; align-items:center; }.pg-sidebar h3 { grid-column:2; grid-row:1; margin:0; align-self:end; }.pg-keypad { grid-row:1/3; }.pg-sidebar > .pg-boxes { grid-column:2; grid-row:2; align-self:start; }.pg-boxes { grid-template-columns:repeat(3,minmax(0,1fr)); }.pg-box { min-height:50px; }.pg-heading { align-items:start; flex-direction:column; gap:4px; }.pg-heading h2 { font-size:22px; }.pg-heading > span { font-size:14px; }.pg-condition { min-height:0; }.pg-sidebar { order:1; margin-top:7px; }.pg-play { display:flex; flex-direction:column; }.pg-heading { order:0; }.pg-condition { order:1; }.pg-layout { display:contents; }.pg-cart-scene { order:2; }.pg-feedback { order:3; min-height:120px; }.pg-controls { order:4; }.pg-sidebar { order:5; margin-top:18px; } }
@media (max-width:600px) { body.pigs-game #app { width:calc(100% - 14px); }.pg-toolbar { grid-template-columns:1fr auto 48px; gap:7px; min-height:0; }.pg-toolbar > div { grid-row:1; grid-column:1/3; }.pg-toolbar h1 { font-size:17px; }.pg-toolbar span { font-size:12px; }.pg-toolbar .pg-back { grid-row:2; }.pg-toolbar [data-pg-action="help"] { grid-row:2; grid-column:2; }.pg-toolbar .pg-sound { grid-row:2; grid-column:3; }.pg-motion { grid-row:1; grid-column:3; justify-self:center; flex-direction:column; justify-content:center; margin:0; font-size:10px; }.pg-motion input { width:26px; height:26px; }.pg-heading h2 { font-size:21px; }.pg-condition { padding:8px; }.pg-condition p { font-size:18px; }.pg-condition > span { font-size:13px; }.pg-portraits { height:103px; }.pg-portrait { height:101px; }.pg-portrait .pg-pig { height:80px; width:77px; }.pg-portrait > span { font-size:12px; }.pg-cart-frame { border-width:3px; padding:4px 3px; }.pg-compartments { gap:3px; }.pg-basket { height:49px; }.pg-basket-label { flex-direction:column; gap:1px; min-height:73px; }.pg-basket-label > span { font-size:11px; line-height:1.25; }.pg-number { font-size:24px; }.pg-input-label input { width:65px; height:50px; font-size:26px; }.pg-total-board { gap:9px; padding:3px 5px; min-height:58px; }.pg-total-board > span { font-size:13px; }.pg-total-board > span:first-child { font-size:16px; }.pg-helper { min-height:75px; font-size:17px; gap:4px 8px; }.pg-helper label[for] { font-size:17px; }.pg-helper > span { font-size:14px; }.pg-feedback { min-height:145px; font-size:17px; padding:9px; }.pg-controls > .pg-primary { width:100%; }.pg-tools { width:100%; flex-wrap:wrap; }.pg-sidebar { grid-template-columns:155px 1fr; gap:8px; }.pg-sidebar > .pg-boxes { grid-template-columns:1fr 1fr; }.pg-box strong { font-size:9px; }.pg-box > span { font-size:9px; }.pg-intro h2 { font-size:28px; }.pg-intro p { font-size:17px; }.pg-intro .pg-intro-note { font-size:14px; }.pg-finish h2 { font-size:28px; }.pg-finish > p { font-size:17px; }.pg-stats { grid-template-columns:1fr; gap:7px; }.pg-stats > div { flex-direction:row; align-items:center; text-align:left; gap:12px; }.pg-stats strong { min-width:35px; }.pg-finish-actions { flex-direction:column; }.pg-bonus-options { flex-wrap:wrap; }.pg-barn-sign { font-size:10px; }.pg-barn-boxes .pg-box { min-height:25px; padding:1px; }.pg-barn-boxes .pg-box strong { font-size:6px; }.pg-barn-boxes .pg-box span { font-size:6px; }.pg-barn-boxes .pg-boxes { gap:2px; }.pg-select-label { display:flex!important; flex-wrap:wrap; margin-right:0; }.pg-decor fieldset { gap:8px; } }
@media (prefers-reduced-motion:reduce) { .pg-shell * { animation:none!important; transition:none!important; } }
.pg-helper { min-height:54px; }
.pg-box strong { font-size:12px; }
@media (min-width:601px) { .pg-barn-boxes { left:30%; width:40%; }.pg-barn-boxes .pg-box { min-height:60px; }.pg-barn-boxes .pg-box strong { font-size:14px; }.pg-barn-boxes .pg-box span { font-size:12px; }.pg-finish-pigs .pg-pig { width:13%; }.pg-finish-pigs .pg-pig-2 { right:auto; left:14%; } }
@keyframes pg-lid-close { from { transform:translateY(-10px); } to { transform:translateY(0); } }
.phase-travel .pg-lid { animation:pg-lid-close .4s ease both; }
@media (min-width:901px) and (max-height:760px) { .pg-portraits { height:85px; }.pg-portrait { height:83px; }.pg-portrait .pg-pig { height:65px; }.pg-basket { height:43px; } }
@media (max-width:600px) { .pg-barn-sign { position:static; display:block; width:100%; font-size:16px; margin:7px 0 10px; }.pg-barn-boxes { position:static; width:100%; }.pg-barn-boxes .pg-box { min-height:52px; padding:5px; }.pg-barn-boxes .pg-box strong { font-size:13px; }.pg-barn-boxes .pg-box span { font-size:11px; }.pg-barn-boxes .pg-boxes { gap:5px; }.pg-finish-pigs { position:static; height:110px; display:flex; justify-content:center; gap:12px; margin-top:10px; }.pg-finish-pigs .pg-pig,.pg-finish-pigs .pg-pig-1,.pg-finish-pigs .pg-pig-2 { position:static; width:27%; height:110px; } }