/* ============================================================
   CSS VARIABLES - Color Palette
   ============================================================ */
:root {
    --aegean-bright:  #64CEEA;
    --aegean-mid:     #47B9D8;
    --aegean-deep:    #2AA4BF;
    --aegean-darker:  #1A7A99;
    --aegean-darkest: #0D5A73;
    --aegean-pale:    #C4EBF5;
    --aegean-ghost:   #E8F9FC;

    --tile-grad-start: #82DDEF;
    --tile-grad-mid:   #47B9D8;
    --tile-grad-end:   #2AA4BF;
    --tile-shadow:     #1A7A99;

    --key-unused-top:    #F5F5F5;
    --key-unused-mid:    #DCDCDC;
    --key-unused-bot:    #C8C8C8;
    --key-unused-shadow: #888688;
    --key-unused-left:   #AAAAAA;
    --key-unused-text:   #373435;

    --key-wrong-top:    #AAAAAA;
    --key-wrong-mid:    #787878;
    --key-wrong-bot:    #606062;
    --key-wrong-shadow: #252525;
    --key-wrong-left:   #373435;
    --key-wrong-text:   #111111;

    --key-correct-top:    #E8F9FC;
    --key-correct-mid:    #C4EBF5;
    --key-correct-bot:    #AADFF0;
    --key-correct-shadow: #64CEEA;
    --key-correct-text:   rgba(255,255,255,0.92);

    --hint-glow: #47B9D8;
    --win-red:   #cc0000;
    --bg:        #ffffff;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    height: 100%;
    background: var(--bg);
    font-family: 'Arial', sans-serif;
    overflow-x: hidden;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    font-family: 'Arial', sans-serif;
    overflow-x: hidden;
}

/* ============================================================
   HEADER
   ============================================================ */
#site-header {
    width: 100%;
    line-height: 0;
}
#site-header img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-height: 600px) {
    #site-header { display: none; }
}
#home-link {
    display: inline-block;
    font-size: clamp(11px, 2.5vw, 14px);
    color: #1a7a8f;
    text-decoration: none;
    padding: 3px 8px;
}
#home-link:hover { text-decoration: underline; }

/* ============================================================
   WORD THIEF BANNER ROW (combined banner + mascot image)
   Always visible on all devices, right-aligned.
   Sized by height so it scales gracefully on short viewports.
   ============================================================ */
#wordthief-banner-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 2px 14px 0;
}
#wordthief-banner {
    height: min(80px, 11vh);
    width: auto;
    display: block;
}

/* Hide standalone mascot everywhere — replaced by combined banner image */
#mascot { display: none !important; }

/* ============================================================
   GAME WRAPPER - Portrait layout (mobile first)
   ============================================================ */
#game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    flex: 1;
    padding: 8px 6px 16px;
    gap: 0;
    box-sizing: border-box;
}

/* ============================================================
   TOP BAR - button + mascot
   ============================================================ */
#top-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 6px;
    gap: 8px;
}

#play-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}
#play-btn:hover { opacity: 0.85; }

#mascot {
    height: clamp(50px, 12vw, 80px);
    width: auto;
    opacity: 1;
}

/* Mode selector */
#mode-selector {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
}
.mode-btn {
    padding: clamp(4px,1.2vw,6px) clamp(10px,2.4vw,17px);
    border-radius: 20px;
    border: 2px solid var(--aegean-mid);
    background: #fff;
    color: var(--aegean-darker);
    font-size: clamp(12px,3vw,15px);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.mode-btn.active {
    background: var(--aegean-mid);
    color: #fff;
}

/* Turbo button */
#turbo-btn {
    display: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.4s ease;
    flex-shrink: 0;
}
#turbo-btn.turbo-visible {
    display: inline-flex;
    align-items: center;
    opacity: 1;
}
#turbo-btn img {
    height: clamp(26px, 6vw, 44px);
    width: auto;
    display: block;
}

/* On mobile portrait, turbo button matches gem size explicitly */
@media (max-width: 699px) {
    #turbo-btn img {
        height: clamp(30px, 8vw, 44px);
        width: auto;
    }
}

/* Landscape-only rows: hidden by default, shown via landscape media query */
#landscape-row2,
#landscape-row3 { display: none; }

/* Restart warning: left-aligned in page flow */
#restart-warning {
    align-self: flex-start;
    margin-left: 8px;
}

/* ============================================================
   WIN GEMS ROW
   ============================================================ */
#gem-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 0 0 4px;
    flex-shrink: 0;
}

.win-gem {
    width:  clamp(13px, 2.5vw, 19px);
    height: clamp(13px, 2.5vw, 19px);
    object-fit: contain;
    opacity: 0;
    transform: scale(0.3);
    transition: none;
}

/* Turbo-size gem: matches turbo button height */
.win-gem.turbo-size {
    width:  clamp(26px, 6vw, 44px);
    height: clamp(26px, 6vw, 44px);
    opacity: 1;
    transform: scale(1);
}

/* Turbo Hard violet gem: gem-vio-200.png fills its canvas fully.
   Same size as turbo-size — Susan changed her mind on the original
   "10% larger" spec; vio-gems now render at identical dimensions. */
.win-gem.turbo-hard-size {
    width:  clamp(26px, 6vw, 44px);
    height: clamp(26px, 6vw, 44px);
    opacity: 1;
    transform: scale(1);
}

