.player-modal-open { overflow-y: hidden; }
.player-local-review { position: fixed; z-index: 30; bottom: 76px; left: 12px; width: min(440px, calc(100% - 24px)); padding: 10px 14px; border: 1px solid #68527f; border-radius: 10px; background: #21192ded; color: #eee5fa; font-size: 12px; text-align: left; box-shadow: 0 6px 24px #0005; }
.player-local-review summary { cursor: pointer; }
.player-local-review p { margin: 8px 0; line-height: 1.5; }
.player-local-review button { padding: 8px 10px; border: 1px solid #ad91cc; border-radius: 6px; color: #eee5fa; background: #382848; font: inherit; cursor: pointer; }
.player-local-review pre { max-height: 200px; overflow: auto; margin-top: 8px; font-size: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.player-recommendation { position: fixed; inset: 0; width: min(800px, calc(100% - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow: auto; border: 1px solid #e3dff0; border-radius: 22px; background: #f6f5fc; background-image: radial-gradient(ellipse at 100% 0, #f1d6f699, transparent 58%), radial-gradient(ellipse at 50% 100%, #f6d8f699, transparent 58%), url('../img/player-recommendation/pastel-background-user-v6.png'); background-position: center; background-size: cover; background-repeat: no-repeat; color: #282435; font: inherit; text-align: left; box-shadow: 0 28px 100px #110b2c55; }
.player-recommendation:not([open]) { display: none; }
.player-recommendation[open] { display: grid; grid-template-columns: 50% 50%; }
.player-recommendation::backdrop { background: #0e0b1a9c; backdrop-filter: blur(5px); }
.player-visual { position: relative; min-height: 432px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-right: 1px solid #d3c8e4; border-radius: 21px 0 0 21px; background: linear-gradient(150deg, #e4edff70, #e6d9fa99); }
.player-product-image { position: absolute; width: calc(100% - 18px); height: calc(100% - 22px); object-fit: contain; object-position: center bottom; top: 22px; left: 9px; }
.player-copy { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 35px 30px 23px; background: #ffffffc7; border-radius: 0 21px 21px 0; }
.player-recommendation h2 { margin: 0 0 13px; color: #282435; font-size: 32px; font-weight: 700; letter-spacing: -.035em; line-height: 1.13; }
.player-recommendation h2 span { color: #6c4bd5; }
.player-description { margin: 0; color: #615b70; font-size: 13px; line-height: 1.65; }
.player-benefits { display: grid; gap: 6px; list-style: none; padding: 0; margin: 16px 0 18px; color: #514a63; font-size: 12px; }
.player-benefits li::before { content: '✓'; color: #7651d5; margin-right: 9px; }
.player-actions { display: grid; gap: 8px; }
.player-store-link { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 11px 14px; border: 1px solid #2563eb; border-radius: 10px; background: #2563eb; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 15px #2563eb29; }
.player-store-link:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; box-shadow: 0 5px 18px #2563eb33; }
.player-store-link[data-platform="ios"] { background: #000; border-color: #000; box-shadow: 0 4px 15px #00000026; }
.player-store-link[data-platform="ios"]:hover { background: #191919; border-color: #191919; box-shadow: 0 5px 18px #00000033; }
.player-store-link > img { width: 22px; height: 24px; object-fit: contain; flex-shrink: 0; }
.player-store-link[data-platform="ios"] > img { filter: brightness(0) invert(1); }
.player-store-arrow { font-size: 18px; line-height: 1; }
.player-keep { min-height: 44px; border: 1px solid #d2c9df; border-radius: 10px; color: #61536f; background: #ffffff40; font: inherit; font-size: 13px; cursor: pointer; }
.player-keep:hover { background: #ffffff80; border-color: #b8a8d0; }
.player-never { display: block; min-height: 32px; margin: 7px auto 0; padding-inline: 10px; border: 0; background: transparent; color: #6b617a; font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.player-never:hover { color: #4d2c8e; }
.player-close { position: absolute; z-index: 3; top: 5px; right: 5px; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #6e637e; background: #ffffff70; font: inherit; font-size: 25px; cursor: pointer; }
.player-close:hover { color: #3f295c; background: #ffffffd9; }
.player-recommendation :is(button, a):focus-visible { outline-color: #8c69ce; }
@media (max-width: 639px) {
  .player-recommendation { width: calc(100% - 32px); max-height: calc(100dvh - 32px); border-radius: 20px; }
  .player-recommendation[open] { grid-template-columns: 1fr; }
  .player-visual { min-height: 238px; border-right: 0; border-bottom: 1px solid #d3c8e4; border-radius: 19px 19px 0 0; }
  .player-product-image { width: calc(100% - 24px); height: 250px; top: 6px; left: 12px; object-position: center top; }
  .player-copy { padding: 22px 22px 13px; border-radius: 0 0 19px 19px; }
  .player-recommendation h2 { font-size: 28px; margin-bottom: 11px; }
  .player-description { font-size: 13px; line-height: 1.6; }
  .player-benefits { margin: 14px 0 16px; font-size: 12px; gap: 5px; }
  .player-close { top: 5px; right: 5px; }
}
@media (max-height: 680px) and (max-width: 639px) {
  .player-visual { min-height: 200px; }
  .player-product-image { top: 6px; height: 210px; }
  .player-copy { padding-block: 18px 12px; }
  .player-benefits { margin-block: 12px; }
}