/**
 * Tower of Destiny — Touch Controls CSS
 *
 * Only shown on touch-capable devices (JS adds the overlay; it is absent
 * entirely on desktop so no performance cost).
 *
 * Layout
 * ──────
 * #tod-touch-overlay covers the full viewport (top/bottom/left/right: 0) with
 * pointer-events:none so it does not block taps on the game canvas.
 * Each cluster (.tod-tc-dpad and .tod-tc-right-col) is position:absolute inside
 * the overlay, defaulting to the bottom corners, and can be freely dragged to
 * any position — horizontally AND vertically — via long-press drag or the
 * dedicated ⋮⋮ drag handle.
 * Positions are saved to localStorage and restored on next load.
 *
 * Safe areas
 * ──────────
 * Default bottom positions use env(safe-area-inset-bottom) so buttons clear the
 * iPad/iPhone home indicator bar on initial placement.
 */

/* ── Overlay container — full viewport, transparent to touches ─────────────── */
#tod-touch-overlay {
    position:       fixed;
    top:            0;
    bottom:         0;
    left:           0;
    right:          0;
    z-index:        9000;
    pointer-events: none;
}

/* ── Drag handle — sits above each cluster, tap-and-drag to reposition ─────── */
.tod-tc-drag-handle {
    pointer-events:         auto;
    grid-column:            1 / -1;   /* span all columns in the dpad grid */
    width:                  100%;
    height:                 22px;
    display:                flex;
    align-items:            center;
    justify-content:        center;
    cursor:                 grab;
    touch-action:           none;
    user-select:            none;
    -webkit-user-select:    none;
    -webkit-touch-callout:  none;
    border-radius:          6px 6px 0 0;
    background:             rgba( 10, 10, 10, 0.55 );
    border:                 1px solid rgba( 200, 134, 10, 0.35 );
    border-bottom:          none;
    margin-bottom:          2px;
}
.tod-tc-drag-handle::before {
    content:      '⋮⋮';
    font-size:    0.85rem;
    color:        rgba( 200, 134, 10, 0.6 );
    letter-spacing: 3px;
}
.tod-tc-drag-handle:active {
    background: rgba( 200, 134, 10, 0.2 );
    cursor:     grabbing;
}

/* ── D-pad cluster — default: bottom-left corner ───────────────────────────── */
.tod-tc-dpad {
    position:              absolute;
    bottom:                calc( 12px + env( safe-area-inset-bottom, 0px ) );
    left:                  12px;
    display:               grid;
    grid-template-columns: repeat( 3, 48px );
    grid-template-rows:    auto repeat( 3, 48px );
    gap:                   4px;
    pointer-events:        none;
}

/* ── Right column (toggle + nav + action cluster) — default: bottom-right ──── */
.tod-tc-right-col {
    position:       absolute;
    bottom:         calc( 12px + env( safe-area-inset-bottom, 0px ) );
    right:          12px;
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    pointer-events: none;
}
.tod-tc-right-col .tod-tc-drag-handle {
    border-radius: 6px 6px 0 0;
    margin-bottom: 2px;
}

/* ── Right-column header row: toggle + nav button ───────────────────────────── */
.tod-tc-right-header {
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin-bottom:   4px;
    pointer-events:  none;
}

/* ── Action cluster (4 × 4 grid) — inside .tod-tc-right-col ────────────────── */
.tod-tc-actions {
    display:               grid;
    grid-template-columns: repeat( 4, 48px );
    grid-template-rows:    repeat( 4, 48px );
    gap:                   4px;
    pointer-events:        none;
}

/* Fade out when a game overlay (inventory, spellbook, etc.) is open */
#tod-touch-overlay.tod-tc-obscured {
    opacity:        0.15;
    pointer-events: none;
}

