html, body {
}



#storypage {
	background-image: url('/img/whitepaper.jpg');
	margin-left: 60px;
	margin-right: 60px;
	min-height: 100vh;
}

#page {
/*
	position: relative;
	width: 500px;
	padding-right: 50px;
	max-width: 600px;
	*/
	margin-right: 246px;
	left: 0px;
	top: 0px;
	font-size: 1.4em;
	padding: 10px;
	padding-left: 0px;
}

#fixedmapscontainer {
	position: absolute;
	top: 0px;
	right: 60px;
	width: 228px;
}
#fixedmaps {
/*
float: right;
	margin-left: 620px;
	*/
	position: fixed;
	padding-top: 16px;
	border-left: 3px solid black;
	padding-left: 12px;
	padding-right: 12px;
	height: 2000px;
	background-image: url('/img/whitepaper.jpg');
}

#introtext {
	font-size: .78em;
	margin-left: 80px;
}


.story-divider {
	background-repeat: no-repeat;
	background-size: 480;
	background-image: url(../img/divider1.png);
	background-position: 40px 0px;
	height: 50px;
}

.paragraphblock
{
	padding-top: 10px;
}

#contentdiv .paragraph,
#page .paragraph
{
	margin-top: 5px;
	padding-left: 80px;
	overflow-wrap: break-word;
	word-wrap: break-word;
/*	color: #666666;*/
}

#contentdiv .first-paragraph .paragraph:first-letter,
#page .first-paragraph .paragraph:first-letter
{
	float: left;
	font-family: DutchInitialsnormal;
	font-size:71pt;
	text-transform: uppercase;
}
/* except when it's a tag
these styles are the same as .hltop in texttransformer.css
*/
#contentdiv .first-paragraph .paragraph span.hltop:first-letter,
#page .first-paragraph .paragraph span.hltop:first-letter
{
	float: none;
	font-family: 'Caudex';
	font-size: 1em;
}

#contentdiv .editingparagraph,
#page .editingparagraph
{
	margin-top: 5px;
	min-height: 100px;
	margin-left: 80px;
	color: #333333;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Textarea styling for paragraph editing — transparent bg, solid border, Caudex */
#page textarea.paragraph.editingparagraph {
	display: block;
	margin-left: 80px;
	min-height: 120px;
	width: calc(100% - 120px);
	padding: 6px;
	font-family: 'Caudex';
	font-size: 14pt;
	line-height: 1.4;
	color: #224455;
	border: 1px solid black;
	background-color: transparent;
	box-sizing: border-box;
	resize: vertical;
}

.paragraph-type-form {
	clear: both;
	margin: 8px 40px 8px 80px;
}

.empty-paragraph-marker {
	font-family: 'Metamorphous';
	font-size: 48px;
	color: #b0a878;
	padding: 24px 0 24px 80px;
}



#contentdiv .adventureintro,
#page .adventureintro
{
	font-size: .76em;
	font-family: FloranteatLauraRegular;
}


#rlm {
	cursor: pointer;
}

#floorplan {
	 background-image: url('/img/tile1.jpg');
	 border: 1px solid #111111;
}

.threadinput
{
	color: #888888;
}

.threadmessage
{
	margin: 2px;
	color: #1B27C4;
	font-weight: bold;
	background-color: white;
	font-family: TimesNewRoman;
	font-size: 9pt;
	padding-left:6px;
	padding-right:6px;
	padding-top: 2px;
	padding-bottom: 2px;
	border-radius: 10px;
	border: 2px solid #1B27C4;
}

