/* Native host frame and widget skin. The ancestor class gives these rules
   priority over the unchanged widget stylesheet injected after page CSS.
   Canvas bitmap, scaling, input, and game logic retain their existing rules. */
.arcade-page .arcade-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.arcade-page .arcade-intro>div:first-child{min-width:0}
.arcade-page .arcade-intro .subtitle{max-width:62ch}
.arcade-page .arcade-register{display:flex;align-items:center;gap:16px;flex:none;border-left:1px solid var(--line);padding-left:24px}
.arcade-page .arcade-register-count{font-size:54px;line-height:1;color:var(--spark);letter-spacing:-.07em}
.arcade-page .arcade-register p{font-size:11px;line-height:1.8;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.arcade-page .arcade-register p span{color:var(--muted)}
.arcade-page .arcade-noscript{border:1px solid var(--line);padding:20px;color:var(--muted)}

.site-arcade #arcade{--arc-panel:#0d0d0d;--arc-ink:#fff;--arc-dim:#aaa;--arc-accent:#fc0;--arc-accent-2:#fc0;--arc-line:#333;max-width:none;font-family:inherit;line-height:1.6;text-align:left}
.site-arcade #arcade .arcade-selector{align-items:stretch;gap:22px;padding:24px;background:var(--arc-panel);border:1px solid var(--arc-line);border-radius:0}
.site-arcade #arcade .arcade-heading{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--arc-ink);text-shadow:none}
.site-arcade #arcade .arcade-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;justify-content:normal}
.site-arcade #arcade .arcade-card{width:auto;min-width:0;min-height:230px;align-items:stretch;gap:10px;padding:18px 14px 14px;border:1px solid var(--arc-line);border-radius:0;background:#000;text-align:left;transition:border-color .12s ease}
.site-arcade #arcade .arcade-card .card-art{height:100px;width:100%;align-self:center}
.site-arcade #arcade .arcade-card .card-art img{filter:none}
.site-arcade #arcade .arcade-card .card-title{font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1.5;overflow-wrap:anywhere}
.site-arcade #arcade .arcade-card .card-tag{font-size:12px;line-height:1.5;min-height:36px;color:var(--arc-dim)}
.site-arcade #arcade .arcade-card .card-play{font-size:11px;letter-spacing:.06em;color:var(--arc-dim);background:transparent;border-top:1px solid var(--arc-line);border-radius:0;padding:10px 0 0;margin-top:auto;opacity:1;transform:none;transition:color .12s ease}
.site-arcade #arcade .arcade-card:hover,.site-arcade #arcade .arcade-card:focus-visible,.site-arcade #arcade .arcade-card.is-selected{border-color:var(--arc-accent);box-shadow:none;transform:none}
.site-arcade #arcade .arcade-card:focus-visible{outline:3px solid var(--arc-accent);outline-offset:3px}
.site-arcade #arcade .arcade-card.is-selected .card-play{color:var(--arc-accent)}
.site-arcade #arcade .arcade-subhint{font-size:12px;line-height:1.7;color:var(--arc-dim)}

/* Keep the existing stage and canvas geometry. Bound only the surrounding
   mount and menu so a wide game remains scrollable from its first pixel. */
.site-arcade #arcade .game-mount{width:100%;min-width:0;max-width:100%;justify-content:center;justify-content:safe center}
.site-arcade #arcade .arcade-loading{padding:32px 16px;color:var(--arc-dim)}
.site-arcade #arcade .arcade-esc-hint{font-size:12px;color:var(--arc-dim)}
.site-arcade #arcade .arcade-esc-hint kbd{background:#000;border:1px solid #555;border-radius:0;color:var(--arc-ink)}
.site-arcade #arcade .arcade-overlay{padding:20px;background:rgba(0,0,0,.86);backdrop-filter:none;border-radius:0;overflow:auto;align-items:center;align-items:safe center}
.site-arcade #arcade .arcade-menu{width:360px;min-width:0;max-width:100%;max-height:100%;overflow-y:auto;padding:24px;gap:18px;background:var(--arc-panel);border:1px solid var(--arc-accent);border-radius:0;box-shadow:none;text-align:center}
.site-arcade #arcade .arcade-menu-title{font-size:20px;line-height:1.4;letter-spacing:.06em;color:var(--arc-accent);overflow-wrap:anywhere}
.site-arcade #arcade .arcade-menu-buttons{gap:10px;flex:none}
.site-arcade #arcade .arcade-btn{min-height:44px;padding:11px 16px;background:#000;border:1px solid var(--arc-line);border-radius:0;color:var(--arc-ink);font-size:14px;line-height:1.4;transition:border-color .12s ease}
.site-arcade #arcade .arcade-btn:hover,.site-arcade #arcade .arcade-btn:focus-visible{border-color:var(--arc-accent);transform:none}
.site-arcade #arcade .arcade-btn:focus-visible{outline:3px solid var(--arc-accent);outline-offset:3px}
.site-arcade #arcade .arcade-btn.primary{background:var(--arc-accent);border-color:var(--arc-accent);color:#000}
.site-arcade #arcade .arcade-btn.primary:hover,.site-arcade #arcade .arcade-btn.primary:focus-visible{background:#fff;border-color:#fff;color:#000}

@media(max-width:1100px){.site-arcade #arcade .arcade-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.arcade-page .arcade-intro{align-items:flex-start;flex-direction:column;gap:20px}.arcade-page .arcade-register{border-left:0;padding-left:0;gap:12px}.arcade-page .arcade-register-count{font-size:38px}.site-arcade #arcade .arcade-selector{padding:20px}}
@media(max-width:700px){.site-arcade #arcade .arcade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-arcade #arcade .arcade-card{padding:16px 12px 12px;gap:8px}.site-arcade #arcade .arcade-card .card-art{height:92px}}
@media(max-width:480px){.site-arcade #arcade .arcade-selector{padding:16px;gap:18px}.site-arcade #arcade .arcade-grid{gap:10px}.site-arcade #arcade .arcade-overlay{padding:12px}.site-arcade #arcade .arcade-menu{padding:18px;gap:16px}.site-arcade #arcade .arcade-menu-title{font-size:18px}}
@media(max-width:360px){.site-arcade #arcade .arcade-grid{grid-template-columns:1fr}.site-arcade #arcade .arcade-card{min-height:0}.site-arcade #arcade .arcade-card .card-art{height:86px}.site-arcade #arcade .arcade-card .card-tag{min-height:0}}
@media(prefers-reduced-motion:reduce){.site-arcade #arcade .arcade-card,.site-arcade #arcade .arcade-card .card-play,.site-arcade #arcade .arcade-btn{transition:none}}