/* SCRUMBLE V97 FINAL VISUAL FIX 3 — exact approved Online Room card + Board of Fate panel.
   This file is intentionally loaded LAST to defeat old PWA/layout overrides. */

/* ---------- Twist of Fate main + Waiting Room: SAME approved artwork, only true fullscreen ---------- */
#fateLobby.fateLobby.show{
  position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important;
  min-height:100dvh!important; max-height:none!important; overflow:hidden!important;
  padding:0!important; margin:0!important; background:#09040b!important;
}
#fateLobby.fateLobby.show::before{
  content:""!important; position:absolute!important; inset:0!important; z-index:0!important;
  background-position:center!important; background-size:100% 100%!important; background-repeat:no-repeat!important;
  filter:none!important; transform:none!important; opacity:1!important;
}
#fateLobby.fateLobby.choose.show::before{background-image:url('./fate-approved-lobby.png')!important}
#fateLobby.fateLobby.waiting.show::before{background-image:url('./fate-approved-waiting.png')!important}
#fateLobby .fateLobbyPanel,#fateLobby .fateLobbyContent,#fateLobby .fateApprovedStage{
  position:absolute!important; inset:0!important; width:100vw!important; height:100dvh!important;
  min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important;
  margin:0!important; padding:0!important; overflow:hidden!important; background:transparent!important;
}
#fateLobby .fateApprovedBg{
  position:absolute!important; inset:0!important; width:100%!important; height:100%!important;
  object-fit:fill!important; object-position:center!important; margin:0!important; padding:0!important;
}
/* Keep the existing approved back hotspot but move it below the PWA status area. */
#fateLobby .fateLobbyBack{
  position:absolute!important; z-index:100!important; left:8px!important;
  top:calc(env(safe-area-inset-top,0px) + 8px)!important;
  width:62px!important; height:62px!important; min-width:62px!important; min-height:62px!important;
  margin:0!important; padding:0!important; border:0!important; background:transparent!important;
  box-shadow:none!important; color:transparent!important; opacity:1!important;
}

/* ---------- MY FATE / PLAYER FATE = OWN SPIN HISTORY ---------- */
/* The JS supplies player.fate.spins (the player's own spins). Keep all slots on one line.
   Standard = 4. Forced Spin grows requiredSpins/spinCount to 5/6. */
.scoreStrip.fateDuo .profileFateIcons{
  display:flex!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:center!important;
  gap:4px!important; max-width:44vw!important; overflow:visible!important;
}
.profileFateIcons .fateMiniIcon,.profileFateIcons .fateEmptySlot{
  flex:0 0 auto!important;
}

