/* ================= Retro Pixel + Snake + CRT (bereinigte Version) ================= */
:root { --bg:#1a1d21;--bg-alt:#23272d;--bg-accent:#2d333b;--border:#3a424b;--border-strong:#58626e;--text:#f2f5f7;--text-dim:#9aa3ad;--accent:#49bcef;--accent-alt:#6dd5ff;--danger:#ff5555;--success:#4ade80;--warning:#fbbf24;--focus:#ffffff;--radius:0;--transition-fast:120ms;--transition:180ms; font-family:'Press Start 2P',monospace; }
*{margin:0;padding:0;box-sizing:border-box;}
html,body{image-rendering:pixelated;}
body{font-family:'Press Start 2P',monospace;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;padding:24px 14px 60px;font-size:12px;letter-spacing:.5px;}
.container{max-width:640px;margin:0 auto;}
header{text-align:center;margin-bottom:32px;}
.profile{padding:32px 10px 18px;}
.profile p{color:var(--text-dim);font-size:10px;}
/* Snake Header */
#snake-header-wrapper{display:flex;justify-content:center;align-items:center;margin:-4px 0 12px;}
#snake-canvas{image-rendering:pixelated;border:2px solid var(--accent);background:#000;padding:2px;box-shadow:0 0 6px rgba(73,188,239,0.35);} 
body.crt #snake-canvas{box-shadow:0 0 8px rgba(73,188,239,0.55),0 0 12px rgba(73,188,239,0.35);}    
/* Externer Score */
#snake-score{letter-spacing:1px;text-shadow:0 0 4px rgba(73,188,239,0.4);} 
/* Touch D-Pad */
#snake-touch{margin-top:10px;display:none;flex-direction:column;align-items:center;gap:4px;}
#snake-touch .mid-row{display:flex;gap:4px;}
#snake-touch button{width:42px;height:42px;padding:0;background:var(--bg-accent);border:2px solid var(--border-strong);color:var(--text);font-family:'Press Start 2P',monospace;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#snake-touch button:active{filter:brightness(1.2);} 
#snake-touch button[data-d="pause"]{width:48px;}
/* Links */
#links-container,#admin-links-container{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;}
.link-item{background:var(--bg-alt);border:2px solid var(--border);border-radius:var(--radius);padding:14px 16px 12px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);cursor:pointer;position:relative;transition:background var(--transition-fast),border-color var(--transition-fast);} 
.link-item:hover{background:var(--bg-accent);border-color:var(--accent);} 
.link-item:active{filter:brightness(1.1);} 
.link-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--accent);border:2px solid var(--border-strong);border-radius:var(--radius);flex-shrink:0;}
.link-icon svg{width:20px;height:20px;fill:#073e52;}
.link-content{flex:1;}
.link-title{font-size:12px;margin-bottom:2px;letter-spacing:.5px;}
.link-url{font-size:9px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Admin Item */
.admin-link-item{background:var(--bg-alt);border:2px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;gap:12px;}
.admin-link-item .link-actions{display:flex;gap:6px;}
.admin-link-item button{padding:8px 10px 6px;border:2px solid var(--border-strong);background:var(--bg-accent);color:var(--text);font-size:10px;cursor:pointer;border-radius:var(--radius);transition:background var(--transition-fast),border-color var(--transition-fast);} 
.admin-link-item button:hover{background:var(--accent);color:#072b38;border-color:var(--accent);} 
/* Buttons */
.toggle-btn{background:var(--success);color:#04210f;font-weight:700;} 
.toggle-btn.inactive{background:var(--warning);color:#3b2d05;} 
.delete-btn{background:var(--danger);color:#2a0808;font-weight:700;} 
.delete-btn:hover{filter:brightness(1.1);} 
/* Footer */
footer{text-align:center;padding:24px 0 0;border-top:2px solid var(--border);margin-top:32px;font-size:9px;color:var(--text-dim);} 
.admin-link,.back-link{color:var(--accent);text-decoration:none;font-size:10px;} 
.admin-link:hover,.back-link:hover{text-decoration:underline;} 
/* Login */
#login-screen{max-width:420px;margin:80px auto 60px;text-align:center;} 
#login-screen h1{margin-bottom:24px;font-size:16px;color:var(--accent);} 
#login-form{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;} 
#login-form input{padding:12px 14px 10px;background:var(--bg-alt);border:2px solid var(--border);color:var(--text);font-size:11px;font-family:inherit;border-radius:var(--radius);} 
#login-form input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--accent);} 
#login-form button{padding:12px 14px 10px;background:var(--accent);color:#062838;border:2px solid var(--border-strong);font-size:10px;font-weight:700;cursor:pointer;transition:filter var(--transition-fast);border-radius:var(--radius);} 
#login-form button:hover{filter:brightness(1.1);} 
.error-message{color:var(--danger);font-size:10px;margin-top:8px;} 
/* Admin Panel */
#admin-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;padding-bottom:14px;border-bottom:2px solid var(--border);} 
.logout-btn{padding:10px 14px 8px;background:var(--danger);color:#2a0808;border:2px solid var(--border-strong);font-size:10px;font-weight:700;cursor:pointer;border-radius:var(--radius);} 
.logout-btn:hover{filter:brightness(1.1);} 
.admin-content{display:flex;flex-direction:column;gap:32px;} 
.add-link-form h2,.links-list h2{font-size:12px;margin-bottom:14px;color:var(--accent);} 
.add-link-form form{display:flex;flex-direction:column;gap:10px;background:var(--bg-alt);padding:18px 16px 16px;border-radius:var(--radius);border:2px solid var(--border);} 
.add-link-form input,.add-link-form select{padding:10px 12px 8px;background:var(--bg);border:2px solid var(--border);color:var(--text);font-size:11px;font-family:inherit;border-radius:var(--radius);} 
.add-link-form input:focus,.add-link-form select:focus{outline:2px solid var(--focus);border-color:var(--accent);} 
.add-link-form button{padding:10px 12px 8px;background:var(--accent);color:#062838;border:2px solid var(--border-strong);font-size:10px;font-weight:700;cursor:pointer;border-radius:var(--radius);transition:filter var(--transition-fast);} 
.add-link-form button:hover{filter:brightness(1.1);} 
/* Responsive */
@media (max-width:680px){body{font-size:11px;} .container{padding:0 4px;} .link-item{padding:12px 12px 10px;} .link-title{font-size:11px;} .link-url{font-size:8px;} .admin-link-item{flex-direction:column;align-items:flex-start;} .admin-link-item .link-actions{width:100%;justify-content:flex-end;}} 
/* CRT Effekt */
body.crt {position: relative;overflow-x: hidden;background: radial-gradient(circle at 50% 50%, #1f2226 0%, #16181b 70%, #0f1012 100%);} 
body.crt:before, body.crt:after {content: "";pointer-events: none;position: fixed;left:0;top:0;right:0;bottom:0;z-index: 999;} 
body.crt:before {background: repeating-linear-gradient(to bottom,rgba(255,255,255,0.07) 0px,rgba(255,255,255,0.07) 1px,rgba(0,0,0,0) 2px,rgba(0,0,0,0) 3px);mix-blend-mode: overlay;opacity: 0.25;animation: scan-move 14s linear infinite;} 
body.crt:after {background:radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 85%, rgba(0,0,0,0.55) 100%),linear-gradient(0deg, rgba(255,255,255,0.05), rgba(0,0,0,0.05));animation: crt-flicker 3.8s steps(2,end) infinite;} 
.crt .container {filter: contrast(1.05) saturate(1.15);position: relative;} 
.crt .container:before {content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background: repeating-linear-gradient(90deg,rgba(255,0,0,0.07) 0px, rgba(255,0,0,0.07) 1px,rgba(0,255,0,0.07) 1px, rgba(0,255,0,0.07) 2px,rgba(0,0,255,0.07) 2px, rgba(0,0,255,0.07) 3px,rgba(0,0,0,0) 3px, rgba(0,0,0,0) 4px);opacity: .18;} 
body.crt .link-item:hover { box-shadow: 0 0 0 2px var(--accent), 0 0 6px rgba(73,188,239,0.5); } 
body.crt .admin-link-item button:hover { box-shadow: 0 0 0 2px var(--accent), 0 0 6px rgba(73,188,239,0.5); } 
@keyframes scan-move {0% { background-position:0 0;}100% { background-position:0 100%; }} 
@keyframes crt-flicker {0%,50%,52%,54%,56%,58%,100% { opacity:1;}51%,53%,55%,57% { opacity:.92;}} 
/* ================= Ende Retro Theme ================= */