:root {
  font-family:Arial,Helvetica,sans-serif;
  color:#252b24;
  background:#f7f5ef;
  font-synthesis:none;
  --green:#37553f;
  --line:#d8dbce;
  --muted:#70766a}
* {
  box-sizing:border-box}
body {
  margin:0}
.application-loading > .topbar, .application-loading > footer,
.world-application > .topbar, .world-application > footer,
.application-failed > .topbar, .application-failed > footer { display:none; }
.world-application { background:#283b36; }
.world-application #player { background:#f7f5ef; min-height:100vh; }
#application-loading { position:fixed; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#253b35; color:#eee8d6; }
#application-loading .brand-mark { color:#c7b68a; }
#application-loading h1 { font:48px Georgia,serif; letter-spacing:-1px; margin:15px; }
#application-loading p { font-size:13px; color:#ced1bf; }
#application-error { min-height:100vh; padding-top:18vh; padding-bottom:80px; background:#f7f5ef; }
#application-error h1 { font-size:48px; letter-spacing:-2px; }
#application-error-message { line-height:1.7; max-width:600px; }
#application-error a { display:inline-block; margin-left:24px; color:var(--green); font-size:13px; }
.world-original-link { display:inline-block; margin-top:20px; color:var(--muted); font-size:12px; }
#world-menu { background:#f0eee1; }
button,input {
  font:inherit}
button,a,input {
  outline-offset:5px}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid #bc6528}
button {
  cursor:pointer;
  border:1px solid var(--line);
  background:transparent;
  color:inherit;
  border-radius:7px;
  padding:13px 20px;
  font-size:14px;
  font-weight:600}
button:hover:not(:disabled) {
  background:#e8ecdf}
button:disabled {
  cursor:default;
  opacity:.45}
button.primary,.card-bottom button:not(:disabled) {
  background:var(--green);
  color:#fff;
  border-color:var(--green)}
button.primary:hover,.card-bottom button:not(:disabled):hover {
  background:#253d2c}
.text-button {
  border:0;
  padding:8px 0;
  font-size:13px;
  color:var(--muted)}
[hidden] {
  display:none!important}
.topbar {
  height:103px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(5.2vw,24px);
  gap:20px}
.brand {
  text-decoration:none;
  color:#252b24;
  font-weight:800;
  font-size:28px;
  letter-spacing:-1.5px;
  display:flex;
  align-items:center}
.brand-mark {
  font-size:36px;
  color:var(--green);
  padding-right:11px}
.brand-dot {
  color:#cd6b39}
.edition,.mono,.eyebrow,.pill,.game-state,footer {
  font:10px 'Courier New',monospace;
  letter-spacing:1px}
.edition {
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:14px}
.tiny-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#9ca28d;
  vertical-align:middle}
.green {
  background:#5a8159}
.profile-button {
  font-size:13px;
  font-weight:500;
  border-radius:30px;
  padding:10px 17px}
.profile-button span {
  padding-left:12px}
main {
  max-width:1360px;
  margin:0 auto;
  padding:0 5.2vw}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:390px;
  gap:40px;
  padding:52px 0}
.eyebrow {
  font-size:10px;
  font-weight:600;
  color:#65745c;
  letter-spacing:1.5px}
.eyebrow .tiny-dot {
  margin-right:9px}
h1 {
  font-size:64px;
  line-height:1.06;
  letter-spacing:-3.7px;
  font-weight:500;
  margin:23px 0 22px}
h1 span {
  color:#7e8873}
.intro-copy {
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
  margin:0}
.intro-note {
  padding:10px 20px 0;
  text-align:center;
  transform:rotate(3deg)}
.orbit {
  font-size:94px;
  color:#8e9d70;
  display:inline-block;
  line-height:1}
.intro-note p {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:19px;
  color:#657158;
  line-height:1.4}
.intro-note .mono {
  font-size:8px;
  color:#89907d}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  margin-bottom:24px;
  gap:15px}
.section-heading h2 {
  margin:0;
  font-size:17px;
  letter-spacing:-.3px;
  font-weight:500}
.section-heading h2 span {
  font:10px 'Courier New',monospace;
  margin-left:10px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:3px 5px;
  color:var(--muted)}
.section-heading p {
  font-size:11px;
  color:var(--muted);
  margin:0;
  max-width:50%;
  text-align:right}
.games {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px}
.game-card {
  border:1px solid #d6d8ca;
  border-radius:10px;
  overflow:hidden;
  background:#fbfaf6}
.game-art {
  height:276px;
  position:relative;
  overflow:hidden;
  padding:21px 23px}
.art-label {
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:2;
  font:8px 'Courier New',monospace;
  letter-spacing:1.2px}
.firered .game-art {
  background:#e1e5c5;
  color:#425d41}
.sma4 .game-art {
  background:#b7d4e1;
  color:#234d62}
.art-title {
  position:absolute;
  z-index:3;
  font-weight:900;
  line-height:.95;
  letter-spacing:-4px;
  font-size:55px;
  left:30px;
  top:94px;
  text-shadow:2px 2px 0 #ffffff40;
  transform:rotate(-3deg)}
.firered .art-title span {
  display:block;
  color:#ba5836}
.sma4 .art-title {
  font-size:40px;
  letter-spacing:-2px;
  top:82px;
  color:#fff3cd;
  text-shadow:3px 3px #a85c3d}
.sma4 .art-title span {
  display:block;
  font:12px 'Courier New',monospace;
  letter-spacing:4px;
  padding:14px 0;
  color:#234d62;
  text-shadow:none}
.art-caption {
  position:absolute;
  z-index:4;
  bottom:20px;
  left:23px;
  font:italic 12px Georgia,serif}
.pixel-sun {
  position:absolute;
  width:99px;
  height:99px;
  border-radius:50%;
  background:#eee4a3;
  right:72px;
  top:57px}
.land {
  position:absolute;
  width:450px;
  height:150px;
  transform:rotate(-23deg);
  background:#a3b279;
  right:-116px;
  bottom:-28px;
  border-radius:45px}
.land-front {
  background:#7b955f;
  bottom:-100px;
  right:-90px;
  width:460px}
.tree {
  position:absolute;
  width:60px;
  height:30px;
  background:#4c724f;
  right:88px;
  bottom:82px;
  box-shadow:10px -20px #4c724f,-10px -20px #4c724f,0 -40px #4c724f}
.tree:after {
  content:'';
  position:absolute;
  left:24px;
  top:30px;
  width:12px;
  height:30px;
  background:#69744b}
.tree-two {
  transform:scale(.65);
  right:19px;
  bottom:101px}
.cloud {
  position:absolute;
  top:70px;
  right:34px;
  width:72px;
  height:18px;
  background:#eff2da;
  box-shadow:14px -14px #eff2da;
  border-radius:2px}
.cloud-two {
  transform:scale(.6);
  right:185px;
  top:58px}
.pipe {
  position:absolute;
  right:55px;
  bottom:-10px;
  width:60px;
  height:101px;
  background:#759c63;
  border-left:9px solid #92b176;
  border-right:9px solid #4e7956}
.pipe:before {
  content:'';
  position:absolute;
  left:-16px;
  top:0;
  width:74px;
  height:25px;
  background:#759c63;
  border-left:9px solid #92b176;
  border-right:9px solid #4e7956;
  border-bottom:4px solid #4e7956}
.pipe-two {
  right:139px;
  height:58px;
  transform:scale(.75);
  bottom:-19px}
.coin {
  position:absolute;
  right:73px;
  top:105px;
  width:19px;
  height:25px;
  background:#f0cc63;
  border:4px solid #cd9d44;
  box-shadow:3px 3px #6893a580}
.coin-two {
  right:112px;
  top:85px}
.card-info {
  padding:23px 24px 17px}
.card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px}
.card-top .eyebrow {
  font-size:8px;
  margin:0;
  letter-spacing:1px}
.game-state {
  font-size:8px;
  letter-spacing:.5px;
  color:#8d7656}
.game-state.ready {
  color:#587147}
.card-info h3 {
  font-size:24px;
  font-weight:500;
  letter-spacing:-.7px;
  margin:14px 0 7px}
.game-subtitle {
  color:var(--muted);
  font-size:13px;
  margin:0}
.card-bottom {
  margin-top:23px;
  border-top:1px solid #e7e7dc;
  padding-top:17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:68px}
.card-bottom p {
  font-size:11px;
  line-height:1.5;
  max-width:66%;
  color:var(--muted);
  margin:0}
.card-bottom button {
  white-space:nowrap;
  border-radius:5px;
  padding:11px 17px;
  font-size:12px}
.card-bottom button span {
  margin-left:16px}
.qualification {
  font-size:10px;
  color:#8c917f;
  margin:9px 0 0}
.collection-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:14px 0 34px;
  gap:20px}
.collection-foot p {
  font-size:11px;
  color:var(--muted);
  line-height:1.5}
.collection-foot p .tiny-dot {
  margin-right:6px}
.workshop-note {
  padding:25px 0;
  display:flex;
  align-items:center;
  border-top:1px solid var(--line);
  gap:19px}
.workshop-icon {
  width:40px;
  height:40px;
  background:#e8ebde;
  border-radius:8px;
  display:grid;
  place-items:center;
  font-size:23px;
  color:#637651}
.workshop-note h3 {
  font-weight:500;
  font-size:14px;
  margin:0 0 7px}
.workshop-note p {
  font-size:12px;
  color:var(--muted);
  margin:0;
  line-height:1.6}
.pill {
  margin-left:auto;
  white-space:nowrap;
  font-size:8px;
  letter-spacing:.5px;
  color:#8a907f;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:20px}
footer {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  margin-top:29px;
  padding:23px 5.2vw;
  color:#858c7a;
  font-size:9px;
  letter-spacing:.6px}
.footer-star {
  margin-left:18px;
  font-size:14px;
  color:var(--green)}
#notice:empty {
  display:none}
#notice {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:#263e2d;
  color:#f7f5ef;
  border-radius:8px;
  box-shadow:0 5px 30px #263e2d22;
  padding:15px 22px;
  max-width:650px;
  width:max-content;
  font-size:13px;
  line-height:1.5;
  z-index:45}
/* Shared game menus: restrained surfaces, one accent and a clear action list. */
dialog {
  --line:#ffffff18;
  --muted:#a2aaa3;
  --green:#d4dfca;
  color:#edf0e9;
  background:#19201d;
  border:1px solid #ffffff1c;
  border-radius:10px;
  padding:30px;
  max-width:460px;
  max-height:calc(100dvh - 40px);
  width:calc(100% - 40px);
  box-shadow:0 18px 64px #00000038;
}
dialog::backdrop { background:#09100d80; backdrop-filter:blur(2px); }
dialog .eyebrow { color:#a8b3a8; letter-spacing:.08em; font-family:inherit; font-size:10px; }
dialog .close { color:#a2aaa3; }
dialog .close:hover { color:#edf0e9; background:#ffffff0a; }
/* Gamepad focus is programmatic; browsers may keep mouse modality after Menu
   was clicked, so :focus-visible alone hides the selected controller action. */
dialog button:focus, dialog a:focus, dialog input:focus-visible { outline:2px solid #bdcdb2; outline-offset:3px; }
dialog button:focus { background-color:#334337; }
dialog .dialog-actions { gap:2px; margin-top:24px; }
dialog .dialog-actions button {
  border:0; border-radius:4px; padding:14px; text-align:left;
  background:transparent; font-weight:400; font-size:14px;
}
dialog .dialog-actions button:hover:not(:disabled) { background:#ffffff09; }
dialog .dialog-actions button.primary {
  color:#e1ecd8; background:#d4dfca12; margin:0; border-left:2px solid #c9d7bd;
}
dialog .dialog-actions button.primary:hover:not(:disabled) { background:#d4dfca1d; }
dialog .dialog-actions button:focus { background:#334337; }
dialog .dialog-actions .danger { color:#dfa48e; }
dialog .controller-menu-hint { border-top:1px solid var(--line); padding-top:18px; margin-top:24px; font-size:11px; }
#world-menu { background:#19201d; }
#world-menu .world-original-link { font-size:11px; color:#88938b; margin-top:16px; }
#world-controller-status { display:none; }
#profile-dialog input { color:#edf0e9; background:#101713; border-color:#ffffff26; }
#profile-dialog input::placeholder { color:#7f8b82; }
#profile-dialog .avatars button { padding:8px 15px; background:transparent; border:1px solid #ffffff18; }
#profile-dialog .avatars button[aria-pressed=true] { border-color:#c9d7bd; background:#d4dfca12; }
#profile-dialog .primary { background:#d4dfca; color:#19201d; border-color:#d4dfca; }
#profile-dialog .primary:hover { background:#e1ead9; }
#profile-dialog .text-button, #profile-dialog .existing-profile { color:#a8b3a8; }
#profile-dialog #letters button { border-color:#ffffff18; }
/* Gamepad focus is programmatic, so browsers do not always match :focus-visible. */
#profile-dialog button:focus { outline:2px solid #bdcdb2; outline-offset:3px; }
#profile-dialog button:not(.primary):hover:not(:disabled) { background:#d4dfca1d; }
#name-case[aria-pressed=true] { background:#d4dfca12; border-color:#c9d7bd; }
/* Voice is a small HUD panel; keep the game visible while input is paused. */
#voice-button {
  display:flex; align-items:center; gap:9px; position:fixed; right:24px; bottom:24px; z-index:30;
  padding:10px 12px; border:1px solid #ffffff24; border-radius:6px; background:#19201de8;
  color:#edf0e9; font-size:12px; font-weight:400;
}
#voice-button svg { width:16px; height:16px; color:#b9c7b4; }
#voice-button kbd { border-color:#ffffff30; color:#bdc7bd; margin-left:5px; border-radius:50%; min-width:24px; height:24px; display:grid; place-items:center; padding:0; font-size:9px; }
#voice-button:hover:not(:disabled) { background:#27312a; }
body.application-loading #voice-button, body.application-failed #voice-button { display:none; }
body.exploring-neighborhood #voice-button { top:auto; bottom:90px; right:28px; }
body.playing-subgame #voice-button { top:12px; bottom:auto; right:128px; }
#voice-dialog { position:fixed; z-index:40; inset:auto 20px 24px; margin:0 auto; max-width:560px; width:calc(100% - 40px); padding:24px; }
#voice-button.voice-pending { border-color:#bdcdb2; }
#voice-button.voice-pending span::after { content:' · saving'; color:#bdcdb2; }
#voice-dialog::backdrop { background:#09100d36; backdrop-filter:none; }
.voice-caption { display:flex; align-items:center; gap:8px; color:#a8b3a8; font-size:11px; }
.voice-status-dot { width:6px; height:6px; border-radius:50%; background:#a7b99c; flex:none; }
#voice-dialog[data-state=recording] .voice-status-dot { background:#e9957c; }
#voice-dialog[data-state=error] .voice-status-dot { background:#e1aa72; }
#voice-time { margin-left:auto; color:#dce2d7; font-variant-numeric:tabular-nums; }
#voice-dialog #voice-title { font-size:25px; line-height:1.2; letter-spacing:-.7px; margin:14px 0 8px; }
#voice-dialog #voice-message { margin:0; font-size:13px; line-height:1.6; color:#a8b3a8; }
#voice-transcript { margin:20px 0 0; padding:18px 0 0; border:0; border-top:1px solid #ffffff18; color:#edf0e9; font-size:17px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; max-height:30dvh; overflow:auto; }
#voice-dialog .dialog-actions { display:flex; flex-direction:row; align-items:center; gap:8px; margin-top:22px; }
#voice-dialog .dialog-actions button { text-align:center; padding:10px 13px; width:auto; font-size:12px; white-space:nowrap; }
#voice-dialog #voice-cancel { color:#a8b3a8; margin-right:auto; padding-left:0; }
#voice-dialog .dialog-actions .primary { background:#d4dfca; color:#19201d; border:1px solid #d4dfca; font-weight:500; }
#voice-dialog .dialog-actions .primary:hover:not(:disabled) { background:#e1ead9; }
@media (max-width:540px) {
  dialog { padding:24px; }
  body.exploring-neighborhood #voice-button { right:20px; bottom:118px; }
  #voice-button { right:16px; bottom:16px; }
  body.playing-subgame #voice-button { right:112px; }
  #voice-dialog { inset:auto 12px 12px; width:calc(100% - 24px); padding:20px; }
  #voice-dialog #voice-title { font-size:23px; }
  #voice-dialog .dialog-actions button { font-size:11px; padding:10px; }
}
dialog h2 {
  font-weight:500;
  font-size:29px;
  letter-spacing:-1px;
  line-height:1.15;
  margin:19px 0 24px}
dialog p {
  font-size:13px;
  line-height:1.65;
  color:var(--muted)}
dialog label {
  display:block;
  font-size:12px;
  font-weight:600;
  margin:20px 0 10px}
dialog input {
  width:100%;
  padding:13px 15px;
  background:#fffef9;
  border:1px solid #bbc5af;
  border-radius:6px}
dialog .primary {
  display:flex;
  justify-content:space-between;
  width:100%;
  margin-top:23px}
.small {
  font-size:11px!important;
  margin:18px 0 0}
.close {
  position:absolute;
  top:15px;
  right:16px;
  border:0;
  font-size:22px;
  padding:3px 8px}
.avatars {
  display:flex;
  gap:12px}
.avatars button {
  font-size:28px;
  padding:11px 18px;
  background:#ebece0;
  border:2px solid transparent}
.avatars button[aria-pressed=true] {
  border-color:var(--green);
  background:#dde4d0}
.existing-profile {
  margin:0 6px 6px 0}
.dialog-actions {
  display:flex;
  flex-direction:column;
  gap:11px}
.dialog-actions .primary {
  margin-top:5px;
  display:block}
.danger {
  color:#9d4e33}
#letters {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px;
  margin-top:12px}
#letters button {
  padding:9px}
.name-voice-actions, .name-key-actions { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.name-voice-actions button { flex:1; }
.name-key-actions button { flex:1; padding:9px 7px; font-size:12px; }
#name-status { min-height:36px; margin:12px 0; }
#name-live { padding:10px; border-left:2px solid #c9d7bd; overflow-wrap:anywhere; }
#profile-review { padding-top:20px; }
#profile-review-avatar { font-size:44px; }
#profile-review-name { font-size:28px; overflow-wrap:anywhere; }
.player-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:30px 0}
.player-heading h1 {
  font-size:25px;
  letter-spacing:-1px;
  margin:8px 0 0}
.screen {
  background:#17251d;
  border-radius:12px;
  padding:25px;
  display:flex;
  justify-content:center;
  min-height:200px}
.screen canvas {
  image-rendering:pixelated;
  aspect-ratio:3/2;
  width:min(100%,calc((100vh - 300px)*1.5));
  height:auto;
  max-height:calc(100vh - 300px);
  object-fit:contain;
  background:#000}
.play-controls {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
  font-size:11px;
  color:var(--muted);
  padding:20px}
kbd {
  font-family:inherit;
  border:1px solid var(--line);
  border-radius:3px;
  padding:2px 5px;
  font-size:10px}
#session-status {
  text-align:center;
  font-size:12px;
  color:var(--muted)}
@media(min-width:1500px) {
  main {
  padding:0 40px}
.intro {
  min-height:425px}
.game-art {
  height:310px}
.art-title {
  top:105px}
}
@media(max-width:780px) {
  .edition,.intro-note {
  display:none}
.topbar {
  height:80px}
.brand {
  font-size:24px}
.intro {
  min-height:300px;
  padding:40px 0}
h1 {
  font-size:50px;
  letter-spacing:-3px}
.games {
  gap:15px}
.game-art {
  height:230px}
.art-title {
  font-size:43px;
  left:20px}
.sma4 .art-title {
  font-size:32px;
  left:20px}
.card-info {
  padding:18px}
.card-top {
  align-items:flex-start;
  flex-direction:column;
  gap:10px}
.card-info h3 {
  font-size:21px;
  min-height:50px}
.workshop-note .pill {
  display:none}
.card-bottom {
  flex-direction:column;
  align-items:stretch;
  gap:12px}
.card-bottom p {
  max-width:100%;
  min-height:34px}
.card-bottom button {
  width:100%}
.game-subtitle {
  min-height:32px}
.section-heading p {
  font-size:10px}
.tree-one {
  right:40px}
.pipe-one {
  right:25px}
.coin-one {
  right:44px}
.pixel-sun {
  right:40px}
.collection-foot {
  align-items:flex-start}
.collection-foot .text-button {
  white-space:nowrap}
.player-heading h1 {
  font-size:20px}
}
@media(max-width:540px) {
  .games {
  grid-template-columns:1fr}
.game-art {
  height:260px}
.art-title {
  font-size:58px;
  left:28px}
.sma4 .art-title {
  font-size:42px;
  left:28px}
.card-info h3,.game-subtitle {
  min-height:0}
.card-top {
  flex-direction:row;
  align-items:center}
.card-bottom {
  flex-direction:row;
  align-items:center}
.card-bottom p {
  max-width:65%;
  min-height:0}
.card-bottom button {
  width:auto}
.collection-foot {
  flex-direction:column;
  gap:0}
.section-heading p {
  max-width:45%}
.intro-copy {
  font-size:14px}
h1 {
  font-size:47px}
.profile-button {
  font-size:11px;
  padding:10px}
.topbar {
  gap:10px}
.brand-mark {
  padding-right:6px}
.avatars button {
  padding:8px 12px}
.screen {
  padding:10px}
.player-heading {
  align-items:flex-start}
.player-heading button {
  font-size:11px;
  padding:10px}
.play-controls {
  gap:12px}
.screen canvas {
  max-height:none;
  width:100%}
.pill {
  display:none}
footer {
  font-size:8px;
  gap:20px}
#notice {
  max-width:calc(100vw - 30px)}
}
@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important}
}


/* Give the initial FireRed adventure the full collection row. */
.neighborhood-card { display:grid; grid-template-columns:1fr 1.15fr; overflow:hidden; border:1px solid var(--line); border-radius:12px; margin:28px 0 38px; background:#f0eee4; }
.neighborhood-card-art { min-height:270px; position:relative; overflow:hidden; background:linear-gradient(160deg,#a8c1c2,#e1d6b6 68%,#687468 69%); }
.neighborhood-card-art span { position:absolute; left:25px; top:25px; font:600 34px/1 Georgia,serif; letter-spacing:-1px; color:#34453e; z-index:2; }
.neighborhood-card-art i { position:absolute; bottom:30px; width:19%; height:110px; left:5%; background:repeating-linear-gradient(90deg,transparent 0 16px,#414e4c 17px 22px,transparent 23px 32px),repeating-linear-gradient(0deg,#bfae92 0 20px,#e4d2ae 21px 25px); transform:skewY(-5deg); box-shadow:15px 12px 0 #8e8d78; }
.neighborhood-card-art i:nth-of-type(2) { left:26%; height:140px; }
.neighborhood-card-art i:nth-of-type(3) { left:47%; height:100px; }
.neighborhood-card-art i:nth-of-type(4) { left:68%; height:170px; }
.neighborhood-card-art i:nth-of-type(5) { left:89%; height:120px; }
.neighborhood-card-copy { padding:30px 36px; }
.neighborhood-card-copy h2 { font-size:30px; font-weight:500; letter-spacing:-1px; margin:12px 0; }
.neighborhood-card-copy p:not(.eyebrow) { font-size:13px; line-height:1.65; color:var(--muted); }
.neighborhood-card-copy button { margin-top:8px; }
.neighborhood-card-copy button span { margin-left:22px; }
.neighborhood-card-copy small { display:block; color:var(--muted); margin-top:13px; font-size:10px; }
.exploring-neighborhood { overflow:hidden; }
.exploring-neighborhood > .topbar, .exploring-neighborhood > footer { visibility:hidden; }
#neighborhood { position:fixed; inset:0; z-index:20; background:#899fa5; color:#fff9e9; font-family:Arial,Helvetica,sans-serif; }
.neighborhood-canvas { position:absolute; inset:0; }
.neighborhood-canvas canvas { display:block; width:100%; height:100%; outline:none; touch-action:none; cursor:grab; }
.neighborhood-canvas canvas:active { cursor:grabbing; }
.neighborhood-heading { position:absolute; top:34px; left:38px; pointer-events:none; isolation:isolate; text-shadow:0 1px 4px #12231ee6; }
.neighborhood-heading::before { content:""; position:absolute; inset:-16px -28px -12px -18px; z-index:-1; border-radius:12px; background:linear-gradient(100deg,#142820b8,#14282070 70%,transparent); }
.neighborhood-kicker { font:10px 'Courier New',monospace; letter-spacing:2px; }
.neighborhood-heading h1 { font:36px/1.05 Georgia,serif; letter-spacing:-1px; margin:11px 0 0; }
.neighborhood-heading h1 span { color:#f0f1e8; display:block; font:12px Arial,sans-serif; letter-spacing:.1px; margin-top:10px; opacity:.84; }
.neighborhood-input-status { font-size:10px; opacity:.8; margin-top:12px; }
#neighborhood button { color:#fff9e9; border:1px solid #ffffff40; background:#22322b8c; backdrop-filter:blur(10px); font-size:12px; font-weight:400; }
#neighborhood button:hover { background:#263c32dc; }
.neighborhood-return { position:absolute; right:32px; top:34px; z-index:4; }
.neighborhood-return span { margin-left:20px; }
.neighborhood-destination { position:absolute; top:100px; right:32px; padding:17px 19px; border:1px solid #edc08266; border-radius:8px; background:#27362be6; max-width:300px; pointer-events:none; }
.neighborhood-destination strong { display:block; margin:9px 0; font:21px Georgia,serif; }
.neighborhood-venue-map { position:absolute; right:32px; bottom:155px; width:220px; padding:11px; border:1px solid #d8d9ad55; border-radius:8px; background:#1b2c25ed; pointer-events:none; }
.neighborhood-venue-map svg { display:block; width:100%; margin:8px 0; border-radius:4px; }
.neighborhood-map-help { display:block; font-size:10px; line-height:1.5; color:#d2dccf; }
@media(max-width:760px) { .neighborhood-venue-map { right:16px; bottom:180px; width:160px; padding:8px; } .neighborhood-venue-map .neighborhood-kicker { font-size:8px; } }
.neighborhood-directions, .neighborhood-distance { display:block; font-size:11px; line-height:1.7; }
.neighborhood-distance { color:#f2c98b; }
.neighborhood-entry { position:absolute; left:50%; bottom:115px; transform:translateX(-50%); width:min(390px,calc(100% - 32px)); padding:22px; text-align:center; border:1px solid #e0bc7c88; border-radius:10px; background:#29382df0; box-shadow:0 10px 30px #17221866; }
.neighborhood-entry strong { display:block; font:27px Georgia,serif; margin:10px 0; }
.neighborhood-entry p { font-size:12px; line-height:1.6; margin:11px 0; }
.neighborhood-entry-message:empty { display:none; }
#neighborhood .neighborhood-enter { background:#efc78b; color:#2a382c; font-weight:600; margin-top:3px; }
#neighborhood .neighborhood-enter:hover { background:#ffe0ae; }
.neighborhood-enter kbd { margin-left:15px; border-color:#7d725a; }
.neighborhood-location { position:absolute; left:38px; bottom:40px; display:flex; gap:13px; align-items:center; text-shadow:0 2px 7px #152b20; pointer-events:none; }
.neighborhood-location-dot { width:10px; height:10px; border-radius:50%; border:2px solid #e4d7a8; box-shadow:0 0 0 5px #233a3144; }
.neighborhood-location strong { display:block; font-size:11px; letter-spacing:1.9px; }
.neighborhood-location div>span { display:block; font-size:10px; margin-top:7px; opacity:.75; }
.neighborhood-controls { position:absolute; right:32px; bottom:32px; display:flex; align-items:center; gap:15px; font-size:11px; padding:10px 13px; border-radius:8px; background:#1b2c2580; backdrop-filter:blur(9px); }
.neighborhood-controls kbd { font:10px Arial,sans-serif; border-color:#ffffff50; padding:3px 5px; margin-right:4px; }
#neighborhood .neighborhood-controls button { border:none; padding:7px 8px; background:transparent; backdrop-filter:none; font-size:11px; }
.neighborhood-overlay { position:absolute; inset:0; display:grid; place-items:center; background:#1a2a247a; backdrop-filter:blur(5px); z-index:3; }
.neighborhood-overlay>div { max-width:460px; margin:24px; text-align:center; }
.neighborhood-overlay h2 { font:38px Georgia,serif; letter-spacing:-1px; margin:18px 0; }
.neighborhood-message { font-size:14px; line-height:1.7; opacity:.85; }
#neighborhood .neighborhood-resume { margin-top:15px; background:#eee9d6; color:#273c32; padding:15px 25px; }
@media (max-width:850px) {
  .neighborhood-card { grid-template-columns:1fr; }
  .neighborhood-card-art { min-height:220px; }
  .neighborhood-heading { top:23px; left:22px; }
  .neighborhood-heading h1 { font-size:28px; }
  .neighborhood-return { top:22px; right:22px; }
  .neighborhood-destination { top:100px; right:20px; max-width:235px; padding:12px; }
  .neighborhood-controls { left:20px; right:20px; bottom:18px; justify-content:center; gap:8px; flex-wrap:wrap; }
  .neighborhood-location { left:24px; bottom:100px; }
}
.games.single-game {
  grid-template-columns: 1fr;
}
.games.single-game .game-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
}
.games.single-game .game-art {
  height: 320px;
}
.games.single-game .card-info {
  padding: 28px;
}
@media (max-width: 780px) {
  .games.single-game .game-card {
    grid-template-columns: 1fr;
  }
  .games.single-game .game-art {
    height: 260px;
  }
  .games.single-game .card-info {
    padding: 22px;
  }
}

/* Subgames occupy the viewport; preserve the GBA 3:2 image with letterboxing. */
body.playing-subgame { overflow:hidden; background:#080b0b; }
.playing-subgame > .topbar, .playing-subgame > footer { display:none; }
body.playing-subgame #player {
  position:fixed; inset:0; width:100%; max-width:none; height:100dvh;
  min-height:0; margin:0; padding:0; background:#080b0b;
}
.playing-subgame .screen {
  position:absolute; inset:0; margin:0; padding:0; border-radius:0;
  min-height:0; align-items:center; background:#080b0b;
}
.playing-subgame .screen canvas {
  flex:none; width:min(100vw, 150dvh); height:min(100dvh, 66.666667vw);
  max-height:none; aspect-ratio:3/2; object-fit:contain;
}
.playing-subgame .player-heading {
  position:absolute; z-index:1; top:12px; right:12px; left:12px;
  padding:0; margin:0; justify-content:flex-end; pointer-events:none;
}
.playing-subgame .player-heading > div { display:none; }
.playing-subgame .player-heading button {
  pointer-events:auto; background:#101918e6; color:#f3f1e6;
  border-color:#f3f1e640; padding:10px 13px; font-size:12px;
}
.playing-subgame .play-controls {
  position:absolute; z-index:1; bottom:12px; left:12px; right:12px;
  margin:0 auto; padding:9px 12px; width:fit-content; max-width:calc(100% - 24px);
  border-radius:6px; background:#101918e6; color:#f3f1e6;
  gap:12px; pointer-events:none; font-size:11px;
  animation:subgame-controls-hint 8s forwards;
}
.playing-subgame #session-status {
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
.controller-menu-hint { color:var(--muted); font-size:12px; line-height:1.6; }
@keyframes subgame-controls-hint { 0%,75% { opacity:1; } 100% { opacity:0; } }
/* Original sports share one broadcast shell, while each sport owns its field and camera. */
.playing-sports .screen { display:block; color:#f2f5ed; font-family:Arial,sans-serif; }
.playing-sports .screen canvas { width:100%; height:100%; aspect-ratio:auto; display:block; object-fit:fill; outline:none; }
.sports-stage { position:absolute; inset:0; }
.playing-sports .play-controls { display:none; }
.sports-broadcast { position:absolute; top:24px; left:28px; pointer-events:none; filter:drop-shadow(0 4px 15px #0005); }
.sports-live { display:block; font-size:10px; letter-spacing:2.5px; color:#d4e5e7; margin-bottom:8px; }
.sports-scoreboard { display:flex; align-items:stretch; background:#101f2cf2; border:1px solid #ffffff26; border-radius:7px; overflow:hidden; }
.sports-team { padding:12px 18px; font-size:12px; font-weight:800; letter-spacing:1px; border-bottom:3px solid #72e6cf; }
.sports-team.away { border-color:#ff896b; }
.sports-team small { display:block; font-size:8px; font-weight:400; color:#b5c4cb; margin-top:4px; letter-spacing:2px; }
.sports-score { align-self:center; min-width:88px; text-align:center; font-size:26px; letter-spacing:4px; font-variant-numeric:tabular-nums; }
.sports-scoreboard time { background:#e9efdd; color:#152b2a; font:700 18px monospace; display:flex; align-items:center; padding:0 14px; }
.sports-match-label { padding:7px 12px; background:#101f2cc9; width:fit-content; border-radius:0 0 5px 5px; font-size:11px; letter-spacing:.7px; }
.sports-banner { position:absolute; top:130px; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none; background:#0b1c29d9; border:1px solid #ffffff20; padding:9px 22px; border-radius:8px; max-width:75vw; }
.sports-banner .sports-label { display:none; }
.sports-banner h2 { font-size:19px; margin:0; color:#f6f3e9; letter-spacing:-.3px; }
.sports-banner p:empty { display:none; }
.sports-banner.sports-intro { top:42%; padding:30px 46px; transform:translate(-50%,-50%); box-shadow:0 16px 80px #0007; backdrop-filter:blur(10px); }
.sports-intro .sports-label { display:block; color:#82e9d3; font-size:11px; letter-spacing:3px; text-transform:uppercase; margin-bottom:12px; }
.sports-intro h2 { font-size:clamp(24px,3vw,40px); font-weight:800; }
.sports-intro p { font-size:13px; color:#c4d4d9; margin:12px 0 22px; }
.sports-start { pointer-events:auto; border:0; border-radius:5px; background:#b9f06b; color:#152a24; font-size:13px; font-weight:700; padding:13px 25px; }
.sports-start:hover { background:#ddffa8; }
.sports-bottom { position:absolute; bottom:15px; left:24px; right:24px; display:flex; flex-direction:column; align-items:center; pointer-events:none; gap:7px; }
.sports-meter { display:flex; align-items:center; gap:10px; padding:6px 13px; border-radius:4px; background:#0b1c29e6; font:9px monospace; letter-spacing:1px; }
.sports-meter progress { width:125px; height:7px; accent-color:#c5f275; border:0; }
.sports-context { font-size:12px; color:#e8f2e9; background:#0b1c29da; padding:7px 14px; border-radius:4px; text-align:center; }
.sports-context:empty { display:none; }
.sports-controls { font-size:10px; color:#bdcbd1; padding:6px 12px; background:#081723d9; border-radius:4px; text-align:center; line-height:1.6; }
.sports-athlete { display:flex; align-items:center; gap:16px; background:#081c29ed; padding:7px 12px; border-radius:5px; font:10px monospace; letter-spacing:1px; border-left:3px solid #70e4cf; }
.sports-athlete label { display:flex; align-items:center; gap:8px; color:#c0d6dc; }
.sports-athlete meter { width:85px; height:9px; }
.sports-skill-state { color:#b9f06b; min-width:84px; }
.sports-skill-hint { color:#e2edc6; font-size:12px; text-align:center; text-shadow:0 1px 4px #000; background:#0a1d29c9; padding:5px 10px; border-radius:4px; }
.sports-skill-hint:empty { display:none; }
.sports-power-value { min-width:30px; color:#b9f06b; text-align:right; }
.sports-meter { opacity:.68; transition:opacity .12s,box-shadow .12s; }
.sports-meter.charging { opacity:1; box-shadow:0 0 0 1px #b9f06b88,0 0 20px #b9f06b22; }
.sports-action { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; font:800 13px system-ui; letter-spacing:3px; color:#d6fff2; padding:7px 15px; border-radius:20px; background:#0b1f2bae; border:1px solid #82e6d377; opacity:0; }
.sports-action[data-kind=tackle],.sports-action[data-kind=denied] { color:#ffd6ac; border-color:#ff9d5588; }
.sports-action[data-kind=goal] { font-size:28px; color:#e4ff9c; }
.sports-radar { position:absolute; top:80px; right:16px; border:1px solid #b4decb33; border-radius:5px; overflow:hidden; pointer-events:none; box-shadow:0 4px 20px #0003; }
.sports-radar span { display:block; padding:4px 7px; font:8px monospace; letter-spacing:2px; color:#a9c6c5; background:#0b1d29dc; }
.sports-radar canvas { display:block; width:168px; height:104px; }
@media(max-width:900px) { .sports-radar { top:86px; right:12px; } .sports-radar canvas { width:126px; height:78px; } }
@media(max-width:550px) { .sports-radar { top:150px; right:8px; } .sports-radar canvas { width:105px; height:65px; } .sports-skill-hint { font-size:10px; } }
.sports-playbook { position:absolute; bottom:210px; left:50%; transform:translateX(-50%); display:flex; gap:9px; padding:9px; border-radius:9px; background:#102331e8; max-width:90%; }
.sports-playbook:empty { display:none; }
.sports-playbook button { background:#243c49; color:#e8f0ed; border:1px solid #6c899966; border-radius:5px; padding:12px 22px; font-size:13px; white-space:nowrap; }
.sports-playbook button[aria-pressed=true] { background:#b9f06b; color:#15302a; border-color:#dcffa6; }
.sport-card-art { background:linear-gradient(125deg,#102d3b,#22655f); padding:32px; min-height:210px; color:#e8f3e2; }
.football .sport-card-art { background:linear-gradient(125deg,#2b2440,#995d41); }
.sport-card-art span { font-size:10px; letter-spacing:2px; }
.sport-card-art h3 { font-size:36px; margin:28px 0 10px; }
@media(max-width:700px) {
  .sports-broadcast { top:65px; left:12px; }
  .sports-team { padding:8px 10px; font-size:10px; }
  .sports-score { font-size:22px; min-width:70px; }
  .sports-scoreboard time { font-size:15px; padding:0 9px; }
  .sports-banner:not(.sports-intro) { top:170px; }
  .sports-banner.sports-intro { width:85%; padding:24px; }
  .sports-bottom { bottom:10px; left:8px; right:8px; }
  .sports-playbook { bottom:220px; gap:4px; }
  .sports-playbook button { padding:10px 8px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .playing-subgame .play-controls { animation:none; }
}