/* ===================================================================
   1980s II : SELEEN D — screens.css
   liner notes · crate · merch · arcade · game · modals · hint
   =================================================================== */

/* =================================================================
   LINER NOTES
   ================================================================= */
.liner { padding: 62px 26px 104px; }
.liner-hd { display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.2em; color: color-mix(in srgb,var(--paper) 60%, transparent); margin-bottom: 22px; }
.liner-hd .ln-back { color: var(--blue); cursor: pointer; }
.liner-hd .ln-page { color: var(--gold); }

.ln-sleeve { border-left: 3px solid var(--red); padding-left: 14px; margin-bottom: 22px; }
.ln-track-no { font-family:"Press Start 2P",monospace; font-size: 22px; color: var(--blue); margin-bottom: 10px;
  text-shadow: 2px 2px 0 color-mix(in srgb,var(--blue) 35%, black); }
.ln-ttl { margin: 0; font-family:"Times New Roman",serif; font-style: italic; font-weight: 400; font-size: 34px; line-height: 1;
  color: var(--paper); text-shadow: 1.5px 0 0 var(--red), -1.5px 0 0 var(--blue); }
.ln-by { margin-top: 8px; font-size: 9.5px; letter-spacing: 0.2em; color: color-mix(in srgb,var(--paper) 60%, transparent); }

.ln-body { margin-bottom: 24px; }
.ln-body .lyric { font-family:"Times New Roman",serif; font-size: 19px; line-height: 1.5; margin: 0 0 16px;
  color: color-mix(in srgb,var(--paper) 92%, transparent); text-wrap: pretty; }
.ln-body .lyric .h { color: var(--gold); font-style: italic; }
.ln-body .note { font-family:"JetBrains Mono",monospace; font-size: 11px; line-height: 1.7; letter-spacing: 0.02em;
  color: color-mix(in srgb,var(--paper) 68%, transparent); border-top: 1px solid var(--line); padding-top: 14px; }

.ln-credits { border: 1.5px solid var(--line); padding: 14px; margin-bottom: 20px; }
.ln-cred-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 10px; letter-spacing: 0.14em;
  color: color-mix(in srgb,var(--paper) 70%, transparent); }
.ln-cred-row span:last-child { color: var(--paper); }

.ln-nav { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 0.18em; }
.ln-nav span#ln-prev, .ln-nav span#ln-next { color: var(--blue); cursor: pointer; }
.ln-dots { display: flex; gap: 5px; }
.ln-dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb,var(--paper) 30%, transparent); }
.ln-dots i.on { background: var(--red); }

/* =================================================================
   THE CRATE
   ================================================================= */
.crate { padding: 62px 24px 104px; }
.crate-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px;
  font-size: 12px; letter-spacing: 0.2em; }
.crate-hd span:first-child { font-family:"Press Start 2P",monospace; font-size: 13px; color: var(--gold);
  text-shadow: 1.5px 1.5px 0 color-mix(in srgb,var(--gold) 30%, black); }
.crate-ct { color: color-mix(in srgb,var(--paper) 55%, transparent); font-size: 10px; }
.crate-note { font-size: 10.5px; line-height: 1.6; letter-spacing: 0.04em; color: color-mix(in srgb,var(--paper) 62%, transparent); margin: 8px 0 18px; }

.crate-stack { display: flex; flex-direction: column; gap: 12px; }
.crate-item { display: grid; grid-template-columns: 92px 1fr 18px; align-items: center; gap: 14px;
  border: 1.5px solid var(--line); padding: 12px; cursor: pointer; background: var(--panel-2);
  transition: border-color 0.14s, transform 0.1s; }
.crate-item:hover { border-color: var(--red); }
.crate-item:active { transform: scale(0.99); }
.crate-thumb { width: 92px; height: 92px; border: 1.5px solid var(--ink); position: relative; overflow: hidden;
  image-rendering: pixelated; }
.crate-thumb.poster { background: linear-gradient(135deg, var(--red), var(--gold)); }
.crate-thumb.zine { background: repeating-linear-gradient(0deg, var(--paper) 0 5px, var(--ink) 5px 7px); }
.crate-thumb.sleeve { background: radial-gradient(circle at 50% 45%, var(--gold), var(--red) 60%, var(--ink)); }
.crate-thumb.stencil { background:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%) -10px 0,
    linear-gradient(-45deg, var(--ink) 25%, transparent 25%) -10px 0,
    var(--blue); background-size: 20px 20px; }
.crate-thumb.stems { background:
    repeating-linear-gradient(90deg, var(--blue) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, var(--panel), var(--ink)); }
