/* Overdrive City portal: classic box mural (coloured title bars, pixel labels) on top of site-pixel.css. */
:root {
  --pixel: 'Press Start 2P', monospace;
  --ink: #173448;
  --ink-soft: #3f5867;
  --box-line: #6f97a6;
}

/* ---------------------------------------------------------------- header: one logo (banner), status chip */
.topbar { justify-content: space-between; }
.main-nav { margin-left: 0; margin-right: auto; }
.online-chip { cursor: default; min-width: 0; }
.online-chip small { color: #c4d3dc; }

/* ---------------------------------------------------------------- legible small labels */
.eyebrow { font: 9px/1.6 var(--pixel); color: #2f6278; letter-spacing: 0; }
.hero-description { color: var(--ink-soft); }

/* ---------------------------------------------------------------- shorter hero + hotel view */
.hero { min-height: 0; padding-top: 30px; padding-bottom: 30px; margin-bottom: 16px; }
.hero h1 { font-size: clamp(38px, 5vw, 64px); margin: 18px 0 14px; }
.hero-actions { margin-top: 6px; }
.hero-actions .button { min-height: 54px; padding: 0 26px; font-size: 13px; }
.hero-alt-link { display: inline-block; margin-top: 14px; color: #2b6f8c; font: bold 13px Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.hero-alt-link:hover { color: #b5483b; }

.hotel-view .art-frame { position: relative; overflow: hidden; }
.hotel-slides { position: relative; aspect-ratio: 1.75; background: #17222d; }
.hotel-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s steps(6); }
.hotel-slide.is-active { opacity: 1; }
.hotel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.hotel-slide figcaption { position: absolute; left: 10px; bottom: 10px; padding: 7px 10px; color: #fff; background: #173448; border: 2px solid #fff; box-shadow: 2px 2px 0 #0b1a24; font: 8px/1.4 var(--pixel); }
.hotel-dots { display: flex; justify-content: center; gap: 8px; padding: 9px 0; background: #17222d; border-top: 3px solid #05080c; }
.hotel-dots button { width: 12px; height: 12px; padding: 0; border: 2px solid #05080c; background: #3d5566; box-shadow: 1px 1px 0 #05080c; cursor: pointer; }
.hotel-dots button[aria-selected="true"] { background: #f4bd54; }
.hotel-dots button:focus-visible { outline: 2px solid #71e4dc; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hotel-slide { transition: none; } }

/* ---------------------------------------------------------------- mural */
.portal-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 16px; margin-bottom: 26px; align-items: start; }
.portal-main, .portal-side { display: grid; gap: 16px; min-width: 0; }

.pbox { background: #fff; border: 2px solid var(--box-line); box-shadow: 3px 3px 0 #b5cbd0; color: var(--ink); }
.pbox-title { display: flex; align-items: center; gap: 9px; margin: 0; padding: 9px 12px; color: #fff; font: 10px/1.4 var(--pixel); text-shadow: 1px 1px 0 rgba(0, 0, 0, .45); border-bottom: 2px solid rgba(0, 0, 0, .35); }
.pbox-title img { width: 24px; height: 24px; image-rendering: pixelated; flex: 0 0 24px; }
.pbox-blue .pbox-title { background: linear-gradient(#3d9ac9, #2a77a3); }
.pbox-orange .pbox-title { background: linear-gradient(#f0a13b, #d27e17); }
.pbox-green .pbox-title { background: linear-gradient(#5bb96a, #3b9450); }
.pbox-red .pbox-title { background: linear-gradient(#d35466, #ad3346); }
.pbox-yellow .pbox-title { background: linear-gradient(#e9c043, #c99c19); color: #3b2a05; text-shadow: 1px 1px 0 rgba(255, 255, 255, .45); }
.pbox-body { padding: 14px; font: 14px/1.5 Arial, sans-serif; }
.pbox-loading { margin: 0; color: #6b8290; font: italic 13px Arial, sans-serif; }

/* news */
.news-list { display: grid; gap: 12px; }
.news-item { padding-bottom: 12px; border-bottom: 1px dashed #b9cdd3; }
.news-item:last-child { padding-bottom: 0; border-bottom: 0; }
.news-item header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.news-item header b { font: bold 16px Arial, sans-serif; color: #1f5f80; }
.news-item.is-latest header b:after { content: 'NOVO'; margin-left: 8px; padding: 2px 5px; color: #fff; background: #c33749; font: 7px var(--pixel); vertical-align: 2px; }
.news-item time { color: #6b8290; font: bold 11px Arial, sans-serif; white-space: nowrap; }
.news-item h4 { margin: 8px 0 2px; color: #b5483b; font: bold 12px Arial, sans-serif; text-transform: uppercase; }
.news-item ul { margin: 0; padding-left: 18px; }
.news-item li { margin: 2px 0; }
.news-item li::marker { color: #f0a13b; }

/* highlight */
.highlight { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.highlight-shot { display: block; width: 100%; aspect-ratio: 1.45; object-fit: cover; image-rendering: pixelated; border: 2px solid #173448; box-shadow: 2px 2px 0 #b5cbd0; }
.highlight-copy h3 { margin: 0 0 6px; font: bold 18px Arial, sans-serif; color: #1f5f80; }
.highlight-copy p { margin: 0 0 10px; }
kbd { padding: 1px 6px; border: 2px solid #173448; border-bottom-width: 3px; background: #f3f7f5; font: bold 12px Arial, sans-serif; }
.highlight-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.highlight-facts li { padding: 5px 8px; background: #fff3dc; border: 2px solid #e2b25d; font: 12px Arial, sans-serif; }
.highlight-facts b { color: #b5483b; }

/* buttons inside boxes */
.pbtn { display: block; width: 100%; padding: 10px 12px; text-align: center; color: #fff; border: 2px solid #1d4f2a; box-shadow: 2px 2px 0 #1d4f2a; font: 9px/1.4 var(--pixel); cursor: pointer; }
.pbtn-green { background: linear-gradient(#5bb96a, #3b9450); }
.pbtn:hover { filter: brightness(1.08); }
.pbtn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #1d4f2a; }
.pbtn:disabled { filter: grayscale(.6); cursor: wait; }
.pbtn-link { display: block; margin: 8px auto 0; padding: 4px; border: 0; background: none; color: #2b6f8c; font: bold 12px Arial, sans-serif; text-decoration: underline; cursor: pointer; }

/* login */
.login-box { display: grid; gap: 9px; }
.login-box label { display: grid; gap: 3px; color: var(--ink-soft); font: bold 12px Arial, sans-serif; }
.login-box input { width: 100%; padding: 7px 8px; border: 2px solid #8aabb4; background: #f6faf9; color: var(--ink); font: 14px Arial, sans-serif; }
.login-box input:focus { outline: 2px solid #f0a13b; outline-offset: 0; border-color: #2a77a3; }
.login-error { margin: 0; padding: 6px 8px; color: #8e1f2f; background: #fde5e8; border: 2px solid #d35466; font: bold 12px Arial, sans-serif; }
.login-links { margin: 2px 0 0; text-align: center; font: bold 12px Arial, sans-serif; }
.login-links a { color: #2b6f8c; text-decoration: underline; }

/* profile */
.profile-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 12px; }
.profile-avatar { display: grid; place-items: end center; height: 132px; background: radial-gradient(ellipse at 50% 88%, #cfe6c9 0 30%, transparent 31%), linear-gradient(#bfe3ef, #e9f5f2); border: 2px solid #8aabb4; }
.profile-avatar img { display: block; width: 88px; height: auto; image-rendering: pixelated; }
.profile-info b { display: block; font: bold 16px Arial, sans-serif; color: #1f5f80; overflow-wrap: anywhere; }
.profile-status { display: block; margin: 2px 0 8px; color: #6b8290; font: bold 11px Arial, sans-serif; }
.profile-status.is-online { color: #2f8a45; }
.profile-info dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin: 0; font: 13px Arial, sans-serif; }
.profile-info dt { color: #6b8290; }
.profile-info dd { margin: 0; font-weight: bold; text-align: right; }
.profile-plots { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.profile-plots:empty { display: none; }
.profile-plots li { padding: 3px 7px; background: #e6f3e2; border: 1px solid #8cc391; font: bold 11px Arial, sans-serif; }
.profile-card > .pbtn, .profile-card > .pbtn-link { grid-column: 1 / -1; }

/* ranking */
.ranking-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 10px; }
.ranking-tabs button { padding: 6px 2px; border: 2px solid #c98c95; background: #fbeef0; color: #8e1f2f; font: bold 11px Arial, sans-serif; cursor: pointer; }
.ranking-tabs button[aria-selected="true"] { background: #ad3346; border-color: #7e1f2f; color: #fff; }
.ranking-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ranking-list li:not(.pbox-loading) { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 6px; background: #f6faf9; border: 1px solid #d4e0e4; }
.ranking-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: bold 13px Arial, sans-serif; }
.ranking-list small { color: #3f5867; font: bold 12px Arial, sans-serif; }
.rank-pos { display: grid; place-items: center; height: 22px; color: #fff; background: #6b8290; border: 2px solid rgba(0, 0, 0, .3); font: 8px var(--pixel); }
.rank-1 { background: #e2a21b; }
.rank-2 { background: #9aa9b3; }
.rank-3 { background: #b9733e; }

/* tip of the day: speech bubble */
.tip-bubble { position: relative; margin: 0 0 6px; padding: 10px 12px; background: #fffbea; border: 2px solid #c99c19; font: 14px/1.45 Arial, sans-serif; }
.tip-bubble:after { content: ''; position: absolute; left: 22px; bottom: -10px; width: 14px; height: 10px; background: #c99c19; clip-path: polygon(0 0, 100% 0, 0 100%); }

/* gallery: five scenes fill the 3-column grid (wide card spans two rows) */
.screenshots-grid { grid-auto-rows: auto; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .portal-grid { grid-template-columns: 1fr; }
  .highlight { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr; }
  .main-nav { grid-column: 1; order: 2; }
  .online-chip { justify-self: center; }
  .hero { padding: 18px 12px; }
  .hero-actions .button { width: 100%; justify-content: center; }
  .pbox-title { font-size: 9px; }
  .pbox-body { padding: 12px; }
  .profile-card { grid-template-columns: 80px minmax(0, 1fr); }
  .profile-avatar { height: 112px; }
  .profile-avatar img { width: 72px; }
  .hotel-slide figcaption { font-size: 7px; }
}