/* Keep reference text sizes when a phone fits the 750px layout to its screen. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root {
  color-scheme: dark;
  font-family: Arial, sans-serif;
  background: #050505;
  color: #f1f0eb;
}

* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }

.entry-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.notebook-sheet {
  position: relative;
  width: min(540px, 100%);
  aspect-ratio: 1186 / 1466;
  isolation: isolate;
}

.paper { position: absolute; inset: 0; pointer-events: none; }
ember-paper:not(:defined) {
  background: url('assets/paper/burnt-notebook-sheet-muted-lines.webp') center / 94.6% auto no-repeat;
}

.sheet-content {
  position: absolute;
  inset: 16% 17% 19%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 30px);
}

.wordmark { width: 100%; margin: 0; line-height: 0; }
.wordmark img { display: block; width: 100%; height: auto; }
.notebook {
  --note-size: clamp(88px, 24vw, 128px);
  filter: drop-shadow(0 0 12px #d9943238);
}

.wallet-controls { position: relative; width: 100%; text-align: center; }
.wallet-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.connect-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(250px, 100%);
  min-height: 54px;
  padding: 12px 20px;
  border: 1px solid #d9b858;
  border-radius: 14px;
  background: linear-gradient(180deg, #201b10e6, #0b0b09ed);
  color: #f4e5b7;
  font-size: 17px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff2bd0a, 0 0 22px #c18b1d0a;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.connect-icon { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }
.open-button { text-decoration: none; }
.open-button:focus-visible { outline: 2px solid #ffe7a0; outline-offset: 5px; }
.connect-button:hover:hover { border-color: #ffe7a0; box-shadow: 0 0 24px #e8ba3526; }
button:focus-visible { outline: 2px solid #ffe7a0; outline-offset: 5px; }
.connect-button:disabled:disabled { cursor: default; opacity: .65; }
.disconnect-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #86754c66;
  border-radius: 12px;
  background: #0b0b0980;
  color: #c6b58d;
  font-size: 12px;
  cursor: pointer;
}
.disconnect-button:hover { color: #fff0c0; }
.disconnect-button:disabled { opacity: .5; cursor: default; }
.wallet-status:empty { display: none; }
.wallet-status {
  position: absolute;
  top: 100%;
  left: -8%;
  right: -8%;
  margin: 10px 0 0;
  color: #c6b58d;
  font-size: 12px;
  line-height: 1.5;
}
noscript { max-width: 360px; margin-top: 16px; text-align: center; font-size: 14px; }

@media (max-width: 360px) {
  .sheet-content { gap: 12px; }
  .notebook { --note-size: 80px; }
  .connect-button { min-height: 48px; padding: 10px 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .connect-button { transition: none; }
}