/* Strays' Training Ground — premium central launcher, v5
   Only the main launcher is styled. Individual game files are untouched. */
:root {
  color-scheme: dark;
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  --bg: #090c13;
  --panel: #111724;
  --line: rgba(174, 201, 226, .12);
  --text: #eef5fb;
  --muted: #8998ac;
  --cyan: #65dcf0;
  --mint: #9debdc;
}
*,*::before,*::after { box-sizing: border-box; }
html,body { width:100%;height:100%;margin:0; }
body { background:var(--bg); color:var(--text); }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit;text-decoration:none; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:2px solid var(--cyan);outline-offset:4px; }
[hidden] { display:none !important; }
.app-shell { height:100dvh;min-height:0;display:flex;flex-direction:column; }

/* The top navigation is intentionally minimal. */
.topbar {
  flex:0 0 78px;height:78px;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:24px;padding:0 clamp(22px,4.3vw,84px);
  border-bottom:1px solid var(--line);background:rgba(9,12,19,.96);z-index:3;
}
.brand { display:inline-flex;align-items:center;gap:12px;justify-self:start;min-width:0; }
.brand-mark {
  display:grid;place-items:center;width:46px;height:46px;flex:none;
  font-size:28px;font-weight:900;font-style:italic;letter-spacing:-4px;padding-right:3px;
  border-radius:12px;border:1px solid rgba(124,217,234,.28);
  background:linear-gradient(145deg,#234b59,#102631 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 8px 26px rgba(3,8,15,.35);
  color:#e4fbff;
}
.brand-mark span,.brand-name span { color:var(--cyan); }
.brand-details { display:flex;flex-direction:column;gap:4px; }
.brand-name { font-size:18px;font-weight:850;letter-spacing:2.25px;line-height:1; }
.brand-subtitle { font-size:9px;font-weight:800;letter-spacing:2.1px;color:#7d94aa;white-space:nowrap; }
.topnav { display:flex;align-items:center;gap:36px;height:100%; }
.nav-link { display:grid;align-items:center;height:100%;position:relative;color:#8998aa;font-size:13px;font-weight:700;transition:color .18s; }
.nav-link:hover,.nav-link.active { color:#f4fbff; }
.nav-link.active::after { position:absolute;bottom:0;left:0;right:0;content:"";height:2px;background:var(--cyan);border-radius:2px;box-shadow:0 -4px 16px #65dcf06b; }
.topbar-right { display:flex;align-items:center;justify-content:end;gap:18px; }
.header-caption { font-size:10px;letter-spacing:1.8px;font-weight:800;color:#697d92; }
.module-count { display:flex;align-items:baseline;gap:9px;border-left:1px solid var(--line);padding-left:18px; }
.module-count strong { font-size:28px;font-weight:800;letter-spacing:-1px;color:#e5f9ff; }
.module-count span { font-size:9px;font-weight:800;letter-spacing:1.2px;color:#7f94a7; }

/* Dashboard */
.workspace { flex:1;min-height:0;min-width:0;position:relative;overflow:hidden;background:#090c13; }
.dashboard {
  height:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:#2c4256 transparent;
  background:radial-gradient(ellipse at 50% -35%,#1a2d3b55,transparent 60%),#090c13;
  scroll-behavior:smooth;
}
.dashboard-inner { max-width:1600px;margin:auto;padding:30px clamp(20px,4.3vw,84px) 34px; }
.hero {
  min-height:288px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.84fr);isolation:isolate;
  position:relative;overflow:hidden;border:1px solid #2a3848;border-radius:18px;
  background:linear-gradient(110deg,#182432 0%,#121c29 48%,#0f1422 100%);
  box-shadow:0 12px 50px #00000031,inset 0 1px 0 #ffffff0d;
}
.hero::before { content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(120deg,#ffffff04,transparent 40%),repeating-linear-gradient(0deg,transparent 0 35px,#f1f7ff02 36px); }
.hero::after { content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(180deg,#74d6e7,transparent 70%);opacity:.7; }
.hero-glow { position:absolute;z-index:-1;right:0;top:-70%;width:63%;height:210%;border-radius:50%;background:radial-gradient(ellipse,#37a0bf1a 0%,#4c6a9d0d 35%,transparent 65%);pointer-events:none; }
.hero-copy { position:relative;z-index:1;align-self:center;padding:23px 25px 26px clamp(26px,4vw,65px); }
.eyebrow { display:flex;align-items:center;gap:11px;margin:0;color:#a9c7d4;font-weight:800;font-size:10px;letter-spacing:1.7px; }
.eyebrow-line { display:block;height:2px;width:25px;border-radius:5px;background:#6cd9e8; }
.eyebrow-index { color:#597c93; }
h1 { font-size:clamp(42px,3.65vw,59px);font-weight:850;line-height:.99;letter-spacing:-2.7px;margin:15px 0 13px;color:#f5f9ff; }
h1 span { color:#8fdce9; }
.hero-description { font-size:13px;line-height:1.65;color:#abc0d0;max-width:470px;margin:0; }
.hero-actions { display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:18px; }
.primary-action { display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:45px;padding:0 19px;border:1px solid #8de1ea;border-radius:8px;background:#82ddec;color:#09141d;font-size:13px;font-weight:850;box-shadow:0 7px 24px #52b8cc1c;transition:transform .2s,background .2s,box-shadow .2s; }
.primary-action:hover { background:#b0edf3;transform:translateY(-2px);box-shadow:0 12px 32px #52b8cc31; }
.primary-action span { font-size:20px;font-weight:400; }
.hero-meta { color:#7893a9;font-size:11px;font-weight:700;letter-spacing:.2px; }
.hero-meta span { margin:0 8px;color:#47748a; }
/* Artwork is 100% CSS: no images, libraries or downloads required. */
.hero-art { position:relative;min-height:288px;display:grid;place-items:center;overflow:hidden; }
.art-grid { position:absolute;inset:0;opacity:.5;background-image:linear-gradient(#9edbff0b 1px,transparent 1px),linear-gradient(90deg,#9edbff0b 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 52% 50%,#000,transparent 75%); }
.art-ring { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;aspect-ratio:1; }
.ring-outer { width:350px;max-width:90%;border:1px solid #73b4cc1b;box-shadow:0 0 0 32px #5e99ad07,0 0 0 64px #5e99ad04; }
.ring-mid { width:264px;max-width:72%;border:1px dashed #85dce34d;transform:translate(-50%,-50%) rotate(15deg); }
.ring-inner { width:198px;max-width:52%;background:radial-gradient(circle at 35% 30%,#315c697a,#162b3b 65%,#112131);border:1px solid #72c7d14a;box-shadow:0 0 48px #59cfdf13,inset 0 0 48px #60c5d010; }
.art-cross { position:absolute;background:#77cad680; }
.art-cross-top,.art-cross-bottom { width:1px;height:20px;left:50%; }
.art-cross-top { top:15%; }.art-cross-bottom { bottom:15%; }
.art-cross-right,.art-cross-left { height:1px;width:20px;top:50%; }
.art-cross-right { right:16%; }.art-cross-left { left:16%; }
.art-monogram { position:relative;font-size:120px;font-weight:900;font-style:italic;color:#cef8fc;line-height:1;letter-spacing:-18px;padding-right:18px;text-shadow:0 0 35px #7ee2e847; }
.art-monogram span { color:#6cd3e4; }
.art-corner { position:absolute;color:#5f889c;font-size:9px;font-weight:800;letter-spacing:1.9px; }
.art-corner-top { right:27px;top:21px; }.art-corner-bottom { right:27px;bottom:20px; }

/* Library controls and game cards */
.library-section { padding-top:37px;scroll-margin-top:28px; }
.library-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:24px; }
.section-eyebrow { font-size:10px;font-weight:850;letter-spacing:1.6px;color:#82cbdb;margin:0 0 9px; }
.section-eyebrow span { margin:0 5px;color:#51778d; }
h2 { margin:0;font-size:clamp(25px,2.1vw,34px);font-weight:850;letter-spacing:-.8px;line-height:1.1; }
.heading-dot { color:#7ad9e8; }
.section-subtitle { margin:9px 0 0;color:#879bad;font-size:13px; }
.library-heading-mark { color:#4d6478;font-size:12px;letter-spacing:2px;font-weight:800;margin-bottom:7px; }
.library-tools { display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:17px; }
.filter-bar { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.filter-button { min-height:37px;display:flex;align-items:center;gap:9px;padding:0 15px;border:1px solid transparent;border-radius:7px;background:transparent;color:#8b9db0;font-size:12px;font-weight:800;transition:all .18s; }
.filter-button:hover { background:#16212f;color:#e3f7fa; }
.filter-button.active { border-color:#356174;background:#1a3543;color:#baf1f8;box-shadow:inset 0 1px 0 #ffffff0c; }
.filter-button span { font-size:10px;color:#83d3df; }
.search-field { display:flex;align-items:center;gap:11px;width:min(290px,100%);height:43px;padding:0 14px;border-radius:8px;border:1px solid #2a3c50;background:#101824;color:#8ca2b7;transition:border-color .18s; }
.search-field:focus-within { border-color:#62c5d8; }
.search-field svg { width:16px;height:16px;flex:none; }
.search-field input { width:100%;min-width:0;border:0;outline:none;color:#eef5fb;background:transparent;font-size:12px; }
.search-field input::placeholder { color:#72879d; }
.search-field kbd { padding:2px 6px;border:1px solid #36495b;border-radius:4px;color:#71899d;font-size:10px;font-family:"Manrope","Segoe UI",Arial,sans-serif; }
.results-row { padding:13px 2px 13px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff14;color:#74889c;font-size:9px;font-weight:850;letter-spacing:1.6px; }
.results-row b { color:#b1dce6;font-weight:850; }
.games-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px; }
.game-card { --accent:#65dcf0;--tint:rgba(76,192,218,.13);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:179px;text-align:left;padding:20px 21px 17px;border-radius:13px;border:1px solid rgba(152,186,214,.15);background:linear-gradient(142deg,#171f2c 0%,#121923 67%,#101722 100%);color:var(--text);transition:transform .2s,border-color .2s,box-shadow .2s,background .2s; }
.game-card::before { content:"";position:absolute;right:-59px;top:-72px;width:205px;height:205px;background:radial-gradient(circle,var(--tint),transparent 67%);pointer-events:none;transition:transform .3s,opacity .3s; }
.game-card::after { content:"";position:absolute;left:0;bottom:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .22s; }
.game-card:hover,.game-card:focus-visible { transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 48%,#26394a);box-shadow:0 18px 38px #0005,0 0 30px var(--tint); }
.game-card:hover::before { transform:scale(1.25); }
.game-card:hover::after,.game-card:focus-visible::after { opacity:.82; }
.game-card[data-category="Reflex"] { --accent:#9eabf7;--tint:rgba(146,153,249,.16); }
.game-card[data-category="Memory"] { --accent:#c5a2ef;--tint:rgba(178,129,236,.14); }
.game-card[data-category="Puzzles"] { --accent:#9cdcc0;--tint:rgba(119,204,155,.14); }
.card-top { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:relative; }
.game-icon { display:grid;place-items:center;height:48px;width:48px;flex:none;font-size:23px;border-radius:11px;border:1px solid color-mix(in srgb,var(--accent) 31%,transparent);background:color-mix(in srgb,var(--accent) 12%,#17202b); }
.card-index { color:#6a8196;font-size:11px;letter-spacing:1px;font-weight:850; }
.card-title { display:block;position:relative;margin-top:17px;font-size:17px;font-weight:850;line-height:1.15;letter-spacing:-.2px;overflow-wrap:anywhere; }
.card-description { display:block;position:relative;margin-top:6px;font-size:12px;color:#879db0;line-height:1.4; }
.card-bottom { margin-top:auto;padding-top:15px;display:flex;justify-content:space-between;align-items:center;gap:7px; }
.card-category { display:inline-flex;align-items:center;gap:7px;color:#9cafbd;font-size:9px;letter-spacing:1.25px;font-weight:850;text-transform:uppercase; }
.card-category::before { content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.9; }
.card-launch { display:flex;align-items:center;gap:7px;color:#c9e3ea;font-size:10px;font-weight:850;letter-spacing:1.1px; }
.card-launch span { color:var(--accent);font-size:20px;line-height:1; }
.no-results { padding:48px 14px;text-align:center;border:1px dashed #355166;border-radius:11px;background:#101925; }
.no-results > span { font-size:40px;color:var(--cyan); }
.no-results h3 { margin:4px 0;font-size:19px; }.no-results p { color:var(--muted);font-size:13px; }
.no-results button { margin-top:8px;padding:10px 17px;border:1px solid #498394;border-radius:8px;background:#1b3a48;color:#c6f2f8; }
.dashboard-footer { padding:28px 0 10px;display:flex;justify-content:space-between;gap:15px;color:#536a7d;font-size:10px;letter-spacing:1.1px;font-weight:800; }
.dashboard-footer span { color:#536a7d; }

/* Gameplay is deliberately preserved from the previous auto-fitting launcher. */
.play-state{display:none}
body.is-playing{overflow:hidden;background:#050a10}
body.is-playing .app-shell{height:100dvh}
body.is-playing .topbar,body.is-playing .dashboard{display:none !important}
body.is-playing .workspace{height:100dvh;flex:1;overflow:hidden;background:#050a10}
body.is-playing .play-state,body.is-playing .play-state:fullscreen{display:block !important;position:fixed;inset:0;z-index:50;width:100%;height:100dvh;max-width:none;margin:0;padding:0;background:#050a10;overflow:hidden}
body.is-playing .frame-shell{position:absolute;top:52px;right:0;bottom:0;left:0;width:100%;height:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:#060b12;overflow:hidden}
body.is-playing #game-frame{position:absolute;display:block;top:50%;left:50%;width:100%;height:100%;min-height:0;max-width:none;max-height:none;transform:translate(-50%,-50%) scale(1);transform-origin:center center;border:0;border-radius:0;background:#060b12}
body.is-playing .game-toolbar{position:absolute;top:9px;left:10px;right:10px;z-index:55;min-height:0;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
body.is-playing .current-game{display:none}
body.is-playing .toolbar-actions{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:8px;pointer-events:none}
body.is-playing .toolbar-button{min-height:32px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 12px;border:1px solid #4b7081b3;background:#0b1721ed;color:#d4e9ef;border-radius:7px;box-shadow:0 4px 14px #0004;backdrop-filter:blur(10px);pointer-events:auto;font-size:11px;font-weight:700}
body.is-playing .toolbar-button:hover{background:#1b3644;color:white}
body.is-playing .toolbar-button svg{width:16px;height:16px;flex:0 0 16px}
body.is-playing .return-button{order:-1;margin-right:auto;background:#0e2b35ed;color:#98e9f1}

@media(max-width:1250px) { .games-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .hero { grid-template-columns:minmax(0,1fr) minmax(300px,.7fr); } .hero-art { min-height:270px; } }
@media(max-width:970px) { .topbar { grid-template-columns:1fr auto; }.topnav { display:none; }.hero { grid-template-columns:1fr minmax(240px,.7fr); }.hero-copy { padding-left:27px; }.hero-art { min-height:280px; }.library-tools { align-items:flex-start; }.search-field { width:100%;max-width:430px; } }
@media(max-width:740px) { .dashboard-inner { padding:17px 16px 25px; }.topbar { height:68px;flex-basis:68px;padding:0 16px; }.brand-mark { width:40px;height:40px;font-size:25px; }.brand-name { font-size:16px; }.brand-subtitle { font-size:8px; }.header-caption { display:none; }.module-count strong { font-size:22px; }.hero { min-height:0;grid-template-columns:1fr; }.hero-copy { padding:34px 24px 31px; }.hero-art { position:absolute;right:-90px;top:12px;width:300px;height:260px;min-height:0;opacity:.28;pointer-events:none; }.hero-copy { z-index:1; }.hero-description { max-width:370px; }.hero-actions { gap:15px; }.library-section { padding-top:29px; }.library-heading { margin-bottom:18px; }.library-heading-mark { display:none; }.games-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.game-card { min-height:176px;padding:17px; }.card-title { font-size:15px; } .library-tools { gap:12px; } }
@media(max-width:480px) { .topbar-right { gap:8px; }.module-count { padding-left:10px; }.module-count span { font-size:8px; }.eyebrow { font-size:8px;letter-spacing:1px; }.eyebrow-line { width:15px; }.hero { border-radius:13px; }.hero-copy { padding:30px 20px 27px; } h1 { font-size:clamp(37px,10vw,53px);letter-spacing:-1.9px; } .hero-description { font-size:12px; }.hero-meta { font-size:10px; }.hero-art { opacity:.17;right:-105px; }.primary-action { min-height:42px;gap:11px; }.section-eyebrow { font-size:9px; }.section-subtitle { font-size:12px; }.filter-bar { gap:5px; }.filter-button { min-height:34px;padding:0 10px;font-size:11px; }.search-field { height:40px; }.game-card { min-height:171px;padding:14px 13px 12px; }.game-icon { height:41px;width:41px;font-size:20px; }.card-title { font-size:14px; }.card-description { font-size:11px; }.card-category { letter-spacing:.4px;font-size:8px; }.card-launch { font-size:9px;gap:3px; } body.is-playing .frame-shell{top:48px}body.is-playing .game-toolbar{top:6px;left:7px;right:7px}body.is-playing .toolbar-actions{gap:5px}body.is-playing .toolbar-button{padding:7px 9px}body.is-playing .toolbar-button span{display:none} }
@media(max-width:350px) { .games-grid { grid-template-columns:1fr; }.game-card { min-height:143px; }.hero-meta { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important;transition:none !important;animation:none !important; } }


/* v5: distinctive headline typography + home screen fullscreen control */
:root { --display-font: "Outfit", "Manrope", "Segoe UI", sans-serif; }
.brand-name, .brand-mark, h1, h2, .card-title,
.module-count strong, .art-monogram, .no-results h3 {
  font-family: var(--display-font);
}
.brand-name { font-weight:800; letter-spacing:1.65px; }
h1 { font-weight: 750; letter-spacing:-2.35px; line-height:1.03; }
h2 { font-weight:750; letter-spacing:-.95px; }
.card-title { font-weight:750; letter-spacing:-.33px; }
.module-count strong { font-weight:750; }
.primary-action, .filter-button, .nav-link { font-weight:750; }
.hero-description, .card-description, .section-subtitle { font-weight:500; }

/* Browser fullscreen from the home screen, independent of the game viewer. */
.home-fullscreen {
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:39px;padding:0 15px;margin-left:2px;
  border:1px solid rgba(123,184,207,.29);border-radius:9px;
  background:linear-gradient(135deg,#1a2836,#111d2a);
  color:#cfeaf0;font-family:var(--display-font);font-size:12px;
  font-weight:650;letter-spacing:.15px;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.home-fullscreen:hover {
  background:linear-gradient(135deg,#244455,#152b3b);
  border-color:rgba(123,223,237,.57);color:#f7feff;
  transform:translateY(-1px);box-shadow:0 6px 20px #0710188a;
}
.home-fullscreen svg {height:16px;width:16px;flex:none;}
.home-fullscreen .fullscreen-collapse {display:none;}
.home-fullscreen[aria-pressed="true"] .fullscreen-expand {display:none;}
.home-fullscreen[aria-pressed="true"] .fullscreen-collapse {display:block;}
.home-fullscreen[aria-pressed="true"] {border-color:#63b4c6;background:#1c3a49;color:#d1f7fa;}
body.is-playing .home-fullscreen {display:none;}
@media (max-width:970px) {
  .topbar { gap:12px; }
  .topbar-right {gap:12px;}
}
@media (max-width:740px) {
  .home-fullscreen { min-height:36px;width:37px;padding:0;margin:0; }
  .home-fullscreen .fullscreen-label { display:none; }
  .topbar-right { gap:10px; }
}
@media(max-width:360px) {
  .brand-details {gap:3px;}
  .brand-name {font-size:14px;letter-spacing:.9px;}
  .brand-subtitle {letter-spacing:1px;}
  .module-count {gap:4px;}
  .module-count strong {font-size:18px;}
}