/* New navigation-only shell. Not the legacy assets/css/site-shell.css. */
site-shell{display:block;position:sticky;top:0;z-index:1000;height:44px;flex-shrink:0}
site-shell > .site-shell-fallback{box-sizing:border-box;display:flex;align-items:center;gap:16px;height:44px;padding:0 24px;background:#faf8f2;color:#373b37;font:14px system-ui,sans-serif}
site-shell > .site-shell-fallback span{flex:1}
site-shell > .site-shell-fallback a{color:inherit;text-decoration:none}
:host{all:initial;display:block;position:sticky;top:0;z-index:1000;height:44px;flex-shrink:0;color-scheme:light;--paper:#faf8f2;--ink:#373b37;--muted:#767b72;--accent:#66765a;--line:#e7e8e0;--hover:#edf0e6;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;font-size:16px;line-height:normal;text-align:left;letter-spacing:normal;direction:ltr}
:host *{box-sizing:border-box}:host a{color:inherit;text-decoration:none}:host button{font:inherit;color:inherit;cursor:pointer}:host a,:host button{-webkit-tap-highlight-color:transparent}:host a:focus-visible,:host button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}:host [hidden]{display:none!important}
:host .topbar{height:44px;position:sticky;top:0;z-index:2;display:flex;align-items:center;padding:0 22px;background:var(--paper);border-bottom:1px solid var(--line);gap:5px}:host .menu-button{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;border-radius:8px}:host .menu-button:hover{background:var(--hover)}:host .menu-icon{width:16px;height:12px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative}:host .menu-icon:after{content:"";position:absolute;left:0;right:4px;top:4px;border-top:1.5px solid currentColor}:host .brand{font-size:14px;font-weight:650;letter-spacing:.06em;padding:12px 5px}
:host .drawer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden}:host .drawer::backdrop{background:rgb(36 40 33 / .16)}:host .drawer-panel{width:min(312px,calc(100% - 42px));height:100%;background:var(--paper);box-shadow:8px 0 40px rgb(30 35 25 / .04);display:flex;flex-direction:column}:host .drawer .topbar{flex-shrink:0;position:static}:host .drawer-content{overflow:auto;overscroll-behavior:contain;padding:26px 25px 32px}:host .drawer-section{margin-bottom:25px}:host .drawer-section h2{font-size:12px;font-weight:500;letter-spacing:.09em;color:var(--muted);margin:0 0 8px 12px}:host .drawer-section a{display:flex;align-items:center;gap:12px;padding:11px 12px;font-size:14px;line-height:22px;border-radius:9px}
:host .drawer-section svg{width:21px;height:21px;flex-shrink:0;fill:none;stroke:#88957b;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}:host .drawer-section:nth-child(2) svg{stroke:#a48b81}:host .drawer-section:nth-child(3) svg{stroke:#a29570}
:host .topbar .account{margin-left:auto;gap:16px;font-size:12px}:host .topbar .account a{display:flex;align-items:center;min-height:44px;padding:0 3px}:host .topbar .account a:hover{color:var(--accent)}
:host .account{display:flex;align-items:center}
/* Light DOM belongs to each application; only the slot layout is shared. */
site-shell > [data-site-shell-slot]{display:flex;align-items:center;min-width:0;max-width:100%;color:inherit}
:host > header.topbar{min-width:0}
:host > header.topbar > .brand,:host > header.topbar > .menu-button{flex-shrink:0;white-space:nowrap}
:host .page-navigation,:host .page-actions{flex:0 0 auto;min-width:0}
:host .page-navigation{margin-left:12px}
:host .page-actions{margin-left:auto}
:host .page-slot-content{display:flex;align-items:center;min-height:44px}
:host .page-menu-toggle{display:none;border:0;background:transparent;min-height:44px;padding:0 8px;font-size:12px;white-space:nowrap}
:host [data-collapsed] > .page-menu-toggle{display:block}
:host [data-collapsed] > .page-slot-content{display:none}
:host [data-collapsed][data-open] > .page-slot-content{display:flex;position:absolute;top:44px;right:12px;z-index:3;max-width:calc(100vw - 24px);max-height:calc(100dvh - 56px);overflow:auto;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--site-page-bar-background,var(--site-bar-background,var(--paper)));box-shadow:0 8px 25px rgb(0 0 0 / .12)}
:host .drawer-panel > .account{padding:0 24px;min-height:52px;gap:16px;border-top:1px solid var(--line);font-size:12px;flex-shrink:0}
:host .drawer-panel > .account a{min-height:44px;display:flex;align-items:center}
:host .topbar{font-size:16px}:host .drawer-section{padding:0}:host .drawer-section h2{line-height:normal}
:host .drawer-section a[aria-current="page"]{color:#526744;font-weight:650}:host .drawer-section a[aria-current="page"]::after{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;margin-left:auto}
@media(max-width:650px){:host .topbar{padding:0 12px}:host .drawer-content{padding-top:24px}}
/* The shell fades in place; only individual entries move. */
:host .drawer::backdrop{background:rgb(36 40 33 / .10)}
:host .drawer[open]::backdrop{animation:site-shell-menu-shell-in 260ms ease-out both}
:host .drawer[open] .drawer-panel{animation:site-shell-menu-shell-in 180ms ease-out both}
:host .drawer[open].is-closing::backdrop{animation:site-shell-menu-backdrop-out 180ms ease-out both}
:host .drawer[open].is-closing .drawer-panel{animation:site-shell-menu-panel-out 140ms ease-out both}
@keyframes site-shell-menu-shell-in{from{opacity:0}to{opacity:1}}
@keyframes site-shell-menu-panel-out{from{opacity:var(--panel-opacity,1)}to{opacity:0}}
@keyframes site-shell-menu-backdrop-out{from{opacity:var(--backdrop-opacity,1)}to{opacity:0}}
:host .drawer-content{position:relative;isolation:isolate;min-height:0}
:host .drawer-section a{position:relative;z-index:1;transform-origin:left center}
:host .drawer-section h2{position:relative;z-index:1}
:host .drawer[open] .drawer-section a{
  animation:site-shell-menu-item-in 220ms cubic-bezier(.2,.65,.3,1) both;
  animation-delay:var(--reveal-delay,0ms);
}
:host .drawer[open] .drawer-section h2{
  animation:site-shell-menu-heading-in 160ms ease-out both;
  animation-delay:var(--reveal-delay,0ms);
}
/* Keyboard users can reach an entry before its entrance delay has elapsed. */
:host .drawer[open] .drawer-section a.is-revealed{animation:none}
:host .menu-highlight{
  position:absolute;top:0;left:0;z-index:0;pointer-events:none;
  border-radius:9px;background:#e8edde;border:0;opacity:0;
  transition:opacity 120ms ease-out;will-change:transform;
}
:host .menu-highlight.is-visible{opacity:1}
@keyframes site-shell-menu-item-in{
  from{opacity:0;transform:translateY(-8px) scaleX(.96)}
  to{opacity:1;transform:translateY(0) scaleX(1)}
}
@keyframes site-shell-menu-heading-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  :host .drawer[open]::backdrop,:host .drawer[open] .drawer-panel{animation:none}
  :host .drawer[open] .drawer-section a,:host .drawer[open] .drawer-section h2{animation:none}
  :host .menu-highlight{transition:none}
}

