/* ===========
GLOBAL
============ */

@view-transition {
    navigation: auto;
}

.home-link {
    position: fixed;
    top: 1.25rem;
    left: 1.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    color: inherit;
    opacity: 0.5;
}

.home-link:hover {
    opacity: 1;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    margin-top: 100px;
    background-color: #ede0cc;
}

button {
    font-family: Garamond, serif;
    font-size: 1.5rem;
    padding: 20px 40px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-weight: 700;

    background-color: #111;
    color: #fff;
}

button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.site-footer {
    margin-top: 2rem;
    font-size: 0.8rem;
    opacity: 0.6;
    text-align: center;
}

.site-footer p {
    font-size: 0.8rem;
    margin: 0.2rem 0;
}

.footer-contact {
    display: inline-block;
    margin-top: 0.4rem;
    color: inherit;
    text-decoration: none;
}

.footer-contact:hover {
    text-decoration: underline;
}

/* ===========
HOMEPAGE
============ */

.homepage .site-title {
    font-size: 4.8rem;
    margin-bottom: 0.3rem;
}

.homepage .site-subtitle {
    font-size: 0.9rem;
    opacity: 0.75;
    margin: 0 0 1.25rem;
    min-height: auto;
    transition: none;
    font-weight: 500;
}

/* ===========
HOMEPAGE - GAME GRID
============ */

.games-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.game-card {
    position: relative;
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 1.5rem 2.5rem;
    width: min(320px, 85vw);
}

.game-card-link {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.game-card-title {
    font-size: 1.4rem;
    margin: 0 0 0.3rem;
}

.game-card:nth-child(1) .game-card-title { view-transition-name: game-title-1; }
.game-card:nth-child(2) .game-card-title { view-transition-name: game-title-2; }

.game-card:nth-child(2) {
    border-color: rgba(0, 210, 55, 0.7);
    border-radius: 14px 11px 13px 12px / 12px 14px 11px 13px;
    animation: slime-ooze 3s ease-in-out infinite alternate;
}

@keyframes slime-ooze {
    0% {
        box-shadow:
            0 0 6px  rgba(0, 220, 60, 0.5),
            0 0 18px rgba(0, 220, 60, 0.25),
            0 0 40px rgba(0, 220, 60, 0.10),
            inset 0 0 8px rgba(0, 220, 60, 0.08);
    }
    100% {
        box-shadow:
            0 0 12px rgba(0, 220, 60, 0.65),
            0 0 30px rgba(0, 220, 60, 0.35),
            0 0 60px rgba(0, 220, 60, 0.15),
            inset 0 0 14px rgba(0, 220, 60, 0.12);
    }
}


.game-card-desc {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.6;
    margin: 0;
}

/* ===========
Crystal Ball Page
============ */

.crystalball1 .game-title {
    font-size: 4.8rem;
    view-transition-name: game-title-1;
}

/* ===========
Crystal Ball 2 Page
============ */

.crystalball2 .game-title {
    font-size: 4.8rem;
    view-transition-name: game-title-2;
}

.crystalball2 .orb-wrap::before {
    background:
        radial-gradient(circle at 30% 30%, rgba(0,255,70,0.65), transparent 55%),
        radial-gradient(circle at 70% 65%, rgba(130,0,255,0.50), transparent 60%),
        radial-gradient(circle at 45% 75%, rgba(0,255,100,0.45), transparent 55%);
    opacity: 1;
    transition: opacity 0.4s;
}

.crystalball2 .orb-wrap::after {
    background:
        radial-gradient(circle at 60% 40%, rgba(0,255,70,0.40), transparent 55%),
        radial-gradient(circle at 35% 60%, rgba(140,0,255,0.30), transparent 60%);
    opacity: 0.80;
    transition: opacity 0.4s;
}

.crystalball2 .orb-wrap.tv-mode::before,
.crystalball2 .orb-wrap.tv-mode::after {
    opacity: 0;
}

.crystalball2 .orb-wrap.boost {
    animation: orb-glow-poison 0.9s ease-in-out infinite alternate;
}

.crystalball2 .orb-result.cursed {
    color: #9b0000;
    text-shadow: 0 0 8px rgba(180, 0, 0, 0.7), 0 0 24px rgba(150, 0, 0, 0.4);
    animation: text-wave 2s ease-in-out infinite;
}

.crystalball2 .ask-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.crystalball2 .ask-input {
    font-family: Garamond, serif;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 14px 20px;
    border-radius: 12px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    width: min(380px, 85vw);
    text-align: center;
    outline: none;
}

.crystalball2 .ask-input:focus {
    border-color: rgba(0, 0, 0, 0.4);
}

.crystalball2 .ask-input:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.roll-history {
    position: fixed;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    max-height: 80vh;
    overflow: hidden;
    pointer-events: none;
}

.history-entry {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.history-entry.visible {
    opacity: 1;
    transform: translateY(0);
}

.history-question {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.45;
    margin: 0 0 0.25rem;
    overflow-wrap: break-word;
}

.history-result {
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.history-result.visible {
    opacity: 1;
}

.history-result.cursed {
    color: #9b0000;
    text-shadow: 0 0 6px rgba(180, 0, 0, 0.45);
}

.tv-image {
    display: none;
    width: min(420px, 85vw);
    height: auto;
    margin: -1.5rem auto -2.2rem;
}

.tv-static,
.tv-scanlines {
    position: absolute;
    left: 8%;
    top: 5%;
    width: 68%;
    height: 88%;
    border-radius: 8% / 10%;
}

.tv-scanlines {
    display: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.10) 3px,
        rgba(0, 0, 0, 0.10) 4px
    );
    pointer-events: none;
    z-index: 1;
}

.orb-wrap.tv-mode .tv-scanlines {
    display: block;
}

.tv-static {
    display: none;
}

/* ===========
CRYSTAL BALL
============ */

.crystal-ball-image {
    display: block;
    width: min(420px, 85vw);
    height: auto;
    margin: -1.5rem auto -2.2rem;
    border-radius: 18px;
}

.orb-wrap {
    position: relative;
    display: inline-block;
}

.orb-wrap::before {
    content: "";
    position: absolute;

    /* this places the mist over the sphere area (tweak these) */
    left: 50%;
    top: 40%;
    width: 52%;
    height: 42%;

    /* Mist look */
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 55%),
        radial-gradient(circle at 70% 65%, rgba(180,210,255,0.25), transparent 60%),
        radial-gradient(circle at 45% 75%, rgba(255,255,255,0.20), transparent 55%);
    filter: blur(8px);
    opacity: 0.85;

    /* Make it feel like it’s inside glass */
    mix-blend-mode: screen;

    /* Clip to a circle (the sphere) */
    border-radius: 70%;

    /* Animate drift */
    animation: mist-drift 2.5s ease-in-out infinite alternate;

    pointer-events: none;
}

