:root{
--navy:#151F3D;
--navy-2:#212F58;
--marigold:#F0A63B;
--marigold-dark:#C97D17;
--marigold-light:#FBD695;
--cream:#F6F0E1;
--paper:#FFFCF6;
--ink:#1E1B16;
--ink-soft:#5C564A;
--ink-faint:#8B8474;
--teal:#2C6B58;
--teal-dark:#204F42;
--brick:#B0452B;
--line: rgba(30,27,22,0.13);
--line-strong: rgba(30,27,22,0.22);
--shadow-sm: 0 2px 6px rgba(21,31,61,0.08);
--shadow-md: 0 10px 24px rgba(21,31,61,0.12), 0 2px 6px rgba(21,31,61,0.08);
--shadow-lg: 0 24px 48px rgba(21,31,61,0.18);
--radius-sm: 8px;
--radius-md: 12px;
--ease: cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box;}
::selection{background:var(--marigold-light); color:var(--navy);}
html{scroll-behavior:smooth;}
body{
margin:0;
background:
    radial-gradient(circle at 1px 1px, rgba(30,27,22,0.055) 1px, transparent 1px) 0 0/24px 24px,
    var(--cream);
color:var(--ink);
font-family:'Inter',sans-serif;
font-size:15.5px;
line-height:1.5;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif; letter-spacing:-0.01em;}
.hindi{font-family:'Noto Sans Devanagari',sans-serif;}
.script{font-family:'Caveat',cursive;}
button{font-family:'Inter',sans-serif;cursor:pointer;}
a{color:inherit;}
:focus-visible{outline:2.5px solid var(--marigold-dark); outline-offset:2px; border-radius:4px;}

/* ---------- Header / signboard ---------- */
.signboard{
background:
    radial-gradient(ellipse at 20% -40%, rgba(240,166,59,0.18), transparent 55%),
    linear-gradient(165deg,var(--navy) 0%, var(--navy-2) 100%);
padding:30px 28px 32px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
position:relative;
}
.garland{
position:absolute; left:0; right:0; bottom:-1px; height:14px;
background-image:
    radial-gradient(circle at 10px 4px, var(--marigold) 0 4px, transparent 4.5px);
background-size:24px 14px;
background-repeat:repeat-x;
background-position:12px 0;
}
.signboard::after{
content:"";
position:absolute; left:0; right:0; bottom:0; height:5px;
background:linear-gradient(90deg, var(--marigold-dark), var(--marigold) 50%, var(--marigold-dark));
}
.brand-wrap{transform:rotate(-1deg);}
.brand{
color:var(--marigold);
font-size:clamp(30px,5.2vw,46px);
font-weight:700;
margin:0;
letter-spacing:-0.01em;
text-shadow:0 2px 0 rgba(0,0,0,0.28);
}
.brand span{color:var(--paper);}
.tagline{
font-family:'Caveat',cursive;
font-weight:600;
color:var(--marigold-light);
font-size:21px;
margin:3px 0 0 4px;
opacity:0.95;
}
.header-actions{display:flex;gap:10px;flex-wrap:wrap;}
.btn{
border:none;
border-radius:var(--radius-sm);
padding:12px 20px;
font-weight:600;
font-size:14.5px;
letter-spacing:0.01em;
transition:transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-1.5px); box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(0px); box-shadow:none;}
.btn-primary{background:var(--marigold); color:var(--navy);}
.btn-primary:hover{background:var(--marigold-dark); color:var(--paper);}
.btn-ghost{background:transparent; color:var(--paper); border:1.5px solid rgba(255,252,246,0.4); box-shadow:none;}
.btn-ghost:hover{border-color:var(--paper); background:rgba(255,252,246,0.08); box-shadow:none;}
.btn-teal{background:var(--teal); color:var(--paper);}
.btn-teal:hover{background:var(--teal-dark);}
.btn-brick{background:var(--brick); color:var(--paper);}
.btn-brick:hover{background:#8f3720;}
.btn-outline{background:var(--paper);border:1.5px solid var(--line-strong); color:var(--ink); box-shadow:none;}
.btn-outline:hover{border-color:var(--navy); background:var(--cream);}
.btn-sm{padding:8px 13px;font-size:13px;border-radius:7px;}
.btn:disabled{opacity:0.5;cursor:not-allowed; transform:none;}

/* ---------- Controls ---------- */
.controls{
max-width:1200px;
margin:28px auto 8px;
padding:0 24px;
display:flex;
flex-direction:column;
gap:16px;
}
.search-row{display:flex; gap:10px; flex-wrap:wrap;}
#searchInput{
flex:1 1 260px;
padding:13px 16px;
border-radius:var(--radius-sm);
border:1.5px solid var(--line-strong);
background:var(--paper);
font-size:14.5px;
font-family:'Inter',sans-serif;
color:var(--ink);
transition:border-color .15s ease, box-shadow .15s ease;
}
#searchInput::placeholder{color:var(--ink-faint);}
#searchInput:focus, select:focus{
outline:none;
border-color:var(--marigold-dark);
box-shadow:0 0 0 3px rgba(240,166,59,0.22);
}
.filter-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
select{
padding:11px 14px;
border-radius:var(--radius-sm);
border:1.5px solid var(--line-strong);
background:var(--paper);
font-size:13.5px;
font-family:'Inter',sans-serif;
color:var(--ink);
max-width:220px;
transition:border-color .15s ease;
}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
padding:9px 15px;
border-radius:999px;
border:1.5px solid var(--line-strong);
background:var(--paper);
font-size:13.5px;
font-weight:600;
white-space:nowrap;
color:var(--ink-soft);
transition:all .15s var(--ease);
}
.chip:hover{border-color:var(--navy); color:var(--navy);}
.chip.active{background:var(--navy); border-color:var(--navy); color:var(--marigold-light); box-shadow:var(--shadow-sm);}

/* ---------- Grid / cards ---------- */
main.grid{
max-width:1200px;
margin:22px auto 70px;
padding:0 24px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
gap:24px 24px;
padding-top:16px;
}
.empty-state{
grid-column:1/-1;
text-align:center;
padding:70px 20px;
color:var(--ink-soft);
}
.empty-state .script{font-size:28px; color:var(--navy); display:block; margin-bottom:6px;}
.card{
background:var(--paper);
border-radius:3px;
box-shadow:var(--shadow-md);
padding:24px 17px 17px;
position:relative;
border:1px solid rgba(30,27,22,0.07);
display:flex;
flex-direction:column;
gap:9px;
transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover{transform:translateY(-4px) rotate(0deg) !important; box-shadow:var(--shadow-lg);}
.card:nth-child(3n+1){transform:rotate(-0.7deg);}
.card:nth-child(3n+2){transform:rotate(0.6deg);}
.card:nth-child(3n){transform:rotate(-0.35deg);}
.card::after{
content:"";
position:absolute; right:0; bottom:0;
width:0; height:0;
border-style:solid;
border-width:0 0 16px 16px;
border-color:transparent transparent var(--cream) transparent;
filter:drop-shadow(-1px -1px 1px rgba(0,0,0,0.06));
}
.pin{
position:absolute;
top:-10px; left:50%; transform:translateX(-50%);
width:17px;height:17px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, var(--marigold-light), var(--marigold-dark));
box-shadow:0 3px 5px rgba(0,0,0,0.28);
z-index:7;
}
.card.sold{opacity:0.6;}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}

/* ---------- Game-style price tag ---------- */
.price-tag{
position:absolute;
top:-16px; right:-12px;
z-index:6;
transform:rotate(9deg);
filter:drop-shadow(0 5px 7px rgba(21,31,61,0.35));
transition:transform .2s var(--ease);
}
.card:hover .price-tag{ transform:rotate(9deg) translateY(-2px) scale(1.04); }
.price-tag-shape{
position:relative;
display:flex;
align-items:center;
gap:5px;
padding:8px 14px 8px 20px;
background:
    linear-gradient(155deg, #FFF1C9 0%, var(--marigold) 42%, var(--marigold-dark) 100%);
color:#3E2905;
font-family:'Space Grotesk',sans-serif;
font-weight:800;
font-size:15.5px;
letter-spacing:-0.01em;
white-space:nowrap;
clip-path:polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
border-radius:1px;
}
.price-tag-shape::before{
content:"";
position:absolute;
left:8px; top:50%;
width:6px; height:6px;
transform:translateY(-50%);
background:var(--paper);
border-radius:50%;
box-shadow:0 0 0 1.5px var(--marigold-dark), inset 0 1px 1px rgba(0,0,0,0.2);
}
.price-tag-shape::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(115deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 30%);
clip-path:inherit;
pointer-events:none;
}
.price-tag .rupee{ font-size:12.5px; font-weight:700; opacity:0.85; }

.cat-badge{
display:inline-flex; align-items:center; gap:5px;
font-size:11px; font-weight:700; letter-spacing:0.4px;
background:var(--cream); color:var(--ink-soft);
border:1px solid var(--line);
padding:5px 10px; border-radius:5px;
text-transform:uppercase;
}
.sold-stamp{
color:var(--brick); border:2px solid var(--brick);
font-weight:700; font-size:12px; padding:2px 8px;
border-radius:4px; transform:rotate(-8deg);
text-transform:uppercase; letter-spacing:1px;
}
.card-emoji{font-size:36px; text-align:center; margin:4px 0 2px;}
.card h3{margin:0; font-size:17px; line-height:1.32; font-weight:600;}
.card .price{font-size:21px; font-weight:700; color:var(--teal); font-family:'Space Grotesk',sans-serif;}
.card .desc{font-size:13.5px; color:var(--ink-soft); line-height:1.5; min-height:38px;}
.meta-row{display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--ink-soft);}
.meta-pill{background:var(--cream); padding:4px 9px; border-radius:5px; border:1px solid var(--line);}
.verified-badge{
display:inline-flex; align-items:center; gap:4px;
color:var(--teal); font-size:12px; font-weight:700;
}
.seller-row{
display:flex; justify-content:space-between; align-items:center;
border-top:1px dashed var(--line-strong); padding-top:11px; margin-top:2px;
font-size:13px;
}
.contact-box{
margin-top:6px; padding:11px 12px; background:var(--cream); border-radius:7px;
font-size:13px; display:flex; flex-direction:column; gap:6px;
border:1px solid var(--line);
}
.contact-box a{font-weight:600; color:var(--navy); text-decoration:none; transition:color .15s ease;}
.contact-box a:hover{color:var(--marigold-dark); text-decoration:underline;}

/* ---------- Modal ---------- */
.overlay{
position:fixed; inset:0; background:rgba(15,17,20,0.6);
backdrop-filter:blur(2px);
display:flex; align-items:center; justify-content:center;
padding:20px; z-index:50;
animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{
background:var(--paper); border-radius:14px; max-width:560px; width:100%;
max-height:88vh; overflow-y:auto; padding:28px 28px 24px;
box-shadow:var(--shadow-lg);
animation:riseIn .2s var(--ease);
}
@keyframes riseIn{from{opacity:0; transform:translateY(10px) scale(.98);}to{opacity:1; transform:translateY(0) scale(1);}}
.modal h2{margin:0 0 5px; font-size:23px;}
.modal .sub{color:var(--ink-soft); font-size:13.5px; margin:0 0 20px; line-height:1.5;}
.modal-close{
position:absolute; top:16px; right:18px; background:var(--cream); border:none;
width:30px; height:30px; border-radius:50%;
font-size:20px; color:var(--ink-soft); line-height:1;
display:flex; align-items:center; justify-content:center;
transition:background .15s ease, color .15s ease;
}
.modal-close:hover{background:var(--brick); color:var(--paper);}
.modal{position:relative;}
.field{margin-bottom:16px; display:flex; flex-direction:column; gap:5px;}
.field label{font-size:13px; font-weight:600; color:var(--ink);}
.field .hint{font-size:11.5px; color:var(--ink-faint); font-weight:400;}
.field input, .field textarea, .field select{
padding:11px 13px; border-radius:8px; border:1.5px solid var(--line-strong);
font-size:14px; font-family:'Inter',sans-serif; background:#fff; color:var(--ink);
transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
outline:none; border-color:var(--marigold-dark);
box-shadow:0 0 0 3px rgba(240,166,59,0.22);
}
.field textarea{resize:vertical; min-height:74px;}
.field .error{color:var(--brick); font-size:12px; font-weight:600; display:none;}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--brick);}
.field.invalid .error{display:block;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:480px){.two-col{grid-template-columns:1fr;}}
.notice{
background:rgba(44,107,88,0.1); border:1px solid rgba(44,107,88,0.32);
color:var(--teal-dark); font-size:12.5px; padding:11px 13px; border-radius:8px; margin-bottom:18px;
line-height:1.5;
}
.otp-code{
font-family:'Space Grotesk',sans-serif; font-size:32px; letter-spacing:9px;
text-align:center; color:var(--navy); background:var(--cream);
padding:14px; border-radius:9px; margin:16px 0; font-weight:700;
border:1.5px dashed var(--line-strong);
}
.mylist-item{
display:flex; justify-content:space-between; align-items:center; gap:10px;
padding:13px 0; border-bottom:1px solid var(--line);
}
.mylist-item:last-child{border-bottom:none;}
footer{
text-align:center; padding:30px 20px 44px; color:var(--ink-faint); font-size:12.5px;
max-width:640px; margin:0 auto; line-height:1.6;
}
footer .script{font-size:18px; color:var(--navy); display:block; margin-bottom:5px;}
footer p{margin:8px 0 0;}
.fa-card{
max-width:280px;
margin:24px auto 0;
text-align:left;
background:linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%);
border:1px solid rgba(240,166,59,0.4);
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
padding:14px 16px 16px;
}
.fa-top{display:flex; align-items:center; gap:9px; margin-bottom:8px;}
.fa-avatar{
font-size:22px; line-height:1; flex:none;
background:rgba(240,166,59,0.14);
border-radius:50%; width:34px; height:34px;
display:flex; align-items:center; justify-content:center;
}
.fa-id{flex:1; min-width:0;}
.fa-name{
color:var(--paper); font-weight:700; font-size:13.5px;
font-family:'Space Grotesk',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fa-verified{color:var(--marigold-light); font-size:11px; margin-left:2px;}
.fa-roll{color:var(--marigold-light); font-size:10.5px; font-weight:700; letter-spacing:0.05em; font-family:'Space Grotesk',sans-serif;}
.fa-badge{
flex:none; font-size:10px; font-weight:700; letter-spacing:0.3px;
background:rgba(240,166,59,0.16); color:var(--marigold-light);
border:1px solid rgba(240,166,59,0.4); border-radius:999px; padding:4px 8px;
white-space:nowrap;
}
.fa-desc{
color:rgba(255,252,246,0.68); font-size:11.5px; line-height:1.45; margin:0 0 10px;
}
.fa-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.fa-pill{
background:rgba(255,252,246,0.08); border:1px solid rgba(255,252,246,0.18);
color:rgba(255,252,246,0.85); border-radius:999px; padding:3px 9px; font-size:10.5px; font-weight:600;
}
.fa-contact{
margin-left:auto; color:var(--marigold-light); font-size:11.5px; font-weight:700;
text-decoration:none; white-space:nowrap;
}
.fa-contact:hover{color:var(--paper);}

@media (prefers-reduced-motion: reduce){
*{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
html{scroll-behavior:auto;}
}