/* ============================================================
   WANTED — розыскной плакат (Дикий Запад), v2
   ============================================================ */
:root{
  --paper:#e3cfa1; --paper-dk:#bfa067; --paper-edge:#7a5a30;
  --ink:#241204; --ink-soft:#5a4326; --red:#7c1d12; --blood:#7a0f0a;
  --wood1:#120c08; --wood2:#070402;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  min-height:100vh; color:#e8dcc4; font-family:'Special Elite','Courier New',monospace;
  background:
     radial-gradient(ellipse 90% 55% at 50% -8%, rgba(150,90,30,0.10), transparent 60%),
     radial-gradient(ellipse 80% 60% at 50% 120%, rgba(0,0,0,0.7), transparent 70%),
     repeating-linear-gradient(91deg, var(--wood1) 0 40px, var(--wood2) 40px 42px);
  padding:24px 14px 70px;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 70% 75% at 50% 42%, transparent 40%, rgba(0,0,0,0.55) 100%);
}

/* ---- панель ввода ---- */
.panel{
  position:relative; z-index:1; max-width:680px; margin:8px auto 26px; text-align:center;
  background:rgba(14,8,5,0.9); border:1px solid rgba(150,100,50,0.4);
  border-radius:16px; padding:30px 26px; box-shadow:0 24px 60px rgba(0,0,0,0.7), inset 0 0 30px rgba(140,80,30,0.05);
}
.panel h1{
  font-family:'Rye','Special Elite',serif; font-size:2.1rem; letter-spacing:2px;
  color:#e0a94f; text-shadow:0 2px 0 #2a1404, 0 0 20px rgba(200,130,50,0.3); margin-bottom:8px;
}
.subtitle{font-family:'Underdog',serif; font-size:0.98rem; color:#c2a983; margin-bottom:20px; line-height:1.5;}
.input-row{display:flex; justify-content:center; margin-bottom:14px;}
#profileInput{
  width:100%; max-width:440px; padding:14px 18px; border-radius:10px;
  border:1px solid rgba(150,100,50,0.5); background:rgba(6,3,2,0.8); color:#f0e6d2;
  font-family:'Special Elite',monospace; font-size:1rem; outline:none;
}
#profileInput:focus{border-color:#e0a94f; box-shadow:0 0 14px rgba(200,130,50,0.3);}
#searchBtn,.download-btn{
  display:inline-block; cursor:pointer; border:none; border-radius:10px;
  padding:14px 30px; font-family:'Rye','Special Elite',serif; font-weight:400; font-size:1.05rem;
  letter-spacing:1px; color:#2a1607; background:linear-gradient(135deg,#e0a94f,#bd7a26);
  box-shadow:0 6px 0 #6e4512, 0 10px 22px rgba(0,0,0,0.5); transition:.15s;
}
#searchBtn:hover,.download-btn:hover{transform:translateY(-2px); box-shadow:0 8px 0 #6e4512, 0 14px 28px rgba(0,0,0,0.55);}
#searchBtn:active{transform:translateY(3px); box-shadow:0 3px 0 #6e4512;}
#searchBtn:disabled{opacity:.6; cursor:default; transform:none;}
.download-btn{display:none; margin-top:16px; background:linear-gradient(135deg,#9c2a1c,#6e150d); color:#ffe9c9; box-shadow:0 6px 0 #3e0a05, 0 10px 22px rgba(0,0,0,0.5);}
.progress{display:none; align-items:center; justify-content:center; gap:12px; margin-top:16px; color:#e0a94f; font-size:0.95rem;}
.spinner{width:22px; height:22px; border:3px solid rgba(224,169,79,0.25); border-top-color:#e0a94f; border-radius:50%; animation:spin 0.9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.error{display:none; margin-top:14px; color:#ff9b8a; font-size:0.95rem;}

/* ---- навигация ---- */
.nav-side-btn{position:absolute; top:22px; display:flex; align-items:center; height:44px; text-decoration:none; color:#f0e6d2; white-space:nowrap; overflow:hidden; transition:all .4s cubic-bezier(.25,.8,.25,1); z-index:2; background:rgba(14,8,5,0.96); border:1px solid #c8862f; font-family:'Rye',serif; font-size:0.8rem;}
.nav-icon{width:44px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0;}
.nav-text{opacity:0; transition:opacity .3s;}
.nav-side-btn:hover .nav-text{opacity:1; transition-delay:.1s;}
.nav-left{left:-44px; width:44px; border-right:none; border-radius:12px 0 0 12px; flex-direction:row-reverse;}
.nav-left:hover{width:200px; left:-200px;}
.nav-right,.nav-right2,.nav-right3{right:-44px; width:44px; border-left:none; border-radius:0 12px 12px 0;}
.nav-right2{top:78px;}
.nav-right3{top:134px;}
.nav-right:hover,.nav-right2:hover,.nav-right3:hover{width:200px; right:-200px;}

/* ---- вьюпорт ---- */
.viewport{display:none; position:relative; z-index:1; width:100%; max-width:760px; margin:0 auto; overflow:visible;}
.wanted-scale{transform-origin:top left;}

/* ============================================================
   ПЛАКАТ
   ============================================================ */
.wanted-card{
  position:relative; width:1400px; height:2080px; padding:64px 74px 56px;
  color:var(--ink); font-family:'Special Elite','Courier New',monospace; text-align:center;
  background-color:#e3cfa1;
  background-image:
     radial-gradient(circle at 16% 10%, rgba(120,75,25,0.22), transparent 26%),
     radial-gradient(circle at 86% 80%, rgba(90,55,20,0.26), transparent 30%),
     radial-gradient(circle at 70% 22%, rgba(110,70,25,0.16), transparent 22%),
     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.06'/></svg>"),
     radial-gradient(ellipse 150% 130% at 50% 50%, #e9d6ab 36%, #c9ac74 100%);
  box-shadow:inset 0 0 140px rgba(80,48,18,0.6), inset 0 0 0 2px rgba(60,38,14,0.3);
  overflow:hidden;
}
.wanted-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 92% 94% at 50% 50%, transparent 60%, rgba(60,36,12,0.5) 100%);
}
.wp-frame{position:absolute; inset:24px; border:7px solid var(--ink); pointer-events:none;}
.wp-frame::after{content:""; position:absolute; inset:9px; border:2px solid var(--ink);}

.wp-stain{position:absolute; border-radius:50%; pointer-events:none; mix-blend-mode:multiply;}
.wp-hole{position:absolute; z-index:5; width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 42% 40%, #0d0703 0 34%, #2a1708 48%, rgba(42,23,8,0.35) 66%, transparent 74%); box-shadow:inset 0 0 6px rgba(0,0,0,0.7);}
.wp-hole.h1{top:150px; right:120px;} .wp-hole.h2{bottom:230px; left:120px; width:22px; height:22px;}
.wp-nail{position:absolute; top:6px; left:50%; transform:translateX(-50%) rotate(12deg); width:40px; height:auto; z-index:6; filter:drop-shadow(2px 4px 3px rgba(0,0,0,0.5));}

.wp-inner{position:relative; z-index:2;}
.wp-top{font-family:'Underdog',serif; font-size:1.5rem; letter-spacing:10px; color:var(--ink); margin-top:4px;}
.wp-wanted{font-family:'Rye',serif; font-size:9rem; line-height:0.86; letter-spacing:4px; color:var(--ink); margin:2px 0 8px; -webkit-text-stroke:2px var(--ink);}
.wp-doa{display:inline-block; font-family:'Underdog',serif; font-size:1.5rem; letter-spacing:3px; color:#efe0bd; background:var(--ink); padding:6px 26px; margin-bottom:18px;}
.wp-doa::before{content:"\2605  ";} .wp-doa::after{content:"  \2605";}
.wp-rule{height:6px; background:var(--ink); margin:8px 70px 22px; box-shadow:0 7px 0 -3px var(--ink);}

.wp-photo{width:700px; height:560px; margin:6px auto 2px; background-repeat:no-repeat; background-position:center; background-size:contain; transform:rotate(-4deg);}
.wp-plate{display:inline-block; margin:8px auto 2px; padding:6px 18px; background:var(--ink); color:var(--paper); font-family:'Rye',serif; letter-spacing:3px; font-size:1.05rem;}

.wp-name{font-family:'Rye',serif; font-size:8.2rem; letter-spacing:1px; color:var(--ink); margin-top:10px; word-break:break-word; line-height:1.0;}
.wp-alias{font-family:'Caveat',cursive; font-weight:700; font-size:2.1rem; color:var(--ink-soft); margin-top:25px;}
.wp-alias b{color:var(--red);}

.wp-stats{display:flex; justify-content:center; gap:50px; margin:16px 0 10px;}
.wp-stat .v{font-family:'Rye',serif; font-size:2.3rem; color:var(--ink); line-height:1;}
.wp-stat .l{font-family:'Underdog',serif; font-size:0.85rem; letter-spacing:2px; color:var(--ink-soft);}

.wp-charges-title{font-family:'Underdog',serif; font-size:1.5rem; letter-spacing:2px; margin:16px 0 10px; color:var(--ink);}
.wp-charges{list-style:none; max-width:1100px; margin:0 auto; text-align:left;}
.wp-charges li{position:relative; padding:9px 8px 9px 42px; font-family:'Caveat',cursive; font-weight:700; font-size:2.45rem; line-height:1.22; color:var(--ink); border-bottom:1px dashed rgba(50,32,12,0.4);}
.wp-charges li::before{content:"\2736"; position:absolute; left:12px; top:9px; color:var(--ink);}

.wp-reward-wrap{margin:22px auto 6px; padding:14px 0; border-top:6px solid var(--ink); border-bottom:6px solid var(--ink); max-width:1000px;}
.wp-reward-label{font-family:'Underdog',serif; font-size:1.5rem; letter-spacing:5px; color:var(--ink);}
.wp-reward{font-family:'Rye',serif; font-size:8.4rem; line-height:1.02; color:var(--ink);}
.wp-reward::before{content:"\2605 "; color:var(--red); font-size:0.5em; vertical-align:middle;}
.wp-reward::after{content:" \2605"; color:var(--red); font-size:0.5em; vertical-align:middle;}

.wp-foot{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px;}
.wp-order-col{display:flex; flex-direction:column; align-items:flex-start; gap:0;}
.wp-sign{width:240px; height:66px; margin-bottom:-6px;}
.wp-order{font-family:'Underdog',serif; font-size:1.1rem; color:var(--ink-soft); max-width:560px; line-height:1.4; text-align:left;}
.wp-seal{position:relative; width:330px; height:330px; flex-shrink:0; transform:rotate(-8deg); opacity:0.92; bottom:130px; right:180px;}
.wp-seal svg{width:100%; height:100%;}

.wp-blood{position:absolute; right:46px; bottom:34px; z-index:3; width:182px; height:104px; display:flex; align-items:center; justify-content:center; transform:rotate(-5deg); pointer-events:none;
  background:radial-gradient(ellipse 58% 46% at 50% 50%, rgba(122,15,10,0.9) 0 44%, rgba(122,15,10,0.55) 58%, rgba(122,15,10,0.18) 70%, transparent 80%);
  border-radius:46% 54% 52% 48%/58% 46% 54% 42%; filter:blur(0.3px);}
.wp-blood .url{font-family:'Special Elite',monospace; font-size:0.95rem; letter-spacing:1px; color:#f3e6cf; text-shadow:0 1px 1px rgba(0,0,0,0.45); transform:rotate(2deg);}

@media (max-width:560px){ .panel h1{font-size:1.5rem;} .nav-text{display:none;} }