/* U.C.M slide-in site menu (2026-10-15). Pure CSS, no JavaScript: a hidden checkbox toggles the panel. */
.ucm-menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ucm-menu-btn { position: absolute; top: 8px; left: 10px; z-index: 30; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border-radius: 12px; background: rgba(10, 12, 24, .72); border: 1px solid rgba(230, 180, 90, .45); -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease; }
.ucm-menu-btn:hover { background: rgba(30, 24, 52, .9); border-color: rgba(230, 180, 90, .8); }
.ucm-menu-btn span, .ucm-menu-btn span::before, .ucm-menu-btn span::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: #f2e3c0; content: ""; position: relative; }
.ucm-menu-btn span::before { position: absolute; top: -6px; left: 0; }
.ucm-menu-btn span::after { position: absolute; top: 6px; left: 0; }
.ucm-menu-toggle:focus-visible ~ .stage .ucm-menu-btn, .ucm-menu-toggle:focus-visible ~ .sbar .ucm-menu-btn { outline: 2px solid #e6b45a; outline-offset: 2px; }
.stage { position: relative; }
/* landing page: leave room in the top bar for the button */
.bar.top { padding-left: 62px !important; }
.bar.top .logo { margin-left: 0; }

.ucm-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(2, 4, 12, .66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }

/* ---- slide-in menu (2026-11-14 redesign): royal artwork header, game-coloured rows, official store badges, social row ---- */
.ucm-panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; width: min(90vw, 392px); overflow-y: auto; overscroll-behavior: contain; padding: 0 0 28px;
  background:
    linear-gradient(180deg, rgba(7, 9, 22, .15) 0, rgba(7, 9, 22, .82) 210px, #070913 330px),
    url(/img/menu-art.webp) top center / 100% auto no-repeat, #070913;
  border-right: 1px solid transparent; border-image: linear-gradient(180deg, #f6d58b, rgba(230, 180, 90, .25) 45%, #9fd8ff 80%, rgba(230, 180, 90, .4)) 1;
  box-shadow: 0 0 60px rgba(0, 0, 0, .75), 8px 0 40px rgba(110, 80, 230, .18);
  transform: translateX(-108%); visibility: hidden; transition: transform .34s cubic-bezier(.2, .8, .25, 1), visibility 0s linear .34s;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #f2f1f6; line-height: 1.4; scrollbar-width: thin; scrollbar-color: rgba(230, 180, 90, .4) transparent; }
.ucm-menu-toggle:checked ~ .ucm-panel { transform: translateX(0); visibility: visible; transition: transform .34s cubic-bezier(.2, .8, .25, 1), visibility 0s; }
.ucm-menu-toggle:checked ~ .ucm-scrim { opacity: 1; pointer-events: auto; }
.ucm-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; font-size: 26px; line-height: 1; color: #f6d58b; cursor: pointer; border-radius: 50%;
  background: rgba(8, 10, 26, .6); border: 1px solid rgba(230, 180, 90, .55); transition: background .2s ease, transform .2s ease, color .2s ease; }
.ucm-close:hover, .ucm-close:focus-visible { background: rgba(230, 180, 90, .2); color: #fff; transform: rotate(90deg); outline: none; }
.ucm-panel a { display: block; color: #f2f1f6; text-decoration: none; }
.ucm-panel .ucm-home { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 56px 10px 20px; margin: 0; text-align: center; font-family: Cinzel, Georgia, serif; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #f6d58b; border-radius: 0; }
.ucm-panel .ucm-home::before { content: ""; width: 92px; height: 104px; background: url(/ucm-logo-popup.webp) center / contain no-repeat; filter: drop-shadow(0 6px 18px rgba(130, 100, 255, .55)); }
.ucm-panel .ucm-home:hover, .ucm-panel .ucm-home:focus-visible { background: none; color: #fff; }
.ucm-panel .ucm-h { display: flex; align-items: center; gap: 12px; margin: 22px 22px 8px; font-family: Cinzel, Georgia, serif; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #e6b45a; }
.ucm-panel .ucm-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(230, 180, 90, .55), transparent); }
.ucm-panel > a:not(.ucm-home):not(.ucm-play) { position: relative; margin: 1px 12px; padding: 11px 14px 11px 40px; border-radius: 12px; font-size: 15.5px; transition: background .2s ease, transform .2s ease, color .2s ease; }
.ucm-panel > a:not(.ucm-home):not(.ucm-play)::before { content: ""; position: absolute; left: 16px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; transform: rotate(45deg); border-radius: 2px; background: linear-gradient(135deg, #fbe3a0, #b8863a); box-shadow: 0 0 10px rgba(246, 213, 139, .55); }
.ucm-panel > a:not(.ucm-home):not(.ucm-play)::after { content: "\203A"; position: absolute; right: 16px; top: 50%; transform: translateY(-52%); color: rgba(246, 213, 139, .55); font-size: 20px; line-height: 1; transition: transform .2s ease, color .2s ease; }
.ucm-panel > a:not(.ucm-home):not(.ucm-play):hover, .ucm-panel > a:not(.ucm-home):not(.ucm-play):focus-visible { background: linear-gradient(90deg, rgba(230, 180, 90, .2), rgba(230, 180, 90, .04)); color: #fff; outline: none; }
.ucm-panel > a:not(.ucm-home):not(.ucm-play):hover::after, .ucm-panel > a:not(.ucm-home):not(.ucm-play):focus-visible::after { transform: translate(4px, -52%); color: #f6d58b; }
/* each game keeps its own colour */
.ucm-panel > a[href$="pokemon-card-scanner"]:not(.ucm-home):not(.ucm-play)::before { background: #ffd54a; box-shadow: 0 0 12px #ffd54a; }
.ucm-panel > a[href$="one-piece-card-scanner"]:not(.ucm-home):not(.ucm-play)::before { background: #ff6b5d; box-shadow: 0 0 12px #ff6b5d; }
.ucm-panel > a[href$="yugioh-card-scanner"]:not(.ucm-home):not(.ucm-play)::before { background: #b690ff; box-shadow: 0 0 12px #b690ff; }
.ucm-panel > a[href$="mtg-card-scanner"]:not(.ucm-home):not(.ucm-play)::before { background: #ff9a4d; box-shadow: 0 0 12px #ff9a4d; }
.ucm-panel > a[href$="lorcana-card-scanner"]:not(.ucm-home):not(.ucm-play)::before { background: #6cb8ff; box-shadow: 0 0 12px #6cb8ff; }
.ucm-panel > a[href$="dragon-ball-card-scanner"]:not(.ucm-home):not(.ucm-play)::before { background: #ffb13d; box-shadow: 0 0 12px #ffb13d; }
.ucm-panel > a[href$="digimon-card-scanner"]:not(.ucm-home):not(.ucm-play)::before { background: #4fe0ff; box-shadow: 0 0 12px #4fe0ff; }
.ucm-panel .ucm-stores { display: flex; flex-direction: column; gap: 10px; margin: 24px 22px 0; padding: 16px 16px 14px; border-radius: 16px; background: linear-gradient(160deg, rgba(40, 30, 96, .55), rgba(10, 12, 32, .75)); border: 1px solid rgba(230, 180, 90, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 26px rgba(0, 0, 0, .4); }
.ucm-panel .ucm-store { width: fit-content; margin: 0 auto; padding: 0; line-height: 0; border-radius: 12px; box-shadow: 0 0 0 1px rgba(230, 180, 90, .55); transition: transform .18s ease, box-shadow .18s ease; }
.ucm-panel .ucm-store img { display: block; height: 50px; width: auto; max-width: 100%; border-radius: 11px; margin: 0 auto; }
.ucm-panel .ucm-store:hover, .ucm-panel .ucm-store:focus-visible { background: none; transform: translateY(-2px); box-shadow: 0 0 0 1.5px #f6d58b, 0 8px 22px rgba(246, 213, 139, .3); }
.ucm-panel .ucm-social { display: flex; justify-content: center; gap: 6px; margin: 22px 22px 0; }
.ucm-panel .ucm-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(230, 180, 90, .28); color: #f2e3c0; transition: background .2s ease, transform .2s ease, color .2s ease, border-color .2s ease; }
.ucm-panel .ucm-social a:hover, .ucm-panel .ucm-social a:focus-visible { transform: translateY(-2px); color: #fff; background: rgba(230, 180, 90, .2); border-color: #f6d58b; outline: none; }
.ucm-panel .ucm-social svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.ucm-panel .ucm-foot { display: flex; justify-content: center; gap: 4px; margin: 20px 22px 0; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 14px; }
.ucm-panel .ucm-foot a { font-size: 13px; color: #b9b7c4; padding: 6px 12px; border-radius: 8px; }
.ucm-panel .ucm-foot a:hover, .ucm-panel .ucm-foot a:focus-visible { background: rgba(230, 180, 90, .14); color: #fff; outline: none; }
@media (prefers-reduced-motion: reduce) { .ucm-panel, .ucm-scrim, .ucm-close { transition: none !important; } }

/* FAQ topic list */
.faq-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.faq-topics a { display: inline-block; padding: 7px 13px; border-radius: 999px; font-size: 13px; text-decoration: none; color: #f2f1f6; background: rgba(139, 108, 255, .16); border: 1px solid rgba(139, 108, 255, .45); }
.faq-topics a:hover, .faq-topics a:focus-visible { background: rgba(139, 108, 255, .32); outline: none; }
.group { scroll-margin-top: 16px; }

/* menu button v2 (2026-11-14): round gold-ring button on the redesigned top bars only; the phone homepage keeps its own button */
.sbar .ucm-menu-btn, .dbar .ucm-menu-btn { position: relative; top: auto; left: auto; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid transparent;
  background: linear-gradient(#0b0e22, #0b0e22) padding-box, linear-gradient(135deg, #fbe3a0, #b8863a 50%, #f6d58b) border-box; box-shadow: 0 0 0 4px rgba(230, 180, 90, .08), 0 6px 18px rgba(0, 0, 0, .45);
  transition: transform .2s ease, box-shadow .2s ease; }
.sbar .ucm-menu-btn:hover, .dbar .ucm-menu-btn:hover { background: linear-gradient(#141232, #141232) padding-box, linear-gradient(135deg, #fbe3a0, #b8863a 50%, #f6d58b) border-box; transform: scale(1.06); box-shadow: 0 0 0 4px rgba(230, 180, 90, .16), 0 0 22px rgba(246, 213, 139, .4); }
.sbar .ucm-menu-btn span, .sbar .ucm-menu-btn span::before, .sbar .ucm-menu-btn span::after, .dbar .ucm-menu-btn span, .dbar .ucm-menu-btn span::before, .dbar .ucm-menu-btn span::after { height: 2.5px; background: linear-gradient(90deg, #fbe3a0, #e6b45a); transition: width .22s ease; }
.sbar .ucm-menu-btn span, .dbar .ucm-menu-btn span { width: 18px; }
.sbar .ucm-menu-btn span::before, .dbar .ucm-menu-btn span::before { width: 18px; top: -6px; }
.sbar .ucm-menu-btn span::after, .dbar .ucm-menu-btn span::after { width: 11px; top: 6px; }
.sbar .ucm-menu-btn:hover span::after, .dbar .ucm-menu-btn:hover span::after { width: 18px; }