/* WikiBağlantı — Codex Design */
:root{--color-base:#202122;--color-subtle:#54595d;--color-placeholder:#72777d;--color-inverted:#fff;--color-progressive:#3366cc;--color-progressive-hover:#2a4b8d;--color-success:#14866d;--color-success-subtle:#d5fdf4;--color-destructive:#d73333;--color-error-subtle:#fee7e6;--color-warning:#edab00;--bg-base:#f8f9fa;--bg-surface:#fff;--border-subtle:#c8ccd1;--font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;--radius-lg:12px;--radius-xl:16px;--radius-pill:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,.08);--shadow-md:0 2px 8px rgba(0,0,0,.1);--shadow-lg:0 4px 16px rgba(0,0,0,.12)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-family);color:var(--color-base);background:var(--bg-base);min-height:100vh;line-height:1.6}
.bg-pattern{position:fixed;inset:0;background:radial-gradient(circle at 25% 75%,rgba(51,102,204,.06) 0%,transparent 50%),radial-gradient(circle at 75% 25%,rgba(20,134,109,.06) 0%,transparent 50%);z-index:0;pointer-events:none}
.container{max-width:640px;margin:0 auto;padding:16px;position:relative;z-index:1}
.header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:20px;border:1px solid var(--border-subtle)}
.header-logo{display:flex;align-items:center;gap:8px;font-size:1.1rem;font-weight:700;color:var(--color-progressive)}.header-logo .logo-icon{font-size:1.3rem}
.header-stats{display:flex;align-items:center;gap:16px}.stat-item{display:flex;align-items:center;gap:4px;font-size:.875rem;font-weight:700}
.lives .heart{color:var(--color-destructive);transition:.2s}.lives .heart.lost{opacity:.2;transform:scale(.8)}
.score-val{color:var(--color-progressive)}
.screen{display:none;animation:fadeIn .3s ease}.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.start-screen{text-align:center;padding:40px 16px}
.game-title{font-size:2.25rem;font-weight:700;color:var(--color-progressive);margin-bottom:8px;letter-spacing:-.02em}
.game-title .title-icon{display:block;font-size:3.5rem;margin-bottom:12px}
.game-subtitle{font-size:1.1rem;color:var(--color-subtle);margin-bottom:32px}
.rules-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;margin-bottom:32px;text-align:left;box-shadow:var(--shadow-sm)}
.rules-card h3{font-size:1rem;color:var(--color-progressive);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.rules-card ul{list-style:none}.rules-card li{padding:6px 0;font-size:.875rem;color:var(--color-subtle);display:flex;align-items:flex-start;gap:8px;line-height:1.5}.rules-card li .rule-icon{flex-shrink:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 32px;font-family:var(--font-family);font-size:1rem;font-weight:700;border:none;border-radius:var(--radius-pill);cursor:pointer;transition:all .2s ease;user-select:none;text-decoration:none}
.btn-primary{background:var(--color-progressive);color:var(--color-inverted);box-shadow:var(--shadow-md);min-width:180px;padding:14px 40px;font-size:1.1rem}
.btn-primary:hover{background:var(--color-progressive-hover);transform:translateY(-1px)}
.btn-secondary{background:var(--bg-surface);color:var(--color-progressive);border:1px solid var(--color-progressive);padding:12px 24px}
.round-badge{display:inline-flex;align-items:center;background:#eaecf0;padding:4px 14px;border-radius:var(--radius-pill);font-size:.8125rem;font-weight:700;color:var(--color-subtle);margin-bottom:16px}
.prompt{font-size:.875rem;color:var(--color-subtle);text-align:center;margin-bottom:20px;font-weight:700}.prompt .prompt-icon{margin-right:4px}
/* Item Cards Grid */
.items-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.item-card{background:var(--bg-surface);border:2px solid var(--border-subtle);border-radius:var(--radius-xl);padding:24px 16px;cursor:pointer;transition:all .2s ease;text-align:center;position:relative;overflow:hidden;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.item-card:hover:not(.disabled){border-color:var(--color-progressive);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.item-card.disabled{cursor:default;pointer-events:none}
.item-card.correct{border-color:var(--color-success);background:var(--color-success-subtle);box-shadow:0 0 0 2px rgba(20,134,109,.15)}
.item-card.wrong{border-color:var(--color-destructive);background:var(--color-error-subtle);box-shadow:0 0 0 2px rgba(215,51,51,.15)}
.item-card.connected{border-color:var(--color-progressive);background:rgba(51,102,204,.05)}
.item-card-name{font-size:1.1rem;font-weight:700;color:var(--color-base);margin-bottom:4px}
.item-card-desc{font-size:.75rem;color:var(--color-subtle);line-height:1.4}
.item-card-badge{position:absolute;top:8px;right:8px;font-size:1.2rem;opacity:0;transition:.2s}
.item-card.correct .item-card-badge,.item-card.wrong .item-card-badge,.item-card.connected .item-card-badge{opacity:1}
/* Connection reveal */
.connection-reveal{background:var(--bg-surface);border:2px solid var(--color-progressive);border-radius:var(--radius-lg);padding:16px 20px;text-align:center;box-shadow:var(--shadow-md);animation:fadeIn .3s ease;margin-bottom:16px}
.connection-label{font-size:.8125rem;color:var(--color-subtle);font-weight:700;margin-bottom:4px}
.connection-value{font-size:1.25rem;font-weight:700;color:var(--color-progressive)}
/* Toasts */
.combo-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:2.25rem;font-weight:700;color:var(--color-progressive);pointer-events:none;z-index:200;opacity:0}
.combo-toast.show{animation:comboPop .8s ease forwards}
@keyframes comboPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}30%{transform:translate(-50%,-50%) scale(1.2);opacity:1}70%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-70%) scale(.8);opacity:0}}
.points-toast{position:fixed;top:30%;left:50%;transform:translateX(-50%);font-size:1.75rem;font-weight:700;color:var(--color-success);pointer-events:none;z-index:200;opacity:0}
.points-toast.show{animation:ptFloat 1s ease forwards}
@keyframes ptFloat{0%{opacity:0;transform:translateX(-50%) translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-60px)}}
.loading-overlay{display:none;position:fixed;inset:0;background:rgba(248,249,250,.85);z-index:100;align-items:center;justify-content:center;flex-direction:column;gap:16px;backdrop-filter:blur(4px)}
.loading-overlay.active{display:flex}
.spinner{width:40px;height:40px;border:3px solid var(--border-subtle);border-top-color:var(--color-progressive);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:.875rem;color:var(--color-subtle);font-weight:700}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.shake{animation:shake .4s ease}
.gameover-screen{text-align:center;padding:32px 16px}
.gameover-subtitle{font-size:1rem;color:var(--color-subtle);margin-bottom:32px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}
.stat-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}
.stat-card-value{font-size:1.5rem;font-weight:700;color:var(--color-progressive)}
.stat-card-label{font-size:.8125rem;color:var(--color-subtle);margin-top:4px}
.gameover-buttons{display:flex;flex-direction:column;gap:12px;align-items:center}
.footer{text-align:center;padding:24px 0;font-size:.8125rem;color:var(--color-placeholder)}.footer a{color:var(--color-progressive);text-decoration:none}
@media(max-width:480px){.container{padding:12px}.game-title{font-size:1.75rem}.items-grid{gap:8px}.item-card{padding:16px 12px;min-height:100px}.item-card-name{font-size:1rem}}