.crate-thumb.wallpaper { background: linear-gradient(180deg, var(--blue), var(--red)); }
.crate-thumb::after { content:attr(data-tag); position:absolute; bottom:4px; left:4px; font-family:"JetBrains Mono",monospace;
  font-size: 7px; letter-spacing: 0.1em; color: var(--paper); background: rgba(0,0,0,0.5); padding: 1px 4px; }
.crate-meta .ci-ttl { font-family:"Times New Roman",serif; font-style: italic; font-size: 18px; line-height: 1.1; }
.crate-meta .ci-info { font-size: 9.5px; letter-spacing: 0.1em; color: color-mix(in srgb,var(--paper) 55%, transparent); margin-top: 4px; text-transform: uppercase; }
.crate-item .ci-arrow { color: var(--blue); font-size: 15px; }

.crate-print { margin-top: 18px; height: 56px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--paper); font-size: 12px; letter-spacing: 0.18em; cursor: pointer; color: var(--paper);
  transition: background 0.14s, color 0.14s; }
.crate-print:hover { background: var(--paper); color: var(--ink); }

/* action sheet */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; color: var(--paper);
  background: var(--panel); border-top: 2px solid var(--red); padding: 20px 26px 30px;
  transform: translateY(100%); transition: transform 0.28s cubic-bezier(.5,0,.2,1); }
.sheet.open { transform: translateY(0); }
.sheet-grab { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 42px; height: 4px;
  background: color-mix(in srgb,var(--paper) 40%, transparent); border-radius: 2px; }
.sheet h3 { font-family:"Times New Roman",serif; font-style: italic; font-weight: 400; font-size: 23px; margin: 14px 0 4px;
  text-shadow: 1px 0 0 var(--red), -1px 0 0 var(--blue); }
.sheet-sub { font-size: 10px; letter-spacing: 0.06em; color: color-mix(in srgb,var(--paper) 55%, transparent); margin-bottom: 6px; }
.sheet-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; cursor: pointer;
  border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.sheet-row:hover { color: var(--red); }
.sheet-row .ic { color: var(--blue); }
.sheet-cancel { margin-top: 14px; text-align: center; border: 1.5px solid var(--paper); padding: 13px;
  font-size: 12px; letter-spacing: 0.14em; cursor: pointer; text-transform: uppercase; }

/* =================================================================
   MERCH BOOTH
   ================================================================= */
.merch { padding: 62px 24px 104px; }
.merch-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px;
  font-size: 12px; letter-spacing: 0.2em; }
.merch-hd span:first-child { font-family:"Press Start 2P",monospace; font-size: 12px; color: var(--red);
  text-shadow: 1.5px 1.5px 0 var(--gold); }
.merch-bag { color: var(--blue); font-size: 10px; }
.merch-bag b { color: var(--paper); }

.merch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.merch-card { border: 1.5px solid var(--line); background: var(--panel-2); cursor: pointer; overflow: hidden;
  transition: border-color 0.14s, transform 0.1s; }
.merch-card:hover { border-color: var(--red); }
.merch-card:active { transform: scale(0.985); }
.merch-card.wide { grid-column: 1 / -1; }
.mc-art { height: 150px; position: relative; overflow: hidden; image-rendering: pixelated;
  border-bottom: 1.5px solid var(--line); display: grid; place-items: center; }
.merch-card.wide .mc-art { height: 178px; }
.mc-art .tag { position: absolute; top: 8px; left: 8px; font-size: 8px; letter-spacing: 0.16em; font-weight: 700;
  background: var(--gold); color: var(--ink); padding: 2px 6px; }
