/* Restore the game's document spacing after the shared navigation reset. */
:where(.shell, #howto-dialog) :where(h1, h2, h3, p, ol, ul, fieldset, legend) {
  margin: revert;
  padding: revert;
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f3eee5;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
.page-wrapper { max-width: 460px; }
.page-wrapper > .header { max-width: 460px; color-scheme: light; }
.page-wrapper > .shell {
  width: 100%;
  padding-top: calc(72px + env(safe-area-inset-top));
}
#howto-dialog { margin: auto; }
.drawer { color-scheme: light; }
@media(min-width:768px){body{padding-bottom:calc(110px + env(safe-area-inset-bottom))}}

/* Keep the shared ad tag directly in the main document. Only game layout
   reserves room; provider nodes retain their own positioning and behavior. */
:root{--ad-height:50px;--ad-space:calc(var(--ad-height) + 16px + env(safe-area-inset-bottom));--play-header:64px;--play-height:100dvh}
body{padding-bottom:calc(var(--ad-space) + 16px)}
html.playing{overflow:hidden;overscroll-behavior:none;height:100%;scroll-behavior:auto}
/* A short document is already at its end at scrollY=0 and triggers the
   provider's move-to-top behavior. Preserve document depth while play stays
   fixed, with no user scrolling. No ad is wrapped or repositioned here. */
html.playing body{height:calc(100dvh + 256px);min-height:calc(var(--play-height) + 256px);overflow:visible;overscroll-behavior:none;padding:0}
html.playing .page-wrapper{position:fixed;top:0;left:0;right:0;margin:0 auto;height:calc(var(--play-height) - var(--ad-space));min-height:0;flex:none;width:100%}
html.playing .page-wrapper > .footer{display:none}
html.playing .page-wrapper > .shell{height:100%;min-height:0;padding-top:calc(var(--play-header) + 6px);padding-bottom:10px}
html.playing #game-screen{height:100%;min-height:0;padding-top:0;display:flex;flex-direction:column;gap:8px}
/* 4:5 is an upper bound, rather than stretching to fill every tall screen. */
html.playing .arena-wrap{flex:1;min-height:0;max-height:min(500px,calc((100vw - 44px) * 1.25))}
html.playing #arena{position:absolute;inset:0;width:100%;height:100%}
@media(min-width:768px){:root{--ad-height:90px}}
@media(orientation:landscape) and (min-width:600px) and (max-height:500px){
 html.playing .page-wrapper,html.playing .shell{max-width:820px}
 html.playing #game-screen{display:grid;grid-template-columns:minmax(0,1fr) 200px;grid-template-rows:1fr auto;gap:10px}
 html.playing .arena-wrap{grid-column:1;grid-row:1 / 3;max-height:none}
 html.playing .play-hud{grid-column:2;grid-row:1;align-self:start}
 html.playing #special{grid-column:2;grid-row:2}
 html.playing .game-heading{flex-wrap:wrap;gap:2px}
 html.playing .special-cue{display:none}
 html.playing #pause-overlay{padding:10px}
 html.playing #pause-overlay strong{font-size:16px}
 html.playing #pause-overlay p{margin:6px 0}
 html.playing #pause-overlay .primary{min-height:38px}
 html.playing #pause-overlay .text-button{margin:2px auto 0;min-height:36px;padding:6px}
}

/* Match only the provider-created floating unit. A dark page embedding an
   otherwise unstyled ad document must not give its blank canvas a white fill. */
body > div[style*="2147483647"]:has(> iframe[allowtransparency="true"]),
body > div[style*="2147483647"] > iframe[allowtransparency="true"] {
  background-color: transparent;
}
body > div[style*="2147483647"] > iframe[allowtransparency="true"] {
  color-scheme: normal;
}

/* Ending page: keep the card and its actions close, then insert the existing
   recommendation/Amazon component before the site's own footer. */
#result-screen{padding-bottom:24px}
#result-screen .eyebrow{font-size:10px;letter-spacing:.04em;margin:0 0 10px}
#result-screen h2{font-size:25px;margin-bottom:18px;line-height:1.5}
#result-screen .result-ad{width:320px;max-width:100vw;margin:22px 0 18px;padding-top:10px;min-height:77px}
#result-ad-slot{min-height:50px;height:auto;overflow:visible}
#result-ad-slot .admax-ads{max-width:100%}
#result-ad-slot iframe{background:transparent;color-scheme:normal}
#result-next-slot{margin:30px 0 0;min-width:0}
#result-next-slot:empty{display:none}

#result-screen[data-locked="true"] .result-ad{visibility:hidden;pointer-events:none}

#share-fallback{margin:14px 0 20px;text-align:left}
#share-fallback summary{cursor:pointer;font-size:13px;line-height:1.6;color:#dfc8dc}
#share-copy-text{display:block;box-sizing:border-box;width:100%;margin:12px 0;padding:12px;border:1px solid #66556c;border-radius:12px;background:#1e2230;color:#fff;resize:vertical;font:14px/1.7 system-ui}
#share-fallback .share-options{display:flex;flex-wrap:wrap;gap:8px}
#share-fallback .secondary{flex:1 1 140px;min-width:0;font-size:13px}

.enemy-badge.kiss{background:#bf416f}
.enemy-badge.kiss svg{display:block;width:29px;height:18px}

.result-card-frame{position:relative;width:100%;aspect-ratio:1200/630;min-width:0}
.card-loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;padding:16px;border:1px solid #cdb8d244;border-radius:17px;background:linear-gradient(145deg,#292536,#151d2b);text-align:center}
.card-loading strong{font-size:clamp(13px,3.8vw,18px);line-height:1.5;color:#f6d4a1}
.card-loading span{font-size:12px;line-height:1.5;color:#eee3eb}
.card-loading small{font-size:10px;line-height:1.5;color:#bbc4d6}
.card-loading progress{display:block;width:min(260px,85%);height:7px;accent-color:#f2a8ba;border:0;border-radius:8px;overflow:hidden;background:#3c3549}
.card-loading progress::-webkit-progress-bar{background:#3c3549}
.card-loading progress::-webkit-progress-value{background:linear-gradient(90deg,#c6779b,#f6d4a1)}