/* Selection scenes are the cards themselves; original sprites stay in matches. */
#app #character-screen[data-equipment-scenes] .equipment-content{width:min(1040px,100%);margin-inline:auto}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-summary{gap:18px;min-height:0;background:none}
@media(min-width:760px){
  #app #character-screen[data-equipment-scenes] .equipment-content:not(:has(.equipment-picker:not([hidden]))){justify-content:safe center}
  #app #character-screen[data-equipment-scenes] .equipment-content:not(:has(.equipment-picker:not([hidden]))) .equipment-summary{flex:0 0 auto}
}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-summary .equipment-card{position:relative;display:block;height:clamp(240px,42dvh,340px);min-height:0;padding:0;background:#15352f;border:3px solid #123a35;border-radius:18px;overflow:hidden;box-shadow:0 5px 0 #092825;cursor:pointer}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-summary .equipment-card::before{content:'';position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,#082b2b55,transparent 34%,transparent 65%,#082b2b88);pointer-events:none}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-summary .equipment-model-stage{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;border:0;border-radius:0;overflow:hidden}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-summary .equipment-card h3{position:absolute;z-index:2;left:14px;top:14px;margin:0;transform:none}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-summary .equipment-card>strong{position:absolute;z-index:2;left:16px;top:48px;right:auto;max-width:40%;font-size:24px;line-height:1.15;text-align:left;text-shadow:0 2px 2px #092727,0 0 9px #092727}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-summary .equipment-card .text-button{position:absolute;z-index:3;right:12px;bottom:12px;left:auto;margin:0;width:150px;min-width:0;height:52px;min-height:52px;padding:10px 18px 15px}

#app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker .character-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker :is(.character-option,.racket-option){display:block;position:relative;isolation:isolate;padding:0;margin:0;gap:0;aspect-ratio:4/5;background:#15352f;border:3px solid #123a35;border-radius:15px;overflow:hidden;transform:none;box-shadow:0 4px 0 #092825}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker .racket-option{aspect-ratio:3/2}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker :is(.character-option,.racket-option)::before,
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker :is(.character-option,.racket-option)::after{content:none}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker .equipment-model-stage{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;border:0;border-radius:0;overflow:hidden}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker button strong{position:absolute;z-index:2;inset:auto 0 0;width:100%;margin:0;padding:24px 8px 12px;border:0;border-radius:0;background:linear-gradient(transparent,#092b2be8);font-size:20px;line-height:1.2;text-shadow:0 2px 2px #092727}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker button strong::after{content:none}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker .selection-mark{top:9px;right:9px;rotate:0}
#app #character-screen[data-equipment-scenes] .equipment-content :is(.equipment-model-stage)::before,
#app #character-screen[data-equipment-scenes] .equipment-content :is(.equipment-model-stage)::after{content:none}
#app #character-screen[data-equipment-scenes] .equipment-content .equipment-model-stage img:is(.skin-scene-preview,.racket-scene-preview){position:static;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;transform:none;translate:none;filter:none;image-rendering:auto}

/* While browsing, the chosen items become two image buttons. */
#app #character-screen[data-equipment-scenes] .equipment-content:has(.equipment-picker:not([hidden])) .equipment-summary .equipment-card{height:120px}
#app #character-screen[data-equipment-scenes] .equipment-content:has(.equipment-picker:not([hidden])) .equipment-summary img.skin-scene-preview{object-position:center 12%}
#app #character-screen[data-equipment-scenes] .equipment-content:has(.equipment-picker:not([hidden])) .equipment-summary .equipment-card h3{left:10px;top:9px;font-size:10px}
#app #character-screen[data-equipment-scenes] .equipment-content:has(.equipment-picker:not([hidden])) .equipment-summary .equipment-card>strong{left:12px;top:auto;bottom:12px;font-size:21px;right:36px;max-width:calc(100% - 48px)}
#app #character-screen[data-equipment-scenes] .equipment-content:has(.equipment-picker:not([hidden])) .equipment-summary .equipment-card .text-button{inset:0;width:100%;height:100%;min-height:0;padding:0;background:none;font-size:0}
#app #character-screen[data-equipment-scenes] .equipment-content:has(.equipment-picker:not([hidden])) .equipment-summary .equipment-card .text-button::after{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff1d6;color:#15352f;font-size:19px}

/* The detail image reaches every edge of its pane. */
#app #equipment-detail[open]{width:min(980px,calc(100vw - 32px));grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
#app #equipment-detail .equipment-detail-stage{height:auto;min-height:430px;background:#15352f}
#app #equipment-detail .equipment-detail-stage::before,
#app #equipment-detail .equipment-detail-stage::after,
#app #equipment-detail .equipment-stage-stamp{display:none}
#app #equipment-detail .equipment-detail-stage .equipment-detail-art{inset:0;border:0;border-radius:0;overflow:hidden}
#app #equipment-detail .equipment-detail-stage .equipment-detail-art::before,
#app #equipment-detail .equipment-detail-stage .equipment-detail-art::after{content:none}
#app #equipment-detail .equipment-detail-stage img:is(.skin-scene-preview,.racket-scene-preview){display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;transform:none;translate:none;filter:none;image-rendering:auto}
#app #equipment-detail .equipment-detail-copy{padding:32px 26px 24px}

@media(max-width:759px) and (orientation:portrait){
  #app #character-screen[data-equipment-scenes] .equipment-content{width:min(460px,100%);gap:16px;padding-inline:10px}
  #app #character-screen[data-equipment-scenes] .equipment-content .equipment-summary{grid-template-columns:1fr;gap:14px}
  #app #character-screen[data-equipment-scenes] .equipment-content .equipment-summary .equipment-card{height:auto;aspect-ratio:3/2}
  #app #character-screen[data-equipment-scenes] .equipment-content:not(:has(.equipment-picker:not([hidden]))) .equipment-summary{flex:1;min-height:420px;grid-template-rows:repeat(2,minmax(0,1fr));align-items:stretch}
  #app #character-screen[data-equipment-scenes] .equipment-content:not(:has(.equipment-picker:not([hidden]))) .equipment-summary .equipment-card{height:100%;max-height:400px;aspect-ratio:auto}
  #app #character-screen[data-equipment-scenes] .equipment-content .equipment-summary .equipment-card>strong{font-size:20px;max-width:45%}
  #app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker .character-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #app #character-screen[data-equipment-scenes] .equipment-content .racket-options{grid-template-columns:1fr;gap:14px}
  #app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker .racket-option{aspect-ratio:3/2}
  #app #character-screen[data-equipment-scenes] .equipment-content:has(.equipment-picker:not([hidden])) .equipment-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  #app #character-screen[data-equipment-scenes] .equipment-content:has(.equipment-picker:not([hidden])) .equipment-summary .equipment-card{height:120px;aspect-ratio:auto}
  #app #character-screen[data-equipment-scenes] .equipment-content:has(.equipment-picker:not([hidden])) .equipment-summary .equipment-card>strong{font-size:16px;bottom:8px;right:8px}
  #app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker button strong{font-size:18px}
  #app #equipment-detail[open]{grid-template-columns:1fr;width:min(440px,calc(100vw - 24px))}
  #app #equipment-detail .equipment-detail-stage{min-height:0;height:auto;aspect-ratio:3/2;border-right:0;border-bottom:3px solid #071f23}
  #app #equipment-detail .equipment-detail-copy{padding:24px 20px}
}
@media(max-height:540px) and (orientation:landscape){
  #app #character-screen[data-equipment-scenes] .equipment-content .equipment-summary .equipment-card{height:170px}
  #app #character-screen[data-equipment-scenes] .equipment-content .equipment-picker .character-options{grid-template-columns:repeat(5,minmax(0,1fr))}
  #app #character-screen[data-equipment-scenes] .equipment-content:has(.equipment-picker:not([hidden])) .equipment-summary .equipment-card{height:85px}
  #app #equipment-detail .equipment-detail-stage{min-height:330px}
}