.mc-body { padding: 11px 12px 13px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mc-ttl { font-family:"Times New Roman",serif; font-style: italic; font-size: 17px; line-height: 1.05; }
.mc-price { font-family:"JetBrains Mono",monospace; font-size: 13px; color: var(--red); font-weight: 700; }

/* art treatments per product */
.art-tee { background: radial-gradient(ellipse at 50% 30%, var(--panel), var(--bg)); }
.art-tee .tee-shape { width: 96px; height: 96px; position: relative; background: var(--ink); border: 2px solid var(--paper);
  clip-path: polygon(28% 8%, 38% 0, 62% 0, 72% 8%, 100% 22%, 88% 42%, 78% 36%, 78% 100%, 22% 100%, 22% 36%, 12% 42%, 0 22%); }
.art-tee .tee-shape::after { content:"1980s II"; position:absolute; left:50%; top:52%; transform: translate(-50%,-50%);
  font-family:"Press Start 2P",monospace; font-size: 7px; color: var(--gold); white-space: nowrap; }
.art-sticker { background: conic-gradient(from 45deg, var(--red), var(--gold), var(--blue), var(--red)); }
.art-sticker::before { content:""; position:absolute; inset:18px; background: var(--panel); border-radius: 8px;
  border: 2px dashed var(--paper); }
.art-sticker::after { content:"◆ ◇ ★"; position:absolute; inset:0; display:grid; place-items:center;
  font-size: 22px; color: var(--paper); letter-spacing: 4px; }
.art-vinyl { background: linear-gradient(135deg, var(--blue), var(--red)); }
.art-vinyl .disc { width: 132px; height: 132px; border-radius: 50%; border: 2px solid var(--paper); position: relative;
  background: radial-gradient(circle, var(--ink) 0 22%, #3a3a3a 22.5%, var(--ink) 25%, var(--panel-2) 60%, var(--ink) 92%); }
.art-vinyl .disc::after { content:""; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, var(--red), var(--gold)); border: 1.5px solid var(--paper); }
.art-cd { background: radial-gradient(ellipse at 50% 50%, var(--panel), var(--bg)); }
.art-cd .disc { width: 110px; height: 110px; border-radius: 50%; position: relative;
  background: conic-gradient(from 0deg, #c8d0d8, #f0e6c8, #b8c8d8, #e8d8c0, #c8d0d8); border: 1.5px solid var(--paper); }
.art-cd .disc::after { content:""; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--paper); }

/* merch detail overlay */
.merch-detail { position: absolute; inset: 0; z-index: 40; background: var(--panel); color: var(--paper);
  padding: 62px 0 104px; transform: translateX(100%); transition: transform 0.3s cubic-bezier(.5,0,.2,1); visibility: hidden; }
.merch-detail.open { transform: translateX(0); visibility: visible; }
.md-back { position: absolute; top: 60px; left: 22px; z-index: 5; font-size: 11px; letter-spacing: 0.18em; color: var(--blue); cursor: pointer; }
.md-pkg { margin: 24px 24px 16px; height: 320px; border: 2px solid var(--paper); position: relative; overflow: hidden;
  display: grid; place-items: center; }
.md-body { padding: 0 26px; }
.md-body h2 { margin: 0 0 4px; font-family:"Times New Roman",serif; font-style: italic; font-weight: 400; font-size: 30px;
  text-shadow: 1.5px 0 0 var(--red), -1.5px 0 0 var(--blue); }
.md-price { font-family:"Times New Roman",serif; font-style: italic; font-size: 24px; color: var(--red); margin-bottom: 14px; }
.md-specs { font-size: 11px; line-height: 1.9; letter-spacing: 0.04em; color: color-mix(in srgb,var(--paper) 78%, transparent); text-transform: uppercase; }
.md-buy { position: absolute; bottom: 108px; left: 24px; right: 24px; height: 58px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--paper); color: var(--ink); font-size: 14px; letter-spacing: 0.06em; font-weight: 600; }
.md-buy .ap { width: 20px; height: 20px; display: inline-block;
  background: var(--ink);
  -webkit-mask: radial-gradient(circle at 60% 38%, #000 16%, transparent 17%) no-repeat; }
.md-buy b { font-weight: 700; }

/* =================================================================
   DOOKU QUEST — ARCADE + GAME
   ================================================================= */
.arcade { height: 100%; overflow: hidden !important; position: relative; padding-top: 58px;
  background: radial-gradient(ellipse at 50% 28%, color-mix(in srgb,var(--red) 26%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb,var(--blue) 14%, var(--bg)) 0%, var(--bg) 100%); image-rendering: pixelated; }
.arc-hi { position: absolute; top: 60px; left: 24px; right: 24px; display: flex; justify-content: space-between;
  font-family:"Press Start 2P",monospace; font-size: 8px; letter-spacing: 0.05em; color: var(--paper); z-index: 3; }
.arc-hi span:first-child { color: var(--red); }
.arc-floor { position: absolute; bottom: 130px; left: -10%; right: -10%; height: 230px; transform-origin: 50% 100%;
  transform: perspective(220px) rotateX(58deg);
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb,var(--blue) 45%, transparent) 82%, var(--blue) 100%),
    repeating-linear-gradient(0deg, transparent 0 20px, color-mix(in srgb,var(--blue) 50%, transparent) 20px 21px),
    repeating-linear-gradient(90deg, transparent 0 24px, color-mix(in srgb,var(--red) 40%, transparent) 24px 25px); }
.arc-floor::after { content:""; position: absolute; left:0; right:0; bottom:0; height:3px; background: var(--red); box-shadow: 0 0 18px var(--red); }
.arc-sun { position: absolute; top: 108px; left: 50%; transform: translateX(-50%); width: 124px; height: 124px;
  background: radial-gradient(circle at 50% 45%, var(--gold) 0%, var(--red) 55%, color-mix(in srgb,var(--red) 50%, black) 100%);
  box-shadow: 0 0 34px color-mix(in srgb,var(--red) 55%, transparent); image-rendering: pixelated;
  clip-path: polygon(0% 30%,12% 30%,12% 18%,28% 18%,28% 8%,72% 8%,72% 18%,88% 18%,88% 30%,100% 30%,100% 70%,88% 70%,88% 82%,72% 82%,72% 92%,28% 92%,28% 82%,12% 82%,12% 70%,0% 70%); }
.arc-sun::after { content:""; position:absolute; left:0; right:0; top:50%; height:50%;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(20,16,10,0.6) 5px 8px); }
.arc-title { position: absolute; top: 244px; left: 0; right: 0; text-align: center; z-index: 3; }
.arc-meta { font-family:"JetBrains Mono",monospace; font-size: 9px; letter-spacing: 0.3em; color: var(--blue); margin-bottom: 8px; }
.arc-title h1 { margin: 0; font-family:"Press Start 2P",monospace; font-size: 34px; line-height: 1.1; color: var(--paper);
  text-shadow: 2px 0 0 var(--red), -2px 0 0 var(--blue), 0 0 24px color-mix(in srgb,var(--gold) 40%, transparent); }
.arc-sub { font-family:"Times New Roman",serif; font-style: italic; font-size: 16px; color: var(--gold); margin-top: 10px; }
.arc-insert { position: absolute; top: 400px; left: 0; right: 0; text-align: center; z-index: 3;
  font-family:"Press Start 2P",monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--blue);
  animation: blink 1s steps(2) infinite; }
