/* Reference-Art Scene v1 — image slices extracted from the approved 1672×941 game image.
   THIS IS A TWO-DIMENSIONAL LAYERED SCENE. Do not turn these illustrations back into CSS geometry. */
#match{max-width:1580px;width:100%;margin:0 auto;padding:4px 7px 12px;min-width:0}
#match .duel-roles{display:none!important}
#match .stadium.reference-stage{
  display:block!important;position:relative!important;isolation:isolate;
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  aspect-ratio:1672/670;overflow:hidden!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:18px!important;
  background:#10284b url('./scene-reference-original.webp') center center / 100% 100% no-repeat!important;
  box-shadow:0 0 0 3px #f2f7ff,0 4px 0 #4bc6ce,0 12px 30px #192f7244!important;
}
#match .stadium.reference-stage::before,#match .stadium.reference-stage::after,
#match .stadium.reference-stage .crowd,#match .stadium.reference-stage .floodlight-halo,
#match .stadium.reference-stage .pitch-markings,#match .stadium.reference-stage .midline,
#match .stadium.reference-stage .goal-shadow{display:none!important}
#match .stadium.reference-stage .goal-area{
  position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;
  width:100%!important;height:100%!important;z-index:3!important;filter:none!important;pointer-events:none!important;
}
#match .stadium.reference-stage .goal-frame{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  overflow:visible!important;pointer-events:none!important;background:none!important;
  border:0!important;box-shadow:none!important;outline:0!important;
}
#match .reference-goal-posts{
  position:absolute;z-index:13;pointer-events:none;
  left:17.045%;top:-1.79%;width:65.01%;height:77.32%;
  display:block;object-fit:fill;opacity:.96;
}
#match .stadium.reference-stage .choices{
  position:absolute!important;z-index:6!important;
  left:24.2%!important;right:24.2%!important;top:6.1%!important;bottom:auto!important;
  width:auto!important;height:38.5%!important;min-height:0!important;
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;justify-content:stretch!important;
  gap:1.8%!important;pointer-events:auto!important;
}
#match .stadium.reference-stage .choice{
  display:block!important;position:relative!important;
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
  padding:0!important;overflow:hidden!important;
  border:0!important;border-radius:14%!important;outline:none!important;
  background:transparent url('./answer-reference-frame.webp') center / 100% 100% no-repeat!important;
  box-shadow:none!important;cursor:pointer!important;
  transition:transform .16s ease,filter .16s ease;
  pointer-events:auto!important;touch-action:manipulation;
}
#match .stadium.reference-stage .choice:active{transform:scale(.966)}
#match .stadium.reference-stage .choice:focus-visible{outline:3px solid #f9d05b!important;outline-offset:1px!important}
#match .stadium.reference-stage .choice.correct{filter:drop-shadow(0 0 10px #66ffa3)}
#match .stadium.reference-stage .choice.wrong{filter:drop-shadow(0 0 10px #ff8f7c)}
#match .stadium.reference-stage .choice img{
  position:absolute;z-index:2;left:16%;top:13%;
  width:68%!important;height:68%!important;max-width:none!important;max-height:none!important;
  display:block;object-fit:contain;background:transparent;
  border:0;box-shadow:none;pointer-events:none;
}
#match .stadium.reference-stage .choice .sprite-image{
  position:absolute;z-index:2;left:16%;top:13%;width:68%!important;height:auto!important;
  aspect-ratio:1;max-width:none!important;max-height:68%!important;
  background-repeat:no-repeat;background-size:400% 400%;
  background-color:transparent;pointer-events:none;
}
#match .stadium.reference-stage .choice .number{
  position:absolute;z-index:4;top:8%;left:7%;
  border:2px solid #fff;width:clamp(19px,2vw,32px);height:clamp(19px,2vw,32px);
  font-size:clamp(10px,1vw,15px);line-height:1;border-radius:50%;
  background:#17446d;box-shadow:0 2px 6px #18234f6b;
}
#match .stadium.reference-stage .keeper{
  position:absolute!important;z-index:9!important;
  left:50%;top:39%;bottom:auto!important;
  width:17%!important;height:42%!important;max-width:none!important;min-width:0!important;
  transform:translateX(-50%);display:block!important;
  filter:drop-shadow(0 7px 5px #081f4399)!important;
  pointer-events:none!important;transition:left .36s ease,transform .28s ease!important;
}
#match .stadium.reference-stage .keeper .keeper-model{
  display:block!important;width:100%!important;height:100%!important;inset:0!important;
  background-image:url('./modeled-goalkeepers.webp')!important;
  background-size:400% 300%!important;pointer-events:none
}
#match .stadium.reference-stage .keeper-label{display:none!important}
#match .stadium.reference-stage .shooter{display:none!important}
#match .stadium.reference-stage .ball-zone{
  position:absolute!important;left:50%!important;bottom:1.9%!important;
  top:auto!important;right:auto!important;
  width:11.8%!important;height:24.4%!important;display:block!important;
  transform:translateX(-50%)!important;z-index:15!important;
  visibility:visible!important;opacity:1!important;pointer-events:none!important;
}
#match .stadium.reference-stage .ball-zone::before,
#match .stadium.reference-stage .ball-zone::after{display:none!important}
#match .stadium.reference-stage .valyren-ball{
  display:block!important;position:relative!important;width:100%!important;height:100%!important;
  background:none!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;filter:none!important;
  transform:none;transition:transform .48s cubic-bezier(.16,.24,.25,1.09)!important;
}
#match .stadium.reference-stage .ball-glyph{display:none!important}
#match .stadium.reference-stage .ref-ball-body{
  position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 7px 5px #092b5b77);pointer-events:none
}
#match .stadium.reference-stage .ball-emblem{
  position:absolute!important;z-index:3!important;left:50%!important;top:47%!important;
  width:34%!important;height:41%!important;object-fit:contain!important;
  transform:translate(-50%,-50%)!important;display:block!important;
  background:#f9f3ffb8!important;padding:1px!important;
  border:1px solid #e6d5fa!important;border-radius:50%!important;
  box-shadow:0 0 6px #e2c2ff!important;pointer-events:none;
}
#match .stadium.reference-stage .ref-ball-glow{
  position:absolute;z-index:-1;left:50%;bottom:-16%;width:220%;height:152%;
  transform:translateX(-50%);object-fit:fill;pointer-events:none;
  filter:drop-shadow(0 0 8px #e7a5ffcc);
  animation:ref-glow-pulse 2.7s ease-in-out infinite alternate;
}
@keyframes ref-glow-pulse{from{opacity:.72;filter:brightness(.94)}to{opacity:1;filter:brightness(1.15)}}
#match .stadium.reference-stage .valyren-ball.kicked{
  transform:translate(var(--ball-x,0px),var(--ball-y,-150px)) scale(.25) rotate(620deg)!important;
}
#match .stadium.reference-stage .match-head{
  position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;
  height:100%!important;min-height:0!important;display:block!important;
  margin:0!important;padding:0!important;background:none!important;
  border:0!important;box-shadow:none!important;z-index:22!important;pointer-events:none!important;
}
#match .stadium.reference-stage .match-head>.word-prompt{
  position:absolute!important;z-index:2;
  left:32.9%!important;top:-1.2%!important;right:auto!important;
  width:34.9%!important;height:17%!important;min-height:0!important;
  max-width:none!important;padding:8px 9px!important;gap:0!important;
  display:flex!important;flex-direction:row!important;
  align-items:center!important;justify-content:center!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background:transparent url('./word-reference-panel.webp') center/100% 100% no-repeat!important;
  color:#fff!important;pointer-events:auto!important;
}
#match .stadium.reference-stage .prompt-eyebrow{display:none!important}
#match .stadium.reference-stage .prompt-line{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:100%;min-width:0;
}
#match .stadium.reference-stage #targetWord{
  font-size:clamp(17px,3.45vw,52px)!important;font-weight:1000!important;
  line-height:1.07!important;letter-spacing:0!important;
  max-height:100%;overflow:hidden;text-overflow:ellipsis;
  color:#fff!important;text-shadow:0 2px 3px #110c41,0 0 8px #e5c8ff80!important;
}
#match .stadium.reference-stage #speak{
  display:grid!important;place-items:center!important;flex:0 0 auto!important;
  width:clamp(23px,3vw,41px)!important;height:clamp(23px,3vw,41px)!important;
  min-width:0!important;min-height:0!important;font-size:clamp(14px,1.7vw,24px)!important;
  border:2px solid #edffff!important;border-radius:50%!important;
  background:#753ad4!important;color:#fff!important;
  box-shadow:0 0 10px #c690ffb0!important;padding:0!important;pointer-events:auto;
}
#match .stadium.reference-stage .match-meta{
  display:block!important;position:absolute!important;inset:0!important;z-index:4!important;
  width:100%!important;height:100%!important;min-height:0!important;
  margin:0!important;padding:0!important;pointer-events:none!important;
  border:0!important;background:none!important;box-shadow:none!important;
}
#match .stadium.reference-stage .match-time{
  display:flex!important;position:absolute!important;
  right:2%!important;bottom:4%!important;left:auto!important;top:auto!important;
  width:15%!important;height:9.5%!important;min-height:0!important;min-width:0!important;
  padding:2px 8px!important;justify-content:center;align-items:center;gap:5px;
  border:3px solid #f7b44a!important;border-radius:35px!important;
  background:linear-gradient(115deg,#33215c,#090e41)!important;
  color:#fff!important;box-shadow:0 0 10px #efad5dcf!important;
  font-size:clamp(13px,1.8vw,24px)!important
}
#match .stadium.reference-stage .match-time strong{font-size:inherit!important}
#match .stadium.reference-stage .match-progress{
  position:absolute!important;right:19%!important;bottom:5%!important;
  left:auto!important;top:auto!important;
  width:16%!important;height:7.8%!important;min-height:0!important;min-width:0!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
  padding:2px 5px!important;border:2px solid #c58fff!important;border-radius:24px!important;
  background:#281457e6!important;color:#fff!important;box-shadow:0 0 8px #8f57d884!important;
}
#match .stadium.reference-stage .match-progress strong{font-size:clamp(10px,1.2vw,17px)!important;color:white}
#match .stadium.reference-stage .match-progress small{display:none!important}
#match .stadium.reference-stage .end-button{
  display:grid!important;place-items:center!important;position:absolute!important;
  top:1.5%!important;right:1%!important;left:auto!important;
  width:clamp(25px,3.3vw,43px)!important;height:clamp(25px,3.3vw,43px)!important;
  flex:none!important;font-size:clamp(14px,2vw,26px)!important;
  color:#fff!important;background:linear-gradient(#ce5cff,#7830ac)!important;
  border:2px solid #f6d2ff!important;box-shadow:0 0 10px #cd80f7!important;
  border-radius:50%!important;pointer-events:auto!important;
}
#match .stadium.reference-stage .scoreboard{
  position:absolute!important;inset:0!important;top:0!important;left:0!important;right:0!important;
  width:100%!important;max-width:none!important;height:100%!important;
  display:block!important;transform:none!important;margin:0!important;
  padding:0!important;z-index:21!important;pointer-events:none!important;
}
#match .stadium.reference-stage .score-card{
  display:block!important;position:absolute!important;top:9%!important;
  left:1.4%!important;right:auto!important;width:16.0%!important;height:51%!important;
  min-height:0!important;min-width:0!important;max-width:none!important;
  overflow:hidden!important;transform:none!important;opacity:1!important;
  border:0!important;border-radius:0!important;outline:0!important;
  padding:0!important;margin:0!important;
  background:transparent url('./score-left-reference.webp') center/100% 100% no-repeat!important;
  box-shadow:none!important;pointer-events:none!important;
}
#match .stadium.reference-stage .score-card:nth-child(2){
  left:auto!important;right:1.5%!important;
  background-image:url('./score-right-reference.webp')!important
}
#match .stadium.reference-stage .score-card .score-full-model{
  position:absolute;left:9%;top:1%;width:82%!important;height:65%!important;
  aspect-ratio:auto!important;background-size:400% 300%;
  background-position:var(--model-x,0%) var(--model-y,0%);
  pointer-events:none;
}
#match .stadium.reference-stage .score-card .portrait{
  position:absolute!important;left:3%;top:62%;width:19%!important;height:auto!important;
  aspect-ratio:1;margin:0!important;border:2px solid white!important;
}
#match .stadium.reference-stage .score-card b{
  position:absolute;left:10%;right:10%;top:62%;width:auto!important;
  font-size:clamp(12px,1.65vw,25px)!important;line-height:1.15!important;
  text-align:center!important;color:#fff!important;font-weight:1000!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 3px #0c2b5e
}
#match .stadium.reference-stage .score-card .score-role{
  position:absolute!important;left:7%;right:7%;top:73%;width:auto!important;
  display:block!important;padding:1px 2px!important;
  font-size:clamp(8px,.84vw,13px)!important;
  color:#e9fffc!important;background:#1c617acc!important;text-align:center!important;
  line-height:1.1!important;white-space:nowrap;overflow:hidden
}
#match .stadium.reference-stage .score-card strong{
  position:absolute!important;left:20%;right:20%;bottom:5.5%;top:auto!important;
  width:auto!important;display:block!important;justify-self:auto!important;
  background:linear-gradient(110deg,#5720a5,#c642c5)!important;
  color:#fff!important;font-size:clamp(11px,1.8vw,26px)!important;
  font-weight:1000!important;line-height:1!important;
  padding:4px!important;border-radius:20px!important;text-align:center!important;
}
#match .stadium.reference-stage .turnbar{
  position:absolute!important;z-index:20!important;
  left:2%!important;bottom:4%!important;top:auto!important;right:auto!important;
  width:28%!important;height:9.5%!important;min-width:0!important;min-height:0!important;
  max-width:none!important;margin:0!important;padding:1px 7px!important;
  transform:none!important;display:flex!important;align-items:center;justify-content:flex-start!important;
  gap:5px!important;border:2px solid #c18cff!important;border-radius:35px!important;
  background:linear-gradient(100deg,#160b51ed,#6927c2ed)!important;
  box-shadow:0 0 9px #8b6affbc!important;
}
#match .stadium.reference-stage .turnbar .portrait{
  width:clamp(22px,3.0vw,43px)!important;height:auto!important;aspect-ratio:1;
  min-width:0!important;border:1px solid white!important
}
#match .stadium.reference-stage .turnbar b{
  font-size:clamp(10px,1.3vw,19px)!important;color:#fff!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
