/* The Useless Calculator: styles. System fonts only. */
:root {
  --bg-1: #0f1015;
  --bg-2: #1b1d27;
  --body-1: #2a2c36;
  --body-2: #17181f;
  --key: #2f313c;
  --key-hi: #3b3e4b;
  --key-text: #f3f3f6;
  --fn: #a9acb8;
  --fn-text: #15161b;
  --op: #ff8a3d;
  --op-2: #ff6a1f;
  --eq: #ffb648;
  --lcd: #c9e3bd;
  --lcd-2: #a9c99c;
  --lcd-ink: #17221a;
  --lcd-dim: rgba(23, 34, 26, 0.55);
  --accent: #ff8a3d;
  --radius: 28px;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-lcd: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: #e9e9ee;
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(255, 138, 61, 0.16), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(120, 140, 255, 0.14), transparent 60%),
    linear-gradient(160deg, var(--bg-2), var(--bg-1));
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: 8px 12px; border-radius: 6px; z-index: 10; }
.skip-link:focus { left: 12px; top: 12px; }

.stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

.masthead { text-align: center; }
.title {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #fff, #ffd2b0 60%, #ff8a3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Calculator body ---------- */
.calc {
  width: min(100%, 380px);
  padding: 22px 20px 16px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 30%),
    linear-gradient(160deg, var(--body-1), var(--body-2));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 -2px 0 rgba(0,0,0,0.5) inset,
    0 40px 80px -20px rgba(0,0,0,0.7),
    0 18px 30px -12px rgba(0,0,0,0.6);
  position: relative;
  transition: transform 0.3s ease;
}
.calc.shake { animation: shake 0.45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px) rotate(-0.3deg); }
  20%, 80% { transform: translateX(3px) rotate(0.4deg); }
  30%, 50%, 70% { transform: translateX(-6px) rotate(-0.8deg); }
  40%, 60% { transform: translateX(6px) rotate(0.8deg); }
}

