/* @brief   3d dice roller app stylesheet
   @author  Sarah Rosanna Busch
   @date    10 Aug 2023
   @version 0.1
   */

* {
    box-sizing: border-box; /* padding and border are included in total width/height of all elements */
    margin: 0px;
    font-size: 14pt;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
    margin: 0;
    overflow-x: hidden;
    /* the sheet is now a real <img> inside #sheetLayer (not a body background) so
       the dice overlay can size to the SAME contain-fit box the sheet uses.
       Deep-navy backdrop so the volumetric nebula (nebula.js, #nebula canvas at
       z-index:-2) reads in the margins around the contain-fit parchment. */
    background: radial-gradient(120% 80% at 50% -10%, #20365a 0%, #12233a 45%, #0a1424 100%);
    height: 100vh;
    width: 100vw;
}

header {
    text-align: center;
    color: white;
    padding: 5px;
}

#helpBtn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 1.2rem;
    height: 1.2rem;
    border: none;
    border-radius: 0.6rem;
}

/* ******* DICE ROLLER *********** */

#diceRoller {
    position: absolute;
    top: 0;
    height: calc(100% - 4.5rem);
    width: 100%;
    margin-top: 1.5rem;
    z-index:-1;
    overflow: hidden;
}

#canvas {
    width: 100%;
    height: 100%;
}

/* ************* UI ************* */

#diceRollerUI {
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#diceLimit {
    text-align: center;
    color: red;
    background-color: #050505;
    padding: 0.5rem;
    font-size: 10pt;
    font-weight: bold;
}

.top_field {
    text-align: center;
    width: 100%;
    background-color: rgba(150,150,150,0.1);
}

#textInput { 
    text-align: center;
    border: none;
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(199, 199, 199, 0.7);
    width: 100%;
    text-overflow: ellipsis;
    padding: 0.2em;
    text-decoration: none;
}

#textInput:focus {
    background-color: rgba(255, 255, 255, 0.7);
    outline: none;
}

.center_field {
    position: relative;
    flex: 1;
    text-align: center;
    height: 80%;
    width: 100%;
    z-index: 100;
}

.center_field * {
    position: relative;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 5px 15px;
    user-select: none;
}

#instructions {
    background: none;
    height: 100%;
    width: 100%;
}

#instructions p {
    color: rgb(255, 255, 255);
    background: none;
    margin: auto;
    top: 35%;
    padding: 1em;
}

#numPad { /* container */
    position: absolute;
    width: 200px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.numPad { /* table */
    width: 200px;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
}

.numPad td {
    cursor: pointer;
}

#numPad button {
    padding: 0.5em;
    margin-top: 5px;
    width: 97px;
    border: none;
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
}

.bottom_field {
    position: absolute;
    bottom: 0;
    text-align: center;
    min-height: 3rem;
    background: rgba(0, 0, 0, 0.4);
    width: inherit;
    padding: 0px;
}

#result {
    position: relative;
    display: block;
    min-height: 1.5em;
    bottom: 5px;
    word-spacing: 0.5em;
    color: rgba(255,255,255,0.9);
    padding: 0.5em;
    margin-left: 5px;
    margin-right: 5px;
}

/* === ArcoMage companion overlay: tappable counter dice in the sheet slots === */
#diceRollerUI { display: none; } /* hide the roller UI clutter; the counters replace it */
/* Hide the leftover full-page roller CANVAS - it was painting a transparent-black
   square (its desk plane) over the whole sheet. visibility:hidden keeps its box so
   main.init() can still read its size to set the dice scale; display:none would zero
   the scale and vanish the dice. */
#diceRoller { visibility: hidden; }
/* #sheetLayer wraps an actual <img> of the sheet sized with max-width/max-height
   (true `contain`, whether the viewport limits by WIDTH or HEIGHT). The wrapper
   shrinks to exactly the displayed sheet, so the dice - positioned as % of the
   wrapper - track their wells at ANY viewport shape. */
