:root{
  --bg:#efe4d3;
  --ink:#1f252b;
  --muted:#6d757c;
  --shadow:0 24px 60px rgba(54,39,24,0.14);
  --film:#d76842;
  --film-deep:#241b18;
  --film-soft:#f3d5c9;
  --game:#22a6a1;
  --game-deep:#111c24;
  --game-soft:#d7f4f1;
  --album:#8e69df;
  --album-deep:#22172e;
  --album-soft:#eadfff;
  --book:#9a6a2d;
  --book-deep:#2d2218;
  --book-soft:#e7d0a4;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{
  overflow-x:clip;
  overscroll-behavior-x:none;
}
body{
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(215,104,66,0.18), transparent 26%),
    radial-gradient(circle at bottom right, rgba(34,166,161,0.16), transparent 28%),
    linear-gradient(180deg, #f7efe4 0%, var(--bg) 42%, #f9f5ee 100%);
  position:relative;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  overscroll-behavior-x:none;
  touch-action:pan-y pinch-zoom;
}

body::before,
body::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:0;
  filter:blur(18px);
}

body::before{
  top:70px;
  left:36px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(223,148,103,0.16), transparent 68%);
}

body::after{
  right:42px;
  bottom:58px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(93,194,189,0.14), transparent 72%);
}

button,
a,
[role="button"],
.pill,
.card,
.auth-btn,
.auth-trigger,
.auth-quick-action{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.pill:focus:not(:focus-visible),
.card:focus:not(:focus-visible),
.auth-btn:focus:not(:focus-visible),
.auth-trigger:focus:not(:focus-visible),
.auth-quick-action:focus:not(:focus-visible){
  outline:none;
  box-shadow:none;
}

.page{
  width:min(1220px, calc(100% - 28px));
  max-width:calc(100vw - 28px);
  margin:24px auto 40px;
  position:relative;
  z-index:1;
}

.home-search-wrap{
  position:relative;
  margin-left:auto;
  flex:1 1 560px;
  max-width:720px;
  z-index:40;
}

.home-search-form{
  display:flex;
  align-items:center;
  width:100%;
}

.home-search-input{
  flex:1 1 auto;
  min-width:0;
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:#fffaf5;
  padding:0 16px;
  font:inherit;
  outline:none;
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
}

.home-search-input:focus{
  border-color:rgba(255,255,255,0.28);
  box-shadow:0 0 0 4px rgba(255,255,255,0.08);
}

.home-search-input::placeholder{
  color:rgba(255,250,245,0.62);
}

.home-search-results{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  display:grid;
  gap:8px;
  padding:10px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(25,32,39,0.98), rgba(38,50,58,0.96));
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 22px 46px rgba(0,0,0,0.24);
  backdrop-filter:blur(16px);
  z-index:50;
}

.home-search-filters{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  padding:4px 2px 6px;
}

.home-search-filter{
  width:100%;
  min-width:0;
  min-height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#f7fafc;
  padding:0 10px;
  font:inherit;
  font-size:12px;
  outline:none;
}

.home-search-filter:focus{
  border-color:rgba(255,255,255,0.3);
  box-shadow:0 0 0 2px rgba(255,255,255,0.08);
}

.home-search-results[hidden]{
  display:none !important;
}

.home-search-empty{
  padding:12px 14px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,0.12);
  color:rgba(255,250,245,0.72);
  background:rgba(255,255,255,0.04);
}

.home-search-card{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:11px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-search-card:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,0.16);
  border-color:rgba(255,255,255,0.14);
}

.home-search-card-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}

.home-search-line{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
  white-space:nowrap;
}

.home-search-card-title{
  font-size:15px;
  font-weight:800;
  color:#fffaf5;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 1 auto;
}

.home-search-meta{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:rgba(255,250,245,0.66);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1 1 0;
}

.home-search-meta span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
}

.home-search-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  flex:0 0 auto;
}

.home-search-badge[data-type="books"]{
  background:rgba(154,106,45,0.24);
  color:#f0d7b1;
}

