:root{--bg:#bfe9ff;--water:#5bb8e8;--panel:#fffaf0;--ink:#2b2b2b;--accent:#ffcc22;--btn:#ff9f1c;--muted:#8a8070;--card:#fff;--line:#e6dcc8}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,sans-serif;color:var(--ink);background:linear-gradient(var(--bg) 55%,var(--water));min-height:100vh;overflow-x:hidden}
button{font:inherit;color:inherit}

/* Haus */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1150px;margin:0 auto;padding:14px 16px 0;flex-wrap:wrap}
h1{margin:0;font-size:2rem;letter-spacing:1px;text-shadow:2px 2px 0 #fff;cursor:default;user-select:none}
.account{display:flex;align-items:center;gap:8px;font-weight:600}
.account button{border:0;border-radius:10px;padding:7px 14px;cursor:pointer;background:var(--btn);color:#fff;font-weight:700}
.account button.ghost{background:#fff;color:var(--ink)}
.account .ghostlink{background:#fff;border-radius:10px;padding:7px 14px;text-decoration:none;color:var(--ink);font-weight:700}
.account .banned{background:#ffd2cc;color:#b03a2e;border-radius:10px;padding:6px 12px;font-weight:700}
.account .cloud{font-size:.8rem;color:#335;font-weight:400}

/* Útlit */
.wrap{display:grid;grid-template-columns:1fr 400px;gap:20px;max-width:1150px;margin:0 auto;padding:16px}
@media (max-width:860px){.wrap{grid-template-columns:1fr}}

/* Öndin */
.main{text-align:center;position:relative}
.count{font-size:2.6rem;font-weight:800;line-height:1.1}
.rate{color:#335;font-size:1.05rem}
.buffs{min-height:28px;margin:6px 0;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.buff{background:#fff;border-radius:999px;padding:3px 10px;font-weight:700;font-size:.9rem;box-shadow:0 2px 0 var(--line)}
#duck{width:270px;max-width:72vw;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .07s;filter:drop-shadow(0 8px 6px rgba(0,0,0,.2))}
#duck:active{transform:scale(.92) rotate(-4deg)}
#duck.rainbow{animation:rainbow 3s linear infinite}
#duck.shiny{filter:drop-shadow(0 0 14px gold) drop-shadow(0 8px 6px rgba(0,0,0,.2))}
@keyframes rainbow{to{filter:hue-rotate(360deg) drop-shadow(0 8px 6px rgba(0,0,0,.2))}}
.float{position:absolute;pointer-events:none;font-weight:800;color:#fff;text-shadow:0 0 4px #000;animation:up 1s ease-out forwards;font-size:1.3rem;white-space:nowrap}
@keyframes up{to{transform:translateY(-90px);opacity:0}}
.pond{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;min-height:30px;margin-top:10px;font-size:1.1rem}
.foot{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.foot button{border:0;border-radius:10px;padding:6px 12px;cursor:pointer;background:#fff}

/* Spjald */
.panel{background:var(--panel);border-radius:16px;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,.15);align-self:start}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.tabs button{border:0;border-radius:10px;padding:7px 4px;font-size:.8rem;font-weight:700;cursor:pointer;background:#eee3cc}
.tabs button.on{background:var(--accent)}
.buyamt{display:flex;gap:6px;align-items:center;margin-bottom:8px;font-size:.9rem;color:var(--muted)}
.buyamt button{border:0;border-radius:8px;padding:4px 10px;cursor:pointer;background:#eee3cc;font-weight:700}
.buyamt button.on{background:var(--accent)}
#list{max-height:70vh;overflow-y:auto;padding-right:2px}
@media (max-width:860px){#list{max-height:none}}
#list h3{margin:12px 0 6px;font-size:1rem}
.empty{text-align:center;color:var(--muted);padding:10px}

.item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:var(--card);border-radius:12px;padding:9px 10px;margin-bottom:7px;cursor:pointer;text-align:left;box-shadow:0 2px 0 var(--line)}
.item:disabled{opacity:.45;cursor:not-allowed}
.item:not(:disabled):hover{background:#fff3cc}
.item.sel{outline:3px solid var(--accent)}
.item.locked{filter:grayscale(1)}
.item .ic{font-size:1.8rem;width:42px;text-align:center;flex:none}
.item .nm{font-weight:700}
.item .ds{font-size:.8rem;color:var(--muted)}
.item .own{margin-left:auto;font-size:1.4rem;font-weight:800;color:#c9b99a}

.ugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.ubtn{border:0;background:var(--card);border-radius:10px;font-size:1.6rem;padding:6px 0;cursor:pointer;box-shadow:0 2px 0 var(--line);position:relative}
.ubtn:disabled{opacity:.4;cursor:not-allowed}
.ubtn:not(:disabled):hover{background:#fff3cc}
.ubtn .tier{position:absolute;bottom:1px;right:4px;font-size:.6rem;font-weight:800;color:var(--muted)}
.uinfo{min-height:62px;background:#fff;border-radius:10px;padding:8px 10px;margin-bottom:8px;font-size:.9rem}
.uinfo b{display:block}

.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:5px}
.ach{background:#fff;border-radius:10px;font-size:1.4rem;text-align:center;padding:6px 0;box-shadow:0 2px 0 var(--line)}
.ach.no{filter:grayscale(1);opacity:.3}

.prestige{text-align:center}
.prestige .big{font-size:2.4rem;font-weight:800}
.primary{border:0;border-radius:12px;padding:10px 18px;background:var(--btn);color:#fff;font-weight:800;cursor:pointer;font-size:1rem}
.primary:disabled{opacity:.45;cursor:not-allowed}

table.stats,table.lb{width:100%;border-collapse:collapse;font-size:.9rem}
.stats td,.lb td,.lb th{padding:5px 6px;border-bottom:1px solid var(--line)}
.stats td:last-child,.lb td:last-child{text-align:right;font-weight:700}
.lb tr.me{background:#fff3cc}
.lb th{text-align:left;color:var(--muted);font-weight:600}

/* Gullönd + skilaboð */
#golden{position:fixed;font-size:3rem;cursor:pointer;display:none;animation:bob 1s ease-in-out infinite alternate;z-index:5;filter:drop-shadow(0 0 10px gold);user-select:none}
@keyframes bob{to{transform:translateY(-12px) rotate(8deg)}}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:10px 16px;border-radius:10px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:20;max-width:90vw;text-align:center}

/* Innskráning */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:30;padding:16px}
.modal.hidden{display:none}
.box{background:var(--panel);border-radius:16px;padding:20px;width:100%;max-width:360px;position:relative;display:flex;flex-direction:column;gap:10px}
.box .x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:1.2rem;cursor:pointer}
.mtabs{display:flex;gap:6px}
.mtabs button{flex:1;border:0;border-radius:10px;padding:8px;font-weight:700;cursor:pointer;background:#eee3cc}
.mtabs button.on{background:var(--accent)}
.box label{display:flex;flex-direction:column;font-weight:600;font-size:.9rem;gap:4px}
.box input{border:2px solid var(--line);border-radius:10px;padding:9px;font:inherit}
.box input:focus{outline:none;border-color:var(--btn)}
.err{color:#c0392b;font-size:.9rem;min-height:1.2em}
.hint{font-size:.8rem;color:var(--muted);margin:0}