/* ── Shared button base ──────────────────────────────────────────────────────── */
.tod-tc-btn {
    pointer-events: auto;
    display:        flex;
    align-items:    center;
    justify-content: center;
    width:          48px;
    height:         48px;
    background:     rgba( 10, 10, 10, 0.72 );
    border:         1px solid rgba( 200, 134, 10, 0.55 );
    border-radius:  8px;
    color:          #c8a050;
    font-size:      1.2rem;
    line-height:    1;
    cursor:         pointer;
    user-select:    none;
    -webkit-user-select: none;
    touch-action:   none;
    transition:     background 0.08s ease, border-color 0.08s ease, transform 0.06s ease;
    box-shadow:     0 2px 8px rgba( 0, 0, 0, 0.6 );
    /* Prevent iOS callout on long-press */
    -webkit-touch-callout: none;
}

.tod-tc-btn:active,
.tod-tc-btn.tod-tc-btn--active {
    background:    rgba( 200, 134, 10, 0.35 );
    border-color:  #c8860a;
    transform:     scale( 0.92 );
    box-shadow:    0 0 10px rgba( 200, 134, 10, 0.5 );
}

/* Disabled state — staircase button when not on a staircase */
.tod-tc-btn.tod-tc-btn--disabled,
.tod-tc-btn:disabled {
    opacity:        0.35;
    pointer-events: none;
    cursor:         default;
    border-color:   rgba( 200, 134, 10, 0.2 );
}

/* Attack button (centre cell of D-pad) — gold accent */
#tc-atk {
    background:   rgba( 200, 134, 10, 0.15 );
    border-color: rgba( 200, 134, 10, 0.7 );
    font-size:    1.1rem;
    color:        #f0d080;
}

/* ── Toggle button ──────────────────────────────────────────────────────────── */
#tod-tc-toggle {
    pointer-events:  auto;
    position:        static;
    background:      rgba( 10, 10, 10, 0.65 );
    border:          1px solid rgba( 200, 134, 10, 0.4 );
    border-radius:   50%;
    width:           34px;
    height:          34px;
    font-size:       0.95rem;
    color:           rgba( 200, 134, 10, 0.7 );
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    touch-action:    manipulation;
    -webkit-touch-callout: none;
    user-select:     none;
    -webkit-user-select: none;
    flex-shrink:     0;
}

#tod-tc-toggle.tod-tc-toggle--hidden {
    opacity: 0.45;
}

/* ── Nav button (site navigation — PWA only) ────────────────────────────────── */
#tod-tc-nav-btn {
    pointer-events:  auto;
    position:        static;
    background:      rgba( 10, 10, 10, 0.65 );
    border:          1px solid rgba( 200, 134, 10, 0.4 );
    border-radius:   50%;
    width:           34px;
    height:          34px;
    font-size:       0.95rem;
    color:           rgba( 200, 134, 10, 0.7 );
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    touch-action:    manipulation;
    -webkit-touch-callout: none;
    user-select:     none;
    -webkit-user-select: none;
    flex-shrink:     0;
}

/* ── Tablet landscape: slightly larger buttons ──────────────────────────────── */
@media ( min-width: 768px ) and ( orientation: landscape ) {
    .tod-tc-btn {
        width:  54px;
        height: 54px;
        font-size: 1.3rem;
    }
    .tod-tc-dpad {
        grid-template-columns: repeat( 3, 54px );
        grid-template-rows:    auto repeat( 3, 54px );
        gap: 5px;
    }
    .tod-tc-actions {
        grid-template-columns: repeat( 4, 54px );
        grid-template-rows:    repeat( 4, 54px );
        gap: 5px;
    }
    #tod-tc-toggle,
    #tod-tc-nav-btn {
        width:  38px;
        height: 38px;
    }
}

/* ── Tablet portrait: slightly smaller buttons ──────────────────────────────── */
@media ( max-width: 767px ), ( orientation: portrait ) {
    .tod-tc-btn {
        width:  44px;
        height: 44px;
        font-size: 1.1rem;
    }
    .tod-tc-dpad {
        grid-template-columns: repeat( 3, 44px );
        grid-template-rows:    auto repeat( 3, 44px );
        gap: 3px;
    }
    .tod-tc-actions {
        grid-template-columns: repeat( 4, 44px );
        grid-template-rows:    repeat( 4, 44px );
        gap: 3px;
    }
    #tod-tc-toggle,
    #tod-tc-nav-btn {
        width:  30px;
        height: 30px;
        font-size: 0.85rem;
    }
}

