:root{color-scheme:light;--ink:#082c45;--cream:#fff9e8;--gold:#ffd84f;--red:#f24d3d;--blue:#12a9db;--green:#43c86b}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0}body{min-height:100dvh;overflow:hidden;font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;color:#fff;background:#082c45;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}button,input{font:inherit}.app{position:relative;display:grid;width:100%;height:100dvh;min-height:480px;overflow:hidden;isolation:isolate}.topbar{position:absolute;z-index:20;top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:grid;grid-template-columns:1fr auto 1fr;align-items:start;pointer-events:none}.top-actions{display:flex;gap:8px;pointer-events:auto}.right-actions{justify-self:end;align-items:center}.icon-button{min-width:44px;min-height:44px;padding:0 14px;border:2px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;background:rgba(5,34,52,.74);box-shadow:0 5px 16px rgba(0,0,0,.18);backdrop-filter:blur(8px);cursor:pointer}.icon-button span{margin-left:3px}.icon-button:active{transform:translateY(2px)}.brand{padding:8px 20px 9px;border:3px solid #6a3a17;border-radius:14px;color:#fff7c7;background:linear-gradient(#ee8c2e,#a84d17);box-shadow:inset 0 0 0 2px #ffc84c,0 6px 0 #512d17,0 10px 24px rgba(0,0,0,.25);font-weight:1000;font-size:clamp(19px,3vw,32px);line-height:1;letter-spacing:.04em;text-shadow:0 3px 0 #743511;transform:rotate(-1deg)}.connection-pill{display:flex;align-items:center;gap:7px;min-height:39px;padding:0 12px;border-radius:999px;background:rgba(4,36,53,.76);font-size:13px;font-weight:900;backdrop-filter:blur(8px)}.connection-pill i{width:10px;height:10px;border-radius:50%;background:#ffd84f;box-shadow:0 0 0 4px rgba(255,216,79,.2)}.connection-pill.connected i{background:#63ef85;box-shadow:0 0 0 4px rgba(99,239,133,.2)}
.arena{display:grid;grid-template-columns:1fr 1fr;height:100%}.player{position:relative;display:grid;place-items:center;overflow:hidden;padding:clamp(70px,9vh,104px) clamp(10px,2.2vw,34px) clamp(16px,3vh,34px)}.player::before,.player::after{content:"";position:absolute;pointer-events:none;border-radius:50%;opacity:.16;border:4px solid #fff}.player::before{width:38vw;height:38vw;top:-26vw;left:-12vw}.player::after{width:28vw;height:28vw;right:-15vw;bottom:-18vw}.player-one{background:radial-gradient(circle at 28% 25%,#ff7b4c 0,var(--red) 44%,#c92c36 100%)}.player-two{background:radial-gradient(circle at 72% 25%,#35d6e8 0,var(--blue) 45%,#087eae 100%)}.score{position:absolute;z-index:6;top:max(18px,env(safe-area-inset-top));display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 13px 6px 7px;border:2px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(7,37,54,.34);box-shadow:0 5px 16px rgba(0,0,0,.16);font-weight:900;font-size:clamp(15px,2vw,22px);backdrop-filter:blur(8px)}.player-one .score{left:max(16px,env(safe-area-inset-left))}.player-two .score{right:max(16px,env(safe-area-inset-right))}.score-number{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--ink);background:var(--gold);font-size:22px;box-shadow:inset 0 -3px rgba(154,91,10,.22)}.board-wrap{position:relative;width:min(42vw,calc(100dvh - 122px));aspect-ratio:1;max-width:680px;transition:transform .35s ease,filter .25s,opacity .25s}.board-wrap::before{content:"";position:absolute;inset:-2.2%;border-radius:50%;background:repeating-conic-gradient(from 8deg,rgba(255,255,255,.55) 0 3deg,transparent 3deg 14deg);opacity:.28}.board{position:absolute;inset:0;border:clamp(5px,.65vw,10px) solid var(--ink);border-radius:50%;background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.98),var(--cream) 73%,#f3e5bc 100%);box-shadow:0 15px 0 rgba(6,35,50,.28),0 22px 36px rgba(3,28,43,.22),inset 0 0 0 5px rgba(255,255,255,.5);transition:box-shadow .18s,border-color .18s,transform .18s}.board.correct{border-color:#d7ff63;box-shadow:0 0 0 12px rgba(215,255,99,.52),0 16px 0 rgba(6,35,50,.24),0 25px 45px rgba(3,28,43,.28);transform:scale(1.025)}.symbol{position:absolute;left:var(--x);top:var(--y);width:19%;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transform:translate(-50%,-50%);touch-action:manipulation}.symbol img{display:block;width:100%;height:100%;object-fit:contain;transform:rotate(var(--rotation)) scale(var(--scale));filter:drop-shadow(0 4px 2px rgba(13,38,50,.15));pointer-events:none}.symbol:focus-visible{outline:4px solid #ffd84f;outline-offset:3px}.symbol.wrong{animation:wrong .34s ease-in-out}.symbol[disabled]{cursor:default}.round-flash{position:absolute;z-index:8;left:50%;bottom:3.5%;transform:translateX(-50%) translateY(20px);padding:10px 18px;border-radius:999px;color:var(--ink);background:var(--gold);box-shadow:0 6px 0 #b67513,0 10px 22px rgba(0,0,0,.2);font-size:clamp(16px,2.1vw,24px);font-weight:1000;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s}.round-flash.show{opacity:1;transform:translateX(-50%) translateY(0)}.lock-badge,.player-tag{display:none}.mode-online .player.is-opponent .board-wrap{filter:grayscale(.3) saturate(.45) brightness(.8);opacity:.72}.mode-online .player.is-opponent .board{border-style:dashed}.mode-online .player.is-opponent .lock-badge{position:absolute;z-index:9;display:block;left:50%;bottom:4%;transform:translateX(-50%);padding:8px 14px;border:2px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(7,37,54,.78);font-size:13px;font-weight:1000;letter-spacing:.06em}.mode-online .player.is-you .player-tag{position:absolute;z-index:9;display:block;left:50%;bottom:4%;transform:translateX(-50%);padding:8px 16px;border-radius:999px;color:var(--ink);background:#d7ff63;box-shadow:0 5px 0 #70a927;font-size:13px;font-weight:1000}.mode-online .player.is-you .player-tag::after{content:"TVOJE KOLEČKO"}.mode-online .player.is-you .board{border-color:#d7ff63;box-shadow:0 0 0 7px rgba(215,255,99,.34),0 15px 0 rgba(6,35,50,.28),0 22px 36px rgba(3,28,43,.22)}
.overlay{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:rgba(4,31,47,.72);backdrop-filter:blur(11px);transition:opacity .24s}.overlay[hidden]{display:none}.modal{width:min(92vw,560px);max-height:94dvh;overflow:auto;padding:clamp(24px,5vw,42px);border:5px solid #5c3617;border-radius:30px;color:var(--ink);background:linear-gradient(145deg,#fffdf2,#f7e5b7);box-shadow:inset 0 0 0 4px #fff8da,0 20px 70px rgba(0,0,0,.38);text-align:center}.modal-kicker{margin:0 0 5px;color:#b45d20;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.modal h1{margin:0;font-size:clamp(34px,8vw,58px);line-height:.95}.modal h2{margin:12px 0 8px;font-size:clamp(28px,6vw,42px);line-height:1.05}.modal h3{margin:10px 0 4px;font-size:25px}.modal p{margin:16px auto 24px;max-width:40ch;color:#34566c;font-size:clamp(16px,2.8vw,20px);line-height:1.4}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}.mode-card{display:flex;min-height:175px;padding:20px 12px;border:0;border-radius:24px;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 0 rgba(72,37,22,.28),0 14px 30px rgba(42,44,51,.18);cursor:pointer}.mode-card:active{transform:translateY(4px);box-shadow:0 4px 0 rgba(72,37,22,.28)}.local-card{background:linear-gradient(145deg,#ff774d,#dc3e35)}.online-card{background:linear-gradient(145deg,#29cbe4,#087fae)}.mode-icon{font-size:52px;line-height:1}.mode-card strong{margin-top:10px;font-size:19px}.mode-card small{margin-top:5px;font-size:13px;opacity:.9}.primary{width:100%;min-height:58px;border:0;border-radius:18px;color:#fffce9;background:linear-gradient(#ff744a,#e84535);box-shadow:0 7px 0 #a72c26,0 12px 25px rgba(194,52,35,.25);font-size:21px;font-weight:1000;cursor:pointer}.primary:active{transform:translateY(4px);box-shadow:0 3px 0 #a72c26}.text-button{margin:20px auto 0;padding:8px 14px;border:0;color:#48657a;background:transparent;font-weight:900;cursor:pointer}.tablet-guide{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:9px;margin:26px auto 8px}.tablet-guide span{display:grid;place-items:center;width:50px;height:50px;margin:auto;border-radius:50%;color:#fff;background:#f1513e;font-size:25px;font-weight:1000}.tablet-guide span:last-child{background:#11a9d8}.tablet-guide b{padding:26px 8px;border:5px solid var(--ink);border-radius:16px;background:#d7eff2;font-size:14px}.online-actions{display:grid;gap:20px}.join-box{padding:15px;border-radius:19px;background:rgba(255,255,255,.62);text-align:left}.join-box label{display:block;margin:0 0 8px 3px;color:#48657a;font-size:13px;font-weight:900}.join-box div{display:grid;grid-template-columns:1fr auto;gap:8px}.join-box input{min-width:0;height:52px;padding:0 14px;border:3px solid #b6cad1;border-radius:13px;color:var(--ink);background:#fff;font-size:22px;font-weight:1000;letter-spacing:.14em;text-transform:uppercase}.join-box button,.share-button{border:0;border-radius:13px;color:#fff;background:#078caf;padding:0 16px;font-weight:1000;cursor:pointer}.lobby p{margin-bottom:12px}.room-code{padding:8px 24px;border:3px dashed #d06830;border-radius:18px;color:var(--ink);background:#fff;font-size:clamp(38px,10vw,64px);font-weight:1000;letter-spacing:.15em;cursor:pointer}.share-button{display:block;min-height:48px;margin:15px auto;padding:0 22px}.waiting{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;color:#48657a;font-weight:900}.waiting i{width:13px;height:13px;border-radius:50%;background:#f8b22d;animation:pulse 1.2s infinite}.spinner{width:58px;height:58px;margin:26px auto 14px;border:7px solid #c8dce0;border-top-color:#0aa4cd;border-radius:50%;animation:spin .8s linear infinite}.form-error{padding:10px!important;border-radius:12px;color:#a82020!important;background:#ffd9d2;font-size:15px!important;font-weight:800}.winner-mark{font-size:68px;line-height:1}@keyframes wrong{25%,75%{transform:translate(-50%,-50%) rotate(-7deg)}50%{transform:translate(-50%,-50%) rotate(7deg)}}@keyframes pulse{50%{transform:scale(1.45);opacity:.55}}@keyframes spin{to{transform:rotate(360deg)}}
@media (min-aspect-ratio:4/5){.mode-local .player-one .board-wrap{transform:rotate(-90deg) scale(.93)}.mode-local .player-two .board-wrap{transform:rotate(90deg) scale(.93)}}
@media (max-aspect-ratio:4/5){.app{min-height:560px}.arena{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.player{padding:42px 10px 12px}.mode-local .player-one{transform:rotate(180deg)}.mode-online .player-one{transform:none}.board-wrap{width:min(82vw,calc(50dvh - 58px))}.score{top:8px;min-height:38px;font-size:14px}.score-number{width:28px;height:28px;font-size:18px}.player-one .score,.player-two .score{left:12px;right:auto}.topbar{top:50%;transform:translateY(-50%);align-items:center}.brand{padding:7px 13px 8px;font-size:17px}.icon-button{min-width:42px;min-height:42px;padding:0 11px}.icon-button span{display:none}.connection-pill{position:fixed;top:calc(50% + 27px);left:50%;transform:translateX(-50%);min-height:27px;padding:0 9px;font-size:11px}.round-flash{bottom:calc(50% - 21px)}.mode-online .player.is-opponent .lock-badge,.mode-online .player.is-you .player-tag{bottom:2%;padding:6px 10px;font-size:10px}}
@media (max-width:560px){.mode-grid{grid-template-columns:1fr}.mode-card{min-height:112px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;text-align:left}.mode-icon{grid-row:1/3;margin-right:15px}.mode-card strong,.mode-card small{margin:0}.modal{padding:24px 20px}.start-modal p{margin-bottom:12px}}
@media (max-height:590px) and (min-aspect-ratio:4/5){.player{padding-top:62px;padding-bottom:12px}.board-wrap{width:min(41vw,calc(100dvh - 88px))}.brand{font-size:19px}.score{top:11px}.modal{padding:20px}.mode-card{min-height:120px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.connection-pill[hidden]{display:none!important}

/* Adventoria jungle table */
html,body,.app{width:100vw;height:100dvh;min-height:100dvh}.arena{position:relative}.arena::after{content:"";position:absolute;z-index:4;top:0;bottom:0;left:50%;width:4px;transform:translateX(-50%);background:linear-gradient(transparent,rgba(255,255,255,.42) 14%,rgba(4,43,49,.3) 50%,rgba(255,255,255,.42) 86%,transparent);box-shadow:0 0 18px rgba(4,38,54,.2);pointer-events:none}.player{isolation:isolate}.player-one{background:radial-gradient(circle at 32% 38%,#ff8b4f 0,#f4533e 38%,#d8323d 72%,#922d3d 100%)}.player-two{background:radial-gradient(circle at 68% 38%,#42ddec 0,#12abd9 40%,#087ba9 74%,#075779 100%)}.player::before{content:"";position:absolute;z-index:0;inset:-8%;width:auto;height:auto;border:0;border-radius:0;background-image:url("assets/icons/fern.png"),url("assets/icons/fern.png"),url("assets/icons/dinosaur-footprint.png"),url("assets/icons/dinosaur-footprint.png");background-repeat:no-repeat;background-position:-8% 108%,108% -8%,14% 18%,86% 82%;background-size:45% auto,38% auto,13% auto,10% auto;filter:brightness(0) saturate(100%);opacity:.12;transform:rotate(-7deg);pointer-events:none}.player-two::before{transform:scaleX(-1) rotate(-7deg);opacity:.14}.player::after{content:"";position:absolute;z-index:0;inset:auto -4% -2%;width:auto;height:20%;border:0;border-radius:0;background:#06364a;clip-path:polygon(0 100%,0 72%,5% 66%,9% 74%,13% 47%,17% 70%,22% 61%,27% 76%,33% 52%,39% 72%,45% 55%,51% 77%,57% 60%,63% 73%,69% 44%,74% 71%,80% 57%,86% 75%,91% 48%,96% 70%,100% 61%,100% 100%);opacity:.17;pointer-events:none}.board-wrap{z-index:2;width:min(45vw,calc(100dvh - 82px))}.board{border-color:#092e43;background:radial-gradient(circle at 48% 40%,#fffef8 0,#fff8df 62%,#efd99f 100%);box-shadow:0 0 0 5px rgba(255,226,129,.66),0 15px 0 rgba(6,35,50,.31),0 25px 42px rgba(3,28,43,.28),inset 0 0 32px rgba(166,111,38,.09)}.score{min-width:176px;min-height:62px;padding:5px 15px 5px 6px;gap:8px;border:3px solid #6f3c1d;color:#fff7d0;background:linear-gradient(180deg,#b75c2b,#783619);box-shadow:inset 0 0 0 2px rgba(255,196,70,.72),0 6px 0 #4b2919,0 10px 24px rgba(24,23,25,.25);text-shadow:0 2px 0 #542716}.avatar{display:grid;place-items:center;width:52px;height:52px;margin:-10px 1px -10px -11px;overflow:hidden;border:3px solid #673718;border-radius:50%;background:#ffe083;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 3px 0 #4a2a19}.avatar img{width:91%;height:91%;object-fit:contain;filter:drop-shadow(0 2px 1px rgba(36,29,21,.25))}.score-number{width:40px;height:40px;border:2px solid #fff0a8;color:#552611;background:linear-gradient(#ffe66c,#ffbc2e);font-size:24px;text-shadow:none}.player-name{white-space:nowrap}.brand::before{content:"▲";display:inline-block;margin-right:7px;color:#eef4dc;font-size:.8em;text-shadow:-5px 4px 0 #477a3b,5px 4px 0 #275a35}.brand::after{content:"";position:absolute;z-index:-1;left:-15px;right:-15px;bottom:-13px;height:23px;background:linear-gradient(135deg,transparent 15%,#3f7b38 16% 33%,transparent 34% 42%,#5a963f 43% 59%,transparent 60% 68%,#2f6c3a 69% 84%,transparent 85%);opacity:.9}.brand{position:relative}.icon-button{border-color:rgba(255,225,130,.45);background:linear-gradient(180deg,rgba(9,64,74,.93),rgba(5,40,58,.93));font-weight:900}.fullscreen-active #fullscreenToggle{color:#183947;background:#d7ff63}

@media (min-aspect-ratio:4/5){.mode-local .player-one .board-wrap{transform:rotate(90deg) scale(.97)}.mode-local .player-two .board-wrap{transform:rotate(-90deg) scale(.97)}.mode-local .player-one .score{top:50%;right:auto;left:-57px;transform:translateY(-50%) rotate(90deg)}.mode-local .player-two .score{top:50%;right:-57px;left:auto;transform:translateY(-50%) rotate(-90deg)}}

@media (display-mode:fullscreen),(display-mode:standalone){#fullscreenToggle{display:none}.app{height:100vh;min-height:100vh}}

/* Direction-free controls for a tablet placed on its short edge */
.mode-local .brand{display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:50%;font-size:0;line-height:1;transform:none}.mode-local .brand::before{content:"";display:block;width:38px;height:38px;margin:0;background:url("assets/icons/dinosaur-footprint.png") center/contain no-repeat;filter:drop-shadow(0 2px 0 #71330f)}.mode-local .brand::after{display:none}.mode-local .icon-button{display:grid;place-items:center;width:48px;min-width:48px;height:48px;min-height:48px;padding:0;font-size:0}.mode-local .icon-button span{display:none!important}.mode-local #newGame::before{content:"⌂";font-size:25px}.mode-local #fullscreenToggle::before{content:"⛶";font-size:25px}.mode-local #soundToggle::before{content:"♫";font-size:24px}.mode-local.fullscreen-active #fullscreenToggle::before{content:"↙"}
.mode-local .icon-button,.mode-local .score{backdrop-filter:none}
.player::before{background-image:url("assets/icons/fern.png?v=8"),url("assets/icons/fern.png?v=8"),url("assets/icons/dinosaur-footprint.png?v=8"),url("assets/icons/dinosaur-footprint.png?v=8")}.mode-local .brand::before{background-image:url("assets/icons/dinosaur-footprint.png?v=8")}

@media (max-aspect-ratio:4/5){.board-wrap{width:min(80vw,calc(50dvh - 70px))}}

/* Richer lightweight game styling */
.player-one{background:radial-gradient(circle at 12% 18%,rgba(255,226,103,.24) 0 2%,transparent 16%),radial-gradient(circle at 88% 78%,rgba(93,12,47,.22) 0 6%,transparent 27%),linear-gradient(145deg,#ff7848 0,#ee3f3d 48%,#a92543 100%)}.player-two{background:radial-gradient(circle at 88% 18%,rgba(150,255,229,.22) 0 2%,transparent 17%),radial-gradient(circle at 14% 80%,rgba(0,51,102,.23) 0 7%,transparent 28%),linear-gradient(145deg,#32dce9 0,#0c9dce 49%,#075b85 100%)}.board::before{content:"";position:absolute;z-index:0;inset:3.5%;border-radius:50%;background:radial-gradient(circle,rgba(128,87,26,.2) 0 1px,transparent 1.8px) 0 0/27px 27px;opacity:.2;box-shadow:inset 0 0 34px rgba(128,75,20,.12);pointer-events:none}.board::after{content:"";position:absolute;z-index:1;inset:2%;border:2px dashed rgba(194,139,47,.24);border-radius:50%;pointer-events:none}.symbol{z-index:3;transition:transform .1s ease}.symbol:active{transform:translate(-50%,-50%) scale(.9)}.symbol img{filter:drop-shadow(0 5px 3px rgba(13,38,50,.2)) saturate(1.08) contrast(1.025)}.mode-online .player.is-you{box-shadow:inset 0 0 0 5px rgba(215,255,99,.55)}.mode-online .player.is-opponent .board-wrap{filter:saturate(.58) brightness(.86);opacity:.82}.mode-online .player.is-you .player-tag::after{content:"TY • KLEPEJ TADY"}
.round-switching .board-wrap{opacity:0!important;pointer-events:none;transition:opacity .08s linear!important}

@media (max-aspect-ratio:4/5){.mode-online .player.is-opponent{grid-row:1}.mode-online .player.is-you{grid-row:2}.mode-online .player.is-you .score{top:auto;bottom:8px}.mode-online .player.is-you .player-tag{top:2%;bottom:auto}.mode-online .player.is-opponent .lock-badge{top:auto;bottom:2%}}