:root {
  /* Forever chrome: deep water + brass. The letter keeps the goblin's own parchment and wax. */
  --navy: #032741; --navy-deep: #021a2c; --navy-hi: #0d3350; --slate: #15506e; --teal: #3092b2; --shallows: #7dc2c7;
  --brass: #baa080; --brass-hi: #d4bb95; --bronze: #9a7a58; --bronze-dark: #705539; --bone: #fbf0df;
  --gold: var(--brass); --gold-bright: var(--brass); --frame: var(--navy); --frame-hi: var(--navy-hi);
  --trim: var(--bronze); --trim-dark: #1a1410; --parchment: #e8d7b0; --parchment-edge: #c9b78e;
  --ink: #2a2015; --ink-soft: #6a5438; --cream: #dac6ab; --muted: var(--brass);
  --red: #8a2d1c; --red-dark: #5a1a10; --uncommon: #1eff00;
  --q-common: #ffffff; --q-gold: #ffd100; --q-grey: #9d9d9d;
  --gutter: 16px;
  --serif: "Crimson Pro", Georgia, serif;
  --display: Cinzel, Georgia, serif;
  --type: "Special Elite", "Courier New", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--navy-deep); color: var(--parchment); font: 17px/1.5 var(--serif); }
[hidden] { display: none !important; }
a { color: var(--shallows); }
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 3px;
}

/* Page shells */
.page { position: relative; min-height: 100vh; padding: 56px var(--gutter) 64px; }
.page > * { position: relative; z-index: 1; }
.hero { background-color: var(--navy); background-position: center 40%; background-size: cover; background-repeat: no-repeat; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(3,39,65,.5) 0%, rgba(3,39,65,.2) 30%, rgba(3,39,65,.45) 70%, rgba(2,26,44,.95) 100%),
    radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 35%, rgba(2,20,35,.6) 100%);
}
.plain {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(48,146,178,.16), rgba(48,146,178,0) 60%),
    radial-gradient(ellipse at 50% 100%, rgba(186,160,128,.12), rgba(186,160,128,0) 55%),
    var(--navy-deep);
}

.hdr { text-align: center; margin-bottom: 28px; }
.mark { display: block; flex: none; object-fit: cover; border-radius: 22.5%; }
.mark-lg { width: 72px; height: 72px; margin: 0 auto 14px; box-shadow: 0 0 0 1px var(--brass), 0 6px 18px rgba(0,0,0,.55); }
.mark-sm { width: 36px; height: 36px; }
.ttl { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 480px) { .mark-lg { width: 56px; height: 56px; } }
.hdr h1 {
  font-family: var(--display); font-weight: 700; font-size: 36px; letter-spacing: .06em; color: var(--bone);
  margin: 0; text-shadow: 0 2px 0 #5a3f27, 0 0 30px rgba(186,160,128,.25), 0 2px 12px rgba(0,0,0,.8);
}
.hdr p { margin: 8px auto 0; max-width: 34em; font-size: 18px; color: var(--cream); font-style: italic; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0,0,0,.8); }

/* Gold-trimmed window */
.win {
  max-width: 700px; margin: 0 auto; background: var(--frame); border: 2px solid var(--trim);
  outline: 2px solid #312820; outline-offset: 2px;
  box-shadow: inset 0 0 0 1px var(--brass), inset 0 0 0 5px var(--frame), inset 0 0 0 6px rgba(186,160,128,.45), 0 30px 60px rgba(0,0,0,.7); position: relative;
}
.win::before, .win::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold); background: var(--frame); transform: rotate(45deg);
}
.win::before { left: -9px; top: -9px; }
.win::after { right: -9px; top: -9px; }
.title {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px;
  font-family: var(--display); font-weight: 700; letter-spacing: .08em; font-size: 14px; color: var(--gold-bright);
  text-align: center; padding: 10px 14px; background: linear-gradient(var(--frame-hi), var(--frame)); border-bottom: 1px solid var(--teal);
}
.title i { font-style: normal; color: var(--teal); margin: 0 10px; }
.title .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--cream); letter-spacing: .04em; }
.title.split { justify-content: space-between; text-align: left; flex-wrap: wrap; }
.title .acct { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--serif); font-weight: 600; letter-spacing: .02em; }
.linkbtn { background: none; border: 0; padding: 4px 2px; font: 600 14px var(--serif); color: var(--gold-bright); text-decoration: underline; cursor: pointer; }

