/* ==========================================================================
   kirtgittens.com — PS2-inspired shell
   Everything here is an original recreation of the *aesthetic*; no Sony
   assets, fonts, textures or audio are used.
   ========================================================================== */

:root {
  --ink:        #e6eefa;
  --blue:       #9ccdff;
  --blue-dim:   #5d86b5;
  --blue-deep:  #0a1b3d;
  --amber:      #ffd24a;
  --amber-dim:  #b8912c;
  --rule:       rgba(150, 200, 255, .45);
  --glow:       rgba(120, 190, 255, .55);

  --btn-cross:  #7fb4ff;
  --btn-circle: #ff7b7b;
  --btn-tri:    #7de4a8;
  --btn-square: #ff9ed2;

  /* Roboto carries the whole interface. The PS2-style face is reserved for
     the wordmark, where it reads as a logo rather than as text. */
  --ui:      Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui-body: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui-mark: "BTSE PS2", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@font-face {
  font-family: "BTSE PS2";
  src: url("/assets/fonts/btseps2.TTF") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  /* This face maps punctuation it has no outlines for (middot, en/em dash,
     curly quotes) to blank glyphs, which would silently swallow them. Limit
     it to the printable ASCII it actually draws so everything else falls
     through to the next font in the stack. */
  unicode-range: U+0020-007E;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* Painted by the compositor once, not rasterised into the canvas every
     frame. A full-screen radial gradient fill costs ~18ms on a 6MP canvas;
     as a CSS background it is effectively free. `vmax` matches the radius
     the canvas version used (max(W,H) * 0.72). */
  background:
    radial-gradient(circle 72vmax at 42% 48%,
      #0a2450 0%, #061634 30%, #030b1c 62%, #00030a 100%) fixed,
    #00030a;
  color: var(--ink);
  font-family: var(--ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body { cursor: default; }

a { color: var(--blue); }

/* --- background layers ---------------------------------------------------- */

#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  transition: opacity .5s var(--ease);
}
/* The grey plate above is fully opaque, so hide the canvas outright rather
   than compositing a saturate() filter over several million pixels of it. */
body[data-palette="card"] #bg { opacity: 0; }

/* The slow warm bloom that used to be a second full-screen gradient fill.
   As a transform animation it runs on the compositor and costs no frame time. */
#bloom {
  position: fixed;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle 42vmax at 50% 50%,
    rgba(48, 104, 200, .16) 0%, rgba(48, 104, 200, 0) 62%);
  animation: bloomDrift 48s ease-in-out infinite alternate;
  will-change: transform;
  transition: opacity .5s var(--ease);
}
@keyframes bloomDrift {
  0%   { transform: translate3d(-10%, -7%, 0) scale(1); }
  50%  { transform: translate3d(9%, 5%, 0) scale(1.12); }
  100% { transform: translate3d(-5%, 9%, 0) scale(1); }
}
body[data-palette="card"] #bloom { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #bloom { animation: none; }
}

#vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 45% 48%, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 72%, rgba(0,0,0,.82) 100%);
  transition: background .5s var(--ease);
}

/* the grey "system" backdrop used by the memory-card screens */
#plate {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease);
  background:
    radial-gradient(ellipse at 50% 38%, #8e9299 0%, #6f747c 45%, #4b4f56 78%, #2b2e33 100%);
}
body[data-palette="card"] #plate { opacity: 1; }

/* optional CRT treatment, toggleable in Settings */
#crt {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.20) 0px,
      rgba(0,0,0,.20) 1px,
      rgba(255,255,255,.012) 1px,
      rgba(255,255,255,.012) 3px
    );
}
body.crt #crt { opacity: 1; }

/* --- screen stack --------------------------------------------------------- */

#stage {
  position: relative;
  z-index: 10;
  height: 100%;
  width: 100%;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: scale(.985) translateY(10px);
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .35s;
  will-change: opacity, transform;
}
.screen.active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.screen.leaving-back { transform: scale(1.02) translateY(-6px); }

/* --- boot ----------------------------------------------------------------- */

#screen-boot {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 44px;
}
#screen-boot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 460px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,4,14,.82), rgba(0,4,14,0) 70%);
  pointer-events: none;
}
#screen-boot > *:not(.boot-note) { position: relative; }

.boot-mark {
  width: 116px;
  height: 116px;
  position: relative;
  animation: bootPulse 3.4s var(--ease) infinite;
}
.boot-mark i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(185, 225, 255, .9);
  box-shadow: 0 0 34px rgba(120, 190, 255, .55), inset 0 0 30px rgba(120, 190, 255, .22);
  transform: rotate(45deg);
}
.boot-mark i:nth-child(2) { inset: 20px; opacity: .6; animation: spinSlow 14s linear infinite; }
.boot-mark i:nth-child(3) { inset: 40px; opacity: .35; animation: spinSlow 9s linear infinite reverse; }

