/* Web arcade, 2026-10: games first. A stage for the selected game, a quiet rail of all games,
   original black / gold / silver. Scoped away from the installed client (client-engine.css). */
:root:not(.native-client){
  --rf-gold:linear-gradient(145deg,#fff1ad 0%,#e4ba4d 48%,#bb831f 100%);
  --rf-silver:linear-gradient(145deg,#ffffff 0%,#dbe1e3 40%,#9aa3a6 100%);
  --rf-wide:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --rf-line:#20252b;
}
:root:not(.native-client) body{background:#000}

/* ---------- top bar: same as the homepage (.bar / .mark / .label in worldengine-site/studio.css) ---------- */
:root:not(.native-client) .we-site-header{background:#000!important;backdrop-filter:none;border:0!important;box-shadow:none!important}
:root:not(.native-client) .we-site-header::before,
:root:not(.native-client) .we-site-header::after{display:none!important}
:root:not(.native-client) .we-site-header .topbar-inner{max-width:none;min-height:0;padding:14px clamp(16px,3.2vw,48px);gap:clamp(14px,2.4vw,34px)}
:root:not(.native-client) .we-site-header .brand{gap:10px}
:root:not(.native-client) .we-site-header .brand img,
:root:not(.native-client) .we-site-header .we-brand-studio,
:root:not(.native-client) .we-site-header .brand-dot{display:none}
:root:not(.native-client) .we-site-header .we-brand-name{display:flex;align-items:center;gap:10px;font:900 15px/1 var(--rf-wide);font-variation-settings:"wdth" 125;letter-spacing:-.01em;color:#fff}
:root:not(.native-client) .we-site-header .we-brand-name::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--rf-gold)}
:root:not(.native-client) .we-site-header .arcade-nav{gap:clamp(14px,2.4vw,34px)}
:root:not(.native-client) .we-site-header .arcade-nav a,
:root:not(.native-client) .we-site-header .arcade-nav button,
:root:not(.native-client) .we-site-header .account-button{position:relative;padding:0;font:600 15px/1.2 var(--rf-wide)!important;font-variation-settings:"wdth" 62!important;text-transform:uppercase;letter-spacing:.06em;color:#fff!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
:root:not(.native-client) .we-site-header .arcade-nav a::after,
:root:not(.native-client) .we-site-header .arcade-nav button::after,
:root:not(.native-client) .we-site-header .account-button::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:currentColor;transition:right .25s}
:root:not(.native-client) .we-site-header .arcade-nav a:hover::after,
:root:not(.native-client) .we-site-header .arcade-nav button:hover::after,
:root:not(.native-client) .we-site-header .account-button:hover::after{right:0}
:root:not(.native-client) .we-site-header .arcade-nav a:hover,
:root:not(.native-client) .we-site-header .arcade-nav button:hover,
:root:not(.native-client) .we-site-header .account-button:hover{color:#f2ce7c!important}
:root:not(.native-client) .we-site-header .account-button{overflow:visible;max-width:220px}
:root:not(.native-client) .we-site-header .arcade-nav a[aria-current=page]{color:#f2ce7c!important}

/* ---------- stage ---------- */
:root:not(.native-client) main{padding-top:0}
.stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(24px,4vw,64px);min-height:min(68vh,640px);margin:0 calc(50% - 50vw);padding:clamp(28px,5vh,56px) max(28px,calc(50vw - 640px));overflow:hidden;border-bottom:1px solid var(--rf-line)}
.stage[hidden]{display:none}
.stage-bg{position:absolute;inset:0;z-index:-1}
.stage-bg img{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);object-fit:cover;filter:blur(40px) saturate(1.3) brightness(.38);opacity:0;transition:opacity .7s ease;transform:scale(1.08)}
.stage-bg img.on{opacity:1}
.stage-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.25) 100%),linear-gradient(0deg,#000 0%,transparent 30%)}
.stage-copy{min-width:0}
.stage-meta{display:flex;gap:16px;align-items:center;margin:0 0 18px;font:600 12px/1 var(--rf-wide);letter-spacing:.18em;text-transform:uppercase;color:#8f969c}
.stage-no{color:#e4be62}
.stage-meta span+span::before{content:"";display:inline-block;width:28px;height:1px;background:#4a4f55;vertical-align:middle;margin-right:16px}
.stage-title{margin:0;font:900 clamp(38px,5.6vw,92px)/.88 var(--rf-wide);font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:-.02em;background:var(--rf-silver);-webkit-background-clip:text;background-clip:text;color:transparent;overflow-wrap:anywhere}
.stage-desc{margin:20px 0 0;max-width:42ch;font-size:16px;line-height:1.55;color:#b6bcc1}
.stage-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:30px}
.stage-play{display:inline-flex;align-items:center;gap:18px;padding:18px 34px;border:0;border-radius:0;background:var(--rf-gold);color:#120e05;font:900 18px/1 var(--rf-wide);font-variation-settings:"wdth" 118;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 40px rgba(228,190,98,.25);transition:transform .15s,box-shadow .2s}
.stage-play:hover{transform:translateY(-2px);box-shadow:0 14px 50px rgba(228,190,98,.4)}
.stage-play svg{width:18px;height:18px;fill:currentColor}
.stage-links{display:flex;gap:18px;font-size:12.5px}
.stage-links button,.stage-links a{background:none;border:0;padding:0;color:#8f969c;font:inherit;text-decoration:none;cursor:pointer}
.stage-links button:hover,.stage-links a:hover{color:#f2ce7c}
.stage-by{margin:22px 0 0;font-size:12px;color:#5f666c;letter-spacing:.04em}
.stage-shot{position:relative;margin:0;justify-self:end;width:100%;max-width:760px}
.stage-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#000;image-rendering:pixelated;outline:1px solid rgba(228,190,98,.45);outline-offset:8px;box-shadow:0 40px 90px rgba(0,0,0,.75);cursor:pointer}
.stage-shot img.in{animation:stage-in .5s cubic-bezier(.2,.7,.2,1)}
@keyframes stage-in{from{opacity:.2;transform:scale(.985)}}
.stage-nav{position:absolute;top:50%;translate:0 -50%;width:42px;height:42px;border-radius:0;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.55);color:#f5f5f2;font-size:24px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s}
.stage-shot:hover .stage-nav,.stage-nav:focus-visible{opacity:1}
.stage-nav.prev{left:14px}.stage-nav.next{right:14px}
.stage-nav:hover{border-color:#e4be62;color:#f2ce7c}

/* ---------- rail ---------- */
:root:not(.native-client) .catalog{padding-top:34px}
:root:not(.native-client) .catalog-heading{margin-bottom:22px;align-items:center}
:root:not(.native-client) .catalog-heading h1{font:600 12px/1 var(--rf-wide)!important;letter-spacing:.18em!important;text-transform:uppercase;color:#8f969c!important;background:none!important;-webkit-text-fill-color:currentColor}
:root:not(.native-client) .catalog-heading h1 span{color:#e4be62;font-size:12px;margin-left:8px}
:root:not(.native-client) .catalog-projects-link{font-size:12px;color:#8f969c}
:root:not(.native-client) .catalog-projects-link:hover{color:#f2ce7c}
:root:not(.native-client) .search input{background:transparent;border:0;border-bottom:1px solid #2c3238;padding:8px 2px;font-size:13px}
:root:not(.native-client) .search input:focus{border-bottom-color:#e4be62}

:root:not(.native-client) .game-grid{gap:28px 18px;align-items:start}
:root:not(.native-client) .game-card{background:none;border:0;box-shadow:none;overflow:visible;opacity:.62;transition:opacity .25s}
:root:not(.native-client) .game-card:hover,
:root:not(.native-client) .game-card:focus-visible,
:root:not(.native-client) .game-entry.is-selected .game-card{opacity:1;border:0;box-shadow:none}
:root:not(.native-client) .game-card:focus-visible{outline:none}
:root:not(.native-client) .card-art{aspect-ratio:16/10;outline:1px solid #1d2227;outline-offset:-1px;transition:transform .25s,outline-color .2s,box-shadow .25s}
:root:not(.native-client) .card-art img{image-rendering:pixelated}
:root:not(.native-client) .game-entry.is-selected .card-art{outline:2px solid #e4be62;outline-offset:3px;transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.6)}
:root:not(.native-client) .card-body{padding:10px 0 0}
:root:not(.native-client) .card-title h3{min-height:0;font-size:13px;font-weight:600;color:#c9ced2}
:root:not(.native-client) .game-entry.is-selected .card-title h3{color:#f2ce7c}
/* the stage carries genre, contributor, play, bugs and the map; the rail only names the game */
body.has-stage .game-card .game-contributor,
body.has-stage .card-footer,
body.has-stage .game-bugs,
body.has-stage .game-build-map{display:none!important}

/* ---------- below the games ---------- */
:root:not(.native-client) .wishlist{margin-top:90px;border-top:1px solid var(--rf-line);padding-top:40px}
:root:not(.native-client) .wishlist-heading h2,
:root:not(.native-client) .client-banner h1{font-family:var(--rf-wide);font-weight:900;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:-.01em;background:var(--rf-silver)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent}
:root:not(.native-client) .wishlist-heading h2{font-size:clamp(24px,2.6vw,36px)}
:root:not(.native-client) .client-banner{background:#05070a;border:1px solid var(--rf-line);padding:28px 32px;margin:70px 0 0;align-items:center}
:root:not(.native-client) .client-banner h1{font-size:clamp(20px,2vw,28px);margin:0}
:root:not(.native-client) .client-banner .client-preview{border:0;box-shadow:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
:root:not(.native-client) .account-banner{margin-top:40px}

@media(max-width:900px){
  .stage{grid-template-columns:1fr;min-height:0;padding-top:20px;gap:22px}
  .stage-shot{order:-1;justify-self:stretch;max-width:none}
  .stage-shot img{outline-offset:4px}
  .stage-nav{opacity:1}
  .stage-desc{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.stage-bg img,.stage-shot img.in,.card-art{transition:none;animation:none}}
@media(max-width:760px){
  :root:not(.native-client) .we-site-header .topbar-inner{flex-wrap:wrap;row-gap:4px}
  :root:not(.native-client) .we-site-header .arcade-nav{order:3;flex:1 0 100%;margin:0;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:18px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  :root:not(.native-client) .we-site-header .arcade-nav::-webkit-scrollbar{display:none}
  :root:not(.native-client) .we-site-header .account-button{margin-left:auto}
}
@media(max-width:760px){
  :root:not(.native-client) .we-site-header .arcade-nav{flex-wrap:nowrap!important;display:flex!important}
  :root:not(.native-client) .we-site-header .arcade-nav>*{flex:none!important;white-space:nowrap}
}

/* =====================================================================
   2026 pass: ambient color from the selected game, floating rounded glass,
   pills instead of boxes. Overrides the square theme (theme.css forces radius 0).
   ===================================================================== */
:root:not(.native-client){--amb:120,96,40;--glass:rgba(255,255,255,.045);--glass-line:rgba(255,255,255,.09);--r-lg:22px;--r-md:14px}
:root:not(.native-client) body{background:
  radial-gradient(1200px 700px at 70% -10%,rgba(var(--amb),.30),transparent 60%),
  radial-gradient(900px 600px at 10% 30%,rgba(var(--amb),.12),transparent 60%),#000 fixed;transition:background .8s}
:root:not(.native-client) .we-site-header{background:rgba(0,0,0,.55)!important;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}

/* stage: no frame, a floating rounded screen with a halo of its own colors */
.stage{border-bottom:0;min-height:min(74vh,700px)}
.stage-bg img{filter:blur(70px) saturate(1.7) brightness(.55)}
.stage-bg::after{background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.05) 100%),linear-gradient(0deg,#000 0%,transparent 35%)}
.stage-shot img{border-radius:0;outline:0;box-shadow:0 0 0 1px var(--glass-line),0 50px 120px rgba(0,0,0,.7),0 0 140px rgba(var(--amb),.35);background:#050505}
.stage-shot::after{content:"";position:absolute;inset:0;border-radius:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.12),transparent 30%)}
.stage-meta{letter-spacing:.22em}
.stage-meta span+span::before{background:linear-gradient(90deg,#e4be62,transparent)}
.stage-play{border-radius:0;padding:18px 36px 18px 40px;box-shadow:0 0 0 1px rgba(255,241,173,.4) inset,0 14px 50px rgba(228,190,98,.35)}
.stage-links{gap:8px}
.stage-links button,.stage-links a{padding:9px 14px;border-radius:0;background:var(--glass);box-shadow:0 0 0 1px var(--glass-line) inset;backdrop-filter:blur(10px)}
.stage-nav{backdrop-filter:blur(10px);background:rgba(0,0,0,.35)}

/* rail: rounded tiles, title inside the art, smooth lift */
:root:not(.native-client) .catalog-heading{margin-bottom:18px}
:root:not(.native-client) .search input{border:0!important;border-radius:0!important;background:var(--glass);box-shadow:0 0 0 1px var(--glass-line) inset;padding:10px 18px;min-width:240px}
:root:not(.native-client) .search input:focus{box-shadow:0 0 0 1px rgba(228,190,98,.6) inset}
:root:not(.native-client) .game-grid{gap:18px}
:root:not(.native-client) .game-card{position:relative;border-radius:0!important;overflow:hidden;opacity:.7;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
:root:not(.native-client) .card-art{border-radius:0;outline:0!important;box-shadow:0 0 0 1px var(--glass-line) inset;transform:none!important}
:root:not(.native-client) .card-art img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
:root:not(.native-client) .card-body{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;background:linear-gradient(0deg,rgba(0,0,0,.88),transparent);pointer-events:none}
:root:not(.native-client) .card-title h3{font-size:13px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
:root:not(.native-client) .game-card:hover,
:root:not(.native-client) .game-entry.is-selected .game-card{opacity:1;transform:translateY(-4px) scale(1.02);box-shadow:0 0 0 1px rgba(228,190,98,.7),0 24px 60px rgba(0,0,0,.6),0 0 60px rgba(var(--amb),.25)!important}
:root:not(.native-client) .game-card:hover .card-art img{transform:scale(1.06)}
:root:not(.native-client) .game-entry.is-selected .card-title h3{color:#fff1ad}

/* glass sections below */
:root:not(.native-client) .wishlist{border-top:0;margin-top:70px;padding:32px;border-radius:0;background:var(--glass);box-shadow:0 0 0 1px var(--glass-line) inset}
:root:not(.native-client) .wishlist-grid{border-top:0;gap:8px}
:root:not(.native-client) .wishlist-card{border:0!important;border-radius:0;background:rgba(255,255,255,.03)!important;padding:14px 16px!important}
:root:not(.native-client) .wishlist-vote{border-radius:0!important;background:rgba(255,255,255,.06)!important;border:0!important;box-shadow:0 0 0 1px var(--glass-line) inset;color:#e7e9ea!important}
:root:not(.native-client) .wishlist-vote:hover{box-shadow:0 0 0 1px rgba(228,190,98,.6) inset}
:root:not(.native-client) .wishlist-vote[aria-pressed=true]{background:var(--rf-gold)!important;color:#120e05!important}
:root:not(.native-client) .wishlist-input input{border-radius:0!important;background:rgba(255,255,255,.04);border:0;box-shadow:0 0 0 1px var(--glass-line) inset;padding:12px 18px}
:root:not(.native-client) .button{border-radius:0!important}
:root:not(.native-client) .button.primary,
:root:not(.native-client) #wishlist-submit{background:var(--rf-gold)!important;color:#120e05!important;border:0!important}
:root:not(.native-client) .client-banner{border:0;border-radius:0;background:linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:0 0 0 1px var(--glass-line) inset;overflow:hidden}
:root:not(.native-client) .client-downloads a{border-radius:0!important;background:rgba(255,255,255,.06)!important;color:#f5f5f2!important;box-shadow:0 0 0 1px var(--glass-line) inset;border:0}
:root:not(.native-client) .client-downloads a:hover{background:var(--rf-gold)!important;color:#120e05!important}
:root:not(.native-client) .client-downloads img{filter:invert(1) brightness(1.2)}
:root:not(.native-client) .client-downloads a:hover img{filter:none}
:root:not(.native-client) .account-banner{border-top:0}
:root:not(.native-client) footer{border-top:1px solid rgba(255,255,255,.06)}

/* in-game: rounded screen, glass panels */
:root:not(.native-client) #player{padding-top:22px}
:root:not(.native-client) .game-stage{border-radius:0!important;border:0!important;box-shadow:0 0 0 1px var(--glass-line),0 40px 100px rgba(0,0,0,.7)}
:root:not(.native-client) .game-stage:fullscreen{border-radius:0!important}
:root:not(.native-client) .game-info,
:root:not(.native-client) .chat-panel{border-radius:0!important;border:0!important;background:var(--glass)!important;box-shadow:0 0 0 1px var(--glass-line) inset;backdrop-filter:blur(16px)}
:root:not(.native-client) .chat-compose{border-radius:0!important;background:rgba(255,255,255,.04);border:0;box-shadow:0 0 0 1px var(--glass-line) inset}
:root:not(.native-client) .platform-download{border-radius:0!important}
:root:not(.native-client) .player-top h1{font-family:var(--rf-wide);font-weight:900;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:-.01em}
:root:not(.native-client) dialog{border-radius:0!important}
:root:not(.native-client) dialog input{border-radius:0!important}
:root:not(.native-client) .toast{border-radius:0!important}
:root:not(.native-client) .stage-play{border-radius:0!important}
:root:not(.native-client) .stage-links button,
:root:not(.native-client) .stage-nav{border-radius:0!important}
:root:not(.native-client) .player-top .button,
:root:not(.native-client) .player-top .button.subtle,
:root:not(.native-client) .game-downloads .platform-download{background:var(--glass)!important;color:#f5f5f2!important;border:0!important;box-shadow:0 0 0 1px var(--glass-line) inset!important;backdrop-filter:blur(10px)}
:root:not(.native-client) .player-top .button:hover,
:root:not(.native-client) .game-downloads .platform-download:hover{box-shadow:0 0 0 1px rgba(228,190,98,.6) inset!important;color:#fff1ad!important}
:root:not(.native-client) .game-downloads .platform-download img{filter:invert(1)}
:root:not(.native-client) .chat-header,
:root:not(.native-client) .game-info{background:transparent!important}
:root:not(.native-client) .chat-header{border-bottom:1px solid rgba(255,255,255,.06)!important}
:root:not(.native-client) .chat-note{border-color:rgba(255,255,255,.06)!important}
:root:not(.native-client) .chat-compose button{border-radius:0!important;background:var(--rf-gold)!important;color:#120e05!important}
/* shared community dock, restyled on this page */
:root:not(.native-client) .we-community-dock{right:20px!important;bottom:18px!important;border:0!important;border-radius:0!important;overflow:hidden;background:rgba(10,10,10,.6)!important;backdrop-filter:blur(16px);box-shadow:0 0 0 1px var(--glass-line) inset,0 12px 40px rgba(0,0,0,.5)!important}
:root:not(.native-client) .we-community-dock button{background:transparent!important}
:root:not(.native-client) .we-community-dock button+button{border-left:1px solid rgba(255,255,255,.08)!important}
:root:not(.native-client) .we-community-panel{border-radius:0!important;overflow:hidden;bottom:76px!important;right:20px!important;background:rgba(8,8,8,.85)!important;backdrop-filter:blur(20px);border:0!important;box-shadow:0 0 0 1px var(--glass-line) inset,0 30px 80px rgba(0,0,0,.6)!important}
@media(max-width:720px){
  :root:not(.native-client) .catalog-heading{flex-wrap:wrap}
  :root:not(.native-client) .search{width:100%;max-width:none}
  :root:not(.native-client) .search input{min-width:0;width:100%}
}

/* =====================================================================
   Sharp pass: no rounded corners anywhere. Controls get 45-degree cuts on two
   opposite corners, panels a larger cut, and framed content gold viewfinder brackets.
   ===================================================================== */
:root:not(.native-client){--cut:10px;--cut-lg:22px;
  --brackets:linear-gradient(#e4be62,#e4be62) top left/22px 2px,linear-gradient(#e4be62,#e4be62) top left/2px 22px,
    linear-gradient(#e4be62,#e4be62) top right/22px 2px,linear-gradient(#e4be62,#e4be62) top right/2px 22px,
    linear-gradient(#e4be62,#e4be62) bottom left/22px 2px,linear-gradient(#e4be62,#e4be62) bottom left/2px 22px,
    linear-gradient(#e4be62,#e4be62) bottom right/22px 2px,linear-gradient(#e4be62,#e4be62) bottom right/2px 22px}
:root:not(.native-client) body *,
:root:not(.native-client) body *::before,
:root:not(.native-client) body *::after{border-radius:0!important}
:root:not(.native-client) .we-site-header .we-brand-name::before,
:root:not(.native-client) .chat-dot{border-radius:50%!important}

:root:not(.native-client) .stage-play{padding:18px 40px}
:root:not(.native-client) .stage-play:hover{filter:brightness(1.08)}

/* viewfinder: the stage screenshot and the selected game are framed by gold corner brackets */
.stage-shot::after{inset:-14px!important;background:var(--brackets) no-repeat!important;opacity:.9;transition:inset .35s cubic-bezier(.2,.8,.2,1)}
.stage-shot:hover::after{inset:-8px!important}
.stage-shot img{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 120px rgba(0,0,0,.7),0 0 140px rgba(var(--amb),.35)}
:root:not(.native-client) .game-card::after{content:"";position:absolute;inset:8px;z-index:2;pointer-events:none;background:var(--brackets) no-repeat;--b:16px;opacity:0;transform:scale(1.04);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1);
  background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px}
:root:not(.native-client) .game-card:hover::after,
:root:not(.native-client) .game-entry.is-selected .game-card::after{opacity:1;transform:none}
:root:not(.native-client) .game-card:hover,
:root:not(.native-client) .game-entry.is-selected .game-card{box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 60px rgba(var(--amb),.25)!important}
:root:not(.native-client) .stage-nav{width:40px;height:40px}

/* Edges, final: square everywhere, hairlines instead of boxes. One cut corner marks the gold
   call to action; gold viewfinder brackets mark whatever is selected or framed. */
:root:not(.native-client) :is(.stage-play,#wishlist-submit,.button.primary,.client-downloads a:hover){clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
:root:not(.native-client) .stage-play{box-shadow:none}
:root:not(.native-client) .stage-links button,:root:not(.native-client) .stage-links a{background:none;box-shadow:none;backdrop-filter:none;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.18)!important}
:root:not(.native-client) .stage-links{gap:22px}
:root:not(.native-client) .stage-links button:hover,:root:not(.native-client) .stage-links a:hover{border-bottom-color:#e4be62!important}
:root:not(.native-client) :is(.search input,.wishlist-input input,.chat-compose){background:transparent!important;box-shadow:none!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.2)!important}
:root:not(.native-client) :is(.search input,.wishlist-input input):focus,:root:not(.native-client) .chat-compose:focus-within{border-bottom-color:#e4be62!important}
:root:not(.native-client) .search input{padding:10px 2px}
:root:not(.native-client) :is(.stage-shot,.game-card)::after{background-repeat:no-repeat!important}
:root:not(.native-client) .card-art{box-shadow:none}
:root:not(.native-client) .card-art img{outline:1px solid rgba(255,255,255,.07);outline-offset:-1px}

/* Maximize: game fills the browser window, page chrome hidden behind it */
body.game-max{overflow:hidden}
body.game-max .game-stage{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;aspect-ratio:auto!important;z-index:1000;margin:0!important;border:0!important;box-shadow:none!important;background:#000;clip-path:none!important}
body.game-max .we-community-dock,body.game-max .we-community-panel{display:none!important}
.max-restore{display:none}
body.game-max .max-restore{display:block;position:fixed;top:12px;right:12px;z-index:1001;padding:8px 14px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.55);color:#f5f5f2;font:600 13px/1 "Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;opacity:.45;transition:opacity .2s,border-color .2s;backdrop-filter:blur(8px)}
body.game-max .max-restore:hover,body.game-max .max-restore:focus-visible{opacity:1;border-color:#e4be62;color:#fff1ad}
:root:not(.native-client) #maximize-button[aria-pressed=true]{color:#fff1ad!important}
:root:not(.native-client) .player-top>#maximize-button{margin-left:auto}
:root:not(.native-client) .player-top>#maximize-button+#fullscreen-button{margin-left:0}

/* =====================================================================
   Game view: the game takes the window. One slim toolbar above it; chat opens
   beside it on demand; how-to-play and downloads sit below the fold.
   ===================================================================== */
:root:not(.native-client) #player:not([hidden]){display:flex;flex-direction:column;margin:0 calc(50% - 50vw);padding:10px clamp(12px,1.6vw,24px) 40px}
:root:not(.native-client) #player .player-top{order:0;flex-wrap:nowrap;gap:12px;margin:0 0 10px;min-height:40px}
:root:not(.native-client) #player .player-top>div{min-width:0;display:flex;align-items:baseline;gap:14px}
:root:not(.native-client) #player .player-top h1{font-size:clamp(15px,1.4vw,20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root:not(.native-client) #player #player-contributor{display:none}
:root:not(.native-client) #player #save-status{margin:0;white-space:nowrap}
:root:not(.native-client) #player .player-top .button{padding:8px 12px;font-size:12px}
:root:not(.native-client) #player .play-layout{order:1;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
:root:not(.native-client) body.game-chat #player .play-layout{grid-template-columns:minmax(0,1fr) 320px}
:root:not(.native-client) #player .game-column{display:contents}
:root:not(.native-client) #player .game-stage{aspect-ratio:auto;width:100%;height:calc(100dvh - 56px - 72px);min-height:360px}
:root:not(.native-client) #player .chat-panel{display:none;height:calc(100dvh - 56px - 72px);min-height:360px;max-height:none}
:root:not(.native-client) body.game-chat #player .chat-panel{display:flex}
:root:not(.native-client) #player .game-info{order:2;grid-column:1/-1;margin-top:0}
:root:not(.native-client) #player #game-downloads{order:2;margin:14px 0 0}
:root:not(.native-client) #chat-toggle[aria-pressed=true]{color:#fff1ad!important;box-shadow:inset 0 -2px 0 #e4be62!important}
@media(max-width:900px){
  :root:not(.native-client) body.game-chat #player .play-layout{grid-template-columns:1fr}
  :root:not(.native-client) #player .game-stage{height:calc(100dvh - 140px)}
  :root:not(.native-client) #player .player-top{flex-wrap:wrap}
}
/* the floating community dock would cover the game; the toolbar has its own Chat toggle */
body:has(#player:not([hidden])) #we-community{display:none}
@media(max-width:900px){
  :root:not(.native-client) #player .player-top{flex-wrap:wrap;row-gap:8px}
  :root:not(.native-client) #player .player-top>div{order:-1;flex:1 0 100%;flex-wrap:wrap;row-gap:2px}
  :root:not(.native-client) #player .player-top h1{white-space:normal}
  :root:not(.native-client) #player .player-top>#maximize-button{margin-left:0}
  :root:not(.native-client) #player .player-top .button{padding:7px 10px;font-size:11px}
  :root:not(.native-client) #player .game-stage{height:calc(100dvh - 190px)}
}

/* Phones held sideways (short landscape, touch): the game fills the screen while it is open - the site bar and the
   game's header would otherwise take a quarter of the height and push the game's lower edge (and the on-screen touch
   controls) off screen. A small "← games" button stays at the top left. */
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  :root:not(.native-client) body:has(#player:not([hidden])) .game-stage{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:0!important;max-width:none!important;aspect-ratio:auto!important;z-index:1000;margin:0!important;border:0!important;box-shadow:none!important;background:#000;clip-path:none!important}
  :root:not(.native-client) body:has(#player:not([hidden])) #back-button{position:fixed;top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));z-index:1001;padding:5px 9px!important;font-size:11px!important;opacity:.7;background:rgba(0,0,0,.55)!important}
  :root:not(.native-client) body:has(#player:not([hidden])){overflow:hidden}
  :root:not(.native-client) body:has(#player:not([hidden])) .phone-fullscreen{display:block;position:fixed;top:max(6px,env(safe-area-inset-top));left:calc(max(6px,env(safe-area-inset-left)) + 92px);z-index:1001;padding:5px 9px!important;font-size:11px!important;opacity:.7;background:rgba(0,0,0,.55)!important}
}
.phone-fullscreen{display:none}
/* Touch screens: "Restore" (Maximize) at the top left - the game's own touch buttons sit at the top right */
@media (pointer:coarse){
  body.game-max .max-restore{right:auto;left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));padding:5px 10px;font-size:11px}
  body.game-max #back-button,body.game-max .phone-fullscreen{display:none!important}
}
/* upright phone: the game's screen is at the top, so "Restore" goes to the bottom, between the stick and the buttons */
@media (pointer:coarse) and (orientation:portrait){
  body.game-max .max-restore{top:auto;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%)}
}