/* Ramizom Bay — 页面结构层
 * 只负责布局与层级:推荐区、继续玩、游戏库工具条、统一卡片网格、吸顶导航、移动端底部导航、播放器“更多”菜单。
 * 颜色、字体、描边与硬阴影全部沿用 style.css / polish.css / editions.css 的既有设计语言。
 * --topbar-h 由 script.js 按顶栏实际高度写入,吸顶元素据此对齐。 */

:root{--topbar-h:78px;--bottom-bar-h:0px}

/* ---------- 顶栏:虚拟形象入口 ---------- */
.topbar .player-chip{height:42px;padding:0 10px 0 3px;gap:8px;border-width:1px;box-shadow:2px 2px 0 var(--shadow);border-radius:0;font-size:12.5px}
.topbar .player-chip .pc-ava{width:30px;height:34px;border-radius:4px}
.topbar .player-chip .pc-name{max-width:88px}

/* ---------- 侧栏分类:吸顶,带数量 ---------- */
.side-rail{position:sticky;top:var(--topbar-h);align-self:start;max-height:calc(100vh - var(--topbar-h));overflow-y:auto;overscroll-behavior:contain;padding-top:28px;padding-bottom:24px;border-right:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.page-shell>.content{border-left:1px solid var(--line)}
.category-list button em{flex:1;min-width:0;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-list button .cat-count{flex:none;min-width:20px;text-align:right;font:700 11px/1 monospace;color:var(--muted2);opacity:.85}
.category-list button.selected .cat-count{color:var(--yellow);opacity:1}
.rail-note{margin-top:26px}
.side-rail .rail-note a{cursor:pointer}

/* ---------- 推荐区:主推 + 两张副推,一屏内看完 ---------- */
.featured{margin:28px 3vw 0;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:24px;align-items:stretch}
.featured .hero{margin:0;min-height:430px;grid-template-columns:44% 56%}
.featured .hero-copy{padding:40px 8% 36px}
.featured .hero h1{font-size:clamp(40px,4vw,64px);margin:20px 0 16px}
.featured .hero-art{min-height:100%}
.featured .moon{width:170px;height:170px}
.featured .hero-title{font-size:clamp(42px,4.6vw,74px)}
.featured .car{left:12%;bottom:22%;transform:scale(.78) skewX(-7deg);transform-origin:center bottom}
.featured .hero .eyebrow{font-size:11px}
.feature-stack{display:grid;grid-template-rows:1fr 1fr;gap:22px;min-width:0}
.feature-stack .gt-feature,.feature-stack .quiz-feature{margin:0;min-height:0;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);box-shadow:6px 6px 0 var(--shadow)}
.feature-stack .gt-feature>div:first-child,.feature-stack .quiz-feature>div:first-child{padding:22px 22px 24px;align-self:center}
.feature-stack h2{font-size:clamp(26px,2.4vw,36px)!important;margin:8px 0!important}
.feature-stack p{font-size:13px;line-height:1.6;margin:0 0 14px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feature-stack .eyebrow{font-size:10px}
.feature-stack button{min-height:40px!important;padding:0 16px!important;font-size:13px!important;box-shadow:3px 3px 0 #080e14!important}
.feature-stack .gt-poster{min-height:0}
.feature-stack .gt-poster svg{width:120%;left:-6%;height:70%}
.feature-stack .quiz-feature-art{min-height:0}
.feature-stack .quiz-feature-art b{font-size:76px}
.feature-stack .quiz-feature-art span{font-size:9px;padding:4px 7px}

/* ---------- 继续玩:横向货架 ---------- */
.shelf{margin:44px 3vw 0}
.shelf-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px;border-top:1px solid var(--ink);padding-top:14px}
.shelf-head h2{margin:0;font:900 26px/1 Georgia,"Microsoft YaHei",serif;letter-spacing:-.03em}
.shelf-more{border:0;background:none;color:inherit;font:800 13px/1 system-ui;cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.shelf-more:hover{color:var(--red)}
.shelf-row{display:grid;grid-auto-flow:column;grid-auto-columns:176px;gap:16px;overflow-x:auto;padding:4px 8px 14px 2px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.shelf-row .game-tile{scroll-snap-align:start}
.game-tile.mini .game-art{height:108px!important;min-height:0}
.game-tile.mini .game-art b{font-size:40px}
.game-tile.mini .game-card{height:auto!important;display:block}
.game-tile.mini .game-info{padding-top:8px;height:auto!important;min-height:0!important}
.game-tile.mini .game-info strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.game-tile.mini .game-info em,.game-tile.mini .player-count,.game-tile.mini .control-card-badge,.game-tile.mini .card-preview,.game-tile.mini .fav-btn{display:none}
.game-tile.mini .game-info>span:first-child{display:block;min-width:0}

/* ---------- 游戏库:标题 + 工具条 + 统一网格 ---------- */
.library-heading{margin-top:56px}
#new{scroll-margin-top:calc(var(--topbar-h) + 12px)}
.library-toolbar{margin:0 3vw 22px;display:flex;align-items:center;gap:16px;min-width:0}
.library-toolbar .control-filter{margin:0;flex:0 1 auto;min-width:0}
.result-count{order:2;margin:0 0 0 auto;flex:none;font:700 12px/1 monospace;letter-spacing:.06em;color:var(--muted)}
.game-grid{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:28px 22px}
.game-tile{position:relative;min-width:0}
.game-tile>.game-card{width:100%}
.game-grid .game-tile .game-info{padding-right:42px}
.fav-btn{position:absolute;z-index:3;right:0;bottom:10px;width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid var(--ink);background:var(--panel);color:var(--ink);font:900 17px/1 system-ui;cursor:pointer;box-shadow:2px 2px 0 var(--shadow);transition:transform .15s,background .15s}
.fav-btn:hover{background:var(--yellow);color:var(--on-yellow);transform:translate(-1px,-1px)}
.fav-btn[aria-pressed=true]{color:var(--red)}
.fav-btn[aria-pressed=true]:hover{color:var(--red)}
.empty-state{grid-column:1/-1}

/* ---------- 双人游戏单:放在游戏库之后,压缩高度 ---------- */
.collection{margin-top:72px;min-height:280px}
.collection-copy{padding:40px 7%}
.collection-copy h2{font-size:clamp(30px,3.4vw,48px)}
.tickets{transform:scale(.86);transform-origin:right center}

/* ---------- 搜索模式:收起推荐内容,结果紧跟搜索框 ---------- */
html.is-searching .featured,html.is-searching .shelf,html.is-searching .edition-intro,html.is-searching .collection,html.is-searching .ah-portal-card{display:none!important}
html.is-searching .library-heading{margin-top:30px}

/* ---------- 播放器:次要操作 ---------- */
.player-bar{position:relative}
.player-more{display:contents}
.player-more-btn{display:none!important}
.player-actions .pm-label{display:none}
.player-actions button b{font:inherit}

/* ---------- 老人版 / 儿童版:同一套结构 ---------- */
html[data-edition=senior] .side-rail,html[data-edition=kids] .side-rail{top:calc(var(--topbar-h) + 18px);max-height:calc(100vh - var(--topbar-h) - 36px)}
html[data-edition=senior] .page-shell>.content,html[data-edition=kids] .page-shell>.content{border-left:0}
html[data-edition=senior] .featured{display:none}
html[data-edition=kids] .featured{grid-template-columns:minmax(0,1fr)}
html[data-edition=kids] .feature-stack{grid-template-rows:none;grid-template-columns:minmax(0,1fr)}
html[data-edition=kids] .feature-stack .quiz-feature{min-height:220px}
.edition-intro{min-height:0!important;padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.edition-intro h1{font-size:clamp(36px,4.8vw,62px)!important;margin:12px 0}
.edition-intro p{font-size:16px;margin:0 0 6px}
html[data-edition=senior] .game-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
html[data-edition=kids] .game-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
html[data-edition=senior] .game-tile .fav-btn{right:10px;bottom:14px;width:40px;height:40px;font-size:20px;border-width:2px;border-radius:10px;box-shadow:none}
html[data-edition=senior] .game-grid .game-tile .game-info{padding-right:52px}
html[data-edition=kids] .game-tile .fav-btn{right:10px;bottom:15px;border:2px solid #d9d2f2;border-radius:999px;background:#fff;box-shadow:0 3px 0 #d9d2f2}
html[data-edition=kids] .game-grid .game-tile .game-info{padding-right:48px}
/* 儿童版卡片的错落旋转改由外层 tile 计数(卡片现在总是 tile 的第一个子元素) */
html[data-edition=kids] .game-tile .game-card{transform:none}
html[data-edition=kids] .game-tile:nth-child(3n+1) .game-card{transform:rotate(-.8deg)}
html[data-edition=kids] .game-tile:nth-child(3n+2) .game-card{transform:rotate(.7deg)}
html[data-edition=kids] .game-tile .game-card:hover{transform:translateY(-5px) rotate(0)}

/* ---------- 平板 ---------- */
@media(max-width:1180px){
  .featured{grid-template-columns:minmax(0,1fr)}
  .featured .hero{min-height:380px}
  .featured .hero-art{min-height:380px}
  .feature-stack{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-stack .gt-feature,.feature-stack .quiz-feature{min-height:210px}
  .topbar .player-chip .pc-name{display:none}
  .topbar .player-chip{width:42px;padding:0;justify-content:center}
}
@media(max-width:1050px) and (min-width:761px){
  .topbar{height:auto;padding-top:10px;padding-bottom:10px;grid-template-columns:auto 1fr auto;grid-template-areas:"brand edition tools" "search search search";gap:10px 14px}
  .topbar-right{display:contents}
  .topbar .brand{grid-area:brand}
  .edition-switcher{grid-area:edition;justify-self:center}
  .topbar-tools{grid-area:tools}
  .topbar-right .search{grid-area:search;width:100%}
}

/* ---------- 手机 ---------- */
@media(max-width:760px){
  :root{--bottom-bar-h:calc(66px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:var(--bottom-bar-h)}
  /* 顶栏随页面滚走,把吸顶位置让给分类条,节省纵向空间 */
  .topbar,html[data-edition=senior] .topbar,html[data-edition=kids] .topbar{position:relative;top:auto;padding:10px 16px 12px}
  .topbar .player-chip{width:36px;height:36px;padding:0;box-shadow:1px 1px 0 var(--shadow)}
  .topbar .player-chip .pc-ava{width:26px;height:30px}

  .side-rail,html[data-edition=senior] .side-rail,html[data-edition=kids] .side-rail{position:sticky;top:0;z-index:15;max-height:none;margin:0;padding:10px 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--chrome);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .side-rail::-webkit-scrollbar{display:none}
  .page-shell>.content{border-left:0}
  .category-list{gap:6px}
  .category-list button{min-height:40px;gap:7px}
  .category-list button em{overflow:visible}
  .category-list button .cat-count{min-width:0;font-size:10px}
  #new{scroll-margin-top:72px}

  .featured{margin:18px 16px 0;gap:16px}
  /* 主推在手机上改为左文右图,高度压到原来的一半 */
  .featured .hero{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 40%;box-shadow:5px 5px 0 var(--shadow)}
  .featured .hero-copy{padding:20px 16px 20px 18px;border-right:1px solid rgba(243,239,229,.3);border-bottom:0}
  .featured .hero .eyebrow>span:not(.preview-inline){display:none}
  .featured .preview-inline{margin:0;font-size:9px}
  .featured .hero h1{font-size:30px;margin:12px 0 10px}
  .featured .hero-copy p{font-size:12px;line-height:1.6;margin-bottom:14px}
  .featured .hero-copy button{height:40px;padding:0 14px;font-size:13px}
  .featured .hero-copy button span:last-child{margin-left:12px}
  .featured .hero-art{min-height:0}
  .featured .issue,.featured .hero-stamp{display:none}
  .featured .moon{width:64px;height:64px;top:10%;right:10%;box-shadow:0 0 0 8px rgba(244,198,73,.18)}
  .featured .road{left:18%;width:64%}
  .featured .car{transform:scale(.42) skewX(-7deg);transform-origin:center bottom;left:12%;bottom:30%}
  .featured .hero-title{font-size:30px;right:10px;bottom:10px}
  /* 副推横向滑动,不再整屏堆叠 */
  .feature-stack{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 10px;scrollbar-width:none}
  .feature-stack::-webkit-scrollbar{display:none}
  .feature-stack .gt-feature,.feature-stack .quiz-feature{scroll-snap-align:center;min-height:188px;grid-template-columns:minmax(0,1fr) 34%;box-shadow:4px 4px 0 var(--shadow)}
  .feature-stack .gt-feature>div:first-child,.feature-stack .quiz-feature>div:first-child{padding:18px 14px 18px 18px}
  .feature-stack h2{font-size:25px!important}
  .feature-stack p{font-size:12px;-webkit-line-clamp:3}
  .feature-stack .eyebrow{font-size:8.5px;letter-spacing:.04em}
  .feature-stack button{min-height:38px!important;padding:0 12px!important;font-size:12px!important}
  .feature-stack .gt-poster svg{width:150%;left:-25%;height:56%}
  .feature-stack .quiz-feature-art b{font-size:54px}
  .feature-stack .quiz-feature-art span{display:none}
  html[data-edition=kids] .feature-stack{margin:0;padding:0;overflow:visible;grid-auto-columns:100%}

  .shelf{margin:32px 16px 0}
  .shelf-head h2{font-size:22px}
  .shelf-row{grid-auto-columns:132px;gap:12px;margin:0 -16px;padding:4px 16px 12px}
  .game-tile.mini .game-art{height:88px!important}

  .library-heading,.section-heading.library-heading{margin:40px 16px 16px}
  .library-toolbar{margin:0 16px 16px;flex-wrap:wrap;gap:8px}
  .library-toolbar .control-filter{flex:1 1 100%;order:1;margin:0 -16px;padding:2px 16px 6px}
  .result-count{order:0;margin:0}
  .control-filter button{min-height:38px}

  .game-grid,html[data-edition=senior] .game-grid,html[data-edition=kids] .game-grid{margin:0 16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .game-grid .game-tile .game-art,.game-grid .game-card.tall .game-art{height:132px}
  html[data-edition=senior] .game-grid .game-tile .game-art,html[data-edition=kids] .game-grid .game-tile .game-art{height:128px}
  .game-grid .game-info{padding-top:9px}
  .game-grid .game-info strong{font-size:14px}
  .game-grid .game-info em{font-size:11px}
  .game-grid .game-tile .game-info{padding-right:36px}
  .fav-btn{width:30px;height:30px;bottom:auto;top:calc(132px + 8px);font-size:15px;box-shadow:1px 1px 0 var(--shadow)}
  html[data-edition=senior] .game-tile .fav-btn,html[data-edition=kids] .game-tile .fav-btn{top:auto;bottom:10px;right:7px;width:34px;height:34px}
  html[data-edition=senior] .game-grid .game-info strong,html[data-edition=kids] .game-grid .game-info strong{font-size:15px}

  .collection{margin:52px 16px 0;min-height:0}
  .collection-copy{padding:30px 22px}
  .collection-copy h2{font-size:30px}

  .edition-intro,html[data-edition=senior] .edition-intro,html[data-edition=kids] .edition-intro{margin:18px 16px 0;padding:28px 22px 30px}
  html[data-edition=senior] .edition-intro{padding-bottom:84px}
  html[data-edition=senior] .edition-intro:before{font-size:96px;bottom:-12px}
  .edition-intro h1{font-size:34px!important}
  .edition-intro p{font-size:15px}

  html.is-searching .library-heading{margin-top:20px}
  html[data-edition=senior] .section-heading p{display:none}
  .topbar .lang-wrap select{max-width:80px}
  html[data-edition=kids] .edition-intro{padding-bottom:30px;padding-right:118px}
  html[data-edition=kids] .edition-intro:before{width:92px;height:92px;right:14px;left:auto;top:auto;bottom:18px;transform:rotate(8deg)}
  html[data-edition=kids] .edition-intro:after{right:30px;bottom:116px;font-size:24px}

  /* 版本切换放到屏幕底部(原导航栏位置);顶栏里不再占一行 */
  .topbar,html[data-edition] .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;grid-template-areas:"brand tools" "search search"}
  html[data-edition] .edition-switcher{position:fixed!important;z-index:40;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;justify-self:stretch;display:flex!important;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))!important;border:0!important;border-top:1px solid var(--ink)!important;border-radius:0!important;background:var(--chrome)!important;box-shadow:0 -4px 14px rgba(5,18,34,.08)!important;backdrop-filter:blur(10px)}
  html[data-edition] .edition-switcher button{flex:1;justify-content:center;min-height:46px;padding:0 6px!important;font-size:13px!important;border-radius:12px}
  html[data-edition] .edition-switcher button i{display:block}
  html[data-edition=kids] .edition-switcher{border-top:0!important;box-shadow:0 -6px 0 #d9d2f2!important}
  html[data-edition=senior] .edition-switcher{border-top:3px solid var(--blue)!important}
  html[data-edition=senior] .edition-switcher button{font-size:15px!important}
  
  .toast{bottom:calc(var(--bottom-bar-h) + 18px)}
  .site-footer.site-footer{margin-bottom:24px}
}

/* ---------- 窄屏播放器:收藏 / 音效 / 全屏收进“更多” ---------- */
@media(max-width:560px){
  .player-control-badge{display:none}
  .player-more-btn{display:inline-grid!important;place-items:center}
  .player-more{display:none;position:absolute;z-index:30;top:calc(100% + 6px);right:8px;min-width:176px;flex-direction:column;padding:4px;background:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--shadow)}
  .player-more.open{display:flex}
  .player-actions .player-more button{width:100%!important;min-width:0;height:46px;display:flex;align-items:center;gap:12px;padding:0 12px;border:0;border-bottom:1px solid var(--line);box-shadow:none;background:transparent;text-align:left;font-size:15px}
  .player-actions .player-more button:last-child{border-bottom:0}
  .player-actions .player-more button b{width:22px;text-align:center}
  .player-actions .player-more .pm-label{display:inline;font:800 14px/1 system-ui}
  #player-favorite[aria-pressed=true] b{color:var(--red)}
}

@media(prefers-reduced-motion:reduce){.fav-btn{transition:none}}

/* 桌面侧栏:不允许横向滚动 / 拖动;长分类名在按钮内收缩(老人版、儿童版换行显示,不截断) */
@media(min-width:761px){
  /* 侧栏宽度跟着分类名走(有上限),不再把按钮挤出栏外 */
  html .page-shell{grid-template-columns:fit-content(260px) minmax(0,1fr)}
  html[data-edition=senior] .page-shell{grid-template-columns:fit-content(300px) minmax(0,1fr)}
  html[data-edition=kids] .page-shell{grid-template-columns:fit-content(280px) minmax(0,1fr)}
  html .side-rail{min-width:190px;padding-left:22px}
  html[data-edition=senior] .side-rail,html[data-edition=kids] .side-rail{min-width:205px}
  .side-rail,html[data-edition] .side-rail{overflow-x:hidden}
  .category-list{grid-template-columns:minmax(0,1fr)}
  .category-list button{min-width:0}
  html[data-edition=senior] .category-list button em,html[data-edition=kids] .category-list button em{white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.2}
}