/* seanrassa.com: see STYLE-GUIDE.md for where each choice came from */

:root {
  /* PL-8 Sunset arcade */
  --panel: #2b1055;
  --ink: #ffffff;
  --head: #ff6ec7;
  --link: #fdf500;
  --edge: #ff9a00;
  --btn: #7597de;
  --btn-ink: #000000;
  --led: #ff9a00;
  --sel-bg: #00ff00;
  --sel-fg: #000000;
  --shadow: rgba(0, 0, 0, .55);
  --gold: #ffd700;

  --font-body: 'Press Start 2P', monospace;
  --font-size: 11px;
  --font-lcd: VT323, monospace;
  --font-comic: 'Comic Sans MS', 'Comic Neue', cursive;

  --col: 760px;
}

* { box-sizing: border-box; }
::selection { background: var(--sel-bg); color: var(--sel-fg); }
html { -webkit-text-size-adjust: 100%; background: #000014; }
body {
  margin: 0; padding: 20px 16px 140px; min-height: 100vh;
  background-color: #000014; image-rendering: pixelated;
  color: var(--ink); font: var(--font-size)/1.9 var(--font-body);
}
.cur-on, .cur-on * { cursor: var(--cur) !important; }
img { max-width: 100%; }

/* calm mode: freeze all motion */
html.calm *, html.calm *::before, html.calm *::after { animation-play-state: paused !important; }

/* tiled background drift (tile size set by JS) */
[data-anim=drift] { animation: drift 40s linear infinite; }
@keyframes drift { to { background-position: calc(var(--tw) * 4) calc(var(--th) * 4); } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 2000; background: var(--link); color: #000; padding: 8px; }

/* ---------------- shrine column ---------------- */
.shrine { max-width: var(--col); margin: 0 auto; }
.panel {
  background: var(--panel); border: 4px ridge var(--edge); padding: 20px;
  box-shadow: 8px 8px 0 var(--shadow);
}
.site-head { text-align: center; margin-bottom: 18px; }
.site-title { margin: 6px 0 14px; font-size: 22px; font-weight: normal; line-height: 1.4; }
.site-title a { color: inherit; text-decoration: none; }
.site-title a:hover { animation: none; }

/* BN-6 rainbow wave letters */
.wave span { display: inline-block; animation: wave 1.2s ease-in-out infinite, rbw 2s linear infinite; animation-delay: calc(var(--i) * -.12s); }
@keyframes wave { 50% { transform: translateY(-10px); } }
@keyframes rbw { 0%,100% { color: #f00; } 17% { color: #ff0; } 33% { color: #0f0; } 50% { color: #0ff; } 67% { color: #66f; } 83% { color: #f0f; } }

/* BN-4 LED sign */
.led {
  overflow: hidden; white-space: nowrap; font: 28px/1.2 var(--font-lcd); color: var(--led);
  text-shadow: 0 0 6px var(--led); border: 5px ridge #999; padding: 6px 0;
  background: #120400 radial-gradient(color-mix(in srgb, var(--led) 18%, #000) 1px, transparent 1.5px) 0 0 / 4px 4px;
}
.led span { display: inline-block; padding-left: 100%; animation: led 14s linear infinite; }
@keyframes led { to { transform: translateX(-100%); } }

/* BT-1 bevel buttons, tinted */
.btn, .nav a {
  display: inline-block; font: 10px/1.4 var(--font-body); background: var(--btn); color: var(--btn-ink);
  border: 0; padding: 9px 12px; text-decoration: none; cursor: pointer;
  box-shadow: inset -2px -2px color-mix(in srgb, var(--btn) 45%, #000), inset 2px 2px color-mix(in srgb, var(--btn) 45%, #fff);
}
.btn:active, .nav a:active, .nav a[aria-current=page], .btn.on {
  box-shadow: inset 2px 2px color-mix(in srgb, var(--btn) 45%, #000), inset -2px -2px color-mix(in srgb, var(--btn) 45%, #fff);
  background: color-mix(in srgb, var(--btn) 80%, #000);
}
.nav a:hover { animation: none; filter: brightness(1.12); }
.btn.big { font-size: 12px; padding: 12px 18px; }
.nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0 0; }

/* ---------------- content ---------------- */
main { display: block; }
main:focus { outline: none; }
h1, h2, h3 { font-weight: normal; color: var(--head); line-height: 1.5; text-shadow: 2px 2px 0 color-mix(in srgb, var(--head) 30%, #000); }
h1 { font-size: 18px; margin: 0 0 16px; text-align: center; }
h2 { font-size: 14px; margin: 28px 0 12px; }
h3 { font-size: 12px; margin: 20px 0 8px; }
p { margin: 0 0 14px; }
a { color: var(--link); }
a:hover { animation: rbw .6s linear infinite; }  /* LH-1 */
ul.stars { list-style: none; padding: 0; margin: 0 0 14px; }
ul.stars li { padding-left: 22px; position: relative; margin-bottom: 8px; }
ul.stars li::before { content: '★'; position: absolute; left: 0; color: var(--edge); }
hr, .hr { border: 0; height: 6px; margin: 22px 0; background: repeating-linear-gradient(90deg, var(--edge) 0 8px, transparent 8px 12px); }
.center { text-align: center; }
.muted { opacity: .75; }
small, .small { font-size: 8px; }
.todo { border: 2px dashed var(--edge); padding: 10px; margin: 0 0 14px; color: color-mix(in srgb, var(--ink) 80%, var(--edge)); }
.todo::before { content: '✎ TODO: '; color: var(--edge); }

/* BN-8 blink + comic callouts */
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.callout { font: bold 16px/1.4 var(--font-comic); color: var(--head); }

/* retro table */
table.facts { width: 100%; border-collapse: separate; border-spacing: 2px; margin: 0 0 14px; }
table.facts th, table.facts td { padding: 8px; text-align: left; vertical-align: top; border: 2px inset color-mix(in srgb, var(--panel) 60%, #fff); }
table.facts th { color: var(--edge); font-weight: normal; width: 38%; }

/* cards (projects, arcade) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 0 0 14px; }
.card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px; color: var(--ink); text-decoration: none;
  background: color-mix(in srgb, var(--panel) 75%, #000); border: 3px outset color-mix(in srgb, var(--edge) 70%, #fff);
}
a.card:hover { animation: none; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--edge); }
.card .icon { font-size: 32px; line-height: 1; }
.card h3 { margin: 0; }
.card p { margin: 0; font-size: 9px; }
.tag { display: inline-block; font-size: 8px; padding: 2px 6px; background: var(--edge); color: #000; margin-right: 4px; }

/* FC-2 neon form controls */
input, select, textarea, button { font-family: inherit; }
.neon-field, input[type=text], input[type=email], textarea, select {
  background: #000; color: #0f0; border: 2px solid var(--edge); font: 20px var(--font-lcd); padding: 4px 8px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--edge) 70%, transparent);
}
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--edge); }

/* ---------------- footer ---------------- */
.site-foot { text-align: center; margin-top: 18px; font-size: 8px; line-height: 2; }
.counter-wrap { margin-bottom: 10px; }
.counter-label { font: 16px var(--font-comic); display: block; margin-bottom: 4px; }
.counter { display: inline-flex; gap: 2px; padding: 4px; background: #222; border: 3px ridge #888; }
.counter span { width: 22px; height: 32px; display: grid; place-items: center; background: linear-gradient(#000, #222 50%, #000); color: var(--led); font: 28px var(--font-lcd); text-shadow: 0 0 5px var(--led); }
.foot-btns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.foot-btns .btn { font-size: 8px; padding: 6px 8px; }

/* ---------------- TR-4 pixel fire trail ---------------- */
.trail { position: fixed; pointer-events: none; z-index: 9999; left: 0; top: 0; width: 6px; height: 6px; translate: -50% -50%; animation: tFire .6s ease-out forwards; }
@keyframes tFire { to { transform: translate(var(--dx), -40px) scale(.4); opacity: 0; } }

/* ---------------- music player (WG-5) ---------------- */
.player {
  position: fixed; right: 16px; bottom: 16px; width: 300px; z-index: 1000;
  background: #c0c0c0; color: #000; padding: 3px; font: 12px Tahoma, Verdana, sans-serif; line-height: 1.3;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff, 6px 6px 0 var(--shadow);
}
.player .title { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; padding: 4px 4px 4px 6px; display: flex; justify-content: space-between; align-items: center; font: 9px var(--font-body); }
.player .title button { width: 18px; height: 16px; padding: 0; border: 0; background: #c0c0c0; font: bold 11px Tahoma, sans-serif; cursor: pointer; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080; }
.player .pbody { padding: 8px; }
.player.min .pbody { display: none; }
.player .lcd { background: #000; color: var(--led); font: 20px/1.1 var(--font-lcd); padding: 4px 6px; overflow: hidden; white-space: nowrap; text-shadow: 0 0 4px var(--led); }
.player .lcd .scroll { display: inline-block; }
.player .lcd .scroll.long { padding-left: 100%; animation: led 10s linear infinite; }
.player .time { display: flex; justify-content: space-between; font: 16px var(--font-lcd); color: #0f0; background: #000; padding: 0 6px 2px; }
.player .bar { height: 10px; margin: 6px 0; background: #fff; cursor: pointer; box-shadow: inset 1px 1px #808080, inset 2px 2px #0a0a0a; }
.player .bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 6px, #1084d0 6px 8px); }
.player .ctrls { display: flex; gap: 4px; }
.player .ctrls button, .player select {
  font: 12px Tahoma, sans-serif; background: #c0c0c0; color: #000; border: 0; padding: 4px 8px; cursor: pointer;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.player .ctrls button:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px #808080; }
.player .ctrls .play { flex: 1; font-weight: bold; }
.player label { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; }
.player label span { width: 42px; flex: none; }
.player select { flex: 1; min-width: 0; padding: 2px 4px; box-shadow: inset 1px 1px #808080, inset 2px 2px #0a0a0a; background: #fff; font-size: 11px; }
.player input[type=range] { flex: 1; min-width: 0; accent-color: #000080; }

/* ---------------- arcade toys ---------------- */
.toy-stage { position: relative; margin: 0 auto 14px; touch-action: none; user-select: none; -webkit-user-select: none; }
.toy-stats { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font: 22px var(--font-lcd); color: var(--led); }
.toy-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
canvas.pixel { image-rendering: pixelated; display: block; width: 100%; }
.bubble-sheet { background: #9fd8ff; border: 4px ridge var(--edge); }
.ticket { position: relative; max-width: 480px; aspect-ratio: 2 / 1; margin: 0 auto 14px; border: 4px dashed var(--edge); background: #fff6d6; color: #2b1055; overflow: hidden; }
.ticket .prize { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; font-size: 12px; line-height: 1.8; }
.ticket .prize b { display: block; font-size: 16px; color: #c0007a; margin-top: 6px; }
.ticket canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ticket.golden { border: 4px solid var(--gold); background: var(--gold); box-shadow: 0 0 24px var(--gold); animation: golden 0.8s steps(2) infinite; }
@keyframes golden { 50% { box-shadow: 0 0 6px var(--gold); } }
.so-claim { border: 4px dashed var(--gold); padding: 4px 16px 12px; margin-bottom: 14px; }
.so-claim h2 { text-align: center; color: var(--gold); }
.so-claim fieldset { border: 0; padding: 0; margin: 0; }
.toy-canvas { border: 4px ridge var(--edge); background: #000; }
.toy-overlay {
  position: absolute; inset: 4px; display: grid; place-content: center; gap: 8px; padding: 12px; text-align: center; pointer-events: none;
  font-size: 12px; line-height: 1.6; color: #fff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; background: rgba(20, 6, 31, .45);
}
.toy-overlay[hidden] { display: none; }
.toy-overlay small { display: block; font-size: 8px; color: var(--link); }
.toy-overlay-top { place-content: start center; background: none; padding-top: 8px; font-size: 9px; }
.toy-overlay.grade { place-content: center; background: rgba(20, 6, 31, .6); font-size: 12px; }
.toy-overlay.grade b { display: block; font-size: 40px; line-height: 1.2; color: var(--link); text-shadow: 3px 3px 0 #c0007a; }
.btn.hold { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ledclock b { color: #ff3030; text-shadow: 0 0 6px #f00; }
.ledclock b.blink { animation: blink .5s steps(1) infinite; }
.confetti { position: fixed; z-index: 9998; pointer-events: none; width: 8px; height: 8px; top: 0; left: 0; animation: confetti 1.4s ease-in forwards; }
@keyframes confetti { to { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; } }

/* about: 16px NES-style portrait at exactly 10x (160px + 2x6px border) */
.avatar {
  width: 172px; aspect-ratio: 1; margin: 0 auto 18px;
  background: #000 radial-gradient(color-mix(in srgb, var(--edge) 25%, #000) 1px, transparent 1.5px) 0 0 / 8px 8px;
  border: 6px ridge var(--edge); box-shadow: 6px 6px 0 var(--shadow);
}
.avatar img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* projects: newest project spans the full row, photo beside the text */
.card.featured { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }
.featured-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.featured-text .callout { font-size: 12px; }
.card-photo { display: block; width: 100%; height: auto; border: 4px solid #333; background: #000; }
.card.featured .card-photo { width: 52%; flex: none; }
@media (max-width: 640px) {
  .card.featured { flex-direction: column; align-items: stretch; }
  .card.featured .card-photo { width: 100%; }
}

/* guestbook */
.gb-form { max-width: 520px; margin: 0 auto; }
.gb-form label { display: block; margin: 12px 0 6px; color: var(--edge); font-size: 10px; }
.gb-form input[type=text], .gb-form input[type=email], .gb-form textarea { width: 100%; }
.gb-form textarea { resize: vertical; min-height: 110px; }
.gb-meta { display: flex; justify-content: space-between; font-size: 8px; margin-top: 4px; opacity: .8; }
.gb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gb-status { text-align: center; min-height: 1.9em; color: var(--head); margin: 6px 0 0; }
.gb-status.ok { color: #00ff00; }
.gb-list { list-style: none; padding: 0; margin: 0; }
.gb-entry { background: color-mix(in srgb, var(--panel) 75%, #000); border: 3px outset color-mix(in srgb, var(--edge) 70%, #fff); padding: 12px 14px; margin-bottom: 12px; }
.gb-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.gb-head b { color: var(--link); font-weight: normal; overflow-wrap: anywhere; }
.gb-head span { font-size: 8px; opacity: .75; }
.gb-msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.gb-empty { text-align: center; opacity: .75; padding: 12px; }

/* spinning globe (404) */
.globe { font-size: 64px; display: inline-block; animation: spinY 2.5s linear infinite; }
@keyframes spinY { to { transform: rotateY(360deg); } }

/* ---------------- resume ---------------- */
.resume h2 { border-bottom: 2px solid var(--edge); padding-bottom: 6px; }
.resume .job { margin-bottom: 18px; transition: opacity .2s; }
.resume .job-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; color: var(--link); cursor: pointer; list-style: none; padding: 6px 0; }
.resume .job-head::-webkit-details-marker { display: none; }
.resume .job-head b::before { content: '▶ '; color: var(--edge); display: inline-block; transition: transform .15s; }
.resume .job[open] .job-head b::before { transform: rotate(90deg); }
.resume .job-head span, .resume .role span, .stat-head span { color: var(--ink); opacity: .75; font-size: 9px; }
.resume .role { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 6px; color: var(--head); }
.resume .role i { font-style: normal; }
.resume li { transition: opacity .2s, background .2s; }
.resume.filtering li[data-skills]:not(.hit) { opacity: .3; }
.resume li.hit { background: color-mix(in srgb, var(--edge) 22%, transparent); outline: 2px solid var(--edge); outline-offset: 2px; }
.resume .job.dim { opacity: .35; }

.statsheet { background: color-mix(in srgb, var(--panel) 70%, #000); border: 3px outset color-mix(in srgb, var(--edge) 70%, #fff); padding: 12px; }
.stat-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; color: var(--link); margin-bottom: 8px; }
.statbar { display: flex; align-items: center; gap: 8px; }
.statlabel { color: var(--edge); }
.statfill { flex: 1; height: 14px; background: #000; border: 2px solid var(--edge); padding: 2px; }
.statfill i { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, #00ff00 0 8px, #00b000 8px 10px); animation: statgrow 1.4s steps(20) both; }
@keyframes statgrow { from { width: 0; } }
.statval { font: 22px var(--font-lcd); color: #00ff00; text-shadow: 0 0 5px #00ff00; }

.inventory h3 { margin: 12px 0 6px; font-size: 10px; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; }
.slot {
  font: 9px/1.4 var(--font-body); color: var(--ink); background: #000; border: 2px solid color-mix(in srgb, var(--edge) 60%, #000);
  padding: 8px 10px; cursor: pointer;
}
.slot:hover { border-color: var(--edge); }
.slot[aria-pressed=true] { background: var(--edge); color: #000; border-color: var(--link); box-shadow: 0 0 10px var(--edge); }
.skill-status { min-height: 1.9em; margin: 10px 0 0; color: #00ff00; font: 20px var(--font-lcd); }

.achievements { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.achievements li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: color-mix(in srgb, var(--panel) 70%, #000); border-left: 4px solid var(--link); }
.achievements li > span:first-child { font-size: 20px; }
.achievements li b { flex: 1; min-width: 160px; font-weight: normal; }
.achievements li > span:last-child { font-size: 9px; opacity: .75; }

@media (max-width: 640px) {
  body { padding: 12px 16px 110px; }
  .panel { padding: 14px; }
  .site-title { font-size: 12px; }
  .led { font-size: 22px; }
  h1 { font-size: 14px; }
  .player { left: 8px; right: 8px; bottom: 8px; width: auto; }
}

@media print {
  html, body { background: #fff !important; color: #000; animation: none !important; }
  .site-head, .site-foot, .player, .trail, .no-print, .skip { display: none !important; }
  .panel { border: 0; box-shadow: none; background: #fff; padding: 0; }
  .resume, .resume * { color: #000 !important; text-shadow: none !important; font-family: Georgia, 'Times New Roman', serif; font-size: 11pt; line-height: 1.45; }
  .resume h1 { font-size: 20pt; } .resume h2 { font-size: 13pt; border-color: #000; }
  .resume a { text-decoration: none; }
  .resume li, .resume .job { opacity: 1 !important; outline: 0 !important; background: none !important; }
  .resume .job-head b::before { content: ''; }
  .statsheet, .achievements li { border: 0; background: none; padding: 0; }
  .statbar { display: none; }
  .resume .statsheet p::after { content: ' · GPA 4.00'; }
}