.orb-wrap::after {
    content: "";
    position: absolute;

    left: 50%;
    top: 46%;
    width: 62%;
    height: 62%;
    transform: translate(-50%, -50%);

    background:
        radial-gradient(circle at 60% 40%, rgba(255,255,255,0.18), transparent 55%),
        radial-gradient(circle at 35% 60%, rgba(190,220,255,0.14), transparent 60%);
    filter: blur(12px);
    opacity: 0.55;
    mix-blend-mode: screen;
    border-radius: 50%;

    animation: mist-drift-2 2.2s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Boost state triggered by button click */
.orb-wrap.boost::before,
.orb-wrap.boost::after {
  opacity: 0.95;
  filter: blur(6px);
}

/* Speed up animations during boost */
.orb-wrap.boost::before { animation-duration: 1.4s; }
.orb-wrap.boost::after  { animation-duration: 2.0s; }

.orb-wrap.boost {
  animation: orb-glow 0.9s ease-in-out infinite alternate;
}

.orb-result {
    font-size: 2rem;
    margin-top: 40px;
    min-height: 40px;
}

.orb-result.ticking {
    animation: result-tick 0.25s ease-out forwards;
}

/* ===========
ANIMATIONS
============ */

@keyframes result-tick {
  from { filter: blur(5px); transform: translateY(10px); opacity: 0; }
  to   { filter: blur(0);   transform: translateY(0);    opacity: 1; }
}

@keyframes orb-glow {
  0%   { filter: drop-shadow(0 0 0 rgba(255,255,255,0.0)); }
  100% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.25)); }
}

@keyframes orb-glow-poison {
  0%   { filter: drop-shadow(0 0 0 rgba(100, 255, 80, 0.0)); }
  100% { filter: drop-shadow(0 0 12px rgba(100, 255, 80, 0.4)); }
}

@keyframes text-wave {
  0%   { transform: translateY(0)    skewX(0deg); }
  15%  { transform: translateY(-4px) skewX(1.5deg); }
  35%  { transform: translateY(3px)  skewX(-1deg); }
  55%  { transform: translateY(-3px) skewX(0.8deg); }
  75%  { transform: translateY(3px)  skewX(-1.5deg); }
  90%  { transform: translateY(-2px) skewX(1deg); }
  100% { transform: translateY(0)    skewX(0deg); }
}

