:root{
  --gold:#ffd86a;
  --violet:#7d2bff;
  --pink:#ff39d6;
  --blue:#38d9ff;
  --green:#53ff2b;
  --ink:#12021c;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#07000c;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden;user-select:none;touch-action:manipulation}
button{font:inherit}
.scratch-app{height:100dvh;width:100vw;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#4b0b66 0,#13011d 58%,#030006 100%);overflow:hidden}
.scratch-stage{
  position:relative;
  aspect-ratio:16/9;
  width:min(100vw,177.777dvh);
  height:min(100dvh,56.25vw);
  max-width:100vw;
  max-height:100dvh;
  overflow:hidden;
  border-radius:clamp(6px,.7vw,14px);
  background:#16011f url('../img/scratch-pro.png') center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(255,219,112,.35),0 0 45px rgba(180,25,255,.34),inset 0 0 45px rgba(0,0,0,.25);
}
.scratch-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 40%,rgba(0,0,0,.05));}
.top-note{display:none}
.back-link{position:absolute;right:7.3%;top:1.9%;width:10.5%;height:4.5%;z-index:10;color:transparent;text-decoration:none;border-radius:999px;background:transparent;border:0;overflow:hidden}
.back-link:focus-visible,.back-link:hover{outline:2px solid rgba(255,242,170,.8);box-shadow:0 0 18px rgba(255,211,72,.7)}
.sound-btn{position:absolute;right:2.05%;top:1.45%;width:3.5%;height:6.1%;z-index:11;border:0;border-radius:50%;background:transparent;color:transparent;cursor:pointer}
.sound-btn:focus-visible,.sound-btn:hover{outline:2px solid rgba(255,242,170,.8);box-shadow:0 0 18px rgba(255,211,72,.7)}
.bingo-card{position:absolute;left:2.05%;top:15.8%;width:61.2%;height:25.1%;padding:0;background:transparent;border:0;box-shadow:none;z-index:4}
.bingo-title{display:none}
.bingo-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);gap:.4%}
.bingo-cell{position:relative;display:grid;place-items:center;color:transparent;border:0;background:transparent;font-size:clamp(12px,1.3vw,24px)}
.bingo-cell.hit::after{content:"✓";position:absolute;inset:11% 16%;display:grid;place-items:center;border-radius:.45vw;background:radial-gradient(circle,#fff 0,#bdff8c 34%,#22b31e 70%,#087b10 100%);color:#0a3809;font-size:clamp(18px,2.4vw,42px);font-weight:1000;text-shadow:0 1px rgba(255,255,255,.65);box-shadow:0 0 1.2vw rgba(79,255,62,.92),inset 0 0 .8vw rgba(255,255,255,.55);animation:bankoHit .28s ease both}
.fortune-panel{display:none}
.ticket-row{position:absolute;left:1.4%;top:45.3%;width:64.1%;height:35.9%;display:grid;grid-template-columns:repeat(3,1fr);gap:2.7%;z-index:5;pointer-events:none}
.scratch-ticket{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:1.7%;padding:9.5% 5.2% 6.3%;border-radius:1.4vw;background:transparent;border:0;box-shadow:none;pointer-events:auto}
.scratch-cell{position:relative;display:grid;place-items:center;border:0;border-radius:.55vw;background:rgba(255,255,255,.01);color:transparent;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.scratch-cell:not(.open):hover{background:rgba(255,255,255,.08);box-shadow:0 0 .95vw rgba(255,255,255,.35),inset 0 0 .55vw rgba(255,255,255,.18);transform:scale(1.03)}
.scratch-cell.open{background:radial-gradient(circle at 32% 22%,#fffdf1 0,#ffe179 22%,#d88d16 66%,#71390b 100%);color:#261006;font-weight:1000;font-size:clamp(17px,2.15vw,38px);text-shadow:0 1px rgba(255,255,255,.45);box-shadow:0 0 .9vw rgba(255,212,80,.65),inset 0 0 .8vw rgba(255,255,255,.42);animation:scratchOpen .24s ease both}
.scratch-ticket:nth-child(2) .scratch-cell.open{background:radial-gradient(circle at 32% 22%,#fff 0,#d9c0ff 24%,#8455bf 68%,#3a145e 100%);color:#220b34;box-shadow:0 0 .9vw rgba(192,115,255,.62),inset 0 0 .8vw rgba(255,255,255,.4)}
.scratch-ticket:nth-child(3) .scratch-cell.open{background:radial-gradient(circle at 32% 22%,#fff 0,#bff4ff 23%,#2d9ee0 68%,#063b79 100%);color:#031b32;box-shadow:0 0 .9vw rgba(55,215,255,.64),inset 0 0 .8vw rgba(255,255,255,.4)}
.scratch-cell.match{color:#063a09;background:radial-gradient(circle at 30% 20%,#fff 0,#bfff9b 26%,#35dd24 68%,#07780d 100%)!important;box-shadow:0 0 1.35vw rgba(85,255,69,.9),inset 0 0 .9vw rgba(255,255,255,.55)!important}
.hud-row{position:absolute;left:2.1%;bottom:3.3%;width:61.9%;height:9.7%;display:grid;grid-template-columns:27% 30% 36%;gap:2.5%;z-index:7;pointer-events:none}
.hud-row>div{position:relative;background:transparent!important;border:0!important;box-shadow:none!important;display:block;height:100%;min-width:0;pointer-events:none}
.hud-row span{display:none}
.hud-row strong{position:absolute;left:43%;top:43%;transform:translate(-50%,-50%);font-size:clamp(22px,3vw,52px);line-height:1;font-weight:1000;color:#fff7df;text-shadow:0 .05em #361052,0 0 .35em rgba(255,225,88,.7)}
#creditsValue{left:50%}.hud-row>div:nth-child(3) strong{left:52%}
.hud-row button#newTicketBtn{position:fixed;left:auto;right:1.8%;bottom:3.5%;width:29.3%;height:11.4%;z-index:9;margin:0;border:0;border-radius:1.2vw;background:transparent;color:transparent;box-shadow:none;cursor:pointer;pointer-events:auto}
.hud-row button#newTicketBtn:focus-visible,.hud-row button#newTicketBtn:hover{outline:2px solid rgba(255,255,255,.78);box-shadow:0 0 1.6vw rgba(88,255,45,.75),inset 0 0 1vw rgba(255,255,255,.28)}
.hud-row button#newTicketBtn:disabled{cursor:not-allowed;filter:grayscale(1);opacity:.42}
.start-overlay{position:absolute;inset:0;z-index:30;display:none;place-items:center;background:rgba(8,0,14,.72);backdrop-filter:blur(2px)}
.start-overlay.show{display:grid}
.overlay-box{width:min(44%,560px);min-height:28%;display:grid;place-items:center;text-align:center;border:.18vw solid rgba(255,226,129,.75);border-radius:1.2vw;background:linear-gradient(180deg,rgba(59,4,83,.94),rgba(13,1,20,.97));box-shadow:0 0 2vw rgba(255,65,225,.38),inset 0 0 1.5vw rgba(255,223,99,.12);padding:2vw}
.overlay-box h1{font-size:clamp(24px,3.2vw,54px);margin:0;color:#ffe36d;text-shadow:0 .07em #6a1a63,0 0 .28em #ff3edc}.overlay-box p{font-size:clamp(15px,2vw,30px);margin:.7vw 0}.overlay-box p strong{color:#57ff40}.overlay-box button{width:70%;border:1px solid rgba(255,255,255,.45);border-radius:.75vw;background:linear-gradient(180deg,#9dff5b,#1aa807 55%,#0c6005);color:#fff;font-size:clamp(18px,2.7vw,42px);font-weight:1000;padding:.55vw;cursor:pointer;text-shadow:0 0 .2em rgba(255,255,255,.48)}.overlay-box small{color:#f5d8ff;font-size:clamp(8px,.82vw,13px)}
.scratch-stage.closed:before{content:"Spillet er lukket af Ejer";position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.84);font-size:clamp(24px,4vw,60px);font-weight:1000;color:#fff;text-align:center}
@keyframes scratchOpen{0%{transform:scale(.74) rotate(-3deg);opacity:.1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes bankoHit{0%{transform:scale(.65);opacity:.1}80%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
@media(max-aspect-ratio:16/9){.scratch-stage{width:100vw;height:56.25vw}}
@media(min-aspect-ratio:16/9){.scratch-stage{height:100dvh;width:177.777dvh}}
@media(max-width:780px){.hud-row strong{font-size:clamp(18px,3.2vw,32px)}.scratch-ticket{padding-top:10.5%}.back-link{right:7%;width:12%}}