.boot {
  background-color: #031b50;
  color: #6ddcff;
  background-image:
    linear-gradient(rgba(93, 190, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 190, 255, .08) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, #123f8a 0, #06265f 50%, #02143b 100%);
  background-size: 22px 22px, 22px 22px, 100% 100%;
  text-shadow: 0 0 8px rgba(81, 215, 255, .65);
}
.boot pre::after { content: "_"; animation: boot-cursor .45s steps(1,end) infinite; }
@keyframes boot-cursor { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.task-button { display: flex; align-items: center; gap: 5px; min-width: 0; }
.task-icon { flex: 0 0 22px; width: 22px; height: 22px; display: inline-grid; place-items: center; color: #fff; background: #000082; border: 1px outset #fff; font: bold 7px Arial; }
.task-icon-roms { color: #78f6ff; background: #15243a; }
.task-icon-services { color: #111; background: #f4bf3d; font-size: 13px; }
.task-icon-about { color: #000082; background: #fff; }
.task-icon-detail { color: #fff; background: #2872c9; }
.task-icon-links { color: #000082; background: #8ee8ff; }
.task-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#brand-typing { min-width: 8.5ch; font-family: "Lucida Console", Monaco, "Courier New", monospace; font-size: 38px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
#brand-typing::after { content: "_"; color: #6de3ff; animation: boot-cursor .55s steps(1,end) infinite; }
@media (max-width: 760px) { #brand-typing { min-width: 8.5ch; font-size: 27px; } }
.link-icon { color: #000082; background: #8ee8ff; border: 2px outset #fff; font: bold 23px Arial; }
.links-window { width: min(460px, calc(100vw - 30px)); left: 29%; top: 14%; }
.links-content { padding: 18px 22px 24px; background: #e7edf7; }
.links-path { margin: 0 -8px 18px; padding: 6px 8px; background: #fff; border: 2px inset #fff; font-size: 11px; }
.links-content h2 { margin: 0 0 15px; font: 900 25px Arial; }
.market-link { display: flex; align-items: center; gap: 13px; margin: 9px 0; padding: 10px; color: #111; background: #fff; border: 2px outset #fff; text-decoration: none; }
.market-link:hover,.market-link:focus { color: #fff; background: #000082; outline: 1px dotted #fff; outline-offset: -5px; }
.market-link > span { flex: 0 0 46px; height: 42px; display: grid; place-items: center; color: #fff; font: 900 17px Arial; background: #2475e8; border: 1px solid #173c7a; }
.market-link.ebay > span { color: #e53238; background: #fff; font-size: 30px; }
.market-link div { display: grid; gap: 3px; }
.market-link small { font-size: 9px; }
.links-note { margin: 18px 0 0; font-size: 9px; color: #555; }
@media (max-width: 760px) { .links-window { left: 4px!important; top: 4px!important; width: calc(100vw - 8px)!important; } }
.hero-window { width: min(570px, calc(100vw - 180px)); top: 28vh; right: 5vw; height: auto; max-height: calc(100vh - 90px); overflow: auto; }
.hero-window .welcome-content { padding: 24px 30px 22px; }
.hero-window .welcome-content h2 { font-size: clamp(30px, 4vw, 46px); margin: 12px 0 16px; }
@media (max-width: 760px) { .hero-window { top: 315px; width: calc(100vw - 32px); height: auto; max-height: calc(100vh - 370px); } .hero-window .welcome-content { padding: 18px; } }
.window { max-width: 100vw; max-height: calc(100vh - 42px); container-type: inline-size; }
.resize-handle { position: absolute; right: 1px; bottom: 1px; z-index: 12; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; background: repeating-linear-gradient(135deg,transparent 0 3px,#777 3px 5px); clip-path: polygon(100% 0,100% 100%,0 100%); }
.window.maximized .resize-handle { display: none; }
.app-window:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
.app-window > .titlebar,.app-window > .toolbar,.app-window > .service-intro { flex: 0 0 auto; }
.app-window > .listing-grid { flex: 1 1 auto; height: auto; min-height: 0; background-color: #c8d5e8; background-image: linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size: 18px 18px; }
@container (max-width: 540px) { .toolbar { flex-direction: column; } .listing-grid { grid-template-columns: 1fr!important; } .card-foot { align-items: flex-start; flex-direction: column; white-space: normal; } .detail-product-line { align-items: flex-start; flex-direction: column; } }
@media (max-width: 760px) { .resize-handle { width: 26px; height: 26px; } }

/* Paleta inspirowana klasycznym pulpitem Windows 95. */
.desktop {
  background-color: #008080;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 70% 35%, #10988f 0, #008080 42%, #006861 100%);
}
.boot {
  color: #8fffdc;
  background-color: #003f3f;
  background-image:
    linear-gradient(rgba(126,255,218,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,255,218,.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, #08766e 0, #004f4b 50%, #002e2e 100%);
  text-shadow: 0 0 8px rgba(90,255,210,.65);
}
.titlebar { background: linear-gradient(90deg, #004f4f, #008f83); }
.brand-mark,.mini-logo { background: #00a89c; }
#brand-typing::after { color: #8fffdc; }
.welcome-content { background: linear-gradient(135deg, #f5fff9, #d8eee7); }
.eyebrow,.stat-row b,.tag { color: #006d63; }
.btn.primary { background: #62d8b9; }
.listing-grid,.app-window > .listing-grid { background-color: #c7d9d4; }
.photo-placeholder { color: #285f58; border-color: #5c8c84; background: repeating-linear-gradient(135deg,#eaf4f1 0 8px,#dbe9e5 8px 16px); }
.service-intro { color: #075f58; }
.online-dot { background: #50ffc8; box-shadow: 0 0 8px #50ffc8; }
.counter-handle { background: #005b55; }
.counter-screen { background: #002f2c; color: #74ffd1; }
.counter-screen strong { text-shadow: 0 0 7px #50ffc8; }
.task-icon,.task-icon-links { background: #006c65; }
.task-icon-roms { color: #75ffd1; background: #16322e; }
.link-icon { color: #003f3a; background: #7be3c6; }
.market-link:hover,.market-link:focus,.start-items button:hover { background: #006b63; }
.link-icon { color: #5b2600; background: #ff9a32; border-color: #ffd08d #8a3e00 #8a3e00 #ffd08d; }
.task-icon-links { color: #512100; background: #ff9a32; }
.links-content { background-color: #c7d9d4; background-image: linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size: 18px 18px; }
.links-path { background: #eff8f5; border-color: #6f8e88 #fff #fff #6f8e88; }
.market-link { background: #edf6f3; border-color: #fff #70847f #70847f #fff; }
.links-note { color: #365b55; }
.task-icon-about { color: #000080; background: #fff; border-color: #fff #777 #777 #fff; }
.game-icon { color: #fff35c; background: #202820; border: 3px ridge #aaa; box-shadow: inset 0 0 0 3px #3e4a3e; font: 900 27px Arial; }
.game-icon::before,.game-icon::after { content: ""; position: absolute; left: -7px; right: -7px; height: 5px; background: repeating-linear-gradient(90deg,#c8c8c8 0 3px,transparent 3px 8px); }
.game-icon::before { top: 6px; }.game-icon::after { bottom: 6px; }
.task-icon-game { color: #fff35c; background: #202820; font-size: 12px; }
.task-icon-game { font-size: 0; }.task-icon-game::after { content: "ϟ"; font: 900 15px Arial; }
.game-icon { color: #52ffc0; background: #171d1a; border: 2px outset #aaa; box-shadow: none; font: 900 18px Arial; }
.game-icon::before,.game-icon::after { display: none; }
.task-icon-game::after { content: "▶"; color: #52ffc0; font-size: 12px; }
.brand > div { align-items: center; }
#brand-typing { display: flex; align-items: center; height: 42px; line-height: 42px; margin: 0; }
.boot pre { width: 31ch; max-width: calc(100vw - 32px); margin: 0; text-align: left; white-space: pre; overflow: visible; }
@media (max-width: 760px) { #brand-typing { height: 34px; line-height: 34px; } .boot pre { font-size: 12px; } }
.market-link > span { padding: 5px; overflow: hidden; background: #fff; }
.market-link > span img { display: block; width: 100%; height: 100%; object-fit: contain; }
.market-link.ebay > span { background: #fff; }
.about-window:not(.hidden) { display: flex; flex-direction: column; min-width: min(360px,100vw); min-height: min(310px,calc(100vh - 42px)); overflow: hidden; }
.about-window > .titlebar,.about-window > .notepad-menu,.about-window > .notepad-status { flex: 0 0 auto; }
.about-window > .notepad-page,.about-window article.notepad-page { flex: 1 1 auto; height: auto; min-height: 0; overflow: auto; }
.app-window { min-width: min(350px,100vw); min-height: min(350px,calc(100vh - 42px)); }
.app-window > .listing-grid { overflow: auto; }
.links-window { min-width: min(330px,100vw); min-height: min(280px,calc(100vh - 42px)); overflow: auto; }
.detail-window { min-width: min(330px,100vw); min-height: min(300px,calc(100vh - 42px)); }
@media (max-width: 760px) { .about-window:not(.hidden),.app-window,.links-window,.detail-window { min-width: 280px; } }
.window:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
.window > .titlebar { flex: 0 0 30px; width: 100%; }
.hero-window > .welcome-content,.links-window > .links-content,.game-window > .game-shell,.detail-window > #detail-content { flex: 1 1 auto; min-height: 0; width: 100%; overflow: auto; }
.hero-window { min-width: min(420px,100vw); min-height: min(330px,calc(100vh - 42px)); }
.app-window { min-width: min(440px,100vw); }
.app-window[data-window="roms"] { min-height: min(360px,calc(100vh - 42px)); }
.app-window[data-window="services"] { min-height: min(340px,calc(100vh - 42px)); }
.about-window { min-width: min(360px,100vw); min-height: min(300px,calc(100vh - 42px)); }
.links-window { min-width: min(340px,100vw); min-height: min(290px,calc(100vh - 42px)); }
.detail-window { min-width: min(360px,100vw); min-height: min(340px,calc(100vh - 42px)); }
.game-window { min-width: min(440px,100vw); min-height: min(400px,calc(100vh - 42px)); }
.detail-window #detail-content { max-height: none; }
.game-shell { background-color: #071a16; }
@media (max-width: 760px) { .hero-window,.app-window,.about-window,.links-window,.detail-window,.game-window { min-width: min(280px,100vw); } }
.game-window { width: min(720px, calc(100vw - 30px)); left: 22%; top: 8%; }
.game-shell { padding: 10px; color: #76ffd1; background: #071a16; }
.game-hud { display: flex; justify-content: space-between; margin-bottom: 7px; padding: 7px 10px; border: 1px solid #168b75; background: #002e27; font: 12px "Courier New"; }
.game-hud b { color: #ffd13d; }
#game-canvas { display: block; width: 100%; height: auto; max-height: calc(100vh - 220px); border: 2px inset #aaa; background: #031a16; image-rendering: pixelated; }
.game-message { min-height: 28px; padding: 7px 9px; color: #51ffb5; border-left: 1px solid #168b75; border-right: 1px solid #168b75; font: 11px "Courier New"; }
.game-controls { display: grid; grid-template-columns: 70px 1fr 70px; gap: 8px; }
.game-controls button { min-height: 38px; border: 2px outset #fff; background: #c0c0c0; font-weight: bold; touch-action: none; }
.game-controls .game-start { color: #fff; background: #00736a; }
.game-help { margin: 8px 0 0; text-align: center; font-size: 9px; color: #84ad9f; }
@media (max-width: 760px) { .game-window { left: 4px!important; top: 4px!important; width: calc(100vw - 8px)!important; } .game-shell { padding: 6px; } .game-controls { grid-template-columns: 58px 1fr 58px; } }

.credit-slot { position: relative; display: inline-grid; place-items: center; }
.credit-slot > button { position: relative; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px dashed #667; background: #e8e8e8; }
.credit-slot img { width: 16px; height: 16px; image-rendering: pixelated; }
.credit-slot > button::after { content: "PNG"; position: absolute; font: 6px Arial; color: #000082; pointer-events: none; }
.credit-tooltip { display: none; position: absolute; right: -42px; bottom: 29px; width: 158px; padding: 8px 10px; color: #111; background: #ffffdf; border: 1px solid #111; box-shadow: 2px 2px 0 rgba(0,0,0,.28); font: 11px/1.35 Arial; z-index: 150; }
.credit-tooltip::after { content: ""; position: absolute; right: 48px; bottom: -7px; width: 11px; height: 11px; background: #ffffdf; border-right: 1px solid #111; border-bottom: 1px solid #111; transform: rotate(45deg); }
.credit-slot:hover .credit-tooltip,.credit-slot:focus-within .credit-tooltip,.credit-slot.open .credit-tooltip { display: block; }
.credit-tooltip a { color: #000082; font-weight: bold; }
.detail-window { max-height: calc(100vh - 58px); top: 20px; overflow: hidden; }
.detail-window #detail-content { max-height: calc(100vh - 92px); overflow: auto; }
#rom-list { grid-template-columns: minmax(300px, 620px); align-content: start; }
#rom-list .listing-card { min-height: 470px; }
#rom-list .card-visual { height: 280px; }
#service-list { grid-template-columns: minmax(280px, 390px); align-content: start; }
#service-list .listing-card { min-height: 0; align-self: start; }
#service-list .card-body { flex: 0 0 auto; }
.service-price { color: #d64c1a; font: bold 16px Arial; white-space: nowrap; margin-top: 3px; }
.service-detail-price { margin: 8px 0 14px; font-size: 20px; white-space: nowrap; }

@media (max-width: 760px) {
  .detail-window { top: 4px; max-height: calc(100vh - 48px); }
  .detail-window #detail-content { max-height: calc(100vh - 82px); }
  #rom-list,#service-list { grid-template-columns: 1fr; }
  #rom-list .listing-card { min-height: 0; }
  #rom-list .card-visual { height: 210px; }
  .credit-tooltip { right: -35px; }
}

@media (max-width: 760px) {
  .counter-handle {
    cursor: move;
    touch-action: none;
  }

  .desktop-icon {
    touch-action: none;
  }
}