@keyframes bootPulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes spinSlow  { to { transform: rotate(405deg); } }

.boot-name {
  font-size: 13px;
  letter-spacing: .52em;
  text-transform: uppercase;
  color: rgba(190, 220, 250, .92);
  text-shadow: 0 0 18px rgba(0, 0, 0, .9), 0 2px 6px rgba(0,0,0,.8);
  margin: 0;
}

.boot-prompt {
  font-size: 14px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 20px rgba(0,0,0,.95), 0 2px 8px rgba(0,0,0,.9);
  margin: 0;
  animation: blink 1.5s steps(1, end) infinite;
}
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .12; } }

.boot-note {
  position: absolute;
  bottom: 26px;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(175, 205, 240, .7);
  text-shadow: 0 0 14px rgba(0,0,0,.9);
}

/* --- shared chrome -------------------------------------------------------- */

.sys-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 40px 0;
  flex: none;
}
.sys-head .mark {
  width: 15px;
  height: 15px;
  border: 1px solid var(--blue);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--glow);
  flex: none;
}
.sys-head .wordmark {
  font-family: var(--ui-mark);
  font-size: 19px;
  letter-spacing: .04em;
  color: #eef4ff;
  text-shadow: 0 1px 5px rgba(0,0,0,.7);
}
.sys-head .wordmark b { font-weight: 700; }
.sys-head .wordmark span { font-weight: 300; opacity: .8; }

.sys-rule {
  flex: none;
  height: 1px;
  margin: 14px 40px 0;
  background: linear-gradient(to right, rgba(150,200,255,0), var(--rule) 12%, var(--rule) 88%, rgba(150,200,255,0));
  box-shadow: 0 0 8px var(--glow);
}

.sys-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
}

.sys-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 14px 40px 22px;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(230, 238, 250, .8);
}
.sys-foot .hint { display: inline-flex; align-items: center; gap: 8px; }
.sys-foot .hint b { font-weight: 400; }

.glyph {
  /* Roboto has no U+25CB/U+25B3; the stack falls through for those */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 9px;
  line-height: 1;
  flex: none;
}
.glyph.cross  { color: var(--btn-cross); }
.glyph.circle { color: var(--btn-circle); }
.glyph.tri    { color: var(--btn-tri); }
.glyph.square { color: var(--btn-square); }

/* --- main menu ------------------------------------------------------------ */

#screen-main .sys-body { align-items: center; }

.menu-wrap { padding-left: 76px; }

.menu-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--amber);
  margin: 0 0 18px 14px;
  letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(255, 190, 60, .35), 0 2px 6px rgba(0,0,0,.65);
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  position: relative;
  padding: 9px 30px 9px 14px;
  font-size: 26px;
  font-weight: 500;
  color: var(--blue);
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  cursor: pointer;
  transition: color .16s var(--ease), transform .18s var(--ease);
  border-radius: 3px;
  user-select: none;
  white-space: nowrap;
}
.menu li::before {
  content: "";
  position: absolute;
  inset: 2px 0;
  border-radius: 3px;
  background: linear-gradient(to right, rgba(180, 220, 255, .30), rgba(180, 220, 255, .06) 78%, transparent);
  box-shadow: inset 0 0 0 1px rgba(200, 230, 255, .25), 0 0 22px rgba(120, 190, 255, .2);
  opacity: 0;
  transform: scaleX(.94);
  transform-origin: left center;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.menu li > span { position: relative; }
.menu li.sel {
  color: #fff;
  transform: translateX(6px);
}
.menu li.sel::before { opacity: 1; transform: none; }
.menu li .sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(160, 200, 240, .62);
  margin-top: 2px;
  opacity: 0;
  max-height: 0;
  transition: opacity .2s var(--ease), max-height .2s var(--ease);
}
.menu li.sel .sub { opacity: 1; max-height: 22px; }

.menu-clock {
  position: absolute;
  right: 48px;
  bottom: 30px;
  text-align: right;
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(160, 200, 245, .5);
  line-height: 1.7;
}
.menu-clock b { display: block; font-size: 24px; font-weight: 300; color: rgba(220,235,255,.78); letter-spacing: .04em; }

/* --- memory card browser -------------------------------------------------- */

body[data-palette="card"] .sys-rule { background: linear-gradient(to right, rgba(0,0,0,0), rgba(255,255,255,.35) 12%, rgba(255,255,255,.35) 88%, rgba(0,0,0,0)); box-shadow: none; }