.win-gem.gem-visible {
    animation: gemPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes gemPop {
    0%   { opacity: 0; transform: scale(0.3); }
    70%  { opacity: 1; transform: scale(1.18); }
    100% { opacity: 1; transform: scale(1); }
}

/* Step 1: all 3 gems swell */
.win-gem.gem-swell {
    animation: gemSwell 0.6s ease-in-out forwards;
}
@keyframes gemSwell {
    0%   { opacity: 1; transform: scale(1);   }
    50%  { opacity: 1; transform: scale(1.7); }
    100% { opacity: 1; transform: scale(1.5); }
}

/* Step 2: left gem flies right toward center */
.win-gem.gem-converge-left {
    animation: gemConvergeLeft 0.35s ease-in forwards;
}
@keyframes gemConvergeLeft {
    0%   { opacity: 1; transform: scale(1.5) translateX(0);    }
    100% { opacity: 0; transform: scale(1.5) translateX(120%); }
}

/* Step 2: right gem flies left toward center */
.win-gem.gem-converge-right {
    animation: gemConvergeRight 0.35s ease-in forwards;
}
@keyframes gemConvergeRight {
    0%   { opacity: 1; transform: scale(1.5) translateX(0);     }
    100% { opacity: 0; transform: scale(1.5) translateX(-120%); }
}

/* Step 3: center gem grows into super gem */
.win-gem.gem-merge {
    animation: gemMerge 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes gemMerge {
    0%   { opacity: 1; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(1);
           width: clamp(26px, 6vw, 44px); height: clamp(26px, 6vw, 44px); }
}

/* ============================================================
   TURBO HARD UNLOCK — 6-gem slide-behind-anchor + in-place morph
   Gem 1 (leftmost) is the anchor and never moves. Gems 2–6 slide
   left via translateX and vanish behind it. The violet gem then
   crossfades in over the anchor's spot — true in-place morph,
   no flex-sibling insertion, no size change during the morph.
   ============================================================ */

/* Anchor gem: stays put, sits above the sliding gems during the slide */
.win-gem.gem-slide-anchor {
    z-index: 2;
}

/* Sliding gems (2–6): start state set inline via JS (position/left/top),
   this class only defines the end state of the transition.
   No opacity fade — gems stay fully solid/opaque the entire slide and
   disappear purely because they end up positioned behind the anchor
   (z-index 1 vs anchor's z-index 2). A parallel opacity fade made them
   look semi-transparent for nearly the whole animation, which read as
   "ghostly" rather than solid gems sliding behind another gem. */
.win-gem.gem-slide-behind {
    z-index: 1;
    opacity: 1;
    transition: transform 1000ms ease-in;
}
/* Note: JS still adds a .gem-slide-go class when the transform kicks in
   (useful as a hook if needed later), but it carries no styling of its
   own now — the transform transition above is what drives the motion. */

/* Violet gem crossfade: positioned exactly over the anchor's spot,
   fades in while the blue anchor sits underneath at the same size */
.win-gem.gem-morph-violet {
    position: absolute;
    z-index: 3;
    opacity: 0;
    transition: opacity 1500ms ease;
}
.win-gem.gem-morph-violet.gem-morph-go {
    opacity: 1;
}

/* X tokens fade out at the start of the slide (0.5s transition) */
.turbo-x-token.x-fade-out {
    transition: opacity 0.5s ease;
    opacity: 0;
}




/* Turbo token container: two rows right of Turbo button */
#turbo-token-container {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex-shrink: 0;
}
#turbo-gem-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    min-height: clamp(26px, 6vw, 44px);
}
#turbo-x-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    min-height: 0;
}
/* X token image sizing — slightly smaller than turbo gem */
.turbo-x-token {
    width:  clamp(22px, 5vw, 38px);
    height: clamp(22px, 5vw, 38px);
    object-fit: contain;
    display: block;
    opacity: 0;
    transform: scale(0.3);
}
.turbo-x-token.x-visible {
    animation: xPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes xPop {
    0%   { opacity: 0; transform: scale(0.3); }
    70%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}
/* On mobile portrait, turbo token container sizes up slightly */
@media (max-width: 699px) {
    #turbo-gem-row {
        min-height: clamp(30px, 8vw, 44px);
    }
    .win-gem.turbo-size {
        width:  clamp(30px, 8vw, 44px);
        height: clamp(30px, 8vw, 44px);
    }
    .win-gem.turbo-hard-size {
        width:  clamp(30px, 8vw, 44px);
        height: clamp(30px, 8vw, 44px);
    }
    .turbo-x-token {
        width:  clamp(25px, 6.5vw, 38px);
        height: clamp(25px, 6.5vw, 38px);
    }
}

/* ============================================================
   TURBO SCROLL OVERLAY
   ============================================================ */
#turbo-scroll-overlay {
    display: none;
    position: fixed;
    /* top is set dynamically by JS to sit below the mode selector */
    left: 0;
    width: 100%;
    z-index: 500;
    justify-content: center;
    align-items: flex-start;
    background: none;
    pointer-events: none; /* overlay itself is non-blocking */
}
#turbo-scroll-overlay.scroll-visible {
    display: flex;
    animation: scrollPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes scrollPop {
    0%   { opacity: 0; transform: scale(0.75); }
    100% { opacity: 1; transform: scale(1);    }
}
#turbo-scroll-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto; /* scroll itself is clickable */
    cursor: pointer;
    user-select: none;
    /* width and max-height set dynamically by JS */
}
#turbo-scroll-img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
    /* Rich drop shadow so scroll floats above the game */
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}
#turbo-scroll-close {
    margin-top: 8px;
    font-family: Arial, sans-serif;
    font-size: clamp(13px, 3vw, 17px);
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 20px;
    padding: 5px 16px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.3px;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
}