/* ---------- ONLINE ROOM: exact single parchment; no second white sheet ---------- */
.modal:has(.onlineModal){
  position:fixed!important; inset:0!important; box-sizing:border-box!important;
  display:grid!important; place-items:center!important;
  padding:calc(env(safe-area-inset-top,0px) + 7px) 0 calc(env(safe-area-inset-bottom,0px) + 7px)!important;
  overflow:hidden!important;
}
.modalCard.onlineModal{
  position:relative!important; box-sizing:border-box!important;
  width:min(82vw,430px)!important;
  height:min(88dvh,820px)!important;
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 14px)!important;
  min-height:0!important;
  margin:0!important;
  padding:clamp(48px,6.3dvh,64px) clamp(24px,5.5vw,34px) clamp(24px,3.2dvh,34px)!important;
  border:0!important; border-image:none!important; border-radius:0!important; box-shadow:none!important;
  background-color:transparent!important;
  background-image:url('./daily-parchment.png')!important;
  background-position:center!important; background-repeat:no-repeat!important; background-size:100% 100%!important;
  color:#39230f!important; overflow:hidden!important;
  display:flex!important; flex-direction:column!important; gap:5px!important; justify-content:flex-start!important;
}
.onlineModal::before,.onlineModal::after{content:none!important;display:none!important}
.onlineModal .modalClose{
  position:absolute!important; z-index:30!important; top:4.1%!important; right:3.6%!important;
  width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important;
  margin:0!important; padding:0!important; border:2px solid #e3b95f!important; border-radius:50%!important;
  background:#0a1b2d!important; color:#ffe9ad!important; box-shadow:0 0 0 2px #6d431b!important;
}
.onlineModal .modalBrand{
  flex:0 0 clamp(54px,7dvh,68px)!important; width:76%!important; height:auto!important;
  margin:calc(-1 * clamp(28px,3.5dvh,34px)) auto 0!important; padding:0!important;
  background:url('./scrumble-logo.png') center/contain no-repeat!important;
}
.onlineModal .modalBrand>*{visibility:hidden!important}
.onlineModal h2{
  flex:0 0 auto!important; margin:0 0 3px!important; padding:0!important;
  color:#35200e!important; text-align:center!important; text-shadow:none!important;
  font:700 clamp(28px,6.8vw,40px)/1 Georgia,serif!important;
}
.onlineModal .onlineResume{
  flex:0 0 auto!important; align-self:flex-start!important; width:auto!important; max-width:82%!important;
  min-height:34px!important; margin:0 0 2px!important; padding:5px 13px!important;
  border:2px solid #c99b4c!important; border-radius:999px!important; background:#091a2e!important;
  color:#f7dda0!important; box-shadow:0 2px 5px #0004!important;
  font:500 clamp(12px,3.3vw,15px)/1.12 Georgia,serif!important;
  white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important;
}
.onlineModal .formStack{flex:0 0 auto!important; display:grid!important; gap:5px!important; margin:0!important; padding:0!important}
.onlineModal .formStack label{display:grid!important; gap:3px!important; margin:0!important; color:#39230f!important; font:500 clamp(15px,4vw,18px)/1.1 Georgia,serif!important}
.onlineModal .nameInput{
  box-sizing:border-box!important; width:100%!important; height:clamp(42px,5.7dvh,50px)!important; min-height:0!important;
  margin:0!important; padding:7px 12px!important; border:2px solid #c19347!important; border-radius:3px!important;
  background:#071526!important; color:#fff0c9!important; box-shadow:inset 0 0 12px #0008!important;
  font:700 clamp(18px,4.8vw,23px)/1 Georgia,serif!important;
}
.onlineModal .onlineCode{letter-spacing:.23em!important; text-align:center!important; font-size:clamp(22px,6vw,29px)!important; padding-left:calc(12px + .23em)!important}
.onlineModal .onlineActions{
  flex:0 0 auto!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important;
  margin:3px 0 0!important; padding:0!important;
}
.onlineModal .onlineActions button{
  box-sizing:border-box!important; min-width:0!important; min-height:clamp(48px,6.6dvh,58px)!important; height:auto!important;
  margin:0!important; padding:7px 8px!important; border:2px solid #d0a151!important; border-radius:22px!important;
  font:700 clamp(15px,4.1vw,20px)/1.05 Georgia,serif!important;
}
.onlineModal .onlinePrivacy{
  flex:0 0 auto!important; margin:2px 0 3px!important; padding:0!important; text-align:center!important;
  color:#3c250f!important; font:500 clamp(10px,2.7vw,13px)/1.1 Georgia,serif!important;
}
.onlineModal .fateMenuCard{
  position:relative!important; flex:0 0 auto!important; display:block!important;
  width:100%!important; height:auto!important; min-height:0!important; aspect-ratio:705/400!important;
  margin:0 0 3px!important; padding:0!important; border:0!important; border-radius:0!important;
  background-color:transparent!important; background-image:url('./online-fate-card-approved-v97-fix3.png')!important;
  background-position:center!important; background-size:100% 100%!important; background-repeat:no-repeat!important;
  box-shadow:none!important; overflow:hidden!important; color:transparent!important; cursor:pointer!important;
}
.onlineModal .fateMenuCard:before,.onlineModal .fateMenuCard:after{content:none!important;display:none!important}
.onlineModal .fateMenuCard>*{visibility:hidden!important;pointer-events:none!important}
.onlineModal>.modalActions{
  flex:0 0 auto!important; width:100%!important; height:auto!important; margin:0!important; padding:0!important;
}
.onlineModal>.modalActions button{
  box-sizing:border-box!important; width:100%!important; min-height:clamp(42px,5.8dvh,50px)!important;
  margin:0!important; padding:7px 12px!important; border:2px solid #c99b4d!important; border-radius:22px!important;
  background:#081a2e!important; color:#fff0c7!important; font:500 clamp(16px,4.2vw,20px)/1 Georgia,serif!important;
}

/* ---------- BOARD OF FATE RULES: exact approved single-image compendium ---------- */
.modal:has(.boardFateRulesModal){
  position:fixed!important; inset:0!important; box-sizing:border-box!important;
  display:grid!important; place-items:center!important;
  padding:calc(env(safe-area-inset-top,0px) + 4px) 0 calc(env(safe-area-inset-bottom,0px) + 4px)!important;
  overflow:hidden!important;
}
.modalCard.boardFateRulesModal{
  position:relative!important; box-sizing:border-box!important;
  width:min(84vw,460px)!important; height:auto!important; aspect-ratio:767/1425!important;
  max-width:none!important;
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 8px)!important;
  margin:0!important; padding:0!important; overflow:hidden!important;
  border:0!important; border-image:none!important; border-radius:0!important; box-shadow:none!important;
  background-color:transparent!important;
  background-image:url('./board-fate-rules-approved-v97-fix3.png')!important;
  background-position:center!important; background-size:100% 100%!important; background-repeat:no-repeat!important;
}
.boardFateRulesModal::before,.boardFateRulesModal::after{content:none!important;display:none!important}
.boardFateRulesModal .boardFateParchment{position:absolute!important;inset:0!important;margin:0!important;padding:0!important;background:transparent!important;overflow:hidden!important}
.boardFateRulesModal .boardFateParchment>*:not(.boardFateRuleActions){visibility:hidden!important;pointer-events:none!important}
.boardFateRulesModal .boardFateRuleActions{
  position:absolute!important; z-index:10!important; left:10.5%!important; right:10.5%!important; bottom:1.7%!important;
  width:auto!important; height:8.2%!important; margin:0!important; padding:0!important; background:transparent!important;
}
.boardFateRulesModal .boardFateRuleActions button{
  position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-height:0!important;
  margin:0!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important;
  opacity:0!important; color:transparent!important;
}
.boardFateRulesModal .modalClose{
  position:absolute!important; z-index:20!important; top:.3%!important; right:.2%!important;
  width:12.8%!important; height:auto!important; aspect-ratio:1!important;
  margin:0!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important;
  opacity:0!important; color:transparent!important;
}

