*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:"Trebuchet MS",Arial,sans-serif;background:#173f28}.game{position:absolute;left:50%;top:50%;width:min(100vw,150vh);aspect-ratio:3/2;transform:translate(-50%,-50%);overflow:hidden;background:#79cce8}.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}.hud{position:absolute;top:7.2%;height:10.2%;width:27%;border:3px solid #61c8ff;border-radius:3vw;background:#0c5e8bdc;display:flex;align-items:center;gap:1.2vw;padding:.6vw 1.4vw;box-shadow:0 .5vw 1.2vw #0005;z-index:5}.hud.human{left:4.8%}.hud.qio{right:13.3%;justify-content:flex-end}.hud.active{border-color:#ffe34e;box-shadow:0 0 1.5vw #ffe34e,0 .5vw 1.2vw #0005}.face{font-size:4.2vw;filter:drop-shadow(0 .2vw .1vw #0006)}.score{font-size:2.3vw;font-weight:900;color:#ffd52e;text-shadow:0 .15vw #6d3d00}.qioBot{width:6.4vw;height:8.2vw;position:relative;filter:drop-shadow(0 .35vw .25vw #0006)}.qioBot .antenna{position:absolute;left:3.08vw;top:0;width:.22vw;height:1.15vw;background:#dffaff}.qioBot .antenna:before{content:"";position:absolute;left:-.27vw;top:-.28vw;width:.75vw;height:.75vw;border-radius:50%;background:#20dfff;box-shadow:0 0 .45vw #20dfff}.qioBot .head{position:absolute;left:.65vw;top:.9vw;width:5.1vw;height:3.8vw;border:.42vw solid #effcff;border-radius:1.45vw;background:#103d5a;box-shadow:inset 0 -.35vw .6vw #071f32,0 .2vw .35vw #0005}.qioBot .head b{position:absolute;top:1.05vw;width:.62vw;height:.82vw;border-radius:50%;background:#5cf3ff;box-shadow:0 0 .55vw #5cf3ff}.qioBot .head b:first-child{left:1.15vw}.qioBot .head b:nth-child(2){right:1.15vw}.qioBot .head em{position:absolute;left:1.75vw;bottom:.48vw;width:1.25vw;height:.55vw;border-bottom:.22vw solid #5cf3ff;border-radius:50%}.qioBot .neck{position:absolute;left:2.7vw;top:4.45vw;width:1vw;height:.55vw;background:#8ed9ee;border-radius:.3vw}.qioBot .body{position:absolute;left:1.55vw;top:4.75vw;width:3.3vw;height:2.55vw;border:.35vw solid #c9f2ff;border-radius:1.25vw;background:linear-gradient(#f7fdff,#83cce5)}.qioBot .body b{position:absolute;left:.75vw;top:.45vw;width:1.1vw;height:.85vw;border-radius:.45vw;background:#0c5c8c;box-shadow:inset 0 0 .35vw #4cecff}.qioBot .arm{position:absolute;top:5.15vw;width:.7vw;height:2vw;background:#dff8ff;border:.18vw solid #70bdd7;border-radius:.5vw}.qioBot .arm.left{left:.75vw;transform:rotate(18deg)}.qioBot .arm.right{right:.75vw;transform:rotate(-18deg)}.qioBot .foot{position:absolute;top:7vw;width:1.25vw;height:.65vw;border-radius:.5vw;background:#dff8ff;border:.16vw solid #70bdd7}.qioBot .foot.left{left:1.65vw}.qioBot .foot.right{right:1.65vw}.hud.active .qioBot{animation:qioAlive 1.15s ease-in-out infinite}@keyframes qioAlive{50%{transform:translateY(-.25vw) rotate(1.5deg)}}.turn,.prompt{position:absolute;z-index:6;background:#e3ac61;border:.38vw solid #824416;border-radius:.7vw;box-shadow:0 .45vw 0 #5f2f0d;color:#4a2107;font-weight:900;text-align:center}.turn{left:2.7%;top:25.2%;width:15%;padding:1vw .4vw;font-size:2.3vw;transform:rotate(-2deg)}.prompt{right:2.3%;top:25.2%;width:16%;padding:1vw .7vw;font-size:1.7vw;transform:rotate(1deg)}.help,.restart{position:absolute;z-index:8;top:3.2%;width:4.7vw;height:4.7vw;border:.35vw solid #0a6090;border-radius:50%;background:#0f7bb0;color:#fff;font-size:2.6vw;font-weight:900;box-shadow:0 .3vw 0 #064567;cursor:pointer}.help{right:8%}.restart{right:2.5%}.dieWrap{position:absolute;z-index:10;left:50%;top:31%;width:18vw;height:15vw;transform:translateX(-50%);pointer-events:none}.die{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(8deg);width:6.8vw;height:6.8vw;border:.45vw solid #fff;border-radius:1.2vw;background:#fff;box-shadow:0 0 1.5vw #fff,0 .6vw .7vw #0005;pointer-events:auto;cursor:pointer}.die span{display:block;width:4.4vw;height:4.4vw;margin:auto;border-radius:50%;background:#725d4c;color:#fff;font-size:2.3vw;line-height:4.4vw;font-weight:900}.die.ready{animation:hop 1.1s infinite}.die.rolling{animation:roll .12s infinite}.trail{position:absolute;inset:0;opacity:0;background:conic-gradient(from 30deg,#ef3340,#f3dc22,#42c947,#168ee7,#a53eea,#ef3340);filter:blur(1vw);border-radius:50%;transform:scale(.8,.28);top:15%}.trail.on{opacity:.55;animation:spin .55s linear infinite}.finger{position:absolute;left:51%;top:76%;font-size:2.6vw;opacity:0;filter:drop-shadow(0 .15vw #fff)}.finger.show{opacity:1;animation:point 1s infinite}.board{position:absolute;z-index:9;left:18.2%;top:45.1%;width:64%;height:37.2%;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:1.4% 2.2%;padding:1.5% 1.6% 1.8%;border-radius:1.8vw;background:linear-gradient(160deg,#c97b35f2,#9b501ff2);box-shadow:inset 0 .45vw .55vw #f3bd70aa,inset 0 -.6vw .8vw #632d12aa,0 .4vw .5vw #0003}.slot{position:relative;border-radius:1.2vw;background:linear-gradient(145deg,#713712,#9a5625 45%,#6a3010);box-shadow:inset .45vw .45vw .65vw #3e1b0caa,inset -.3vw -.3vw .5vw #e7a85d77,0 .12vw .08vw #efb36c;display:grid;place-items:center;overflow:visible}.slot:after{content:"";position:absolute;inset:9%;border-radius:.8vw;border:.12vw solid #d58a45aa;pointer-events:none}.peg{width:86%;height:82%;border:.28vw solid #71330f;border-radius:1.05vw;background:linear-gradient(145deg,#e6a758,#a95e24);box-shadow:inset .5vw .5vw .7vw #ffd58c99,inset -.5vw -.6vw .8vw #6c2d0c88,0 .45vw .35vw #4b240b88;cursor:pointer;transition:.18s;position:relative;z-index:2}.peg:after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-size:2.1vw;font-weight:900;color:#fff3c9aa;text-shadow:0 .15vw #6b3514}.peg:hover:not(:disabled){transform:translateY(-.35vw) scale(1.04)}.peg.reveal{background:var(--c);border-color:#fff;box-shadow:0 0 0 .25vw #ffffffaa,0 0 1.4vw var(--c),0 .45vw .35vw #0005}.peg.reveal:after{content:""}.peg.wrong{animation:shake .45s}.peg.correct{animation:win .6s}.peg.taken{opacity:0;pointer-events:none;transform:scale(.2)}.feedback{position:absolute;z-index:30;left:50%;top:55%;font-size:9vw;transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none}.feedback.show{animation:pop .7s}.feedback.good{color:#ffe337;text-shadow:0 0 2vw #ff8d00}.feedback.bad{color:#e83d38;text-shadow:0 0 1vw white}.dialog{position:fixed;inset:0;z-index:100;background:#12370bb8;display:grid;place-items:center;padding:20px}.dialog.hidden{display:none}.box{width:min(560px,94vw);background:#fff1c9;border:8px solid #8a4719;border-radius:28px;padding:24px;text-align:center;box-shadow:0 20px 50px #0008}.box h2{font-size:34px;margin:0 0 15px}.actions{display:flex;justify-content:center;gap:12px;margin-top:20px}.actions button,.mode{border:3px solid #814317;background:#fff;border-radius:18px;padding:12px 20px;font-size:18px;font-weight:900}.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mode{font-size:34px;cursor:pointer}.mode small{display:block;font-size:15px;margin-top:8px}@keyframes hop{50%{transform:translate(-50%,-62%) rotate(-5deg) scale(1.06)}}@keyframes roll{25%{transform:translate(-50%,-50%) rotate(-12deg) scale(1.08)}75%{transform:translate(-50%,-50%) rotate(15deg) scale(.96)}}@keyframes spin{to{transform:scale(.8,.28) rotate(360deg)}}@keyframes point{50%{transform:translateY(.6vw)}}@keyframes shake{25%{transform:translateX(-.5vw) rotate(-6deg)}75%{transform:translateX(.5vw) rotate(6deg)}}@keyframes win{50%{transform:translateY(-1vw) scale(1.18) rotate(6deg)}}@keyframes pop{40%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}80%{opacity:1;transform:translate(-50%,-50%) scale(.95)}}
@media(max-aspect-ratio:3/2){.game{width:100vw;height:auto}}@media(min-aspect-ratio:3/2){.game{height:100vh;width:auto}.face{font-size:6.3vh}.score{font-size:3.45vh}.turn{font-size:3.45vh}.prompt{font-size:2.55vh}.help,.restart{width:7.05vh;height:7.05vh;font-size:3.9vh}.dieWrap{width:27vh;height:22.5vh}.die{width:10.2vh;height:10.2vh}.die span{width:6.6vh;height:6.6vh;line-height:6.6vh;font-size:3.45vh}.finger{font-size:3.9vh}.peg:after{font-size:3.15vh}}