/* ============================================================
   BUMP-TO-REGULAR POPUP
   ============================================================ */
#bump-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 600;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    transition: opacity 2s ease;
}
#bump-overlay.bump-visible {
    display: flex;
    animation: scrollPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#bump-overlay.bump-fadeout {
    opacity: 0;
}
#bump-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 6px 22px rgba(0,0,0,0.55));
    /* width/height set dynamically by JS */
}
#bump-cloud-svg {
    width: 100%;
    height: auto;
    display: block;
}
#bump-slide {
    position: absolute;
    width: 92%;
    height: 92%;
    object-fit: contain;
}

/* UH-OH image */
#uhoh-img {
    display: none;
    height: clamp(176px, 31vw, 286px);
    width: auto;
    margin-top: 4px;
    align-self: flex-start;
}
/* landscape UH-OH: hidden always by default, JS sets display:block only in landscape */
#uhoh-img-ls {
    display: none !important;
    height: clamp(140px, 22vw, 220px);
    width: auto;
    margin-top: 4px;
}
@media (orientation: landscape) and (min-width: 700px) {
    #uhoh-img-ls { display: none; } /* JS controls it in landscape */
    #uhoh-img    { display: none !important; } /* hide portrait version in landscape */
}

/* ============================================================
   TURBO BUTTON
   ============================================================ */
#turbo-btn {
    display: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.4s ease;
}
#turbo-btn.turbo-visible {
    display: inline-flex;
    align-items: center;
    opacity: 1;
}
#turbo-btn.turbo-glow img,
#turbo-btn-ls.turbo-glow img {
    animation: turboBtnGlow 3s ease-out forwards;
}
@keyframes turboBtnGlow {
    0%   { filter: drop-shadow(0 0 10px var(--aegean-bright)) drop-shadow(0 0 20px var(--aegean-mid)); opacity: 1; }
    33%  { filter: drop-shadow(0 0 10px var(--aegean-bright)) drop-shadow(0 0 20px var(--aegean-mid)); opacity: 1; }
    100% { filter: drop-shadow(0 0 0px var(--aegean-bright))  drop-shadow(0 0 0px  var(--aegean-mid));  opacity: 1; }
}
#turbo-btn img,
#turbo-btn-ls img {
    height: clamp(26px, 6vw, 44px);
    width: auto;
}

/* DEV-only Regular button after bump-back */
#btn-regular.btn-regular-dev {
    background: linear-gradient(180deg, var(--aegean-bright) 0%, var(--aegean-mid) 100%);
    color: #fff;
    border-color: var(--aegean-darker);
}

/* ============================================================
   RESTART WARNING
   ============================================================ */
#restart-warning {
    display: none;
    margin-top: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 2px solid var(--aegean-mid);
    border-radius: 14px;
    box-shadow: 0 0 0 3px var(--aegean-pale),
                0 0 10px 2px rgba(71, 185, 216, 0.35);
    font-family: Arial, sans-serif;
    font-size: clamp(12px, 3.2vw, 15px);
    font-weight: 700;
    color: #223;
    line-height: 1.5;
    max-width: clamp(200px, 78vw, 290px);
}
#restart-warning.warning-show { display: block; }

#restart-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}
#restart-yes-btn,
#restart-no-btn {
    padding: 5px 16px;
    border-radius: 16px;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(12px, 3.2vw, 15px);
    font-weight: 900;
    cursor: pointer;
    transition: opacity 0.2s;
    border: 2px solid var(--aegean-darker);
}
#restart-yes-btn {
    background: linear-gradient(180deg, var(--aegean-bright) 0%, var(--aegean-mid) 100%);
    color: #fff;
}
#restart-no-btn {
    background: #fff;
    color: var(--aegean-darker);
}
#restart-yes-btn:hover,
#restart-no-btn:hover { opacity: 0.85; }

/* ============================================================
   WIN NOTIFICATION BUBBLE (below top bar, pushes tiles down)
   ============================================================ */
#win-balloon {
    display: none;
    align-self: flex-start;
    margin: 4px 0 0 0;
    width: fit-content;
    max-width: clamp(200px, 80vw, 400px);
    background: #fff;
    border: 2px solid var(--aegean-mid);
    border-radius: 20px;
    padding: 5px 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 100, 140, 0.15);
    font-family: Arial, sans-serif;
    font-size: clamp(11px, 2.5vw, 14px);
    font-style: italic;
    color: #334;
    line-height: 1.3;
    pointer-events: none;
}
#win-balloon.balloon-show {
    display: block;
    animation: balloonPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes balloonPop {
    0%   { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   ANSWER TILES
   ============================================================ */
#tiles-area {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(4px,1vw,8px) 4px;
    gap: clamp(3px,1.2vw,7px);
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Portrait: tiles break out of top-bar flex row and sit below it */
@media not all and (orientation: landscape) and (min-width: 700px) {
    #top-bar {
        flex-wrap: wrap;
    }
    #tiles-area {
        order: 99;       /* push to end of top-bar wrap = visually below */
        flex: 0 0 100%;  /* full width, own row */
        padding: clamp(4px,1vw,8px) 4px;
    }
}

.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width:  clamp(36px, 11vw, 58px);
    height: clamp(46px, 14vw, 72px);
    border-radius: clamp(6px,2vw,10px);
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(20px, 7vw, 36px);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,60,90,0.4);
    transition: all 0.3s ease;
    user-select: none;
}

