body {
    margin: 0;
    padding: 0;
    background: #efe3c2;
    color: #2d2416;
    font: 16px/1.9 Georgia, "Times New Roman", serif;
}

body.theme-dark {
    background: #171411;
    color: #f3eadb;
}

.wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 12px;
}

.box,
.panel {
    border: 1px solid #7f6a45;
    background: #fff8e8;
    padding: 12px;
    margin-bottom: 12px;
}

body.theme-dark .box,
body.theme-dark .panel {
    border-color: #5c5246;
    background: #27221d;
}

.panel {
    background: #fffaf0;
}

body.theme-dark .panel {
    background: #302923;
}

h1,
h2 {
    margin: 0 0 10px 0;
    color: #2d2416;
    font-weight: bold;
    line-height: 1.35;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
}

body.theme-dark h1,
body.theme-dark h2 {
    color: #fbf4e8;
}

p {
    margin: 0 0 10px 0;
}

.story {
    white-space: pre-wrap;
}

.story-paragraph {
    margin: 0 0 10px 0;
    text-indent: 2em;
    line-height: 1.8;
    text-align: justify;
    word-break: break-word;
}

.field {
    margin-bottom: 10px;
}

label {
    display: block;
    margin-bottom: 4px;
}

input {
    width: 100%;
    padding: 6px 4px;
    border: 1px solid #7f6a45;
    background: #ffffff;
    color: #2d2416;
    font: 16px Arial, sans-serif;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body.theme-dark input {
    border-color: #6f6559;
    background: #151210;
    color: #f8f0e4;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #6b5534;
    background: #d9bf8c;
    color: #2d2416;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    margin-right: 8px;
    margin-bottom: 8px;
}

body.theme-dark .btn {
    border-color: #8a775f;
    background: #5a4d3b;
    color: #fbf4e8;
}

.option-btn {
    display: block;
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid #6b5534;
    background: #e8d4a7;
    color: #2d2416;
    text-align: left;
    font: 15px Arial, sans-serif;
}

body.theme-dark .option-btn {
    border-color: #71685c;
    background: #342d27;
    color: #f8f0e4;
}

.error {
    padding: 8px;
    border: 1px solid #a94442;
    background: #fbe3e4;
    color: #8a1f11;
}

body.theme-dark .error {
    border-color: #8f5151;
    background: #3b2424;
    color: #f4cbcb;
}

.success {
    padding: 8px;
    border: 1px solid #4f8a10;
    background: #e6efc2;
    color: #264409;
}

body.theme-dark .success {
    border-color: #557d41;
    background: #243520;
    color: #d7efca;
}

.notice {
    padding: 8px;
    border: 1px solid #b59b56;
    background: #f5edc7;
    color: #6b5534;
}

body.theme-dark .notice {
    border-color: #8b7544;
    background: #392f1f;
    color: #efdcab;
}

.muted {
    color: #6f5b3f;
    font-size: 14px;
}

body.theme-dark .muted {
    color: #cdbfa8;
}

.hint {
    color: #6f5b3f;
    font-size: 13px;
}

body.theme-dark .hint {
    color: #cdbfa8;
}

.links {
    margin-top: 12px;
}

.inline-action-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.profile-action-bar {
    margin-top: 6px;
}

.profile-action-bar .btn,
.profile-action-bar .inline-action-form {
    display: inline-block;
    vertical-align: top;
}

.profile-action-bar .inline-action-form .btn {
    margin-right: 8px;
    margin-bottom: 8px;
}

.line {
    padding: 4px 0;
    border-bottom: 1px dashed #cdb78a;
}

body.theme-dark .line {
    border-bottom-color: #4f473e;
}

.line-last {
    border-bottom: 0;
}

.balance {
    font-size: 24px;
    font-weight: bold;
    color: #7a3f00;
}

body.theme-dark .balance {
    color: #ffd27a;
}

.disabled-btn {
    background: #cbbda0 !important;
    color: #75664f !important;
}

body.theme-dark .disabled-btn {
    background: #51483f !important;
    color: #bcae99 !important;
}

.same-tone-box {
    background: #fff8e8;
}

body.theme-dark .same-tone-box {
    background: #27221d;
}

.info-grid {
    overflow: hidden;
    margin-top: 8px;
}

.info-grid-item {
    float: left;
    width: 48%;
    margin-right: 4%;
    margin-bottom: 10px;
}

.info-grid-item-even {
    margin-right: 0;
}

.balance-log-item {
    padding-top: 8px;
    padding-bottom: 8px;
}

.balance-log-row {
    overflow: hidden;
    margin-bottom: 4px;
}

.balance-log-row:last-child {
    margin-bottom: 0;
}

.balance-log-left {
    float: left;
    width: 58%;
}

.balance-log-right {
    float: right;
    width: 40%;
    text-align: right;
}

.meta-grid {
    overflow: hidden;
    margin-bottom: 8px;
}

.meta-item {
    float: left;
    width: 48%;
    margin-right: 4%;
    margin-bottom: 10px;
}

.meta-item-even {
    margin-right: 0;
}

.meta-label {
    display: block;
    color: #6f5b3f;
    font-size: 13px;
    margin-bottom: 2px;
}

body.theme-dark .meta-label {
    color: #d8cab4;
}

.meta-value {
    display: block;
    color: #2d2416;
    font-weight: bold;
    font-size: 16px;
    word-break: break-all;
}

body.theme-dark .meta-value {
    color: #fbf4e8;
}

.quest-title {
    font-size: 18px;
    font-weight: bold;
    color: #7a3f00;
    margin-bottom: 8px;
}

body.theme-dark .quest-title {
    color: #ffd27a;
}

.quest-label {
    font-weight: bold;
}

.quest-meta-grid {
    margin-top: 10px;
    margin-bottom: 0;
}

.profile-panel {
    margin-top: 4px;
}

.profile-head {
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #d7c59b;
}

body.theme-dark .profile-head {
    border-bottom-color: #4f473e;
}

.profile-name {
    font-size: 20px;
    font-weight: bold;
    color: #5c4520;
    margin-bottom: 2px;
}

body.theme-dark .profile-name {
    color: #f1ddb3;
}

.profile-sub {
    color: #7a6340;
    font-size: 14px;
    margin: 0;
}

body.theme-dark .profile-sub {
    color: #cbbca5;
}

.profile-meta-grid {
    margin-bottom: 4px;
}

.profile-foot {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed #d7c59b;
}

body.theme-dark .profile-foot {
    border-top-color: #4f473e;
}

.profile-foot p {
    margin-bottom: 4px;
}

.profile-foot p:last-child {
    margin-bottom: 0;
}

.action-grid {
    overflow: hidden;
    margin-top: 8px;
}

.action-grid-btn {
    float: left;
    width: 48%;
    margin-right: 4%;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.action-grid-btn-last {
    margin-right: 0;
}

.history-card {
    border: 1px solid #cdb78a;
    background: #fffdf6;
    padding: 10px;
    margin-top: 12px;
    margin-bottom: 12px;
}

body.theme-dark .history-card {
    border-color: #61574b;
    background: #2f2923;
}

.history-head {
    overflow: hidden;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #d8c69b;
}

body.theme-dark .history-head {
    border-bottom-color: #4f473e;
}

.history-round {
    float: left;
    font-weight: bold;
    color: #503c21;
    font-size: 16px;
}

body.theme-dark .history-round {
    color: #fbf4e8;
}

.history-time {
    float: right;
    color: #8a7757;
    font-size: 13px;
}

body.theme-dark .history-time {
    color: #c7b8a3;
}

.history-block {
    margin-bottom: 10px;
}

.history-block-last {
    margin-bottom: 0;
}

.history-choice-block,
.history-options-block,
.history-summary-block {
    padding-top: 8px;
    border-top: 1px dashed #ded0ab;
}

body.theme-dark .history-choice-block,
body.theme-dark .history-options-block,
body.theme-dark .history-summary-block {
    border-top-color: #4f473e;
}

.history-toggle-bar {
    overflow: hidden;
    margin-bottom: 4px;
}

.history-section-title {
    margin-bottom: 6px;
    color: #7a6340;
    font-size: 14px;
    font-weight: bold;
}

body.theme-dark .history-section-title {
    color: #e5d5be;
}

.history-label {
    margin-bottom: 4px;
    color: #7a6340;
    font-size: 14px;
    font-weight: bold;
    float: left;
}

body.theme-dark .history-label {
    color: #e5d5be;
}

.history-toggle-link {
    float: right;
    color: #8a6f3d;
    font-size: 13px;
    text-decoration: none;
}

body.theme-dark .history-toggle-link {
    color: #f1d8a5;
}

.history-toggle-link:active,
.history-toggle-link:hover {
    text-decoration: underline;
}

.history-story {
    color: #2d2416;
    font-size: 16px;
}

body.theme-dark .history-story {
    color: #f8f0e4;
}

.history-choice {
    padding: 6px 8px;
    border: 1px solid #d0bc8e;
    background: #f7efd8;
    color: #4a3718;
    font-weight: bold;
    font-size: 15px;
}

body.theme-dark .history-choice {
    border-color: #7a705f;
    background: #3c352e;
    color: #f8f0e4;
}

.history-options {
    border: 1px solid #e0d2ad;
    background: #fcf7ea;
}

body.theme-dark .history-options {
    border-color: #655d50;
    background: #26211c;
}

.history-option-row {
    padding: 6px 8px;
    border-bottom: 1px dashed #dfd1a8;
    color: #5a4930;
    font-size: 15px;
}

body.theme-dark .history-option-row {
    border-bottom-color: #4f473e;
    color: #e6d9c3;
}

.history-options .history-option-row-last,
.history-options .history-option-row-last:last-child,
.history-options .history-option-row:last-child {
    border-bottom: 0;
}

.history-summary {
    color: #6b5a40;
    line-height: 1.7;
    font-size: 15px;
}

body.theme-dark .history-summary {
    color: #d8cbb8;
}

.history-collapsed {
    display: none;
}

.history-meta-foot {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px dashed #e1d5b5;
    color: #9a8663;
    font-size: 13px;
    line-height: 1.6;
}

body.theme-dark .history-meta-foot {
    border-top-color: #4f473e;
    color: #c4b6a2;
}

.current-round-card {
    margin-bottom: 12px;
}

.current-options-list {
    margin-top: 4px;
}

.current-option-btn {
    overflow: hidden;
    padding: 10px;
    border: 1px solid #d7c59b;
    background: #f8f1de;
    margin-bottom: 8px;
}

.current-option-id {
    float: left;
    width: 28px;
    font-weight: bold;
    color: #7a5d2f;
    font-size: 16px;
}

.current-option-text {
    display: block;
    margin-left: 34px;
    color: #3b2d16;
    line-height: 1.6;
    text-align: left;
    font-size: 16px;
}

.mini-history-row {
    overflow: hidden;
    padding: 6px 0;
    border-bottom: 1px dashed #dfd1a8;
}

.mini-history-row:last-child {
    border-bottom: 0;
}

.character-row {
    overflow: hidden;
    padding: 8px 0;
    border-bottom: 1px dashed #dfd1a8;
}

.character-row:last-child {
    border-bottom: 0;
}

.mini-history-round {
    float: left;
    width: 82px;
    color: #7a6340;
    font-size: 16px;
    font-weight: bold;
}

.mini-history-text {
    display: block;
    margin-left: 88px;
    color: #4b3b21;
    line-height: 1.6;
    font-size: 15px;
}

.game-page .history-round {
    font-size: 15px;
}

.game-page .history-time {
    font-size: 12px;
}

.game-page .history-section-title {
    font-size: 13px;
}

.game-page .story-paragraph {
    font-size: 16px;
    line-height: 1.85;
}

.game-page .current-option-btn {
    padding: 9px;
}

body.theme-dark .game-page .current-option-btn {
    border-color: #736244;
    background: #3a3228;
}

.game-page .current-option-id {
    display: inline-block;
    width: 24px;
    font-size: 16px;
    line-height: 1.6;
    vertical-align: top;
    float: none;
}

body.theme-dark .game-page .current-option-id {
    color: #efc46d;
}

.game-page .current-option-text {
    display: inline-block;
    width: 84%;
    margin-left: 0;
    font-size: 15px;
    line-height: 1.6;
    vertical-align: top;
}

body.theme-dark .game-page .current-option-text {
    color: #f1e3c6;
}

.game-page .mini-history-round {
    width: 80px;
    font-size: 15px;
}

body.theme-dark .game-page .mini-history-round {
    color: #ddc59d;
}

.game-page .mini-history-text {
    margin-left: 80px;
    font-size: 14px;
    line-height: 1.6;
}

body.theme-dark .game-page .mini-history-text {
    color: #e7d7b7;
}

.character-name-col {
    float: left;
    width: 92px;
    color: #6f5530;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
    min-height: 48px;
    display: block;
    padding-top: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body.theme-dark .character-name-col {
    color: #efc46d;
}

.character-info-col {
    margin-left: 100px;
}

.character-role-line {
    color: #4b3b21;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 4px 0;
}

body.theme-dark .character-role-line {
    color: #f1e3c6;
}

.character-row-sub {
    margin: 0 0 4px 0;
}

.character-stats-line {
    margin: 0;
}

.state-update-grid {
    overflow: hidden;
    margin-top: 2px;
}

.history-state-update-block {
    padding-top: 8px;
    border-top: 1px dashed #ded0ab;
}

body.theme-dark .history-state-update-block {
    border-top-color: #4f473e;
}

.state-update-item {
    float: left;
    width: 30.66%;
    margin-right: 4%;
    margin-bottom: 6px;
    padding: 5px 8px;
    border: 1px dashed #ddcfaf;
    background: #fcf8ee;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.state-update-item-third {
    margin-right: 0;
}

.state-update-label {
    display: block;
    color: #8a7757;
    font-size: 11px;
    margin-bottom: 1px;
}

.state-update-value {
    display: block;
    color: #5a4930;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
}

body.theme-dark .state-update-item {
    border-color: #575042;
    background: #2b261f;
}

body.theme-dark .state-update-label {
    color: #bdae96;
}

body.theme-dark .state-update-value {
    color: #ddd0b7;
}

.game-pending-panel {
    padding: 10px;
    border: 1px dashed #d4c39f;
    background: #fbf4e3;
    margin-top: 8px;
}

.game-pending-title {
    color: #5b4622;
    font-weight: bold;
    margin-bottom: 4px;
}

body.theme-dark .game-pending-panel {
    border-color: #6a5b47;
    background: #312a23;
}

body.theme-dark .game-pending-title {
    color: #f1dfb4;
}