/* Original LUCKYBOX showroom geometry, observed against the requested case-page layout. */
.referenceDrawPage { width:100%; min-width:0; padding:28px 0 44px; }
.referenceDrawPage button { font:inherit; cursor:pointer; }
.referenceDrawPage button:focus-visible { outline:2px solid #ffd33f; outline-offset:4px; }
.referenceDrawBreadcrumb { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:0; border:0; color:#e7eaf0; background:transparent; font-size:12px!important; }
.referenceDrawBreadcrumb > svg { box-sizing:content-box; padding:11px; border-radius:50%; background:#ffffff08; color:#d6dce7; }
.referenceDrawTitle { width:100%; margin:18px 0 30px; text-align:center; }
.referenceDrawTitle h1 { max-width:1000px; margin:0 auto; font-size:26px; line-height:1.5; font-weight:750; text-wrap:balance; }
.referenceDrawTitle > span { display:block; margin-top:9px; color:#929aa9; font-size:10px; letter-spacing:.5px; }
.referenceDrawStageShell { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:238px; background:radial-gradient(ellipse at 50% 45%,#cf9c3c0e,transparent 65%); }
.referenceDrawStage { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:5px; width:min(940px,calc(100% - 148px)); min-height:225px; }
.referenceDrawPoolPanel,.referenceDrawPrizePanel { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:18px 28px; overflow:hidden; background:linear-gradient(140deg,#161b24,#1c2029); }
.referenceDrawPoolPanel { clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%,12% 50%); }
.referenceDrawPrizePanel { clip-path:polygon(12% 0,100% 0,88% 50%,100% 100%,12% 100%,0 50%); background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--preview-grade,#77808f) 8%,transparent),transparent 70%),#171b24; }
.referenceDrawStageKicker { display:block; color:#8e97a7; font-size:9px; letter-spacing:1.5px; line-height:1.5; }
.referenceDrawPoolImage { display:flex; align-items:center; justify-content:center; width:80%; height:160px; margin-top:5px; }
.referenceDrawSelectedImage { display:flex; align-items:center; justify-content:center; width:70%; height:125px; margin-top:6px; }
.referenceDrawPoolImage > img,.referenceDrawSelectedImage > img { display:block; width:100%; height:100%; object-fit:contain; }
.referenceDrawStageGrade { margin-top:5px; color:var(--preview-grade,#b0b9c6); font-size:11px; font-weight:750; line-height:1.4; }
.referenceDrawPrizePanel > strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; width:75%; margin-top:5px; color:#dbe0e9; font-size:11px; line-height:1.5; text-align:center; }
.referenceDrawInspectButton { position:absolute; right:25px; top:8px; display:inline-flex; align-items:center; justify-content:center; width:44px; min-height:44px; padding:12px; border:1px solid #ffffff16; border-radius:50%; color:#b8c3d2; background:#ffffff06; }
.referenceDrawInspectButton:hover { color:#ffd33f; border-color:#e7c35e55; }
.referenceDrawPage .referenceDrawChevron { position:absolute; top:50%; z-index:1; min-width:44px; min-height:54px; padding:0; border:0; background:transparent; font-size:52px; line-height:1; letter-spacing:-14px; color:#c9a24b; text-shadow:0 0 22px #e3b95412; opacity:.48; transform:translateY(-50%); }
.referenceDrawPage .referenceDrawChevron:hover { opacity:1; }
.referenceDrawChevronLeft { right:calc(50% + min(470px,38%)); }
.referenceDrawChevronRight { left:calc(50% + min(470px,38%)); }
.referenceDrawOperations { display:flex; flex-direction:column; align-items:center; gap:11px; margin:22px 0 44px; text-align:center; }
.referenceDrawOperations > small { color:#8e98aa; font-size:10px; line-height:1.7; }
.referenceDrawPreviewButton { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-width:200px; min-height:44px; margin:3px 0 0; padding:10px 25px; border:0; border-radius:24px; color:#24251e; background:#ffd33f; font-size:12px!important; font-weight:700!important; }
.referenceDrawPreviewButton:hover { background:#ffe16c; }
.referenceDrawFeatured { width:100%; margin:0 0 46px; }
.referenceDrawFeatured > h2 { display:flex; align-items:center; gap:9px; min-height:37px; margin:0 0 18px; padding:0 0 14px; border-bottom:1px solid #ffffff0a; color:#e4e8ef; font-size:17px; line-height:1.5; }
.referenceDrawFeatured > h2 > svg { color:#ffd33f; }
.referenceDrawFeaturedRail { display:flex; align-items:stretch; width:100%; gap:4px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#454b5a transparent; mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent); }
.referenceDrawFeaturedItem { display:flex; align-items:center; flex:0 0 256px; gap:10px; min-width:0; min-height:64px; max-height:72px; padding:8px 24px 8px 12px; border:0; border-left:2px solid var(--preview-grade,#77808f); border-radius:33px 0 0 33px; clip-path:polygon(0 0,100% 0,91% 50%,100% 100%,0 100%); color:#e7eaf1; background:linear-gradient(110deg,color-mix(in srgb,var(--preview-grade,#77808f) 10%,#303442),#282c38); text-align:left; }
.referenceDrawFeaturedItem:hover { background-color:#ffffff08; }
.referenceDrawFeaturedImage { display:flex; align-items:center; justify-content:center; flex:0 0 62px; width:62px; height:48px; }
.referenceDrawFeaturedImage > img { display:block; width:100%; height:100%; object-fit:contain; }
.referenceDrawFeaturedItem > span:last-child { min-width:0; }
.referenceDrawFeaturedItem strong { display:block; color:var(--preview-grade,#d1d7e3); font-size:12px; line-height:1.4; }
.referenceDrawFeaturedItem small { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#b5bdcb; font-size:10px; line-height:1.4; }
.referenceDrawAll { width:100%; }
.referenceDrawAll > header { display:flex; justify-content:space-between; align-items:center; gap:20px; width:100%; padding-bottom:17px; margin-bottom:26px; border-bottom:1px solid #ffffff0a; }
.referenceDrawAll > header h2 { margin:0; color:#e8ebf1; font-size:17px; line-height:1.5; }
.referenceDrawAll > header > span { color:#aeb7c7; font-size:12px; line-height:1.6; }
.referenceDrawAll > header > span > strong { color:#ffd33f; }
.referenceDrawPage .referencePrizeGrid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.referenceDrawPage .referencePrizeCard { height:150px; border:1px solid #ffffff08; border-left:3px solid var(--preview-grade,#77808f); background:linear-gradient(90deg,color-mix(in srgb,var(--preview-grade,#77808f) 10%,transparent),transparent 65%),#232731; }
.referenceDrawPrize { position:relative; display:block; width:100%; height:100%; padding:0; border:0; color:inherit; background:transparent; text-align:left; }
.referenceDrawPrize:hover { background:#ffffff04; }
.referenceDrawPrize[aria-pressed="true"],.referenceDrawFeaturedItem[aria-pressed="true"] { box-shadow:inset 0 0 0 1px var(--preview-grade,#b0b9c6); background-color:#ffffff08; }
.referenceDrawPage .referencePrizeImage { position:absolute; top:7px; left:18%; display:flex; align-items:center; justify-content:center; width:65%; height:96px; padding:0; }
.referenceDrawPage .referencePrizeBody { position:absolute; inset:0; padding:0; }
.referenceDrawPage .referencePrizeGrade { position:absolute; top:9px; left:9px; z-index:1; min-height:18px; margin:0; padding:1px 5px; font-size:9px; }
.referenceDrawPage .referencePrizeBody h2 { position:absolute; bottom:10px; left:11px; right:10px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:0; margin:0; padding:0; font-size:11px; font-weight:600; line-height:1.4; }
.referenceDrawPage .referencePrizeBody p { position:absolute; top:9px; right:10px; align-items:flex-end; gap:0; margin:0; line-height:1.3; }
.referenceDrawPage .referencePrizeBody p > span { display:none; }
.referenceDrawPage .referencePrizeBody p > strong { font-size:10px; font-weight:650; color:#dce1e9; }
.referenceDrawMissing { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; width:100%; height:100%; color:#8290a5; font-size:30px; line-height:1; }
.referenceDrawMissing small { font-size:10px; line-height:1.5; }
.referenceDrawAssist { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.referenceDrawInspector { width:min(680px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:26px; border:1px solid #4b5261; border-radius:9px; color:#e8ebf1; background:#232833; }
.referenceDrawInspector::backdrop { background:#080b12d9; }
.referenceDrawInspectorClose { float:right; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-12px -12px 0 8px; border:0; border-radius:5px; color:#e0e5ef; background:#ffffff08; font-size:25px!important; }
.referenceDrawInspector h2 { margin:10px 0 16px; font-size:20px; line-height:1.6; }
.referenceDrawInspectorGrade { display:inline-block; padding:4px 8px; border-left:3px solid var(--preview-grade,#77808f); color:#edf0f7; background:color-mix(in srgb,var(--preview-grade,#77808f) 10%,transparent); font-size:12px; }
.referenceDrawInspectorImage { display:flex; align-items:center; justify-content:center; width:100%; height:min(50vh,420px); }
.referenceDrawInspectorImage > img { display:block; width:100%; height:100%; object-fit:contain; }
.referenceDrawInspector p { color:#b8c2d2; font-size:12px; line-height:1.8; }
.referenceDrawInspector small { color:#8f9aad; font-size:11px; line-height:1.8; }
@media(max-width:1599px) { .referenceDrawPage .referencePrizeGrid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1023px) {
  .referenceDrawStage { width:calc(100% - 100px); }
  .referenceDrawPage .referenceDrawChevron { font-size:39px; letter-spacing:-11px; }
  .referenceDrawChevronLeft { right:calc(50% + 39%); }
  .referenceDrawChevronRight { left:calc(50% + 39%); }
  .referenceDrawPage .referencePrizeGrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:767px) {
  .referenceDrawPage { padding-top:20px; }
  .referenceDrawTitle { margin:15px 0 22px; }
  .referenceDrawTitle h1 { font-size:19px; line-height:1.65; }
  .referenceDrawTitle > span { font-size:9px; }
  .referenceDrawStageShell { min-height:196px; }
  .referenceDrawStage { width:calc(100% - 34px); min-height:184px; gap:3px; }
  .referenceDrawPoolPanel,.referenceDrawPrizePanel { padding:12px 10px; }
  .referenceDrawPoolImage { width:75%; height:132px; }
  .referenceDrawSelectedImage { width:70%; height:96px; }
  .referenceDrawStageKicker { font-size:7px; letter-spacing:.3px; }
  .referenceDrawPrizePanel > strong { width:80%; font-size:9px; -webkit-line-clamp:2; }
  .referenceDrawStageGrade { font-size:10px; }
  .referenceDrawPage .referenceDrawChevron { min-width:44px; min-height:44px; font-size:24px; letter-spacing:-9px; opacity:.6; }
  .referenceDrawChevronLeft { left:-4px; right:auto; }
  .referenceDrawChevronRight { right:3px; left:auto; }
  .referenceDrawOperations { margin:18px 0 34px; gap:10px; }
  .referenceDrawInspectButton { right:8px; top:3px; }
  .referenceDrawOperations > small { font-size:9px; }
  .referenceDrawFeatured { margin-bottom:34px; }
  .referenceDrawFeatured > h2,.referenceDrawAll > header h2 { font-size:15px; }
  .referenceDrawFeaturedItem { flex-basis:224px; }
  .referenceDrawAll > header { align-items:flex-start; gap:12px; margin-bottom:19px; padding-bottom:14px; }
  .referenceDrawAll > header > span { font-size:10px; }
  .referenceDrawPage .referencePrizeGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .referenceDrawPage .referencePrizeCard { height:150px; }
  .referenceDrawPage .referencePrizeImage { top:17px; left:17%; width:66%; height:90px; }
  .referenceDrawPage .referencePrizeGrade { font-size:8px; top:7px; left:6px; padding:1px 3px; }
  .referenceDrawPage .referencePrizeBody p { top:9px; right:6px; max-width:52%; }
  .referenceDrawPage .referencePrizeBody p > strong { font-size:8px; text-align:right; }
  .referenceDrawPage .referencePrizeBody h2 { bottom:9px; left:8px; right:7px; font-size:10px; }
}
@media(max-width:359px) {
  .referenceDrawTitle h1 { font-size:17px; }
  .referenceDrawPage .referencePrizeGrid { gap:9px; }
  .referenceDrawPage .referencePrizeBody h2 { font-size:9px; }
  .referenceDrawOperations > small { max-width:240px; }
}
@media(prefers-reduced-motion:reduce) { .referenceDrawPage * { animation:none; transition:none; scroll-behavior:auto; } }

/* The shared pool page now hosts one original lit product stage. */
.referenceDrawShowcaseShell { display:block; min-height:0; background:none; }
.referenceDrawShowcaseShell > .referenceDrawInspectButton { z-index:2; right:16px; top:12px; }
.referenceDrawTitle h1:focus { outline:none; }