.tile-empty {
    background: linear-gradient(135deg, var(--aegean-ghost) 0%, var(--aegean-pale) 100%);
    border-top:    2px solid #F5FDFF;
    border-right:  2px solid #90D4E8;
    border-bottom: 3px solid var(--aegean-bright);
    border-left:   3px solid var(--aegean-bright);
}

.tile-filled {
    background: linear-gradient(135deg, var(--tile-grad-start) 0%, var(--tile-grad-mid) 45%, var(--tile-grad-end) 100%);
    border-top:    2px solid #B0EEFF;
    border-right:  2px solid var(--aegean-deep);
    border-bottom: 4px solid var(--tile-shadow);
    border-left:   4px solid var(--tile-shadow);
    animation: tilePop 0.3s ease;
}

.tile-space {
    width: clamp(8px,2vw,16px);
    height: clamp(46px,14vw,72px);
    background: transparent;
    border: none;
}

@keyframes tilePop {
    0%   { transform: scale(0.7); opacity: 0.4; }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   THIEF AREA - portrait: below keyboard
   ============================================================ */
#thief-area {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    /* 40vh cap: on Chromebook (551px) = ~220px, keyboard stays visible */
    max-height: 40vh;
    min-height: clamp(80px, 18vh, 180px);
    padding: 0;
    position: relative;
    gap: 16px;
}

#thief-container {
    position: relative;
    /* min() of vw and vh prevents oversizing on wide portrait screens (iPad) */
    width:  min(55vw, 36vh, 220px);
    height: min(55vw, 36vh, 220px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.thief-part {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center top;
    display: none;
    animation: partAppear 0.4s ease;
}
.thief-part.visible { display: block; }

/* SVG placeholder thief parts */
#thief-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
}

@keyframes partAppear {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

#word-thief-wins-text {
    display: none;
    color: var(--win-red);
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(18px, 5vw, 28px);
    font-weight: 900;
    text-align: center;
    margin-top: 8px;
    animation: tilePop 0.4s ease;
}

/* Middle section grows to fill available space, pushing keyboard lower */
#middle-section {
    display: flex;
    width: 100%;
    justify-content: center;
    flex: 1;
    min-height: 0;
}

/* Wrapper: thief above, keyboard+hint below, all centered */
#keyboard-thief-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1;
    min-height: 0;
}
#keyboard-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px,1.2vw,7px);
    padding: clamp(4px,1.5vw,10px) 4px;
    margin: 0 auto;
}

.key-row {
    display: flex;
    gap: clamp(3px,1vw,6px);
    justify-content: center;
}

.key {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(28px, 9vw, 46px);
    height:    clamp(34px, 9.5vw, 48px);
    border-radius: clamp(5px,1.2vw,8px);
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(16px, 5vw, 24px);
    font-weight: 900;
    cursor: pointer;
    user-select: none;
    transition: transform 0.08s ease, filter 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.key:active { transform: scale(0.93); }

.key-unused {
    background: linear-gradient(135deg, var(--key-unused-top) 0%, var(--key-unused-mid) 60%, var(--key-unused-bot) 100%);
    border-top:    2px solid #FFFFFF;
    border-right:  2px solid #C0C0C0;
    border-bottom: 3px solid var(--key-unused-shadow);
    border-left:   3px solid var(--key-unused-left);
    color: var(--key-unused-text);
}
.key-wrong {
    background: linear-gradient(135deg, var(--key-wrong-top) 0%, var(--key-wrong-mid) 60%, var(--key-wrong-bot) 100%);
    border-top:    2px solid #CCCCCC;
    border-right:  2px solid #555555;
    border-bottom: 3px solid var(--key-wrong-shadow);
    border-left:   3px solid var(--key-wrong-left);
    color: var(--key-wrong-text);
    cursor: default;
}
.key-correct {
    background: linear-gradient(135deg, var(--key-correct-top) 0%, var(--key-correct-mid) 60%, var(--key-correct-bot) 100%);
    border-top:    2px solid #F5FDFF;
    border-right:  2px solid #90D4E8;
    border-bottom: 3px solid var(--key-correct-shadow);
    border-left:   3px solid var(--key-correct-shadow);
    color: var(--key-correct-text);
    cursor: default;
    text-shadow: 0 1px 2px rgba(0,80,110,0.3);
}
.key-hint {
    box-shadow: 0 0 0 3px var(--aegean-bright),
                0 0 12px 4px var(--aegean-mid),
                0 0 20px 6px var(--aegean-pale);
    animation: hintPulse 1s ease-in-out infinite;
}
@keyframes hintPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--aegean-bright), 0 0 12px 4px var(--aegean-mid), 0 0 20px 6px var(--aegean-pale); }
    50%       { box-shadow: 0 0 0 4px var(--aegean-mid),   0 0 18px 8px var(--aegean-bright), 0 0 28px 10px var(--aegean-pale); }
}

/* ============================================================
   HINT BUTTON
   ============================================================ */
#hint-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(6px,2vw,12px) 8px clamp(4px,1vw,8px);
}
#hint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}
#hint-btn img {
    height: clamp(26px, 5.5vw, 42px);
    width: auto;
    display: block;
}
#hint-btn:hover { opacity: 0.85; }
#hint-btn:disabled, #hint-btn.used {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
#hint-text {
    font-size: clamp(11px,2.8vw,14px);
    color: #666;
    font-style: italic;
}