.calc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-name { font-weight: 800; letter-spacing: 0.16em; font-size: 0.7rem; color: #d8d9e0; white-space: nowrap; }
.brand-model { font-size: 0.7rem; color: #8b8e9b; letter-spacing: 0.08em; }
.brand-model abbr { text-decoration: none; color: var(--accent); font-weight: 700; }

.solar {
  display: flex; gap: 2px; padding: 3px; border: 0; cursor: default;
  border-radius: 5px; background: #0b0c10;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), inset 0 1px 2px rgba(0,0,0,0.8);
}
.solar .cell { width: 17px; height: 14px; border-radius: 2px; background: linear-gradient(135deg, #3b2a22, #20150f 60%, #4a3428); }
.solar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.solar.glint .cell { animation: glint 0.6s ease; }
@keyframes glint { 50% { background: linear-gradient(135deg, #ffd39a, #a86a3a); } }

/* ---------- Display ---------- */
.display {
  position: relative;
  border-radius: 14px;
  padding: 10px 14px 12px;
  min-height: 132px;
  background: linear-gradient(180deg, var(--lcd), var(--lcd-2));
  color: var(--lcd-ink);
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
  font-family: var(--font-lcd);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.display::after { /* subtle LCD pixel grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(0,0,0,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
}
.display-status { position: absolute; top: 8px; left: 14px; right: 14px; display: flex; gap: 10px; align-items: center; font-size: 0.62rem; letter-spacing: 0.12em; color: var(--lcd-dim); font-family: var(--font-ui); font-weight: 700; }
.status-flag { flex: 1; }
.status-batt { width: 22px; height: 10px; border: 1.5px solid var(--lcd-dim); border-radius: 2px; position: relative; padding: 1px; }
.status-batt::after { content: ""; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; background: var(--lcd-dim); border-radius: 0 1px 1px 0; }
.batt-level { display: block; height: 100%; width: 85%; background: var(--lcd-dim); border-radius: 1px; transition: width 0.6s ease; }
.batt-low .batt-level { width: 12%; animation: blink 1s steps(2) infinite; }

.expr {
  min-height: 1.3em; margin-top: 18px;
  text-align: right; font-size: 1rem; color: var(--lcd-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr;
}
.answer {
  display: block; text-align: right; font-weight: 700; line-height: 1.12;
  font-size: 2.6rem; letter-spacing: -0.01em;
  overflow-wrap: anywhere; word-break: normal; hyphens: auto;
  transition: opacity 0.12s ease;
  min-height: 1.15em;
}
.answer.len-m { font-size: 1.85rem; }
.answer.len-l { font-size: 1.35rem; }
.answer.len-xl { font-size: 1.08rem; line-height: 1.25; }
.answer.len-xxl { font-size: 0.92rem; line-height: 1.3; }
.answer.text { font-family: var(--font-ui); letter-spacing: 0; }
.answer.pop { animation: pop 0.28s ease; }
@keyframes pop { 0% { transform: translateY(4px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.answer.thinking::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.1s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.answer.thinking { color: var(--lcd-dim); }
@keyframes blink { 50% { opacity: 0; } }

.crack { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s; 
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 130' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23101a12' stroke-width='1.4' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M210 0 L198 30 L215 48 L190 70 L204 96 L186 130'/%3E%3Cpath d='M198 30 L160 40 L120 34'/%3E%3Cpath d='M215 48 L250 58 L300 50 L340 62'/%3E%3Cpath d='M190 70 L150 82 L110 78 L70 96'/%3E%3Cpath d='M204 96 L240 108 L262 130'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.display.broken .crack { opacity: 1; }
.display.broken { animation: glitch 0.5s steps(2) 3; }
@keyframes glitch { 0% { transform: none; } 25% { transform: translate(3px, -1px) skewX(-4deg); filter: hue-rotate(70deg) contrast(1.3); } 50% { transform: translate(-3px, 1px); opacity: 0.7; } 75% { transform: translate(2px, 0) skewX(3deg); filter: hue-rotate(-50deg); } 100% { transform: none; } }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; margin: 12px 2px 14px; }
.tool { border: 0; background: transparent; color: #8b8e9b; padding: 6px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.tool:hover { color: #d8d9e0; }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ico { width: 20px; height: 20px; }
.ico .cross { display: none; }
.tool[aria-pressed="true"] .ico .wave { display: none; }
.tool[aria-pressed="true"] .ico .cross { display: inline; }
.tool-group { display: flex; align-items: center; gap: 8px; }
.mini-key {
  appearance: none; border: 0; cursor: pointer; font: 600 0.85rem/1 var(--font-ui); color: #15161b;
  padding: 5px 11px 6px; border-radius: 999px; background: linear-gradient(180deg, #c3c6d1, var(--fn));
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 3px 0 #5f6270, 0 4px 8px rgba(0,0,0,0.4);
  transition: transform 0.06s ease, box-shadow 0.06s ease; touch-action: manipulation;
}
.mini-key:active, .mini-key.is-pressed { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 0 #5f6270, 0 2px 4px rgba(0,0,0,0.4); }
.mini-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ico-back { width: 1.35em; height: 1em; display: block; margin: 0 auto; }
.tool-label { font-size: 0.72rem; color: #6f7280; letter-spacing: 0.04em; }
.screw { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9a9daa, #4a4c56 70%); position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4); }
.screw::before { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: #2a2c34; border-radius: 1px; transform: rotate(35deg); transition: transform 0.4s ease; }
.tool-serious[aria-pressed="true"] .screw::before { transform: rotate(125deg); }

/* ---------- Keys ---------- */
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.key {
  appearance: none; border: 0; cursor: pointer; user-select: none; -webkit-user-select: none;
  aspect-ratio: 1 / 1; min-height: 56px; border-radius: 50%;
  font: 500 1.6rem/1 var(--font-ui); color: var(--key-text);
  background: linear-gradient(180deg, var(--key-hi), var(--key));
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 -3px 0 rgba(0,0,0,0.35) inset, 0 5px 0 #0e0f13, 0 8px 14px rgba(0,0,0,0.45);
  transform: translateY(0);
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.15s ease;
  touch-action: manipulation;
}
.key:hover { filter: brightness(1.1); }
.key:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.key:active, .key.is-pressed {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 -1px 0 rgba(0,0,0,0.35) inset, 0 1px 0 #0e0f13, 0 2px 4px rgba(0,0,0,0.45);
  filter: brightness(0.95);
}
.key-fn { background: linear-gradient(180deg, #c3c6d1, var(--fn)); color: var(--fn-text); font-size: 1.25rem; font-weight: 600; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -3px 0 rgba(0,0,0,0.2) inset, 0 5px 0 #5f6270, 0 8px 14px rgba(0,0,0,0.45); }
.key-fn:active, .key-fn.is-pressed { box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 0 #5f6270, 0 2px 4px rgba(0,0,0,0.4); }
.key-op, .key-eq { background: linear-gradient(180deg, #ffa462, var(--op-2)); font-size: 2.1rem; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -3px 0 rgba(0,0,0,0.2) inset, 0 5px 0 #a4400c, 0 8px 14px rgba(0,0,0,0.45); }
.key-op:active, .key-op.is-pressed, .key-eq:active, .key-eq.is-pressed { box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 #a4400c, 0 2px 4px rgba(0,0,0,0.4); }
.key-op.is-active { background: linear-gradient(180deg, #fff3ea, #ffd9bf); color: var(--op-2); }
.key-eq { background: linear-gradient(180deg, #ffd27f, var(--eq)); color: #2b1a05; box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -3px 0 rgba(0,0,0,0.15) inset, 0 5px 0 #a8701a, 0 8px 14px rgba(0,0,0,0.45); }
.key-pi { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: #ffd2b0; }



.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: rgba(20, 21, 27, 0.92); color: #fff; padding: 10px 16px; border-radius: 999px;
  font-size: 0.88rem; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Serious mode ---------- */
body.serious { background: linear-gradient(180deg, #e9e6de, #d6d2c6); color: #222; }
body.serious .title { background: none; color: #1d1d1d; font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: 0; }
body.serious .calc { background: linear-gradient(160deg, #3b3d40, #26282b); }
body.serious .display { background: linear-gradient(180deg, #f4f1e6, #e4dfcf); }
body.serious .answer.text { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; }
body.serious .key-op, body.serious .key-eq { background: linear-gradient(180deg, #5b6f8f, #3c4e6b); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 5px 0 #1d2738, 0 8px 14px rgba(0,0,0,0.45); }
body.serious .key-pi { color: #c8d4ea; }
body.serious .brand-model abbr { color: #9fb3d6; }

/* ---------- Konami party mode ---------- */
body.party .key { animation: party 2.4s linear infinite; }
body.party .key:nth-child(3n) { animation-delay: -0.8s; }
body.party .key:nth-child(3n+1) { animation-delay: -1.6s; }
body.party .title { animation: party 2.4s linear infinite; }
@keyframes party { from { filter: hue-rotate(0deg) saturate(1.6); } to { filter: hue-rotate(360deg) saturate(1.6); } }

/* ---------- Upside-down egg ---------- */
.calc.flipped { transform: rotate(180deg); }

/* ---------- Responsive ---------- */
@media (max-width: 420px) {
  .brand-name { font-size: 0.64rem; letter-spacing: 0.12em; }
  .stage { gap: 14px; padding-left: 12px; padding-right: 12px; justify-content: flex-start; }
  .calc { padding: 18px 14px 14px; border-radius: 24px; }
  .keys { gap: 10px; }
  .key { font-size: 1.45rem; aspect-ratio: 1.12 / 1; border-radius: 999px; }
  .key-op, .key-eq { font-size: 1.9rem; }
}
@media (max-height: 700px) and (min-width: 421px) { .masthead { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .answer.thinking::after { content: "..."; }
}

/* ---------- 0 ÷ 0: the black hole ---------- */
.bh-overlay { position: fixed; inset: 0; z-index: 50; cursor: wait; }
.bh-canvas { display: block; width: 100%; height: 100%; }
body.bh-lock { overflow: hidden; }
body.bh-lock .stage { transform-origin: 50% 50vh; }
body.bh-suck .stage { animation: bh-suck 3.6s cubic-bezier(.55, 0, .85, .35) .3s forwards; }
@keyframes bh-suck {
  0% { transform: none; filter: none; opacity: 1; }
  25% { transform: rotate(-25deg) scale(.9, .8) skewX(6deg); }
  55% { transform: rotate(-200deg) scale(.5, .3) skewX(14deg); filter: blur(1px) brightness(.8); }
  80% { transform: rotate(-520deg) scale(.16, .07) skewX(20deg); filter: blur(3px) brightness(.6); opacity: .8; }
  100% { transform: rotate(-900deg) scale(0); filter: blur(6px) brightness(.4); opacity: 0; }
}
body.bh-restore .stage { animation: bh-restore 1.6s cubic-bezier(.2, .8, .25, 1) forwards; }
@keyframes bh-restore {
  0% { transform: scale(.02) rotate(240deg); opacity: 0; filter: brightness(4) blur(6px); }
  55% { transform: scale(1.05) rotate(-6deg); opacity: 1; filter: brightness(1.6) blur(0); }
  80% { transform: scale(.985) rotate(1.5deg); filter: brightness(1.1); }
  100% { transform: none; opacity: 1; filter: none; }
}
/* Reduced-motion version: a plain fade (these beat the global reduced-motion override on purpose). */
body.bh-gentle .stage { transition: opacity 1.2s ease !important; }
body.bh-gentle.bh-gone .stage { opacity: 0; transform: none; }