:root {
    color-scheme: dark;
    --page: #000;
    --canvas: #1c1c1b;
    --text: #e1e1e1;
    --muted: #a8a8a8;
    --link: #e4cf91;
    --line: #565651;
    --bronze: #7f694b;
    :root {
    color-scheme: dark;
    
/* WAPAGE FINAL OVERRIDE */
html,body{margin:0!important;background:#000!important;color:#dedede!important;font:13px/1.22 Arial,Helvetica,sans-serif!important}
.game-shell{position:relative!important;width:min(550px,calc(100% - 2px))!important;min-height:100vh!important;margin:5px auto 0!important;padding:0!important;border-left:2px solid #59462f!important;border-right:2px solid #59462f!important;border-radius:0!important;background:#1c1c1b!important;box-shadow:0 0 0 1px #160f0a,0 0 8px #000!important}
.scroll-header{position:relative!important;height:31px!important;margin:0 -4px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-top:2px ridge #a28d69!important;border-bottom:1px solid #4d4030!important;border-radius:9px 9px 1px 1px!important;background:linear-gradient(#302b24,#171614 48%,#28231d)!important;box-shadow:inset 0 1px 1px rgba(255,235,190,.14),inset 0 -5px 7px rgba(0,0,0,.5),0 2px 2px #080706!important}
.scroll-header:before,.scroll-header:after{content:""!important;position:absolute!important;top:-5px!important;width:20px!important;height:38px!important;border-top:2px ridge #aa9774!important;border-bottom:2px ridge #806b4c!important;border-radius:10px 3px 10px 4px!important;background:linear-gradient(105deg,transparent 0 25%,#9a815c 27%,#34291d 35%,#18130e 50%,#765f41 63%,transparent 68%)!important}
.scroll-header:before{left:-9px!important;transform:skewY(-15deg)!important}.scroll-header:after{right:-9px!important;transform:scaleX(-1) skewY(-15deg)!important}
.brand{color:#e7e7e7!important;font:700 13px/28px Arial,sans-serif!important;text-decoration:none!important;text-shadow:0 1px 2px #000!important}.alpha{display:none!important}
.content{padding:8px 14px 14px!important;background:none!important}.hero-bar{padding:12px 14px 9px!important;background:none!important;border-bottom:1px solid #565651!important}
h1,h2,h3{margin:6px 0 4px!important;color:#ededed!important;font:700 13px Arial,sans-serif!important}p{margin:5px 0!important}
.card{margin:5px 0!important;padding:5px 0 6px!important;border:0!important;border-bottom:1px solid #565651!important;border-radius:0!important;background:none!important;box-shadow:none!important}
.actions{margin:5px 0!important}.actions .button{display:block!important;margin:4px 0!important}
button,.button{display:inline!important;width:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:#e4cf91!important;font:13px/1.2 Arial,sans-serif!important;text-align:left!important;text-decoration:underline!important;box-shadow:none!important}
footer{padding:8px 14px 10px!important;border-top:1px solid #565651!important;background:none!important;color:#9d9d9d!important;font:12px Arial,sans-serif!important;text-align:center!important}

    --page: #000;
    --canvas: #1c1c1b;
    --text: #e1e1e1;
    --muted: #a8a8a8;
    --link: #e4cf91;
    --line: #565651;
    --bronze: #7f694b;
    --bronze-light: #b4a17e;
    --bronze-dark: #2d241a;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); }
body {
    min-height: 100vh;
    margin: 0;
    background: #000;
    color: var(--text);
    font: 13px/1.22 Arial, Helvetica, sans-serif;
}
a { color: var(--link); text-decoration: underline; }
a:hover { color: #fff0b4; }

.game-shell {
    position: relative;
    width: min(550px, calc(100% - 2px));
    min-height: 100vh;
    margin: 5px auto 0;
    border-right: 2px solid #59462f;
    border-left: 2px solid #59462f;
    background: var(--canvas);
    box-shadow:
        0 0 0 1px #160f0a,
        0 0 8px #000;
}

.scroll-header {
    position: relative;
    z-index: 2;
    height: 31px;
    margin: 0 -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 2px ridge #a28d69;
    border-right: 1px solid #806b4c;
    border-bottom: 1px solid #4d4030;
    border-left: 1px solid #806b4c;
    border-radius: 9px 9px 1px 1px;
    background:
        linear-gradient(90deg, rgba(166, 139, 94, .08), transparent 8% 92%, rgba(166, 139, 94, .08)),
        linear-gradient(#302b24 0, #171614 48%, #28231d 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 235, 190, .14),
        inset 0 -5px 7px rgba(0, 0, 0, .5),
        0 2px 2px #080706;
}
.scroll-header::before,
.scroll-header::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 20px;
    height: 38px;
    border-top: 2px ridge #aa9774;
    border-bottom: 2px ridge #806b4c;
    border-radius: 10px 3px 10px 4px;
    background:
        linear-gradient(105deg, transparent 0 25%, #9a815c 27%, #34291d 35%, #18130e 50%, #765f41 63%, transparent 68%);
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 1px 2px #000;
}
.scroll-header::before {
    left: -9px;
    transform: skewY(-15deg);
}
.scroll-header::after {
    right: -9px;
    transform: scaleX(-1) skewY(-15deg);
}
.brand {
    color: #e7e7e7;
    font-size: 13px;
    font-weight: 700;
    line-height: 28px;
    text-decoration: none;
    text-shadow: 0 1px 2px #000;
}
.alpha { display: none; }

.hero-bar {
    padding: 12px 14px 9px;
    border-bottom: 1px solid var(--line);
    background: transparent;
}
.hero-line {
    margin: 0 0 3px;
    color: #e8e8e8;
    font-size: 13px;
}
.hero-line strong { font-weight: 700; }
.hero-line span, .mini-avatar { display: none; }

.meter {
    position: relative;
    width: 102px;
    height: 11px;
    margin: 1px 0;
    overflow: hidden;
    border: 1px solid #8e8e8e;
    background: #0a0a0a;
    box-shadow: inset 0 0 3px #000;
}
.meter i { display: block; height: 100%; }
.meter b {
    position: absolute;
    inset: -1px 0 0;
    color: #fff;
    font-size: 8px;
    font-weight: 400;
    line-height: 10px;
    text-align: center;
    text-shadow: 1px 1px #000;
}
.hp i { background: linear-gradient(#ff5652 0 45%, #d90000 48% 100%); }
.mp i { background: linear-gradient(#1da9ff 0 45%, #0066c4 48% 100%); }
.exp i { background: linear-gradient(#dfc9ef 0 42%, #85639b 48% 100%); }

.content { padding: 8px 14px 14px; }
h1, h2, h3 {
    margin: 6px 0 4px;
    color: #ededed;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}
h1 { font-size: 13px; }
h2 { font-size: 13px; }
h3 { font-size: 13px; }
p { margin: 5px 0; }
.welcome { margin-top: 3px; }
.section-title { margin: 0 0 4px; font-weight: 700; }
.wap-separator {
    height: 1px;
    margin: 8px 0;
    background: var(--line);
}
.muted { color: var(--muted); }
.gold { color: #e5c97f; }
.danger-text { color: #ff6f72; }

.card {
    margin: 5px 0;
    padding: 5px 0 6px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.card-title { color: #f0f0f0; font-weight: 700; }
.actions { display: block; margin: 5px 0; }
.actions .button { display: block; margin: 4px 0; }

.race-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    margin: 7px 0 9px;
}
.race-preview {
    min-width: 0;
    color: #c7b88f;
    font-size: 9px;
    text-align: center;
}
.race-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: 2px;
    border: 1px solid #6e5a3e;
    border-radius: 0;
    object-fit: cover;
    object-position: top;
    background: #080808;
}
.portrait-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 9px;
    align-items: start;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
}
.portrait-card > img {
    width: 72px;
    height: 91px;
    border: 1px solid #745f42;
    object-fit: cover;
    object-position: top;
}

label {
    display: block;
    margin: 7px 0 2px;
    color: #d0c5ae;
}
input, select {
    width: min(290px, 100%);
    padding: 4px 5px;
    border: 1px solid #6b645b;
    border-radius: 0;
    outline: 0;
    background: #090909;
    color: #e4e4e4;
    font: 13px Arial, sans-serif;
}
input:focus, select:focus { border-color: #aa9066; }

button, .button {
    display: inline;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--link);
    font: 13px/1.2 Arial, sans-serif;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none;
}
button:hover, .button:hover,
.button.secondary, .button.danger, button.danger {
    border: 0;
    background: none;
    color: #fff0b4;
}
form .actions button,
.actions button {
    display: inline-block;
    margin-top: 3px;
}
.inline-form { display: inline; }

.notice {
    margin: 7px 15px 0;
    padding: 5px 7px;
    border: 1px solid #70644e;
    border-radius: 0;
    background: #25231f;
}
.notice.success { color: #b9dca2; }
.notice.error { border-color: #733b39; color: #efaaa5; }
.notice.info { color: #dfca94; }

.battle-log {
    margin: 8px 0;
    padding: 5px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: none;
}
.enemy { display: flex; align-items: center; gap: 7px; }
.enemy-icon { font-size: 28px; line-height: 1; }
.enemy .meter { width: 102px; }
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin: 6px 0;
    border-top: 1px solid #3d3d3b;
}
.stats div {
    padding: 4px 3px;
    border: 0;
    border-bottom: 1px solid #3d3d3b;
    background: none;
}
.item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

footer {
    padding: 8px 14px 10px;
    border-top: 1px solid var(--line);
    background: transparent;
    color: #9d9d9d;
    font-size: 12px;
    text-align: center;
}
footer nav {
    display: block;
    margin-bottom: 4px;
}
footer nav::before { content: "- "; color: #aaa; }
footer nav::after { content: " -"; color: #aaa; }
footer nav a + a::before {
    content: " | ";
    color: #ddd;
    text-decoration: none;
}
.link-button {
    color: #aaa;
    font-size: 11px;
}

@media (max-width: 560px) {
    .game-shell {
        width: calc(100% - 2px);
        margin-top: 5px;
    }
    .content, .hero-bar, footer {
        padding-right: 13px;
        padding-left: 13px;
    }
    .notice {
        margin-right: 13px;
        margin-left: 13px;
    }
}
--bronze-light: #b4a17e;
    --bronze-dark: #2d241a;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); }
body {
    min-height: 100vh;
    margin: 0;
    background: #000;
    color: var(--text);
    font: 13px/1.22 Arial, Helvetica, sans-serif;
}
a { color: var(--link); text-decoration: underline; }
a:hover { color: #fff0b4; }

.game-shell {
    position: relative;
    width: min(550px, calc(100% - 2px));
    min-height: 100vh;
    margin: 5px auto 0;
    border-right: 2px solid #59462f;
    border-left: 2px solid #59462f;
    background: var(--canvas);
    box-shadow:
        0 0 0 1px #160f0a,
        0 0 8px #000;
}

.scroll-header {
    position: relative;
    z-index: 2;
    height: 31px;
    margin: 0 -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 2px ridge #a28d69;
    border-right: 1px solid #806b4c;
    border-bottom: 1px solid #4d4030;
    border-left: 1px solid #806b4c;
    border-radius: 9px 9px 1px 1px;
    background:
        linear-gradient(90deg, rgba(166, 139, 94, .08), transparent 8% 92%, rgba(166, 139, 94, .08)),
        linear-gradient(#302b24 0, #171614 48%, #28231d 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 235, 190, .14),
        inset 0 -5px 7px rgba(0, 0, 0, .5),
        0 2px 2px #080706;
}
.scroll-header::before,
.scroll-header::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 20px;
    height: 38px;
    border-top: 2px ridge #aa9774;
    border-bottom: 2px ridge #806b4c;
    border-radius: 10px 3px 10px 4px;
    background:
        linear-gradient(105deg, transparent 0 25%, #9a815c 27%, #34291d 35%, #18130e 50%, #765f41 63%, transparent 68%);
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 1px 2px #000;
}
.scroll-header::before {
    left: -9px;
    transform: skewY(-15deg);
}
.scroll-header::after {
    right: -9px;
    transform: scaleX(-1) skewY(-15deg);
}
.brand {
    color: #e7e7e7;
    font-size: 13px;
    font-weight: 700;
    line-height: 28px;
    text-decoration: none;
    text-shadow: 0 1px 2px #000;
}
.alpha { display: none; }

.hero-bar {
    padding: 12px 14px 9px;
    border-bottom: 1px solid var(--line);
    background: transparent;
}
.hero-line {
    margin: 0 0 3px;
    color: #e8e8e8;
    font-size: 13px;
}
.hero-line strong { font-weight: 700; }
.hero-line span, .mini-avatar { display: none; }

.meter {
    position: relative;
    width: 102px;
    height: 11px;
    margin: 1px 0;
    overflow: hidden;
    border: 1px solid #8e8e8e;
    background: #0a0a0a;
    box-shadow: inset 0 0 3px #000;
}
.meter i { display: block; height: 100%; }
.meter b {
    position: absolute;
    inset: -1px 0 0;
    color: #fff;
    font-size: 8px;
    font-weight: 400;
    line-height: 10px;
    text-align: center;
    text-shadow: 1px 1px #000;
}
.hp i { background: linear-gradient(#ff5652 0 45%, #d90000 48% 100%); }
.mp i { background: linear-gradient(#1da9ff 0 45%, #0066c4 48% 100%); }
.exp i { background: linear-gradient(#dfc9ef 0 42%, #85639b 48% 100%); }

.content { padding: 8px 14px 14px; }
h1, h2, h3 {
    margin: 6px 0 4px;
    color: #ededed;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}
h1 { font-size: 13px; }
h2 { font-size: 13px; }
h3 { font-size: 13px; }
p { margin: 5px 0; }
.welcome { margin-top: 3px; }
.section-title { margin: 0 0 4px; font-weight: 700; }
.wap-separator {
    height: 1px;
    margin: 8px 0;
    background: var(--line);
}
.muted { color: var(--muted); }
.gold { color: #e5c97f; }
.danger-text { color: #ff6f72; }

.card {
    margin: 5px 0;
    padding: 5px 0 6px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.card-title { color: #f0f0f0; font-weight: 700; }
.actions { display: block; margin: 5px 0; }
.actions .button { display: block; margin: 4px 0; }

.race-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    margin: 7px 0 9px;
}
.race-preview {
    min-width: 0;
    color: #c7b88f;
    font-size: 9px;
    text-align: center;
}
.race-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: 2px;
    border: 1px solid #6e5a3e;
    border-radius: 0;
    object-fit: cover;
    object-position: top;
    background: #080808;
}
.portrait-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 9px;
    align-items: start;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
}
.portrait-card > img {
    width: 72px;
    height: 91px;
    border: 1px solid #745f42;
    object-fit: cover;
    object-position: top;
}

label {
    display: block;
    margin: 7px 0 2px;
    color: #d0c5ae;
}
input, select {
    width: min(290px, 100%);
    padding: 4px 5px;
    border: 1px solid #6b645b;
    border-radius: 0;
    outline: 0;
    background: #090909;
    color: #e4e4e4;
    font: 13px Arial, sans-serif;
}
input:focus, select:focus { border-color: #aa9066; }

button, .button {
    display: inline;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--link);
    font: 13px/1.2 Arial, sans-serif;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none;
}
button:hover, .button:hover,
.button.secondary, .button.danger, button.danger {
    border: 0;
    background: none;
    color: #fff0b4;
}
form .actions button,
.actions button {
    display: inline-block;
    margin-top: 3px;
}
.inline-form { display: inline; }

.notice {
    margin: 7px 15px 0;
    padding: 5px 7px;
    border: 1px solid #70644e;
    border-radius: 0;
    background: #25231f;
}
.notice.success { color: #b9dca2; }
.notice.error { border-color: #733b39; color: #efaaa5; }
.notice.info { color: #dfca94; }

.battle-log {
    margin: 8px 0;
    padding: 5px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: none;
}
.enemy { display: flex; align-items: center; gap: 7px; }
.enemy-icon { font-size: 28px; line-height: 1; }
.enemy .meter { width: 102px; }
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin: 6px 0;
    border-top: 1px solid #3d3d3b;
}
.stats div {
    padding: 4px 3px;
    border: 0;
    border-bottom: 1px solid #3d3d3b;
    background: none;
}
.item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

footer {
    padding: 8px 14px 10px;
    border-top: 1px solid var(--line);
    background: transparent;
    color: #9d9d9d;
    font-size: 12px;
    text-align: center;
}
footer nav {
    display: block;
    margin-bottom: 4px;
}
footer nav::before { content: "- "; color: #aaa; }
footer nav::after { content: " -"; color: #aaa; }
footer nav a + a::before {
    content: " | ";
    color: #ddd;
    text-decoration: none;
}
.link-button {
    color: #aaa;
    font-size: 11px;
}

@media (max-width: 560px) {
    .game-shell {
        width: calc(100% - 2px);
        margin-top: 5px;
    }
    .content, .hero-bar, footer {
        padding-right: 13px;
        padding-left: 13px;
    }
    .notice {
        margin-right: 13px;
        margin-left: 13px;
    }
}
:root {
    color-scheme: dark;
    --bg: #070706;
    --panel: #191815;
    --panel-2: #211e19;
    --text: #e8e1d3;
    --muted: #a59c8c;
    --gold: #d1af68;
    --bronze: #786143;
    --bronze-dark: #3c3022;
    --danger: #db5147;
    --success: #70a84e;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    background:
        radial-gradient(circle at 50% -20%, #33281b 0, transparent 38rem),
        repeating-linear-gradient(135deg, #090908 0, #090908 7px, #080807 7px, #080807 14px);
    color: var(--text);
    font: 15px/1.45 Arial, Helvetica, sans-serif;
}
a { color: #e1c27d; text-decoration: none; }
a:hover { color: #ffe2a0; }

.game-shell {
    width: min(580px, 100%);
    min-height: 100vh;
    margin: 0 auto;
    border-left: 1px solid var(--bronze-dark);
    border-right: 1px solid var(--bronze-dark);
    background: rgba(20, 19, 17, .97);
    box-shadow: 0 0 60px #000;
}

.scroll-header {
    position: relative;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 3px double #9b815b;
    border-bottom: 3px double #715a3d;
    background: linear-gradient(#332b22, #171411 45%, #292219);
    box-shadow: inset 0 0 14px #000, 0 4px 16px #000;
}
.scroll-header::before,
.scroll-header::after {
    content: "";
    position: absolute;
    top: -7px;
    width: 18px;
    height: calc(100% + 8px);
    border: 2px solid #9c815a;
    border-radius: 50%;
    background: linear-gradient(90deg, #2d251c, #8a724f 45%, #211a14);
    box-shadow: inset 0 0 5px #000;
}
.scroll-header::before { left: -7px; }
.scroll-header::after { right: -7px; }
.brand {
    color: #f1e7d2;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .5px;
    text-shadow: 0 2px 2px #000;
}
.alpha {
    position: absolute;
    right: 22px;
    padding: 2px 6px;
    border: 1px solid #71603f;
    border-radius: 4px;
    color: #bfa978;
    font-size: 9px;
}

.hero-bar, .content, footer { padding: 13px 15px; }
.hero-bar {
    border-bottom: 1px solid #514739;
    background: #11110f;
}
.hero-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
}
.hero-line strong { display: flex; align-items: center; gap: 7px; }
.mini-avatar {
    width: 29px;
    height: 29px;
    border: 1px solid #8d744e;
    border-radius: 3px;
    object-fit: cover;
    object-position: top;
}
.hero-line span { color: var(--muted); }

.meter {
    position: relative;
    height: 14px;
    margin: 3px 0;
    overflow: hidden;
    border: 1px solid #6b6257;
    background: #0c0c0c;
    box-shadow: inset 0 0 4px #000;
}
.meter i { display: block; height: 100%; }
.meter b {
    position: absolute;
    inset: -1px 0 0;
    text-align: center;
    color: white;
    font-size: 10px;
    line-height: 14px;
    text-shadow: 0 1px 2px #000;
}
.hp i { background: linear-gradient(#f04946, #a51414); }
.mp i { background: linear-gradient(#2f9ce5, #075aab); }
.exp i { background: linear-gradient(#9e7bc3, #5d3d7c); }

h1, h2, h3 { font-family: Georgia, serif; color: #eee4d0; }
h1 { margin: 2px 0 12px; font-size: 21px; }
h2 { margin: 14px 0 9px; font-size: 17px; }
h3 { margin: 10px 0 6px; font-size: 15px; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
.gold { color: #eccb78; }
.danger-text { color: #ef7770; }

.card {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid #544938;
    border-radius: 5px;
    background: linear-gradient(135deg, #24211c, #171614);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, .35);
}
.card-title { color: #f0dfbb; font-weight: 700; }
.actions { display: grid; gap: 8px; margin-top: 12px; }

.race-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin: 12px 0;
}
.race-preview {
    min-width: 0;
    text-align: center;
    color: #cdbb9e;
    font-size: 10px;
}
.race-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: 3px;
    border: 1px solid #69563c;
    border-radius: 3px;
    object-fit: cover;
    object-position: top;
    background: #0a0908;
}
.portrait-card {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    align-items: start;
}
.portrait-card > img {
    width: 90px;
    height: 115px;
    border: 1px solid #806845;
    object-fit: cover;
    object-position: top;
}

label { display: block; margin: 10px 0 4px; color: #c9bda9; }
input, select {
    width: 100%;
    padding: 10px;
    border: 1px solid #655541;
    border-radius: 4px;
    outline: 0;
    background: #0e0e0d;
    color: var(--text);
    font: inherit;
}
input:focus, select:focus { border-color: #b6945f; box-shadow: 0 0 0 2px #443720; }
button, .button {
    display: inline-block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #a17c43;
    border-radius: 4px;
    background: linear-gradient(#76572f, #493419);
    color: #fff2d3;
    font: 700 14px Arial, sans-serif;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 1px #ba9760, 0 2px 5px #000;
}
button:hover, .button:hover { background: linear-gradient(#89683b, #574020); color: #fff; }
.button.secondary { border-color: #595146; background: linear-gradient(#3a3731, #24221e); }
.button.danger, button.danger { border-color: #9c463d; background: linear-gradient(#813c35, #4f211d); }
.inline-form { display: inline; }

.notice {
    margin: 10px 15px 0;
    padding: 9px 11px;
    border-radius: 4px;
    border: 1px solid;
}
.notice.success { border-color: #527b3e; background: #1d3218; color: #bde3a8; }
.notice.error { border-color: #853c37; background: #391b19; color: #f2aaa4; }
.notice.info { border-color: #6b5a38; background: #30291c; color: #e8cf9b; }

.battle-log {
    margin: 10px 0;
    padding: 10px;
    border-left: 3px solid #7e6744;
    background: #100f0d;
}
.enemy { display: flex; align-items: center; gap: 10px; }
.enemy-icon { font-size: 34px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stats div { padding: 7px; border: 1px solid #403a31; background: #12110f; }

.item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dotted #4a4134;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #504435;
    background: #0d0d0c;
    color: #7f786d;
    font-size: 12px;
}
footer nav { display: flex; flex-wrap: wrap; gap: 11px; }
.link-button {
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #a89a82;
    font-size: 12px;
}

@media (max-width: 420px) {
    body { font-size: 14px; }
    .game-shell { border: 0; }
    .content, .hero-bar, footer { padding-left: 11px; padding-right: 11px; }
    .notice { margin-left: 11px; margin-right: 11px; }
    .alpha { right: 16px; }
    .race-grid { gap: 3px; }
    .race-preview { font-size: 9px; }
}

/* WAPAGE FINAL OVERRIDE */
html,body{margin:0!important;background:#000!important;color:#dedede!important;font:13px/1.22 Arial,Helvetica,sans-serif!important}
.game-shell{position:relative!important;width:min(550px,calc(100% - 2px))!important;min-height:100vh!important;margin:5px auto 0!important;padding:0!important;border-left:2px solid #59462f!important;border-right:2px solid #59462f!important;border-radius:0!important;background:#1c1c1b!important;box-shadow:0 0 0 1px #160f0a,0 0 8px #000!important}
.scroll-header{position:relative!important;height:31px!important;margin:0 -4px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-top:2px ridge #a28d69!important;border-bottom:1px solid #4d4030!important;border-radius:9px 9px 1px 1px!important;background:linear-gradient(#302b24,#171614 48%,#28231d)!important;box-shadow:inset 0 1px 1px rgba(255,235,190,.14),inset 0 -5px 7px rgba(0,0,0,.5),0 2px 2px #080706!important}
.scroll-header:before,.scroll-header:after{content:""!important;position:absolute!important;top:-5px!important;width:20px!important;height:38px!important;border-top:2px ridge #aa9774!important;border-bottom:2px ridge #806b4c!important;border-radius:10px 3px 10px 4px!important;background:linear-gradient(105deg,transparent 0 25%,#9a815c 27%,#34291d 35%,#18130e 50%,#765f41 63%,transparent 68%)!important}
.scroll-header:before{left:-9px!important;transform:skewY(-15deg)!important}.scroll-header:after{right:-9px!important;transform:scaleX(-1) skewY(-15deg)!important}
.brand{color:#e7e7e7!important;font:700 13px/28px Arial,sans-serif!important;text-decoration:none!important;text-shadow:0 1px 2px #000!important}.alpha{display:none!important}
.content{padding:8px 14px 14px!important;background:none!important}.hero-bar{padding:12px 14px 9px!important;background:none!important;border-bottom:1px solid #565651!important}
h1,h2,h3{margin:6px 0 4px!important;color:#ededed!important;font:700 13px Arial,sans-serif!important}p{margin:5px 0!important}
.card{margin:5px 0!important;padding:5px 0 6px!important;border:0!important;border-bottom:1px solid #565651!important;border-radius:0!important;background:none!important;box-shadow:none!important}
.actions{margin:5px 0!important}.actions .button{display:block!important;margin:4px 0!important}
button,.button{display:inline!important;width:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:#e4cf91!important;font:13px/1.2 Arial,sans-serif!important;text-align:left!important;text-decoration:underline!important;box-shadow:none!important}
footer{padding:8px 14px 10px!important;border-top:1px solid #565651!important;background:none!important;color:#9d9d9d!important;font:12px Arial,sans-serif!important;text-align:center!important}


/* WAPAGE FINAL OVERRIDE */
html,body{margin:0!important;background:#000!important;color:#dedede!important;font:13px/1.22 Arial,Helvetica,sans-serif!important}
.game-shell{position:relative!important;width:min(550px,calc(100% - 2px))!important;min-height:100vh!important;margin:5px auto 0!important;padding:0!important;border-left:2px solid #59462f!important;border-right:2px solid #59462f!important;border-radius:0!important;background:#1c1c1b!important;box-shadow:0 0 0 1px #160f0a,0 0 8px #000!important}
.scroll-header{position:relative!important;height:31px!important;margin:0 -4px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-top:2px ridge #a28d69!important;border-bottom:1px solid #4d4030!important;border-radius:9px 9px 1px 1px!important;background:linear-gradient(#302b24,#171614 48%,#28231d)!important;box-shadow:inset 0 1px 1px rgba(255,235,190,.14),inset 0 -5px 7px rgba(0,0,0,.5),0 2px 2px #080706!important}
.scroll-header:before,.scroll-header:after{content:""!important;position:absolute!important;top:-5px!important;width:20px!important;height:38px!important;border-top:2px ridge #aa9774!important;border-bottom:2px ridge #806b4c!important;border-radius:10px 3px 10px 4px!important;background:linear-gradient(105deg,transparent 0 25%,#9a815c 27%,#34291d 35%,#18130e 50%,#765f41 63%,transparent 68%)!important}
.scroll-header:before{left:-9px!important;transform:skewY(-15deg)!important}.scroll-header:after{right:-9px!important;transform:scaleX(-1) skewY(-15deg)!important}
.brand{color:#e7e7e7!important;font:700 13px/28px Arial,sans-serif!important;text-decoration:none!important;text-shadow:0 1px 2px #000!important}.alpha{display:none!important}
.content{padding:8px 14px 14px!important;background:none!important}.hero-bar{padding:12px 14px 9px!important;background:none!important;border-bottom:1px solid #565651!important}
h1,h2,h3{margin:6px 0 4px!important;color:#ededed!important;font:700 13px Arial,sans-serif!important}p{margin:5px 0!important}
.card{margin:5px 0!important;padding:5px 0 6px!important;border:0!important;border-bottom:1px solid #565651!important;border-radius:0!important;background:none!important;box-shadow:none!important}
.actions{margin:5px 0!important}.actions .button{display:block!important;margin:4px 0!important}
button,.button{display:inline!important;width:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:#e4cf91!important;font:13px/1.2 Arial,sans-serif!important;text-align:left!important;text-decoration:underline!important;box-shadow:none!important}
footer{padding:8px 14px 10px!important;border-top:1px solid #565651!important;background:none!important;color:#9d9d9d!important;font:12px Arial,sans-serif!important;text-align:center!important}