/* ============================================================
   END GAME SCREEN
   ============================================================ */
#endgame-area {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(8px,2vw,16px) clamp(4px,2vw,12px);
    gap: 0;
    animation: tilePop 0.5s ease;
}
#endgame-area.visible { display: flex; }

/* Main row: far-left thief + center vocab */
#endgame-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: clamp(8px,2vw,16px);
}

/* Far left column - always at left edge */
#endgame-left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: clamp(150px,32vw,260px);
}

/* Win ribbon: Play-Again thief LEFT, ribbon RIGHT - side by side in a row */
#win-ribbon {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
#win-ribbon.visible { display: flex; }
#win-ribbon #sad-thief-img { height: clamp(160px,28vw,260px); width:auto; order: 1; }
#win-ribbon #win-ribbon-img { height: clamp(120px,20vw,200px); width:auto; order: 2; }

/* Play-again thief - same size as sad thief */
#play-again-thief { height: clamp(160px,28vw,260px); width: auto; }

/* ============================================================
   PORTRAIT MOBILE ENDGAME - stack vertically, centered
   ============================================================ */
@media (orientation: portrait) and (max-width: 600px) {
    #endgame-area {
        align-items: center;
    }
    #endgame-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    #endgame-left {
        min-width: unset;
        width: 100%;
        align-items: center;
    }
    /* Thief + ribbon centered, smaller on mobile */
    #win-ribbon {
        justify-content: center;
        gap: 12px;
    }
    #win-ribbon #sad-thief-img,
    #play-again-thief { height: clamp(120px, 30vw, 180px); }
    #win-ribbon #win-ribbon-img { height: clamp(100px, 24vw, 150px); }
    /* Vocab centered below */
    #vocab-section {
        align-items: center;
        max-width: 100%;
    }
    #vocab-word, #vocab-definition, #vocab-caption { text-align: center; }
    #vocab-image { width: auto; max-width: 90vw; }
}

/* Vocab section */
#vocab-section {
    flex: 1;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

#vocab-word { text-align: center; }
#vocab-definition { text-align: left; }
#vocab-word {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(16px,4.5vw,22px);
    font-weight: 900;
    color: #222;
}
#vocab-definition {
    font-size: clamp(14px,3.8vw,17px);
    color: #333;
    line-height: 1.5;
}
#vocab-image {
    width: auto;
    max-width: min(55vw, 100%);
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    display: none;
    margin: 0 auto;
}
#vocab-image.loaded {
    display: block;
}
#vocab-caption {
    font-size: clamp(11px,2.8vw,13px);
    color: #777;
    font-style: italic;
}

/* Play again section */
#play-again-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}
#play-again-btn {
    background: linear-gradient(180deg, var(--aegean-bright) 0%, var(--aegean-mid) 50%, var(--aegean-deep) 100%);
    border: 2px solid var(--aegean-darker);
    border-radius: 28px;
    padding: clamp(8px,2vw,12px) clamp(20px,6vw,40px);
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(14px,4vw,20px);
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,100,140,0.3);
    transition: opacity 0.2s, transform 0.1s;
}
#play-again-btn:hover { opacity: 0.88; transform: scale(1.03); }


/* ============================================================
   LANDSCAPE LAYOUT - tablet/desktop (min-width: 700px)
   ============================================================ */
@media (orientation: landscape) and (min-width: 700px) {

    #game-wrapper {
        justify-content: flex-start;
        min-height: 98vh;
        padding: 4px 8px 8px;
        gap: 0;
    }

    /* ── ROW 1: Play button (left) · tiles (center) · mascot (right) ── */
    #top-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 4px 8px 0;
        gap: 8px;
    }

    /* Play button column — compact, no wider than the button itself */
    #top-bar > div:first-child {
        flex: 0 0 auto;
        width: fit-content;
        align-self: center;
    }
    #top-bar > div:first-child img {
        width: clamp(130px, 17vw, 210px) !important;
    }
    /* Hide mode-selector and gem-row inside top-bar in landscape;
       they show in #landscape-row2 below instead */
    #top-bar #mode-selector,
    #top-bar #gem-row {
        display: none !important;
    }

    /* Tiles slide into center of the top bar row */
    #tiles-area {
        flex: 1;
        padding: 2px 4px;
        gap: clamp(3px, 1vw, 6px);
        justify-content: center;
        align-items: center;
    }

    /* Tiles sized by vw — fills center space, readable even for 8-letter words */
    .tile {
        width:  clamp(28px, 6vw, 58px);
        height: clamp(36px, 8vw, 72px);
        font-size: clamp(16px, 4.8vw, 38px);
        border-radius: clamp(4px, 1vw, 8px);
    }

    /* Mascot far right */
    #mascot {
        flex: 0 0 auto;
        height: clamp(50px, 8.5vh, 90px) !important;
        align-self: center;
    }

    /* ── ROW 2: mode buttons + gems + turbo, tight left ── */
    #landscape-row2 {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: 100%;
        padding: 2px 8px 0;
        flex-wrap: nowrap;
    }

    /* Landscape mode-selector mirrors portrait styling */
    #mode-selector-ls {
        display: flex;
        gap: 6px;
        align-items: center;
        flex-shrink: 0;
    }

    /* Gem row and turbo container stay compact */
    #gem-row-ls {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex-shrink: 0;
    }

    /* Turbo token container in landscape row 2 */
    #turbo-token-container-ls {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        flex-shrink: 0;
    }

    /* Middle section: no flex-grow in landscape, just centers content */
    #middle-section {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 0;
        flex: 0 0 auto;
    }

    /* Wrapper: thief above, keyboard+hint below, both centered */
    #keyboard-thief-wrapper {
        flex-direction: column;
        align-items: center;
        width: auto;
        gap: 0;
        justify-content: center;
        flex: 0 0 auto;
    }

    /* Thief - fixed vh size, no flex-grow in landscape */
    #thief-area {
        order: 1;
        flex: 0 0 auto;
        width: clamp(140px, 22vh, 240px);
        min-height: clamp(160px, 26vh, 280px);
        max-height: clamp(160px, 26vh, 280px);
        justify-content: center;
    }
    #thief-container {
        width: clamp(130px, 20vh, 220px);
        height: clamp(160px, 26vh, 280px);
    }

    /* Keyboard centered below thief */
    #keyboard-area {
        order: 2;
        flex: 0 0 auto;
        padding: 2px 0 0;
    }

    /* Keys ~85% larger than portrait, still vh-based */
    .key {
        min-width: clamp(30px, 5.5vh, 58px);
        height:    clamp(38px, 6.5vh, 68px);
        font-size: clamp(16px, 4vh, 30px);
        border-radius: 6px;
    }
    .key-row { gap: clamp(2px, 0.6vh, 5px); }
    #keyboard-area { gap: clamp(3px, 0.7vh, 6px); }

    #hint-area { padding: 3px 4px; order: 3; }

    /* Video - matches landscape thief size */
    #lose-video { width: clamp(130px, 20vh, 220px); }

    /* Collapse middle-section when endgame shows */
    #endgame-area.visible ~ #middle-section,
    .endgame-active #middle-section { padding: 0; min-height: 0; }

    /* Endgame thieves */
    #win-ribbon #sad-thief-img,
    #play-again-thief { height: clamp(120px, 18vh, 180px); }
    #win-ribbon #win-ribbon-img { height: clamp(100px, 14vh, 150px); }

    /* Vocab centered in landscape endgame */
    #vocab-section { align-items: center; margin: 0 auto; }
    #vocab-word, #vocab-caption { text-align: center; width: 100%; }
    #vocab-image { margin: 0 auto; }
}