/* ── Standalone PWA mode ────────────────────────────────────────────────────── */
@media ( display-mode: standalone ) {
    /* No override needed — clusters are absolutely positioned within the overlay */
}

/* ── Drag-to-reposition: dragging state ─────────────────────────────────────── */
.tod-tc-dragging {
    opacity:    0.85;
    cursor:     grabbing;
    box-shadow: 0 0 0 2px rgba( 200, 134, 10, 0.9 ),
                0 0 18px rgba( 200, 134, 10, 0.55 );
    border-radius: 10px;
    transform:  scale( 1.04 );
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    z-index:    99999 !important;
    pointer-events: auto;
}

.tod-tc-dpad,
.tod-tc-right-col {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* ── Help button ────────────────────────────────────────────────────────────── */
#tod-tc-help-btn {
    pointer-events:  auto;
    position:        static;
    background:      rgba( 10, 10, 10, 0.65 );
    border:          1px solid rgba( 200, 134, 10, 0.4 );
    border-radius:   50%;
    width:           34px;
    height:          34px;
    color:           rgba( 200, 134, 10, 0.85 );
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    touch-action:    manipulation;
    -webkit-touch-callout: none;
    user-select:     none;
    -webkit-user-select: none;
    flex-shrink:     0;
    transition:      background 0.15s ease, border-color 0.15s ease;
}
#tod-tc-help-btn:active,
#tod-tc-help-btn:hover {
    background:    rgba( 30, 20, 5, 0.85 );
    border-color:  rgba( 240, 180, 30, 0.75 );
    color:         #f0d080;
}
#tod-tc-help-btn svg {
    display: block;
    flex-shrink: 0;
}

@media ( min-width: 768px ) and ( orientation: landscape ) {
    #tod-tc-help-btn { width: 38px; height: 38px; }
}
@media ( max-width: 767px ), ( orientation: portrait ) {
    #tod-tc-help-btn { width: 30px; height: 30px; }
    #tod-tc-help-btn svg { width: 15px; height: 15px; }
}

/* ── Controls reference modal ───────────────────────────────────────────────── */
#tod-tc-help-modal {
    position:        fixed;
    inset:           0;
    z-index:         999999;
    background:      rgba( 0, 0, 0, 0.72 );
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    opacity:         0;
    transition:      opacity 0.2s ease;
    touch-action:    manipulation;
}
#tod-tc-help-modal.tod-tc-help-modal--visible {
    opacity: 1;
}

