/* Comic collector cards: game artwork, a colour burst and a clay-court plinth. */ #character-screen,#equipment-detail{--showcase-accent:#ffc744;--showcase-light:#ffedb1;--showcase-dark:#ac591c;--showcase-ink:#0c2c2b} /* Focus may scroll the choices, but must not move the full-screen game canvas. */ #app:has(#character-screen:not([hidden])){overflow:clip} :is(#character-screen,#equipment-detail) [data-showcase='classic'],#equipment-detail[data-showcase='classic']{--showcase-accent:#ffae48;--showcase-light:#ffe0a2;--showcase-dark:#a64c24} :is(#character-screen,#equipment-detail) [data-showcase='headband'],#equipment-detail[data-showcase='headband']{--showcase-accent:#65c9b5;--showcase-light:#c4f0d5;--showcase-dark:#286d64} :is(#character-screen,#equipment-detail) [data-showcase='cap_backwards'],#equipment-detail[data-showcase='cap_backwards']{--showcase-accent:#ff876c;--showcase-light:#ffd6b6;--showcase-dark:#a34037} :is(#character-screen,#equipment-detail) [data-showcase='hoodie'],#equipment-detail[data-showcase='hoodie']{--showcase-accent:#a3bc67;--showcase-light:#e9edbc;--showcase-dark:#4d6843} :is(#character-screen,#equipment-detail) [data-showcase='champion'],#equipment-detail[data-showcase='champion']{--showcase-accent:#ffcd49;--showcase-light:#fff0b6;--showcase-dark:#ae762a} :is(#character-screen,#equipment-detail) [data-showcase='red'],#equipment-detail[data-showcase='red']{--showcase-accent:#f87558;--showcase-light:#ffd1aa;--showcase-dark:#993833} :is(#character-screen,#equipment-detail) [data-showcase='blue'],#equipment-detail[data-showcase='blue']{--showcase-accent:#63b6ed;--showcase-light:#d1eefa;--showcase-dark:#315b90} #app #character-screen .equipment-content{width:min(1020px,100%);min-width:0;align-self:stretch;justify-content:flex-start;gap:20px;overflow-x:hidden;overflow-y:auto;padding:8px 18px 24px;scroll-padding:16px} #app #character-screen .equipment-summary{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;flex-shrink:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible} #app #character-screen .equipment-summary::before{content:none} #app #character-screen .equipment-summary .equipment-card{isolation:isolate;border:3px solid #0d292a;border-radius:24px 14px 22px 16px;background:#d99155 url('./setup-comic-v3/club-stage-flat.webp') center 58%/cover;box-shadow:0 6px 0 #082122;overflow:hidden} #app #character-screen .equipment-summary .equipment-card::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#092b2b33,transparent 28%,#092b2b22 60%,#092b2bee);pointer-events:none} #app #character-screen .equipment-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:16px 28px 18px;color:#fff1d6;background:none;border:0;box-shadow:none} #app #character-screen .equipment-card h3{position:relative;z-index:2;margin:0;padding:6px 15px;border:1px solid #fff1d65c;border-radius:6px;background:#0e3331e8;color:#ffe0a0;font-size:12px;font-weight:900;letter-spacing:2px;text-transform:uppercase;transform:rotate(-2deg)} #app #character-screen .equipment-card .equipment-model-stage{width:100%;height:clamp(180px,29dvh,245px);min-height:0;flex-shrink:0} #app #character-screen .equipment-card>strong{position:relative;z-index:2;margin:0;font-family:var(--font-display);font-size:32px;font-weight:400;text-shadow:0 3px 0 #092727} /* The overview is one quiet court scene; each item gets the same soft light. */ #app #character-screen .equipment-summary .equipment-model-stage::before{background:radial-gradient(ellipse,#fff1d64d,transparent 68%);mask-image:none;transform:none} #app #character-screen .equipment-summary .racket-preview{transform:translateY(-2%) rotate(-7deg) scale(1.04);filter:drop-shadow(3px 5px 0 #082b2b66)} /* Shared illustration layers sit behind each model. */ #app #character-screen .equipment-model-stage,#app #equipment-detail .equipment-detail-art{position:relative;display:flex;justify-content:center;align-items:center;isolation:isolate;overflow:visible;background:none;border:0;box-shadow:none} #app #character-screen .equipment-model-stage::before,#app #equipment-detail .equipment-detail-art::before{content:'';position:absolute;z-index:-2;width:87%;height:90%;left:6.5%;top:0;border:0;border-radius:50%;background:repeating-conic-gradient(from -12deg at 50% 52%,#fff3ce70 0deg 9deg,transparent 9deg 27deg),radial-gradient(ellipse,var(--showcase-light) 0%,var(--showcase-accent) 56%,transparent 72%);mask-image:radial-gradient(ellipse,#000 35%,transparent 71%);transform:rotate(-7deg);pointer-events:none} #app #character-screen .equipment-model-stage::after,#app #equipment-detail .equipment-detail-art::after{content:'';position:absolute;z-index:-1;left:14%;right:14%;bottom:1%;height:17%;min-height:18px;border:3px solid #123e37;border-radius:50%;background:radial-gradient(ellipse at 50% 34%,#082a2b55 0%,transparent 48%),linear-gradient(0deg,#cd682d,#ffc778);box-shadow:0 7px 0 #143b33,0 9px 0 #082a2b,0 13px 16px #082a2b44;transform:rotate(-5deg);pointer-events:none} #app #character-screen .fighter-stage img.equipment-skin-art,#app #equipment-detail img.equipment-skin-art{display:block;position:static;inset:auto;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;image-rendering:pixelated;translate:none;transform:translateY(-4%) scale(.92);filter:drop-shadow(2px 0 0 #fff1d6) drop-shadow(-2px 0 0 #fff1d6) drop-shadow(6px 9px 0 #082b2b55);transition:transform .25s ease} #app #character-screen .racket-preview{position:relative;display:block;object-fit:contain;width:100%;height:100%;max-width:290px;margin:0 auto;transform:translateY(-5%) rotate(-9deg) scale(1.12);filter:drop-shadow(2px 0 0 #fff1d6) drop-shadow(-2px 0 0 #fff1d6) drop-shadow(9px 12px 0 #082b2b55);transition:transform .25s ease} #app #character-screen .equipment-card .text-button{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:150px;height:58px;min-height:58px;margin:6px 0 0;padding:12px 26px 17px;background:transparent url('./setup-comic-v3/change-skin.webp') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;color:#123634;font:400 15px/1.3 var(--font-display);text-decoration:none;filter:none;transform:none} #app #character-screen .equipment-card .text-button[data-equipment='racket']{background-image:url('./setup-comic-v3/change-racket.webp')} #app #character-screen .equipment-card .text-button::after{content:'↗';font-size:19px;line-height:1} #app #character-screen .equipment-card .text-button[aria-expanded='true']{filter:brightness(1.08) drop-shadow(0 0 2px #fff1d6)} /* Numbered colourways have an illustrated face and a dark name plate. */ #app #character-screen .equipment-picker{width:100%;min-width:0;flex-shrink:0;padding:0 4px 12px} #app #character-screen .equipment-picker h3{margin:0 0 16px;font-size:21px;font-family:var(--font-display);font-weight:400;color:#fff1d6;outline:none;text-align:left} #app #character-screen .equipment-picker .character-options,#app #character-screen .racket-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%} #app #character-screen .equipment-picker .character-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} #app #character-screen :is(button.character-option,button.racket-option){position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;min-width:0;height:auto;min-height:0;padding:18px 8px 0;gap:0;border:3px solid #0b2d2b;border-radius:18px 9px 20px 10px;background:radial-gradient(circle at 1px 1px,#0c2c2b18 1px,transparent 1.6px) 0 0/7px 7px,linear-gradient(145deg,var(--showcase-light),var(--showcase-accent) 68%,var(--showcase-dark));color:#fff1d6;box-shadow:4px 6px 0 #062827;transform:rotate(-1.5deg);filter:none;transition:transform .2s ease,box-shadow .2s ease} #app #character-screen :is(button.character-option,button.racket-option):nth-child(2n){border-radius:10px 22px 12px 20px;transform:rotate(1deg)} #app #character-screen :is(button.character-option,button.racket-option):nth-child(3n){transform:rotate(-.8deg)} #app #character-screen :is(button.character-option,button.racket-option)::before{content:attr(data-number);position:absolute;top:11px;left:14px;font:400 18px/1 var(--font-display);color:#0c2c2b99;letter-spacing:-1px;pointer-events:none} #app #character-screen :is(button.character-option,button.racket-option)::after{content:'';position:absolute;z-index:-1;inset:6px;border:1px solid #fff1d669;border-radius:12px 6px 14px 7px;pointer-events:none} #app #character-screen .equipment-picker .equipment-model-stage{height:165px;min-height:0;width:100%;flex-shrink:0;margin:7px 0 9px} #app #character-screen .racket-option .equipment-model-stage{height:clamp(170px,calc(100dvh - 560px),240px)} #app #character-screen .equipment-picker .equipment-model-stage::before{width:110%;left:-5%;height:110%;top:-10%} #app #character-screen .equipment-picker .equipment-model-stage::after{left:10%;right:10%;bottom:4%;height:13%} #app #character-screen .racket-option .racket-preview{height:100%;max-width:none;transform:translateY(-7%) rotate(-12deg) scale(1.2)} #app #character-screen .equipment-picker button strong{position:relative;display:block;z-index:2;width:calc(100% + 16px);margin-top:auto;padding:9px 8px 11px;border-top:3px solid #0b2d2b;border-radius:0 0 14px 7px;background:#123a35;color:#fff1d6;font-family:var(--font-display);font-size:22px;font-weight:400;line-height:1.2;text-align:center;text-shadow:0 2px 0 #061f21} #app #character-screen .equipment-picker .racket-option strong{font-size:28px} #app #character-screen .equipment-picker button strong::after{content:'Ansehen ↗';display:block;margin-top:5px;color:var(--showcase-light);font-family:var(--font-body,'Nunito',sans-serif);font-size:10px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;text-shadow:none} #app #character-screen :is(button.character-option,button.racket-option)[aria-pressed='true']{outline:3px solid #e2f47c;outline-offset:3px;filter:none;box-shadow:4px 6px 0 #062827} #app #character-screen .equipment-picker .selection-mark{z-index:3;top:9px;right:10px;width:28px;height:28px;font-size:19px;border:2px solid #0b2d2b;box-shadow:2px 2px 0 #0b2d2b;rotate:8deg} @media(hover:hover){ #app #character-screen :is(button.character-option,button.racket-option):hover{transform:translateY(-5px) rotate(0);box-shadow:4px 11px 0 #062827} #app #character-screen .racket-option:hover .racket-preview{transform:translateY(-11%) rotate(-5deg) scale(1.25)} #app #character-screen .character-option:hover .equipment-skin-art{transform:translateY(-8%) scale(.98)} } /* Current selection stays visible while browsing. */ #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-summary{min-height:124px;background-position:center 72%;border-radius:16px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])){gap:16px;padding-bottom:18px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card{display:grid;grid-template-columns:98px minmax(0,1fr);grid-template-rows:auto auto auto;gap:3px 12px;padding:8px 20px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card .equipment-model-stage{grid-row:1/4;grid-column:1;height:110px;min-height:0} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-model-stage::after{border-width:2px;min-height:12px;box-shadow:0 4px 0 #143b33} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card :is(h3,strong,.text-button){grid-column:2;justify-self:start} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card h3{padding:3px 9px;font-size:10px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card>strong{font-size:23px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card .text-button{margin:0;min-width:120px;padding:12px 24px 16px;height:48px;min-height:48px;font-size:13px} /* Native modal: browsing never changes the saved choice. */ #app #equipment-detail{padding:0;width:min(980px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 40px);border:3px solid #071f23;border-radius:26px 14px 24px 16px;background:#102f2c;color:#fff1d6;box-shadow:0 10px 0 #03191988,0 25px 90px #001b1acc;overflow:auto} #app #equipment-detail[open]{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr)} #equipment-detail::backdrop{background:#031a1cd9;backdrop-filter:blur(8px)} #app #equipment-detail .equipment-detail-stage{position:relative;isolation:isolate;min-height:520px;background:radial-gradient(circle at 1px 1px,#0c2c2b18 1px,transparent 1.6px) 0 0/8px 8px,linear-gradient(145deg,var(--showcase-light),var(--showcase-accent) 60%,var(--showcase-dark));overflow:hidden;border-right:3px solid #071f23} #app #equipment-detail .equipment-detail-stage::before{content:attr(data-name);position:absolute;top:26px;left:0;width:100%;color:#fff1d652;font:400 clamp(50px,7.5vw,94px)/1 var(--font-display);text-align:center;text-transform:uppercase;letter-spacing:-3px;transform:rotate(-8deg);pointer-events:none} #app #equipment-detail .equipment-detail-stage::after{content:'';position:absolute;z-index:-1;inset:10px;border:2px solid #fff1d66b;border-radius:17px 8px 16px 8px;pointer-events:none} #app #equipment-detail .equipment-detail-art{position:absolute;inset:70px 24px 65px} #app #equipment-detail .equipment-detail-art::before{width:120%;height:130%;left:-10%;top:-20%} #app #equipment-detail .equipment-detail-art::after{left:8%;right:8%;height:12%;bottom:0} #app #equipment-detail img.equipment-skin-art{transform:translateY(-5%) scale(.98)} #app #equipment-detail .racket-preview{position:relative;width:100%;height:100%;object-fit:contain;transform:translateY(-5%) rotate(-12deg) scale(1.17);filter:drop-shadow(3px 0 0 #fff1d6) drop-shadow(-3px 0 0 #fff1d6) drop-shadow(14px 18px 0 #082b2b55)} #app #equipment-detail .equipment-stage-stamp{position:absolute;bottom:22px;left:0;width:100%;text-align:center;font-size:9px;font-weight:900;letter-spacing:2px;color:#fff1d6;text-shadow:0 1px 0 #0c2c2b} #app #equipment-detail .equipment-detail-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:54px 36px 34px;min-width:0} #app #equipment-detail .equipment-eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;color:var(--showcase-accent)} #app #equipment-detail h2{margin:12px 0 20px;color:#fff1d6;font-family:var(--font-display);font-size:clamp(36px,4.5vw,55px);line-height:1.15;font-weight:400;letter-spacing:0;text-align:left;outline:none} #app #equipment-detail blockquote{position:relative;margin:0 0 23px;padding:16px 18px;border-radius:14px 8px 14px 4px;background:#fff1d6;color:#163d35;font-family:var(--font-display);font-size:22px;line-height:1.35;transform:rotate(-1.5deg);box-shadow:3px 4px 0 #071f22} #app #equipment-detail #equipment-detail-description{margin:0;color:#c7d6c6;font-size:15px;font-weight:600;line-height:1.6} #app #equipment-detail .equipment-current{padding:5px 10px;margin:16px 0 0;border:1px solid #dcef8e55;border-radius:6px;color:#dcef8e;font-size:11px;font-weight:900} #app #equipment-detail .equipment-detail-actions{display:flex;flex-direction:column;width:100%;gap:12px;margin-top:26px} #app #equipment-detail button.equipment-confirm,#app #equipment-detail button.equipment-back{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;min-width:0;min-height:86px;height:86px;padding:18px 36px 24px;border:0;border-radius:0;background:transparent url('./setup-comic-v3/select.webp') center/100% 100% no-repeat;color:#17352d;box-shadow:none;font:400 19px/1.3 var(--font-display);text-decoration:none;filter:none;transform:none} #app #equipment-detail button.equipment-back{min-height:76px;height:76px;background-image:url('./setup-comic-v3/back.webp');font-size:16px} #app #equipment-detail button.equipment-confirm{height:100px;min-height:100px;padding:30px 54px 26px;gap:16px;background-image:url('./setup-comic-v3/select-roomy.webp');white-space:nowrap} #app #equipment-detail button.equipment-detail-close{position:absolute;right:12px;top:12px;z-index:2;display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:3px solid #071f23;border-radius:39% 52% 40% 49%;background:#ffce66;color:#17352d;font-size:29px;line-height:1;filter:none;box-shadow:2px 3px 0 #071f23} #app #equipment-detail button:focus-visible,#app #character-screen .equipment-content button:focus-visible{outline:3px solid #e2f47c;outline-offset:4px} #app #equipment-detail :is(button.equipment-confirm,button.equipment-back):hover,#app #character-screen .equipment-card .text-button:hover{filter:brightness(1.08);translate:0 -2px} @media(max-width:759px){ #app #character-screen .equipment-content{padding:6px 8px 20px;gap:18px} #app #character-screen .equipment-summary{border-radius:18px 11px 17px 12px;background-position:center 63%} #app #character-screen .equipment-card{padding:14px 8px;gap:7px} #app #character-screen .equipment-card h3{font-size:10px;letter-spacing:1px;padding:5px 12px} #app #character-screen .equipment-card .equipment-model-stage{height:clamp(145px,25dvh,205px)} #app #character-screen .equipment-card>strong{font-size:24px} #app #character-screen .equipment-card .text-button{min-width:0;width:100%;padding:12px 20px 17px;font-size:13px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card{grid-template-columns:48px minmax(0,1fr);padding:8px 7px;gap:3px 5px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card .equipment-model-stage{height:95px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card .equipment-model-stage::after{content:none} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card h3{font-size:9px;letter-spacing:0;padding:2px 5px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card>strong{font-size:18px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card .text-button{font-size:11px;padding:10px 10px 14px;min-width:0;min-height:48px;height:48px} #app #character-screen .equipment-card .text-button::after{font-size:14px} #app #character-screen .equipment-picker .character-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px} #app #character-screen .racket-options{gap:12px} #app #character-screen button.racket-option{padding:15px 4px 0} #app #character-screen .racket-option .equipment-model-stage{height:140px;margin-top:10px} #app #character-screen .equipment-picker .equipment-model-stage::after{border-width:2px;box-shadow:0 4px 0 #143b33,0 6px 0 #082a2b} #app #character-screen .equipment-picker button strong{font-size:22px;width:calc(100% + 16px)} #app #character-screen .equipment-picker .racket-option strong{width:calc(100% + 8px);font-size:23px} #app #character-screen .equipment-picker button strong::after{font-size:8px;letter-spacing:.5px} #app #character-screen :is(button.character-option,button.racket-option)::before{font-size:14px;top:9px;left:9px} #app #character-screen .equipment-picker .selection-mark{width:23px;height:23px;font-size:15px;top:7px;right:7px} #app #equipment-detail{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:20px 11px 18px 12px} #app #equipment-detail[open]{grid-template-columns:1fr} #app #equipment-detail .equipment-detail-stage{min-height:0;height:clamp(230px,36dvh,320px);border-right:0;border-bottom:3px solid #071f23} #app #equipment-detail .equipment-detail-stage::before{top:15px;font-size:clamp(40px,14vw,68px)} #app #equipment-detail .equipment-detail-art{inset:38px 20px 38px} #app #equipment-detail .equipment-stage-stamp{bottom:11px;font-size:8px;letter-spacing:1px} #app #equipment-detail .equipment-detail-copy{padding:22px 24px 24px} #app #equipment-detail h2{font-size:34px;margin:7px 0 15px} #app #equipment-detail blockquote{font-size:19px;padding:12px 15px;margin-bottom:18px} #app #equipment-detail #equipment-detail-description{font-size:13px;line-height:1.5} #app #equipment-detail .equipment-detail-actions{margin-top:18px;gap:8px} #app #equipment-detail button.equipment-confirm{min-height:84px;height:84px;font-size:17px;padding:26px 38px 22px;gap:14px} #app #equipment-detail button.equipment-back{min-height:64px;height:64px;font-size:15px;padding:14px 30px 19px} } @media(max-width:360px){ #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card{grid-template-columns:32px minmax(0,1fr);gap:3px 4px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card>strong{font-size:14px} #app #character-screen .equipment-content:has(.equipment-picker:not([hidden])) .equipment-card .text-button{gap:4px;padding-inline:6px;font-size:10px;white-space:nowrap} #app #character-screen .racket-option .equipment-model-stage{height:116px} #app #character-screen .equipment-picker .racket-option strong{font-size:20px} } @media(max-height:540px) and (orientation:landscape){ #app #character-screen .equipment-card{padding:10px 20px} #app #character-screen .equipment-card .equipment-model-stage{height:100px} #app #character-screen .equipment-card>strong{font-size:22px} #app #character-screen .racket-option .equipment-model-stage{height:140px} #app #equipment-detail[open]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #app #equipment-detail .equipment-detail-stage{height:auto;min-height:320px;border-bottom:0;border-right:3px solid #071f23} #app #equipment-detail .equipment-detail-art{inset:48px 15px 45px} #app #equipment-detail .equipment-detail-copy{padding:25px} #app #equipment-detail h2{font-size:30px;margin:5px 0 12px} #app #equipment-detail blockquote{font-size:17px;margin-bottom:14px} } @media(prefers-reduced-motion:reduce){ #app #character-screen :is(button.character-option,button.racket-option),#app #character-screen :is(.equipment-skin-art,.racket-preview){transition:none} } /* Skin and racket scenes fill their own comic frames, without a second stage. */ #app #character-screen .equipment-model-stage:has(:is(.skin-scene-preview,.racket-scene-preview)), #app #equipment-detail .equipment-detail-art:has(:is(.skin-scene-preview,.racket-scene-preview)){overflow:hidden;border:2px solid #092b2b;border-radius:12px 7px 11px 8px;background:#142e2a} #app #character-screen .equipment-model-stage:has(:is(.skin-scene-preview,.racket-scene-preview))::before, #app #character-screen .equipment-model-stage:has(:is(.skin-scene-preview,.racket-scene-preview))::after, #app #equipment-detail .equipment-detail-art:has(:is(.skin-scene-preview,.racket-scene-preview))::before, #app #equipment-detail .equipment-detail-art:has(:is(.skin-scene-preview,.racket-scene-preview))::after{display:none} #app #character-screen .fighter-stage img.equipment-skin-art.skin-scene-preview, #app #character-screen .racket-option:hover .racket-preview.racket-scene-preview, #app #character-screen .racket-preview.racket-scene-preview, #app #equipment-detail img.equipment-skin-art.skin-scene-preview, #app #equipment-detail .racket-preview.racket-scene-preview{position:static;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;transform:none;translate:none;filter:none;image-rendering:pixelated}