@keyframes mist-drift {
  /* top-left visit */
  0%   { transform: translate(-50%, -60%) scale(1.00) translateX(-10px) translateY(-10px); }

  /* drift down a bit */
  33%  { transform: translate(-52%, -62%) scale(1.02) translateX(-4px)  translateY(8px); }

  /* bottom-right gather */
  66%  { transform: translate(-49%, -64%) scale(1.03) translateX(8px)   translateY(8px); }

  /* settle near center */
  100% { transform: translate(-51%, -61%) scale(1.01) translateX(2px)   translateY(-2px); }
}

@keyframes mist-drift-2 {
  /* slightly different top-left */
  0%   { transform: translate(-50%, -62%) scale(1.02) translateX(-6px)  translateY(-5px); }

  /* right-ish */
  33%  { transform: translate(-48%, -60%) scale(1.00) translateX(10px)  translateY(2px); }

  /* bottom-left push (adds circulation) */
  66%  { transform: translate(-52%, -63%) scale(1.01) translateX(-8px)  translateY(10px); }

  /* come back */
  100% { transform: translate(-49%, -61%) scale(1.02) translateX(-4px)  translateY(4px); }
}

@media (hover: hover) {
    .game-card {
        transition: transform 180ms ease;
    }
    .game-card:has(.game-card-link:hover) {
        transform: translateY(-2px);
    }

    .orb-wrap {
        transition: transform 180ms ease, box-shadow 180ms ease;
    }
    .orb-wrap:hover {
        transform: translateY(-2px);
    }
}

/* ===========
DARK MODE
============ */

@media (prefers-color-scheme: dark) {
    body {
        background-color: #100d0a;
        color: #f2f2f2;
    }

    button {
        background-color: #f2f2f2;
        color: #0f0f0f;
    }

    .game-card {
        border-color: rgba(255, 255, 255, 0.15);
    }

    .crystalball2 .ask-input {
        border-color: rgba(255, 255, 255, 0.3);
        color: #f2f2f2;
    }

    .crystalball2 .ask-input:focus {
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* CB1 — warm dimmed lights bleeding from top corners */
    body.crystalball1::before {
        content: "";
        position: fixed;
        inset: 0;
        background:
            radial-gradient(ellipse 60% 40% at 0% 0%, rgba(180, 95, 20, 0.18), transparent 70%),
            radial-gradient(ellipse 60% 40% at 100% 0%, rgba(180, 95, 20, 0.14), transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

    /* CB2 — single flickering lamp, top-right */
    body.crystalball2::before {
        content: "";
        position: fixed;
        inset: 0;
        background: radial-gradient(ellipse 55% 45% at 92% 0%, rgba(220, 220, 210, 0.22), transparent 70%);
        pointer-events: none;
        z-index: 0;
        animation: lamp-flicker 4s ease-in-out infinite;
    }
}

/* ===========
MOBILE
============ */

@media (max-width: 900px) {
    .roll-history {
        display: none;
    }
}

@media (max-width: 600px) {
    body {
        margin-top: 50px;
        padding: 0rem 1rem;
    }

    .homepage .site-title,
    .crystalball1 .game-title,
    .crystalball2 .game-title {
        font-size: 3.4rem;
    }

    button {
        font-size: 2.5rem;
        padding: 1.2rem 1.75rem;
    }

    .orb-result {
        font-size: 2rem;
        line-height: 1.4;
    }

    .crystalball2 .crystal-ball-image,
    .crystalball2 .tv-image {
        width: 75vw;
    }

    .crystalball2 button {
        font-size: 1.5rem;
        padding: 0.9rem 1.5rem;
    }

    .crystalball2 .ask-input {
        padding: 10px 16px;
    }

    .game-card {
        width: min(300px, 78vw);
    }
}

@keyframes lamp-flicker {
    0%   { opacity: 1;    }
    8%   { opacity: 0.75; }
    12%  { opacity: 0.95; }
    20%  { opacity: 0.6;  }
    25%  { opacity: 0.9;  }
    45%  { opacity: 0.85; }
    55%  { opacity: 1;    }
    65%  { opacity: 0.7;  }
    70%  { opacity: 0.95; }
    82%  { opacity: 0.6;  }
    88%  { opacity: 0.9;  }
    100% { opacity: 1;    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }

    body.crystalball2::before {
        animation: none;
    }

    .game-card:nth-child(2) {
        animation: none;
    }
}

@media (max-width: 360px) {
    body {
        margin-top: 50px;
        padding: 0 1rem;
    }

    .homepage .site-title,
    .crystalball1 .game-title,
    .crystalball2 .game-title {
        font-size: 3rem;
    }

    button {
        font-size: 2rem;
        padding: 1rem 1.5rem;
    }

    .orb-result {
        font-size: 1.6rem;
    }

    .crystalball2 .crystal-ball-image,
    .crystalball2 .tv-image {
        width: 68vw;
    }

    .crystalball2 button {
        font-size: 1.3rem;
        padding: 0.8rem 1.2rem;
    }
}