.home-search-badge[data-type="films"]{
  background:rgba(216,106,66,0.22);
  color:#ffd2c2;
}

.home-search-badge[data-type="games"]{
  background:rgba(87,242,201,0.2);
  color:#c8f7ff;
}

.home-search-badge[data-type="albums"]{
  background:rgba(162,108,255,0.2);
  color:#e4d5ff;
}

.home-search-more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-decoration:none;
  padding:12px 14px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,0.14);
  color:#fffaf5;
  background:rgba(255,255,255,0.05);
  font-weight:700;
}

.home-search-more:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(78,55,30,0.08);
}

.hero{
  position:relative;
  overflow:visible;
  border-radius:34px;
  padding:34px;
  color:#fffaf5;
  background:
    radial-gradient(circle at 18% 8%, rgba(34,166,161,0.16), transparent 38%),
    radial-gradient(circle at 88% 18%, rgba(142,105,223,0.18), transparent 34%),
    linear-gradient(135deg, rgba(20,34,46,0.97), rgba(46,60,74,0.94));
  box-shadow:var(--shadow);
}

.hero-entry-row{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  margin-bottom:16px;
}

.studio-brand-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:6px 12px 6px 8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:#fffaf5;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,0.14);
  margin-left:0;
}

.studio-logo-mark{
  width:30px;
  height:30px;
  border-radius:9px;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow:0 6px 16px rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.18);
}

.studio-logo-mark img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.studio-brand-text{
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}

.home-search-wrap{
  margin-left:auto;
}

.hero-explore-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:#fffaf5;
  box-shadow:0 10px 24px rgba(0,0,0,0.16);
  font-weight:700;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.hero-explore-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.12);
}

.hero-explore-btn svg{
  width:18px;
  height:18px;
  display:block;
}

.hero-dashboard-btn svg{
  width:22px;
  height:22px;
}

.hero-log-btn{
  border-color:rgba(126,203,255,0.42);
  background:linear-gradient(135deg, rgba(51,96,157,0.34), rgba(33,160,164,0.28));
}

.hero-log-btn:hover{
  background:linear-gradient(135deg, rgba(63,114,184,0.44), rgba(40,187,171,0.34));
}

.update-log-modal{
  position:fixed;
  inset:0;
  z-index:10040;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(7,13,21,0.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  transition:opacity .2s ease;
}

.update-log-modal.show{
  display:flex;
  opacity:1;
}

.update-log-card{
  width:min(840px,100%);
  max-height:min(88vh,820px);
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(136,182,222,0.32);
  background:linear-gradient(160deg, rgba(20,29,40,0.96), rgba(31,52,68,0.95));
  box-shadow:0 36px 90px rgba(2,7,16,0.55);
  color:#eff6ff;
  transform:translateY(10px) scale(.985);
  transition:transform .24s ease;
}

.update-log-modal.show .update-log-card{
  transform:translateY(0) scale(1);
}

.update-log-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  border-bottom:1px solid rgba(136,182,222,0.2);
  background:linear-gradient(140deg, rgba(49,86,138,0.3), rgba(38,130,132,0.24));
}

.update-log-head h3{
  margin:0;
  font-size:21px;
  letter-spacing:.01em;
}

.update-log-subtitle{
  margin-top:4px;
  color:rgba(224,237,255,0.76);
  font-size:13px;
}

.update-log-close{
  min-height:38px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(176,215,248,0.42);
  background:rgba(8,19,31,0.36);
  color:#f2f8ff;
  font-weight:700;
  cursor:pointer;
}

.update-log-close:hover{
  background:rgba(18,40,60,0.58);
}

.update-log-body{
  padding:18px 20px 22px;
  overflow:auto;
  max-height:min(66vh,640px);
  scrollbar-width:thin;
  scrollbar-color:rgba(127,199,255,0.55) rgba(12,24,36,0.38);
}

.update-log-body::-webkit-scrollbar{
  width:10px;
}

