/* Original PNG skin. Dynamic text, focus, progress and input remain in the DOM. */
.primary,.home-actions>.primary{background:transparent url('../assets/ui/button-primary.png') center/100% 100% no-repeat;border:0;box-shadow:none;padding:12px 22px;min-height:52px}
.primary:after{display:none}
.secondary{background:transparent url('../assets/ui/button-secondary.png') center/100% 100% no-repeat;border:0;box-shadow:none;min-height:48px}
.secondary:hover{background:transparent url('../assets/ui/button-secondary.png') center/100% 100% no-repeat;filter:brightness(1.13)}
.game-title{background:transparent url('../assets/ui/title-board.png') center/100% 100% no-repeat;width:344px;height:100px;margin:8px auto 5px;line-height:100px;font-size:49px;letter-spacing:4px;color:#153443;text-shadow:0 1px #ffe3aa;transform:rotate(-3deg)}
.title-sub{font-size:10px}
.panel{border:solid transparent;border-width:45px 20px 29px;border-image-source:url('../assets/ui/panel-pause.png');border-image-slice:76 30 62 30 fill;border-image-repeat:stretch;background:none;border-radius:0;padding:12px 10px 8px;box-shadow:none}
.panel[data-kind=settings]{border-image-source:url('../assets/ui/panel-settings.png')}
.panel[data-kind=crate]{border-image-source:url('../assets/ui/panel-crate.png')}
.panel[data-kind=won]{border-image-source:url('../assets/ui/panel-won.png')}
.panel[data-kind=lost]{border-image-source:url('../assets/ui/panel-lost.png')}
.panel .eyebrow{font-size:8px;letter-spacing:3px}
.panel h2{font-size:25px;letter-spacing:2px}
.result-panel{padding-top:5px}
.result-portrait{margin:-111px auto -32px;width:220px;height:224px}
.result-fact{margin:10px 0 14px}
.result-time{gap:21px}
.result-time strong{font-size:28px}
.panel .primary{margin-top:8px}
.card,.card.type-J,.card.type-B{background:transparent url('../assets/ui/hand-frame.png') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none}
.card:before{display:none}
.card.empty{background:#0b2632;border:1px dashed #44606a;border-radius:9px}
.card:hover{filter:brightness(1.12)}
.card strong{position:absolute;left:6px;right:6px;bottom:9px;color:#263d3c;font-size:10px;line-height:11px;text-align:center}
.card .card-art{top:5px;left:5px;width:53px;height:47px}
#jump{background:transparent url('../assets/ui/jump-button.png') center/100% 100% no-repeat;border:0;box-shadow:none;padding:0}
#jump.held{border:0;filter:brightness(1.16)}
#jump .jump-arrow{opacity:0;height:17px;font-size:0}
#jump strong{font-size:25px}
.jump-meter{margin-top:2px}
.pile-art{width:28px;height:29px;display:block;object-fit:contain}
.pile small{margin-top:1px}
.map-screen{background-image:linear-gradient(#0d2c3d55,#0d2c3da8),url('../assets/ui/map-chart.png');background-size:cover;background-position:center}
.map-compass{width:40px;height:40px;object-fit:contain;margin-left:auto;opacity:.86}
.tower-lock img{width:20px;height:24px;object-fit:contain}
#tide-ring{outline:1px solid #72a5a966;box-shadow:0 0 0 2px #14333e;background-image:url('../assets/ui/tide-ring-frame.png'),conic-gradient(#83e5de var(--angle,0deg),#294d5a 0);background-size:100% 100%}
.tide.danger:before{content:"";width:17px;height:17px;background:url('../assets/ui/water-danger.png') center/contain no-repeat;display:inline-block;margin-right:2px}
.result-buttons{gap:7px}
.result-buttons .primary,.result-buttons .secondary{font-size:11px;letter-spacing:0;padding:12px 7px}
.crate-options{padding:7px 0 9px}
.crate-options .card .card-art{left:10px;top:14px;width:85px;height:79px}
.crate-options .card strong{left:10px;right:10px;bottom:17px;line-height:17px;font-size:15px}
.crate-desc{white-space:pre-line}
.icon-button{width:48px;height:48px}
.panel .plain{min-height:48px}
.settings-row{padding-top:10px;padding-bottom:10px}
.switch{width:48px;height:48px;background:transparent;border:0;flex-shrink:0}
.switch:before{content:"";position:absolute;left:2px;top:11px;width:44px;height:26px;border:1px solid #78968a77;border-radius:20px;background:#14303c;box-sizing:border-box}
.switch:after{left:6px;top:15px}
.switch[aria-checked=true]{background:transparent}
.switch[aria-checked=true]:before{background:#5da9a1}
.switch[aria-checked=true]:after{left:25px}
.flying-card{position:absolute;top:0;left:0;z-index:22;pointer-events:none;transform-origin:center;animation:card-flight .4s ease-in-out forwards}
.flying-card.shuffle-flight{animation-name:card-shuffle-flight;animation-duration:.6s}
.game-paused .flying-card,.game-paused .shuffling,.game-paused .shuffling .pile-art{animation-play-state:paused}
.shuffling .pile-art{animation:shuffle-cards .6s ease-in-out}
.panel[data-kind=crate] .result-portrait{animation:portrait-think 2.8s ease-in-out infinite;transform-origin:50% 80%}
.panel[data-kind=won] .result-portrait{animation:portrait-cheer .55s cubic-bezier(.15,.9,.35,1.3)}
.panel[data-kind=lost] .result-portrait{animation:portrait-sneeze .7s ease-out}
@keyframes card-flight{0%{transform:translate(var(--from-x),var(--from-y)) scale(.65) rotate(-8deg);opacity:1}60%{opacity:.9}100%{transform:translate(var(--to-x),var(--to-y)) scale(.65) rotate(12deg);opacity:0}}
@keyframes card-shuffle-flight{0%{transform:translate(var(--from-x),var(--from-y)) scale(.65) rotate(-8deg) rotateY(0deg);opacity:1}60%{opacity:.9}100%{transform:translate(var(--to-x),var(--to-y)) scale(.65) rotate(12deg) rotateY(360deg);opacity:0}}
@keyframes shuffle-cards{0%{transform:rotate(0)}40%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg)}}
@keyframes portrait-think{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes portrait-cheer{from{transform:translateY(30px) scale(.75);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes portrait-sneeze{0%,40%,100%{transform:translateX(0) rotate(0)}55%{transform:translateX(-6px) rotate(-5deg)}65%{transform:translateX(5px) rotate(4deg)}75%{transform:translateX(-3px)}}