/* Smells Phishy. A late-night desk: the email sits on a glowing violet laptop screen (the
   same inbox the fly uses in fly.html), the fly works beside it in warm lamp light.
   Type follows the portfolio (aidenbodi.ly). */
:root {
  /* the desk */
  --bg: #0a0707;
  --ink: #f0e8d8;
  --muted: #b3a996;
  --faint: #7d7463;
  --shell: #221c2c;
  --key: #2c2440;
  --key-edge: #171221;
  /* the screen */
  --screen: #150b2e;
  --screen-bar: #24134f;
  --screen-side: #1b0f3d;
  --screen-line: #33206f;
  --screen-ink: #efe6ff;
  --screen-text: #d9cdf2;
  --screen-muted: #b6a0ea;
  --screen-faint: #8e76cf;
  --reply: #100826;
  --violet: #7920f5;
  --violet-soft: #a774ff;
  /* verdicts */
  --phishy: #e8664a;
  --legit: #9cc58a;
  --serif: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --mono: "Courier Prime", ui-monospace, "SF Mono", Menlo, monospace;
  --gap: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(55% 70% at 30% 55%, rgba(121, 32, 245, 0.11), transparent 70%),
    radial-gradient(40% 50% at 82% 40%, rgba(255, 168, 96, 0.07), transparent 70%),
    radial-gradient(130% 100% at 50% 0%, #110c0b 0%, #0a0707 55%, #030202 100%) fixed,
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 15px/1.5 var(--serif);
}
.label, .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.faint { color: var(--faint); }
b { font-weight: 700; }
button { font: inherit; color: inherit; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* The whole app fits the viewport on desktop; panels scroll inside themselves. */
.app { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--gap); padding: 18px 24px 12px; max-width: 1600px; margin: 0 auto; }

/* --- header ---------------------------------------------------------------- */
/* kicker on its own row; title and lede share the next, split by a hairline; scores centred against both */
.top {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  grid-template-areas: "kicker kicker scores" "title lede scores";
  column-gap: 28px; row-gap: 8px; margin-bottom: 10px;
}
.brand { display: contents; }
.kicker { grid-area: kicker; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
h1 { grid-area: title; margin: 0; font-weight: normal; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: 0.01em; line-height: 1.05; }
h1 em { color: var(--violet-soft); text-shadow: 0 0 24px rgba(121, 32, 245, 0.6); }
.lede { grid-area: lede; margin: 0; padding-left: 28px; border-left: 1px solid rgba(240, 232, 216, 0.14); color: var(--muted); max-width: 600px; line-height: 1.45; }
.lede b { color: var(--ink); }
.keep { white-space: nowrap; }
.dare { display: block; color: var(--ink); }
.scores { grid-area: scores; display: flex; align-items: center; gap: 10px; }
.score { display: grid; justify-items: center; min-width: 74px; padding: 5px 12px 6px; border-radius: 9px; background: linear-gradient(#332a49, var(--key)); border: 1px solid #3d3357; border-bottom: 3px solid var(--key-edge); }
.score .k { font-size: 10px; color: var(--screen-faint); }
.score b { font-family: var(--mono); font-size: 19px; line-height: 1.1; }
.score.fly b { color: var(--violet-soft); }
.score.crowd { margin-left: 8px; }
.vs { font-family: var(--mono); font-size: 12px; color: var(--faint); }

.stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(var(--gap) + 6px); min-height: 0; }

/* --- the laptop: email client on a glowing screen --------------------------- */
.laptop { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.screen {
  display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden;
  background: var(--screen); border: 10px solid var(--shell); border-radius: 16px;
  box-shadow: 0 0 0 1px #2e2640, 0 24px 64px -18px rgba(121, 32, 245, 0.46), 0 0 100px -12px rgba(121, 32, 245, 0.19);
}
.base { height: 14px; margin: 0 -18px; border-radius: 3px 3px 14px 14px; background: linear-gradient(#3a3248, #1a1522 70%); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.8); position: relative; }
.base::after { content: ""; position: absolute; left: 50%; top: 0; width: 90px; height: 5px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #15111c; }

.titlebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 32px; padding: 0 12px; background: var(--screen-bar); }
.lights { display: flex; gap: 6px; }
.lights i { width: 9px; height: 9px; border-radius: 50%; background: #7d62c4; }
.search { min-width: 220px; padding: 2px 14px; border-radius: 6px; background: var(--screen); color: var(--screen-faint); font: 12px var(--mono); text-align: center; white-space: nowrap; }

.client { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; }

/* this round, as an inbox list: answered emails get the fly's tick or fish hook */
.inbox { list-style: none; margin: 0; padding: 6px; background: var(--screen-side); border-right: 2px solid var(--screen-bar); overflow: auto; scrollbar-width: none; }
.inbox li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 8px; border-radius: 7px; margin-bottom: 3px; }
.inbox .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--mono); color: var(--screen); background: var(--screen-line); }
.inbox .t { min-width: 0; display: grid; gap: 3px; }
.inbox .n, .inbox .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox .n { font-size: 13px; color: var(--screen-ink); line-height: 1.2; }
.inbox .s { font: 11px var(--mono); color: var(--screen-faint); line-height: 1.2; }
.inbox .bar { height: 6px; border-radius: 3px; background: #2c1a63; }
.inbox .bar + .bar { width: 70%; height: 5px; background: #24165a; }
.inbox li.open { background: var(--violet); box-shadow: 0 0 22px rgba(121, 32, 245, 0.45); }
.inbox li.open .s { color: #e3d4ff; }
.inbox li.done:not(.open) { opacity: 0.85; }
.inbox .mark { color: var(--screen-faint); }
.inbox .mark.phishy { color: var(--phishy); }
.inbox .mark.legit { color: var(--legit); }
.inbox li.open .mark { color: var(--screen-ink); }

.pane { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; }
.message { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; padding: 18px 22px 0; }
.from { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 17px var(--mono); color: var(--screen); background: var(--screen-muted); }
.who { min-width: 0; }
.name { font-size: 16px; color: var(--screen-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr { font-family: var(--mono); font-size: 12px; color: var(--screen-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to { font-family: var(--mono); font-size: 12px; color: var(--screen-faint); }
.to b { color: var(--screen-muted); }
.message h2 { font-weight: normal; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.3; margin: 14px 0 10px; color: #f6f0ff; overflow-wrap: anywhere; }
.body { overflow: auto; min-height: 0; padding: 12px 6px 16px 0; border-top: 1px solid var(--screen-line); color: var(--screen-text); overflow-wrap: anywhere; scrollbar-color: var(--screen-line) transparent; }
.body:focus-visible { outline: 2px solid var(--violet-soft); outline-offset: 2px; }
.body p { margin: 0 0 0.8em; white-space: pre-wrap; }
.body .link { font-family: var(--mono); font-size: 0.86em; color: #c9a7ff; border-bottom: 1px dotted #c9a7ff; cursor: help; }
.body details { margin: 0 0 0.8em; color: var(--screen-faint); }
.body summary { cursor: pointer; font-family: var(--mono); font-size: 12px; }
.body details p { border-left: 2px solid var(--screen-line); padding-left: 10px; }
.email-id:empty { display: none; }
.email-id { padding: 4px 0 8px; font: 12px var(--mono); color: var(--screen-faint); opacity: 0.7; user-select: all; }

/* keycaps, like the fly's laptop */
.keycap, .next {
  cursor: pointer; border-radius: 10px; border: 1px solid #3d3357; border-bottom: 4px solid var(--key-edge);
  background: linear-gradient(#352b4d, var(--key)); color: var(--ink);
  transition: transform 0.08s, border-bottom-width 0.08s, box-shadow 0.15s, border-color 0.15s;
}
.keycap:active:not(:disabled), .next:active { transform: translateY(3px); border-bottom-width: 1px; }
.keycap:focus-visible, .next:focus-visible { outline: 2px solid var(--violet-soft); outline-offset: 3px; }
.decide { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 22px 18px; background: var(--reply); border-top: 1px solid var(--screen-line); }
.keycap { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 11px 16px; }
.keycap .icon { grid-row: 1 / 3; width: 28px; height: 28px; }
.keycap span { font: 700 18px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.keycap small { font: 12px var(--mono); color: var(--screen-muted); }
.keycap.phishy .icon { color: var(--phishy); }
.keycap.legit .icon { color: var(--legit); }
.keycap.phishy:hover:not(:disabled) { border-color: var(--phishy); border-bottom-color: #6b2a1c; box-shadow: 0 0 26px rgba(232, 102, 74, 0.35); }
.keycap.legit:hover:not(:disabled) { border-color: var(--legit); border-bottom-color: #3d5a32; box-shadow: 0 0 26px rgba(156, 197, 138, 0.3); }
.keycap:disabled { opacity: 0.45; cursor: default; }

.reveal { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 14px 22px 18px; background: var(--reply); border-top: 1px solid var(--screen-line); }
.stamp { display: inline-flex; align-items: center; gap: 8px; font: 700 18px var(--mono); letter-spacing: 0.1em; padding: 6px 14px 6px 10px; border: 2px solid currentColor; border-radius: 6px; transform: rotate(-4deg); }
.stamp .icon { width: 24px; height: 24px; }
.stamp.phishy { color: var(--phishy); background: rgba(232, 102, 74, 0.12); box-shadow: 0 0 30px rgba(232, 102, 74, 0.25); }
.stamp.legit { color: var(--legit); background: rgba(156, 197, 138, 0.1); box-shadow: 0 0 30px rgba(156, 197, 138, 0.2); }
.lines { font-size: 14px; display: grid; gap: 1px; color: var(--screen-text); }
.lines .faint { color: var(--screen-faint); }
.next { font: 700 14px var(--mono); padding: 10px 16px; background: linear-gradient(#8a3bff, var(--violet)); border-color: #9a5cff; border-bottom-color: #3f0f8a; color: #fff; box-shadow: 0 0 24px rgba(121, 32, 245, 0.4); }
.turnstile { padding: 0 22px; background: var(--reply); }
.turnstile:empty { display: none; }

/* --- the fly and its brain ------------------------------------------------- */
.side { display: grid; grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--gap); min-height: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px 0; }
.status { font: 12px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fly-stage {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; border-radius: 16px;
  background: radial-gradient(60% 60% at 50% 62%, rgba(255, 168, 96, 0.08), transparent 75%);
}
#fly { width: 100%; height: 100%; min-height: 0; border: 0; display: block; background: transparent; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 14px 6px; max-width: 360px; width: 100%; justify-self: center; }
.key { text-align: center; padding: 6px; border-radius: 8px; border: 1px solid #3d3357; border-bottom: 3px solid var(--key-edge); background: linear-gradient(#2f2742, #241e34); color: var(--faint); font: 700 12px var(--mono); letter-spacing: 0.14em; transition: all 0.2s; position: relative; }
.key.down { transform: translateY(2px); border-bottom-width: 1px; color: var(--ink); }
.key.phishy.down { border-color: var(--phishy); background: #3a1a14; box-shadow: 0 0 22px rgba(232, 102, 74, 0.5); }
.key.legit.down { border-color: var(--legit); background: #1d2a18; box-shadow: 0 0 22px rgba(156, 197, 138, 0.45); }
.key.down.wrong::after { content: "wrong"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 9px; letter-spacing: 0.08em; color: var(--muted); }

.brain-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden; border-radius: 14px; background: rgba(21, 11, 46, 0.55); border: 1px solid var(--screen-bar); }
.brain-panel .label { color: var(--screen-faint); }
.brain-panel .status { color: var(--screen-muted); }
#brain { width: 100%; height: 100%; min-height: 0; display: block; object-fit: contain; }
/* the smells and the hint share one wrapping row; a fixed height keeps the canvas from resizing after a guess */
.brain-foot { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-end; gap: 6px; padding: 2px 14px 10px; min-height: 58px; }
.smelling { display: contents; font-family: var(--mono); font-size: 11px; color: var(--screen-muted); }
.smelling .lead { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--screen-faint); margin-right: 2px; }
.smelling .chip { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 1px 8px; border-radius: 999px; border: 1px solid #2c1a63; background: rgba(121, 32, 245, 0.12); color: #e0ccff; white-space: nowrap; }
.smelling .chip span { overflow: hidden; text-overflow: ellipsis; }
.smelling .chip b { color: var(--violet-soft); }
/* tells people the cells can be inspected: hover on a mouse, tap on a touch screen */
.hint { margin-left: auto; padding-left: 10px; display: inline-flex; align-items: center; gap: 7px; font: 11px var(--mono); color: var(--screen-faint); white-space: nowrap; }
.hint i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-soft); box-shadow: 0 0 0 0 rgba(167, 116, 255, 0.6); animation: hint-pulse 2.4s ease-out infinite; }
@keyframes hint-pulse { 0% { box-shadow: 0 0 0 0 rgba(167, 116, 255, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(167, 116, 255, 0); } }
.hint .by-touch { display: none; }
@media (hover: none) { .hint .by-hover { display: none; } .hint .by-touch { display: inline; } }
@media (prefers-reduced-motion: reduce) { .hint i { animation: none; } }

.foot { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--faint); }
.byline { color: var(--faint); text-decoration: none; white-space: nowrap; transition: color 0.15s; }
.byline span { color: var(--violet-soft); }
.byline:hover { color: var(--screen-muted); }
.byline:hover span { text-decoration: underline; text-underline-offset: 3px; }
.byline:focus-visible { outline: 2px solid var(--violet-soft); outline-offset: 3px; border-radius: 4px; }
.credits summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--faint); transition: color 0.15s; }
.credits summary::-webkit-details-marker { display: none; }
.credits summary::before { content: "+"; display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 4px; font-size: 11px; line-height: 1; }
.credits[open] summary::before { content: "\2013"; }
.credits summary:hover, .credits[open] summary { color: var(--screen-muted); }
.credits summary:focus-visible { outline: 2px solid var(--violet-soft); outline-offset: 3px; border-radius: 4px; }
.credits p {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 10; margin: 0; max-width: min(760px, 100%);
  padding: 12px 14px; border-radius: 10px; background: #120a24; border: 1px solid var(--screen-bar);
  color: var(--screen-muted); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(121, 32, 245, 0.35);
}

/* Narrower desktops: the round collapses to a strip of avatars above the email. */
@media (max-width: 1180px) {
  .client { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .inbox { display: flex; gap: 6px; padding: 8px 12px; border-right: 0; border-bottom: 2px solid var(--screen-bar); overflow: hidden; }
  .inbox li { display: block; padding: 3px; margin: 0; border-radius: 50%; }
  .inbox .t, .inbox .mark { display: none; }
  .inbox .av { width: 22px; height: 22px; font-size: 10px; }
  .inbox li.done .av { background: var(--screen-line); color: var(--screen-ink); }
  .inbox li.done.right .av { box-shadow: 0 0 0 2px var(--legit); }
  .inbox li.done.wrong .av { box-shadow: 0 0 0 2px var(--phishy); }
}

/* Phones and narrow windows: stack and let the page scroll. */
@media (max-width: 900px) {
  :root { --gap: 14px; }
  .app { height: auto; min-height: 100dvh; padding: 12px 16px; }
  .top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "title" "lede" "scores"; align-items: start; row-gap: 10px; }
  .lede { padding-left: 0; border-left: 0; }
  .scores { flex-wrap: wrap; }
  .app, .stage, .side { grid-template-columns: minmax(0, 1fr); }
  .screen { border-width: 7px; border-radius: 12px; }
  .base { margin: 0 -10px; height: 10px; }
  .search { min-width: 0; }
  .pane { grid-template-rows: auto auto auto; }
  .message { grid-template-rows: auto auto auto auto; padding: 14px 16px 0; }
  .body { max-height: 46vh; }
  .decide, .reveal { padding: 12px 16px 14px; }
  .reveal { grid-template-columns: auto 1fr; }
  .reveal .next { grid-column: 1 / -1; }
  .side { grid-template-rows: auto auto; }
  .fly-stage { height: 280px; }
  /* a fixed shape, so sizing the canvas to its box can never feed back into the box */
  #brain { height: auto; aspect-ratio: 900 / 420; }
}
@media (max-width: 420px) {
  .inbox { gap: 3px; padding: 7px 8px; }
  .inbox li { padding: 2px; }
  .inbox .av { width: 20px; height: 20px; font-size: 9px; }
  .keycap { padding: 10px 12px; column-gap: 8px; }
  .keycap span { font-size: 15px; }
  .keycap small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

[hidden] { display: none !important; }