:root{color-scheme:dark;--bg:#0e1923;--text:#dbe2eb;--muted:#8c9caa;--blue:#66c0f4}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 12%,#203b55 0%,#101e2a 53%,var(--bg) 90%);color:var(--text);font:14px Arial,"Microsoft YaHei",sans-serif;min-height:100vh}button,select{font:inherit}button{cursor:pointer;color:inherit;border:0}button:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}button:disabled{opacity:.3;cursor:default}header{text-align:center;padding:32px 16px 20px}h1{font-family:"Arial Narrow",Arial,sans-serif;font-stretch:condensed;font-size:56px;letter-spacing:-2px;margin:0;color:#c0c3c8}header p{font-style:italic;color:#b8c4d1;margin:16px 0 8px}.toolbar{max-width:1232px;margin:0 auto 12px;display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted)}.badge{color:#75c8ec;background:#17394a;padding:5px 8px}select{background:#1d3041;border:1px solid #355069;color:#c7d5e0;padding:4px}main{max-width:1232px;margin:auto;display:grid;grid-template-columns:230px minmax(0,607px) 360px;gap:17px;align-items:start}.filters{background:#192633;border:2px solid #22394b}.filter-heading{height:36px;padding:7px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#9fbdd0}.filter-heading button{background:none;color:#66c0f4;font-size:12px}small{margin-left:5px;color:#66c0f4}#tags{max-height:906px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#465362 #182632}.tag{display:flex;justify-content:space-between;width:100%;text-align:left;background:#16232f;color:#a0becf;border-bottom:2px solid #213343;padding:6px;min-height:30px}.tag:hover{background:#28465a}.tag[aria-pressed=true]{background:#17465d;color:#dcf6ff;box-shadow:inset 3px 0 #66c0f4}.check{color:#73c5e9}.filter-note{font-size:11px;color:#8299a9;padding:0 7px}.results{min-width:0}#status{font-size:12px;color:#9eb4c6;min-height:24px;line-height:18px}#games{display:grid;gap:10px}.game{display:flex;padding:0;text-align:left;width:100%;min-height:87px;background:#23394e;transition:background .15s}.game:nth-child(even){background:#263e53}.game:hover,.game.active{background:#375268;box-shadow:inset 3px 0 #66c0f4}.game img{width:38%;aspect-ratio:231/87;object-fit:cover;align-self:stretch}.game-info{padding:10px 12px;min-width:0}.game h2{font-size:16px;font-weight:500;margin:0 0 7px}.game p{font-size:12px;line-height:1.35;margin:0;color:#c0cbd5}.game time{display:block;margin-top:14px;color:#8c9caa;font-size:12px}.preview{padding:10px;background:#2b4051;min-height:210px;position:sticky;top:16px}.preview-head{padding:12px 8px;background:#203140}.preview h2{font-size:18px;margin:0 0 8px}.review{font-size:12px;line-height:1.5;color:#bccad5}.review strong{color:#66c0f4;font-weight:400}.pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.pills span{background:#364b5e;padding:5px 8px;font-size:11px}.media{margin:10px 0 0;position:relative;background:#111f2c}.media img,.media video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.media figcaption{padding:5px 8px;font-size:10px;color:#9bb1c2}.placeholder{color:#9db1c2;line-height:1.8;padding:30px 12px;text-align:center}nav{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0}nav button{background:transparent;font-size:24px;padding:2px 12px}nav span{font-size:12px}#retry{background:#315d7a;padding:10px 22px;margin:10px 0}.skeleton{height:87px;background:linear-gradient(90deg,#203548,#30495c,#203548);background-size:200% 100%;animation:pulse 1.3s infinite}@keyframes pulse{to{background-position:-200% 0}}footer{max-width:1232px;margin:24px auto;padding-bottom:20px;font-size:11px;color:#75899a;display:flex;justify-content:space-between}.empty{padding:70px 20px;text-align:center;background:#1c3041;color:#9eb4c6}@media(min-width:1450px){header{padding-top:36px;padding-bottom:20px}}@media(max-width:1250px){main,.toolbar,footer{margin-left:20px;margin-right:20px}main{grid-template-columns:190px minmax(0,1fr) 300px}.game img{width:36%}.game-info{padding:9px}.game h2{font-size:14px}}@media(max-width:950px){main{grid-template-columns:160px minmax(0,1fr)}.preview{grid-column:2;position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px}.preview-head{grid-column:1/-1}.media{margin:0}.game img{width:38%}h1{font-size:44px}}@media(max-width:600px){header{padding-top:25px}h1{font-size:36px;letter-spacing:-1px}.toolbar{flex-wrap:wrap}main{display:block;margin:0 12px}.filters{margin-bottom:16px}#tags{max-height:150px;display:grid;grid-template-columns:repeat(3,1fr)}.tag{font-size:11px}.filter-note{margin:5px}.preview{display:grid;margin-top:16px}.game time{margin-top:8px}.game h2{font-size:14px}footer{display:block;line-height:2}footer span{display:block}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.language-control{display:flex;align-items:center;gap:6px;white-space:nowrap}.toolbar{flex-wrap:wrap}.filter-heading{height:auto;min-height:36px;gap:6px}.filter-heading>span{min-width:0}.filter-heading button{flex-shrink:0}

.festival-control{display:flex;align-items:center;gap:8px;white-space:nowrap}.festival-control select{min-width:120px}.language-control{margin-left:auto}

/* Keep filtering from moving the viewport through automatic scroll anchoring. */
html { overflow-anchor: none; }

/* About card */
footer.about-card {
  display: block;
  margin-top: 36px;
  margin-bottom: 32px;
  padding: 28px 32px;
  background: linear-gradient(120deg, #203548, #172936);
  border: 1px solid #30495d;
  border-top: 2px solid #467b99;
  border-radius: 4px;
  color: #b4c4d1;
  font-size: 14px;
  line-height: 1.8;
}
.about-card h2 { margin: 0 0 14px; color: #e0e8ef; font-size: 21px; font-weight: 500; }
.about-copy { max-width: none; }
.about-copy p { margin: 0 0 12px; }
.about-card hr { margin: 22px 0 16px; border: 0; border-top: 1px solid #375064; }
.about-card .about-contact { margin: 0; }
.about-card .about-contact span { display: inline; }
.about-card a { color: #78c9f4; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.about-card a:hover { color: #c5eaff; }
.about-card a:focus-visible { outline: 2px solid #66c0f4; outline-offset: 4px; }
@media (max-width: 600px) {
  footer.about-card { margin: 24px 12px; padding: 22px 20px; }
  .about-card h2 { font-size: 19px; }
}
/* Align all three desktop columns while retaining independent tag scrolling. */
@media (min-width: 951px) {
  main { align-items: stretch; }
  .filters { display: flex; flex-direction: column; min-height: 0; }
  .filter-heading, .filter-note { flex-shrink: 0; }
  #tags { flex: 1 1 0; height: 0; min-height: 0; max-height: none; overflow-y: auto; }
  .results { display: flex; flex-direction: column; }
  .results nav { margin-top: auto; margin-bottom: 0; padding-top: 15px; }
  .results #retry { align-self: flex-start; }
  .preview { position: static; }
}

/* Pagination occupies its own row, outside the three content columns. */
main > .pagination { grid-column: 2; margin: 0; padding: 0; }
@media (min-width: 951px) {
  main { grid-template-rows: minmax(0, 1fr) auto; }
  .filters, .results, .preview { grid-row: 1; }
  .filters { grid-column: 1; }
  .results { grid-column: 2; }
  .preview {
    grid-column: 3;
    min-height: 0;
    contain: size;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #465362 #203140;
  }
  .results #games { flex: 1; }
  main > .pagination { grid-row: 2; }
}
@media (min-width: 601px) and (max-width: 950px) {
  main > .pagination { grid-column: 2; grid-row: 2; }
  .preview { grid-row: 3; }
}
@media (max-width: 600px) {
  main > .pagination { margin-top: 15px; }
}

/* Keep the status above, and pagination below, the aligned card columns. */
@media (min-width: 951px) {
  main { grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 6px; }
  main > #status { grid-column: 2; grid-row: 1; }
  .filters, .results, .preview { grid-row: 2; }
  main > .pagination { grid-row: 3; margin-top: 11px; }
}
@media (min-width: 601px) and (max-width: 950px) {
  main > #status { grid-column: 2; grid-row: 1; }
  .filters { grid-column: 1; grid-row: 2; }
  .results { grid-column: 2; grid-row: 2; }
  main > .pagination { grid-row: 3; }
  .preview { grid-row: 4; }
}

/* Edition and language share the status row directly above the columns. */
main > .festival-control,
main > .language-control { margin: 0; align-self: center; color: #9fb3c3; font-size: 12px; }
@media (min-width: 951px) {
  main > .festival-control { grid-column: 1; grid-row: 1; }
  main > .language-control { grid-column: 3; grid-row: 1; justify-self: end; }
  main > #status { align-self: center; min-height: 0; }
}
@media (min-width: 601px) and (max-width: 950px) {
  main > .festival-control { grid-column: 1; grid-row: 1; }
  main > .language-control { grid-column: 2; grid-row: 1; justify-self: end; }
  main > #status { grid-column: 2; grid-row: 2; }
  .filters, .results { grid-row: 3; }
  main > .pagination { grid-row: 4; }
  .preview { grid-row: 5; }
}
@media (max-width: 600px) {
  main > .festival-control,
  main > .language-control { display: inline-flex; margin: 0 12px 14px 0; }
}
/* Keep short result sets at their natural card height. */
#games { align-content: start; grid-auto-rows: auto; }


.media-message { margin: 0; padding: 0 8px; font-size: 12px; color: #b4c4d1; }
.media-message:empty { display: none; }

/* Game cards are real links: keyboard activation, middle-click and context menus work. */
a.game { color: inherit; text-decoration: none; font: inherit; cursor: pointer; }
a.game:focus-visible { outline: 2px solid #66c0f4; outline-offset: 2px; }