:root{
    --cream:#FBF6EC;
    --navy:#182848;
    --navy-soft:#3A4A6B;
    --red:#E9502E;
    --red-dark:#C93E20;
    --orange:#F3873F;
    --yellow:#F6C61E;
    --blue:#5FC4DC;
    --blue-light:#7FD2E6;
    --blue-dark:#3FA9C4;
    --white:#FFFFFF;
    --shadow: 0 10px 30px rgba(24,40,72,0.12);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--cream);
    color:var(--navy);
    min-height:100vh;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Baloo 2',sans-serif;
    color:var(--navy);
    margin:0;
  }
  #app{
    max-width:520px;
    margin:0 auto;
    min-height:100vh;
    position:relative;
    display:flex;
    flex-direction:column;
  }
  .wave-top{
    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    height:150px;
    overflow:hidden;
    flex-shrink:0;
  }
  .wave-top svg{position:absolute;top:0;left:0;width:100%;height:100%;}

  /* Úvodní hlavička — jen na domovské obrazovce.
     Vlny se roztahují přes celé okno, nápis zůstává v rozumné
     velikosti nezávisle na šířce displeje. */
  .hero{
    width:100vw;
    margin-left:calc(50% - 50vw);
    flex-shrink:0;
    animation:hero-in .5s ease both;
  }
  .hero-band{width:100%;line-height:0;}
  .hero-band .hero-waves{width:100%;display:block;height:86px;}
  .hero-band-sea .hero-waves{height:56px;}

  .hero-middle{
    display:flex;align-items:center;justify-content:center;
    gap:clamp(10px,4vw,34px);
    padding:26px 16px 20px;
  }
  .hero-titleblock{text-align:center;}
  .hero-title{
    font-family:'Baloo 2',sans-serif;
    font-size:clamp(52px,13vw,84px);
    font-weight:800;
    line-height:1;
    letter-spacing:clamp(4px,1.6vw,12px);
    white-space:nowrap;
  }
  .hero-sub{
    font-family:'Inter',sans-serif;
    font-size:clamp(11px,2.9vw,15px);
    font-weight:700;
    letter-spacing:clamp(2px,.8vw,4px);
    color:var(--navy-soft);
    margin-top:10px;
    white-space:nowrap;
  }
  .hero-card{
    width:clamp(44px,12vw,72px);
    height:auto;
    flex-shrink:0;
  }
  @media (max-width:340px){
    .hero-card{display:none;}
  }

  @keyframes hero-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
  @media (prefers-reduced-motion:reduce){ .hero{animation:none;} }
  .screen{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:30px 22px 48px;
    animation:fadeIn .35s ease;
  }
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .title-xl{font-size:44px;font-weight:800;letter-spacing:-0.5px;}
  .title-lg{font-size:28px;font-weight:700;}
  .title-md{font-size:20px;font-weight:700;}
  .subtitle{color:var(--navy-soft);font-size:15px;line-height:1.5;margin-top:6px;}
  .btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    border:none;border-radius:16px;
    padding:16px 20px;
    font-family:'Baloo 2',sans-serif;
    font-size:17px;font-weight:700;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
    width:100%;
  }
  .btn:active{transform:scale(0.97);}
  .btn-primary{background:var(--navy);color:var(--cream);box-shadow:var(--shadow);}
  .btn-secondary{background:var(--white);color:var(--navy);border:2px solid var(--navy);}
  .btn-red{background:var(--red);color:var(--white);}
  .btn-blue{background:var(--blue-dark);color:var(--white);}
  .btn-yellow{background:var(--yellow);color:var(--navy);}
  .btn-ghost{background:transparent;color:var(--navy-soft);font-weight:600;text-decoration:underline;box-shadow:none;padding:10px;}
  .btn:disabled{opacity:0.4;cursor:not-allowed;}
  .stack{display:flex;flex-direction:column;gap:14px;}
  .row{display:flex;gap:10px;align-items:center;}
  .card-input{
    width:100%;padding:14px 16px;border-radius:14px;border:2px solid #E4DCC9;
    font-family:'Inter',sans-serif;font-size:16px;background:var(--white);color:var(--navy);
  }
  .card-input:focus{outline:none;border-color:var(--navy);}
  .spacer{flex:1;}
  .pill{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--white);border-radius:999px;padding:6px 14px;
    font-weight:700;font-size:14px;box-shadow:var(--shadow);
  }
  .code-display{
    font-family:'Baloo 2',sans-serif;font-size:38px;font-weight:800;
    letter-spacing:8px;text-align:center;background:var(--white);
    border-radius:18px;padding:18px;box-shadow:var(--shadow);color:var(--navy);
  }
  /* SdĂ­lenĂ­ kĂłdu mĂ­stnosti */
  .share-row{
    display:flex;gap:10px;justify-content:center;
    margin-top:12px;
  }
  .share-btn{
    flex:1;max-width:190px;
    background:var(--white);
    border:2px solid rgba(24,40,72,.14);
    border-radius:14px;
    padding:11px 10px;
    font-family:'Baloo 2',sans-serif;
    font-size:14.5px;font-weight:700;
    color:var(--navy);
    cursor:pointer;
    white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
    transition:border-color .16s ease, background-color .2s ease, color .2s ease;
  }
  .share-btn:hover{border-color:var(--navy);}
  .share-btn:active{transform:scale(.97);}
  .share-btn.done{
    background:var(--blue);
    border-color:var(--blue);
    color:var(--white);
  }

  .player-chip{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--white);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);
  }
  .player-chip .name{font-weight:700;}
  .remove-btn{background:none;border:none;color:var(--red);font-size:20px;cursor:pointer;line-height:1;}
  /* Karta podle tištěného originálu: bílá plocha s barevnou vlnou
     nahoře i dole, text tmavě modrý uprostřed. */
  .qcard{
    border-radius:22px;
    padding:74px 26px;
    min-height:230px;
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    background:var(--white);
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
  }
  .qcard .wave-band{
    position:absolute;left:0;width:100%;height:74px;
    display:block;pointer-events:none;
  }
  .qcard .wave-band.top{top:0;}
  .qcard .wave-band.bottom{bottom:0;transform:scaleY(-1);}
  .qcard-text{
    font-family:'Baloo 2',sans-serif;
    font-size:24px;font-weight:700;line-height:1.35;
    position:relative;z-index:2;
    color:var(--navy);
  }
  @media (max-width:380px){
    .qcard{padding:62px 20px;min-height:210px;}
    .qcard .wave-band{height:62px;}
    .qcard-text{font-size:21px;}
  }
  /* Kostka: bílá krychlička s barevným kolečkem uprostřed. */
  /* Vzdušnější herní obrazovka — skóre, kostka a tlačítko
     mají mezi sebou prostor, ať nejsou natlačené na sebe. */
  .gap-after-score{height:42px;}
  .die-area{margin-top:26px;gap:34px;}
  @media (max-width:420px){
    .gap-after-score{height:34px;}
    .die-area{margin-top:18px;gap:28px;}
  }

  .die{
    width:86px;height:86px;border-radius:22px;
    background:linear-gradient(150deg,#FFFFFF 0%,#F4EEE1 100%);
    box-shadow:0 10px 24px rgba(24,40,72,.16), inset 0 -4px 0 rgba(24,40,72,.06);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto;
  }
  .die .dot{
    width:38px;height:38px;border-radius:50%;
    box-shadow:inset 0 -3px 6px rgba(0,0,0,.12);
    transition:background .09s linear;
  }

  /* Točení během hodu */
  .die.rolling{animation:die-roll .45s cubic-bezier(.45,.05,.55,.95) infinite;}
  @keyframes die-roll{
    0%  {transform:rotate(0deg)   scale(1)    translateY(0);}
    25% {transform:rotate(90deg)  scale(1.08) translateY(-8px);}
    50% {transform:rotate(180deg) scale(.96)  translateY(0);}
    75% {transform:rotate(270deg) scale(1.08) translateY(-5px);}
    100%{transform:rotate(360deg) scale(1)    translateY(0);}
  }

  /* Dosednutí na výsledek */
  .die.landed{animation:die-land .5s cubic-bezier(.2,1.5,.4,1) 1;}
  @keyframes die-land{
    0%  {transform:scale(1.18);}
    45% {transform:scale(.94);}
    75% {transform:scale(1.04);}
    100%{transform:scale(1);}
  }

  /* Kdo si nepřeje pohyb, dostane jen změnu barvy. */
  @media (prefers-reduced-motion:reduce){
    .die.rolling,.die.landed{animation:none;}
  }
  .turn-banner{
    text-align:center;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:18px;
    color:var(--navy-soft);margin-bottom:14px;
  }
  .turn-banner b{color:var(--navy);}
  .score-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;}
  .score-chip{
    flex-shrink:0;background:var(--white);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow);
    min-width:110px;
    border:2px solid transparent;
    transition:border-color .16s ease;
  }
  /* Hráč na tahu: jen zvýrazněný obrys */
  .score-chip.active{border-color:var(--navy);}
  .score-chip .pname{font-weight:700;font-size:13px;margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .score-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;}
  .score-dots{display:flex;gap:9px;align-items:center;}

  /* Skóre: každá barva má dva sloty — tolik celých karet je třeba k výhře.
     Prázdný / poloviční / plný slot je vidět na první pohled. */
  .score-color{display:flex;gap:3px;align-items:center;}
  .score-color .slot{
    width:13px;height:17px;border-radius:4px;
    background:transparent;
    border:2px solid var(--c);
    opacity:.3;
    position:relative;overflow:hidden;
    transition:opacity .2s ease, background-color .2s ease;
  }
  .score-color .slot.filled{background:var(--c);opacity:1;}
  .score-color .slot.halffull{opacity:1;}
  .score-color .slot.halffull::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:50%;
    background:var(--c);
  }
  .score-color .slot-extra{font-size:10.5px;font-weight:700;margin-left:1px;}

  /* Odchod ze hry — nenápadný odkaz dole */
  .exit-wrap{
    display:flex;justify-content:center;
    margin-top:34px;
  }
  .exit-btn{
    background:none;border:none;
    font-family:'Inter',sans-serif;
    font-size:13.5px;font-weight:500;
    color:var(--navy-soft);
    opacity:.6;
    text-decoration:underline;
    text-underline-offset:3px;
    padding:8px 12px;
    cursor:pointer;
    transition:opacity .16s ease;
  }
  .exit-btn:hover{opacity:1;}

  .guess-row{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--white);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow);
  }
  .toggle{
    width:46px;height:28px;border-radius:14px;background:#E4DCC9;position:relative;cursor:pointer;flex-shrink:0;
    transition:background .15s ease;
  }
  .toggle.on{background:var(--navy);}
  .toggle::after{
    content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
    background:var(--white);transition:transform .15s ease;
  }
  .toggle.on::after{transform:translateX(18px);}
  .color-pick{display:flex;gap:10px;justify-content:center;margin-top:8px;}
  .color-dot-btn{
    width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer;
  }
  .color-dot-btn.selected{border-color:var(--navy);}
  .color-dot-btn.c-red{background:var(--red);}
  .color-dot-btn.c-yellow{background:var(--yellow);}
  .color-dot-btn.c-blue{background:var(--blue);}
  /* Domovská obrazovka: moře pokračuje až ke spodnímu okraji.
     Vlnky a plovoucĂ­ karty zaplnĂ­ prĂĄzdnou plochu dole. */
  .screen-sea{
    background-color:var(--blue);
    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding-left:max(22px, calc(50vw - 238px));
    padding-right:max(22px, calc(50vw - 238px));
    overflow:hidden;
  }
  .screen-sea::after{
    content:"";
    position:absolute;left:0;right:0;bottom:0;height:230px;
    pointer-events:none;
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 230' preserveAspectRatio='none'>\
<g fill='none' stroke='%23ffffff' stroke-linecap='round'>\
<path d='M0,40 C130,18 250,58 380,36 C440,26 490,40 520,32' stroke-opacity='.14' stroke-width='6'/>\
<path d='M0,92 C120,70 260,110 380,88 C445,76 490,92 520,84' stroke-opacity='.11' stroke-width='6'/>\
<path d='M0,146 C140,124 250,164 390,142 C450,132 495,146 520,138' stroke-opacity='.09' stroke-width='6'/>\
<path d='M0,198 C130,178 255,214 385,194 C447,184 494,196 520,190' stroke-opacity='.07' stroke-width='6'/>\
</g></svg>");
  }
  .screen-sea > *{position:relative;z-index:1;}

  /* Tlačítka na hladině: bez obrysu, s měkkým stínem jako karty na vodě */
  .screen-sea .btn-secondary{border:none;box-shadow:0 8px 18px rgba(10,60,80,.20);}
  .screen-sea .btn-primary{box-shadow:0 8px 18px rgba(10,60,80,.28);}
  .screen-sea .rules-toggle{color:var(--white);}
  .screen-sea .rules-step-text{color:var(--navy-soft);}

  /* Pravidla schovanĂĄ pod rozbalovacĂ­m odkazem */
  .rules{margin-top:14px;}
  .rules-toggle{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;
    background:none;border:none;
    font-family:'Baloo 2',sans-serif;
    font-size:16px;font-weight:700;
    color:var(--navy-soft);
    padding:12px;cursor:pointer;
  }
  .rules-chevron{
    display:inline-block;
    font-size:19px;line-height:1;
    transition:transform .22s ease;
  }
  .rules-toggle.open .rules-chevron{transform:rotate(180deg);}
  .rules-body{
    background:var(--white);
    border-radius:16px;
    padding:16px 18px;
    box-shadow:var(--shadow);
    animation:rules-in .22s ease both;
  }
  @keyframes rules-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
  .rules-step{display:flex;gap:12px;align-items:flex-start;}
  .rules-step + .rules-step{margin-top:14px;}
  .rules-num{
    flex-shrink:0;
    width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;
    color:var(--white);
  }
  .rules-step-title{font-weight:700;font-size:14.5px;color:var(--navy);}
  .rules-step-text{font-size:13.5px;line-height:1.45;color:var(--navy-soft);margin-top:2px;}
  @media (prefers-reduced-motion:reduce){
    .rules-body{animation:none;}
    .rules-chevron{transition:none;}
  }

  .banner-info{
    background:var(--white);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);
    font-size:14.5px;color:var(--navy-soft);line-height:1.5;
  }
  .banner-info b{color:var(--navy);}
  .center-col{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
  .win-crown{font-size:64px;}

  /* Závěrečná karta vítěze — nese všechny barvy hry */
  .qcard-final{
    padding:104px 26px;
    min-height:330px;
  }
  .qcard-final .wave-band{height:84px;}
  .qcard-final .qcard-text{font-size:21px;}
  .qcard-note{
    font-family:'Inter',sans-serif;
    font-size:13.5px;font-weight:500;
    color:var(--navy-soft);
    line-height:1.5;
    margin-top:12px;
  }
  @media (max-width:380px){
    .qcard-final{padding:88px 20px;min-height:300px;}
    .qcard-final .wave-band{height:70px;}
    .qcard-final .qcard-text{font-size:18.5px;}
  }

  .link-btn{background:none;border:none;color:var(--navy-soft);text-decoration:underline;cursor:pointer;font-size:14px;font-family:'Inter',sans-serif;}
  .badge{
    display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;
  }
  .badge.you{background:var(--navy);color:var(--cream);}
  .waiting-dots span{animation:blink 1.4s infinite;opacity:.2;}
  .waiting-dots span:nth-child(2){animation-delay:.2s;}
  .waiting-dots span:nth-child(3){animation-delay:.4s;}
  @keyframes blink{0%,80%,100%{opacity:.2;}40%{opacity:1;}}
  ::-webkit-scrollbar{display:none;}