/* Challenge thread UI */
.threadtop {
	margin-top: 25px;
	padding-left: 40px;
	clear: both;
}
.threadbuttons {
	margin-top: 8px;
}
button.threadbutton {
	margin-top: 4px;
	margin-right: 8px;
	margin-bottom: 4px;
	display: inline-block;
	padding: 4px 12px;
	font-family: 'Caudex', serif;
	font-size: 10pt;
	cursor: pointer;
	background-color: #1B27C4;
	color: #ffffff;
	border: none;
	border-radius: 4px;
}
button.threadbutton:hover {
	background-color: #0e1a9e;
}
button.threadbutton:disabled {
	opacity: 0.5;
	cursor: default;
}
.threadentry {
	font-family: 'Caudex', serif;
	font-size: 12pt;
	margin-top: 8px;
	margin-bottom: 8px;
}
.threadentryusername {
	position: relative;
	top: -4px;
	color: #111111;
	margin: 2px;
	margin-right: 5px;
	margin-bottom: 7px;
	font-weight: bold;
	background-color: #eeeeee;
	border-radius: 6px;
	font-family: 'Caudex';
	font-size: .76em;
	padding: 2px 8px 4px 8px;
}
.threadentryusername_player {
	background-color: #86a2cc;
}
.threadentryusername_dm {
	background-color: #cca487;
}
.threadentryusername:after {
	content: ':';
}
.threadannotation {
	position: relative;
	top: -4px;
	margin: 2px;
	margin-bottom: 7px;
	color: #404040;
	font-weight: bold;
	background-color: #eeeeee;
	font-size: 9pt;
	padding: 2px 6px;
	border-radius: 6px;
	font-family: 'Caudex';
	border: 2px solid #404040;
}
.threadannotation_player {
	background-color: #86a2cc;
	margin-right: 80px;
}
.threadannotation_dm {
	background-color: #cca487;
	margin-left: 40px;
	margin-right: 80px;
}
.threadannotationusername {
	font-size: 1.2em;
	color: #111111;
}
.threadannotationusername:after {
	content: ': ';
}
.removed {
	text-decoration: line-through;
	opacity: .5;
}
.threadfinishmsg {
	margin-top: 8px;
	margin-bottom: 8px;
	font-family: 'Caudex', serif;
	font-size: 9pt;
	color: #666;
}
.battleparagraph {
	padding-left: 40px;
	padding-right: 40px;
	font-family: 'Caudex', serif;
	font-size: 12pt;
}
.battleparagraph div {
	margin-top: 20px;
	margin-bottom: 20px;
}
.threadinputarea {
	margin-top: 10px;
	margin-bottom: 10px;
}
.threadinputarea textarea {
	width: 100%;
	max-width: 400px;
	font-family: 'Caudex', serif;
	font-size: 11pt;
	padding: 6px;
	border: 1px solid #999;
	border-radius: 4px;
	resize: vertical;
}
textarea.challenge-input {
	display: block;
	width: calc(100% - 80px);
	max-width: none;
	min-height: 80px;
	padding: 8px;
	font-family: 'Caudex', serif;
	font-size: 12pt;
	line-height: 1.4;
	border: 1px dashed #999;
	background-color: transparent;
	resize: vertical;
	box-sizing: border-box;
}
textarea.challenge-input.comment-input {
	min-height: 50px;
	font-size: 10pt;
}
.book-heading {
	font-family: 'Metamorphous', serif;
	font-size: 1.8em;
	margin-top: 40px;
	margin-bottom: 12px;
	padding-left: 40px;
	font-weight: normal;
	letter-spacing: 0.04em;
}
.chapter-heading {
	font-family: 'Metamorphous', serif;
	font-size: 1.2em;
	margin-top: 28px;
	margin-bottom: 8px;
	padding-left: 40px;
	font-weight: normal;
	letter-spacing: 0.03em;
}
.dmnotes {
	margin-bottom: 15px;
	font-size: 10pt;
	color: #666;
	font-style: italic;
	font-family: 'Caudex', serif;
}
.protagonist-ref {
	margin-bottom: 10px;
	font-family: 'Caudex', serif;
	font-size: 22px;
}
.protagonist-ref a {
	color: #1B27C4;
	text-decoration: none;
}
.protagonist-ref a:hover {
	text-decoration: underline;
}