#sheetLayer {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    line-height: 0; z-index: 5; pointer-events: none;
}
#sheetLayer #sheetImg {
    display: block; max-width: 100vw; max-height: 100vh;
    width: auto; height: auto; pointer-events: none;
}
#sheetLayer .slot {
    position: absolute; transform: translate(-50%, -50%);
    pointer-events: auto; padding: 0; border: 0; background: transparent;
    cursor: pointer; line-height: 0; perspective: 360px;
    -webkit-user-select: none; user-select: none;
}
/* The throw arc (height) + its grounded shadow are driven PER-FRAME in sheet.js
   (translate + drop-shadow), so the rise/fall is smooth - not an instant CSS jump.
   .rolling only lifts z-index so the airborne die clears its neighbours. */
#sheetLayer .slot.rolling { z-index: 6; }

#sheetLayer .slot .die,
#sheetLayer .slot .diecanvas {
    display: block; width: 100%; height: 100%;
    object-fit: contain; pointer-events: none;
    /* resting: die floats a little above the sheet -> small grounded shadow */
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
}
#sheetLayer .slot .diecanvas { position: absolute; left: 0; top: 0; }
#sheetLayer .slot:hover .die {
    filter: drop-shadow(0 0 7px rgba(244, 226, 168, 0.9)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
}
/* Core Resources (top row) + Worker Assignment (2nd row) dice enlarged ~20%. */
#sheetLayer .slot-d20, #sheetLayer .slot-d20life { width: 8.64vh; height: 8.64vh; }
#sheetLayer .slot-d10 { width: 7.2vh; height: 7.2vh; }
#sheetLayer .slot-d6  { width: 7.44vh; height: 7.44vh; }

/* Dice skin picker (combo box) */
.skin-picker {
    position: fixed; top: 12px; left: 12px; z-index: 50;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 8px;
    background: rgba(20, 16, 10, 0.72);
    border: 1px solid #b9892f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    font-family: 'Trebuchet MS', Arial, sans-serif;
}
.skin-picker label {
    color: #e8c887; font-size: 12px; font-weight: bold;
    letter-spacing: .04em; text-transform: uppercase;
}
.skin-picker select {
    background: #f4e8cf; color: #2a1c0e;
    border: 1px solid #b9892f; border-radius: 6px;
    padding: 4px 8px; font-size: 13px; font-weight: bold; cursor: pointer;
}

/* === TURN-TIMER SIZE (one knob) ==========================================
   --tw is the turn-timer widget's width AND its hourglass height; timer.js sizes its
   number, buttons and hint as ratios of it, so this one value resizes the whole widget.
   timer.js SETS --tw at runtime (layoutTimer()): it measures the real space beside the
   sheet and fits the timer to it, between TW_MIN and TW_MAX.

   HARD RULE: the character sheet is ALWAYS full height. It never shrinks to make room.
   If the timer cannot fit beside it at TW_MIN, the TIMER yields - body gets .tw-stack
   and it wraps to a second line underneath. (An earlier version capped the sheet's
   width to reserve a timer column, which shrank the sheet on a narrow window. Wrong
   way round.) */
:root { --tw: 560px; }

/* SIDE-BY-SIDE (default): sheet full-height and centred in the space LEFT of the timer
   column, so it eats the dead space on the left instead of colliding with the timer. */
@media (min-width: 701px) {
    #sheetLayer { left: calc(50% - (var(--tw) + 32px) / 2); }
}

/* STACKED: the timer did not fit beside the sheet, so it drops to a second line.
   The sheet stays FULL HEIGHT (max-height:100vh) and the page scrolls to reach the
   timer. Set by timer.js, not by a media query - the trigger is measured space, not
   viewport width. */
body.tw-stack { height: auto; min-height: 100vh; overflow-y: auto; }
body.tw-stack #sheetLayer {
    position: relative; top: auto; left: auto; transform: none;
    margin: 0 auto; display: block; width: max-content;
}
body.tw-stack #sheetLayer #sheetImg {
    max-height: 100vh; max-width: 100vw; width: auto; height: auto;
}
body.tw-stack #arcoTimer {
    position: relative !important; top: auto !important; left: auto !important;
    right: auto !important; margin: 18px auto 28px !important; cursor: default;
}
body.tw-stack #turnBar { position: static; margin: 0 auto 10px; justify-content: center; }

