/* Only the displayed screen resolves its bitmap. Large desktop / HiDPI views
   use the larger source; all matrix layers share that same cached bitmap. */
:root{
 --arc-vault-scene:url('arc-vault.webp');
 --arc-between-scene:url('arc-between.webp');
 --arc-decks-scene:url('arc-decks.webp');
 --arc-matrix-scene:url('arc-matrix.webp');
}
@media(min-width:1601px),(min-height:1001px),(min-width:901px) and (min-resolution:1.5dppx){
 :root{
  --arc-vault-scene:url('arc-vault-large.webp');
  --arc-between-scene:url('arc-between-large.webp');
  --arc-decks-scene:url('arc-decks-large.webp');
  --arc-matrix-scene:url('arc-matrix-large.webp');
 }
}
/* ARC: four user-supplied scenes; foreground is independent of card sleeves.
   Native CSS edges preserve the content/control footprint at every card ratio. */
body[data-theme=arc]{
 --accent:#ebbe78;--accent2:#d58a51;--bg:#17130f;--panel:#29211b;
 --panel2:#201a15;--text:#f0e9dd;--muted:#bdb1a1;--line:#b78b4f55;
 --hero1:#49382a;--hero2:#36281e;--hero3:#181410;--theme-rail:#211810;
 --surface101:#251e19;--edge101:#ad855444;--theme-sleeve:none;
 --frame-trim:0;--scene-size:cover;--scene-position:center;--scene-shade:#100b0615;
}
body[data-theme=arc] .vault-screen{--scene:var(--arc-vault-scene);--scene-position:52% center}
body[data-theme=arc] .vault-entry-screen{--scene:var(--arc-between-scene);background-size:auto,cover;background-position:center}
body[data-theme=arc] .edit-screen{--scene:var(--arc-decks-scene);--scene-position:56% center}
body[data-theme=arc] .v8-viewer .stage{--scene:var(--arc-matrix-scene);--scene-shade:var(--arc-room-shade)!important;--scene-position:52% center}
.theme-choice.theme-arc i{background:#332014 url('arc-matrix.webp') 22% 30%/110% auto no-repeat}
body[data-theme=arc] :is(.deck-panel,.album-section,.vault-header,.topbar){background:#211b16eb!important;border-color:#bc955444}
body[data-theme=arc] .new-vault-tile{background:#211b16df;color:#f5ebda;border-color:#b78b4f77}
body[data-theme=arc] .vault-entry-screen .mode-card{background:linear-gradient(145deg,#382b20ef,#17130ff0);border:1px solid #b59056;border-radius:12px;box-shadow:0 16px 38px #0007,inset 0 1px #f6d49c38}
body[data-theme=arc] .vault-entry-screen .mode-icon{color:#e4b878;opacity:.65}
body[data-theme=arc][data-sleeves=on] .mode-card::after{inset:7px;border:1px solid #bb8a4444;border-image:none;border-radius:6px;background:none;box-shadow:inset 0 1px #f8ce8815}
body[data-theme=arc] .vault-entry-screen .mode-card:hover{border-color:#efc786;box-shadow:0 18px 42px #0009,inset 0 1px #ffe0a855}

/* Warm, quiet metal, with narrow inset corners instead of scaled artwork. */
body[data-theme=arc] .v8-viewer .matrix-cell{border-radius:10px;border-color:#b2864a6b;box-shadow:0 12px 28px #08050290,inset 0 0 0 1px #e8ba6a1a}
body[data-theme=arc][data-sleeves=on] .v8-viewer .matrix-cell{background:linear-gradient(110deg,#251b12bf,#100e0ce3 35%,#17100bd4 70%,#3e2815a6)}
body[data-theme=arc] .v8-viewer .current-cell{border-color:#dca654;box-shadow:0 16px 34px #080502aa,0 0 0 1px #d7a75c28,inset 0 1px #ffe2a63b}
body[data-theme=arc][data-sleeves=on] .matrix-cell>.theme-sleeve124{
 inset:3px;border:1px solid #a6793e;border-image:none;border-radius:6px;
 filter:none;opacity:.88;background:none;pointer-events:none;
 box-shadow:inset 1px 1px #e6bc7829,inset -1px -1px #0008,0 0 0 1px #17100b;
}
body[data-theme=arc][data-sleeves=on] .matrix-cell>.theme-sleeve124::before{
 content:'';position:absolute;inset:3px;border:1px solid #efc58526;border-radius:3px;
 background:linear-gradient(#c99750,#79552b) left top/22px 2px no-repeat,
 linear-gradient(#c99750,#79552b) right top/22px 2px no-repeat,
 linear-gradient(#79552b,#dfb572) left bottom/22px 2px no-repeat,
 linear-gradient(#79552b,#dfb572) right bottom/22px 2px no-repeat,
 linear-gradient(#c99750,#79552b) left top/2px 22px no-repeat,
 linear-gradient(#c99750,#79552b) right top/2px 22px no-repeat,
 linear-gradient(#79552b,#dfb572) left bottom/2px 22px no-repeat,
 linear-gradient(#79552b,#dfb572) right bottom/2px 22px no-repeat;
}
body[data-theme=arc] .v8-viewer .matrix-bar11{background:linear-gradient(90deg,#211810db,#1d160ff5 30%,#1d160ff5 70%,#211810db)!important;border-color:#bd8b4129}
body[data-theme=arc] .v8-viewer .matrix-top11::before{content:none}
body[data-theme=arc] .v8-viewer .matrix-bar11>button{background:linear-gradient(#31271c,#1c1712);border-color:#a580484d;box-shadow:inset 0 1px #efcd8b15;color:#edd0a1}
body[data-theme=arc] .v8-viewer .matrix-bar11>button:hover{border-color:#e6b76c;background:#3c2e1f}
body[data-theme=arc] .v8-viewer .text-card:not(.has-text-cover){background:linear-gradient(125deg,#29231c,#191612);color:#ede2cf}
body[data-theme=arc] .v8-viewer .text-card .text-body{color:#ede2cf}
body[data-theme=arc][data-sleeves=on] .v8-viewer .text-card{padding:24px 28px!important}
body[data-theme=arc] .v8-viewer .deck-banner111{background:linear-gradient(#35291b,#16120e);color:#efc482;box-shadow:inset 0 1px #d9ad6759}

/* Portal city, source ratio 8000 x 4476. Share one proportional image transform between
   stage, footer, navigation and foreground. Reuse the cached scene bitmap. */
body[data-theme=arc] .v8-viewer{
 --arc-room-shade:#170b0015;
 --arc-scene-height:max(100dvh,calc(100vw * 4476 / 8000));
 --arc-scene-width:calc(var(--arc-scene-height) * 8000 / 4476);
 --arc-scene-left:calc((100vw - var(--arc-scene-width)) * .52);
 --arc-scene-top:max(calc(100dvh - var(--arc-scene-height)),calc((100dvh - var(--bar) - var(--arc-scene-height)) / 2));
 --arc-footer-top:calc(var(--arc-scene-top) - (100dvh - var(--bar)));
}
body[data-theme=arc] .v8-viewer .stage{
 background-size:auto,var(--arc-scene-width) var(--arc-scene-height);
 background-position:center,var(--arc-scene-left) var(--arc-scene-top);
 background-repeat:no-repeat;
}
/* Textured right up to the navigation, including when unlock art is off. */
body[data-theme=arc] .v8-viewer::before{
 content:'';position:absolute;left:0;right:0;bottom:0;height:var(--bar);
 background-image:linear-gradient(color-mix(in srgb,#20110866 var(--matrix-scene-brightness),black),color-mix(in srgb,#130d0888 var(--matrix-scene-brightness),black)),var(--arc-matrix-scene);
 background-size:auto,var(--arc-scene-width) var(--arc-scene-height);
 background-position:center,var(--arc-scene-left) var(--arc-footer-top);
 background-repeat:no-repeat;box-shadow:inset 0 1px #e8b76f33;
 pointer-events:none;z-index:30;
}
body[data-theme=arc] .v8-viewer .bottomnav{
 background-image:linear-gradient(color-mix(in srgb,#241910e8 var(--matrix-scene-brightness),black),color-mix(in srgb,#130e0ce8 var(--matrix-scene-brightness),black)),var(--arc-matrix-scene)!important;
 background-size:auto,var(--arc-scene-width) var(--arc-scene-height)!important;
 background-position:center,calc(var(--arc-scene-left) - max(0px,(100vw - 680px) / 2)) var(--arc-footer-top)!important;
 background-repeat:no-repeat!important;backdrop-filter:none;
 border-color:#b78b4f66;box-shadow:0 -3px 16px #10090555,inset 0 1px #e8b76f22;
}
body[data-theme=arc] .v8-viewer .bottomnav button{color:#d3c1aa;border-color:#b78b4f33}
body[data-theme=arc] .v8-viewer .bottomnav button:is(.active,:hover){background:linear-gradient(#c08d3f2e,#5b362b26);color:#ffe0a9;box-shadow:inset 0 2px #c99a5966}
/* Original near roofs and gilded dome sit in front of the lower UI.
   The centered navigation stays clear. Keep this layer desktop-only. */
@media(min-width:901px){
 body[data-theme=arc][data-decorations=on] .v8-viewer::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:31;
  --roof-tint:color-mix(in srgb,var(--arc-room-shade) var(--matrix-scene-brightness),black);
  background-image:linear-gradient(var(--roof-tint),var(--roof-tint)),var(--arc-matrix-scene);
  background-size:auto,var(--arc-scene-width) var(--arc-scene-height);
  background-position:center,var(--arc-scene-left) var(--arc-scene-top);
  background-repeat:no-repeat;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2560' height='1433' viewBox='0 0 2560 1433'%3E%3Cdefs%3E%3Cfilter id='edge' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='white' filter='url(%23edge)' d='M-5 1065 L35 1095 70 1180 100 1210 145 1250 190 1290 225 1330 270 1375 340 1400 390 1438 H-5Z M2565 1438 H1900 L1920 1390 1925 1350 1940 1315 1970 1260 2010 1210 2045 1170 2075 1125 2115 1098 2125 1050 2158 1018 2170 995 2190 1020 2220 1055 2226 1082 2260 1110 2320 1130 2380 1180 2410 1240 2430 1280 2470 1330 2490 1370 2565 1400Z'/%3E%3C/svg%3E"),linear-gradient(90deg,#000 calc(50% - 350px),transparent calc(50% - 340px),transparent calc(50% + 340px),#000 calc(50% + 350px));
  mask-size:var(--arc-scene-width) var(--arc-scene-height),100% 100%;
  mask-position:var(--arc-scene-left) var(--arc-scene-top),center;
  mask-repeat:no-repeat;mask-composite:intersect;
 }
}
body[data-theme=arc] .v8-viewer :is(.matrix-arrow,.viewer-history,.stack-rail,.bottomnav){z-index:35}
body[data-theme=arc] .v8-viewer .matrix-help{z-index:36}
@media(max-width:900px){
 body[data-theme=arc][data-decorations=on] .v8-viewer::after{display:none}
 body[data-theme=arc][data-sleeves=on] .v8-viewer .text-card{padding:18px 20px!important}
}