/* ============================================================
   Clank Island stylesheet
   Linked from index.php via:
     <link rel="stylesheet" href="clankisland.css?v=18" />
   ============================================================ */
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0;
    padding: 0;
    color: #000000;
    transition: background-color 2s ease;
}
/* ============================================================
   NOTE: The old white-page board layout (#container, #mainContent,
   .header-table, .spacer, .tile-table) was retired when the monument
   ensemble replaced it. The live board now lives in the <style> block
   inside index.php (#introStage / #ensemble / #board). Those old rules
   were removed here so nothing reads them as current.
   ============================================================ */

/* ============================================================
   CURTAIN
   ============================================================ */
#curtain {
    position: fixed;
    inset: 0;                          /* covers the whole browser window */
    transform: translateY(-100%);      /* parked fully above the window */
    transition: transform 2s ease;     /* the slide — tune to taste */
    z-index: 1000;                     /* above the game, below the machine */
    pointer-events: none;              /* clicks pass through while it's up */
}
#curtain.down {
    transform: translateY(0);          /* slid down, covering everything */
    pointer-events: auto;              /* now it blocks the game underneath */
}
#curtain img {
    width: 100%;
    height: 100%;
    object-fit: cover;                 /* fill the window, crop the overflow */
    object-position: center bottom;    /* anchor the fringe hem to the bottom */
    display: block;
}

/* ============================================================
   STEAMPUNK SCORE MACHINE
   ============================================================ */
#machine {
    position: fixed;
    bottom: 0;
    left: 50%;
    height: 92vh;                                   /* just under curtain height */
    transform: translateX(-50%) translateY(100%);   /* parked below screen */
    transition: transform 2s ease-out;
    z-index: 1100;                                  /* in front of curtain */
    pointer-events: none;
}
#machine.up {
    transform: translateX(-50%) translateY(0);       /* risen */
}
#machine img {
    height: 100%;
    width: auto;
    display: block;
}

/* ---- the two screens: % of the machine box, so they ride along when it scales ---- */
.screen {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
}

/* UPPER message board */
#messageScreen {
    left: 43%;
    top: 15.5%;
    width: 26%;
    height: 22%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffcf7a;
    text-shadow: 0 0 6px rgba(255, 180, 80, .8);
    font-family: Georgia, serif;
    font-size: 2vh;
    line-height: 1.25;
    /* live-tilt handle — right edge recedes, so positive rotateY */
    transform: perspective(1100px) rotateY(19deg) rotateX(-2deg) rotate(1deg);
    flex-direction: column;    /* <-- stack children vertically instead of in a row */	
}

/* LOWER spinner panel — five cells across */
#spinnerScreen {
    left: 45%;
    top: 77%;
    width: 24%;
    height: 7.5%;
    display: flex;
    align-items: center;
    transform: perspective(750px) rotateY(10deg) rotateX(3deg) rotate(-3.5deg);
}
.cell {
    flex: 0 0 20%;               /* five cells = 100% */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cell img {
    height: 100%;                /* fill the cell vertically */
    width: auto;                 /* keep the wheel's aspect ratio */
    display: block;
    object-fit: contain;
}

/* debug outline so you can see the screen boxes while tuning */
.debug .screen {
    outline: 2px solid magenta;
}
/* ============================================================
   ON-GLASS SCREEN BUTTON  (Option A)
   Lives inside #messageScreen, so it inherits the screen's
   perspective tilt automatically — reads as painted on the glass.
   Append this to clankisland.css.
   ============================================================ */
.screenBtn {
    display: inline-block;
    margin: 6% 4% 0;
    padding: 4% 8%;
    border: 1px solid #ffcf7a;
    border-radius: 3px;
    color: #ffcf7a;
    font-family: Georgia, serif;
    font-size: 1.8vh;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(255, 180, 80, .8);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.screenBtn:hover {
    background: rgba(255, 180, 80, .15);
    box-shadow: 0 0 12px rgba(255, 180, 80, .6);   /* lights up, powered */
}
.screenBtn:active {
    background: rgba(255, 180, 80, .30);            /* press feedback */
}

/* ============================================================
   BUTTON ROW WRAP
   #messageScreen is flex-direction:column (good for typed lines).
   The end-screen buttons, though, should sit in a horizontal row
   that WRAPS — so two buttons sit side-by-side, and a third
   (the fail branch: Hint + Play Again + Comment) drops to a second
   line only when the glass is too narrow (e.g. a portrait phone),
   while a landscape phone keeps all three on one line.

   The buttons are direct children of the column-flex screen, so a
   run of .screenBtn siblings is coaxed into a wrapping row by
   letting them shrink their vertical margin and flow inline. The
   perspective tilt is inherited from #messageScreen either way.
   ============================================================ */
#messageScreen {
    flex-wrap: wrap;            /* allow children to wrap to a new line */
}
#messageScreen .screenBtn {
    flex: 0 1 auto;            /* size to content, allowed to shrink, then wrap */
}
/* When buttons are present they form a centered, wrapping cluster.
   Tightening the top margin keeps a wrapped second row close. */