.update-log-body::-webkit-scrollbar-track{
  background:rgba(12,24,36,0.38);
  border-radius:999px;
}

.update-log-body::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(129,201,255,0.82), rgba(95,160,233,0.78));
  border:2px solid rgba(12,24,36,0.38);
}

.update-log-body::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(160,218,255,0.92), rgba(120,184,255,0.86));
}

.update-log-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}

.update-log-item{
  border:1px solid rgba(135,179,220,0.22);
  border-radius:16px;
  background:rgba(12,24,36,0.55);
  padding:14px 14px 12px;
}

.update-log-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.update-log-date{
  font-size:12px;
  color:#a8d8ff;
  font-weight:700;
}

.update-log-tag{
  font-size:11px;
  border-radius:999px;
  padding:2px 8px;
  color:#062238;
  background:linear-gradient(135deg, #7ee4ff, #84f5d1);
  font-weight:700;
}

.update-log-title{
  margin:8px 0 4px;
  font-size:16px;
  color:#f6fbff;
}

.update-log-text{
  margin:0;
  color:rgba(225,238,255,0.82);
  line-height:1.55;
  font-size:13.5px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
}

.update-log-item.expanded .update-log-text{
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}

.update-log-toggle{
  margin-top:8px;
  padding:0;
  border:none;
  background:transparent;
  color:#8dd2ff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
}

.update-log-toggle:hover{
  color:#b4e4ff;
  text-decoration:underline;
}

.hero::before,
.hero::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter:blur(4px);
}

.hero::before{
  width:320px;
  height:320px;
  right:-120px;
  top:-90px;
  background:radial-gradient(circle, rgba(142,105,223,0.3), transparent 70%);
}

.hero::after{
  width:280px;
  height:280px;
  left:-90px;
  bottom:-110px;
  background:radial-gradient(circle, rgba(201,149,74,0.2), transparent 68%);
}

.eyebrow{
  position:relative;
  z-index:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(232,244,255,0.72);
  margin-bottom:12px;
}

h1{
  position:relative;
  z-index:1;
  margin:0;
  font-size:clamp(34px, 6vw, 64px);
  line-height:1.02;
}

.hero p{
  position:relative;
  z-index:1;
  margin:16px 0 0;
  max-width:760px;
  font-size:15px;
  line-height:1.8;
  color:rgba(230,242,255,0.82);
}

.hero .eyebrow,
.hero h1,
.hero p,
.card .eyebrow,
.card h2,
.card p,
.card .chips,
.card .chips span{
  -webkit-user-select:none;
  user-select:none;
}

.page *{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.home-search-wrap,
.home-search-wrap *,
.home-search-input{
  -webkit-user-select:text !important;
  -moz-user-select:text !important;
  -ms-user-select:text !important;
  user-select:text !important;
}

.hero-meta{
  position:relative;
  z-index:1;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.09);
  border:1px solid rgba(255,255,255,0.12);
  color:#fffaf5;
  font-size:13px;
}

.section{
  margin-top:22px;
  padding:10px 2px 0;
}

.grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}

.card{
  position:relative;
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:30px;
  padding:28px;
  min-height:320px;
  box-shadow:var(--shadow);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 70px rgba(54,39,24,0.18);
}

.card::before{
  content:"";
  position:absolute;
  inset:auto -40px -70px auto;
  width:220px;
  height:220px;
  border-radius:50%;
  opacity:.9;
}

