:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #15191c;
  color: #f0f1f3;
  font-size: 16px;
  --muted: #b1b6bf;
  --line: #414950;
  --accent: #ffd04b;
  --panel: #22272b;
  --metal: url("./theme/industrial-metal.png");
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 55% 0, #30363c70, transparent 65%), #15191c; min-height: 100dvh; }
button, input, select { font: inherit; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
svg { width: 24px; height: 24px; display: block; flex-shrink: 0; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.metal-panel { background-image: linear-gradient(#20262ba8, #161b20be), var(--metal); background-size: auto, 630px; box-shadow: inset 0 1px #ffffff12, inset 0 -1px #0009, 0 4px 18px #0006; }
.site-header { position: relative; display: flex; align-items: center; gap: 30px; padding: 0 40px; min-height: 88px; border-bottom: 1px solid #515860; }
.site-header::before, .site-header::after, .sidebar::before, .sidebar::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(135deg, #9ba2a8 0%, #252c32 40%, #070b0e 48%, #59616a 53%, #171c20 65%); border: 2px solid #0d1114; box-shadow: 0 1px 2px #fff4; pointer-events: none; }
.site-header::before { left: 10px; top: 14px; }
.site-header::after { right: 10px; top: 14px; }
.brand { color: var(--accent); font-size: 38px; letter-spacing: -1.7px; font-weight: 850; display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; text-shadow: 0 2px 2px #0005; }
.brand-icon { width: 46px; height: 46px; }
.main-nav { display: flex; align-self: stretch; gap: 6px; flex-shrink: 0; }
.nav-tab { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 0 22px; background: transparent; color: var(--muted); border: 0; position: relative; font-size: 18px; font-weight: 600; }
.nav-tab[aria-pressed="true"] { color: var(--accent); background: linear-gradient(#11171c80, #14191ecc); box-shadow: inset 1px 0 #ffffff06, inset -1px 0 #0006; }
.nav-tab[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 0; left: 22px; right: 22px; height: 5px; background: var(--accent); border-radius: 4px 4px 0 0; box-shadow: 0 0 10px #ffcf4930; }
.nav-tab:hover { color: #fff1b4; }
.nav-tab svg { width: 25px; height: 25px; }
.main-nav [data-icon="heart"] svg { fill: currentColor; stroke: none; }
.search { display: flex; align-items: center; gap: 14px; min-width: 160px; flex: 1; max-width: 620px; margin-left: auto; padding: 0 14px; border: 1px solid #5c6369; border-radius: 9px; background: #1a1f2460; box-shadow: inset 0 2px 7px #0004, 0 1px #ffffff06; }
.search svg { width: 25px; height: 25px; color: var(--muted); }
.search input { width: 100%; min-width: 0; height: 50px; border: 0; background: transparent; color: #fff; outline: none; font-size: 17px; }
.search input::placeholder { color: #b6bbc4; opacity: 1; }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.header-motto { color: #8a959f; font-size: 11px; line-height: 1.7; letter-spacing: 1.8px; text-transform: uppercase; padding-left: 26px; border-left: 1px solid #525960; }
.catalog-layout { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 24px; padding: 18px 20px 26px 8px; width: 100%; margin: 0; }
.sidebar { position: sticky; top: 18px; align-self: start; min-height: calc(100dvh - 124px); border: 1px solid #59616a; outline: 5px solid #0c1013; outline-offset: 2px; border-radius: 4px 13px 4px 13px; padding: 26px 12px 18px; display: flex; flex-direction: column; }
.sidebar::before { top: 12px; left: 10px; width: 8px; height: 8px; }
.sidebar::after { bottom: 12px; right: 10px; width: 8px; height: 8px; }
.sidebar-heading { color: #a3acb7; text-transform: uppercase; font-size: 12px; letter-spacing: 1.6px; margin: 8px 6px 19px; }
.sidebar-heading>span { color: #cfac49; margin-right: 6px; }
.genres { display: flex; flex-direction: column; gap: 10px; }
.genre { display: flex; align-items: center; gap: 18px; min-height: 58px; width: 100%; padding: 12px 15px; border: 1px solid #4d555d; border-radius: 8px; background: linear-gradient(140deg, #30363b80, #14191db3); color: #c2c7ce; text-align: left; font-size: 15px; box-shadow: inset 0 1px #ffffff07; }
.genre svg { width: 27px; height: 27px; }
.genre[aria-pressed="true"] { color: #151a1d; border-color: #ffe082; background: linear-gradient(115deg, #e3b936dc, #b99431d9); box-shadow: inset 0 1px 2px #fff5, 0 0 8px #e5b2320d; }
.genre:hover { border-color: #bd9e45; }
.sidebar-motto { margin-top: auto; padding: 38px 28px 20px; color: #8e9ba5; font-size: 11px; letter-spacing: 1.7px; line-height: 1.8; text-transform: uppercase; position: relative; }
.sidebar-motto::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: linear-gradient(90deg, #6f777b66, transparent); }
.sidebar-motto span { position: absolute; width: 22px; height: 1px; right: 16px; bottom: 33px; background: #d3ad37; }
.catalog-content, .sidebar { min-width: 0; }
.intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 2px 0 22px; min-height: 62px; }
.intro h1 { font-size: clamp(32px, 3.3vw, 52px); line-height: 1.12; letter-spacing: -1.8px; font-weight: 900; margin: 0; text-shadow: 0 2px 2px #0007; }
.catalog-controls { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.game-count { font-size: 15px; white-space: nowrap; color: var(--muted); }
.sort-control { display: flex; align-items: center; position: relative; }
.sort-control select { appearance: none; min-height: 44px; padding: 10px 40px 10px 14px; border: 1px solid #4a525b; border-radius: 6px; background: linear-gradient(#272d33, #1b2025); color: #cbd0d8; font-size: 14px; cursor: pointer; }
.sort-control>span[data-icon] { pointer-events: none; position: absolute; right: 12px; color: #bdc3cb; }
.sort-control svg { width: 17px; height: 17px; }
.view-controls { display: flex; gap: 5px; }
.view-button { background: linear-gradient(#292f35, #1e2328); border: 1px solid #414950; border-radius: 5px; color: #aeb7c0; width: 44px; height: 44px; display: grid; place-items: center; }
.view-button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: #181d22; }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.game-card { border: 1px solid #58616a; border-radius: 8px; background: linear-gradient(135deg, #2d3339, #1c2125); overflow: hidden; box-shadow: 0 3px 10px #0003, inset 0 -1px #ffffff07; transition: border-color .16s, box-shadow .16s; container-type: inline-size; }
.game-card:hover { border-color: #b99a4d; box-shadow: 0 4px 14px #0005; }
.game-cover { position: relative; aspect-ratio: 423 / 257; overflow: hidden; background: #242c31; border-bottom: 1px solid #555c64; }
.game-cover>a { display: block; position: absolute; inset: 0; overflow: hidden; }
.game-cover>a:focus-visible { outline-offset: -5px; }
.game-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-cover img.art-crop { position: absolute; max-width: none; object-fit: fill; }
.cover-placeholder { display: grid; place-items: center; width: 100%; height: 100%; padding: 20px; text-align: center; font-size: 23px; font-weight: 700; background: linear-gradient(135deg, #34404a, #1a232c); color: #ffdc75; }
.card-body { padding: 9px 14px 14px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 42px; }
.card-heading h2 { font-size: clamp(16px, 1.4vw, 21px); font-weight: 650; line-height: 1.3; margin: 0; min-width: 0; }
.card-heading h2 a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; margin-right: -6px; background: transparent; color: #c7cdd3; border: 0; border-radius: 6px; }
.favorite svg { width: 26px; height: 26px; }
.favorite:hover { color: #ffdc74; background: #ffffff06; }
.favorite[aria-pressed="true"] { color: var(--accent); }
.favorite[aria-pressed="true"] svg { fill: currentColor; }
.card-description { display: none; color: var(--muted); font-size: 14px; line-height: 1.6; margin: 5px 0 16px; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.card-genre { border: 1px solid #66707a; border-radius: 20px; padding: 4px 9px; color: #d4d8df; background: linear-gradient(#414950, #2e353d); font-size: 12px; line-height: 1.2; white-space: nowrap; box-shadow: inset 0 1px #ffffff0a; }
.button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; color: #e5e8ec; background: linear-gradient(#313940, #232a30); border: 1px solid #56616a; border-radius: 6px; white-space: nowrap; }
.button:hover { background: #414951; border-color: #b59a54; }
.play-button { background: linear-gradient(#ffdc65, #f7c53e); color: #161b1e; border-color: #efc658; min-width: 112px; padding: 9px 16px; font-weight: 750; box-shadow: inset 0 1px #fff7, 0 2px 3px #0003; }
.play-button svg { width: 18px; height: 18px; }
.play-button:hover { background: linear-gradient(#ffe58a, #ffd456); border-color: #ffe68b; }
.game-grid[data-view="list"] { grid-template-columns: 1fr; }
.game-grid[data-view="list"] .game-card { display: grid; grid-template-columns: minmax(190px, 28%) minmax(0, 1fr); }
.game-grid[data-view="list"] .game-cover { aspect-ratio: 423 / 257; border-bottom: 0; border-right: 1px solid #555c64; }
.game-grid[data-view="list"] .card-body { padding: 12px 22px; display: flex; flex-direction: column; }
.game-grid[data-view="list"] .card-description { display: block; }
.game-grid[data-view="list"] .card-bottom { margin-top: auto; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 1.6; color: #919ba5; margin-top: 26px; padding: 20px 0 0; border-top: 1px solid #41495180; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; background: #d5b356; border-radius: 50%; }
.empty { text-align: center; padding: 60px 15px; color: var(--muted); }
.empty h2 { color: #f0f2f5; }
body.playing { overflow: auto; }
.player-view { min-width: 0; }
.player-header { display: flex; align-items: center; gap: 14px; padding: 8px 12px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.player-header h1 { font-size: 16px; letter-spacing: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.player-actions { display: flex; gap: 6px; }
.player-header .button { font-size: 13px; padding: 8px 12px; }
.game-stage { position: relative; height: clamp(200px, calc(56.25vw - 168.75px), 68dvh); min-width: 0; background: #080b10; }
.game-stage iframe { display: block; border: 0; width: 100%; height: 100%; }
.player-message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: #080b10; color: var(--muted); z-index: 1; }
.player-message h2 { font-size: 22px; color: #f0f2f5; }
.player-message p { max-width: 500px; line-height: 1.6; }

dialog { border: 1px solid #676e76; border-radius: 9px; background: linear-gradient(#262e34, #1a2025); color: inherit; width: min(500px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; line-height: 1.65; box-shadow: 0 14px 50px #0009; }
dialog::backdrop { background: #000b; backdrop-filter: blur(4px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.dialog-heading h2 { margin: 0; font-size: 22px; }
.muted { color: var(--muted); font-size: 14px; }
noscript { display: block; text-align: center; padding: 30px; }
@container (max-width: 330px) { .card-tags .card-genre:nth-child(2) { display: none; } }
@container (max-width: 280px) { .card-heading h2 { font-size: 17px; } .card-heading h2 a { white-space: normal; } .card-bottom { gap: 8px; } .card-genre { font-size: 11px; padding: 4px 7px; } .play-button { min-width: 98px; padding: 9px 10px; font-size: 14px; } }
@media (min-width: 1001px) and (max-width: 1199px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1750px) { .site-header { gap: 44px; } .catalog-layout { gap: 30px; grid-template-columns: 230px minmax(0,1fr); } }
@media (max-width: 1250px) { .site-header { gap: 18px; padding: 0 26px; } .brand { font-size: 32px; } .brand-icon { width: 38px; height: 38px; } .nav-tab { padding: 0 16px; font-size: 16px; gap: 9px; } .header-motto { display: none; } .intro { flex-wrap: wrap; margin-bottom: 18px; gap: 12px; } .catalog-controls { margin-left: auto; } .catalog-layout { grid-template-columns: 192px minmax(0,1fr); gap: 22px; } .genre { gap: 13px; padding-left: 12px; font-size: 14px; } .game-grid { gap: 14px; } .card-body { padding: 7px 10px 12px; } }
@media (max-width: 1000px) { .catalog-layout { grid-template-columns: 1fr; padding: 16px 22px 26px; gap: 24px; } .sidebar { position: static; min-height: 0; border-radius: 8px; outline: none; padding: 12px; } .sidebar::before, .sidebar::after, .sidebar-motto, .sidebar-heading { display: none; } .genres { flex-direction: row; overflow-x: auto; padding: 3px; scrollbar-width: thin; scrollbar-color: #8e783e #191f24; gap: 8px; } .genre { width: auto; flex-shrink: 0; min-height: 48px; padding: 9px 13px; gap: 9px; } .genre svg { width: 22px; height: 22px; } .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .card-heading h2 { font-size: 20px; } .site-header { flex-wrap: wrap; padding: 14px 24px; gap: 12px; } .main-nav { margin-left: auto; align-self: center; } .nav-tab { min-height: 50px; } .search { order: 3; flex-basis: 100%; max-width: none; margin: 0; } .search input { height: 46px; } .intro { margin: 0 0 20px; } .intro h1 { font-size: 38px; } }
@media (max-width: 600px) { .site-header { padding: 12px 16px 14px; gap: 12px; } .brand { font-size: 27px; gap: 8px; letter-spacing: -1px; } .brand-icon { width: 32px; height: 32px; } .main-nav { gap: 0; } .nav-tab { font-size: 13px; gap: 6px; padding: 0 10px; min-height: 44px; } .nav-tab svg { width: 19px; height: 19px; } .nav-tab[aria-pressed="true"]::after { left: 10px; right: 10px; height: 3px; } .catalog-layout { padding: 14px 14px 22px; gap: 22px; } .intro h1 { font-size: 34px; letter-spacing: -1.2px; } .catalog-controls { width: 100%; gap: 9px; margin-top: 4px; } .game-count { font-size: 13px; } .sort-control { margin-left: auto; } .sort-control select { font-size: 12px; padding-left: 10px; padding-right: 30px; max-width: 154px; } .sort-control>span[data-icon] { right: 8px; } .view-controls { gap: 4px; } .view-button { width: 42px; } .game-grid { grid-template-columns: 1fr; gap: 18px; } .card-body { padding: 8px 14px 14px; } .card-heading h2 { font-size: 20px; } .card-tags { gap: 5px; } .card-genre { font-size: 12px; padding: 4px 8px; } .game-grid[data-view="list"] .game-card { grid-template-columns: 105px minmax(0,1fr); } .game-grid[data-view="list"] .game-cover { aspect-ratio: auto; height: 100%; min-height: 165px; } .game-grid[data-view="list"] .game-cover>a { top: 0; bottom: auto; height: 100%; width: 270px; left: -82px; } .game-grid[data-view="list"] .card-body { padding: 8px 10px 12px; } .game-grid[data-view="list"] .card-heading h2 { font-size: 15px; } .game-grid[data-view="list"] .card-description { font-size: 12px; line-height: 1.5; margin: 3px 0 10px; } .game-grid[data-view="list"] .card-bottom { flex-wrap: wrap; gap: 10px; } .game-grid[data-view="list"] .card-tags .card-genre:nth-child(2) { display: none; } .game-grid[data-view="list"] .play-button { padding: 8px 12px; min-width: 100px; font-size: 13px; } .player-header { gap: 8px; padding: 6px 8px; } .player-header h1 { font-size: 13px; } .player-header .button { padding: 8px; min-width: 44px; } .separate-button { display: none; } .back-button { font-size: 12px !important; } .player-actions { gap: 4px; } .site-footer { margin-top: 22px; font-size: 11px; } }
@media (max-width: 365px) { .brand { font-size: 23px; } .brand-icon { width: 27px; height: 27px; } .nav-tab { font-size: 12px; padding: 0 8px; } .nav-tab svg { width: 17px; height: 17px; } .catalog-controls { flex-wrap: wrap; } .sort-control select { max-width: 134px; } .view-button { width: 40px; } }
@media (max-height: 500px) { .player-header { padding: 4px 8px; } .player-header .button { min-height: 36px; } }
@media (prefers-reduced-motion: reduce) { .game-card { transition: none; } dialog::backdrop { backdrop-filter: none; } }

/* Game page and community */
.game-page-heading { margin: 0 0 14px; }
.game-page-heading h1 { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.2; margin: 0; letter-spacing: -1px; overflow-wrap: anywhere; }
.page-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.player-summary { display: flex; align-items: center; gap: 18px; min-width: 0; }
.description-genres { margin-bottom: 18px; }
.game-score { display: flex; align-items: center; gap: 8px; min-width: 0; }
.game-score strong { color: var(--accent); font-size: 23px; line-height: 1.1; white-space: nowrap; }
.game-score small { font-size: 15px; font-weight: 400; color: #aab3bd; }
.game-score>span { color: #aab3bd; font-size: 12px; }
#game-favorite svg { width: 19px; height: 19px; }
#game-favorite[aria-pressed="true"] { color: var(--accent); border-color: #a58c45; }
#game-favorite[aria-pressed="true"] svg { fill: currentColor; }
.player-shell { border: 1px solid #59626b; border-radius: 9px; overflow: hidden; box-shadow: 0 8px 24px #0004; }
.player-header { justify-content: space-between; flex-wrap: wrap; }
.development-label { color: #bac3cc; font-size: 12px; white-space: nowrap; }
#player-shell:fullscreen { display: flex; flex-direction: column; height: 100dvh; width: 100%; border: 0; border-radius: 0; background: #080b10; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#player-shell:fullscreen .game-stage { flex: 1; min-height: 0; height: auto; }
.game-details { margin-top: 26px; }
.detail-tabs { display: flex; gap: 6px; border: 1px solid #454e57; border-radius: 8px 8px 0 0; background: linear-gradient(#282f35, #20262b); overflow-x: auto; padding: 0 14px; scrollbar-width: thin; scrollbar-color: #8b7847 #1b2126; }
.detail-tabs>button { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 62px; padding: 14px 17px; white-space: nowrap; background: transparent; border: 0; color: #b8c1cc; font-size: 15px; }
.detail-tabs>button:hover { color: #fff1b8; }
.detail-tabs>button[aria-selected="true"] { color: var(--accent); }
.detail-tabs>button[aria-selected="true"]::after { content: ""; position: absolute; bottom: 0; height: 3px; left: 15px; right: 15px; background: var(--accent); }
.detail-tabs>button>span:not(:empty) { font-size: 11px; line-height: 1; border: 1px solid #5c6268; background: #ffffff07; border-radius: 12px; padding: 4px 7px; }
.detail-panel { border: 1px solid #454e57; border-top: 0; border-radius: 0 0 8px 8px; background: #1e252bcc; padding: 28px; min-width: 0; }
.detail-panel h2 { margin: 0 0 18px; font-size: 25px; letter-spacing: -.4px; }
.detail-panel h3 { margin: 0 0 12px; font-size: 17px; }
.detail-panel p { line-height: 1.7; }
.section-kicker { color: #c5ac66; text-transform: uppercase; font-size: 10px; letter-spacing: 1.8px; margin: 0 0 8px; }
.about-columns { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(230px,1fr); gap: 38px; }
.about-description { font-size: 17px; color: #d3dae2; margin-bottom: 26px; }
.game-facts { background: #151c2266; border: 1px solid #404b55; border-radius: 8px; padding: 22px; align-self: start; }
.game-facts dl { margin: 0; }
.game-facts dl>div { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid #38424b; font-size: 13px; }
.game-facts dl>div:last-child { border-bottom: 0; padding-bottom: 0; }
.game-facts dt { color: #aab5c0; }
.game-facts dd { margin: 0; text-align: right; }
.game-screenshot { margin-top: 20px; border-top: 1px solid #404a53; padding-top: 18px; }
.game-screenshot summary { color: #dbca96; cursor: pointer; font-size: 14px; padding: 6px 0; }
.game-screenshot img { width: min(100%, 760px); height: auto; margin-top: 15px; border: 1px solid #505b65; border-radius: 7px; }
.local-community-note { color: #b8c1cc; background: #cfa73f0c; border-left: 2px solid #a88d48; padding: 10px 14px; font-size: 12px; margin: -2px 0 24px; }
.discussion-columns { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,1fr); gap: 26px; align-items: start; }
.post-list { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.discussion-empty { border: 1px dashed #505d69; border-radius: 8px; padding: 36px 25px; text-align: center; color: #aab6c2; }
.discussion-empty>span { display: block; color: #8a7f5d; font-size: 30px; margin-bottom: 14px; }
.discussion-empty h3 { color: #e2e7ed; font-size: 18px; }
.discussion-empty p { margin: 0; font-size: 14px; }
.community-form { min-width: 0; display: flex; flex-direction: column; gap: 15px; border: 1px solid #48545f; border-radius: 8px; padding: 22px; background: #192128; }
.community-form h3 { margin: 0; font-size: 18px; }
.community-form label { display: flex; flex-direction: column; gap: 8px; color: #c0cad4; font-size: 12px; }
.community-form input, .community-form textarea, .community-form select { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #52606c; border-radius: 5px; background: #10181f; color: #f0f2f5; font: inherit; font-size: 14px; line-height: 1.5; }
.community-form input, .community-form select { min-height: 44px; }
.community-form textarea { resize: vertical; min-height: 80px; max-height: 500px; }
.community-form input::placeholder, .community-form textarea::placeholder { color: #8797a7; opacity: 1; }
.community-form .play-button { font-size: 14px; align-self: flex-start; white-space: normal; text-align: center; }
.form-hint { font-size: 12px; color: #abb8c4; margin: -4px 0 0; }
.community-post { min-width: 0; border: 1px solid #4b5863; padding: 20px; border-radius: 8px; background: linear-gradient(135deg, #2a333c, #202930); overflow-wrap: anywhere; }
.post-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: #9eafbe; font-size: 11px; margin: 0 0 10px; }
.post-meta strong { font-weight: 600; color: #dce3eb; font-size: 13px; }
.user-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; color: #d6dee7; margin: 10px 0 16px; }
.post-actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.post-actions button, .reply-notice button { border: 0; color: #cbbb88; background: transparent; padding: 5px 0; font-size: 12px; min-height: 36px; }
.post-actions button:hover, .reply-notice button:hover { color: #ffe9a5; }
.quoted-reply { font-size: 11px; line-height: 1.6; border-left: 2px solid #827957; padding: 8px 10px; background: #0c151b40; color: #aebcc9; margin-bottom: 12px; }
.is-reply { margin-left: 18px; }
.reply-notice { margin: 0; padding: 8px 12px; border-left: 2px solid #b69a4e; font-size: 12px; color: #c7d0da; }
.reply-notice button { margin-left: 10px; }
.idea-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.idea-filters .button { font-size: 12px; min-height: 40px; }
.idea-filters [aria-pressed="true"] { border-color: #b79c50; color: var(--accent); background: #3f3824; }
.idea-labels { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.idea-labels .post-meta { margin: 0; }
.entry-type { border: 1px solid #6c7852; background: #51673b24; border-radius: 20px; padding: 4px 10px; font-size: 11px; color: #c1d7a8; }
.entry-type.bug { border-color: #86604b; background: #8a4a2924; color: #ebbb9a; }
.post-actions .vote-button { border: 1px solid #5e6c78; background: #111b2244; padding: 4px 10px; border-radius: 5px; }
.post-actions .vote-button[aria-pressed="true"] { border-color: #b9a05c; color: var(--accent); }
.pros-cons-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.review-score { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.review-score>strong { font-size: 48px; color: var(--accent); line-height: 1; }
.review-score>span { color: #b5c1cd; font-size: 12px; line-height: 1.6; }
.review-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-top: 1px solid #48535e; padding-top: 18px; }
.review-pros-cons h3 { font-size: 13px; color: #b8d6a7; }
.review-pros-cons>div+div h3 { color: #e3b89c; }
.review-pros-cons .user-text { font-size: 12px; }
.community-status { color: #cfbc81; font-size: 12px; margin: 12px 0; }
.community-status:empty { display: none; }
.development-entry { margin: 24px 0 0 8px; position: relative; padding: 0 0 0 26px; border-left: 1px solid #7a704e; max-width: 760px; }
.development-entry .entry-marker { position: absolute; left: -5px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: #c7aa5c; }
.development-entry>p { font-size: 14px; }
.development-entry>.post-meta { font-size: 12px; color: #c9b26d; }
.more-games { margin-top: 30px; }
.more-games-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.more-games h2 { color: #e3e8ed; font-size: 22px; margin: 0; }
.more-games-heading>a { color: #d2bf83; font-size: 12px; padding: 10px 0; }
.more-games-heading>a:hover { color: var(--accent); }
.more-games-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.more-game { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #4c5863; border-radius: 8px; background: linear-gradient(140deg,#2a333b,#1e272e); box-shadow: 0 4px 12px #0003; transition: border-color .15s, box-shadow .15s; }
.more-game:hover { border-color: #bba25c; box-shadow: 0 6px 20px #0006; }
.more-game-cover { display: block; flex-shrink: 0; width: 100%; }
.more-game-info { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 13px 14px; min-width: 0; }
.more-game-info>strong { display: block; color: #eef1f5; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.more-game-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.more-game-meta>.card-genre { font-size: 11px; padding: 4px 8px; }
.more-game-play { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 5px 9px; color: #1a2025; background: #f4cb51; border: 1px solid #ffdd78; border-radius: 5px; font-size: 11px; font-weight: 700; }
.more-game-play svg { width: 13px; height: 13px; }
@media(min-width:1600px) { .more-games-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media(max-width:1199px) { .more-games-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } }
@media(max-width:700px) { .more-games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .more-game-info { padding: 10px; gap: 10px; } .more-game-info>strong { font-size: 14px; } .more-games h2 { font-size: 20px; } }
@media(max-width:500px) { .more-games-grid { gap: 10px; } .more-game-info { padding: 10px 8px; } .more-game-meta>.card-genre { font-size: 10px; padding: 4px 6px; } .more-play-label { display: none; } .more-game-play { padding: 5px 6px; } }
@media(prefers-reduced-motion:reduce) { .more-game { transition: none; } }
@media(max-width:1250px) { .player-summary { gap: 12px; } .detail-tabs { padding: 0 8px; } .detail-tabs>button { padding: 14px 12px; font-size: 13px; } }
@media(max-width:1000px) { .game-stage { height: clamp(200px, 56.25vw, 68dvh); } .about-columns { gap: 24px; } }
@media(max-width:700px) { .player-summary { gap: 8px; } .player-summary .development-label { display: none; } #game-favorite { padding: 8px; } #game-favorite>span:last-child { display: none; } .game-score { flex-direction: column; align-items: flex-start; gap: 2px; max-width: 75px; } .game-score strong { font-size: 18px; } .game-score>span { font-size: 10px; line-height: 1.2; } .game-score small { font-size: 11px; } .detail-panel { padding: 20px 16px; } .detail-panel h2 { font-size: 23px; } .discussion-columns, .about-columns { grid-template-columns: minmax(0,1fr); gap: 22px; } .community-form { padding: 18px; } .community-post { padding: 16px; } .discussion-empty { padding: 24px 18px; } .pros-cons-fields { grid-template-columns: 1fr; } .detail-tabs>button { min-height: 54px; } .player-header { flex-wrap: wrap; } .development-label { font-size: 10px; } .player-actions { gap: 4px; } .player-header .button { font-size: 11px; } }
@media(max-width:380px) { .player-header { justify-content: center; } .development-label { display: none; } }

.preview-notice { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px; background: #473c23; color: #f2e0aa; border-bottom: 1px solid #b4964f; font-size: 13px; }
.preview-notice p { color: #d3c49d; font-size: 12px; margin: 5px 0 0; }
.preview-notice .button { font-size: 12px; flex-shrink: 0; }
.news-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.development-entry+.development-entry { margin-top: 36px; }
.news-body { white-space: pre-wrap; overflow-wrap: anywhere; color: #d3dce6; }
.news-changes { margin: 16px 0 0; padding-left: 20px; color: #bdc9d5; font-size: 13px; line-height: 1.8; }
@media(max-width:600px) { .preview-notice { flex-direction: column; align-items: flex-start; padding: 14px; } }