/* ============================================================
   GEM BURST - DRAG & DROP
   ============================================================ */

/* Floating ghost that follows the finger/cursor while dragging */
#gem-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 900;
    display: none;
    width:  clamp(30px, 8vw, 50px);
    height: clamp(30px, 8vw, 50px);
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 0.88;
    filter: drop-shadow(0 4px 10px rgba(0,160,200,0.7));
    transition: transform 0.1s ease;
}
#gem-drag-ghost.dragging { display: block; }

/* Dragged gem source: dim while being dragged */
.gem-being-dragged {
    opacity: 0.25 !important;
    transform: scale(0.85) !important;
    transition: opacity 0.15s, transform 0.15s !important;
}

/* X token: subtle scale-up when a gem is being dragged (valid drop zone).
   No color filter or animation — keeps them fully visible. */
.turbo-x-token.drop-target-active {
    transform: scale(1.15);
    transition: transform 0.15s ease;
}

/* X token: brief scale flash on successful drop (before removal) */
.turbo-x-token.drop-success {
    animation: none !important;
    transform: scale(1.3) !important;
    transition: transform 0.1s !important;
}

/* Gem burst canvas — positioned fixed, overlays everything */
#gem-burst-canvas {
    position: fixed;
    pointer-events: none;
    z-index: 950;
    display: none;
    image-rendering: pixelated;
}

/* ============================================================
   HINT BUTTON - TURBO DROP ZONE STATE
   ============================================================ */

/* Wrapper gives us a positioning context for the no-symbol overlay */
#hint-btn-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* No-symbol SVG overlay — shown in Turbo mode during active game */
#hint-no-symbol {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none; /* clicks pass through to button (though button is disabled) */
    z-index: 2;
}
#hint-no-symbol svg {
    width: 100%;
    height: 100%;
}

/* Hint button Turbo-locked state: dimmed + no-symbol visible */
#hint-btn.turbo-locked {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;  /* drag events handled on wrapper instead */
}
#hint-btn.turbo-locked ~ #hint-no-symbol,
#hint-btn-wrap.turbo-drop-zone #hint-no-symbol {
    display: block;
}

/* Hint drop zone: glow when a gem hovers over it */
#hint-btn-wrap.hint-drop-hover #hint-btn {
    opacity: 0.75;
    box-shadow: 0 0 0 3px var(--aegean-bright),
                0 0 14px 5px var(--aegean-mid),
                0 0 22px 8px var(--aegean-pale);
    transition: box-shadow 0.15s, opacity 0.15s;
}

/* ============================================================
   REGULAR BUTTON ONE-TIME TOOLTIP
   ============================================================ */
#regular-tip {
    display: none;
    position: fixed;
    z-index: 800;
    background: #fff;
    border: 2px solid var(--aegean-mid);
    border-radius: 16px;
    padding: 10px 16px;
    max-width: clamp(200px, 72vw, 300px);
    font-family: Arial, sans-serif;
    font-size: clamp(13px, 3.2vw, 15px);
    color: #223;
    line-height: 1.5;
    box-shadow: 0 4px 18px rgba(0,100,140,0.22),
                0 0 0 3px var(--aegean-pale);
    pointer-events: none;
    animation: balloonPop 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
