/* ------------------------------------------------------------ container setup ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

/* the body affects all elements inside of it */
body {
	display: flex;
	font-family: "Poppins", "Open Sans", Arial, Helvetica, sans-serif;
	text-align: center;
	overflow: hidden;
	background-image: url('./img/background.jpg');
    justify-content: center;
	align-items: center;
	background-size:cover;
	background-repeat:no-repeat;
    background-position: center;
}

/* contains all game elements */
#game-container {
	width: 1200px;
    height: 1200px;
    padding: 40px;
	position: relative;
	overflow: hidden;
    text-align: center;
    color: #fff;

    /* single source of truth for ball colors, shared by the prize list, the balls inside
       the wheel, and the prize-reveal badge, so all three always agree on ball N's color */
    --ball-color-0: #9aa3ad;
    --ball-color-1: #f10823;
    --ball-color-2: #f2811f;
    --ball-color-3: #f4c521;
    --ball-color-4: #6bb52c;
    --ball-color-5: #14b8a6;
    --ball-color-6: #26eef5;
    --ball-color-7: #d773f0;
    --ball-color-8: #9b4fd1;
    --ball-color-9: #3b3fa0;
    --ball-color-10: #fd0050;
}

canvas {
    margin: 0 auto;
    padding: 0;
}

/* ------------------------------------------------------------ ball look (shared) ------------------------------------------------------------ */

/* Solid colored sphere with a glossy highlight and a bordered number badge in the centre -
   like a pool ball. Shared by the prize-list balls, the balls tumbling in the wheel, and the
   prize-reveal badge. Fill color, number content and color are set per-instance below. */
.ball,
.lottery-ball,
.prize-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background-color: var(--ball-color-0); /* fallback fill; overridden per-instance below */
    background-image:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 68% 82%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 55%);
    box-shadow:
        inset 0 -6px 10px rgba(0, 0, 0, 0.25),
        inset 0 4px 6px rgba(255, 255, 255, 0.35),
        0 3px 6px rgba(0, 0, 0, 0.35);
}

/* The number's badge ring - a hollow border (not a filled disc) so the ball's own color and
   shading still show through behind the white number. */
.ball::after,
.lottery-ball::after,
.prize-header::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56%;
    height: 56%;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

/* ------------------------------------------------------------ confetti ------------------------------------------------------------ */

#confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 60;
    pointer-events: none;
    display: none;
}

.confetti-piece {
    position: absolute;
    display: block;
    width: 22px;
    height: 34px;
    border-radius: 6px;
    opacity: 0.9;
}

