/*
 * Modern T4.6 presentation layer.
 *
 * The local 29c89d54 package stays responsible for all game art and sprite
 * coordinates. This stylesheet modernises spacing, hierarchy and interactive
 * states without moving map, village or battle-game coordinates.
 */
:root {
    --t4-surface: #fffdf8;
    --t4-surface-muted: #f4eee4;
    --t4-line: #d7c6ae;
    --t4-ink: #342d28;
    --t4-muted: #75685c;
    --t4-green: #4f8f18;
    --t4-green-dark: #356a0d;
    --t4-focus: #f1bd37;
    --t4-radius: 8px;
}

body,
button,
input,
select,
textarea {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}

/* Main content retains the game's frame artwork but uses one readable content
 * hierarchy in marketplace, alliance, quest, profile and report views. */
#content .content,
#content .contentInner,
#content .contentContainer,
#content .roundedCornersBox,
.dialogV2 .dialogContents,
.dialogV1 .dialogContents {
    color: var(--t4-ink);
}

#content .roundedCornersBox,
#content .boxes .box,
#content .contentBox {
    border-color: var(--t4-line);
    border-radius: var(--t4-radius);
    box-shadow: 0 1px 2px rgba(56, 39, 22, .08);
}

#content h1,
#content h2,
#content h3,
.dialogWrapper .title {
    color: #4e392e;
    letter-spacing: -.015em;
}

/* Navigation stays within the current-pack geometry while gaining a distinct,
 * framed active state. It prevents the visual collision caused by legacy tabs. */
#content .contentNavi.subNavi {
    border: 1px solid rgba(77, 53, 37, .42);
    border-radius: var(--t4-radius);
    box-shadow: 0 2px 6px rgba(53, 35, 21, .18);
    overflow: hidden;
}

#content .contentNavi.subNavi .scrollingContainer .content a,
#content .contentNavi.subNavi .container .content .tabItem {
    font-weight: 700;
    letter-spacing: .005em;
}

#content .contentNavi.subNavi .container.active .tabItem,
#content .contentNavi.subNavi .scrollingContainer .content a.active {
    color: #fff9e9;
}

/* Form controls need a predictable, accessible state whether rendered by an
 * old PHP template or by the current Ajax interface. */
#content input[type="text"],
#content input[type="number"],
#content input[type="password"],
#content select,
#content textarea,
.dialogWrapper input[type="text"],
.dialogWrapper input[type="number"],
.dialogWrapper select,
.dialogWrapper textarea {
    border-color: #cbb99d;
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(63, 43, 27, .10);
}

#content input:focus-visible,
#content select:focus-visible,
#content textarea:focus-visible,
.dialogWrapper input:focus-visible,
.dialogWrapper select:focus-visible,
.dialogWrapper textarea:focus-visible,
#content a:focus-visible,
#content button:focus-visible,
.dialogWrapper button:focus-visible {
    outline: 3px solid var(--t4-focus);
    outline-offset: 2px;
}

/* Village, auction, alliance and report data all use tables. The current-pack
 * resource/troop/status images remain untouched, while rows become easier to
 * scan on wide and narrow displays. */
#content table {
    border-color: var(--t4-line);
}

#content table th {
    color: #4a392f;
    background-color: #f3eadc;
}

#content table td,
#content table th {
    border-color: #dfd1bf;
}

#content table tr:nth-child(even) td {
    background-color: rgba(247, 242, 234, .58);
}

/* Current sidebar art remains intact; align headings and links from legacy
 * server templates with the current T4.6 widget language. */
.sidebar .sidebarBox .boxTitle,
.sidebar .sidebarBox .header .boxTitle {
    color: #523d31;
    font-weight: 800;
    letter-spacing: .025em;
}

.sidebar .sidebarBox .content {
    color: var(--t4-ink);
}

.sidebar .sidebarBox .content a:not(.layoutButton) {
    color: var(--t4-green-dark);
    font-weight: 650;
}

/* Icon controls need feedback even when a historical template provides only a
 * sprite. No button text or click target is changed here. */
.layoutButton.buttonFramed,
.iconButton.buttonFramed {
    transition: filter 140ms ease, transform 140ms ease;
}

.layoutButton.buttonFramed:hover,
.iconButton.buttonFramed:hover {
    filter: brightness(1.07);
}

.layoutButton.buttonFramed:active,
.iconButton.buttonFramed:active {
    transform: translateY(1px);
}

/* Current payment and quest wrappers are responsive. Prevent old fixed-width
 * child elements from leaking beyond their dialogs. */
#content .paymentFeaturesLegacy,
#content .paymentFeatures,
#content .questWrapper,
#content .hero_auction,
#content .marketplace {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 820px) {
    #content .contentNavi.subNavi {
        border-radius: 6px;
    }

    #content .contentNavi.subNavi .scrollingContainer .content a,
    #content .contentNavi.subNavi .container .content .tabItem {
        font-size: 12px;
    }
}