/* ── pisave gostimo sami: nič Google Fonts, nič zahtev tretjim pred privolitvijo ── */
  @font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
    src:url(fonts/anton-latin-ext-400-normal.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
    src:url(fonts/anton-latin-400-normal.woff2) format('woff2')}
  @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;
    src:url(fonts/barlow-semi-condensed-latin-ext-400-normal.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;
    src:url(fonts/barlow-semi-condensed-latin-400-normal.woff2) format('woff2')}
  @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;
    src:url(fonts/barlow-semi-condensed-latin-ext-600-normal.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;
    src:url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format('woff2')}
  @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;
    src:url(fonts/barlow-semi-condensed-latin-ext-700-normal.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;
    src:url(fonts/barlow-semi-condensed-latin-700-normal.woff2) format('woff2')}
  @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:900;font-display:swap;
    src:url(fonts/barlow-semi-condensed-latin-ext-900-normal.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:900;font-display:swap;
    src:url(fonts/barlow-semi-condensed-latin-900-normal.woff2) format('woff2')}

  :root{
    --bg:#0E0B12; --ink:#120E17; --paper:#F4EFE6; --dim:#8A8494;
    --yellow:#FFD60A; --pink:#FF3D8A; --orange:#FF6B00;
    --red:#F53127; --green:#9BE83B; --blue:#3D9BFF; --line:#2A2433;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  html,body{height:100%;overscroll-behavior:none;overflow:hidden}
  body{
    position:fixed;inset:0;width:100%;
    background:var(--bg); color:var(--paper);
    font-family:'Barlow Semi Condensed','Segoe UI',Roboto,sans-serif;
    user-select:none;-webkit-user-select:none;
  }
  /* elementi, znotraj katerih je drsenje dovoljeno (tipkovnični lock v app.js) */
  .scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  /* dostopnost: viden fokus za tipkovnico */
  :focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
  input:focus-visible{outline-offset:0}
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .disp{font-family:'Anton','Arial Black','Impact',sans-serif;text-transform:uppercase;letter-spacing:.01em}

  #app{height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  .scr{flex:1;display:flex;flex-direction:column;padding:22px 18px;gap:16px;animation:fadein .15s both}
  @keyframes fadein{from{opacity:0}}

  /* skupno */
  .tag{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
    padding:4px 9px;border:2px solid currentColor;align-self:flex-start}
  .q{font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
  .big-btn{background:var(--yellow);color:var(--ink);border:3px solid #000;box-shadow:0 6px 0 #000;
    padding:18px;text-align:center;font-family:'Anton','Arial Black','Impact',sans-serif;font-size:26px;text-transform:uppercase;
    cursor:pointer;letter-spacing:.03em}
  .big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #000}
  .ghost-btn{border:3px solid var(--paper);color:var(--paper);background:transparent;box-shadow:0 6px 0 var(--paper)}
  .stick{display:inline-block;background:var(--paper);color:var(--ink);padding:6px 12px;
    font-weight:900;font-size:13px;letter-spacing:.06em;box-shadow:4px 4px 0 #000;transform:rotate(2deg)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .opt{border:2px solid var(--paper);padding:16px 8px;text-align:center;font-weight:900;font-size:16px;
    letter-spacing:.04em;cursor:pointer;text-transform:uppercase;line-height:1.25}
  .opt:active{background:var(--paper);color:var(--ink)}
  .voter-banner{background:var(--paper);color:var(--ink);padding:10px 14px;font-weight:900;
    font-size:15px;letter-spacing:.08em;transform:rotate(-1deg);box-shadow:4px 4px 0 #000;
    text-transform:uppercase;align-self:flex-start}
  .subnote{font-size:13px;color:var(--dim);font-weight:600;line-height:1.45}
  .center-fill{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px}

  /* lobby */
    .logo{cursor:pointer;display:inline-flex;align-items:stretch;gap:.09em;
    font-size:17px;line-height:1;align-self:flex-start;
    font-family:'Anton','Arial Black','Impact',sans-serif;text-transform:uppercase}
  .logo .col{display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-2deg)}
  .logo .a{font-size:1em;line-height:.92;color:var(--yellow);text-shadow:.05em .05em 0 var(--red)}
  .logo .g2{font-size:.845em;line-height:.92;color:var(--dim);position:relative;width:max-content}
  .logo .g2::after{content:"";position:absolute;left:-5%;right:-5%;top:44%;height:.1em;
    background:var(--red);transform:rotate(-3deg);box-shadow:2px 2px 0 rgba(0,0,0,.4)}
  .logo .b{font-size:2.02em;line-height:.85;transform:rotate(2deg) translateY(.01em);
    color:var(--yellow);text-shadow:.05em .05em 0 var(--red);
    animation:lgGa .4s cubic-bezier(.2,1.7,.4,1) .35s both, lgBob 3.2s ease-in-out 1.6s infinite alternate}
  .logo .a{animation:lgD .35s cubic-bezier(.2,1.5,.4,1) both}
  .logo .g2{animation:lgFade .28s .85s both}
  .logo .g2::after{transform-origin:left center;animation:lgStrike .3s cubic-bezier(.6,0,.3,1) 1.15s both}
  @keyframes lgD{from{opacity:0;transform:translateY(-.4em)}}
  @keyframes lgFade{from{opacity:0}}
  @keyframes lgStrike{from{transform:rotate(-3deg) scaleX(0)}to{transform:rotate(-3deg) scaleX(1)}}
  @keyframes lgGa{from{opacity:0;transform:rotate(2deg) translateY(.01em) scale(2.3)}}
  @keyframes lgBob{from{transform:rotate(2deg) translateY(.01em)}to{transform:rotate(3deg) translateY(-.03em)}}
  .toggle{display:flex;border:2px solid var(--paper)}
  .toggle div{flex:1;text-align:center;padding:12px 0;font-weight:900;font-size:14px;letter-spacing:.08em;cursor:pointer}
  .toggle .on{background:var(--paper);color:var(--ink)}
  .chips{display:flex;flex-wrap:wrap;gap:9px}
  .chip{border:2px solid var(--paper);padding:9px 13px;font-weight:700;font-size:14px;cursor:pointer;text-transform:uppercase}
  .chip.sel{background:var(--pink);border-color:var(--pink);color:var(--ink);transform:rotate(-1.5deg);
    box-shadow:3px 3px 0 #000;font-weight:900}
  .util-row{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;display:flex;gap:8px;z-index:10}
  .util{width:42px;height:42px;border:2px solid var(--paper);display:flex;align-items:center;
    justify-content:center;font-size:18px;cursor:pointer;background:var(--bg);color:var(--paper)}
  .util.off{color:var(--dim);border-color:var(--dim)}

  /* napovednik */
  .ann{align-items:flex-start;justify-content:center;color:var(--ink)}
  .ann .rnd{position:absolute;top:calc(20px + env(safe-area-inset-top));left:18px;font-size:12px;font-weight:900;letter-spacing:.2em}
  .ann h1{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:19vw;line-height:.9;transform:rotate(-3deg);
    text-transform:uppercase;animation:pop .45s cubic-bezier(.2,1.6,.4,1) both}
  .ann .sub{margin-top:16px;transform:rotate(-3deg);background:var(--ink);padding:6px 11px;
    font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
  @keyframes pop{from{transform:rotate(-3deg) scale(.55);opacity:0}}

  /* timer */
  .tbar{height:8px;background:var(--line);position:relative;overflow:hidden}
  .tbar i{position:absolute;inset:0;transform-origin:left;background:var(--yellow)}
  .trow{display:flex;justify-content:space-between;align-items:center}
  .trow .s{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:30px}

  .h-q{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:26px;line-height:1.42;text-transform:uppercase}
  .h-q mark{background:var(--pink);color:var(--ink);padding:0 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

  /* razsodba */
  .verd{background:var(--red);justify-content:center;align-items:center;text-align:center;gap:8px}
  .verd .who{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:13.5vw;line-height:.92;text-transform:uppercase}
  .verd .pije{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:32px;letter-spacing:.14em}
  .stamp{margin-top:14px;border:4px solid var(--paper);padding:12px 20px;font-family:'Anton','Arial Black','Impact',sans-serif;
    font-size:30px;transform:rotate(-6deg);text-transform:uppercase;
    animation:slam .35s cubic-bezier(.2,1.8,.4,1) both .2s}
  @keyframes slam{from{transform:rotate(-6deg) scale(2.4);opacity:0}}
  .verd .meta{margin-top:14px;font-size:12px;font-weight:900;letter-spacing:.16em;color:var(--ink);text-transform:uppercase}

  /* izziv */
  .chd{background:var(--orange);color:var(--ink);padding:9px 12px;font-weight:900;font-size:13px;
    letter-spacing:.14em;display:flex;justify-content:space-between;box-shadow:4px 4px 0 #000;
    transform:rotate(-1deg);text-transform:uppercase}
  .card{border:3px solid var(--orange);padding:18px 15px}
  .card h4{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:34px;color:var(--orange);line-height:.98;
    margin-bottom:10px;text-transform:uppercase}
  .card p{font-size:15px;line-height:1.5;font-weight:600}
  .card p b{color:var(--orange)}
  .duo{display:flex;align-items:center;gap:12px;justify-content:center;font-size:34px;max-width:100%}
  .duo .p{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:1em;text-transform:uppercase}
  .duo .vs{background:var(--paper);color:var(--ink);font-weight:900;font-size:13px;padding:4px 8px;transform:rotate(6deg)}
  .odds{display:flex;gap:9px}
  .odds div{flex:1;border:2px solid var(--line);padding:10px 6px;text-align:center;font-size:11px;
    font-weight:900;letter-spacing:.08em;line-height:1.5;text-transform:uppercase}
  .odds b{display:block;font-size:13px}
  .odds .win b{color:var(--green)} .odds .lose b{color:var(--red)}

  /* ruleta */
  .roul{flex:1;display:flex;align-items:center;justify-content:center}
  .roul .name{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:13.5vw;text-transform:uppercase;max-width:100%;text-align:center;overflow-wrap:anywhere}

  /* gate */
  .gate{align-items:center;text-align:center;justify-content:center}
  .gate .lvl{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:64px;line-height:.9;text-transform:uppercase}
  .gate .lvl span{color:var(--pink)}
  .price{background:var(--pink);color:var(--ink);font-family:'Anton','Arial Black','Impact',sans-serif;font-size:32px;
    padding:7px 18px 5px;transform:rotate(3deg);box-shadow:5px 5px 0 #000;margin:12px 0 6px}
  .yn{display:flex;gap:12px;width:100%;margin-top:24px}
  .yn div{flex:1;border:3px solid #000;padding:16px 0;font-family:'Anton','Arial Black','Impact',sans-serif;font-size:26px;cursor:pointer}
  .yn .y{background:var(--yellow);color:var(--ink);box-shadow:0 5px 0 #000}
  .yn .n{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:0 5px 0 var(--paper)}

  /* pasica trajnih izzivov */
  .fx-strip{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;gap:2px}
  .fx{background:var(--orange);color:var(--ink);padding:10px 14px;font-weight:900;font-size:13px;
    letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;
    align-items:center;cursor:pointer;border-top:3px solid #000}
  .fx small{font-weight:700;font-size:10px;letter-spacing:.12em;opacity:.75}
  .scr.has-fx{padding-bottom:110px}

  /* overlay (potrditev / mini razsodba) */
  .ovl{position:absolute;inset:0;z-index:30;background:rgba(8,5,10,.92);display:flex;
    flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;text-align:center;
    animation:fadein .15s both}
  .ovl.red{background:var(--red)}
  .ovl .who2{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:15vw;line-height:.92;text-transform:uppercase}

  /* rezultat Bi raje */
  .res{border:2px solid var(--paper);padding:14px 12px;display:flex;justify-content:space-between;
    align-items:center;gap:12px;font-weight:900;font-size:14px;text-transform:uppercase;line-height:1.3}
  .res b{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:26px;flex:0 0 auto}
  .res.min{border-color:var(--red);color:var(--red);border-width:3px}
  .res.maj{border-color:var(--green);color:var(--green)}

  /* crtkan krog za naprej — vrti se in utripa, tap = naprej */
  .go-c{width:62px;height:62px;border:3px dashed currentColor;border-radius:50%;
    margin:22px auto 0;cursor:pointer;animation:spinc 7s linear infinite, glowp 1.6s ease-in-out infinite}
  @keyframes spinc{to{transform:rotate(360deg)}}
  @keyframes glowp{50%{opacity:.3}}
  .go-cap{font-size:10px;letter-spacing:.22em;font-weight:900;opacity:.8;margin-top:10px;
    text-transform:uppercase;text-align:center;cursor:pointer}

  /* vnos imen: crtkana crta + kvadratki */
  .name-row{display:flex;gap:10px}
  .name-in{flex:1;min-width:0;border:none;border-bottom:3px dashed var(--paper);background:transparent;
    color:var(--paper);padding:12px 4px;font-family:"Barlow Semi Condensed","Segoe UI",Roboto,sans-serif;
    font-weight:900;font-size:18px;letter-spacing:.08em;text-transform:uppercase;outline:none;border-radius:0}
  .name-in::placeholder{color:var(--dim);font-size:13px;letter-spacing:.14em}
  .addbtn{width:52px;border:3px solid var(--paper);display:flex;align-items:center;justify-content:center;
    font-size:26px;font-weight:900;cursor:pointer;flex:0 0 auto}
  .addbtn:active{background:var(--paper);color:var(--ink)}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow-y:auto;align-content:start;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  .pbox{background:var(--pink);color:var(--ink);height:52px;display:flex;align-items:center;
    justify-content:center;font-weight:900;font-size:17px;text-transform:uppercase;text-align:center;
    padding:4px 20px 4px 6px;cursor:pointer;box-shadow:3px 3px 0 #000;position:relative;
    animation:rise .25s cubic-bezier(.2,1.4,.4,1) both}
  .pbox:nth-child(odd){transform:rotate(-1.5deg)}
  .pbox:nth-child(even){transform:rotate(1.2deg)}
  .pbox i{position:absolute;top:50%;right:7px;transform:translateY(-50%);font-style:normal;
    font-size:18px;opacity:.85;line-height:1}

  .ffb{align-self:flex-start;border:2px dashed var(--yellow);color:var(--yellow);padding:5px 10px;
    font-size:10px;font-weight:900;letter-spacing:.14em;cursor:pointer;text-transform:uppercase}

  /* party soba */
  .pcode{font-family:"Anton","Arial Black","Impact",sans-serif;font-size:42px;background:var(--yellow);
    color:var(--ink);padding:3px 14px 1px;box-shadow:4px 4px 0 #000;transform:rotate(-2deg);display:inline-block}
  .pcnt2{font-family:"Anton","Arial Black","Impact",sans-serif;font-size:38px}
  .float-wrap{flex:1;position:relative;min-height:0}
  .fname{position:absolute;border:2px dashed var(--dim);color:var(--dim);padding:11px 15px;
    font-weight:900;font-size:15px;text-transform:uppercase;cursor:pointer;white-space:nowrap;
    animation:floaty 3s ease-in-out infinite alternate}
  .fname b{display:block;font-size:8px;letter-spacing:.22em;color:var(--pink);margin-top:2px}
  .fname.in{border:2px solid var(--pink);background:var(--pink);color:var(--ink);box-shadow:3px 3px 0 #000}
  .fname.in b{color:var(--ink)}
  @keyframes floaty{from{transform:translateY(0) rotate(-1.2deg)}to{transform:translateY(-13px) rotate(1.4deg)}}

  /* ruska ruleta na vratih */
  .rr-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
  .rr-name{position:relative;font-family:"Anton","Arial Black","Impact",sans-serif;font-size:17vw;
    line-height:1;text-transform:uppercase;max-width:100%}
  .rr-name .h{display:block;transition:transform .32s cubic-bezier(.3,1.2,.4,1),color .2s;white-space:nowrap}
  .rr-name .t{clip-path:inset(0 0 49% 0)}
  .rr-name .b{position:absolute;inset:0;clip-path:inset(51% 0 0 0)}
  .rr-name.split .t{transform:translate(-12px,-14px) rotate(-5deg)}
  .rr-name.split .b{transform:translate(12px,16px) rotate(4deg)}

  .flash{animation:flash .4s steps(2) infinite}
  @keyframes flash{50%{opacity:.25}}

  /* ── animacije med sklopi ── */
  /* napovednik: barvni wipe čez ekran */
  .ann{animation:wipe .32s cubic-bezier(.7,0,.2,1) both}
  @keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  .ann h1{animation-delay:.18s}
  .ann .sub{animation:rise .35s cubic-bezier(.2,1.4,.4,1) both .4s}

  /* razsodba: BUM — udarec, blisk, tresk. Nič wipe-a. */
  .verd{animation:bum .22s ease-out both, vshake .3s ease-out .1s}
  @keyframes bum{from{transform:scale(1.14);filter:brightness(2.2)}to{transform:scale(1);filter:brightness(1)}}
  @keyframes vshake{0%,100%{transform:translateY(0)}30%{transform:translateY(6px)}
    55%{transform:translateY(-4px)}80%{transform:translateY(2px)}}
  .ovl.red{animation:bum .22s ease-out both}

  /* možnosti pridejo noter stopnjevano */
  .opt,.gcard{animation:rise .3s cubic-bezier(.2,1.4,.4,1) both}
  .opt:nth-child(2),.gcard:nth-child(2){animation-delay:.05s}
  .opt:nth-child(3),.gcard:nth-child(3){animation-delay:.1s}
  .opt:nth-child(4),.gcard:nth-child(4){animation-delay:.15s}
  .opt:nth-child(5),.gcard:nth-child(5){animation-delay:.2s}
  .opt:nth-child(6){animation-delay:.25s}
  @keyframes rise{from{transform:translateY(14px);opacity:0}}

  /* kartica izziva prileti rahlo zavrtena */
  .card{animation:cardin .35s cubic-bezier(.2,1.5,.4,1) both}
  @keyframes cardin{from{transform:rotate(-3deg) scale(.85);opacity:0}}

  /* timer teče gladko, ne v skokih */
  .tbar i{transition:transform 1s linear}

  /* ruleta: končno ime poči */
  .roul .name.final{animation:pop .45s cubic-bezier(.2,1.7,.4,1) both;color:var(--orange)}

  /* pasica trajnega izziva pripolzi od spodaj */
  .fx{animation:fxin .3s cubic-bezier(.2,1.4,.4,1) both}
  @keyframes fxin{from{transform:translateY(100%)}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important}}

  /* samo za telefon — na širokem ekranu telefonski okvir */
  @media (min-width:520px){
    body{display:flex;align-items:center;justify-content:center;background:#060409}
    #app{max-width:420px;width:420px;height:min(900px,96dvh);border:3px solid #000;
      border-radius:36px;box-shadow:14px 14px 0 #000;background:var(--bg)}
    body::before{content:"DEJMO GA JE NAREJEN ZA TELEFON — TO JE PREDOGLED";
      position:fixed;top:18px;left:50%;transform:translateX(-50%);font-size:11px;
      font-weight:900;letter-spacing:.18em;color:var(--dim)}
  }

  /* kartice iger na hubu */
  .gcard{border:3px solid var(--paper);padding:16px 14px;cursor:pointer;position:relative}
  .gcard h3{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:30px;text-transform:uppercase;line-height:.95}
  .gcard p{font-size:12.5px;color:var(--dim);font-weight:600;margin-top:5px;line-height:1.4}
  .gcard .badge{position:absolute;top:-11px;right:10px;background:var(--green);color:var(--ink);
    font-weight:900;font-size:10px;letter-spacing:.12em;padding:4px 8px;transform:rotate(2deg);
    box-shadow:3px 3px 0 #000;text-transform:uppercase}
  .gcard.lock{border-color:var(--line);cursor:default}
  .gcard.lock h3{color:var(--dim)}
  .gcard.lock .badge{background:var(--line);color:var(--dim);box-shadow:none}
  .gcard:not(.lock):active{background:var(--paper)}
  .gcard:not(.lock):active h3,.gcard:not(.lock):active p{color:var(--ink)}

  /* prijava */
  .inp{width:100%;background:transparent;border:2px solid var(--paper);color:var(--paper);
    padding:14px 12px;font-family:'Barlow Semi Condensed','Segoe UI',Roboto,sans-serif;font-weight:700;
    font-size:16px;letter-spacing:.04em;outline:none}
  .inp::placeholder{color:var(--dim);text-transform:uppercase;font-size:13px;letter-spacing:.1em}
  .back{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;z-index:10;
    width:42px;height:42px;border:2px solid var(--paper);display:flex;align-items:center;
    justify-content:center;font-size:18px;cursor:pointer;background:var(--bg)}


  /* ── pravni ekrani, privolitev, noga ── */
  .legal-links{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;padding:2px 0}
  .legal-links a{color:var(--dim);font-size:10px;font-weight:900;letter-spacing:.16em;
    text-transform:uppercase;text-decoration:none;cursor:pointer;padding:4px 0}
  .legal-links a:active,.legal-links a:focus-visible{color:var(--yellow)}
  .ovl.consent{justify-content:flex-end;gap:12px;text-align:left;background:rgba(8,5,10,.97)}
  .consent-card{width:100%;border:3px solid var(--yellow);padding:16px 14px;display:flex;flex-direction:column;gap:10px}
  .consent-card h2{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:26px;line-height:1;text-transform:uppercase}
  .consent-card p{font-size:13.5px;font-weight:600;line-height:1.5;color:var(--paper)}
  .consent-card p b{color:var(--yellow)}
  .legal-box{position:absolute;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;
    padding:calc(14px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom))}
  .legal-body{flex:1;min-height:0;margin-top:12px;padding-right:4px;text-align:left;user-select:text;-webkit-user-select:text}
  .legal-body h3{font-family:'Anton','Arial Black','Impact',sans-serif;font-size:24px;text-transform:uppercase;margin-bottom:10px}
  .legal-body h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin:16px 0 4px}
  .legal-body p{font-size:14.5px;line-height:1.55;font-weight:500;margin:7px 0;color:var(--paper)}
  .legal-body .dg-legal-date{color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
  .legal-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
  .legal-tabs div{border:2px solid var(--paper);padding:7px 10px;font-size:11px;font-weight:900;
    letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
  .legal-tabs div.on{background:var(--paper);color:var(--ink)}

  a.ll,.ll{color:var(--yellow);text-decoration:underline;text-underline-offset:2px;cursor:pointer}

  /* ── v13: decibelmeter ── */
  .meter-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px}
  .meter-num{font-size:34vw;line-height:.9;text-align:center;
    font-variant-numeric:tabular-nums;transition:color .1s}
  .meter-bar{height:34px;border:3px solid var(--paper);position:relative;overflow:hidden;background:var(--ink)}
  .meter-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--green)}
  .meter-bar b{position:absolute;top:-3px;bottom:-3px;width:4px;background:var(--paper);left:0;
    box-shadow:0 0 0 1px var(--ink)}
  .mshake{animation:mshake .12s linear infinite}
  @keyframes mshake{0%{transform:translate(0,0)}25%{transform:translate(2px,-2px)}
    50%{transform:translate(-2px,2px)}75%{transform:translate(2px,2px)}100%{transform:translate(-2px,-2px)}}
  .cnt3{animation:pop .3s cubic-bezier(.2,1.7,.4,1) both}

  /* ── v13: OPA CAM ── */
  .cam-wrap{flex:1;min-height:0;position:relative;border:3px solid var(--pink);
    box-shadow:6px 6px 0 #000;overflow:hidden;background:#000}
  .cam-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .cam-wrap video.selfie{transform:scaleX(-1)}  /* zrcalo samo za selfie predogled */
  .cam-tog{margin-top:2px}
  .cam-tog div{font-size:12px;padding:10px 0}
  .cam-wm{position:absolute;left:12px;bottom:10px;pointer-events:none;display:flex;flex-direction:column}
  .cam-wm .a{font-family:'Anton','Arial Black',sans-serif;font-size:26px;color:var(--yellow);
    text-shadow:2px 2px 0 var(--red);text-transform:uppercase;line-height:1}
  .cam-wm .b{font-weight:700;font-size:15px;color:var(--paper);text-shadow:1px 1px 0 #000}
  .cam-cnt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:120px;color:var(--yellow);text-shadow:4px 4px 0 var(--red);background:rgba(8,5,10,.35)}
  .cam-cnt[hidden]{display:none!important}  /* [hidden] mora zares skriti (flex ga je povozil) */
  .cam-unmute{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
    background:var(--yellow);color:var(--ink);font-weight:900;font-size:14px;letter-spacing:.06em;
    padding:10px 16px;box-shadow:4px 4px 0 #000;cursor:pointer;text-transform:uppercase}
  .cam-live{position:absolute;top:10px;right:10px;margin:0;font-size:16px;padding:6px 12px;
    border-color:var(--red);color:var(--red);background:rgba(8,5,10,.6);animation:flash 1s steps(2) infinite}

  /* ── v17: host lahko vrže igralca iz lobbyja ── */
  .fname.kick{padding-right:34px}
  .fname.kick i{position:absolute;top:50%;right:9px;transform:translateY(-50%);
    font-style:normal;font-weight:900;font-size:17px;line-height:1;opacity:.9}