.arc-ctrl { position: absolute; left: 24px; right: 24px; bottom: 116px; z-index: 3; display: grid; gap: 10px; }
.arc-btn { padding: 14px; text-align: center; font-family:"Press Start 2P",monospace; font-size: 11px; letter-spacing: 0.04em;
  cursor: pointer; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--red); }
.arc-btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--red); }
.arc-btn.alt { background: transparent; color: var(--blue); border-color: var(--blue); box-shadow: 4px 4px 0 var(--blue); font-size: 9px; }

.game-loading { position: absolute; inset: 0; z-index: 70; background: #000; visibility: hidden; opacity: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--blue);
  font-family:"Press Start 2P",monospace; transition: opacity 0.2s; }
.game-loading.open { visibility: visible; opacity: 1; }
.game-loading .gl-ttl { font-size: 10px; letter-spacing: 0.18em; }
.game-loading .gl-bar { width: 220px; height: 14px; border: 1.5px solid var(--blue); overflow: hidden; }
.game-loading .gl-bar i { display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, var(--blue) 0 6px, var(--red) 6px 12px); }
.game-loading.open .gl-bar i { animation: loadbar 1.6s ease-in-out forwards; }
@keyframes loadbar { to { width: 100%; } }
.game-loading .gl-build { font-family:"JetBrains Mono",monospace; font-size: 9px; letter-spacing: 0.16em; color: color-mix(in srgb,var(--paper) 50%, transparent); }

/* game frame */
.game { height: 100%; overflow: hidden !important; position: relative; padding-top: 56px; background: var(--bg); }
.game-quit { position: absolute; top: 24px; left: 18px; z-index: 6; font-size: 11px; letter-spacing: 0.18em; color: var(--blue); cursor: pointer; }
.game-hud { position: absolute; top: 56px; left: 0; right: 0; z-index: 4; display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding: 10px 18px; background: color-mix(in srgb,var(--panel) 85%, transparent); border-bottom: 1.5px solid var(--blue);
  font-family:"JetBrains Mono",monospace; }
.game-hud .lbl { display: block; font-size: 8px; letter-spacing: 0.18em; opacity: 0.6; margin-bottom: 3px; }
.game-hud .v { font-size: 16px; font-weight: 700; color: var(--red); }
.game-hud .v.cy { color: var(--blue); }
.game-hud .center { text-align: center; } .game-hud .right { text-align: right; }
.canvas-slot { position: absolute; top: 116px; left: 18px; right: 18px; bottom: 232px; z-index: 2;
  border: 2px dashed color-mix(in srgb,var(--blue) 55%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--blue); overflow: hidden;
  background: repeating-linear-gradient(0deg, color-mix(in srgb,var(--blue) 6%, transparent) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, color-mix(in srgb,var(--blue) 6%, transparent) 0 8px, transparent 8px 16px), var(--bg); }
