:root { --starlight: #f5e5c6; }
#star-preview-note {
  position: fixed; top: 26px; left: 50%; transform: translateX(-50%);
  z-index: 6; color: #92909a; font-size: 9px; letter-spacing: .19em;
  white-space: nowrap; pointer-events: none;
}
#star-card {
  position: fixed; inset: auto 28px 148px auto; margin: 0;
  width: min(350px, calc(100vw - 36px)); padding: 35px 29px 25px;
  color: var(--ink); background: #080a10ed;
  border: 1px solid #e9d2aa38; border-radius: 3px;
  box-shadow: 0 20px 90px #0009; text-align: center;
  max-height: calc(100dvh - 48px); overflow: auto; touch-action: pan-y;
}
#star-card::backdrop { background: #0003; }
#star-close {
  position: absolute; top: 4px; right: 5px; width: 44px; height: 44px;
  border: 0; background: none; color: #a6a4a5; font-size: 23px; cursor: pointer;
}
.star-card-light { color: #fff1d5; font-size: 24px; text-shadow: 0 0 22px #ffdc9b9a; margin: 5px 0 25px; }
#star-number { color: #b8aa93; font-size: 10px; letter-spacing: .2em; }
#star-dedication {
  margin: 18px 0 16px; font: 400 29px/1.35 "Iowan Old Style", "Baskerville", serif;
  overflow-wrap: anywhere; color: #f6ead7;
}
.star-card-message { font: italic 16px/1.6 "Iowan Old Style", "Baskerville", serif; color: #bcb7b0; }
.star-card-place { margin-top: 29px; padding-top: 18px; border-top: 1px solid #e9d2aa22; font-size: 9px; letter-spacing: .14em; color: #807f87; }
#star-back { margin-top: 19px; padding: 10px 15px; background: none; border: 0; color: #d6c4a6; font: inherit; font-size: 11px; cursor: pointer; }
#star-card button:focus-visible { outline: 1px solid var(--starlight); outline-offset: 2px; }
#star-render-status { position: fixed; z-index: 6; top: 67px; left: 50%; transform: translateX(-50%); width: min(340px, 85vw); color: #c4bcc0; font-size: 11px; line-height: 1.6; text-align: center; }
@media (max-width: 700px) {

  #star-card { inset: auto 18px 27px; margin-inline: auto; }
  #star-preview-note { top: 64px; font-size: 8px; }
  .keyboard-open #star-actions, .keyboard-open #star-load { visibility: hidden; }
}
@media (max-height: 500px) {
  #star-card { inset: 24px 24px auto auto; }

  #star-preview-note { top: 24px; }
}

[hidden] { display: none !important; }
#star-actions { position:fixed; z-index:6; right:22px; bottom:126px; display:flex; gap:12px; }
#star-actions button, #star-retry { font:inherit; font-size:11px; color:#dfcfb3; border:1px solid #dfcfb338; background:#080a1099; border-radius:3px; padding:12px; min-height:44px; cursor:pointer; }
#star-actions #leave-star { border-color:#dfcfb366; }
#star-load { position:fixed; right:22px; bottom:104px; z-index:6; font-size:10px; color:#a6a2a0; max-width:340px; }
#star-retry { padding:4px 8px; }
.star-sheet { position:fixed; inset: auto 24px 185px auto; margin:0; width:min(380px,calc(100vw - 36px)); max-height:calc(100dvh - 60px); overflow:auto; color:var(--ink); background:#080a10f5; border:1px solid #e9d2aa38; border-radius:4px; padding:28px 24px; text-align:center; }
.star-sheet::backdrop { background:#0003; }
.star-sheet h2 { font:400 26px/1.4 'Iowan Old Style',serif; color:var(--starlight); margin:4px 20px 20px; }
.star-sheet p { font-size:12px; line-height:1.65; color:#bcb7b0; margin:12px 0; }
.star-sheet .star-poem { font:italic 18px/1.6 'Iowan Old Style',serif; color:#eee1cb; }
.star-sheet .purchase-small { font-size:10px; }
.sheet-close { position:absolute; top:3px; right:3px; width:44px; height:44px; border:0; background:none; color:#c1b7ab; font-size:23px; cursor:pointer; }
#star-checkout { display:block; padding:14px; margin:20px 0 8px; border:1px solid #e9d2aa70; border-radius:3px; color:#fff1d5; text-decoration:none; font-size:14px; }
#find-stars { display:grid; gap:8px; }
#find-stars button { text-align:left; min-height:44px; padding:10px 12px; border:1px solid #e9d2aa22; background:none; color:#dfcfb3; font:inherit; font-size:13px; overflow-wrap:anywhere; cursor:pointer; }
#star-actions button:focus-visible, .star-sheet :focus-visible { outline:1px solid var(--starlight); outline-offset:3px; }
@media(max-width:700px){
  #star-actions { right:20px; left:20px; bottom:calc(176px + env(safe-area-inset-bottom,0px)); justify-content:center; }
  #star-load { right:20px; left:20px; bottom:calc(154px + env(safe-area-inset-bottom,0px)); max-width:none; text-align:center; }
  .star-sheet { inset:auto 18px 18px; margin-inline:auto; max-height:72dvh; }
  #star-card { padding:16px 22px 12px; max-height:34dvh; bottom:18px; }
  .star-card-light, .star-card-message, .star-card-place { display:none; }
  #star-number { margin:8px 0; }
  #star-dedication { font-size:24px; margin:8px 12px; }
  #star-back { margin-top:5px; min-height:44px; }
}
@media(max-height:500px){
  #star-actions { right:18px; left:auto; bottom:100px; }
  #star-load { right:18px; left:auto; bottom:78px; }
  .star-sheet { inset:16px 18px auto auto; max-height:calc(100dvh - 32px); }
}

#star-load.load-error { top:92px; bottom:auto; left:20px; right:20px; max-width:none; text-align:center; }

/* Keep mobile controls in one flow so text size and status changes cannot overlap. */
#star-interaction { display:contents; }
@media(max-width:700px), (max-height:500px){
  #star-interaction {
    position:fixed; z-index:6; left:50%; transform:translateX(-50%);
    bottom:calc(78px + env(safe-area-inset-bottom,0px));
    width:min(500px,calc(100vw - 40px)); display:flex;
    flex-direction:column; gap:12px;
  }
  #star-interaction #star-actions { position:static; justify-content:center; flex-wrap:wrap; }
  #star-interaction #star-load { position:static; max-width:none; text-align:center; line-height:1.5; }
  #star-interaction #well { position:static; width:100%; transform:none; }
  .keyboard-open #star-interaction { bottom:calc(16px + var(--keyboard-inset,0px)); }
  .keyboard-open #star-interaction #star-actions,
  .keyboard-open #star-interaction #star-load { display:none; }
}
@media(max-width:560px) and (min-height:501px){
  #star-interaction { bottom:calc(112px + env(safe-area-inset-bottom,0px)); }
}
@media(max-width:360px){
  #star-interaction { width:calc(100vw - 24px); }
}