/* Arsgenius igrice — zajednički izgled (Slovo po slovo, Pogodi reč) */
:root{
  --bg:#f3f7f1; --card:#ffffff; --ink:#1b2b23; --muted:#5f7368; --line:#dfe8e1;
  --pine:#2f6e52; --pine-2:#3d8565; --pine-soft:#e3efe7; --board:#173a2a; --led:#ffd23f;
  --good:#2f9e5f; --warn:#d9480f;
  --t1:#ef6f5a; --t2:#f0a93b; --t3:#3f9a68; --t4:#3a86c8; --t5:#8d6be0; --t6:#e0608a;
  --font:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--font);font-size:16px;padding:16px 16px 48px;min-height:100vh;
  background-image:radial-gradient(circle at 0% 0%,#e2eee5 0 260px,transparent 261px),radial-gradient(circle at 100% 40%,#e9f1e4 0 200px,transparent 201px);background-repeat:no-repeat}
button{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--t4);outline-offset:3px}
.wrap{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
[hidden]{display:none!important}

.top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.top a{color:var(--ink);text-decoration:none;font-weight:800;font-size:15px}
.top a:hover{color:var(--pine)}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:900!important;font-size:17px!important}
.brand svg{width:28px;height:28px}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:none;color:var(--muted);font-weight:800;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--pine);color:#fff}
.round-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--card);cursor:pointer;font-size:17px;display:grid;place-items:center;color:var(--ink);font-weight:900}
.round-btn:hover{border-color:var(--pine)}
.profile{height:40px;border-radius:999px;border:2px solid var(--line);background:var(--card);cursor:pointer;font-weight:800;font-size:14px;padding:0 14px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.profile:hover{border-color:var(--pine)}

.head{display:flex;align-items:center;gap:14px}
h1{font-weight:900;font-size:clamp(30px,7vw,44px);line-height:1;margin:0;letter-spacing:-.5px}
h1 span{color:var(--pine)}
.owl{font-size:40px;line-height:1;flex:none;animation:hop 3s ease-in-out infinite}
@keyframes hop{0%,100%{transform:none}50%{transform:translateY(-4px) rotate(-4deg)}}
.bubble{position:relative;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:8px 12px;font-weight:700;font-size:14px;color:var(--muted);flex:1;min-height:40px;display:flex;align-items:center}
.bubble::before{content:"";position:absolute;left:-8px;top:50%;width:12px;height:12px;background:var(--card);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:translateY(-50%) rotate(45deg)}

.panel{background:var(--card);border-radius:20px;padding:12px;display:grid;gap:10px;box-shadow:0 2px 0 var(--line)}
.panel.locked{opacity:.5;pointer-events:none}
.row-label{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px 4px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.chips.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.chips{grid-template-columns:repeat(2,1fr)}.chips.three{grid-template-columns:repeat(3,1fr)}}
.chip{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:8px 4px;font-weight:800;font-size:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2}
.chip small{font-weight:700;font-size:11px;color:var(--muted)}
.chip:hover{border-color:var(--pine)}
.chip[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:#fff}
.chip[aria-pressed="true"] small{color:#d4eadb}
.chip.ultra[aria-pressed="true"]{background:linear-gradient(135deg,#7a1f3d,#d9480f);border-color:#a3282f}
.chip.duel[aria-pressed="true"]{background:linear-gradient(135deg,#3a86c8,#8d6be0);border-color:#5b6fd0}

.status{display:flex;gap:8px;flex-wrap:wrap}
.pill{background:var(--card);border-radius:999px;padding:6px 12px;font-weight:900;font-size:14px;box-shadow:0 2px 0 var(--line);font-variant-numeric:tabular-nums;border:0;font-family:inherit;color:inherit}
button.pill{cursor:pointer}

.board{background:var(--board);border-radius:24px;padding:16px 20px 18px;box-shadow:0 6px 0 #0e2519;color:#cfe2d6;position:relative;overflow:hidden}
.board small{display:block;font-weight:900;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8fbca2}
.clock{font-family:var(--mono);font-size:32px;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.clock.low{color:#ff8a65;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.5}}
.tbar{position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--led);transform-origin:left;transition:transform .25s linear}

.msg{min-height:24px;text-align:center;font-weight:800;font-size:16px;margin:0}
.msg.bad{color:var(--warn)} .msg.ok{color:var(--good)} .msg.tip{color:var(--t4)}

.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:520px){.actions{grid-template-columns:repeat(2,1fr)}}
.btn{font-weight:800;font-size:15px;border-radius:14px;padding:12px 8px;cursor:pointer;border:2px solid var(--line);background:var(--card);color:var(--ink)}
.btn:hover:not(:disabled){border-color:var(--pine)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.main{grid-column:1/-1;background:var(--pine);border-color:var(--pine);color:#fff;font-size:18px;padding:14px;box-shadow:0 4px 0 #1f4d39}
.btn.main:hover:not(:disabled){background:var(--pine-2)}

.result{background:var(--card);border-radius:24px;padding:20px;text-align:center;box-shadow:0 4px 0 var(--line);animation:deal .5s cubic-bezier(.3,1.5,.5,1)}
.result p{margin:6px 0;font-size:17px}
.result .btn{margin-top:14px;padding:12px 22px;background:var(--pine);color:#fff;border-color:var(--pine)}
.stars{font-size:46px;letter-spacing:6px;color:var(--t2);line-height:1.1}
.stars .off{color:#dde5df}
.sol{font-weight:900;font-size:20px;color:var(--pine);background:var(--pine-soft);border-radius:12px;padding:8px 12px;display:inline-block;margin:4px 3px 0}
@keyframes deal{from{transform:translateY(-20px) scale(.6);opacity:0}}

dialog{border:0;border-radius:24px;padding:24px;max-width:480px;width:calc(100% - 32px);color:var(--ink);background:var(--card);max-height:calc(100vh - 32px)}
dialog::backdrop{background:rgba(23,58,42,.55)}
dialog h2{margin:0 0 12px;font-weight:900;font-size:24px}
dialog ul,dialog ol{padding-left:20px;margin:0;line-height:1.6}
dialog p{line-height:1.5}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{border:2px solid var(--line);background:var(--bg);border-radius:999px;padding:7px 12px;font-weight:800;font-size:13px;cursor:pointer;color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--pine);border-color:var(--pine);color:#fff}
.field{display:grid;gap:6px;margin:10px 0}
.field label{font-size:13px;font-weight:800;color:var(--muted)}
.field input,.field select{font:800 18px var(--font);border:2px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--ink);background:var(--bg);width:100%}
.field input:focus,.field select:focus{outline:none;border-color:var(--pine)}
.btn-row{display:grid;gap:8px;margin-top:16px}
.btn-row.two{grid-template-columns:1fr 1fr}
.btn-row.two .btn.main{grid-column:auto}
.note{font-size:13px;color:var(--muted);margin:10px 0 0}

.pop{text-align:center}
.pop-emoji{font-size:64px;line-height:1;animation:bounce 1s ease infinite alternate}
@keyframes bounce{to{transform:translateY(-8px) scale(1.06)}}
.pop h2{font-size:30px;margin:8px 0 4px}
.pts{font-family:var(--mono);font-size:54px;color:var(--pine);line-height:1;margin:10px 0 4px}
.pts small{font-family:var(--font);font-size:16px;font-weight:800;color:var(--muted)}
.breakdown{list-style:none;padding:0!important;margin:8px auto!important;max-width:300px;display:grid;gap:4px}
.breakdown li{display:flex;justify-content:space-between;font-weight:700;font-size:14px;background:var(--bg);border-radius:10px;padding:6px 12px}
.duel-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.duel-cmp div{background:var(--bg);border-radius:16px;padding:12px;border:3px solid transparent}
.duel-cmp div.win{border-color:var(--t2);background:#fff8e6}
.duel-cmp strong{display:block;font-size:16px}
.duel-cmp .big{font-weight:900;font-size:22px;color:var(--pine);word-break:break-word}
.duel-cmp small{display:block;font-weight:700;color:var(--muted);font-size:12px}

#cover{position:fixed;inset:0;background:radial-gradient(circle at 50% 30%,#24543f,var(--board));color:#fff;z-index:30;display:grid;place-items:center;text-align:center;padding:24px}
#cover h2{font-size:clamp(26px,6vw,40px);font-weight:900;margin:0 0 8px}
#cover p{font-size:17px;font-weight:700;color:#cfe2d6;max-width:420px;margin:6px auto}
#cover .btn{margin-top:20px;padding:16px 36px;font-size:20px;background:var(--led);border-color:var(--led);color:var(--board)}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,150%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:16px;font-weight:800;z-index:40;transition:transform .4s cubic-bezier(.3,1.5,.5,1),visibility .4s;visibility:hidden;max-width:calc(100% - 32px);text-align:center}
.toast:empty{display:none}
.toast.show{transform:translate(-50%,0);visibility:visible}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
.foot-note{text-align:center;color:var(--muted);font-size:14px;margin-top:8px}
.foot-note a{color:var(--ink);font-weight:900}
.spinner{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--pine);border-radius:50%;animation:rot 1s linear infinite;display:inline-block;vertical-align:middle}
@keyframes rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Lista najboljih */
.lb{list-style:none;padding:0!important;margin:0!important;display:grid;gap:6px;max-height:52vh;overflow:auto}
.lb li{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;background:var(--bg);border-radius:14px;padding:8px 12px;font-weight:800}
.lb li.me{background:var(--pine-soft);outline:2px solid var(--pine)}
.lb .rk{font-family:var(--mono);font-size:20px;text-align:center;color:var(--muted)}
.lb .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .nm small{display:block;font-weight:700;font-size:12px;color:var(--muted)}
.lb .pt{font-family:var(--mono);font-size:20px;color:var(--pine)}
.lb .empty{display:block;text-align:center;color:var(--muted);font-weight:700;padding:20px}
.duelinfo{background:linear-gradient(135deg,#3a86c8,#8d6be0);color:#fff;border-radius:16px;padding:10px 14px;font-weight:800;font-size:14px}