/* Letter */
.letter {
  margin: 22px; background: var(--parchment); color: var(--ink); padding: 24px 28px; position: relative; isolation: isolate;
  box-shadow: inset 0 0 40px rgba(120,80,20,.25), inset 0 0 0 1px var(--parchment-edge);
}
.to { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; white-space: nowrap; }
.to img { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bronze); box-sizing: border-box; object-fit: cover; }
.from { font-size: 14px; color: var(--ink-soft); margin-bottom: 4px; }
.subject { font-family: var(--display); font-weight: 700; font-size: 21px; margin: 0 0 14px; color: var(--ink); }
.item { display: flex; align-items: center; gap: 14px; background: var(--frame); color: var(--parchment); padding: 10px 12px; border: 1px solid var(--bronze-dark); margin: 0 0 14px; width: fit-content; max-width: 100%; }
.icon { flex: none; width: 44px; height: 44px; border: 2px solid var(--uncommon); box-sizing: border-box; object-fit: cover; image-rendering: auto; box-shadow: 0 0 10px rgba(30,255,0,.35); }
.item b { color: var(--uncommon); font-weight: 600; font-size: 17px; display: block; }
.item small { color: var(--muted); font-size: 13px; }
.money { font-size: 17px; margin: 0 0 12px; }
.coin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin: 0 2px 0 6px; }
.coin-g { background: radial-gradient(circle at 35% 35%, #ffe79a, #c9a035 60%, #8a6a1c); }
.coin-s { background: radial-gradient(circle at 35% 35%, #fff, #b7bcc2 60%, #6f757c); }
.coin-c { background: radial-gradient(circle at 35% 35%, #f3b48b, #b86a3a 60%, #6e3d20); }
.money .note { color: var(--ink-soft); }
.body { font-size: 17px; line-height: 1.55; margin: 0 0 14px; }
.wire { font-family: var(--type); font-size: 15px; background: #f6efd8; display: inline-block; padding: 4px 10px 2px; transform: rotate(-.6deg); box-shadow: 0 1px 0 #cdbd8e; color: #221b12; }
.letter::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%238a6a1c' stroke-opacity='.12' stroke-width='2' vector-effect='non-scaling-stroke'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 6.1L50 54.6L100 6.1'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 88.1L37.3 46.1M100 88.1L62.7 46.1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask-image: radial-gradient(circle at 50% 54.6%, transparent 76px, #000 77px);
  -webkit-mask-image: radial-gradient(circle at 50% 54.6%, transparent 76px, #000 77px);
}
.letter > * { position: relative; z-index: 1; }
.letter > .seal {
  position: absolute; left: 50%; top: 54.6%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  width: 150px; height: 150px; border-radius: 50%; mix-blend-mode: multiply;
  background: radial-gradient(circle at 40% 35%, rgba(201,59,46,.10), rgba(122,31,22,.10) 70%, rgba(90,21,15,.10));
  display: grid; place-items: center; font-family: var(--display); font-weight: 900; color: rgba(201,160,53,.18); font-size: 62px;
}

/* Buttons */
.btns { display: flex; gap: 12px; padding: 0 22px 22px; flex-wrap: wrap; }
.btns:not(:has(.btn:not([hidden]))) { display: none; }
.btn {
  flex: 1 1 220px; display: block; text-align: center; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .04em;
  color: #1c1713; padding: 12px 16px; background: linear-gradient(var(--brass-hi), var(--bronze) 55%, var(--bronze-dark)); border: 1px solid #312820;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 #000; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  text-decoration: none; cursor: pointer; font-size: 15px;
}
.btn:has(> .ico) { display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn .ico { flex: none; display: block; }
.btn:hover { filter: brightness(1.12); }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.btn[aria-disabled="true"]:hover { filter: none; }
.btn[aria-disabled="true"]:active { transform: none; }
.btn:active { transform: translateY(1px); }
.btn.alt { background: linear-gradient(var(--slate), var(--navy)); color: var(--bone); border-color: var(--bronze); text-shadow: 0 1px 1px #000; box-shadow: inset 0 1px 0 rgba(125,194,199,.3), 0 2px 0 #000; }
.btn em { display: block; font: 400 13px var(--serif); letter-spacing: 0; color: #312820; margin-top: 2px; }
.btn.alt em { color: var(--brass); }
button.btn { width: auto; }
.signin-pad { padding: 8px 16px 16px; }
.signin-pad .btn { width: 100%; }

.foot { text-align: center; font-size: 15px; color: var(--cream); text-shadow: 0 1px 3px #000; margin: 22px auto 0; max-width: 700px; }
.foot a { color: var(--shallows); white-space: nowrap; }
.foot .sep { display: inline-block; width: 10px; }

/* Web auction view */
.rowlist { list-style: none; margin: 0; padding: 0; }
.letter.list { padding: 16px 20px; }
.sect { font-family: var(--display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 6px; }
.sect:first-child { margin-top: 0; }
.rowlist li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--parchment-edge);
}
.rowlist li:last-child { border-bottom: 0; }
.rowlist li.empty { display: block; color: var(--ink-soft); font-style: italic; }
.name { font-weight: 600; font-size: 18px; overflow-wrap: anywhere; min-width: 0; color: #0f6b00; text-shadow: 0 0 0 #000; }
.rowlist li.done .name { color: var(--q-grey); }
.qty { color: var(--ink-soft); font-weight: 400; font-size: 15px; }
.price { text-align: right; white-space: nowrap; font-size: 16px; }
.meta { color: var(--ink-soft); font-size: 14px; }
.pill {
  justify-self: end; display: inline-block; padding: 0 10px; border-radius: 999px; font-size: 13px; line-height: 1.6;
  background: var(--frame); border: 1px solid var(--trim); text-transform: capitalize; font-weight: 600;
}
.pill.active { color: var(--q-common); }
.pill.sold, .pill.sold_ingame { color: var(--q-gold); }
.pill.expired, .pill.unknown, .pill.cancelled { color: var(--q-grey); }
.notice { margin: 0 16px 16px; color: var(--cream); font-size: 15px; }
.notice:empty { display: none; }
.letter .notice { margin: 12px 0 0; color: var(--ink-soft); }
.alert { margin: 16px; padding: 10px 14px; background: #3a1510; border: 1px solid var(--red); color: #f3c7bd; }

/* Phones with push notifications (decorative) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.duo { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 28px; justify-content: center; align-items: center; }
.duo .win { margin: 0 auto; width: 100%; }
.cluster { position: relative; order: -1; display: flex; justify-content: center; pointer-events: none; }
.phone { width: 280px; height: 580px; border-radius: 46px; background: #0d0d0f; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.7), inset 0 0 0 2px #2a2a2e; position: relative; flex: none; }
.phone.android { display: none; }
.phone .screen { position: absolute; inset: 10px; border-radius: 38px; overflow: hidden; background:
    radial-gradient(ellipse at 50% 110%, #1b3b3a 0%, rgba(27,59,58,0) 60%), linear-gradient(180deg, #0a1a24 0%, #102c38 60%, #15393c 100%); }
.phone .screen::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.5) 100%); }
.phone .screen::after { content: ""; position: absolute; inset: 0; z-index: 0; background: url("https://api.goblintelegram.com/api/files/assets/jbpzu35gzpsqlut/harbour_7r20m7emzq.jpg") center 55% / cover no-repeat; opacity: .85; }
.phone { --k: .897; --u: calc(1px * var(--k)); }
.phone .screen > * { position: absolute; z-index: 2; }
.phone .ic { display: block; height: calc(11 * var(--u)); width: auto; }
.phone .sbar { display: flex; align-items: center; gap: calc(5 * var(--u)); top: calc(17 * var(--u)); right: calc(22 * var(--u)); }
.phone .clock { color: #fff; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.35); font-family: -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif; white-space: nowrap; }
.phone .date { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.45); white-space: nowrap; }
.phone .nt { min-width: 0; }
.phone .appicon { display: block; object-fit: cover; }
.phone .screen::before { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.5) 100%); }
/* iPhone */
.phone.ios .island { top: calc(11 * var(--u)); left: 32%; width: 36%; height: calc(30 * var(--u)); background: #000; border-radius: 99px; z-index: 3; }
.phone.ios .sbar { top: calc(19 * var(--u)); right: calc(24 * var(--u)); z-index: 3; }
.phone.ios .date { left: 0; right: 0; top: calc(66 * var(--u)); text-align: center; font: 500 max(10px, calc(15 * var(--u)))/1.2 -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif; }
.phone.ios .clock { left: 0; right: 0; top: calc(82 * var(--u)); font-size: calc(86 * var(--u)); line-height: 1.02; font-weight: 200; letter-spacing: -.03em; color: rgba(255,255,255,.94); }
.phone.ios .stack { left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(86 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.notif { display: grid; align-items: start; }
.notif.ios { grid-template-columns: calc(40 * var(--u)) 1fr; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(22 * var(--u)); background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif; font-size: max(10px, calc(13 * var(--u))); line-height: 1.3; }
.notif.ios .appicon { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(9 * var(--u)); }
.notif.ios .top { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); font-weight: 700; color: #111; }
.notif.ios .top span:last-child { font-weight: 400; color: #555; font-size: max(10px, calc(12 * var(--u))); }
.notif.ios .ntitle { font-weight: 600; color: #111; }
.notif.ios .msg { font-weight: 400; color: #222; }
.phone .rb { bottom: calc(18 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; z-index: 3; }
.phone .rb svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.phone .rb.l { left: calc(18 * var(--u)); } .phone .rb.r { right: calc(18 * var(--u)); }
.phone .home { bottom: calc(7 * var(--u)); left: 50%; width: calc(112 * var(--u)); height: calc(5 * var(--u)); margin-left: calc(-56 * var(--u)); border-radius: 3px; background: rgba(255,255,255,.85); z-index: 3; }
/* Pixel */
.phone.android .screen::before { background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,.62) 100%); }
.phone.android .punch { top: calc(12 * var(--u)); left: 50%; width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin-left: calc(-6.5 * var(--u)); border-radius: 50%; background: #000; z-index: 3; }
.phone.android .sbar { top: calc(12 * var(--u)); right: calc(18 * var(--u)); gap: calc(6 * var(--u)); }
.phone.android .ic { height: calc(10 * var(--u)); }
.phone.android .clock { left: calc(18 * var(--u)); top: calc(46 * var(--u)); text-align: left; font: 400 calc(64 * var(--u))/1 Roboto, "Helvetica Neue", sans-serif; letter-spacing: -.01em; }
.phone.android .date { left: calc(18 * var(--u)); top: calc(118 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); font: 400 max(10px, calc(15 * var(--u)))/1.2 Roboto, "Helvetica Neue", sans-serif; }
.phone.android .wx { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-left: calc(4 * var(--u)); }
.notif.android { left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(166 * var(--u)); grid-template-columns: calc(36 * var(--u)) 1fr calc(24 * var(--u)); gap: calc(10 * var(--u)); align-items: center; padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(28 * var(--u)); background: rgba(255,255,255,.9); font-family: Roboto, "Helvetica Neue", sans-serif; font-size: max(10px, calc(13 * var(--u))); line-height: 1.35; }
.notif.android .ico { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; overflow: hidden; display: block; }
.notif.android .appicon { width: 100%; height: 100%; border-radius: 50%; }
.notif.android .top { font-weight: 500; color: #1f1f1f; white-space: nowrap; }
.notif.android .top span { font-weight: 400; color: #5f6368; }
.notif.android .msg { color: #3c4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif.android .chev { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.phone.android .fp { left: 50%; top: 72%; width: calc(64 * var(--u)); height: calc(64 * var(--u)); margin: calc(-32 * var(--u)) 0 0 calc(-32 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.phone.android .fp svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.phone.android .qb { bottom: calc(26 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(255,255,255,.2); display: grid; place-items: center; z-index: 3; }
.phone.android .qb svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.phone.android .qb.l { left: calc(26 * var(--u)); } .phone.android .qb.r { right: calc(26 * var(--u)); }
.phone.android .navpill { bottom: calc(8 * var(--u)); left: 50%; width: calc(108 * var(--u)); height: calc(4 * var(--u)); margin-left: calc(-54 * var(--u)); border-radius: 3px; background: rgba(255,255,255,.85); z-index: 3; }

@media (min-width: 1360px) {
  .duo { grid-template-columns: minmax(0, 700px) 600px; }
  .cluster { order: 0; display: block; height: 740px; }
  .cluster .phone { width: 310px; height: 640px; position: absolute; }
  .cluster .phone.ios { left: 0; top: 40px; z-index: 2; transform: rotate(-5deg); }
  .cluster .phone.android { display: block; left: 280px; top: -6px; transform: rotate(6deg) scale(.94); opacity: .97; }
  .phone { --k: 1; }
}
@media (max-width: 759px) {
  .cluster .phone { width: 240px; height: 500px; border-radius: 40px; }
  .phone .screen { border-radius: 32px; }
  .phone { --k: .759; }
}

@media (max-width: 480px) {
  .page { padding: 32px 16px 40px; }
  .hdr h1 { font-size: 28px; }
  .hdr p { font-size: 16px; }
  .win { margin-left: 4px; margin-right: 4px; }
  .letter { margin: 10px; padding: 18px 16px; }
  .letter > .seal { width: 110px; height: 110px; font-size: 46px; }
  .letter::before {
    mask-image: radial-gradient(circle at 50% 54.6%, transparent 56px, #000 57px);
    -webkit-mask-image: radial-gradient(circle at 50% 54.6%, transparent 56px, #000 57px);
  }
  .subject { font-size: 18px; }
  .btns { flex-direction: column; gap: 10px; padding: 0 10px 12px; }
  .btn { flex: none; width: 100%; }
  .title { font-size: 12px; letter-spacing: .05em; padding: 10px; }
  .title i { margin: 0 4px; }
  .letter.list { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .wire { transform: none; }
  .btn:active { transform: none; }
}

/* Telegraph decode: pretend-Morse that clicks into English (see js/landing.js) */
.dc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dc-vis { font-variant-numeric: tabular-nums; }
.dc-cur { animation: dc-blink .5s steps(1) infinite; }
@keyframes dc-blink { 50% { opacity: 0; } }
.dc-flash { animation: dc-flash .4s ease-out; }
@keyframes dc-flash { from { color: var(--shallows); } }