/* v0.13 - den rigtige Qio fra Qio-universet */
.qioBot{display:none!important}.qioCharacter{width:7.4vw;height:9.4vw;position:relative;display:grid;place-items:end center;filter:drop-shadow(0 .35vw .25vw #0006);transform-origin:50% 90%}.qioCharacter img{display:block;max-width:100%;max-height:100%;object-fit:contain}.hud.active .qioCharacter.thinking{animation:qioThink 1.05s ease-in-out infinite}.qioCharacter.happy{animation:qioCelebrate .55s ease-in-out 2}.qioCharacter.sad{animation:qioSad .7s ease-out 1}@keyframes qioThink{50%{transform:translateY(-.18vw) rotate(-2deg)}}@keyframes qioCelebrate{50%{transform:translateY(-.6vw) scale(1.08)}}@keyframes qioSad{40%{transform:translateY(.2vw) rotate(-2deg)}}
@media(min-aspect-ratio:3/2){.qioCharacter{width:11.1vh;height:14.1vh}}


/* v0.14 - vundet brik flyver hen over spillepladen til pointfeltet */
.peg.ghost{opacity:0!important}
.flyingPeg{box-sizing:border-box;will-change:transform;filter:drop-shadow(0 .65vw .45vw #0007);}
.hud.scoreHit{animation:scoreHit .42s ease-out}
@keyframes scoreHit{0%{transform:scale(1)}45%{transform:scale(1.09);filter:brightness(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.flyingPeg{animation:none!important}.hud.scoreHit{animation:none!important}}


/* v0.15 – integreret træbræt: baggrundens gamle felter skjules helt */
.board{
  left:15.4%; top:36.6%; width:69.2%; height:48.7%;
  padding:3.0% 3.0% 3.3%; gap:4.4% 3.2%;
  border-radius:3.1vw;
  border:.38vw solid #7b3d18;
  background:
    radial-gradient(ellipse at 18% 16%,rgba(255,218,145,.22) 0 1.2%,transparent 1.5%),
    radial-gradient(ellipse at 73% 68%,rgba(92,39,13,.16) 0 1%,transparent 1.3%),
    repeating-linear-gradient(4deg,rgba(92,42,15,.10) 0 .10vw,transparent .10vw .55vw),
    linear-gradient(165deg,#d99449 0%,#c77934 48%,#a95d28 100%);
  box-shadow:
    inset 0 .7vw .7vw rgba(255,215,145,.55),
    inset 0 -.85vw .9vw rgba(88,35,12,.45),
    0 .5vw .65vw rgba(49,24,8,.35);
}
.board:before{content:"";position:absolute;inset:1.1%;border:.15vw solid rgba(255,201,112,.28);border-radius:2.45vw;pointer-events:none}
.slot{
  border-radius:1.45vw;
  background:radial-gradient(ellipse at 50% 44%,#9a5528 0 48%,#713511 66%,#4f220b 100%);
  box-shadow:inset .48vw .55vw .65vw rgba(49,20,6,.82),inset -.25vw -.22vw .35vw rgba(238,166,91,.35),0 .12vw .08vw rgba(255,193,105,.48);
}
.slot:after{inset:7%;border-radius:1.05vw;border:.10vw solid rgba(235,157,78,.32)}
.peg{
  width:82%;height:78%;border:.22vw solid #7b3b16;border-radius:1.25vw;
  background:
    radial-gradient(ellipse at 32% 17%,rgba(255,229,176,.42),transparent 24%),
    repeating-linear-gradient(88deg,rgba(92,39,13,.08) 0 .07vw,transparent .07vw .34vw),
    linear-gradient(145deg,#e4a35c 0%,#c87936 55%,#a85b26 100%);
  box-shadow:inset .42vw .42vw .55vw rgba(255,222,165,.55),inset -.42vw -.5vw .55vw rgba(92,37,11,.32),0 .42vw .32vw rgba(62,28,9,.55)
}
/* Qio i selve baggrundsgrafikken er den etablerede blå Qio. HUD-overlayet skjules,
   så der ikke ligger endnu en udklippet figur oven på ham. */
.qioCharacter{display:none!important}
.hud.qio{background:transparent;border-color:transparent;box-shadow:none;right:13.3%;width:22%;padding-right:7.5vw}
.hud.qio.active{border-color:transparent;box-shadow:none;filter:drop-shadow(0 0 .7vw #ffe34e)}
/* spiller-HUD holdes let transparent så baggrundens grafik stadig føles samlet */
.hud.human{background:#0c5e8bcf}


/* v0.16 – selve den illustrerede træplade ER spillepladen.
   Baggrunden indeholder kun de 15 tomme fordybninger og tom terningstub. */
.board{
  left:18.55%; top:36.0%; width:63.0%; height:41.9%;
  display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);
  gap:3.7% 4.3%;padding:2.8% 3.6% 3.2%;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;overflow:visible;
}
.board:before{display:none!important}
.slot{background:transparent!important;box-shadow:none!important;border:0!important;overflow:visible}
.slot:after{display:none!important}
.peg{
 width:76%;height:78%;border:.18vw solid #75401d;border-radius:42% 42% 35% 35% / 30% 30% 24% 24%;
 background:
 radial-gradient(ellipse at 48% 12%,rgba(255,221,164,.42),transparent 29%),
 repeating-radial-gradient(ellipse at 50% 9%,rgba(116,61,25,.11) 0 .06vw,transparent .07vw .31vw),
 linear-gradient(100deg,#d8934e,#e7ad67 45%,#bd7137 100%);
 box-shadow:inset .22vw .24vw .32vw #f6c98599,inset -.25vw -.35vw .38vw #7b3d1888,0 .38vw .3vw #3e210d88;
 transform:perspective(20vw) rotateX(-2deg);position:relative;
}
.peg:after{font-size:1.7vw;color:#fff0c6c9;text-shadow:0 .13vw #6b3514}
.peg:hover:not(:disabled){transform:perspective(20vw) rotateX(-2deg) translateY(-.35vw) scale(1.045)}
.peg.reveal{transform:perspective(20vw) rotateX(-2deg) translateY(-.62vw) scale(1.08)}
/* Terningen tegnes kun af spillet oven på den tomme stub i baggrundsbilledet. */
.dieWrap{left:50%;top:19.0%;width:18vw;height:16vw}
.die{top:42%;width:6.6vw;height:6.6vw}
/* HUD: kun dynamiske markeringer/point oven på de grafiske skilte */
.hud{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.hud.human{left:12.5%;top:17.3%;width:25%;height:10%;padding-left:10vw}
.hud.qio{right:12.4%;top:17.3%;width:25%;height:10%;padding-right:10vw}
.hud.active{filter:drop-shadow(0 0 .8vw #ffe34e)}
.face{display:none}.score{font-size:2.15vw}
.turn{left:2.5%;top:34.5%;width:14.5%}.prompt{right:2.3%;top:34.5%;width:16.2%}
.help,.restart{top:3.0%}

/* v0.17 – kun kodejustering: brikker og terning tilpasses den eksisterende grafik */
/* Brikkerne fylder nu selve fordybningen i baggrundens træplade. */
.peg{
  width:94%;
  height:91%;
  border-width:.15vw;
  border-radius:43% 43% 36% 36% / 31% 31% 25% 25%;
}
.peg:after{font-size:1.55vw}
.peg:hover:not(:disabled){transform:perspective(20vw) rotateX(-2deg) translateY(-.28vw) scale(1.025)}
.peg.reveal{transform:perspective(20vw) rotateX(-2deg) translateY(-.55vw) scale(1.045)}

/* Terningen passer nu på den tomme træstub i baggrundsbilledet. */
.dieWrap{left:50%;top:19.1%;width:14vw;height:13vw}
.die{
  top:42%;
  width:5.15vw;
  height:5.15vw;
  border-width:.32vw;
  border-radius:.92vw;
}
.die span{
  width:3.35vw;
  height:3.35vw;
  line-height:3.35vw;
  font-size:1.8vw;
}
.finger{top:75%;font-size:2.1vw}
@media(min-aspect-ratio:3/2){
  .dieWrap{width:21vh;height:19.5vh}
  .die{width:7.725vh;height:7.725vh;border-width:.48vh;border-radius:1.38vh}
  .die span{width:5.025vh;height:5.025vh;line-height:5.025vh;font-size:2.7vh}
  .peg:after{font-size:2.325vh}
}