.canvas-slot .corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--blue); }
.canvas-slot .corner.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.canvas-slot .corner.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.canvas-slot .corner.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.canvas-slot .corner.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.cs-ph { padding: 22px; z-index: 2; }
.cs-lbl { display: inline-block; font-family:"JetBrains Mono",monospace; font-size: 8px; letter-spacing: 0.24em;
  background: var(--blue); color: var(--ink); padding: 4px 8px; margin-bottom: 16px; font-weight: 700; }
.cs-ttl { font-family:"Times New Roman",serif; font-style: italic; font-size: 21px; color: var(--paper); margin-bottom: 8px;
  text-shadow: 1px 0 0 var(--red), -1px 0 0 var(--blue); }
.cs-sub { font-size: 10px; line-height: 1.7; letter-spacing: 0.04em; color: color-mix(in srgb,var(--paper) 52%, transparent);
  text-transform: uppercase; max-width: 220px; margin: 0 auto; }
.cs-demo { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 8px; z-index: 1; }
.cs-demo i { width: 12px; height: 12px; image-rendering: pixelated; animation: bop 0.6s ease-in-out infinite; }
.cs-demo i:nth-child(1){background:var(--red);} .cs-demo i:nth-child(2){background:var(--paper);animation-delay:.1s;}
.cs-demo i:nth-child(3){background:var(--blue);animation-delay:.2s;} .cs-demo i:nth-child(4){background:var(--gold);animation-delay:.3s;}
.cs-demo i:nth-child(5){background:var(--red);animation-delay:.4s;}
@keyframes bop { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.game-now { position: absolute; bottom: 160px; left: 18px; right: 18px; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1.5px solid var(--line); background: color-mix(in srgb,var(--panel) 85%, transparent); }
.game-now .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }
.game-now .lbl { font-size: 8px; letter-spacing: 0.2em; color: color-mix(in srgb,var(--paper) 55%, transparent); margin-bottom: 2px; }
.game-now .ttl { font-family:"Times New Roman",serif; font-style: italic; font-size: 15px; color: var(--paper); }
.game-pad { position: absolute; bottom: 98px; left: 18px; right: 18px; z-index: 3; height: 54px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.gp-key { display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; font-weight: 700;
  border: 1.5px solid color-mix(in srgb,var(--blue) 60%, transparent); color: var(--blue);
  background: color-mix(in srgb,var(--paper) 6%, transparent); }
.gp-key:active { background: var(--red); color: var(--ink); border-color: var(--paper); }

/* =================================================================
   MODAL (owner / discord)
   ================================================================= */
.modal { position: absolute; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb,var(--bg) 82%, transparent); backdrop-filter: blur(6px);
  visibility: hidden; opacity: 0; transition: opacity 0.2s; }
.modal.open { visibility: visible; opacity: 1; }
.modal-card { width: 86%; background: var(--panel); border: 1.5px solid var(--blue); padding: 28px 22px; text-align: center; }
.modal-stamp { display: inline-block; border: 1.4px solid var(--red); color: var(--red); padding: 4px 10px; font-size: 9px; letter-spacing: 0.18em; }
.modal-card h3 { font-family:"Times New Roman",serif; font-style: italic; font-weight: 400; font-size: 26px; margin: 16px 0 8px;
  text-shadow: 1px 0 0 var(--red), -1px 0 0 var(--blue); }
.modal-card p { font-size: 11px; line-height: 1.65; letter-spacing: 0.03em; color: color-mix(in srgb,var(--paper) 82%, transparent); margin: 0 0 22px; }
.modal-btn { width: 100%; cursor: pointer; border: none; padding: 14px; font-family:"JetBrains Mono",monospace; font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--blue); color: var(--ink); }
.modal-skip { margin-top: 14px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; color: color-mix(in srgb,var(--paper) 55%, transparent); }
.modal-verified { background: var(--red); color: var(--ink); padding: 18px; margin-bottom: 14px; font-family:"JetBrains Mono",monospace;
  font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }

/* =================================================================
   HINT line (outside phone)
   ================================================================= */
.hint { position: fixed; bottom: 18px; left: 0; right: 0; z-index: 3; text-align: center;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb,var(--paper) 38%, transparent); pointer-events: none; }