/* Challenge entry with inline scores */
.challenge-entry {
	display: flex;
	align-items: flex-start;
	margin-top: 8px;
	margin-bottom: 8px;
}
.challenge-entry-text {
	flex: 1;
	font-family: 'Caudex', serif;
	font-size: 12pt;
	line-height: 1.5;
	position: relative;
	border: 2px solid #999;
	border-radius: 6px;
	padding: 16px 16px 10px 16px;
	margin-top: 12px;
}
.challenge-entry-text_player {
	border-color: #86a2cc;
}
.challenge-entry-text_dm {
	border-color: #cca487;
}
/* Position: your own entries go right, others stay flush left */
.challenge-entry-text_mine {
	margin-left: 40px;
}
.challenge-entry-text_theirs {
	margin-right: 40px;
}
/* When used inside challenge-entry-text, the username is a pill straddling the top border */
.challenge-entry-text .threadentryusername {
	position: absolute;
	left: 15px;
	top: -11px;
	margin: 0;
}
.challenge-entry-text .threadentryusername:after {
	content: '';
}
.challenge-entry-scores {
	width: 60px;
	margin-left: 12px;
	margin-top: 26px;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
/* For "theirs" entries, the text box has a 40px right-margin. Visually shift
   the score chart left so the gap from the text box is consistent, without
   changing the flex layout (which would widen the text box). */
.challenge-entry-text_theirs + .challenge-entry-scores {
	position: relative;
	left: -40px;
}
.challenge-entry-total {
	font-family: 'Caudex', serif;
	font-size: 9pt;
	color: #1B27C4;
	font-weight: bold;
	width: 22px;
	text-align: right;
}

/* Score widget */
.battle-score-total {
	font-family: 'Caudex', serif;
	font-size: 9pt;
	font-weight: bold;
	color: #1B27C4;
}
.score-widget {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.score-widget-bar {
	height: 3px;
	border-radius: 1px;
	min-width: 1px;
}

/* Battle UI */
.battlestartprompt {
	margin-bottom: 6px;
	color: #404040;
	font-weight: bold;
	font-size: 11pt;
	font-family: 'Caudex';
}
.actionedit {
	width: 100%;
	max-width: 400px;
	font-family: 'Caudex', serif;
	font-size: 12pt;
	padding: 6px;
	border: 1px solid #999;
	border-radius: 4px;
	resize: vertical;
}
.actioncombo {
	margin-top: 10px;
	margin-bottom: 15px;
}
.actioncombo select {
	font-family: 'Caudex', serif;
	font-size: 11pt;
	padding: 4px;
}
.battledone {
	display: inline-block;
	margin-bottom: 30px;
}
.waitmessage {
	margin-top: 10px;
	color: #1B27C4;
	font-weight: bold;
	font-family: 'Caudex';
	font-size: 9pt;
}

/* Paragraph type indicator button */
.indicator {
	padding: 4px 8px;
	font-family: 'Caudex', serif;
	font-size: 11pt;
	border: 1px solid #999;
}

.challenge
{
	cursor: pointer;
	background-color: #ffbbbb;
}
.battle
{
	cursor: pointer;
	background-color: #ff7777;
}
.passthrough
{
	cursor: pointer;
	background-color: #ffffff;
}
.exitwinning
{
	cursor: pointer;
	background-color: #ffff8a;
}
.exitlosing
{
	cursor: pointer;
	background-color: #d6d6d6;
}
.exittomap
{
	cursor: pointer;
	background-color: #42cf53;
}
.unlocklocation
{
	cursor: pointer;
	background-color: #D4F0BB;
}
.topbuttonholder
{
	padding-top: 5px;
	padding-left: 80px;
	padding-bottom: 10px;
}
.numbutton {
	border-radius: 12px;
	display: inline-block;
	margin-right: 8px;
	padding: 4px 8px;
	font-size: 11pt;
}
.buttonholder
{
	clear: both;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin: 22px 40px 42px 80px;
	padding: 10px 16px;
	background-color: rgba(240, 235, 204, 0.75);
}
.buttonholder .paragraph-type-form {
	clear: none;
	margin: 0;
	overflow: hidden; /* contain any floated children (e.g. .floatit delete button) */
}
.buttonholder-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
.buttonholder-controls .indicator {
	margin-bottom: 2px;
}
.eofspecial
{
	margin-top: 15px;
	margin-bottom: 15px;
}

/* Make form fields block-level except when inline-block is specified */
.ptypeeditfield.eofspecial,
.ptypecombo.eofspecial {
	display: block;
}

.ptypeeditfield.eofspecial.ibcombo,
.ptypecombo.eofspecial.ibcombo {
	display: inline-block;
}
.eofcollapsed
{
	margin-top: 10px;
	margin-bottom: 10px;
}
.eofbottomcollapsed
{
	margin-top: 30px;
	margin-bottom: 10px;
}
.eoftopcollapsed
{
	margin-top: 10px;
	margin-bottom: 30px;
}
.dmnotesspecial
{
	display: block;
	margin-top: 15px;
	margin-bottom: 15px;
	font-size: 14px;
}
.combospecial {
}

.uparrow {
	width: 0px;
	height: 0px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 7px solid #ffffff;
	display: inline-block;
}

.downarrow {
	width: 0px;
	height: 0px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 7px solid #ffffff;
	display: inline-block;
}

#nextpagecontainer {
	height: 70px;
	position: relative;
	left: 63px;
}

/* generic arrow stuff */
.nparrow {
	width: 0px;
	height: 0px;
	position: absolute;
	font-family: 'Caudex';
	cursor: default;
	border-radius: 10px;
}
.nparrow.npenabled {
	cursor: pointer;
}
.nparrow:after {
	position: absolute;
	color: #ffffff;
	font-size: 13px;
}
.nparrow.npexists {
	cursor: default;
}
.nparrow.npexists:after {
	color: #777777;
}
.nparrow.npenabled:after {
	color: #ffffff;
}

#nparrowx {
	left: 28px;
	top: 28px;
	width: 9px;
	height: 9px;
	background-color: #1B27C4;
	border: 2px solid #1B27C4;
	color: #1B27C4;
}

/* up arrow */
#nparrowu {
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 13px solid #bbbbbb;
	left: 64px;
	top: 10px;
}
#nparrowu:after {
	color: #777777;
	font-size: 13px;
	content: attr(data-label);
	left: 9px;
	top: 3px;
}
#nparrowu.npenabled {
	border-bottom: 13px solid #1B27C4;
	color: #1B27C4;
}

/* down arrow */
#nparrowd {
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 13px solid #bbbbbb;
	left: -7px;
	top: 44px;
}
#nparrowd:after {
	color: #777777;
	font-size: 13px;
	content: attr(data-label);
	left: -26px;
	top: -16px;
}
#nparrowd.npenabled {
	border-top: 13px solid #1B27C4;
	color: #1B27C4;
}

/* north arrow */
#nparrown {
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-bottom: 25px solid #bbbbbb;
	left: 20px;
}
#nparrown:after {
	content: attr(data-label);
	left: -6px;
	top: 10px;
}
#nparrown.npenabled {
	border-bottom: 25px solid #1B27C4;
}

/* south arrow */
#nparrows {
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 25px solid #bbbbbb;
	left: 20px;
	top: 44px;
}
#nparrows:after {
	content: attr(data-label);
	left: -3px;
	top: -22px;
}
#nparrows.npenabled {
	border-top: 25px solid #1B27C4;
}

/* east arrow */
#nparrowe {
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 25px solid #bbbbbb;
	left: 44px;
	top: 20px;
}
#nparrowe:after {
	content: attr(data-label);
	left: -22px;
	top: -5px;
}
#nparrowe.npenabled {
	border-left: 25px solid #1B27C4;
}

/* west arrow */
#nparroww {
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-right: 25px solid #bbbbbb;
	top: 20px;
}
#nparroww:after {
	content: attr(data-label);
	left: 9px;
	top: -5px;
}
#nparroww.npenabled {
	border-right: 25px solid #1B27C4;
}