.screenBtn {
    margin: 4% 3% 2%;
}

/* ============================================================
   COMMENT BOX
   Swaps in place of the button row inside #messageScreen. Green
   phosphor text on the machine's own dark screen glass — no
   separate box or border, transparent background. Left-justified,
   scrolls INTERNALLY (overflow-y:auto) so a long comment never
   pushes past the glass. A top offset drops the whole box down so
   the label lands ON the dark screen rather than above it on the
   bezel. maxlength caps input at 500. The textarea's native caret
   (recolored green) blinks and tracks the typing position.
   ============================================================ */
.commentBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;                        /* left-justify the stack */
    box-sizing: border-box;
    padding-top: 14%;                               /* drop text down onto the glass */
    padding-left: 10%;                              /* comfortable left inset (tuned) */
}
.commentLabel {
    width: 94%;
    flex: 0 0 auto;
    margin-bottom: 5%;
    color: #33ff66;                                 /* phosphor green */
    font-family: Georgia, serif;
    font-size: 1.3vh;
    line-height: 1.2;
    text-align: left;
    text-shadow: 0 0 5px rgba(51, 255, 102, .8);
}
.commentText {
    width: 94%;
    flex: 1 1 auto;                                 /* fills remaining screen height */
    min-height: 0;                                  /* lets flex item actually shrink */
    background: transparent;                        /* glass shows through */
    color: #33ff66;                                 /* phosphor green */
    border: none;
    outline: none;
    resize: none;
    overflow-y: auto;                               /* text scrolls inside the screen */
    scrollbar-width: none;                          /* hide scrollbar — Firefox */
    -ms-overflow-style: none;                       /* hide scrollbar — old Edge/IE */
    font-family: Georgia, serif;
    font-size: 1.6vh;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-align: left;                               /* left-justified typing */
    text-shadow: 0 0 5px rgba(51, 255, 102, .8);
    caret-color: #aaffbb;                           /* brighter green — caret stands out */
    box-sizing: border-box;
}
/* hide scrollbar — Chrome, Safari, new Edge — while keeping scroll behavior */
.commentText::-webkit-scrollbar {
    display: none;
}
/* honeypot: pushed off-screen, never shown to a human, no tab stop */
.crtHoney {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ============================================================
   GOAT EPITAPH  (level 7 memorial)
   Raised stone lettering on the ending monument. Lighting matches
   the panorama: sun BEHIND the monument, bounce light from the
   bright patch at lower right — so the letter body is the shaded
   face color, the warm highlight kisses the lower-right edges, and
   the cast shadow falls upper-left. Revealed by onIntroComplete()
   adding .revealed; stats lines filled by fillEpitaph().
   ============================================================ */
#goatEpitaph {
    position: fixed;
    left: 50%;
    top: 40%;                        /* tune onto the stone face by eye */
    transform: translate(-50%, -50%);
    z-index: 10;                     /* above the zoom, below curtain (1000) */
    text-align: center;
    font-family: "Arial Black", "Franklin Gothic Heavy", sans-serif;
    font-weight: 900;
    font-size: 3.2vh;
    line-height: 1.7;
    letter-spacing: 0.08em;
    color: #6f6a60;                  /* shaded stone face — sample yours */
    text-shadow:
        1px  1px 1px rgba(255, 250, 235, .40),   /* warm bounce, lower-right */
       -1px -2px 3px rgba(0, 0, 0, .55);          /* cast shadow, upper-left */
    opacity: 0;
    transition: opacity 2.5s ease;   /* same dissolve feel as the ensemble */
    pointer-events: none;
}
#goatEpitaph .epSmall { font-size: 2.2vh; }
#goatEpitaph.revealed { opacity: 1; }

/* debug outline, same convention as .debug .screen above */
.debug #goatEpitaph {
    outline: 2px solid magenta;
}