/* Čovječe ne ljuti se: the classic cross shaped board on an 11 by 11 grid, in the site's Ćilim tokens. Each player's
   base, start field and house carry the player's colour; the figures you may move pulse with a saffron ring. */
.cv-page{padding-bottom:40px}
.cv-head{padding:26px 0 6px;text-align:center}
.cv-head h1{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em;color:var(--indigo);margin-top:10px}
.cv-head p{margin:10px auto 0;max-width:640px;color:var(--ink-2);font-size:17px}
.cv-head .crumbs{justify-content:center}
.cv{--red-p:#b8322b;--blue-p:#2b4a8c;--green-p:#4f7a2a;--yellow-p:#d49a1c;max-width:620px;margin:14px auto 0;padding:20px 14px 18px;background:var(--card);box-shadow:inset 0 0 0 2px var(--rim-soft);position:relative;text-align:center}
.cv::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--zig-blue)}
.cv-opts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:4px;font-size:15px;color:var(--ink-2)}
.cv-opts button,.cv-tool{min-height:44px;padding:0 14px;border:2px solid var(--indigo);background:transparent;color:var(--indigo);font:600 15px/1 var(--text);cursor:pointer}
.cv-opts button[aria-pressed="true"]{background:var(--indigo);color:var(--cream)}
.cv-players{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.cv-player{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;font-size:14px;color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--rim-soft)}
.cv-player::before{content:"";inline-size:14px;block-size:14px;border-radius:50%;background:var(--pc)}
.cv-player.is-turn{box-shadow:inset 0 0 0 3px var(--pc);color:var(--ink);font-weight:700}
.cv-player b{color:var(--indigo)}
.cv-player[data-cv-player="red"]{--pc:var(--red-p)}.cv-player[data-cv-player="blue"]{--pc:var(--blue-p)}.cv-player[data-cv-player="green"]{--pc:var(--green-p)}.cv-player[data-cv-player="yellow"]{--pc:var(--yellow-p)}
.cv-board{--s:min(48px,calc((100vw - 40px) / 11));display:grid;grid-template-columns:repeat(11,var(--s));grid-template-rows:repeat(11,var(--s));justify-content:center;margin:14px auto 0}
.cv-cell{display:grid;place-items:center;position:relative}
.cv-cell[data-kind]::before{content:"";position:absolute;inset:8%;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 2px var(--rim)}
.cv-cell[data-kind="start"]::before,.cv-cell[data-kind="base"]::before,.cv-cell[data-kind="house"]::before{background:color-mix(in srgb,var(--pc) 28%,var(--cream));box-shadow:inset 0 0 0 2px var(--pc)}
.cv-cell[data-pc="red"]{--pc:var(--red-p)}.cv-cell[data-pc="blue"]{--pc:var(--blue-p)}.cv-cell[data-pc="green"]{--pc:var(--green-p)}.cv-cell[data-pc="yellow"]{--pc:var(--yellow-p)}
.cv-fig{position:relative;z-index:1;inline-size:64%;block-size:64%;padding:0;border:0;border-radius:50%;background:var(--fc);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 2px 0 rgba(42,28,20,.35)}
.cv-fig[data-c="red"]{--fc:var(--red-p)}.cv-fig[data-c="blue"]{--fc:var(--blue-p)}.cv-fig[data-c="green"]{--fc:var(--green-p)}.cv-fig[data-c="yellow"]{--fc:var(--yellow-p)}
button.cv-fig{cursor:pointer;inline-size:84%;block-size:84%;min-inline-size:0}
button.cv-fig::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 3px var(--saffron);animation:cv-pulse 1.1s infinite}
button.cv-fig:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
@keyframes cv-pulse{50%{box-shadow:0 0 0 5px var(--saffron)}}
.cv-play{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin-top:14px}
.cv-die{--s:56px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;inline-size:var(--s);block-size:var(--s);padding:8px;background:var(--cream);box-shadow:inset 0 0 0 2px var(--indigo),0 4px 0 var(--rim)}
.cv-die i{inline-size:9px;block-size:9px;border-radius:50%;background:var(--indigo);visibility:hidden}
.cv-die i:nth-child(1){grid-area:1/1}.cv-die i:nth-child(2){grid-area:1/3}.cv-die i:nth-child(3){grid-area:2/1}.cv-die i:nth-child(4){grid-area:2/2}.cv-die i:nth-child(5){grid-area:2/3}.cv-die i:nth-child(6){grid-area:3/1}.cv-die i:nth-child(7){grid-area:3/3}
.cv-die[data-v="1"] i:nth-child(4),.cv-die[data-v="2"] i:nth-child(2),.cv-die[data-v="2"] i:nth-child(6),.cv-die[data-v="3"] i:nth-child(2),.cv-die[data-v="3"] i:nth-child(4),.cv-die[data-v="3"] i:nth-child(6),
.cv-die[data-v="4"] i:nth-child(1),.cv-die[data-v="4"] i:nth-child(2),.cv-die[data-v="4"] i:nth-child(6),.cv-die[data-v="4"] i:nth-child(7),
.cv-die[data-v="5"] i:nth-child(1),.cv-die[data-v="5"] i:nth-child(2),.cv-die[data-v="5"] i:nth-child(4),.cv-die[data-v="5"] i:nth-child(6),.cv-die[data-v="5"] i:nth-child(7),
.cv-die[data-v="6"] i:not(:nth-child(4)){visibility:visible}
.cv-die.is-roll{animation:cv-roll .35s}
@keyframes cv-roll{30%{transform:rotate(-14deg) scale(.92)}70%{transform:rotate(10deg)}}
.cv-play .btn{min-height:48px;padding:0 26px;font-size:14px}
.cv-status{min-height:48px;margin-top:12px;display:grid;place-items:center;font-size:16px;color:var(--ink)}
.cv-log{min-height:24px;font-size:14px;color:var(--ink-2)}
.cv-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:15px;color:var(--ink-2)}
.cv-foot b{font:800 20px/1 var(--display);color:var(--indigo);margin-inline:4px}
.cv-tool:focus-visible,.cv-opts button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.cv-noscript{margin-top:12px;padding:12px;background:var(--wool)}
.cv-info{max-inline-size:880px;margin:34px auto 0}
.cv-info h2{font-size:clamp(22px,2.6vw,30px);color:var(--indigo);margin-top:30px}
.cv-info h2:first-child{margin-top:0}
.cv-info p,.cv-info li{margin-top:12px;color:var(--ink-2);font-size:17px;line-height:1.6}
.cv-info ul{padding-inline-start:22px}
.cv-info a{color:var(--red);font-weight:600}
@media (max-width:600px){.cv{margin-inline:calc(-1 * var(--gutter));padding-inline:4px}.cv-board{--s:calc((100vw - 16px) / 11)}.cv-page{padding-bottom:110px}.cv-head{padding-top:6px}.cv-head .kicker{display:none}}
@media (prefers-reduced-motion:reduce){button.cv-fig::after,.cv-die{animation:none!important}}
.cv-moves{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.cv-moves:empty{display:none}
.cv-move{min-height:44px;padding:0 16px;border:0;background:var(--saffron);color:var(--indigo);font:700 15px/1 var(--text);cursor:pointer;box-shadow:inset 0 -3px 0 #b97a12}
.cv-move:focus-visible{outline:3px solid var(--red);outline-offset:2px}