.card-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 26px 44px 0;
  text-shadow: 0 2px 5px rgba(0,0,0,.55);
}
.card-head .slot { font-size: 17px; font-weight: 500; color: #f2f4f7; }
.card-head .free { font-size: 12px; color: rgba(240,244,250,.72); margin-top: 3px; letter-spacing: .04em; }
.card-head .title {
  text-align: right;
  font-size: 19px;
  font-weight: 700;
  color: var(--amber);
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.grid-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  padding: 10px 44px;
}

/* `margin: auto` centres the grid without the flexbox bug where
   `align-items: center` makes overflowing content unreachable. */
.grid {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 128px);
  gap: 20px 26px;
  justify-content: center;
}

.tile {
  position: relative;
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 4px;
  transition: transform .2s var(--ease);
}
.tile canvas {
  width: 104px;
  height: 104px;
  display: block;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.42));
  transition: transform .22s var(--ease), filter .22s var(--ease);
}
.tile.sel { transform: translateY(-4px); }
.tile.sel canvas {
  transform: scale(1.22);
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.5)) brightness(1.12);
}
/* the light pool under the selected save, as on the real browser */
.tile.sel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 96px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.78), rgba(255,255,255,.14) 45%, transparent 72%);
  pointer-events: none;
  animation: pool 2.6s ease-in-out infinite;
}
@keyframes pool { 0%,100% { opacity: .8; } 50% { opacity: 1; } }

.card-info {
  flex: none;
  height: 58px;
  padding: 0 44px;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0,0,0,.55);
}
.card-info .name { font-size: 17px; font-weight: 500; color: #fff; }
.card-info .meta { font-size: 12px; color: rgba(240,244,250,.7); letter-spacing: .1em; margin-top: 4px; text-transform: uppercase; }

body[data-palette="card"] .sys-foot { color: #f0f2f6; text-shadow: 0 2px 5px rgba(0,0,0,.55); }

/* --- content screens (detail / about / contact / settings) ---------------- */

.panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 0 10px;
}

.panel {
  width: min(760px, 100% - 88px);
  margin: 0 auto;
}

.panel h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--amber);
  margin: 0 0 4px;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.panel .kicker {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(160, 200, 245, .62);
  margin: 0 0 20px;
}
.panel p {
  font-size: 15px;
  line-height: 1.72;
  color: rgba(230, 238, 250, .9);
  margin: 0 0 15px;
}
.panel p a { text-decoration: none; border-bottom: 1px solid rgba(156, 205, 255, .45); }
.panel p a:hover { color: #fff; border-bottom-color: #fff; }

.spec {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border-top: 1px solid rgba(150, 200, 255, .18);
}
.spec li {
  display: flex;
  gap: 18px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(150, 200, 255, .18);
  font-size: 13px;
}
.spec li b {
  flex: none;
  width: 150px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(160, 200, 245, .6);
}
.spec li span { color: rgba(232, 240, 252, .95); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
  border: 1px solid rgba(150, 200, 255, .38);
  border-radius: 3px;
  background: rgba(120, 180, 255, .07);
  transition: all .18s var(--ease);
  cursor: pointer;
  font-family: inherit;
}
.btn:hover, .btn:focus-visible {
  color: #fff;
  border-color: rgba(210, 235, 255, .9);
  background: rgba(150, 200, 255, .2);
  box-shadow: 0 0 20px rgba(120, 190, 255, .25);
  outline: none;
}

/* settings rows */
.opts { list-style: none; margin: 0; padding: 0; }
.opts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 16px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .16s var(--ease);
}
.opts li.sel { background: linear-gradient(to right, rgba(180,220,255,.22), rgba(180,220,255,.04)); box-shadow: inset 0 0 0 1px rgba(200,230,255,.22); }
.opts li .label { font-size: 16px; color: var(--ink); }
.opts li .label small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(160,200,245,.55); margin-top: 3px; }
.opts li .val { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); flex: none; }

/* detail screen icon */
.detail-head { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.detail-head canvas { width: 92px; height: 92px; flex: none; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.detail-head .t h2 { margin-bottom: 2px; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 860px) {
  .menu-wrap { padding-left: 36px; }
  .menu-title { font-size: 24px; }
  .menu li { font-size: 21px; }
  .menu-clock { display: none; }
  .sys-head, .card-head { padding: 20px 22px 0; }
  .sys-rule { margin: 12px 22px 0; }
  .grid { grid-template-columns: repeat(3, 104px); gap: 14px 16px; }
  .tile { width: 104px; height: 104px; }
  .tile canvas { width: 86px; height: 86px; }
  .panel { width: calc(100% - 44px); }
  .sys-foot { gap: 18px; font-size: 12px; padding: 12px 18px 18px; }
  .spec li { flex-direction: column; gap: 3px; }
  .spec li b { width: auto; }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: repeat(2, 104px); }
  .card-head .title { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .screen { transition: opacity .15s linear; transform: none !important; }
}

/* keep keyboard users visible */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }