:root {
    --bg-dark: #07162c;
    --bg-darker: #040d1a;
    --bg-card: rgba(13, 35, 64, 0.7);
    --bg-card-hover: rgba(20, 50, 90, 0.85);
    --border-color: rgba(0, 242, 254, 0.15);
    --border-color-active: rgba(0, 242, 254, 0.6);

    --primary: #00f2fe;
    --primary-glow: rgba(0, 242, 254, 0.4);
    --secondary: #4facfe;
    --accent: #ff6b8b;
    --text-main: #f0f6fc;
    --text-muted: #8b9eb8;
    --text-highlight: #ffffff;
    --success: #00e676;
    --danger: #ff1744;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 242, 254, 0.15);

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-darker);
    color: var(--text-main);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

.ocean-bg {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: radial-gradient(circle at 50% 0%, var(--bg-dark) 0%, var(--bg-darker) 100%);
    z-index:-2; overflow:hidden;
}
.bubble {
    position:absolute; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(0,242,254,0.15), rgba(79,172,254,0.05));
    box-shadow: 0 0 20px rgba(0,242,254,0.1) inset;
    animation: floatUp 25s infinite linear;
}
.bubble-1{width:80px;height:80px;left:10%;bottom:-100px;animation-duration:22s;}
.bubble-2{width:120px;height:120px;left:75%;bottom:-150px;animation-duration:28s;animation-delay:2s;}
.bubble-3{width:60px;height:60px;left:45%;bottom:-80px;animation-duration:18s;animation-delay:5s;}
.bubble-4{width:100px;height:100px;left:88%;bottom:-120px;animation-duration:35s;animation-delay:1s;}
@keyframes floatUp {
    0%{transform:translateY(0) scale(1) rotate(0deg); opacity:0;}
    10%{opacity:.8;} 90%{opacity:.8;}
    100%{transform:translateY(-110vh) scale(1.1) rotate(360deg); opacity:0;}
}

.app-container {
    max-width:1000px; margin:0 auto; padding:2rem 1.5rem;
    display:flex; flex-direction:column; gap:2rem;
}

header {
    display:flex; justify-content:space-between; align-items:center;
    padding:1.5rem; background:var(--bg-card); backdrop-filter:blur(12px);
    border:1px solid var(--border-color); border-radius:20px; box-shadow:var(--shadow-md);
    flex-wrap:wrap; gap:1rem;
}
.header-logo{ display:flex; align-items:center; gap:1.2rem; }
.logo-icon{
    font-size:2.5rem; color:var(--primary);
    filter:drop-shadow(0 0 8px var(--primary-glow));
    animation:wave 4s ease-in-out infinite;
}
@keyframes wave{0%,100%{transform:rotate(0deg) translateY(0);}50%{transform:rotate(10deg) translateY(-5px);}}
header h1{
    font-family:var(--font-heading); font-size:1.8rem; font-weight:800;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-0.5px;
}
.subtitle{ color:var(--text-muted); font-size:0.9rem; margin-top:0.2rem; }
.header-actions{ display:flex; gap:.8rem; flex-shrink:0; }

@media (max-width:768px){
    header{padding:1.2rem;}
    .logo-icon{font-size:2rem;}
    header h1{font-size:1.3rem;}
    .subtitle{font-size:.8rem;}
    .header-actions{width:100%; justify-content:flex-end;}
}

.btn{
    padding:.75rem 1.25rem; border-radius:12px; border:none;
    font-family:var(--font-body); font-weight:600; cursor:pointer;
    display:inline-flex; align-items:center; gap:.6rem;
    transition:all .2s ease-in-out;
}
.btn-sm{ padding:.5rem 1rem; font-size:.85rem; border-radius:8px; }
.btn-primary{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:var(--bg-darker); box-shadow:0 4px 15px rgba(0,242,254,.3);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,242,254,.45); }
.btn-secondary{ background:rgba(255,255,255,.1); color:var(--text-main); }
.btn-secondary:hover{ background:rgba(255,255,255,.2); }
.btn-success{ background:var(--success); color:var(--bg-darker); }
.btn-success:hover{ background:#00ff87; box-shadow:0 4px 12px rgba(0,230,118,.3); }
.btn-danger-outline{
    background:rgba(255,23,68,.1); border:1px solid rgba(255,23,68,.3); color:var(--danger);
}
.btn-danger-outline:hover{ background:var(--danger); color:white; }

.banner{
    display:flex; justify-content:space-between; align-items:center;
    padding:1rem 1.5rem; background:rgba(79,172,254,.15);
    border:1px solid var(--secondary); border-radius:16px;
    box-shadow:var(--shadow-sm); animation:fadeIn .4s ease-out;
    flex-wrap:wrap; gap:1rem;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }
.banner-content{ display:flex; align-items:center; gap:1rem; }
.banner-icon{ font-size:1.3rem; color:var(--primary); }
.banner-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.hidden{ display:none !important; }

.progress-section{
    display:grid; grid-template-columns:2fr 1fr; gap:1.5rem;
    background:var(--bg-card); backdrop-filter:blur(12px);
    border:1px solid var(--border-color); border-radius:20px;
    padding:1.5rem; box-shadow:var(--shadow-md);
}
@media (max-width:768px){ .progress-section{ grid-template-columns:1fr; } }
.progress-info{ display:flex; flex-direction:column; justify-content:center; gap:.8rem; }
.progress-stats{ display:flex; justify-content:space-between; align-items:baseline; }
.progress-title{ font-family:var(--font-heading); font-size:1.2rem; font-weight:600; color:var(--text-muted); }
.progress-number{ font-family:var(--font-heading); font-weight:800; font-size:1.5rem; color:var(--primary); }
.progress-track{
    background:rgba(255,255,255,.05); border-radius:30px; height:14px; overflow:hidden;
    position:relative; border:1px solid rgba(255,255,255,.05);
}
.progress-fill{
    background:linear-gradient(90deg,var(--secondary),var(--primary));
    height:100%; border-radius:30px; width:0; transition:width .5s cubic-bezier(.1,.8,.3,1);
    box-shadow:0 0 10px var(--primary-glow);
}
.quick-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.stat-card{
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
    border-radius:14px; padding:1rem; text-align:center; display:flex;
    flex-direction:column; justify-content:center;
}
.stat-value{ font-family:var(--font-heading); font-size:1.8rem; font-weight:700; }
#stat-dup{ color:var(--accent); }
#stat-have{ color:var(--primary); }
.stat-label{ font-size:.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-top:.2rem; }

.legend{
    display:flex; gap:1.5rem; flex-wrap:wrap; font-size:.85rem; color:var(--text-muted);
    background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px;
    padding:1rem 1.5rem;
}
.legend span{ display:inline-flex; align-items:center; gap:.5rem; }
.dot{ width:14px; height:14px; border-radius:50%; display:inline-block; }
.dot.none{ background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.15); }
.dot.have{ background:rgba(0,242,254,.25); border:2px solid var(--primary); }
.dot.dup{ background:rgba(255,107,139,.3); border:2px solid var(--accent); }
.dot.wanted{ background:rgba(255,209,102,.3); border:2px solid #ffd166; }

.character-section{
    background:var(--bg-card); backdrop-filter:blur(12px);
    border:1px solid var(--border-color); border-radius:20px;
    padding:1.5rem; box-shadow:var(--shadow-md);
}
.character-head{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:.8rem; margin-bottom:1.2rem;
}
.character-head h2{
    font-family:var(--font-heading); font-size:1.3rem; font-weight:700; color:var(--text-highlight);
    display:flex; align-items:center; gap:.6rem;
}
.character-emoji{ font-size:1.5rem; }
.character-stats{
    font-family:var(--font-heading); font-size:.9rem; color:var(--text-muted);
    display:flex; gap:1rem; align-items:center;
}
.character-stats .dup-count{ color:var(--accent); font-weight:700; }
.character-stats .have-count{ color:var(--primary); font-weight:700; }

.items-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
    gap:1rem; animation:fadeIn .4s ease-out;
}

.item-card{
    background:rgba(255,255,255,.03); border:1px solid var(--border-color);
    border-radius:16px; padding:.8rem; display:flex; flex-direction:column;
    align-items:center; position:relative; cursor:pointer;
    transition:all .25s cubic-bezier(.2,.8,.2,1); user-select:none;
    box-shadow:var(--shadow-sm);
}
.item-card:hover{
    transform:translateY(-5px); border-color:var(--border-color-active);
    box-shadow:var(--shadow-md), 0 0 10px rgba(0,242,254,.1);
}
.item-card.state-have{ border-color:var(--primary); background:rgba(0,242,254,.05); }
.item-card.state-dup{ border-color:var(--accent); background:rgba(255,107,139,.08); }
.item-card.state-dup:hover{ box-shadow:var(--shadow-md), 0 0 12px rgba(255,107,139,.2); }

.item-card.state-wanted{
    border-color: #ffd166;
    background: rgba(255, 209, 102, 0.1);
    box-shadow: 0 0 0 1px rgba(255,209,102,.3), 0 0 16px rgba(255,209,102,.25);
    animation: wantedPulse 2.2s ease-in-out infinite;
}
.item-card.state-wanted:hover{
    box-shadow: 0 0 0 1px rgba(255,209,102,.5), 0 0 20px rgba(255,209,102,.4);
}
@keyframes wantedPulse{
    0%,100%{ box-shadow: 0 0 0 1px rgba(255,209,102,.3), 0 0 16px rgba(255,209,102,.25); }
    50%{ box-shadow: 0 0 0 1px rgba(255,209,102,.55), 0 0 22px rgba(255,209,102,.45); }
}
.wanted-flag{
    position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    background:#ffd166; color:var(--bg-darker);
    font-family:var(--font-heading); font-size:.65rem; font-weight:800;
    padding:3px 8px; border-radius:999px; white-space:nowrap;
    box-shadow:0 2px 6px rgba(0,0,0,.3); z-index:2;
    display:flex; align-items:center; gap:4px;
}

.item-card-emoji-wrapper{
    width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
    background:rgba(0,0,0,.2); position:relative;
    display:flex; align-items:center; justify-content:center;
    font-size:2.4rem;
}
.item-card-num{ margin-top:.5rem; font-size:.75rem; color:var(--text-muted); font-weight:600; }

.item-card-badge{
    position:absolute; top:-8px; right:-8px;
    background:var(--accent); color:var(--bg-darker);
    font-family:var(--font-heading); font-size:.75rem; font-weight:800;
    min-width:24px; height:24px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,.3); z-index:1;
    padding:0 4px;
}

.item-card{ cursor:default; }

.item-card-controls{
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    margin-top:.6rem;
}
.qty-btn{
    width:26px; height:26px; border-radius:50%; border:1px solid var(--border-color);
    background:rgba(255,255,255,.05); color:var(--text-main);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:.75rem; transition:all .15s ease;
    flex-shrink:0;
}
.qty-btn:hover{ border-color:var(--border-color-active); background:rgba(0,242,254,.12); color:var(--primary); }
.qty-btn.minus:hover{ border-color:var(--danger); background:rgba(255,23,68,.12); color:var(--danger); }
.qty-btn:disabled{ opacity:.3; cursor:not-allowed; pointer-events:none; }
.qty-value{
    font-family:var(--font-heading); font-weight:800; font-size:1rem;
    min-width:1.4rem; text-align:center; color:var(--text-main);
}
.item-card.state-dup .qty-value{ color:var(--accent); }
.item-card.state-have .qty-value{ color:var(--primary); }

.note{
    max-width:900px; margin:0 auto; padding:0 .5rem;
    font-size:.85rem; color:var(--text-muted); text-align:center; line-height:1.5;
}

.toast-container{
    position:fixed; bottom:2rem; right:2rem; display:flex;
    flex-direction:column; gap:.8rem; z-index:9999;
}
.toast{
    background:var(--bg-card); backdrop-filter:blur(16px);
    border-left:4px solid var(--primary); border-top:1px solid var(--border-color);
    border-right:1px solid var(--border-color); border-bottom:1px solid var(--border-color);
    padding:1rem 1.5rem; border-radius:12px; color:var(--text-main);
    box-shadow:var(--shadow-md); display:flex; align-items:center; gap:.8rem;
    animation:slideIn .3s cubic-bezier(.1,.8,.3,1) forwards;
}
@keyframes slideIn{ from{transform:translateX(100%); opacity:0;} to{transform:translateX(0); opacity:1;} }
.toast.success{ border-left-color:var(--success); }
.toast.info{ border-left-color:var(--secondary); }

.modal{
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(4,13,26,.8); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    z-index:10000; animation:fadeIn .25s ease-out;
}
.modal-content{
    background:var(--bg-card); border:1px solid var(--border-color-active);
    border-radius:24px; padding:2rem; max-width:500px; width:90%;
    box-shadow:var(--shadow-lg); animation:scaleUp .3s cubic-bezier(.175,.885,.32,1.275) forwards;
}
@keyframes scaleUp{ from{transform:scale(.9); opacity:0;} to{transform:scale(1); opacity:1;} }
.modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.modal-header h3{ font-family:var(--font-heading); font-size:1.4rem; font-weight:700; color:var(--primary); }
.modal-close{ background:transparent; border:none; color:var(--text-muted); font-size:1.2rem; cursor:pointer; transition:color .2s; }
.modal-close:hover{ color:var(--danger); }
.modal-body p{ color:var(--text-muted); margin-bottom:1.2rem; line-height:1.5; }
.share-url-box{ display:flex; gap:.8rem; flex-wrap:wrap; }
.share-url-box input{
    flex-grow:1; padding:.75rem 1rem; border-radius:12px;
    border:1px solid var(--border-color); background:rgba(0,0,0,.3);
    color:var(--primary); font-family:var(--font-body); font-size:.9rem; min-width:150px;
}
.share-url-box input:focus{ outline:none; }

footer{
    text-align:center; padding:2rem 0; color:var(--text-muted);
    font-size:.85rem; border-top:1px solid rgba(255,255,255,.03); margin-top:2rem;
}