/* === MOBILE stack: sheet on top, timer centered directly below (normal flow) === */
/* On a phone the sheet is no longer fixed-and-centered; it pins to the top and the
   page is allowed to scroll so the turn-timer widget (timer.js, also un-fixed on
   mobile) sits centered just below it instead of floating over the art. */
@media (max-width: 700px), (pointer: coarse) {
    /* phone: the timer flows below the sheet, so it needs no reserved column - just
       stop it overflowing a narrow screen. */
    :root { --tw: min(560px, 86vw); }
    html, body { height: auto; min-height: 100vh; overflow-y: auto; }
    body {
        display: flex; flex-direction: column; align-items: center;
        width: 100%; padding-bottom: 24px;
    }
    #sheetLayer {
        position: relative; top: auto; left: auto; transform: none;
        margin: 0 auto; width: 100vw; text-align: center;
    }
    #sheetLayer #sheetImg {
        max-width: 100vw; max-height: none; width: 100vw; height: auto; margin: 0 auto;
    }
    /* the counter dice are sized in vh; on a width-limited phone the sheet is short,
       so switch them to viewport-WIDTH units to keep them proportional to the art. */
    /* the mobile sheet is the desktop art zoomed ~7.8% (border cropped), so the dice
       grow the same 5100/4732 factor to keep filling their now-larger printed rings. */
    #sheetLayer .slot-d20, #sheetLayer .slot-d20life { width: 15.52vw; height: 15.52vw; }
    #sheetLayer .slot-d10 { width: 12.94vw; height: 12.94vw; }
    #sheetLayer .slot-d6  { width: 13.37vw; height: 13.37vw; }

    /* New Turn / New Game: on mobile they must NOT float over the timer. Drop them
       into normal flow in their own area directly under the sheet, which pushes the
       timer down below them. Ordered via flex (body is a column on mobile). */
    /* Un-fix BOTH the button bar and the timer here (body-prefixed so these beat the
       later base #turnBar/#arcoTimer rules on source order) - mobile no longer depends
       on the JS-toggled .tw-stack class. Flow order: sheet, then the buttons, then the
       timer, so New Game/New Turn push the timer DOWN instead of floating over it. */
    body #sheetLayer { order: 1; }
    body #turnBar {
        position: static; left: auto; right: auto; bottom: auto; transform: none;
        order: 2; margin: 1.6vh auto 1vh; max-width: 96vw;
        display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 8px;
        padding: 7px 10px;
        background: linear-gradient(180deg, #3c2b17 0%, #291c0d 100%);
        border: 1px solid #7a5a12; border-radius: 13px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 225, 150, 0.12);
    }
    body #arcoTimer {
        position: static; top: auto; left: auto; right: auto; transform: none;
        margin: 1.2vh auto 1.8vh; order: 3;
    }
    /* smaller pills on mobile */
    /* the dice-skin picker is folded INTO #turnBar (status.js) on mobile; strip its own
       fixed panel so there is no double border - it's just the <select> in the bar now. */
    .skin-picker {
        position: static; top: auto; left: auto; margin: 0; padding: 0;
        background: none; border: none; box-shadow: none; gap: 0;
    }
    .skin-picker label { display: none; }
    /* ONE control family: the skin dropdown + both buttons share height, pill radius and
       border so they read as the same UI instead of bolted on at different times. */
    #turnBar .skin-picker select,
    #turnBar #newGameBtn,
    #turnBar #newTurnBtn {
        height: 34px; box-sizing: border-box; margin: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 20px; font-size: 12.5px; border-width: 1.5px;
    }
    #turnBar #newGameBtn, #turnBar #newTurnBtn { padding: 0 15px; }
    #turnBar .skin-picker select { padding: 0 10px; }
}