/* Explicit viewport opt-in only. Existing document-mode pages are untouched. */
body[data-site-shell-layout]{--site-shell-height:44px;--site-shell-viewport-height:calc(100vh - var(--site-shell-height));--site-shell-viewport-width:100vw;display:block;box-sizing:border-box;margin:0;padding:0;min-height:0;height:100vh;overflow:hidden}
@supports(height:100dvh){body[data-site-shell-layout]{height:100dvh;--site-shell-viewport-height:calc(100dvh - var(--site-shell-height))}}
body[data-site-shell-layout] > site-shell{position:relative;width:100%;height:var(--site-shell-height);z-index:90}
body[data-site-shell-layout] > site-shell-viewport{display:block;position:relative;box-sizing:border-box;width:100%;height:var(--site-shell-viewport-height);min-width:0;min-height:0;overflow:hidden}
body[data-site-shell-layout="immersive"] > site-shell-viewport{contain:layout;isolation:isolate}
body[data-site-shell-layout="centered"] > site-shell-viewport{display:flex;align-items:safe center;justify-content:center;padding:var(--site-shell-content-padding,20px 12px);overflow:auto}
body[data-site-shell-layout="centered"] > site-shell-viewport > main{flex-shrink:0;max-width:100%}

/* Document pages retain their scrolling and theme. Only reserve common chrome space. */
body[data-site-shell-document]{--site-shell-height:44px;--site-shell-viewport-height:calc(100vh - 44px)}
@supports(height:100dvh){body[data-site-shell-document]{--site-shell-viewport-height:calc(100dvh - 44px)}}
body[data-site-shell-document] > .site-shell{min-height:var(--site-shell-viewport-height)}
:host .account .site-auth-user{max-width:none;overflow:visible;white-space:nowrap;font-size:12px}
:host .account button{border:0;background:transparent;color:inherit;font:inherit;padding:0 3px;min-height:44px;cursor:pointer}
/* Page-owned bar colors. Drawer deliberately retains the shared paper palette. */
site-shell{--site-bar-background:#faf8f2;--site-bar-foreground:#373b37;--site-bar-blur:0px}
site-shell[active="bottle"]{--site-bar-background:#e8dec7;--site-bar-foreground:#34432e}
site-shell[active="animal-neighbors"]{--site-bar-background:linear-gradient(110deg,#fbf6d5,#f5f2df 65%,#e4ecd9);--site-bar-foreground:#3d4a39}
site-shell[active="steam"]{--site-bar-background:#fff4f7;--site-bar-foreground:#503b45}
site-shell[active="boardgames"],site-shell[active="login"],site-shell[active="register"]{--site-bar-background:#fff3f7;--site-bar-foreground:#654c59}
site-shell[active="perspective"]{--site-bar-background:#e8dfcd;--site-bar-foreground:#363c34}
site-shell[active="matchstick"]{--site-bar-background:#fff1f5;--site-bar-foreground:#733e50}
site-shell[active="airplane"]{--site-bar-background:rgb(255 232 244 / .88);--site-bar-foreground:#5b4258;--site-bar-blur:8px}
site-shell[active="bigwatermelon"]{--site-bar-background:rgb(255 245 250 / .9);--site-bar-foreground:#754b57;--site-bar-blur:8px}
site-shell[active="endless-drive"]{--site-bar-background:rgb(30 48 54 / .88);--site-bar-foreground:#f0f6f5;--site-bar-blur:8px}
/* Inherit live page themes here, before entering the isolated shadow tree. */
body:has(> site-shell[active="2048"]){--site-page-bar-background:var(--page-bg,#faf8ef);--site-page-bar-foreground:var(--text,#776e65)}
body:has(> site-shell[active="map"]){--site-page-bar-background:var(--paper,#faf8f2);--site-page-bar-foreground:var(--cocoa,#373b37)}
body:has(> site-shell[active="perspective"]){--site-page-bar-background:var(--paper,var(--bg,#e8dfcd));--site-page-bar-foreground:var(--ink,var(--text,#363c34))}
site-shell[bar-theme="dark"]{--site-bar-background:rgb(30 38 40 / .94);--site-bar-foreground:#f3f5f3}
site-shell > .site-shell-fallback{
 background:var(--site-page-bar-background,var(--site-bar-background));
 color:var(--site-page-bar-foreground,var(--site-bar-foreground));
}
:host > header.topbar{
 background:var(--site-page-bar-background,var(--site-bar-background,var(--paper)));
 color:var(--site-page-bar-foreground,var(--site-bar-foreground,var(--ink)));
 border-bottom-color:transparent;
 backdrop-filter:blur(var(--site-bar-blur,0px));
 -webkit-backdrop-filter:blur(var(--site-bar-blur,0px));
}
:host > header.topbar .menu-button:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
:host > header.topbar .account a:hover{color:inherit;text-decoration:underline;text-underline-offset:4px}
:host > header.topbar :focus-visible{outline-color:currentColor}

/* The main-site identity remains in the top-right even when an app uses tool slots. */
:host header.topbar > .account{flex-shrink:0;margin-left:auto;position:relative;gap:8px}:host .site-auth-user{display:flex;align-items:center;gap:7px;min-height:44px;max-width:none;padding:0 4px;border:0;background:none;font-size:12px}:host .site-auth-avatar{display:grid;place-items:center;flex-shrink:0;width:27px;height:27px;border-radius:50%;overflow:hidden;background:#dce5d2;color:#526442;font-size:12px}:host .site-auth-avatar img{width:100%;height:100%;object-fit:cover}:host .site-auth-name{white-space:nowrap}:host .site-auth-menu{position:absolute;right:0;top:44px;min-width:160px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--paper);box-shadow:0 8px 25px rgb(0 0 0 / .12);z-index:5}:host .site-auth-menu a,:host .site-auth-menu button{display:flex;align-items:center;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:6px;background:none;text-align:left;white-space:nowrap;font-size:13px}:host .site-auth-menu a:hover,:host .site-auth-menu button:hover{background:var(--hover)}
@media(max-width:650px){:host header.topbar > .account{flex-shrink:1;min-width:40px}:host .account .site-auth-user{min-width:0}:host .site-auth-name{overflow:hidden;text-overflow:ellipsis;min-width:0}:host .page-navigation{margin-left:3px}:host .page-menu-toggle{padding:0 5px}}