/* Original Cosmopet components from TCG/styles.css. Declarations preserved; selectors scoped. */
@font-face{font-family:'Cosmopet UI';src:url('./tcg/craft/zalando-sans-expanded-italic.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap}
.game-ui{--ui:.7px;font-family:'Cosmopet UI',sans-serif;color:#fff}.game-ui button{font-family:inherit;color:inherit;font-weight:400;letter-spacing:normal;text-transform:none}
.game-ui .glass-button { display: flex; gap: calc(10 * var(--ui)); align-items: center; justify-content: center; height: calc(60 * var(--ui)); padding: 0 calc(20 * var(--ui)); border-radius: 999px; border: 1px solid #1b1b1d; background: #77736b75; backdrop-filter: blur(3.5px); -webkit-backdrop-filter: blur(3.5px); box-shadow: inset 0 3px #ffffff0d; font-size: calc(20 * var(--ui)); white-space: nowrap; transition: background .2s, opacity .35s, translate .55s; }
.game-ui .glass-button img, .game-ui .bet-control img { width: calc(24 * var(--ui)); height: calc(24 * var(--ui)); flex: none; }
.game-ui .sell-control { min-width: calc(205 * var(--ui)); }
.game-ui .sell-control.is-sold, .game-ui .sell-control.is-sold:hover { background: #54c42747; opacity: 1; cursor: default; }
.game-ui .binder-control { width: calc(200 * var(--ui)); right: calc(40 * var(--ui)); bottom: calc(40 * var(--ui)); }
.game-ui .card-number { display: flex; align-items: center; gap: calc(10 * var(--ui)); }
.game-ui .counter-divider { opacity: .6; }
.game-ui .reveal-fx { display: flex; align-items: center; gap: calc(8 * var(--ui)); height: calc(32 * var(--ui)); margin-block: calc(-6 * var(--ui)); padding: 0; border: 0; background: none; font: inherit; text-transform: uppercase; white-space: nowrap; }
.game-ui .fx-track { position: relative; flex: none; width: calc(24 * var(--ui)); height: calc(16 * var(--ui)); border-radius: 999px; background: #77736b75; border: 1px solid #1b1b1d; box-shadow: inset 0 3px #ffffff0d; }
.game-ui .fx-thumb { position: absolute; top: calc(3 * var(--ui) - 1px); left: calc(3 * var(--ui) - 1px); width: calc(10 * var(--ui)); height: calc(10 * var(--ui)); border-radius: 50%; background: #54c427; translate: calc(8 * var(--ui)) 0; transition: translate .2s ease,background .2s ease; }
.game-ui .reveal-fx[aria-checked="false"] .fx-thumb { translate: 0 0; background: #b7b3ac; }
.game-ui .reveal-fx[aria-checked="false"] > span:last-child { opacity: .6; }
.game-ui .binder-tile { position:relative; min-width:0; align-self:start; padding:7%; border:2px solid #ffffff36; border-radius:calc(16 * var(--ui)); background:#18181833; transition:border-color .2s,box-shadow .2s,background .2s; }
.game-ui .binder-tile.is-owned { border-color:#ffffffb3; }
.game-ui .binder-tile img { display:block; width:100%; height:auto; aspect-ratio:300/419; object-fit:contain; pointer-events:none; }
.game-ui .binder-tile[aria-pressed="true"] { border-color:#aedc04; box-shadow:inset 0 0 10.3px #bbf9237a,0 0 15px #a0ee1712; }
.game-ui .binder-copy-count { position:absolute; right:-6px; top:-6px; min-width:calc(30 * var(--ui)); height:calc(30 * var(--ui)); padding:0 5px; display:flex; align-items:center; justify-content:center; border:2px solid #70765e; border-radius:50px; background:#0005; font-size:clamp(11px,1.09vw,16px); }
.game-ui .binder-tile[aria-pressed="true"] .binder-copy-count { border-color:#aedc04; }
.game-ui .binder-tile-worth { position:absolute; left:50%; bottom:calc(-15 * var(--ui)); translate:-50% 0; padding:4px 7px; border:1px solid #ffffff29; border-radius:30px; background:#0004; font-size:clamp(10px,1.09vw,15px); white-space:nowrap; font-variant-numeric:normal; }
.game-ui .binder-heading .binder-title { font:400 clamp(18px,2.02vw,30px)/1.25 'Zen Dots',sans-serif; text-transform:uppercase; letter-spacing:.04em; margin:0 0 4px; overflow-wrap:anywhere; }
.game-ui .binder-description { height:4.05em; font-size:clamp(10px,.938vw,14px); line-height:1.35; letter-spacing:.04em; margin:0 0 15px; }
.game-ui .binder-edition { font-size:10px; line-height:1.3; letter-spacing:.04em; color:#fff9; margin:0 0 3px; }
.game-ui .binder-owned { font-size:clamp(11px,1.09vw,16px); margin:0; font-variant-numeric:normal; }
.game-ui .sold-background { left: -36.190476%; top: -36.818182%; width: 172.380952%; height: 164.545455%; }
.game-ui .coin-03 { left: -10.793651%; top: 9.318182%; width: 52.063492%; height: 37.272727%; }
.game-ui .coin-02 { left: 55.555556%; top: 12.5%; width: 31.746032%; height: 22.727273%; --coin-angle: 7deg; }
.game-ui .coin-01 { left: 23.968254%; top: 52.954545%; width: 45.238095%; height: 32.386364%; --coin-angle: -7deg; }
.game-ui .coin-art { transform: rotate(calc(var(--coin-angle,0deg) + var(--layer-roll,0deg))); }
.game-ui .coin-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.game-ui .coin-shadow { position: absolute; left: -7.8125%; top: -7.8125%; width: 115.625%; height: 115.625%; transform: translate(var(--stone-shadow-x,0px),var(--stone-shadow-y,3px)); }
.game-ui .sold-price { position: absolute; top: 45.454545%; left: 50%; translate: -50% 0; white-space: nowrap; font: italic 700 calc(84.607 * var(--scene-unit))/1.22 'Cosmopet UI',sans-serif; letter-spacing: calc(3.3843 * var(--scene-unit)); -webkit-text-stroke: calc(16.052 * var(--scene-unit)) #180b3a; paint-order: stroke fill; color: white; }
.game-ui .binder-control.is-collecting { background: #97ea128f; box-shadow: inset 0 3px #ffffff0d,0 0 24px #97ea1226; }
/* Editorial framing only: source controls keep their shape, material, icons and state colors. */
.game-ui{container-type:inline-size}
.game-ui .still-fx-row,.game-ui .still-pace-footer{font-size:calc(14 * var(--ui));line-height:calc(20 * var(--ui))}
.game-ui .still-binder-grid{grid-template-columns:1fr 1fr;gap:22px;max-width:222px;margin:0 auto 26px}
.game-ui .binder-tile{width:100%;text-align:center}
.game-ui .binder-heading .binder-title{font-size:20px}
.game-ui .binder-description{height:auto;font-size:10px;margin-bottom:0}
.game-ui .binder-copy-count{font-size:11px}
.game-ui .binder-tile-worth{font-size:10px}
.game-ui .sale-turn .next-control{opacity:.5}
.game-ui .still-sold-card{position:relative;width:100%;aspect-ratio:633/888;--scene-unit:calc(100cqw / 633);container-type:inline-size;transform:rotate(7deg);filter:drop-shadow(0 12px 12px #0006)}
.game-ui .sold-scene{display:block;background:#251044}
.game-ui .sold-price{--scene-unit:calc(100cqw / 630)}
.game-ui .still-binder-worth{color:#ffffff99;font-size:calc(14 * var(--ui));line-height:calc(20 * var(--ui));text-transform:uppercase;white-space:nowrap}
.game-ui .still-binder-worth span{color:#97ea12;text-shadow:0 0 14px #97ea1240}
/* Scale source components as a system instead of inventing a second mobile skin. */
@container(max-width:340px){
 .game-ui .glass-button,.game-ui .reveal-fx,.game-ui .card-number,.game-ui .still-binder-worth{--ui:.6px}
}
@container(max-width:230px){
 .game-ui .glass-button,.game-ui .reveal-fx,.game-ui .card-number,.game-ui .still-binder-worth{--ui:.48px}
 .game-ui .still-binder-grid{max-width:180px;gap:16px}
 .game-ui .binder-description{font-size:9px}
 .game-ui .still-pack-fan{transform:scale(.87)}
 .game-ui .still-binder-worth{font-size:7px}
}