/* === double-click "Set value" popup === */
.diePopup {
    position: fixed; z-index: 50; min-width: 192px;
    background: #0e1d32; color: #f4e2a8;
    border: 1px solid rgba(230, 205, 130, 0.6); border-radius: 10px;
    padding: 11px 13px 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    font-family: 'Trebuchet MS', Arial, sans-serif;
}
.diePopup .dp-h { font-weight: 800; font-size: 14px; margin: 0 0 9px; color: #f4e2a8; text-transform: uppercase; letter-spacing: 0.05em; }
.diePopup .dp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 7px; }
.diePopup .dp-row span { font-size: 13px; color: #cbd7e6; }
.diePopup input { width: 68px; padding: 5px 8px; border: 1px solid rgba(230, 205, 130, 0.5); border-radius: 6px; background: #07111f; color: #fff; font: inherit; font-size: 14px; text-align: center; }
.diePopup input:focus { outline: none; border-color: #f4e2a8; }
.diePopup .dp-set { width: 100%; margin-top: 5px; padding: 8px; border: 0; border-radius: 7px; background: #f4e2a8; color: #07111f; font-weight: 800; font-size: 14px; cursor: pointer; }
.diePopup .dp-set:hover { background: #ffe9b0; }

/* ============ STATUS EFFECTS layer (status.js) ============ */
/* Invisible, scale-proof hotspots laid over the printed medallions. Positioned as
   % of #sheetLayer (which sizes to the sheet <img>), so they track the art. */
#sheetLayer .stFx-hot {
    position: absolute; transform: none; margin: 0; padding: 0;
    background: transparent; border: 2px solid transparent; border-radius: 50%;
    pointer-events: auto; cursor: pointer; z-index: 8;
    transition: box-shadow .12s ease, border-color .12s ease;
}
#sheetLayer .stFx-hot:hover {
    border-color: rgba(244, 214, 120, 0.95);
    box-shadow: 0 0 0.9vh rgba(255, 210, 90, 0.85), inset 0 0 0.7vh rgba(255, 220, 120, 0.5);
}
#sheetLayer .stFx-hot.is-active {
    border-color: rgba(226, 180, 60, 0.85);
    box-shadow: 0 0 0.7vh rgba(230, 180, 70, 0.7);
}

/* d6 duration counter badged on an active medallion (rendered by dice.js).
   pointer-events:none - the die overlaps the medallion it badges, and while it was
   hit-testable it swallowed the hover for the .stFx-hot hotspot underneath: no gold
   rollover glow, no tooltip. Clicks pass straight through to the hotspot, which
   opens the same popup the die used to, so nothing is lost. */
#sheetLayer .stFx-counter {
    position: absolute; transform: translate(-50%, -50%);
    width: 4.6vh; height: 4.6vh; z-index: 9; pointer-events: none;
    line-height: 0;
    filter: drop-shadow(0 0.3vh 0.4vh rgba(0, 0, 0, 0.6));
}
#sheetLayer .stFx-counter .stFx-die {
    display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
}
#sheetLayer .stFx-counter .stFx-num {
    position: absolute; left: 100%; top: 50%; bottom: auto; transform: translate(0.3vh, -50%);
    min-width: 1.9vh; padding: 0.1vh 0.6vh; text-align: center;
    background: rgba(22, 17, 8, 0.9); color: #f4d688;
    border: 1px solid #c9a24a; border-radius: 0.7vh;
    font: 800 1.7vh/1 Georgia, "Times New Roman", serif;
    white-space: nowrap; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
#sheetLayer .stFx-counter .stFx-num.is-perm { padding: 0.2vh 0.5vh 0.05vh; }
#sheetLayer .stFx-counter .stFx-num.is-perm svg path { stroke: #f4d688; }

