/* Shared admin actions: use the site's own palette instead of browser button defaults. */
.admin-page .account-text{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:10px 16px;margin:0;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--text);font:700 12px/1.45 Arial,Helvetica,sans-serif;text-decoration:none;white-space:normal;text-align:center;cursor:pointer}
.admin-page .account-text:hover:not(:disabled){background:var(--panel2);border-color:var(--muted)}
.admin-page .account-text:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.admin-page .account-text:disabled{opacity:.5;cursor:not-allowed}
.admin-page .account-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px}
:root[data-interface=tech] .admin-page .account-text{border-radius:3px;background:var(--panel);border-color:var(--tech-line)}
.mobile-menu-toggle{display:none}
.mobile-menu-toggle[hidden]{display:none!important}
.hero-art{position:absolute;inset:0;display:block;pointer-events:none}
/* All layout adjustments below are confined to phone-sized viewports. */
@media(max-width:800px){
 :root{scroll-padding-top:76px;-webkit-text-size-adjust:100%}
 :root[data-interface] body{min-width:0;overflow-wrap:break-word}
 :root[data-interface] :is(main,.legal-page){width:auto;max-width:100%;margin:0;padding:24px max(16px,env(safe-area-inset-right)) max(88px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));min-width:0}
 :root[data-interface] :is(.header,.legal-header)[data-mobile-enhanced]{position:relative;inset:auto;width:auto;height:auto;min-height:0;max-width:none;margin:0;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--header);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:10;overflow:visible}
 :root[data-interface] .header[data-mobile-enhanced] .brand,:root[data-interface] .legal-header[data-mobile-enhanced] .brand{grid-column:1;grid-row:1;font-size:17px;gap:12px;min-width:0}
 :root[data-interface] [data-mobile-enhanced] .brand-mark{width:32px;font-size:32px}
 :root[data-interface] [data-mobile-enhanced] .brand small{font-size:6px;letter-spacing:1.3px;line-height:1.4;margin-top:5px}
 .mobile-menu-toggle{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:700 13px/1.3 Arial,Helvetica,sans-serif}
 .mobile-menu-toggle[aria-expanded=true]{border-color:var(--accent);background:var(--soft)}
 .mobile-menu-icon{display:grid;gap:4px;width:17px}.mobile-menu-icon i{display:block;height:2px;width:17px;background:currentColor;border-radius:2px}
 :root[data-interface] [data-mobile-enhanced] :is(nav,.header-actions){grid-column:1/-1;grid-row:auto;width:100%;margin:0;align-self:stretch;order:initial;min-width:0}
 :root[data-interface] [data-mobile-enhanced][data-menu-open=false] :is(nav,.header-actions){display:none}
 :root[data-interface] [data-mobile-enhanced][data-menu-open=true] nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px 0 0;overflow:visible;height:auto;white-space:normal}
 :root[data-interface] [data-mobile-enhanced] nav a{display:flex;align-items:center;justify-content:flex-start;min-height:46px;padding:12px 14px;font-size:14px;line-height:1.45;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:8px}
 :root[data-interface] [data-mobile-enhanced] nav a[aria-current=page]{color:var(--text);background:var(--soft);border-color:var(--accent)}
 :root[data-interface] [data-mobile-enhanced] nav a:after{display:none}
 :root[data-interface] [data-mobile-enhanced][data-menu-open=true] .header-actions{display:flex;flex-wrap:wrap;gap:10px;padding:12px 0 2px}
 :root[data-interface] [data-mobile-enhanced] .header-actions .button{flex:1 1 120px;min-height:46px;padding:12px;font-size:13px;white-space:normal;line-height:1.4}
 :root[data-interface] [data-mobile-enhanced] .interface-signature{display:none}
 :root[data-interface=tech] [data-mobile-enhanced][data-menu-open=true] .interface-signature{display:flex;grid-column:1/-1;margin:14px 0 0;padding:10px 0 0;border-top:1px solid var(--line);font-size:10px}
 :root[data-interface=tech] .mobile-menu-toggle,:root[data-interface=tech] [data-mobile-enhanced] nav a{border-radius:4px}
 /* Mobile artwork has its own composition. Keep its full width and the live copy over it. */
 :root[data-interface] .hero{height:auto;min-height:0}
 :root[data-interface] .hero-image{position:absolute;inset:0 auto auto 0;display:block;width:100%;height:auto;object-fit:contain;object-position:center top}
 :root[data-interface] .hero::after{display:block;background:linear-gradient(180deg,transparent 20%,rgba(16,17,19,.45) 45%,rgba(16,17,19,.8) 100%)}
 :root[data-interface] .hero-copy{padding:clamp(155px,43.3vw,340px) 28px 30px;max-width:none}
 :root[data-interface] .hero.image-failed .hero-image{display:none}
 /* Comfortable fields avoid focus zoom on mobile browsers. */
 :root[data-interface] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea){font-size:16px!important;line-height:1.5;min-height:46px;max-width:100%;min-width:0}
 :root[data-interface] textarea{min-height:110px}
 :root[data-interface] :is(.button,.button.small,.filter,.icon-button,.account-text,.social-link,.text-button,.cover-presets button,.item-actions button,.notice-toolbar button,#notice-more,.notice-settings button,.account-tabs button,.file-button){min-height:44px;line-height:1.4}
 :root[data-interface] .button{font-size:13px;padding:12px 16px;white-space:normal;text-align:center}
 :root[data-interface] .icon-button{width:44px;min-width:44px;height:44px}
 :root[data-interface] :is(.account-text,.social-link,.text-button,.item-actions button){padding-top:10px;padding-bottom:10px}
 :root[data-interface] :is(input[type=checkbox],input[type=radio]){width:20px;height:20px;flex-shrink:0;accent-color:var(--accent)}
 :root[data-interface] :is(.account-main,.admin-main,.social-page) label{font-size:13px;line-height:1.6}
 :root[data-interface] :is(.account-main,.admin-main) label:has(input[type=checkbox]){min-height:44px;align-items:center}
 :root[data-interface] :is(.page-intro,.social-intro,.account-intro){padding:8px 0 22px;margin:0 0 18px}
 :root[data-interface] :is(.page-intro,.social-intro,.account-intro) h1{font-size:clamp(30px,8vw,40px);letter-spacing:-1px;line-height:1.12;margin:16px 0}
 :root[data-interface] :is(.page-intro,.social-intro,.account-intro) p{font-size:14px;line-height:1.7}
 :root[data-interface] :is(.account-card,.social-card,.editor-panel,.admin-list-panel,.legal-document){min-width:0;padding:20px 18px;border-radius:12px}
 :root[data-interface=tech] :is(.account-card,.social-card,.editor-panel,.admin-list-panel){border-radius:6px}
 :root[data-interface] :is(.account-card,.social-card,.editor-panel) p{font-size:14px;line-height:1.7;overflow-wrap:anywhere}
 :root[data-interface] :is(.account-card,.editor-panel,.social-card) h2{font-size:22px;line-height:1.25}
 :root[data-interface] :is(.auth-layout,.profile-grid,.creator-grid,.creator-admin-list,.forum-layout,.messages-layout,.admin-layout){grid-template-columns:minmax(0,1fr);gap:20px}
 :root[data-interface] :is(.form-row,.game-link-fields){grid-template-columns:minmax(0,1fr);gap:6px}
 :root[data-interface] .form-row label{margin-top:12px}
 :root[data-interface] .account-section-tabs,:root[data-interface] .admin-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;width:100%;padding:8px 4px 10px;scroll-padding-inline:6px;scrollbar-width:thin;overscroll-behavior-x:contain;background:var(--bg);border:0;border-bottom:1px solid var(--line);border-radius:0}
 :root[data-interface] .account-section-tabs{position:sticky;top:0;z-index:6;margin:16px 0 22px}
 :root[data-interface] :is(.account-section-tabs,.admin-tabs) button{flex:0 0 auto;min-height:46px;padding:12px 16px;white-space:nowrap;font-size:13px;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:var(--panel)}
 :root[data-interface] :is(.account-section-tabs,.admin-tabs) button[aria-selected=true]{border-color:var(--accent);background:var(--soft);color:var(--text)}
 :root[data-interface] .admin-tabs button:after{display:none}
 :root[data-interface] .theme-filters{flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:thin;padding:4px 2px 10px;overscroll-behavior-x:contain}
 :root[data-interface] .theme-filters button{flex:0 0 auto;min-height:44px;white-space:nowrap}
 :root[data-interface] .theme-group-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 :root[data-interface] .theme-option{min-width:0;padding:10px}.theme-option strong{overflow-wrap:anywhere}
 :root[data-interface] .theme-option strong{font-size:14px;line-height:1.4}
 :root[data-interface] .theme-option small{font-size:12px;line-height:1.55}
 :root[data-interface] .interface-choices{grid-template-columns:minmax(0,1fr);gap:16px}
 :root[data-interface] .interface-card-actions{display:grid;grid-template-columns:1fr 1fr}
 :root[data-interface] .profile-head{flex-wrap:wrap;align-items:flex-start;gap:14px}
 :root[data-interface] .creator-nav{gap:8px}.creator-nav a{min-height:44px}
 :root[data-interface] .appearance-settings :is(.availability-row,.shop-admin-row){grid-template-columns:minmax(0,1fr)}
 :root[data-interface] .availability-dates{grid-template-columns:minmax(0,1fr)}
 :root[data-interface] .appearance-save-bar{position:static;gap:10px;padding:14px;margin:20px 0}
 :root[data-interface] .appearance-save-bar>div{flex-basis:100%}
 :root[data-interface] .appearance-save-bar button{flex:1 1 140px;font-size:13px}
 :root[data-interface] .interface-owner-settings{padding:16px;margin:24px 0}
 :root[data-interface] .interface-owner-settings fieldset{display:grid;gap:10px}
 :root[data-interface] .interface-owner-settings label{display:flex;gap:12px;margin:0;align-items:center}
 :root[data-interface] .interface-owner-settings .account-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 :root[data-interface] .interface-owner-settings .account-actions button{width:100%;font-size:13px;min-height:46px}
 :root[data-interface] .gift-body{gap:12px;width:100%}
 :root[data-interface] .gift-body .availability-preview{width:88px;flex-shrink:0}
 :root[data-interface] .gift-item{flex-wrap:wrap;gap:12px}
 :root[data-interface] .gift-search>div{flex-wrap:wrap}.gift-search input{flex:1 1 180px}
 :root[data-interface] .admin-intro h1{font-size:34px}.admin-main .admin-stat strong{overflow-wrap:anywhere}
 :root[data-interface] .chat-scroll{max-height:55dvh;min-height:140px}
 :root[data-interface] .conversation-head{flex-wrap:wrap;align-items:flex-start}
 :root[data-interface] .inbox #inbox-list{max-height:190px}
 :root[data-interface] .profile-public{display:block}.profile-public .profile-public-info{min-width:0}
 :root[data-interface] .footer{max-width:none;margin:0 16px;padding:24px 0 max(80px,env(safe-area-inset-bottom));gap:18px;flex-wrap:wrap;line-height:1.7}
 :root[data-interface] .legal-footer{display:flex;flex-wrap:wrap;gap:14px}.legal-footer a{padding:8px 0}
 /* Dialogs use the visual viewport and remain scrollable with an on-screen keyboard. */
 :root[data-interface] dialog{max-width:calc(100% - 16px);max-height:calc(100dvh - 16px);overscroll-behavior:contain;scrollbar-width:thin;border-radius:14px;scroll-padding:16px}
 :root[data-interface] :is(#interface-preview-dialog,#appearance-preview-dialog,#theme-preview-dialog){width:calc(100% - 16px);max-width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
 :root[data-interface] :is(#interface-preview-dialog,#appearance-preview-dialog){padding:16px}
 :root[data-interface] :is(.interface-preview-head,.theme-preview-toolbar){gap:12px;align-items:flex-start;flex-wrap:wrap}
 :root[data-interface] :is(.interface-preview-head,.theme-preview-toolbar) h2{font-size:21px;overflow-wrap:anywhere}
 :root[data-interface] :is(.interface-preview-head,.theme-preview-toolbar)>button{margin-left:auto;min-height:44px}
 :root[data-interface] .interface-preview-frame iframe{height:60dvh;min-height:250px}
 :root[data-interface] .dialog-body{padding:24px 18px}
 :root[data-interface] .amounts{gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
 :root[data-interface] .amounts button{min-height:46px;font-size:14px;padding:10px 4px}
 :root[data-interface] .theme-demo-content{padding:18px}
 :root[data-interface] .theme-demo-hero h3{font-size:32px}
 :root[data-interface] .theme-demo-cards{grid-template-columns:1fr}
 :root[data-interface] dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
 @media(hover:none){
  :root[data-interface] :is(.game-card,.featured-game,.theme-option,.button,.platform,.news-card,.shop-card,.creator-nav a):hover{transform:none;box-shadow:none}
 }
 @media(prefers-reduced-motion:no-preference){
  :root[data-interface] :is(.button,.account-text,.filter,.theme-option,.game-card,.platform,.mobile-menu-toggle){transition:background-color .24s ease,border-color .24s ease,color .2s ease,transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease}
  :root[data-interface] main,:root[data-interface] #member-panel{animation:none}
  :root[data-interface] #member-panel>[role=tabpanel]:not([hidden]),:root[data-interface] .editor-panel:not([hidden]){animation:mobile-panel-in .26s cubic-bezier(.22,1,.36,1)}
  [data-mobile-enhanced][data-menu-open=true] :is(nav,.header-actions){animation:mobile-panel-in .22s cubic-bezier(.22,1,.36,1)}
  :root[data-interface] dialog[open]{animation:mobile-panel-in .25s cubic-bezier(.22,1,.36,1)}
  :root[data-interface] .game-card{animation:none}
  ::view-transition-old(root){animation:interface-fade-out .16s ease-out both}::view-transition-new(root){animation:interface-fade-in .28s ease-out both}
 }
 @media(prefers-reduced-motion:reduce){:root[data-interface] *, :root[data-interface] *::before,:root[data-interface] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
}
@media(max-width:600px){
 :root[data-interface] .hero{height:auto;min-height:0;border-radius:10px}
 :root[data-interface] .hero-copy{padding:clamp(145px,43.3vw,260px) 20px 26px;max-width:none}
 :root[data-interface] .hero h1{font-size:clamp(32px,8.8vw,44px);line-height:1.08;letter-spacing:-1px;margin:18px 0 14px}
 :root[data-interface] .hero .eyebrow{font-size:8px;letter-spacing:1px;max-width:100%;padding:6px 8px;flex-wrap:wrap}
 :root[data-interface] .hero-copy p{font-size:14px;line-height:1.65}.hero-copy p br{display:none}
 :root[data-interface] .hero-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:20px}
 :root[data-interface] .hero-actions .text-link{min-height:44px;font-size:13px}
 :root[data-interface] .hero-meta{display:none}
 :root[data-interface] .platforms{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0;background:transparent;overflow:visible}
 :root[data-interface] .platform{border:1px solid var(--line);border-radius:8px;gap:8px;padding:14px 10px;background:var(--panel);align-items:flex-start}
 :root[data-interface] .platform>div{min-width:0;flex:1;display:block;overflow-wrap:anywhere}
 :root[data-interface] .platform strong,.platform small{display:block;width:auto}
 :root[data-interface] .platform>svg{width:20px;height:20px;margin-top:1px}
 :root[data-interface] .platform .external{display:none}.platform small{font-size:11px;line-height:1.5}
 :root[data-interface] .home-lower{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:28px}
 :root[data-interface] .section-head{flex-wrap:wrap;gap:10px}
 :root[data-interface] .section-head h2{font-size:19px}
 :root[data-interface] .info-card{padding:20px;min-width:0}
 :root[data-interface] .featured-game{padding-right:118px}
 :root[data-interface] .games-grid{grid-template-columns:minmax(0,1fr);gap:18px}
 :root[data-interface] .game-card-copy{padding:18px}.game-card h2{font-size:18px}.game-card p{font-size:13px}
 :root[data-interface] .filters{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;padding:4px 0 10px;scrollbar-width:thin}.filters button{flex:0 0 auto}
 :root[data-interface] .week-controls{width:100%;display:grid;grid-template-columns:44px minmax(90px,1fr) 44px auto;gap:8px}
 :root[data-interface] .week-title{min-width:0;font-size:13px}
 :root[data-interface] .week-controls .filter{padding:8px;font-size:12px}
 :root[data-interface] .timezone{width:100%;font-size:12px;gap:8px;flex-wrap:wrap}.timezone select{flex:1 1 160px}
 :root[data-interface] .week-grid{grid-template-columns:repeat(7,minmax(74px,1fr));overflow-x:auto;padding-bottom:10px;gap:8px;scrollbar-width:thin;overscroll-behavior-x:contain}
 :root[data-interface] .day{min-height:104px;padding:12px 10px}.day .day-number{font-size:24px;margin:10px 0}.day .day-state{font-size:10px;line-height:1.4}
 :root[data-interface] .schedule-detail{padding:20px;gap:16px;flex-wrap:wrap}
 :root[data-interface] .schedule-detail .button{margin-left:0;width:100%}
 :root[data-interface] .schedule-tip{flex-wrap:wrap;gap:10px}
 :root[data-interface] .schedule-tip .text-link{min-height:44px}
 :root[data-interface] .interface-card-actions{grid-template-columns:minmax(0,1fr)}
}
@keyframes mobile-panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.mobile-helpdesk[hidden]{display:none!important}