/* Very short PWA fallback: preserve the same composition instead of allowing overflow. */
@media (max-height:720px){
  .modalCard.onlineModal{width:min(78vw,390px)!important;height:min(90dvh,650px)!important;padding-top:44px!important;padding-bottom:22px!important;gap:3px!important}
  .onlineModal .modalBrand{flex-basis:48px!important;margin-top:-25px!important}
  .onlineModal h2{font-size:27px!important}
  .onlineModal .nameInput{height:40px!important}
  .onlineModal .onlineActions button{min-height:45px!important}
  .onlineModal>.modalActions button{min-height:40px!important}
  .modalCard.boardFateRulesModal{width:min(79vw,410px)!important}
}

/* V97 FIX4 — all Twist results use the same cinematic/full-art presentation.
   Hand-approved cards stay untouched; effects without a dedicated card now
   render as an ornate illustrated live card instead of the old plain square. */
#fateOverlay .fateCinematicCard{
  position:relative!important;
  box-sizing:border-box!important;
  width:min(100%,430px)!important;
  aspect-ratio:685/720!important;
  margin:0 auto!important;
  padding:22px 20px 18px!important;
  overflow:hidden!important;
  border:3px solid #e9bd62!important;
  border-radius:0!important;
  background:
    radial-gradient(circle at 50% 53%,rgba(255,255,255,.14),transparent 29%),
    radial-gradient(circle at 50% 42%,#1d4775 0,#0b1d38 48%,#050811 100%)!important;
  box-shadow:inset 0 0 0 5px #211207,inset 0 0 0 7px #e3ad4d99,0 0 36px #000a!important;
  isolation:isolate!important;
  animation:fateApprovedRevealV90 .66s cubic-bezier(.18,.88,.18,1.14) both!important;
}
#fateOverlay .fateCinematicCard:before,
#fateOverlay .fateCinematicCard:after{
  content:'✦'!important;position:absolute!important;z-index:5!important;color:#ffd66f!important;
  font-size:28px!important;text-shadow:0 0 16px #ffb52d!important;line-height:1!important;
}
#fateOverlay .fateCinematicCard:before{left:9px!important;top:9px!important}
#fateOverlay .fateCinematicCard:after{right:9px!important;bottom:9px!important}
#fateOverlay .fateCinematicCard.good{background:radial-gradient(circle at 50% 51%,#1e8b46 0,#0a4827 43%,#06100c 100%)!important}
#fateOverlay .fateCinematicCard.bad{background:radial-gradient(circle at 50% 51%,#9f2730 0,#4d1018 44%,#120609 100%)!important}
#fateOverlay .fateCinematicCard.jackpot{background:radial-gradient(circle at 50% 51%,#ad7318 0,#5d3908 44%,#160d03 100%)!important}
#fateOverlay .fateCinematicCard.chaos{background:radial-gradient(circle at 50% 51%,#6d2aa1 0,#35114f 44%,#100619 100%)!important}
#fateOverlay .fateCinematicRays{
  position:absolute!important;inset:-20%!important;z-index:0!important;opacity:.46!important;pointer-events:none!important;
  background:repeating-conic-gradient(from -5deg,rgba(255,255,255,.20) 0 1.2deg,transparent 1.2deg 13deg)!important;
  -webkit-mask-image:radial-gradient(circle at 50% 54%,#000 0 52%,transparent 76%)!important;
  mask-image:radial-gradient(circle at 50% 54%,#000 0 52%,transparent 76%)!important;
  animation:fateRaySpin 8s linear infinite!important;
}
#fateOverlay .fateCinematicInner{position:relative!important;z-index:2!important;height:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important}
#fateOverlay .fateCinematicKicker{font:800 18px/1 Georgia,serif!important;letter-spacing:.08em!important;color:#f8dfaa!important;text-shadow:0 2px 5px #000!important;margin:0 0 5px!important}
#fateOverlay .fateCinematicCard h3{margin:0!important;font:900 clamp(42px,10.7vw,62px)/.93 Georgia,serif!important;color:#fff3c6!important;text-shadow:0 3px 0 #2b1b08,0 0 22px #fff6!important;max-width:95%!important}
#fateOverlay .fateCinematicCard.good h3{color:#eaffd9!important;text-shadow:0 3px 0 #0b4a20,0 0 25px #63ff88!important}
#fateOverlay .fateCinematicCard.bad h3{color:#fff0e7!important;text-shadow:0 3px 0 #690c12,0 0 25px #ff4c56!important}
#fateOverlay .fateCinematicCard.jackpot h3{color:#fff4bd!important;text-shadow:0 3px 0 #6d3d00,0 0 28px #ffc72f!important}
#fateOverlay .fateCinematicCard.chaos h3{color:#f6e7ff!important;text-shadow:0 3px 0 #441063,0 0 28px #c767ff!important}
#fateOverlay .fateCinematicLead{margin:7px 0 7px!important;max-width:92%!important;font:600 clamp(15px,4vw,20px)/1.15 Georgia,serif!important;color:#f5e7c7!important;text-shadow:0 2px 4px #000!important}
#fateOverlay .fateCinematicArt{position:relative!important;width:min(53%,220px)!important;aspect-ratio:1!important;display:grid!important;place-items:center!important;margin:4px auto 4px!important}
#fateOverlay .fateCinematicHalo{position:absolute!important;inset:-25%!important;border-radius:50%!important;background:radial-gradient(circle,#fff9 0 5%,#ffc84d55 22%,#6cbcff33 45%,transparent 70%)!important;filter:blur(2px)!important;animation:fateIconImpact 1.15s ease-in-out infinite alternate!important}
#fateOverlay .fateCinematicArt img{position:relative!important;z-index:2!important;display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:50%!important;filter:drop-shadow(0 0 16px #ffd46a) drop-shadow(0 0 32px #fff4)!important;animation:fateIconImpact .78s cubic-bezier(.18,.9,.18,1.2) both!important}
#fateOverlay .fateCinematicValue{margin:1px 0 4px!important;font:900 clamp(40px,11vw,64px)/.92 Georgia,serif!important;color:#fff0a8!important;text-shadow:0 3px 0 #3e2405,0 0 25px #ffc736!important}
#fateOverlay .fateCinematicTarget{margin-top:4px!important;padding:8px 16px!important;min-width:44%!important;border:1px solid #e7bd66!important;border-radius:999px!important;background:#09121dcc!important;color:#ffe8ae!important;font:900 13px/1 Georgia,serif!important;letter-spacing:.12em!important;box-shadow:0 0 18px #0007!important}
@media(max-height:760px){
  #fateOverlay .fateCinematicCard{width:min(100%,385px)!important;padding:15px 16px 13px!important}
  #fateOverlay .fateCinematicKicker{font-size:15px!important}
  #fateOverlay .fateCinematicLead{font-size:15px!important;margin:4px 0!important}
  #fateOverlay .fateCinematicArt{width:min(43%,175px)!important;margin:1px auto!important}
  #fateOverlay .fateCinematicTarget{padding:6px 12px!important;font-size:11px!important}
}

/* V97 FIX4 — opponent word reveal is deliberately prominent. */
.wordAcceptedBanner.show{z-index:42000!important;animation:acceptedBannerIn .35s ease-out both!important}
#board .cell.wordAccepted .tile,#board .cell.wordAcceptedSecondary .tile{position:relative!important;z-index:20!important}
\n\n/* V97 ALL FIXES — every non-JPG Fate result now reads as a full-art card, not a plain UI square. */\n#fateOverlay .fateCinematicCard{\n  background-image:\n    linear-gradient(180deg,rgba(4,8,18,.16),rgba(3,5,12,.52)),\n    radial-gradient(circle at 50% 45%,rgba(255,255,255,.16),transparent 31%),\n    url('./magic-hall-clean.jpg')!important;\n  background-size:cover!important;background-position:center!important;\n}\n#fateOverlay .fateCinematicCard.good{box-shadow:inset 0 0 0 5px #211207,inset 0 0 0 7px #e3ad4d99,inset 0 0 95px #0a6b35cc,0 0 36px #000a!important}\n#fateOverlay .fateCinematicCard.bad{box-shadow:inset 0 0 0 5px #211207,inset 0 0 0 7px #e3ad4d99,inset 0 0 95px #8e1424d9,0 0 36px #000a!important}\n#fateOverlay .fateCinematicCard.chaos{box-shadow:inset 0 0 0 5px #211207,inset 0 0 0 7px #e3ad4d99,inset 0 0 95px #69249be0,0 0 36px #000a!important}\n#fateOverlay .fateCinematicCard.jackpot{box-shadow:inset 0 0 0 5px #211207,inset 0 0 0 7px #e3ad4d99,inset 0 0 95px #b57912dd,0 0 36px #000a!important}\n#fateOverlay .fateCinematicArt{width:min(61%,245px)!important}\n#fateOverlay .fateCinematicArt img{filter:drop-shadow(0 0 12px #ffd46a) drop-shadow(0 0 28px #fff7)!important}\n#fateOverlay .fateCinematicValue{max-width:96%!important;font-size:clamp(30px,8.5vw,58px)!important;line-height:1!important}\n#fateOverlay .fateCinematicCard.effect-bonus_overcharge .fateCinematicValue{font-size:clamp(20px,5.7vw,38px)!important;letter-spacing:.01em!important}\n#fateOverlay .fateCinematicCard.effect-bonus_null .fateCinematicValue,\n#fateOverlay .fateCinematicCard.effect-letter_thief .fateCinematicValue{font-size:clamp(32px,9vw,58px)!important}\n@media(max-height:760px){#fateOverlay .fateCinematicArt{width:min(48%,190px)!important}}\n