:root {
  --bg: #1b2227;
  --body: #2c3a42;
  --body-edge: #1f2a30;
  --lcd: #c9d6ab;
  --lcd-ink: #1d2918;
  --lcd-dim: #55664a;
  --key: #ece9e1;
  --key-ink: #20282c;
  --key-shadow: #b9b5aa;
  --fn: #4b6270;
  --fn-shadow: #33454f;
  --op: #d9893a;
  --op-shadow: #a8641f;
  --eq: #3f9d7a;
  --eq-shadow: #2b765a;
  --danger: #c4513f;
  --danger-shadow: #913a2c;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(120% 90% at 30% 0%, #26323a 0%, var(--bg) 60%);
  color: #e8ece9;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;
}

.stage {
  min-height: 100%;
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ---------- 本体 ---------- */
.calc {
  width: min(100%, 380px);
  padding: 18px 18px 22px;
  border-radius: 26px 26px 34px 34px;
  background: linear-gradient(160deg, #36464f, var(--body) 40%, #26333a);
  box-shadow:
    0 2px 0 #4a5c66 inset,
    0 -6px 0 var(--body-edge) inset,
    0 30px 60px -20px rgba(0, 0, 0, .7),
    0 0 0 1px #131a1e;
}
.calc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.brand {
  font-weight: 700;
  letter-spacing: .14em;
  font-size: .78rem;
  color: #9db0ba;
}
.mode {
  font: 700 .75rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #5c7380;
  background: #22303a;
  color: #cfe0a4;
  cursor: pointer;
}
.mode:hover { background: #2a3b46; }

/* ---------- 液晶 ---------- */
.lcd {
  height: 118px;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, #bccb9c, var(--lcd));
  color: var(--lcd-ink);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45) inset, 0 0 0 4px #1d272d;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  overflow: hidden;
}
.lcd__expr {
  font-size: 1.2rem;
  line-height: 1.35;
  text-align: right;
  color: var(--lcd-dim);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  direction: rtl;
}
.lcd__expr::-webkit-scrollbar { display: none; }
.lcd__expr > span { direction: ltr; unicode-bidi: bidi-override; }
.lcd__result {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcd__result.is-error { font-size: 1.15rem; color: #7a2a1d; }

/* ---------- キー ---------- */
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.keys--sci { margin-top: 18px; padding-bottom: 16px; border-bottom: 2px solid rgba(0, 0, 0, .25); }
.keys--pad { margin-top: 16px; }

.key {
  --face: var(--key);
  --edge: var(--key-shadow);
  --ink: var(--key-ink);
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--face);
  color: var(--ink);
  font: 600 1.05rem/1 "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--edge), 0 6px 8px rgba(0, 0, 0, .3);
  transition: transform .06s, box-shadow .06s, filter .12s;
  -webkit-tap-highlight-color: transparent;
}
.key:hover { filter: brightness(1.06); }
.key:active, .key.is-pressed { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge), 0 2px 3px rgba(0, 0, 0, .3); }
.key:focus-visible, .mode:focus-visible, .tape button:focus-visible { outline: 3px solid #f3d36b; outline-offset: 2px; }

.key--fn { --face: var(--fn); --edge: var(--fn-shadow); --ink: #eef4f7; height: 40px; font-size: .95rem; }
.key--op { --face: var(--op); --edge: var(--op-shadow); --ink: #1f1405; font-size: 1.3rem; }
.key--eq { --face: var(--eq); --edge: var(--eq-shadow); --ink: #fff; font-size: 1.4rem; }
.key--clr { --face: var(--danger); --edge: var(--danger-shadow); --ink: #fff; }
.key--num { font-size: 1.25rem; }

/* ---------- 履歴 ---------- */
.tape {
  width: 280px;
  max-height: 560px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 14px;
  background: #f1eee4;
  color: #2a2d2b;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7);
  /* レシート風のギザギザ */
  -webkit-mask: radial-gradient(circle 6px at 6px 100%, #0000 98%, #000) 0 100% / 12px 100% repeat-x;
          mask: radial-gradient(circle 6px at 6px 100%, #0000 98%, #000) 0 100% / 12px 100% repeat-x;
  padding-bottom: 26px;
}
.tape__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.tape h2 { margin: 0; font-size: .95rem; }
.tape button {
  border: 0; background: none; color: #8a3b2d; font-size: .8rem; cursor: pointer; text-decoration: underline;
}
.tape ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; font-family: ui-monospace, Menlo, Consolas, monospace; }
.tape li { padding: 8px 4px; border-top: 1px dashed #b8b4a6; cursor: pointer; }
.tape li:first-child { border-top: 0; }
.tape li:hover { background: #e6e2d4; }
.tape .h-expr { display: block; font-size: .8rem; color: #6a6e69; word-break: break-all; }
.tape .h-res { display: block; text-align: right; font-size: 1.05rem; font-weight: 700; }
.tape .tape__empty { color: #8b8e88; cursor: default; font: .85rem "Hiragino Sans", "Yu Gothic UI", sans-serif; }
.tape .tape__empty:hover { background: none; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 720px) {
  .stage { flex-direction: column; justify-content: flex-start; padding: 12px; }
  .tape { width: min(100%, 380px); max-height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .key { transition: none; } }