.confetti-piece:nth-child(1)  { top: 6%;  left: 8%;   width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: rotate(15deg); }
.confetti-piece:nth-child(2)  { top: 10%; left: 15%;  background: #d6285f; transform: rotate(-25deg); width: 12px; height: 26px; }
.confetti-piece:nth-child(3)  { top: 34%; left: 4%;   background: #f4c521; transform: rotate(20deg); width: 26px; height: 16px; }
.confetti-piece:nth-child(4)  { top: 55%; left: 9%;   background: #9b4fd1; transform: rotate(-10deg); width: 10px; height: 22px; }
.confetti-piece:nth-child(5)  { top: 82%; left: 6%;   background: #f2811f; transform: rotate(12deg); width: 30px; height: 18px; }
.confetti-piece:nth-child(6)  { top: 92%; left: 20%;  background: #14b8a6; transform: rotate(-18deg); width: 20px; height: 14px; }
.confetti-piece:nth-child(7)  { top: 18%; left: 92%;  background: #d6285f; transform: rotate(18deg); width: 12px; height: 24px; }
.confetti-piece:nth-child(8)  { top: 12%; left: 74%;  background: #f4c521; transform: rotate(-8deg); width: 12px; height: 20px; border-radius: 50%; }
.confetti-piece:nth-child(9)  { top: 33%; left: 96%;  background: #e0a3e6; transform: rotate(24deg); width: 32px; height: 20px; }
.confetti-piece:nth-child(10) { top: 58%; left: 90%;  background: #fff; transform: rotate(-15deg); width: 12px; height: 22px; }
.confetti-piece:nth-child(11) { top: 78%; left: 96%;  background: #6bb52c; transform: rotate(10deg); width: 10px; height: 20px; }
.confetti-piece:nth-child(12) { top: 88%; left: 4%;   background: #e2273e; transform: rotate(-20deg); width: 26px; height: 16px; }
.confetti-piece:nth-child(13) { top: 4%;  left: 34%;  background: #6bb52c; transform: rotate(8deg); width: 12px; height: 12px; border-radius: 50%; }
.confetti-piece:nth-child(14) { top: 46%; left: 97%;  background: #fff; transform: rotate(-30deg); width: 12px; height: 24px; }
.confetti-piece:nth-child(15) { top: 70%; left: 2%;   background: #f2811f; transform: rotate(22deg); width: 10px; height: 10px; border-radius: 50%; }
.confetti-piece:nth-child(16) { top: 3%;  left: 62%;  background: #9b4fd1; transform: rotate(-12deg); width: 10px; height: 18px; }

/* ------------------------------------------------------------ title ------------------------------------------------------------ */

#title {
    background-image: url('./img/gameTitle.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 230px;
    background-position: center;
    margin-top:20px;
}

/* sound and restart */
#toggle-sound svg,
#restart-button svg {
	fill: #fff;
}

#intro-container,
#rules-container,
#board-container {
    position: relative;
    z-index: 2;
    font-size: 2.2em;
    margin-top: 10px;
}

#intro-description,
#rules-description {
    color: #fff;
    font-size: 4.4vh;
    line-height: 1.5em;
    max-width: 760px;
    margin: 0.4em auto 1.2em;
}

#board-container {
    position: relative;
}

/* ------------------------------------------------------------ buttons ------------------------------------------------------------ */

#intro-button,
#play-button,
#draw-ball-button {
    display: inline-block;
    cursor: pointer;
    padding: 0.6em 2em;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, #ff9d2e 0%, #f47b20 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.85em;
    font-family: "Poppins", "Open Sans", Arial, Helvetica, sans-serif;
    width: auto;
    margin: 0.4em auto 0;

    box-shadow: 0 0 24px 4px rgba(255, 210, 120, 0.85);
}

#intro-button:hover,
#play-button:hover,
#draw-ball-button:hover {
    background: linear-gradient(180deg, #ffab47 0%, #fb8b34 100%);
}

/* ------------------------------------------------------------ prize list ------------------------------------------------------------ */

#prize-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px 22px;
    max-width: 880px;
    margin: 0.6em auto 1em;
}

@media (max-width: 667px) {
 #prize-list {
	grid-template-columns: repeat(3, .5fr);
    margin-top: -37px;
}

.ball {
    width: 70px;
    height: 70px;
    font-size: .65em;
}
.pts {
    font-size: 0.8em;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.pts {
    font-size: 0.5em;
}

#prize-list .prize-chip:nth-child(10) {
    grid-column: 2;
}
}

.modal-prize-list-container #modal-content, #intro-prize-container, .modal-prize-container #modal-content {
    background-color: #012340;
    border: 1px solid white;
    border-radius: 15px;
    padding: 37px;
    margin: 0 auto;
    color: white;
    box-shadow: 0px 0px 100px black;
}

.prize-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ball {
    width: 92px;
    height: 92px;
    font-size: 1.05em;
}

.ball::after {
    border-width: 0.15em;
}

.pts {
    font-size: 0.8em;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.prize-chip:nth-child(1)  .ball { background-color: var(--ball-color-1); }
.prize-chip:nth-child(2)  .ball { background-color: var(--ball-color-2); }
.prize-chip:nth-child(3)  .ball { background-color: var(--ball-color-3); }
.prize-chip:nth-child(4)  .ball { background-color: var(--ball-color-4); }
.prize-chip:nth-child(5)  .ball { background-color: var(--ball-color-5); }
.prize-chip:nth-child(6)  .ball { background-color: var(--ball-color-6); }
.prize-chip:nth-child(7)  .ball { background-color: var(--ball-color-7); }
.prize-chip:nth-child(8)  .ball { background-color: var(--ball-color-8); }
.prize-chip:nth-child(9)  .ball { background-color: var(--ball-color-9); }
.prize-chip:nth-child(10) .ball { background-color: var(--ball-color-10); }

/* ------------------------------------------------------------ lottery machine ------------------------------------------------------------ */

#lottery-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;

    font-size: 32px;
}

#wheel-container {
    width: 665px;
    height: 662px;
    position: relative;
    z-index: 1;
    background-image: url('/lottery/assets/lottery-generic/img/wheel-bowl.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

#wheel-spokes {
    position: absolute;
    top: -9px;
    left: 5px;
    width: 100%;
    height: 100%;
    background-image: url('/lottery/assets/lottery-generic/img/wheel-spokes.png');
    /* wheel-spokes.png's spoke graphic already fills its own canvas edge-to-edge (measured via
       an alpha-channel scan - no internal padding), while the glass circle drawn in
       wheel-bowl.png only fills about 95% of #wheel-container's box (see the WHEEL_RADIUS
       measurement note in game.js). 82% left a visibly oversized gap between the spoke tips
       and the glass rim; 94% brings them close to the rim with a small clearance. */
    background-size: 90% 90%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 20;
    pointer-events: none;
    backdrop-filter: blur(1px);
    background-color: rgb(189 222 255 / 10%);
border-radius: 5000px;
}

/* the chrome stand the glass bowl sits on - purely decorative, taken out of flow so it
   doesn't shift the drawn-ball tray that the ball-drop animation math is calibrated to */
#wheel-stand {
    position: absolute;
    top: 610px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 90px;
    z-index: 0;
}

#wheel-stand .leg {
    position: absolute;
    top: -10px;
    width: 12px;
    height: 90px;
    border-radius: 6px;
    background: linear-gradient(90deg, #828282 0%, #eef1f3 45%, #b3b3b3 100%);
    transform-origin: bottom center;
}

#wheel-stand .leg-left {
    left: 34px;
    transform: rotate(18deg);
}

#wheel-stand .leg-right {
    right: 34px;
    transform: rotate(-18deg);
}

#wheel-stand .base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 16px;
    border-radius: 6px;
    background: linear-gradient(180deg, #828282 0%, #b3b3b3 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.lottery-ball {
    width: 80px;
    height: 80px;
    font-size: 22px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.lottery-ball::after {
    border-width: 0.15em;
}

/* Colored by [data-ball-number] (set in game.js), not :nth-child - #wheel-spokes is
   #wheel-container's first child, which would shift every ball's :nth-child position by
   one and mismatch it against the same-numbered ball's color in the prize list/reveal. */
/* Ball "0" is the dedicated fallback setPrizeLocation() falls back to when the server's prize
   code doesn't match any real prize - neutral gray so it doesn't borrow a real prize's color. */
.lottery-ball[data-ball-number="0"]  { background-color: var(--ball-color-0); }
.lottery-ball[data-ball-number="1"]  { background-color: var(--ball-color-1); }
.lottery-ball[data-ball-number="2"]  { background-color: var(--ball-color-2); }
.lottery-ball[data-ball-number="3"]  { background-color: var(--ball-color-3); }
.lottery-ball[data-ball-number="4"]  { background-color: var(--ball-color-4); }
.lottery-ball[data-ball-number="5"]  { background-color: var(--ball-color-5); }
.lottery-ball[data-ball-number="6"]  { background-color: var(--ball-color-6); }
.lottery-ball[data-ball-number="7"]  { background-color: var(--ball-color-7); }
.lottery-ball[data-ball-number="8"]  { background-color: var(--ball-color-8); }
.lottery-ball[data-ball-number="9"]  { background-color: var(--ball-color-9); }
.lottery-ball[data-ball-number="10"] { background-color: var(--ball-color-10); }

#drawn-ball {
    height: 90px;
    width: 500px;
    background: transparent;
    border: none;
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------------------ prize reveal ------------------------------------------------------------ */

/* the prize container sits on top of the board screen once the game is finished */
#prize-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 14px;
    padding-top: 320px;
    color: #fff;
   
}

#prize-container > div[id^="prize-id-"] {
  text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: rgba(8, 192, 171, 0.8);
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    border: 2px solid white;
}

.game-finished #prize-container {
    display: flex !important;
  
}

.game-finished.game-over-win {
       background-image: url('./img/Game-Final.jpg');
    justify-content: center;
	align-items: center;
	background-size:cover;
	background-repeat:no-repeat;
}

.prize-header {
    width: 180px;
    height: 180px;
    font-size: 0;
    margin: 0;
    /* layers the shared sphere shading with an outer glow halo for the reveal moment */
    box-shadow:
        inset 0 -6px 10px rgba(0, 0, 0, 0.25),
        inset 0 4px 6px rgba(255, 255, 255, 0.35),
        0 0 30px 6px rgba(255, 255, 255, 0.7);
}

.prize-header::after {
    border-width: 4px; /* fixed, not em - .prize-header itself is font-size: 0 */
}

/* the ball number shown for the drawn prize - engine adds a `prize-code-<code>` class
   alongside `game-finished`, so map each prize code to the ball number/color it was
   assigned in options.prizeList (win.json) here for readability:
   p100->1 p200->2 p300->3 p400->4 p500->5 p1000->6 p1500->7 p2000->8 p5000->9 p10000->10 */
.prize-header::before {
    content: "";
    font-size: 3.6rem;
    color: #fff;
}

.game-finished.prize-code-p100   .prize-header { background-color: var(--ball-color-1); }
.game-finished.prize-code-p100   .prize-header::before { content: "1"; }
.game-finished.prize-code-p200   .prize-header { background-color: var(--ball-color-2); }
.game-finished.prize-code-p200   .prize-header::before { content: "2"; }
.game-finished.prize-code-p300   .prize-header { background-color: var(--ball-color-3); }
.game-finished.prize-code-p300   .prize-header::before { content: "3"; }
.game-finished.prize-code-p400   .prize-header { background-color: var(--ball-color-4); }
.game-finished.prize-code-p400   .prize-header::before { content: "4"; }
.game-finished.prize-code-p500   .prize-header { background-color: var(--ball-color-5); }
.game-finished.prize-code-p500   .prize-header::before { content: "5"; }
.game-finished.prize-code-p1000  .prize-header { background-color: var(--ball-color-6); }
.game-finished.prize-code-p1000  .prize-header::before { content: "6"; }
.game-finished.prize-code-p1500  .prize-header { background-color: var(--ball-color-7); }
.game-finished.prize-code-p1500  .prize-header::before { content: "7"; }
.game-finished.prize-code-p2000  .prize-header { background-color: var(--ball-color-8); }
.game-finished.prize-code-p2000  .prize-header::before { content: "8"; }
.game-finished.prize-code-p5000  .prize-header { background-color: var(--ball-color-9); }
.game-finished.prize-code-p5000  .prize-header::before { content: "9"; }
.game-finished.prize-code-p10000 .prize-header { background-color: var(--ball-color-10); }
.game-finished.prize-code-p10000 .prize-header::before { content: "10"; }

.prize-name {
    font-size: 2.5vh;
    font-weight: 400;
    color: #fff;
}

.prize-name-value,
.prize-points,
.prize-points-description {
    font-size: 2.7em;
    font-weight: 700;
    color: #fff;
}

.prize-name-tail {
    font-size: 2.7em;
    font-weight: 700;
    color: #fff;
}
span.prize-name-head {
    font-size: 2em;
    display: block;
}

.no-prize-header {
    font-size: 2.2em;
    font-weight: 700;
    color: #fff;
}

.no-prize-description {
    font-size: 1.5em;
    color: #fff;
}

.glow {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------------ mobile (portrait + landscape) ------------------------------------------------------------ */

/* On narrow mobile screens, in either orientation, shrink the wheel-bowl (and its decorative
   stand) instead of relying solely on the page-level scale-to-fit transform, which otherwise
   wastes most of the viewport around a wheel sized for a 1200x1200 desktop canvas. Portrait is
   gated on max-width and landscape on max-height because that's whichever axis is the
   constrained one once the phone is rotated - together they're equivalent to "the screen's
   shorter side is under 480px", so a real device always gets the same treatment across a
   rotation and never flips mid-game. game.js's getWheelScale()/isMobileScreen() derive the
   physics constants from this same 420px/665px ratio and the same 480px cutoff (checked
   against min(innerWidth, innerHeight)) - keep both breakpoints in sync with this rule. */
@media (max-width: 480px) and (orientation: portrait),
       (max-height: 480px) and (orientation: landscape) {
    #wheel-container {
        width: 420px;
        aspect-ratio: 665 / 662;
        height: auto;
    }

    #wheel-stand {
        top: 385px;
        width: 139px;
        height: 57px;
    }

    #wheel-stand .leg {
        top: -6px;
        width: 8px;
        height: 57px;
    }

    #wheel-stand .leg-left {
        left: 21px;
    }

    #wheel-stand .leg-right {
        right: 21px;
    }

    #wheel-stand .base {
        width: 164px;
        height: 10px;
    }
}

/* ------------------------------------------------------------ mobile landscape ------------------------------------------------------------ */

/* #game-container is a fixed 1200x1200 square, and the platform's scale-to-fit transform
   (resizeGameContainer() in the shared engine) keeps that whole square on screen by scaling
   it down until BOTH dimensions fit the viewport. On a landscape phone the viewport is short
   (~350-430px tall) but wide, so the square's height is by far the binding constraint - it
   gets scaled down to fit that short height even though there's plenty of unused width,
   making everything inside (title, wheel, button) render much smaller than it needs to.
   Shrinking the container's own declared height to what the content actually needs (measured:
   ~774px for the board screen, the tallest of the three - relaxes that height constraint so
   the platform's own transform lands on a noticeably larger scale instead. #game-container
   clips overflow, so the extra ~75px of buffer above the measured 774px isn't just margin -
   it also covers box-shadow/glow bleed (e.g. the draw button's glow) that extends past an
   element's layout bounds without affecting the 774px measurement. This needs no change on
   top of the compact wheel-bowl sizing above, which already applies here since this query
   matches the same landscape condition. */
@media (max-height: 480px) and (orientation: landscape) {
    #game-container {
        height: 850px;
    }
}