.card-film{
  background:
    radial-gradient(circle at top right, rgba(216,106,66,0.2), transparent 30%),
    linear-gradient(180deg, #283440, #1b232c);
  border:1px solid rgba(198,225,255,0.12);
  color:#f4f7fb;
}

.card-film::before{
  background:radial-gradient(circle, rgba(215,104,66,0.28), transparent 68%);
}

.card-game{
  background:
    radial-gradient(circle at top right, rgba(87,242,201,0.22), transparent 30%),
    linear-gradient(180deg, #152d3f, #0d1e2b);
  border:1px solid rgba(176,236,255,0.12);
  color:#eafaff;
}

.card-game::before{
  background:radial-gradient(circle, rgba(34,166,161,0.28), transparent 68%);
}

.card-album{
  background:
    radial-gradient(circle at top right, rgba(162,108,255,0.24), transparent 30%),
    linear-gradient(180deg, #39295a, #24183a);
  border:1px solid rgba(230,215,255,0.12);
  color:#faf6ff;
}

.card-album::before{
  background:radial-gradient(circle, rgba(142,105,223,0.3), transparent 68%);
}

.card-book{
  background:
    radial-gradient(circle at top right, rgba(154,106,45,0.2), transparent 30%),
    linear-gradient(180deg, #5f4528, #3e2d1b);
  border:1px solid rgba(236,214,178,0.16);
  color:#f7ebd8;
}

.card-book::before{
  background:radial-gradient(circle, rgba(201,149,74,0.28), transparent 68%);
}

.card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}

.card-film .badge{
  color:#ffe8df;
  background:rgba(215,104,66,0.18);
  border:1px solid rgba(255,232,223,0.1);
}

.card-game .badge{
  color:#dcfffb;
  background:rgba(34,166,161,0.18);
  border:1px solid rgba(220,255,251,0.1);
}

.card-album .badge{
  color:#f0e7ff;
  background:rgba(142,105,223,0.18);
  border:1px solid rgba(240,231,255,0.1);
}

.card-book .badge{
  color:#f0d7b1;
  background:rgba(181,128,60,0.18);
  border:1px solid rgba(236,206,157,0.18);
}

.icon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}

.card-film .icon{
  background:linear-gradient(135deg, rgba(255,241,234,0.18), rgba(215,104,66,0.2));
}

.card-game .icon{
  background:linear-gradient(135deg, rgba(226,255,251,0.12), rgba(34,166,161,0.2));
}

.card-album .icon{
  background:linear-gradient(135deg, rgba(245,239,255,0.12), rgba(142,105,223,0.2));
}

.card-book .icon{
  background:linear-gradient(135deg, rgba(210,164,93,0.42), rgba(115,79,40,0.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);
}

.icon::before,
.icon::after{
  content:"";
  position:absolute;
}

.card-film .icon::before{
  width:40px;
  height:40px;
  background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='16' width='44' height='32' rx='5' fill='none' stroke='%23fff4ee' stroke-width='2.6'/%3E%3Cpath d='M21 16v32M43 16v32' stroke='%23fff4ee' stroke-width='2.6'/%3E%3Ccircle cx='16' cy='24' r='2' fill='%23fff4ee'/%3E%3Ccircle cx='16' cy='32' r='2' fill='%23fff4ee'/%3E%3Ccircle cx='16' cy='40' r='2' fill='%23fff4ee'/%3E%3Ccircle cx='48' cy='24' r='2' fill='%23fff4ee'/%3E%3Ccircle cx='48' cy='32' r='2' fill='%23fff4ee'/%3E%3Ccircle cx='48' cy='40' r='2' fill='%23fff4ee'/%3E%3C/svg%3E");
}

.card-film .icon::after{
  display:none;
}

.card-game .icon::before{
  width:40px;
  height:40px;
  background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M17 27c1.2-5.8 5.1-9 11.1-9h7.8c6 0 9.9 3.2 11.1 9l1.5 7.3c.8 3.8-2.1 7.2-5.9 7.2-1.7 0-3.3-.7-4.5-1.9l-2.6-2.7H28.4l-2.6 2.7c-1.2 1.2-2.8 1.9-4.5 1.9-3.8 0-6.7-3.4-5.9-7.2Z' fill='none' stroke='%23e6fffc' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M25 24.5v8M21 28.5h8' stroke='%23e6fffc' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='42.5' cy='27' r='2' fill='%23e6fffc'/%3E%3Ccircle cx='47.5' cy='31.5' r='2' fill='%23e6fffc'/%3E%3Ccircle cx='37.5' cy='31.5' r='2' fill='%23e6fffc'/%3E%3C/svg%3E");
}

.card-game .icon::after{
  display:none;
}

.card-album .icon::before{
  width:40px;
  height:40px;
  background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='17' fill='none' stroke='%23f7f1ff' stroke-width='2.8'/%3E%3Ccircle cx='32' cy='32' r='10' fill='none' stroke='%23f7f1ff' stroke-width='2.2' opacity='.7'/%3E%3Ccircle cx='32' cy='32' r='3.8' fill='none' stroke='%23f7f1ff' stroke-width='2.8'/%3E%3C/svg%3E");
}

.card-album .icon::after{
  display:none;
}

.card-book .icon::before{
  width:40px;
  height:40px;
  background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M14 16h15c5 0 8 3 8 8v24c-2.8-2.5-6-3.6-10-3.6H14Z' fill='none' stroke='%235a390f' stroke-width='2.8' stroke-linejoin='round'/%3E%3Cpath d='M50 16H35c-5 0-8 3-8 8v24c2.8-2.5 6-3.6 10-3.6h13Z' fill='none' stroke='%235a390f' stroke-width='2.8' stroke-linejoin='round'/%3E%3Cpath d='M32 21v26' stroke='%235a390f' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.card-book .icon::after{
  display:none;
}

.card h2{
  margin:22px 0 10px;
  font-size:34px;
}

.card p{
  margin:0;
  line-height:1.8;
  max-width:460px;
}

.card-film p,
.card-game p,
.card-album p{
  color:rgba(246,244,240,0.72);
}

.card-book p{
  color:rgba(247,228,198,0.78);
}

.features{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
}

.feature{
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
}

.card-film .feature{
  color:#ffe9df;
  background:rgba(215,104,66,0.16);
}

.card-game .feature{
  color:#dcfffb;
  background:rgba(34,166,161,0.14);
}

.card-album .feature{
  color:#f1e8ff;
  background:rgba(142,105,223,0.16);
}

.card-book .feature{
  color:#f0d7b1;
  background:rgba(181,128,60,0.16);
}

.card-footer{
  position:absolute;
  left:28px;
  right:28px;
  bottom:26px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:122px;
  padding:12px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
}

.card-film .cta{
  color:#fff9f4;
  background:linear-gradient(135deg, var(--film), #ea845c);
}

.card-game .cta{
  color:#f7fffd;
  background:linear-gradient(135deg, var(--game), #4cc7c1);
}

.card-album .cta{
  color:#faf7ff;
  background:linear-gradient(135deg, var(--album), #b08fff);
}

.card-book .cta{
  color:#fff6e8;
  background:linear-gradient(135deg, #9a6730, #bf8a49);
}

.footer-note{
  margin-top:18px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

@media (max-width: 860px){
  .grid{grid-template-columns:1fr}
  .card{min-height:280px}
}

@media (max-width: 640px){
  .page{width:min(100% - 16px, 1220px); margin:12px auto 28px}
  .hero,.card{border-radius:24px}
  .hero{padding:24px}
  .home-search-form{grid-template-columns:1fr}
  .home-search-filters{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .card{padding:22px}
  .card h2{font-size:28px}
  .card-footer{
    position:static;
    margin-top:24px;
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-entry-row{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .studio-brand-badge{
    margin-left:0;
    align-self:flex-start;
  }
  .home-search-wrap{
    max-width:none;
    flex-basis:auto;
  }
  .home-search-form{
    min-width:0;
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .home-search-results{
    position:static;
    margin-top:6px;
  }
  .update-log-modal{
    padding:14px;
  }
  .update-log-head{
    padding:15px 14px;
  }
  .update-log-body{
    padding:14px;
  }
}

@media (min-width: 768px) and (max-width: 1180px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
    overscroll-behavior-x:none;
  }
  .page{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    margin:18px auto 32px;
  }
}