/* small triangle pointing up-left toward the button */
#regular-tip::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 18px;
    border-width: 0 8px 10px 8px;
    border-style: solid;
    border-color: transparent transparent var(--aegean-mid) transparent;
}
#regular-tip::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 20px;
    border-width: 0 6px 8px 6px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

/* ============================================================
   PORTRAIT - Start button size cap
   Overrides inline style which is too large on portrait phones/iPads.
   ============================================================ */
@media (orientation: portrait) {
    #play-btn img {
        width: clamp(130px, 40vw, 200px) !important;
    }
    #wordthief-banner {
        height: min(55px, 9vh);
    }
}

/* ============================================================
   LANDSCAPE LAYOUT - phone (max-height 620px) - not optimized
   ============================================================ */
@media (orientation: landscape) and (max-width: 699px) {
    #game-wrapper { padding: 4px; }
    #top-bar { padding: 2px 8px 4px; }
    #middle-section {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    #keyboard-thief-wrapper {
        flex-direction: row;
        align-items: center;
        width: auto;
        gap: 6px;
    }
    #keyboard-area {
        flex: 0 0 auto;
        order: 1;
        padding: 2px 0;
        align-items: center;
    }
    #thief-area {
        order: 2;
        flex: 0 0 auto;
        width: clamp(60px, 14vw, 110px);
        min-height: clamp(70px, 16vw, 130px);
    }
    #thief-container {
        width: clamp(55px, 13vw, 100px);
        height: clamp(65px, 15vw, 120px);
    }
    .key {
        min-width: clamp(22px, 6.5vw, 38px);
        height:    clamp(32px, 9vw, 48px);
        font-size: clamp(12px, 3.5vw, 20px);
        border-radius: 6px;
    }
    .key-row { gap: clamp(2px, 0.6vw, 4px); }
    #hint-area { padding: 3px 8px; }
}



/* ============================================================
   TURBO HARD ENDGAME — PRIZE ANNOUNCEMENT (Stage 1)
   Brief tap-through banner before the full certificate.
   ============================================================ */
#prize-announce-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 800;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
}
#prize-announce-overlay.prize-announce-visible {
    display: flex;
    animation: scrollPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#prize-announce-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(180deg, #fff8e1, #ffe9a8);
    border: clamp(2px, 0.6vw, 4px) solid #c9a227;
    border-radius: 18px;
    padding: clamp(16px, 5vw, 30px) clamp(20px, 7vw, 44px);
    cursor: pointer;
    user-select: none;
    box-shadow: 0 6px 22px rgba(0,0,0,0.5);
    max-width: 90vw;
    text-align: center;
}
#prize-announce-text {
    font-family: Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 6vw, 32px);
    color: #7a4f00;
}
#prize-announce-subtext {
    font-family: Arial, sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(13px, 3.6vw, 18px);
    color: #444;
}

/* ============================================================
   TURBO HARD ENDGAME — BONUS HINT POPUP (Stage 4)
   Fires on any win while already holding all 6 gems, after the
   certificate has been shown once. Same tap-to-dismiss pattern
   as the prize announcement above.
   ============================================================ */
#bonus-hint-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 800;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
}
#bonus-hint-overlay.bonus-hint-visible {
    display: flex;
    animation: scrollPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#bonus-hint-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(180deg, #fff8e1, #ffe9a8);
    border: clamp(2px, 0.6vw, 4px) solid #c9a227;
    border-radius: 18px;
    padding: clamp(16px, 5vw, 30px) clamp(20px, 7vw, 44px);
    cursor: pointer;
    user-select: none;
    box-shadow: 0 6px 22px rgba(0,0,0,0.5);
    max-width: 90vw;
    text-align: center;
}
#bonus-hint-text {
    font-family: Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(18px, 5vw, 26px);
    color: #7a4f00;
}
#bonus-hint-subtext {
    font-family: Arial, sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(12px, 3.2vw, 16px);
    color: #444;
}

/* ============================================================
   TURBO HARD ENDGAME — ON-SCREEN CERTIFICATE (Stage 1, Screen 1)
   ============================================================ */
#certificate-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 810;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.55);
}
#certificate-overlay.certificate-visible {
    display: flex;
    animation: scrollPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#certificate-inner {
    position: relative;
    background: #fefefe;
    border: clamp(3px, 1vw, 7px) solid #c9a227;
    border-radius: 16px;
    padding: clamp(10px, 2.5vh, 22px) clamp(14px, 4vw, 30px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.55);
    width: min(92vw, 680px);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}
#certificate-close-x {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 2;
    background: none;
    border: none;
    font-size: clamp(20px, 5vw, 28px);
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 2px 6px;
}

/* Screens 1 and 2 share the same card chrome; only one is display:flex
   at a time (JS toggles), the other display:none. Both sit above the
   decorative ribbon/corner elements below via z-index. */
#cert-view,
#cert-name-view {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 1.4vh, 10px);
    width: 100%;
}

/* ------------------------------------------------------------
   DECORATIVE GOLD RIBBON + CORNER ACCENTS (Claude-built, CSS only,
   responsive) — visual reference: Susan's Canva certificate mockups.
   Sit behind the card content (z-index 0).
   ------------------------------------------------------------ */
