/* Keep the game's authored portrait proportions; only clip off-screen drawers. */
html, body { background:#080708; }
#GameCanvas { clip-path:inset(max(0px,calc((100vh - 100vw * 1334 / 750) / 2)) max(0px,calc((100vw - 100vh * 750 / 1334) / 2))); }
#xy-refine {
  box-sizing:border-box; width:min(516px,calc(100vw - 18px),calc(100vh * 750 / 1334 - 18px));
  max-height:95vh; margin:auto; padding:0; border:3px solid #38221e; border-radius:3px;
  color:#53362c; background:#dfc5af; box-shadow:0 4px 0 #251717,0 14px 38px #000b;
  font:16px/1.3 Arial,"PingFang SC",sans-serif;
  overflow:auto; scrollbar-width:thin; scrollbar-color:#805546 #dfc5af;
}
#xy-refine::backdrop { background:#160c07c9; }
#xy-refine * { box-sizing:border-box; }
#xy-refine button { font:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#xy-refine button:focus-visible, #xy-refine summary:focus-visible { outline:3px solid #ffe389; outline-offset:1px; }
#xy-refine button:disabled { opacity:.6; cursor:default; }
#xy-refine button:active:not(:disabled) { transform:translateY(2px) scale(.98); }
.xr-head { display:flex; align-items:center; justify-content:space-between; min-height:65px; padding:8px 14px 10px 20px; background:url('/assets/bundle/native/ec/ecec547f-4013-465f-874e-350cdd790f5a.04399.png') center/100% 100% no-repeat; }
.xr-head h2 { margin:0; font-size:29px; font-weight:800; color:#fff7df; text-shadow:0 2px 0 #58382f; }
.xr-close { width:43px; height:43px; border:0; background:url('/assets/bundle/native/e9/e942ef44-7bd5-4887-b600-4661dc2f2614.e8f2e.png') center/contain no-repeat; flex:none; }
.xr-wallet { display:flex; justify-content:center; align-items:center; gap:20px; padding:7px 14px 8px; background:#ae8673; border-bottom:3px solid #6e483d; }
.xr-wallet span { display:flex; align-items:center; gap:5px; min-width:0; }
.xr-wallet img { width:35px; height:32px; object-fit:contain; }
.xr-wallet b { color:#fff1d2; font-size:20px; font-weight:700; text-shadow:1px 1px 0 #5f3c30,-1px -1px 0 #5f3c30; font-variant-numeric:tabular-nums; }
.xr-body { padding:12px 15px 0; }
.xr-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.xr-tabs button { position:relative; height:77px; padding:5px 3px 9px; border:0; background:url('/assets/bundle/native/a3/a3df834f-6170-428e-bd2f-36bff69251d5.6ab55.png') center/100% 100% no-repeat; color:#fff0c7; text-shadow:0 1px #4d2c20; }
.xr-tabs button[aria-selected=true] { background-image:url('/assets/bundle/native/17/17df0f91-236b-45c2-8b59-e58ba2015913.5396f.png'); color:#573624; text-shadow:none; }
.xr-tabs img { position:absolute; top:7px; left:50%; transform:translateX(-50%); width:50px; height:36px; object-fit:contain; display:block; margin:0; filter:drop-shadow(0 2px 1px #452a2080); }
.xr-tabs span { position:absolute; bottom:14px; left:0; right:0; display:block; line-height:16px; font-size:15px; font-weight:600; }
.xr-equipment { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:12px 1px 9px; }
.xr-equipment strong { font-size:18px; font-weight:600; }
.xr-equipment>span { font:13px "PingFang SC",sans-serif; color:#805a47; }
.xr-slots { display:grid; gap:6px; }
.xr-slot { display:flex; align-items:center; gap:8px; min-height:54px; padding:0 3px 0 7px; border:9px solid transparent; border-image:url('/assets/bundle/native/b0/b05d5e53-0eff-4de6-ad88-0d061b758e03.c1a8c.png') 20 fill / 9px stretch; color:#f8e9c5; }
.xr-grade-1 { border-image-source:url('/assets/bundle/native/3d/3d675369-4388-4626-8367-046b2b34e3dd.9957a.png'); }
.xr-grade-2 { border-image-source:url('/assets/bundle/native/ea/ea3acc63-764a-44c3-ba8a-5bb40c3ed88b.14590.png'); }
.xr-grade-3 { border-image-source:url('/assets/bundle/native/cf/cf9390fa-ce4f-4b4c-b455-095d60a49318.a066b.png'); }
.xr-grade-4 { border-image-source:url('/assets/bundle/native/78/78bfa002-4368-4a26-ab76-fbee35c1c967.b324f.png'); }
.xr-grade-5 { border-image-source:url('/assets/bundle/native/a2/a26f1955-5850-4686-acb5-9512196821b4.c9cd2.png'); }
.xr-quality { color:var(--grade); font-size:14px; font-weight:600; flex:none; }
.xr-affix { flex:1; min-width:0; color:var(--grade); font-size:19px; font-weight:600; text-shadow:1px 2px 0 #271615; white-space:nowrap; }
.xr-lock { display:flex; align-items:center; justify-content:center; gap:1px; flex:none; width:67px; min-height:37px; padding:4px 3px 7px; border:0; background:url('/assets/bundle/native/a3/a3df834f-6170-428e-bd2f-36bff69251d5.6ab55.png') center/100% 100% no-repeat; color:#ffefcc; font-size:13px !important; text-shadow:0 1px #47251e; }
.xr-lock[aria-pressed=true] { background-image:url('/assets/bundle/native/17/17df0f91-236b-45c2-8b59-e58ba2015913.5396f.png'); color:#50351e; text-shadow:none; }
.xr-lock img { width:13px; height:16px; object-fit:contain; filter:brightness(.33) sepia(1); }
.xr-hint { margin:10px 0 5px; min-height:18px; text-align:center; color:#72503f; font-size:13px; }
.xr-footer { padding:9px 22px 13px; background:url('/assets/bundle/native/c7/c742f0c3-d614-4c45-9a66-257bc2577aa8.d7829.png') center/100% 100% no-repeat; }
.xr-status { min-height:19px; margin:0 0 5px; color:#ffedbd; font-size:13px; text-align:center; text-shadow:0 1px #513128; }
.xr-roll { display:block; width:100%; min-height:68px; padding:8px 12px 10px; border:0; color:#60351e; background:url('/assets/bundle/native/34/34ceca10-d614-4927-9fe7-d890708e2c29.3f725.png') center/100% 100% no-repeat; }
.xr-roll>span { display:block; font-size:25px; font-weight:700; line-height:1.15; }
.xr-roll small { display:flex; align-items:center; justify-content:center; gap:2px; font:14px/1.1 "PingFang SC",sans-serif; font-weight:600; }
.xr-roll small img { width:25px; height:23px; object-fit:contain; margin-left:13px; }
.xr-roll small img:first-child { margin-left:0; }
.xr-rules { margin-top:9px; color:#ffe4bf; font:12px/1.4 "PingFang SC",sans-serif; }
.xr-rules summary { cursor:pointer; width:max-content; margin:auto; font-family:Arial,"PingFang SC",sans-serif; font-size:14px; }
.xr-rules p { margin:7px 0 0; }
.xr-probabilities { display:flex; justify-content:center; flex-wrap:wrap; gap:5px 13px; margin-top:6px; font-weight:600; }
@media (max-width:400px), (max-height:760px) {
  #xy-refine { font-size:14px; max-height:96vh; }
  .xr-head { min-height:55px; padding:5px 10px 8px 16px; }
  .xr-head h2 { font-size:25px; }
  .xr-close { width:37px; height:37px; }
  .xr-wallet { padding:5px 10px; gap:12px; }
  .xr-wallet img { width:29px; height:27px; }
  .xr-wallet b { font-size:17px; }
  .xr-body { padding:9px 10px 0; }
  .xr-tabs { gap:5px; }
  .xr-tabs button { height:65px; padding:4px 2px 8px; }
  .xr-tabs img { top:6px; width:40px; height:27px; }
  .xr-tabs span { font-size:13px; }
  .xr-equipment { margin:9px 0 7px; }
  .xr-equipment strong { font-size:16px; }
  .xr-slot { min-height:49px; padding-left:2px; gap:5px; border-width:7px; border-image-width:7px; }
  .xr-quality { font-size:12px; }
  .xr-affix { font-size:16px; }
  .xr-lock { width:56px; min-height:34px; font-size:11px !important; }
  .xr-hint { font-size:12px; }
  .xr-footer { padding:7px 16px 10px; }
  .xr-roll { min-height:61px; }
  .xr-roll>span { font-size:23px; }
}