/* Cloudflare Pages final overrides — intentionally loaded last */
[hidden]{display:none!important}
.gacha-overlay{z-index:999!important}

@media(max-width:800px){
  html,body,.game-frame{width:100%;max-width:100%;overflow-x:hidden}
  .game-frame{background-size:cover!important;background-position:center top!important}
  .game-frame::after{inset:4px!important;border-radius:16px!important}
  .game-frame .hero{min-height:440px!important;padding:285px 10px 55px!important}
  .game-frame .hero::before{top:42px!important;width:94vw!important;height:35.25vw!important;background-size:contain!important}
  .visitor-counter{top:205px!important;width:94vw!important;gap:4px!important;font-size:9px!important}
  .visitor-counter strong{padding:3px 6px!important;font-size:15px!important}
  .game-frame .main-button{width:min(220px,70vw)!important;height:54px!important;font-size:14px!important;margin:0!important}

  .gacha-overlay{padding:12px!important}
  .gacha-box{width:min(320px,88vw)!important;padding:24px 17px 20px!important;border-radius:20px!important}
  .gacha-box::before{inset:7px!important;border-radius:15px!important}
  .gacha-capsule{width:76px!important;height:76px!important;margin:12px auto!important}
  .gacha-box h2{font-size:17px!important;margin:13px 0!important}
  .gacha-box small{font-size:9px!important}

  .game-frame .result{padding:0 8px!important}
  .game-frame .result.show{padding-bottom:38px!important}
  .game-frame .tree{padding:30px 8px 24px!important;border-radius:15px!important}
  .game-frame .tree-title{margin:8px 0 28px!important}
  .game-frame .tree-title span{font-size:8px!important;padding:6px 9px!important}
  .generation.parents,.generation.siblings,.generation.close{gap:20px 8px!important}
  .game-frame .family-card{min-height:88px!important;border-width:1.5px!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--card) 62%,#6674c4),inset 0 0 12px #fff,0 5px 10px rgba(61,73,150,.18)!important}
  .game-frame .family-card::before{inset:5px!important}
  .game-frame .family-card::after{height:5px!important;left:18px!important;right:18px!important;bottom:8px!important}
  .game-frame .card-front{padding:27px 4px 11px!important}
  .game-frame .role{top:-10px!important;padding:3px 7px!important;font-size:8px!important}
  .game-frame .card-copy h3{font-size:13px!important;white-space:nowrap!important}
  .game-frame .card-copy small{margin-top:5px!important;font-size:8px!important;white-space:nowrap!important}
  .game-frame .you{padding:7px 12px!important;font-size:9px!important}
  .game-frame .you small{font-size:10px!important}

  .game-frame .love-card{
    min-height:126px!important;
    border:0!important;
    background:linear-gradient(145deg,#fff 0%,#ffe3f1 52%,#ffacd7 100%)!important;
    box-shadow:none!important;
    filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #d63b94) drop-shadow(0 6px 8px rgba(196,48,132,.22))!important;
    clip-path:polygon(50% 100%,8% 61%,2% 48%,0 33%,3% 18%,13% 6%,27% 1%,39% 4%,50% 17%,61% 4%,73% 1%,87% 6%,97% 18%,100% 33%,98% 48%,92% 61%)!important;
    overflow:hidden!important;
  }
  .game-frame .love-card::before,.game-frame .love-card::after{display:none!important}
  .game-frame .love-card .role{top:17px!important}
  .game-frame .love-card .card-front{padding:45px 4px 18px!important}
  .game-frame .complete-badge{margin-top:24px!important;padding:7px 12px!important;font-size:9px!important}
  .game-frame .actions{gap:12px!important;margin-top:24px!important}
  .game-frame .actions button{width:205px!important;height:52px!important;font-size:13px!important}
  .game-frame footer{min-height:125px!important;padding:20px 12px 25px!important}
}

@media(max-width:380px){
  .game-frame .hero{min-height:410px!important;padding-top:265px!important}
  .visitor-counter{top:190px!important}
  .game-frame .family-card{min-height:82px!important}
  .game-frame .card-copy h3{font-size:12px!important}
  .game-frame .card-copy small{font-size:7px!important}
  .game-frame .love-card{min-height:118px!important}
  .game-frame .love-card .card-front{padding-top:41px!important}
}