* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  background:
    repeating-linear-gradient(0deg, rgba(120,110,90,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,110,90,.02) 0 1px, transparent 1px 2px),
    var(--paper, #EAE6DB);
  color: var(--ink, #2e2c27);
  font-family: var(--font-ui, 'Inter', sans-serif);
}
/* poems are copied via the ⧉ button, not selection — but never put no-select
   on an input's ancestors (iOS WebKit crashes on focus) */
.poem, .title, .seal, .watermark, .actions, .pfoot, #hint {
  user-select: none;
  -webkit-user-select: none;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}
#deck { height: 100dvh; overflow: hidden; position: relative; }

/* the deck: each sheet is a physical card of paper */
.sheet {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: max(40px, env(safe-area-inset-top)) 28px max(18px, env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(0deg, rgba(120,110,90,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,110,90,.02) 0 1px, transparent 1px 2px),
    var(--paper, #EAE6DB);
  touch-action: pan-y;
  /* no will-change here: promoting every sheet to a GPU layer exhausts iOS memory */
  transition: transform .45s cubic-bezier(.22,.9,.3,1), border-radius .45s ease, box-shadow .45s ease;
}
.sheet.dragging, .sheet.lifted { will-change: transform; } /* only the card in hand */
/* sheets far from the current card don't need painting at all */
.sheet.far { visibility: hidden; }
.sheet.gone {
  transform: translateX(-112%) rotate(-4deg);
  border-radius: 22px;
  box-shadow: 0 12px 48px rgba(46,44,39,.28);
  pointer-events: none;
}
.sheet.under {
  transform: scale(.94);
  border-radius: 22px;
  box-shadow: 0 6px 30px rgba(46,44,39,.14);
  pointer-events: none;
}
.sheet.dragging { transition: none; }
.sheet.lifted {
  border-radius: 22px;
  box-shadow: 0 12px 48px rgba(46,44,39,.28);
}

/* one flowing column: seal → poem → share → footer. Short poems center;
   long poems scroll, with share + address following after the last line. */
.sheet .middle {
  min-height: 100%; width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.sheet .middle > * { flex-shrink: 0; }
.sheet .middle::before, .sheet .middle::after { content: ''; flex: 1 0 14px; }
.seal {
  width: 34px; height: 34px; border-radius: 4px;
  background: var(--seal, #BE3B33); color: var(--paper, #EAE6DB);
  font-family: var(--font-kanji, 'Shippori Mincho', serif); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  margin-bottom: 24px;
}
.title {
  font-family: var(--font-content, 'Noto Serif Georgian', serif);
  font-size: 16px; font-weight: 500; letter-spacing: .14em;
  margin: -6px 0 24px; text-align: center;
}
.poem {
  font-family: var(--font-content, 'Noto Serif Georgian', serif);
  font-weight: 300; line-height: 1.78; text-align: var(--align, left);
  width: fit-content; max-width: 100%; /* block centered by .middle, lines left-aligned within */
}
.poem .vline { display: block; white-space: nowrap; }
.poem .vline.wrapped { white-space: normal; padding-left: 1.6em; text-indent: -1.6em; }
.poem .gap { display: block; height: 1.4em; }

.watermark {
  position: absolute; right: -18px; bottom: 90px; pointer-events: none;
  font-family: var(--font-kanji, 'Shippori Mincho', serif);
  font-size: 240px; line-height: 1; opacity: .05;
}
body.no-watermark .watermark { display: none; }

.actions { display: flex; gap: 14px; justify-content: center; margin: 26px 0 0; flex-shrink: 0; }
.cbtn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--chip, rgba(120,110,90,.13)); color: var(--ink, #2e2c27);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.cbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.cbtn.flash { background: var(--seal, #BE3B33); color: var(--paper, #EAE6DB); }

.sub {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  width: 100%; max-width: 460px; margin-top: 44px; flex-shrink: 0;
}
/* larger screens: one horizontal line — field grows, button keeps its size */
@media (min-width: 560px) {
  .sub { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sub input { flex: 1 1 auto; }
  .sub button { flex: 0 0 auto; width: auto; padding-left: 22px; padding-right: 22px; }
  .sub .sub-msg { flex-basis: 100%; }
}
.sub input {
  border: 0; border-radius: 10px;
  background: rgba(255,252,244,.5);
  box-shadow: 0 1.5px 0 rgba(46,44,39,.3);
  /* 16px minimum: smaller fonts make iOS zoom the page on focus */
  padding: 11px 12px; font-size: 16px; text-align: center; outline: none;
  font-family: var(--font-ui, 'Inter', sans-serif); color: var(--ink, #2e2c27);
  transition: box-shadow .3s ease, background .3s ease;
}
.sub input::placeholder { color: rgba(46,44,39,.35); font-size: 13px; letter-spacing: .08em; }
.sub input:focus { box-shadow: 0 2px 0 rgba(190,59,51,.6); background: rgba(255,252,244,.75); }
.sub button {
  border: 0; border-radius: 8px; padding: 12px; cursor: pointer;
  background: var(--seal, #BE3B33); color: #F6F3EC;
  font-family: var(--font-ui, 'Inter', sans-serif); font-weight: 500;
  font-size: 11.5px; letter-spacing: .12em; text-indent: .12em; text-transform: lowercase;
  box-shadow: 0 1px 6px rgba(190,59,51,.25), inset 0 0 0 1.5px rgba(246,243,236,.25);
  transition: background .2s ease, transform .15s ease;
}
.sub button:hover { background: #B23328; }
.sub button:active { transform: scale(.97); }
.sub .sub-msg { font-size: 11px; opacity: .55; text-align: center; min-height: 1em; font-family: var(--font-ui, 'Inter', sans-serif); }
.sub-done {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; margin-top: 44px; flex-shrink: 0;
}
.sub-done .check {
  width: 34px; height: 34px; border-radius: 50%;
  background: #6f8f60; /* moss — success, still of the garden */
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 6px rgba(111,143,96,.35);
  animation: stamp-in .5s cubic-bezier(.3,1.6,.4,1);
}
.sub-done .check svg { width: 16px; height: 16px; stroke: #F6F3EC; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sub-done p { font-size: 12px; letter-spacing: .08em; opacity: .6; font-family: var(--font-ui, 'Inter', sans-serif); }
@keyframes stamp-in {
  0% { transform: scale(2) rotate(-8deg); opacity: 0; }
  60% { transform: scale(.92) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.pfoot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 34px; flex-shrink: 0; }
.pfoot .site {
  font-family: var(--font-ui, 'Inter', 'Helvetica Neue', Arial, sans-serif);
  font-size: 9.5px; letter-spacing: .14em; color: #EAE6DB;
  background: #3d3a33; padding: 6px 14px; border-radius: 6px;
  text-decoration: none; box-shadow: 0 1px 4px rgba(46,44,39,.2);
}
.pfoot .author { font-size: 10.5px; opacity: .45; font-family: var(--font-content, 'Noto Serif Georgian', serif); }

#hint[hidden] { display: none; }
#hint {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 10;
  cursor: pointer; /* modal: first tap closes it, only then the paper is touchable */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  color: #fff; font-size: 14px; letter-spacing: .08em;
  font-family: var(--font-ui, 'Inter', sans-serif);
}
.hint-finger {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  animation: swipe-demo 1.6s ease-in-out infinite;
}
@keyframes swipe-demo {
  0%, 100% { transform: translateX(-60px); }
  50% { transform: translateX(60px); }
}