/*
.nparrow_unknown {
	opacity: 1;
}

.nparrow_active {
	opacity: 1;
}

.nparrow_disabled {
	opacity: 1;
}
*/


.storybutton {
	background-color: white;
	color: black;
	border-color: black;
	border-width: 1px;
	text-align: center;
	display: inline-block;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 5px;
	padding-bottom: 0px;
	min-width: 12px;
	cursor: pointer;
}
.inlinestorybutton {
	position: relative;
	top: -3px;
}
.position {
}
.sb_thisstory {
	background-color: black;
	color: white;
}
.sb_childstory {
	background-color: #dddddd;
}
.sb_parentstory {
	background-color: #dddddd;
}
#otherpagecontainer {
	width: 200px;
}
.deletefloat {
}
.parastorybutton {
	display: inline-block;
}
.toggle {
	width: 10px;
	height: 10px;
	display: inline-block;
	cursor: pointer;
}
.toggleopen {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'> <path d='M 5 0 L 9 9 L 0 9 L 5 0' fill='black' stroke='black'/> </svg> ");
}
.toggleclosed {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'> <path d='M 0 0 L 9 0 L 5 9 L 0 0' fill='black' stroke='black'/> </svg> ");
}

.paratypefont {
	font-size: .85em;
}


.writeparahere {
	color: #404040;
	font-weight: bold;
	font-size: 9pt;
	font-family: 'Caudex';
	padding-top: 16px;
}

.ptypeextratext {
	font-family: 'Caudex';
	font-size: 12pt;
}

.blork {
	display: inline-block;
}

.actionedit {
	margin-right: 30px;
}
.floatit {
	float: right;
}
.panelopen {
}
.panelclosed {
	display: none;
}
.ibcombo {
	display: inline-block;
}
.ifuser {
	margin-left: 10px;
	margin-right: 10px;
	font-family: 'Caudex';
	font-size: 12pt;
}
.chapterbutton {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 2px;
	margin-left: 2px;
}

.chapterbutton-e {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'> <path d='M 1 0 L 7 4 L 1 8 L 1 0' fill='black' stroke='black'/> </svg> ");
}
.chapterbutton-w {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'> <path d='M 7 0 L 1 4 L 7 8 L 7 0' fill='black' stroke='black'/> </svg> ");
}
.chapterbutton-n {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'> <path d='M 0 6 L 4 1 L 8 6 L 0 6' fill='black' stroke='black'/> </svg> ");
}
.chapterbutton-s {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'> <path d='M 0 2 L 4 7 L 8 2 L 0 2' fill='black' stroke='black'/> </svg> ");
}
.chapterbutton-o {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'> <circle cx='4' cy='4' r='1.4' fill='black' stroke='black'/> </svg> ");
}
.chapterbutton-X {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'> <line x1='8' y1='0' x2='0' y2='8' stroke='red' stroke-width='2'/><line x1='0' y1='0' x2='8' y2='8' stroke='red' stroke-width='2'/> </svg> ");
}
.chapterbutton-u {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'> <line x1='0' y1='8' x2='4' y2='2' stroke='black' stroke-width='1.5'/> <line x1='4' y1='2' x2='8' y2='8' stroke='black' stroke-width='1.5'/> <line x1='0' y1='0' x2='8' y2='0' stroke='black' stroke-width='2'/> </svg> ");
}
.chapterbutton-d {
	background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'> <line x1='0' y1='0' x2='4' y2='6' stroke='black' stroke-width='1.5'/> <line x1='4' y1='6' x2='8' y2='0' stroke='black' stroke-width='1.5'/> <line x1='0' y1='8' x2='8' y2='8' stroke='black' stroke-width='2'/> </svg> ");
}

/* Additional styles for React implementation */
#floorplan .hint {
	font-size: 10px;
	color: #666;
	margin-top: 4px;
}

/* Use data-dir attribute instead of IDs for React */
.nparrow[data-dir="u"] {
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 13px solid #bbbbbb;
	left: 64px;
	top: 10px;
}
.nparrow[data-dir="u"]:after {
	color: #777777;
	content: 'Up';
	left: 9px;
	top: 3px;
}
.nparrow[data-dir="u"].npenabled {
	border-bottom: 13px solid #1B27C4;
}