.tod-tc-help-inner {
    background:    linear-gradient( 160deg, #1a1208 0%, #0e0c07 100% );
    border:        1px solid rgba( 200, 134, 10, 0.55 );
    border-radius: 12px;
    box-shadow:    0 8px 40px rgba( 0, 0, 0, 0.85 ),
                   0 0 0 1px rgba( 200, 134, 10, 0.15 ) inset;
    padding:       20px 22px 16px;
    max-width:     min( 92vw, 420px );
    width:         min( 92vw, 420px );
    max-height:    76vh;
    overflow-y:    auto;
    overscroll-behavior: contain;
    pointer-events: auto;
}

.tod-tc-help-title {
    font-family:   'Cinzel', 'Georgia', serif;
    font-size:     1.05rem;
    font-weight:   700;
    color:         #f0d080;
    text-align:    center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin:        0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba( 200, 134, 10, 0.3 );
    text-shadow:   0 0 12px rgba( 240, 180, 30, 0.35 );
}

.tod-tc-help-list {
    list-style:  none;
    margin:      0;
    padding:     0;
    display:     flex;
    flex-direction: column;
    gap:         2px;
}

.tod-tc-help-row {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       7px 6px;
    border-radius: 6px;
    transition:    background 0.1s ease;
}
.tod-tc-help-row:nth-child( odd ) {
    background: rgba( 255, 255, 255, 0.03 );
}

.tod-tc-help-icon {
    width:           34px;
    height:          34px;
    min-width:       34px;
    background:      rgba( 10, 10, 10, 0.6 );
    border:          1px solid rgba( 200, 134, 10, 0.3 );
    border-radius:   7px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.1rem;
    color:           rgba( 240, 200, 80, 0.9 );
    flex-shrink:     0;
}
.tod-tc-help-icon svg {
    width:  18px;
    height: 18px;
    stroke: rgba( 240, 200, 80, 0.85 );
}

.tod-tc-help-text {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

.tod-tc-help-label {
    font-family:    'Cinzel', 'Georgia', serif;
    font-size:      0.78rem;
    font-weight:    700;
    color:          #e8c860;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.tod-tc-help-desc {
    font-size:   0.75rem;
    color:       rgba( 210, 195, 160, 0.85 );
    line-height: 1.35;
}

.tod-tc-help-dismiss {
    margin:         0;
    text-align:     center;
    font-size:      0.7rem;
    color:          rgba( 180, 160, 110, 0.65 );
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;   /* clicks fall through to backdrop */
    flex-shrink:    0;
}

/* ── Extra-actions drawer button ─────────────────────────────────────────── */
#tod-tc-drawer-btn {
    pointer-events:  auto;
    position:        static;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    padding:         0;
    background:      rgba( 10, 10, 10, 0.65 );
    border:          1px solid rgba( 200, 134, 10, 0.4 );
    border-radius:   50%;
    color:           rgba( 200, 134, 10, 0.85 );
    cursor:          pointer;
    touch-action:    manipulation;
    flex-shrink:     0;
    -webkit-touch-callout: none;
    user-select:     none;
    -webkit-user-select: none;
    transition:      background 0.15s ease, border-color 0.15s ease;
}
#tod-tc-drawer-btn:active,
#tod-tc-drawer-btn.tod-tc-drawer-btn--active {
    background:   rgba( 30, 20, 5, 0.85 );
    border-color: rgba( 240, 180, 30, 0.75 );
    color:        #f0d080;
}
#tod-tc-drawer-btn svg {
    display:     block;
    flex-shrink: 0;
    pointer-events: none;
}

@media ( min-width: 768px ) and ( orientation: landscape ) {
    #tod-tc-drawer-btn { width: 38px; height: 38px; }
}
@media ( max-width: 767px ), ( orientation: portrait ) {
    #tod-tc-drawer-btn { width: 30px; height: 30px; }
    #tod-tc-drawer-btn svg { width: 15px; height: 15px; }
}

/* ── Sliding extra-actions drawer ────────────────────────────────────────── */
#tod-tc-drawer {
    display:               grid;
    grid-template-columns: repeat( 4, 1fr );
    gap:                   4px;
    width:                 100%;
    overflow:              hidden;
    max-height:            0;
    opacity:               0;
    pointer-events:        none;
    transition:            max-height 0.22s ease, opacity 0.18s ease, padding 0.18s ease;
    padding:               0 2px;
    box-sizing:            border-box;
}
#tod-tc-drawer.tod-tc-drawer--open {
    max-height:     220px;
    opacity:        1;
    pointer-events: auto;
    padding:        4px 2px;
}
/* Drawer buttons inherit .tod-tc-btn sizing but fill the grid cell */
#tod-tc-drawer .tod-tc-btn {
    width:  100%;
    height: 48px;
}
@media ( min-width: 768px ) and ( orientation: landscape ) {
    #tod-tc-drawer .tod-tc-btn { height: 54px; }
}
@media ( max-width: 767px ), ( orientation: portrait ) {
    #tod-tc-drawer .tod-tc-btn { height: 44px; }
}