/* SANCHINA R68 — EXACT approved three-card artwork, CSS-only visual layer.
 * Scope: homeView .home-mode-grid only. All navigation, LINE auth, quiz data,
 * current-episode selection, story and sharing JS remain unchanged.
 * The first two actions use approved raster artwork (including visible CTA).
 * They remain real HTML button/link elements, fully keyboard/touch operable.
 * The third artwork is the decorative shell; the current episode image and
 * badge stay separate live DOM elements updated by the original app JS.
 */
#homeView .home-mode-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-flow:row!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  gap:clamp(3px,.9vw,9px)!important;
  padding:0 clamp(5px,1.25vw,11px)!important;
  margin:0 auto clamp(12px,2.5vw,24px)!important;
  overflow:visible!important;
}
#homeView .home-mode-grid > .home-action{
  appearance:none!important;
  display:block!important;
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  box-shadow:none!important;
  overflow:visible!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  touch-action:manipulation;
  text-decoration:none!important;
  color:inherit!important;
  transition:filter .14s ease!important;
}
#homeView .home-mode-grid > .home-action-read{
  aspect-ratio:838 / 231!important;
  background-image:url('./assets/home_card_reference_read_r68.png')!important;
}
#homeView .home-mode-grid > .home-action-collection{
  aspect-ratio:838 / 231!important;
  background-image:url('./assets/home_card_reference_catalog_r68.png')!important;
}
#homeView .home-mode-grid > .home-action-quiz{
  aspect-ratio:838 / 243!important;
  background-image:url('./assets/home_card_reference_quiz_r68.png')!important;
  isolation:isolate;
}
/* Turn off the old R65 decorative pseudo-elements. They caused duplicate
 * frames, cloud blobs and unexpected stretching in R67. */
#homeView .home-mode-grid > .home-action::after,
#homeView .home-mode-grid > .home-action:not(.home-action-quiz)::before{
  content:none!important;
  display:none!important;
}
/* Titles, illustrations and green CTA are printed *once* on the approved
 * card artwork. Keep the existing button/link as the actual tap target. */
#homeView .home-mode-grid .home-action-art-illustration,
#homeView .home-mode-grid .home-action-copy,
#homeView .home-mode-grid .home-action-cta{
  display:none!important;
}
/* Hide the only time-dependent part of the approved static third artwork
 * before presenting the live episode thumb from the existing GAME QUIZ.
 * This visual cover does not change data, events, stage selection or login. */
#homeView .home-mode-grid > .home-action-quiz::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:2!important;
  left:2.55%!important;
  top:11.2%!important;
  width:28.35%!important;
  height:71.5%!important;
  background:linear-gradient(135deg,#fceef5 0%,#f6e7f0 75%,#f9eff7 100%)!important;
  border-radius:clamp(10px,2.5vw,20px)!important;
  pointer-events:none!important;
}
#homeView #homeQuizArt{
  display:block!important;
  position:absolute!important;
  z-index:3!important;
  left:3.0%!important;
  top:15.0%!important;
  width:27.25%!important;
  height:63.0%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  border:2px solid rgba(255,255,255,.95)!important;
  border-radius:clamp(9px,2.4vw,18px)!important;
  background:#f9e6f1!important;
  box-shadow:0 3px 7px rgba(63,37,56,.27)!important;
  line-height:0!important;
}
#homeView #homeQuizStageImage{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:inherit!important;
  position:relative!important;
  z-index:2!important;
  filter:none!important;
}
#homeView #homeQuizStagePill{
  display:inline-flex!important;
  position:absolute!important;
  top:-7px!important;
  left:-6px!important;
  z-index:5!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:42%!important;
  padding:clamp(4px,.8vw,7px) clamp(8px,1.5vw,14px)!important;
  background:#ed1680!important;
  border:2px solid #fff!important;
  border-radius:999px!important;
  transform:rotate(-8deg)!important;
  box-shadow:0 2px 5px rgba(95,40,65,.24)!important;
  color:#fff!important;
  font-weight:900!important;
  font-size:clamp(10px,2.35vw,18px)!important;
  line-height:1.13!important;
  white-space:nowrap!important;
}
#homeView #homeQuizArt.no-image #homeQuizStageImage{display:none!important;}
#homeView #homeQuizArt .home-action-art-fallback{
  position:absolute!important;
  inset:0!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  background:#f8dfed!important;
  color:#6c3153!important;
  border-radius:inherit!important;
  font-weight:900!important;
  font-size:clamp(18px,5vw,34px)!important;
}
#homeView #homeQuizArt.no-image .home-action-art-fallback{display:flex!important;}
#homeView .home-mode-grid > .home-action:focus-visible{
  outline:3px solid #078d56!important;
  outline-offset:2px!important;
  border-radius:12px!important;
}
#homeView .home-mode-grid > .home-action:active{filter:brightness(.96)!important;transform:none!important;}
@media(prefers-reduced-motion:reduce){
  #homeView .home-mode-grid > .home-action{transition:none!important;}
}