/* parchment popup - matches the sheet's cream + gold + dark-blue serif look */
.stFx-popup {
    position: fixed; z-index: 55; width: 268px;
    background: linear-gradient(180deg, #f6eccf 0%, #efe1bd 100%);
    color: #26325c; border: 2px solid #b9922f; border-radius: 12px;
    padding: 13px 15px 14px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    font-family: Georgia, "Times New Roman", serif;
}
.stFx-popup .sp-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.stFx-popup .sp-icon {
    width: 58px; height: 58px; flex: 0 0 58px; object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}
.stFx-popup .sp-name {
    font-size: 19px; font-weight: 800; color: #223a6b; line-height: 1.1;
    letter-spacing: 0.01em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.stFx-popup .sp-desc {
    font-size: 13.5px; line-height: 1.4; color: #3a3524; margin: 0 0 11px;
    border-top: 1px solid rgba(150, 120, 50, 0.4); padding-top: 9px;
}
.stFx-popup .sp-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 0 8px;
}
.stFx-popup .sp-row span { font-size: 14px; font-weight: 700; color: #4a3d1c; }
.stFx-popup .sp-row.is-off span { opacity: 0.45; }
.stFx-popup .sp-turns {
    width: 74px; padding: 6px 8px; border: 1px solid #b9922f; border-radius: 6px;
    background: #fffdf5; color: #26325c; font: 700 15px Georgia, serif; text-align: center;
}
.stFx-popup .sp-turns:focus { outline: none; border-color: #7a5a12; box-shadow: 0 0 0 2px rgba(185, 146, 47, 0.35); }
.stFx-popup .sp-turns:disabled { background: #e6ddc4; color: #9a8f6f; border-color: #cbb784; cursor: not-allowed; }
.stFx-popup .sp-perm { width: 20px; height: 20px; accent-color: #8a6a1a; cursor: pointer; }
.stFx-popup .sp-btns { display: flex; gap: 8px; margin-top: 11px; }
.stFx-popup .sp-confirm {
    flex: 1; padding: 9px; border: 0; border-radius: 8px;
    background: linear-gradient(180deg, #e7c25a, #c99a2e); color: #2a2208;
    font: 800 14px Georgia, serif; cursor: pointer; letter-spacing: 0.03em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.stFx-popup .sp-confirm:hover { background: linear-gradient(180deg, #f2d071, #d9aa38); }
.stFx-popup .sp-remove {
    flex: 0 0 auto; padding: 9px 12px; border: 1px solid #9c5a2a; border-radius: 8px;
    background: #f3e2c6; color: #8a3a1a; font: 700 13px Georgia, serif; cursor: pointer;
}
.stFx-popup .sp-remove:hover { background: #eecfa8; }

/* Turn bar - fixed bottom-centre; holds New Turn + New Game side by side. */
#turnBar {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 45; display: flex; align-items: center; gap: 10px;
}

/* New Turn button - parchment/gold pill (now laid out by #turnBar) */
#newTurnBtn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; cursor: pointer;
    background: linear-gradient(180deg, #f4e2a0 0%, #d9b048 55%, #c69a2f 100%);
    color: #3a2c06; border: 2px solid #7a5a12; border-radius: 26px;
    font: 800 16px Georgia, "Times New Roman", serif; letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    -webkit-user-select: none; user-select: none;
}
#newTurnBtn:hover { background: linear-gradient(180deg, #fbeeb2 0%, #e6bd52 55%, #d0a636 100%); }
#newTurnBtn:active { transform: translateY(1px); }
#newTurnBtn .nt-ico { color: #5a3d0e; }

/* New Game button - same pill, but a cooler "stone" tone so the destructive reset
   reads as secondary next to the primary gold New Turn. */
#newGameBtn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; cursor: pointer;
    background: linear-gradient(180deg, #e4dcc6 0%, #b9ac8c 55%, #9c8d6c 100%);
    color: #2f2a1c; border: 2px solid #6b6047; border-radius: 26px;
    font: 800 16px Georgia, "Times New Roman", serif; letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    -webkit-user-select: none; user-select: none;
}
#newGameBtn:hover { background: linear-gradient(180deg, #f1ead8 0%, #cabd9d 55%, #ad9e7c 100%); }
#newGameBtn:active { transform: translateY(1px); }
#newGameBtn .nt-ico { color: #4e4632; }
#newGameBtn.nt-pulse { animation: ntPulse 0.55s ease-out; }
@keyframes ntPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 90, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5); } 100% { box-shadow: 0 0 0 14px rgba(255, 210, 90, 0), 0 4px 12px rgba(0, 0, 0, 0.5); } }
#newTurnBtn.nt-pulse { animation: ntPulse 0.55s ease-out; }