#cert-gold-ribbon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(10px, 4vw, 34px);
    width: clamp(20px, 6.5vw, 52px);
    background: linear-gradient(180deg, #f6e4ac 0%, #d4af37 45%, #b8901e 100%);
    box-shadow: 1px 0 0 rgba(0,0,0,0.08), -1px 0 0 rgba(0,0,0,0.08);
    z-index: 0;
    pointer-events: none;
}
.cert-corner-ribbon {
    position: absolute;
    width: clamp(46px, 13vw, 112px);
    height: clamp(46px, 13vw, 112px);
    background: linear-gradient(135deg, #f6e4ac 0%, #d4af37 50%, #b8901e 100%);
    z-index: 0;
    pointer-events: none;
}
#cert-corner-top {
    top: 0;
    right: 0;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
#cert-corner-bottom {
    bottom: 0;
    right: 0;
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
}
/* Small dark fold-line accents at the outer edge of each corner ribbon,
   echoing the little tick marks in Susan's mockup art */
#cert-corner-top::after,
#cert-corner-bottom::after {
    content: '';
    position: absolute;
    width: clamp(7px, 2vw, 16px);
    height: clamp(7px, 2vw, 16px);
    background: #2a2a2a;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
#cert-corner-top::after {
    top: 0;
    right: clamp(46px, 13vw, 112px);
}
#cert-corner-bottom::after {
    bottom: 0;
    right: clamp(46px, 13vw, 112px);
    clip-path: polygon(0 100%, 100% 100%, 0 0);
}

#cert-badge-heading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 16px);
    flex-wrap: wrap;
}
#cert-badge-img {
    flex-shrink: 0;
    width: clamp(56px, 14vw, 118px);
    height: auto;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
    display: block;
}
#cert-badge-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
}
/* Positioned to match the navy disc measured in winribbonbadge.png:
   disc center sits at roughly 47% down / 50% across the full image
   (the image also includes the ribbon tails below the disc, which is
   why this isn't exactly 50%). Text is real HTML, not baked into the
   PNG, so it stays crisp at any display size. */
#cert-badge-overlay {
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    pointer-events: none;
}
.cert-badge-overlay-stars {
    font-size: clamp(5px, 1.3vw, 11px);
    color: #f0d060;
    line-height: 1;
}
#cert-badge-overlay-text {
    font-family: Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(9px, 2.3vw, 16px);
    line-height: 1.15;
    margin: 2px 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
#cert-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: 800;
}
#cert-heading-gold {
    font-size: clamp(20px, 6vw, 42px);
    color: #c9a227;
    letter-spacing: 0.5px;
}
#cert-heading-black {
    font-size: clamp(13px, 4vw, 26px);
    color: #222;
}
#cert-mode-rows {
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 1vh, 7px);
    width: 100%;
}
.cert-mode-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 2vw, 12px);
}
.cert-mode-gems {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.cert-gem-icon {
    width: clamp(7px, 1.65vw, 14px);
    height: clamp(7px, 1.65vw, 14px);
    object-fit: contain;
}
.cert-mode-img {
    height: clamp(24px, 5.5vw, 52px);
    width: auto;
}
.cert-check {
    color: #1b8a3a;
    font-weight: 800;
    font-size: clamp(11px, 3vw, 21px);
    line-height: 1;
    display: flex;
    align-items: center;
}
#cert-thief-row {
    display: flex;
    justify-content: center;
    width: 100%;
}
#cert-thief-img {
    height: clamp(72px, 16.8vh, 180px);
    width: auto;
}
#cert-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 1.2vh, 8px);
    width: 100%;
}
#cert-get-printable-btn {
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 3.8vw, 22px);
    color: #fff;
    background: linear-gradient(180deg, #3a6df0, #1c4bcf);
    border: none;
    border-radius: 24px;
    padding: clamp(9px, 2.2vh, 13px) clamp(20px, 6vw, 32px);
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
#cert-continue-link {
    font-family: Arial, sans-serif;
    font-size: clamp(12px, 3.2vw, 15px);
    color: #777;
    text-decoration: underline;
    cursor: pointer;
}

/* ============================================================
   TURBO HARD ENDGAME — CERTIFICATE, SCREEN 2
   Name entry + live preview + download/print
   ============================================================ */
#cert-name-heading {
    font-family: Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(15px, 4.2vw, 26px);
    color: #222;
    text-align: center;
    padding: 0 clamp(4px, 2vw, 10px);
}
#cert-name-input {
    width: min(88%, 400px);
    font-family: 'Arial', sans-serif;
    font-size: clamp(15px, 4vw, 22px);
    padding: clamp(8px, 2vh, 11px) clamp(10px, 3vw, 14px);
    border: 2px solid var(--aegean-mid);
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
}
#cert-name-input:focus {
    outline: none;
    border-color: var(--aegean-darker);
}
#cert-skip-name-link {
    font-family: Arial, sans-serif;
    font-size: clamp(12px, 3.2vw, 15px);
    color: #777;
    text-decoration: underline;
    cursor: pointer;
}
#cert-preview-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 2px 0;
}
#cert-preview-canvas {
    width: min(100%, 480px);
    height: auto;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
    display: block;
}
#cert-name-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 1.2vh, 8px);
    width: 100%;
}
#cert-download-btn,
#cert-print-btn {
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 3.8vw, 22px);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: clamp(9px, 2.2vh, 13px) clamp(20px, 6vw, 32px);
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    width: min(88%, 360px);
}
#cert-download-btn {
    background: linear-gradient(180deg, #3a6df0, #1c4bcf);
}
#cert-print-btn {
    background: linear-gradient(180deg, #4caf50, #2e7d32);
}
#cert-back-link {
    font-family: Arial, sans-serif;
    font-size: clamp(12px, 3.2vw, 15px);
    color: #777;
    text-decoration: underline;
    cursor: pointer;
}