.nparrow[data-dir="d"] {
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 13px solid #bbbbbb;
	left: -7px;
	top: 44px;
}
.nparrow[data-dir="d"]:after {
	color: #777777;
	content: 'Dn';
	left: -26px;
	top: -16px;
}
.nparrow[data-dir="d"].npenabled {
	border-top: 13px solid #1B27C4;
}

.nparrow[data-dir="n"] {
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-bottom: 25px solid #bbbbbb;
	left: 20px;
}
.nparrow[data-dir="n"]:after {
	content: 'N';
	left: -6px;
	top: 10px;
}
.nparrow[data-dir="n"].npenabled {
	border-bottom: 25px solid #1B27C4;
}

.nparrow[data-dir="s"] {
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 25px solid #bbbbbb;
	left: 20px;
	top: 44px;
}
.nparrow[data-dir="s"]:after {
	content: 'S';
	left: -3px;
	top: -22px;
}
.nparrow[data-dir="s"].npenabled {
	border-top: 25px solid #1B27C4;
}

.nparrow[data-dir="e"] {
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 25px solid #bbbbbb;
	left: 44px;
	top: 20px;
}
.nparrow[data-dir="e"]:after {
	content: 'E';
	left: -22px;
	top: -5px;
}
.nparrow[data-dir="e"].npenabled {
	border-left: 25px solid #1B27C4;
}

.nparrow[data-dir="w"] {
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-right: 25px solid #bbbbbb;
	top: 20px;
}
.nparrow[data-dir="w"]:after {
	content: 'W';
	left: 9px;
	top: -5px;
}
.nparrow[data-dir="w"].npenabled {
	border-right: 25px solid #1B27C4;
}

/* gets rid of the border for first paragraph block after introtext */
#introtext + .paragraphblock {
	background-image: none;
	padding-top: 0px;
}

/* Input field styling to match original EditField */
.ptypeeditfield {
	font-family: 'Caudex', serif;
	font-size: 12pt;
	border: 1px solid #999;
	padding: 4px 6px;
	background-color: white;
}

.ptypeeditfield:focus {
	outline: none;
	border-color: #1B27C4;
}

/* Select/combo styling */
.ptypecombo {
	font-family: 'Caudex', serif;
	font-size: 12pt;
	border: 1px solid #999;
	padding: 4px 6px;
	background-color: white;
}

/* Battle arena: two side-by-side panels with a wrapping border */
.battle-arena {
	border: 1px solid #404040;
	margin: 16px 0;
	padding: 12px;
}
.battle-panels {
	display: flex;
	gap: 12px;
}
.battle-panel {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.battle-panel-left {
	border-right: 1px solid #ccc;
	padding-right: 12px;
}
.battle-panel-name {
	font-family: 'Caudex', serif;
	font-size: 12pt;
	font-weight: bold;
	color: #1B27C4;
	text-align: center;
	border-bottom: 1px solid #ccc;
	padding-bottom: 4px;
}
.battle-panel-move {
	font-family: 'Caudex', serif;
	font-size: 11pt;
	line-height: 1.4;
	white-space: pre-wrap;
}
.battle-panel-waiting {
	font-family: 'Caudex', serif;
	font-size: 11pt;
	font-style: italic;
	color: #888;
}
.battle-panel-input {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.battle-panel-input .actionedit {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}
.battle-panel-body {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
/* Move text takes the remaining width; the score sits in a fixed badge beside it. */
.battle-panel-body > :first-child {
	flex: 1;
	min-width: 0;
}
.battle-panel-score {
	width: 60px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}
.battle-winner {
	margin-top: 16px;
	text-align: center;
	font-family: 'Caudex', serif;
	font-size: 14pt;
	font-weight: bold;
	color: #1B27C4;
}
.battle-continue {
	margin-top: 12px;
	text-align: center;
}