/* ME GO FACE · site chrome — kit palette: #101010 / #f4efe3 / #e23b2e / #b7af9e */
@font-face {
  font-family: 'Luckiest Guy';
  src: url('./fonts/luckiest-guy.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Black';
  src: url('./fonts/archivo-black.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --bg: #101010; --panel: #17171b; --line: #2b2b33;
  --paper: #f4efe3; --muted: #d1cbbd; --accent: #e23b2e;
  --green: #16c784; --liqr: #ea3943;
  --lg: 'Luckiest Guy', 'Arial Black', Arial, sans-serif;
  --ab: 'Archivo Black', 'Arial Black', Arial, sans-serif;
  --sans: 'JetBrains Mono', 'Space Mono', Consolas, 'Courier New', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
  background-color: var(--bg);
  background-image: 
    radial-gradient(circle at 0% 50%, rgba(22, 199, 132, 0.05) 0%, transparent 40%), 
    radial-gradient(circle at 100% 50%, rgba(234, 57, 67, 0.05) 0%, transparent 40%),
    linear-gradient(rgba(43, 43, 51, 0.3) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(43, 43, 51, 0.3) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  background-attachment: fixed;
  color: var(--paper); font-family: var(--ab); min-height: 100vh; line-height: 1.6; letter-spacing: 0.5px; 
}
.accent { color: var(--accent); }
.hidden { display: none !important; }

/* ── header ── */
header {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding: 22px 28px 16px; border-bottom: 3px solid var(--line);
}
.logo h1 { font-family: var(--lg); font-size: 36px; letter-spacing: 2px; font-weight: 400; line-height: 1; }
.logo p { font-size: 12px; letter-spacing: 3px; color: var(--muted); margin-top: 6px; }
.hud { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.meter { display: flex; flex-direction: column; gap: 5px; }
.meter-top { font-size: 12px; letter-spacing: 2px; color: var(--paper); }
.meter-top b { color: var(--paper); }
.meter-bar { width: 170px; height: 10px; background: var(--line); border: 1px solid #3a3a44; }
.meter-bar i { display: block; height: 100%; width: 0%; background: var(--accent); transition: width .4s; }

/* ── buttons & inputs ── */
.btn {
  font-family: var(--lg); font-weight: 400; letter-spacing: 1px; cursor: pointer;
  background: transparent; color: var(--paper); border: 2px solid var(--paper);
  padding: 10px 18px; font-size: 15px; transition: transform .05s, background .15s, color .15s;
  min-height: 44px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.btn:hover { background: var(--paper); color: var(--bg); box-shadow: 2px 2px 0 var(--accent); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 19px; width: 85%; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); }
.btn-primary:hover { background: #c92f24; border-color: #c92f24; color: #fff; box-shadow: 3px 3px 0 var(--paper); }
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--paper); }
.btn-ghost { border-color: var(--line); color: var(--muted); }
.btn-ghost:hover { border-color: var(--paper); background: transparent; color: var(--paper); }
.btn-x { background: var(--paper); border-color: var(--paper); color: var(--bg); }
.btn-x:hover { background: #fff; }
.btn-claim {
  background: var(--accent); border-color: var(--accent); color: #fff; font-size: 14px; padding: 7px 14px;
  animation: pulse 1.2s infinite;
}
@keyframes pulse { 50% { transform: scale(1.06); } }
.btn-connect { font-size: 12px; border-color: var(--line); color: var(--muted); padding: 9px 14px; }
.btn-connect:hover { border-color: var(--accent); color: var(--paper); background: transparent; }
.btn.side { flex: 1; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn.side.long.active { background: var(--green); border-color: var(--green); color: #04120c; }
.btn.side.short.active { background: var(--liqr); border-color: var(--liqr); color: #fff; }
.card-theme-btn.active[data-theme="classic"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.card-theme-btn.active[data-theme="orange"] { background: #ffa31a; border-color: #ffa31a; color: #1b1b1b; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: 2px; color: var(--muted); }
label small { text-transform: none; letter-spacing: 0; color: #a09a8c; }
input, select, textarea {
  background: #1e1e24; color: var(--paper); border: 1px solid var(--line);
  font-family: var(--ab); font-size: 15px; padding: 10px 12px; width: 100%; outline: none;
  min-height: 44px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder { color: #aba495; }
input:disabled { opacity: .55; color: var(--muted); }
select { appearance: none; }
textarea {
  font-family: var(--ab);
  font-size: 14px;
  line-height: 1.3;
  resize: vertical;
  min-height: 54px;
}

.chip {
  font-size: 12px; color: var(--paper); background: var(--panel); border: 1px solid var(--line);
  padding: 6px 10px; letter-spacing: 1px; align-self: center;
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.chip-btn { cursor: pointer; font-family: var(--ab); }
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── banner ── */
.banner {
  margin: 14px 28px 0; padding: 10px 14px; border-left: 4px solid var(--accent);
  background: #1a0f0d; color: var(--paper); font-size: 12px; letter-spacing: .5px;
}

/* ── tabs ── */
.tabs { display: flex; gap: 4px; justify-content: center; width: fit-content; margin: 18px auto 0; padding: 0 28px; }
.tab {
  font-family: var(--lg); font-size: 17px; letter-spacing: 1px; cursor: pointer;
  background: transparent; color: var(--muted); border: none; border-bottom: 3px solid transparent;
  padding: 10px 18px 12px;
}
.tab.active { color: var(--paper); border-bottom-color: var(--accent); }
.tab:hover { color: var(--paper); }

/* ── panels ── */
/* ── panels: form + card side by side, the pair centered on desktop ── */
.panel {
  display: none; grid-template-columns: minmax(320px, 400px) minmax(0, 560px);
  justify-content: center; align-items: start; gap: 28px;
  max-width: 1180px; margin: 0 auto; padding: 22px 28px 40px;
}
.panel.active { display: grid; }
.panel.active .controls { animation: slideInLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.panel.active .preview { animation: slideInRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

@keyframes slideInLeft {
  0% { transform: translateX(-60px); opacity: 0; }
  70% { transform: translateX(10px); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
  0% { transform: translateX(60px); opacity: 0; }
  70% { transform: translateX(-10px); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes glitchSmash {
  0% { transform: translate(0); filter: hue-rotate(0deg); }
  20% { transform: translate(-4px, 2px); filter: hue-rotate(90deg) saturate(3); opacity: 0.8; }
  40% { transform: translate(4px, -2px); filter: hue-rotate(-90deg) invert(0.2); }
  60% { transform: translate(-2px, 4px) skewX(10deg); filter: hue-rotate(180deg); }
  80% { transform: translate(2px, -4px) skewX(-10deg); filter: hue-rotate(45deg); opacity: 0.9; }
  100% { transform: translate(0); filter: hue-rotate(0deg); }
}
.glitch-anim { animation: glitchSmash 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

.controls { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 12px; align-items: flex-end; }
.row > * { flex: 1; }
.row .chip { flex: 0 0 auto; }

.roll-mobile { display: none; }
/* ── preview ── */
.preview { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.card-placeholder {
  width: 100%; max-width: 540px; aspect-ratio: 1080 / 1350; border: 3px dashed var(--line);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #55524b; font-size: 14px; line-height: 1.7; letter-spacing: 1px; padding: 20px;
}
.preview img {
  width: 100%; max-width: 540px; border: 3px solid var(--line); display: block;
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hint { font-size: 12px; color: #a09a8c; letter-spacing: .5px; text-align: center; }
.hint-inline { font-size: 12px; color: #a09a8c; letter-spacing: .5px; text-align: center;}

/* ── footer ── */
footer { border-top: 3px solid var(--line); padding: 34px 28px; text-align: center; }
footer .slogan { font-family: var(--lg); font-size: 22px; letter-spacing: 3px; }
footer .links { margin-top: 12px; font-size: 13px; letter-spacing: 2px; }
footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
footer a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.fineprint { margin-top: 14px; font-size: 12px; color: #a09a8c; letter-spacing: 1px; }

/* keyboard focus — visible everywhere */
.btn:focus-visible, .tab:focus-visible, .chip-btn:focus-visible, .meter-bar:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-claim { animation: none; }
  .btn:active { transform: none; }
}

/* ── claim modal ── */
@keyframes modalBgFade {
  from { background: rgba(0,0,0,0); }
  to { background: rgba(0,0,0,.78); }
}
@keyframes modalBoxPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.78); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal:not(.hidden) {
  animation: modalBgFade 0.25s ease-out forwards;
}
.modal:not(.hidden) .modal-box {
  animation: modalBoxPop 0.25s ease-out forwards;
}
.modal-box {
  background: var(--panel); border: 3px solid var(--accent); max-width: 560px; width: 100%;
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
}
.modal-box h2 { font-family: var(--lg); font-size: 28px; letter-spacing: 2px; font-weight: 400; }
.modal-box p { font-size: 12px; color: var(--muted); letter-spacing: .5px; }
.modal-box .row { justify-content: flex-start; }
.modal-box .row .btn { flex: 0 1 auto; }

@media (max-width: 860px) { 
  .panel { grid-template-columns: 1fr; } 
  .roll-desktop { display: none !important; } 
  .roll-mobile { display: block; grid-column: 1 / -1; margin-bottom: 8px; } 
  .actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 540px; } 
  .actions > .hint { grid-column: 1 / -1; }
  .controls .row .chip { display: none !important; }
  .actions button[data-act="copy"] { display: none !important; }
  .actions button[data-act="share"] { grid-column: 1 / -1; }
  .mobile-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); }
  .mobile-primary:hover { background: #c92f24; border-color: #c92f24; color: #fff; box-shadow: 3px 3px 0 var(--paper); }
  .mobile-primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--paper); }
}