#match .stadium.reference-stage .turnbar .shot-timer{
  margin-left:auto;flex:0 0 auto;
  width:clamp(25px,4vw,53px)!important;height:clamp(25px,4vw,53px)!important;
  border:2px solid #fdc263!important;background:#8d34a1!important;
}
#match .stadium.reference-stage .shot-timer #shotClock{
  font-size:clamp(12px,1.5vw,22px)!important
}
#match .stadium.reference-stage .shot-timer small{font-size:8px!important}
#match .stadium.reference-stage .feedback{z-index:35!important;top:55%!important}
#match>.under-game{display:flex;justify-content:center;gap:10px;min-height:0;flex-wrap:wrap;padding:5px 0}
#match>.under-game #matchHint{display:none}
#match>.under-game #repeat{margin:0}
#match>.under-game .match-audio{margin:0}
#match .brandball{background:url('./valyren-emblem.webp') center/contain no-repeat}
@media(max-width:720px) and (orientation:portrait){
  #match .stadium.reference-stage{aspect-ratio:auto;height:clamp(455px,88dvh,780px)!important;background-size:auto 100%!important;background-position:50% 50%!important}
  #match .stadium.reference-stage .match-head>.word-prompt{left:17%!important;top:1%!important;width:66%!important;height:14%!important}
  #match .stadium.reference-stage #targetWord{font-size:clamp(20px,6vw,34px)!important}
  #match .stadium.reference-stage .choices{left:6%!important;right:6%!important;top:20%!important;height:27%!important;gap:3px!important}
  #match .stadium.reference-stage .keeper{width:35%!important;height:30%!important;top:49%!important}
  #match .stadium.reference-stage .score-card{left:1%!important;top:7%!important;width:24%!important;height:12%!important;background:none!important;background-color:#172a64e8!important;border:2px solid #b7e7fd!important;border-radius:9px!important}
  #match .stadium.reference-stage .score-card:nth-child(2){left:auto!important;right:1%!important}
  #match .stadium.reference-stage .score-card .score-full-model{display:none!important}
  #match .stadium.reference-stage .score-card .portrait{left:4%;top:5%;width:30%!important}
  #match .stadium.reference-stage .score-card b{left:36%;right:2%;top:12%;font-size:11px!important;text-align:left!important}
  #match .stadium.reference-stage .score-card .score-role{left:35%;right:2%;top:42%;font-size:8px!important}
  #match .stadium.reference-stage .score-card strong{left:35%;right:5%;bottom:4%;font-size:10px!important;padding:2px!important}
  #match .stadium.reference-stage .ball-zone{width:30%!important;height:20%!important;bottom:2%!important}
  #match .stadium.reference-stage .turnbar{left:3%!important;width:45%!important;height:6.5%!important;bottom:1%!important}
  #match .stadium.reference-stage .match-time{width:31%!important;height:6%!important;bottom:1%!important}
  #match .stadium.reference-stage .match-progress{display:none!important}
  #match .reference-goal-posts{display:none!important}
}
@media(orientation:landscape) and (max-height:560px){
  .brandbar{display:none!important}
  #match{padding:1px!important;margin:0!important;max-width:none!important}
  #match .stadium.reference-stage{border-radius:7px!important;width:100%!important;max-width:100%!important;max-height:100dvh!important}
  #match>.under-game{display:none!important}
  #match .stadium.reference-stage .score-card b{font-size:clamp(9px,1.7vw,16px)!important}
  #match .stadium.reference-stage .score-card .score-role{font-size:clamp(7px,.9vw,11px)!important}
  #match .stadium.reference-stage .score-card strong{font-size:clamp(11px,1.7vw,19px)!important}
  #match .stadium.reference-stage .keeper{height:42%!important}
  #match .stadium.reference-stage .match-time{font-size:clamp(10px,1.45vw,17px)!important}
  #match .stadium.reference-stage .match-progress{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  #match .stadium.reference-stage .ref-ball-glow{animation:none!important}
  #match .stadium.reference-stage .choice{transition:none!important}
}