/* Outlands Notepad */

:root {
	--page-padding-v        : 1em;
	--page-padding-h        : 1.5em;

	--text-color            : #ffe;
	--strong-color          : #fff;
	--first-letter-color    : #fc0;
	--logo-color            : #cb6;

	X--magery-spell-color    : #a9f;
	X--necro-spell-color     : #b7b;
	X--chiv-spell-color      : #ca6;
	--spell-color           : #989890;

	--main-bg               : #000;
	--menu-bg               : #161415;

	--main-bg               : #000;
	--menu-bg               : #09110b;

	--menu-item-margin      : 0.25em;
	--menu-border           : #666;

	--border-color          : #888;
	--border-faint          : #444;
	--border-radius         : 5px;

	--kbd-color             : var(--text-color);
	--kbd-bg                : #333;

	--spell-icon-size       : 1.2em;
	--reagent-icon-size     : 1.2em;

	--say-color             : #0f8;
	--emote-color           : #4cf;

	--important-bg          : #fc04;
	--important-color       : #fc0;
	--td-highlight-bg       : #fc04;
	--sort-arrow-color      : #888;

	--button-bg             : #252e27;
	--button-color          : #fff;
	--button-border-color   : #616f64 #505d53 #505d53 #616f64;
	--button-disabled-color : #888;

	--input-focus-outline   : solid 2px #0f4;

	--json-errors-color     : #f20;
}

/* Page Layout */

.hidden { display:none !important; }

* { margin:0; padding:0; box-sizing:border-box; font-size:1em; min-width:0; min-height:0; }
html, body { height:100%; }
html { background: var(--menu-bg); color: var(--text-color); }
body { font-family: sans-serif; }
body.initializing { text-align: center; }

#content {
	display:grid;
	grid-template-columns : min-content 1fr;
	grid-template-rows    : min-content 1fr;
	grid-template-areas   : "logo main" "menu main";
	height:100%; min-height:0;
}
header { grid-area:logo; }
menu   { grid-area:menu; }
main   { grid-area:main; }


header { padding:1em 2px 1em 0; }
header h1 { font-size:0; }
header h2 {
	margin-top:5px; color:var(--logo-color);
	font-family:serif; font-size:1.4em; line-height:1.1;
	text-align:center;
	text-shadow:
		1px  0 #000,
		-1px 0 #000,
		0 1px  #000,
		0 -1px #000 ;
}
main    { overflow:auto; background:var(--main-bg); }
article { padding:var(--page-padding-v) var(--page-padding-h); height:100%; overflow:auto; }
article > :first-child { margin-top:0; }

/* Hide inactive pages */
article:not(:target) { display:none !important; }

/* Show first article, if no hash in URL */
:root:not(:has(:target)) article:first-of-type {
	display:block !important;
}

X:target { scroll-margin-top:2em; }
body:not(.debug) menu li.dev { display:none; }


/* Logo */

.animated_logo.explode {
	--l1:-1.2px; --r1:+1.3px;
	--l2:-1.4px; --r2:+1.5px;
	--l3:-1.2px; --r3:+1.2px;
	--l4:-1.0px; --r4:+1.0px;
	animation:SHAKE 0.35s linear;
	animation-delay:0.685s;
}
@keyframes SHAKE {
	  0% { transform:translateX(0); }
	  9% { transform:translateX(0); }
	 10% { transform:translateX(var(--l1)); }
	 19% { transform:translateX(var(--l1)); }
	 20% { transform:translateX(var(--r1)); }
	 29% { transform:translateX(var(--r1)); }
	 30% { transform:translateX(var(--l2)); }
	 39% { transform:translateX(var(--l2)); }
	 40% { transform:translateX(var(--r2)); }
	 49% { transform:translateX(var(--r2)); }
	 50% { transform:translateX(var(--l3)); }
	 59% { transform:translateX(var(--l3)); }
	 60% { transform:translateX(var(--r3)); }
	 69% { transform:translateX(var(--r3)); }
	 70% { transform:translateX(var(--l4)); }
	 79% { transform:translateX(var(--l4)); }
	 80% { transform:translateX(var(--r4)); }
	 89% { transform:translateX(var(--r4)); }
	 90% { transform:translateX(var(--l4)); }
	100% { transform:translateX(0); }
}

.animated_logo .lights4 { opacity:0; }
.animated_logo.explode .lights4 {
	position:absolute; top:103px; left:60px; opacity:1;
	animation:FLASH 0.85s linear;
	filter:hue-rotate(var(--r2)) brightness(var(--b2));
}
@keyframes FLASH {
	  0% { --r2:   0deg; --b2:1  ; }
	 10% { --r2: -10deg; --b2:1.5; }
	 20% { --r2:   0deg; --b2:1  ; }
	 55% { --r2: -30deg; --b2:1  ; }
	 60% { --r2: +60deg; --b2:2.5; }
	 70% { --r2: -30deg; --b2:1.2; }
	 85% { --r2:+180deg; --b2:5  ; }
	 99% { --r2:   0deg; --b2:1  ; }
}


/* Menu */

header, menu {
 	border:solid 1px var(--menu-border);
	border-width:0 1px 0 0;
}
								Xbody { overflow:hidden; }
menu {
	list-style-type:none; margin:0 0 0 auto;
								Xpadding-top:1px;
								Xoverflow-y:hidden;
								Xoverflow-x:visible;
}
menu a { text-decoration:none; }
menu li {
	--r:1em;
	width:max-content;
	border-radius:var(--r) 0 0 var(--r);
	margin:var(--menu-item-margin) -1px var(--menu-item-margin) auto;
	position:relative;
}
menu li:first-child { margin-top:0; }

:root:not(:has(:target)) menu li:first-child,
menu li.selected {
	border:solid 1px var(--menu-border);
	border-width:1px 0 1px 1px;
	background:var(--main-bg);
	position:relative; top:-1px; margin-bottom:-2px;
}

:root:not(:has(:target)) menu li:first-child::after,
menu li.selected::after {
	content:'';
	position:absolute;
	width:1px; height:100%;
	top:0; left:100%;
	background:var(--main-bg);
}
menu a {
	display:block;
	padding:0.5em 0.75em 0.5em 1.125em;
	text-transform:uppercase; color:var(--text-color);
}


/* Modals */

#modals {
	--modal-blur-bg:#000a;
	--modal-bg:var(--menu-bg);
	--modal-color:var(--main-color);
	display:grid; place-items:center;
	position:absolute; top:0; left:0; width:100%; height:100%;
	background-color:#0000;
	Xtransition:background 0.25s ease-in-out;
	pointer-events:none;
}
#modals:has([open]) {
	background-color:var(--modal-blur-bg);
	pointer-events:all;
}
#modals dialog {
	min-width:20em;
	border:solid 2px var(--border-color); border-radius:var(--border-radius);
	margin:auto; padding:1em;
	background:var(--modal-bg); color:var(--modal-color);
}
#modals dialog > :first-child { margin-top:0; }
#modals dialog form { text-align:center; }


/* Generic Content */

pre { font-family:monospace,monospace; font-size:1em; }
[title] { cursor:help; }

h2, h3, h4, h5, h6 { margin:1.5em 0 1em; }
h2 { font-size:1.7em; }
h3 { font-size:1.5em; }
h4 { font-size:1.2em; }
h5 { font-size:1.1em; }
h6 { font-size:1em; }
p { margin:1em 0; }

em, strong { color:var(--strong-color); }

q.say::before,
q.say::after {
	color: var(--say-color);
	margin:0 1px;
}
q.emote::before,
q.emote::after {
	content: '*';
	margin:0 2px;
	color:var(--emote-color);
}

kbd {
	display:inline-block;
	border:solid 1px var(--border-color);
	margin:0 2px;
	padding:1px 4px;
	vertical-align:middle;
	cursor:default;
	border-radius:3px;
	color:var(--kbd-color);
	background:var(--kbd-bg);
}
kbd:first-child {
	margin-left:0;
}
kbd:last-child {
	margin-right:0;
}

img {
	display:inline-block;
	vertical-align:middle;
}
img[src^="images/magery"] {
	width:var(--spell-icon-size); height:var(--spell-icon-size);
}
Ximg[src^="images/reagents"] {
	width:var(--reagent-icon-size); height:var(--reagent-icon-size);
}
img.double {
	position:absolute;
	margin-top:-3px;
	filter:brightness(0.65);
}
img.double + img {
	position:relative;
	top:2px;
	left:5px;
	margin-right:3px;
}

table {
	border-collapse:collapse;
}
caption, th, td {
	border:solid 1px var(--border-faint);
	padding:4px 7px;
	text-align:left;
	position:relative;
	vertical-align:top;
}
caption {
	border-bottom:none;
	text-align:center;
	font-weight:bold;
}
table:is(.potions,.spells,.commands) :is(th,td):is(:nth-child(2),:nth-child(3)):not(.shortcut) {
	text-align:center;
}
tr.important td:not(.shortcut) { color:var(--important-color); }
td.highlight { background:var(--td-highlight-bg); }
td p { margin:0 0 0.5em; }
td p:last-child { margin-bottom:0; }

li {
	margin-left:2em;
}

.chapters { counter-reset: h3; }
.chapters h3 { counter-increment:h3; }
.chapters h4 { counter-increment:h4; }
.chapters h3::before { content:counter(h3/*, upper-alpha*/) ". "; }
.chapters h4::before { content:counter(h3/*, upper-alpha*/) "." counter(h4) ". "; }


/* Inputs */

button {
	padding:3px 0.5em;
	border:solid 2px; border-color:var(--button-border-color); border-radius:5px;
	background:var(--button-bg); color:var(--button-color);
}
button[disabled] { color:var(--button-disabled-color); }

textarea {
	margin:1em 0;
	padding:2px 3px;
	border:solid 2px; border-color:var(--button-border-color); border-radius:5px;
	background:var(--button-bg); color:var(--button-color);
	min-width:12em; min-height:7em;
}

:is(input, button, select, textarea):focus {
	outline:var(--input-focus-outline);
	border-color:var(--main-bg);
}


/* Page Specific */

:is(#hotkeys_old, #magery) h3 { margin:0 0 0.25rem; }
:is(#hotkeys_old, #magery) > ul {
	display:flex; align-items:flex-start; align-content:flex-start;
	justify-content:flex-start; flex-wrap:wrap; gap:1em;
	background:var(--main-bg); list-style-type:none;
}
:is(#hotkeys_old, #magery) > ul > li { margin:0; }
:is(#hotkeys_old, #magery) :is(th, td) { padding:3px 0.5em; cursor:pointer; user-select:none; }
:is(#hotkeys_old, #magery) :is(th, td) > * { pointer-events:none; }
:is(#hotkeys_old, #magery) td { vertical-align:middle; height:32px; }
:is(#hotkeys_old, #magery) td .icon:not(:first-child) { margin-left:4px; }
:is(#hotkeys_old, #magery) th::before { float:right; margin-right:-4px; color:var(--sort-arrow-color); }
:is(#hotkeys_old, #magery) th.sorted::before { content:'▼'; }
:is(#hotkeys_old, #magery) th.inverted::before { content:'▲'; }

#magery h3 a { margin-left:0.5em; font-size:0.5em; }
#magery table { margin:0.25em 0 1em; }
#magery td:last-child { max-width:65em; }
#magery td:nth-child(4) { font-size:0.75em; }


/*
#magery i { color:var(--spell-color); }
#necromancy i { color:var(--spell-color); }
#chivalry i { color:var(--spell-color); }
*/
td i { display:inline-block; margin-left:0.5em; color:var(--spell-color); }

:is(#chivalry, #necromancy) td:first-child { white-space:nowrap; }
:is(#chivalry, #necromancy) :is(th, td):is(:nth-child(2),:nth-child(3),:nth-child(4)) {
	text-align:center; width:min-content;
}

#necromancy > .summons {
	display:grid; grid-template-columns:1fr 1fr; gap:1em;
	width:max-content;
}
#necromancy .summons :is(th,td) { text-align:center; }
#necromancy .summons td { padding-top:0; }
#necromancy .summons td:first-child :first-child { margin:17px auto; }
#necromancy .summons span { display:block; margin:-5px auto 0; white-space:nowrap; }

#the_protocol {
	height:100%; width:100%; overflow-x:auto;
	column-fill:auto; column-count:auto; column-width:32em; column-gap:2em;
}
#the_protocol dt { font-weight:bold; margin:1em 0 0.5em; }
#the_protocol .chevron.officer dt { color:#f00; }
#the_protocol .chevron.trooper dt { color:#08f; }
#the_protocol .signature { text-align:center; }

#music { height:100%; padding:0 0 0 calc(var(--page-padding-h) - 0.25em); overflow:hidden; }
#music iframe { width:100%; height:100%; border:none; }

#settings {
	display:grid; grid-template-rows:min-content 1fr;
	Xgrid-auto-rows:auto; gap:1em;
	height:100%;
}
#settings > div > :first-child { margin-top:0; }
#settings button:not(:last-child) { margin-right:0.5em; }
#settings textarea { margin:0; }
#settings textarea.errors { color:var(--json-errors-color); }


.prose { padding-right:calc(100% - 45em); line-height:1.6; }
.prose p::first-letter { margin-left:0.75em; }
.prose hr {
	height:1px; border:none; outline:none; background:#800;
	margin:2.5em 0;
}


/* Modals */

#magery_spell_details h3 { margin-top:0; }
#magery_spell_details .spell_icon { float:right; }


/* Icons */

.icon:is(.magery,.chivalry,.necromancy) {
	--s:44px;
	--u:url(icons/spells44px.png);
	display:inline-block;
	box-sizing:content-box;
	width:var(--s); height:var(--s);
	background-image:var(--u);
	background-position:calc(var(--x) * -1 * var(--s)) calc(var(--y) * -1 * var(--s));
	vertical-align:middle;
}
.icon:is(.magery,.chivalry,.necromancy).small {
	--s:22px; --u:url(icons/spells22px.png);
	vertical-align:middle;
}

.icon.magery.circle1             { --x:0; --y:0; }
.icon.magery.clumsy              { --x:1; --y:0; }
.icon.magery.createfood          { --x:2; --y:0; }
.icon.magery.feeblemind          { --x:3; --y:0; }
.icon.magery.heal                { --x:4; --y:0; }
.icon.magery.magicarrow          { --x:5; --y:0; }
.icon.magery.nightsight          { --x:6; --y:0; }
.icon.magery.reactivearmor       { --x:7; --y:0; }
.icon.magery.weaken              { --x:8; --y:0; }

.icon.magery.circle2             { --x:0; --y:1; }
.icon.magery.agility             { --x:1; --y:1; }
.icon.magery.cunning             { --x:2; --y:1; }
.icon.magery.cure                { --x:3; --y:1; }
.icon.magery.harm                { --x:4; --y:1; }
.icon.magery.magictrap           { --x:5; --y:1; }
.icon.magery.magicuntrap         { --x:6; --y:1; }
.icon.magery.protection          { --x:7; --y:1; }
.icon.magery.strength            { --x:8; --y:1; }

.icon.magery.circle3             { --x:0; --y:2; }
.icon.magery.bless               { --x:1; --y:2; }
.icon.magery.fireball            { --x:2; --y:2; }
.icon.magery.magiclock           { --x:3; --y:2; }
.icon.magery.poison              { --x:4; --y:2; }
.icon.magery.telekinesis         { --x:5; --y:2; }
.icon.magery.teleport            { --x:6; --y:2; }
.icon.magery.unlock              { --x:7; --y:2; }
.icon.magery.wallofstone         { --x:8; --y:2; }

.icon.magery.circle4             { --x:0; --y:3; }
.icon.magery.archcure            { --x:1; --y:3; }
.icon.magery.archprotection      { --x:2; --y:3; }
.icon.magery.curse               { --x:3; --y:3; }
.icon.magery.firefield           { --x:4; --y:3; }
.icon.magery.greaterheal         { --x:5; --y:3; }
.icon.magery.lightning           { --x:6; --y:3; }
.icon.magery.manadrain           { --x:7; --y:3; }
.icon.magery.recall              { --x:8; --y:3; }

.icon.magery.circle5             { --x:0; --y:4; }
.icon.magery.bladespirits        { --x:1; --y:4; }
.icon.magery.dispelfield         { --x:2; --y:4; }
.icon.magery.incognito           { --x:3; --y:4; }
.icon.magery.magicreflection     { --x:4; --y:4; }
.icon.magery.mindblast           { --x:5; --y:4; }
.icon.magery.paralyze            { --x:6; --y:4; }
.icon.magery.poisonfield         { --x:7; --y:4; }
.icon.magery.summoncreature      { --x:8; --y:4; }

.icon.magery.circle6             { --x:0; --y:5; }
.icon.magery.dispel              { --x:1; --y:5; }
.icon.magery.energybolt          { --x:2; --y:5; }
.icon.magery.explosion           { --x:3; --y:5; }
.icon.magery.invisibility        { --x:4; --y:5; }
.icon.magery.mark                { --x:5; --y:5; }
.icon.magery.masscurse           { --x:6; --y:5; }
.icon.magery.paralyzefield       { --x:7; --y:5; }
.icon.magery.reveal              { --x:8; --y:5; }

.icon.magery.circle7             { --x:0; --y:6; }
.icon.magery.chainlightning      { --x:1; --y:6; }
.icon.magery.energyfield         { --x:2; --y:6; }
.icon.magery.flamestrike         { --x:3; --y:6; }
.icon.magery.gatetravel          { --x:4; --y:6; }
.icon.magery.manavampire         { --x:5; --y:6; }
.icon.magery.massdispel          { --x:6; --y:6; }
.icon.magery.meteorswarm         { --x:7; --y:6; }
.icon.magery.polymorph           { --x:8; --y:6; }

.icon.magery.circle8             { --x:0; --y:7; }
.icon.magery.earthquake          { --x:1; --y:7; }
.icon.magery.energyvortex        { --x:2; --y:7; }
.icon.magery.resurrection        { --x:3; --y:7; }
.icon.magery.airelemental        { --x:4; --y:7; }
.icon.magery.summondemon         { --x:5; --y:7; }
.icon.magery.earthelemental      { --x:6; --y:7; }
.icon.magery.fireelemental       { --x:7; --y:7; }
.icon.magery.waterelemental      { --x:8; --y:7; }


.icon.chivalry.removecurse       { --x:0; --y:8; }
.icon.chivalry.dispelevil        { --x:1; --y:8; }
.icon.chivalry.cleansebyfire     { --x:2; --y:8; }
.icon.chivalry.consecrateweapon  { --x:3; --y:8; }
.icon.chivalry.closewounds       { --x:4; --y:8; }
.icon.chivalry.enemyofone        { --x:5; --y:8; }
.icon.chivalry.noblesacrifice    { --x:6; --y:8; }
.icon.chivalry.divinefury        { --x:7; --y:8; }
.icon.chivalry.sacredjourney     { --x:8; --y:8; }
.icon.chivalry.holylight         { --x:9; --y:8; }

.icon.necromancy.vengefulspirit  { --x:0; --y:9; }
.icon.necromancy.poisonstrike    { --x:1; --y:9; }
.icon.necromancy.evilomen        { --x:2; --y:9; }
.icon.necromancy.corpseskin      { --x:3; --y:9; }
.icon.necromancy.vampiricembrace { --x:4; --y:9; }
.icon.necromancy.mindrot         { --x:5; --y:9; }
.icon.necromancy.bloodoath       { --x:6; --y:9; }
.icon.necromancy.strangle        { --x:7; --y:9; }
.icon.necromancy.wither          { --x:8; --y:9; }
.icon.necromancy.painspike       { --x:9; --y:9; }

.icon.summons {
	--w:70px;
	--h:83px;
	display:inline-block;
	box-sizing:content-box;
	width:var(--w); height:var(--h);
	background-image:url(icons/summons.png);
	background-position:calc(var(--x) * -1 * var(--w)) calc(var(--y) * -1 * var(--h));
	vertical-align:middle;
}
.icon.summons.fireelemental        { --x:0; --y:0; }
.icon.summons.airelemental         { --x:0; --y:1; }
.icon.summons.bladespirit          { --x:0; --y:2; }
.icon.summons.summondemon          { --x:0; --y:3; }
.icon.summons.earthelemental       { --x:0; --y:4; }
.icon.summons.waterelemental       { --x:0; --y:5; }
.icon.summons.energyvortex         { --x:0; --y:6; }
.icon.summons.randomcreature       { --x:0; --y:7; }

.icon.summons.lich                 { --x:1; --y:0; }
.icon.summons.skeletalfiend        { --x:1; --y:1; }
.icon.summons.skeletalhusk         { --x:1; --y:2; }
.icon.summons.vampirethrall        { --x:1; --y:3; }
.icon.summons.ancientmummy         { --x:1; --y:4; }
.icon.summons.ragwitch             { --x:1; --y:5; }
.icon.summons.jackalspirit         { --x:1; --y:6; }
.icon.summons.randomundeadcreature { --x:1; --y:7; }

.icon.potion {
	--w:9px;
	--h:17px;
	display:inline-block;
	box-sizing:content-box;
	width:var(--w); height:var(--h);
	background-image:url(icons/potions.png);
	background-position:calc(var(--x) * -1 * var(--w)) 0;
}
.icon.potion.agility     { --x:0 }
.icon.potion.cure        { --x:1 }
.icon.potion.explosion   { --x:2 }
.icon.potion.heal        { --x:3 }
.icon.potion.lethal      { --x:4 }
.icon.potion.magicresist { --x:5 }
.icon.potion.refresh     { --x:6 }
.icon.potion.strength    { --x:7 }

.icon.reagent {
	--h:26px;
	display:inline-block;
	box-sizing:content-box;
	width:var(--w); height:var(--h);
	height:22px;
	background-image:url(icons/reagents.png);
	background-position:0 calc(var(--y) * -1 * var(--h));
	vertical-align:middle;
}
.icon.reagent.double {
	--c:#fc08;
	filter:
		drop-shadow(2px  0 0px var(--c))
		drop-shadow(-2px 0 0px var(--c))
		drop-shadow(0 2px  0px var(--c))
		drop-shadow(0 -2px 0px var(--c))
	;
}
.icon.reagent.blackpearl   { --y:0; --w: 8px; }
.icon.reagent.bloodmoss    { --y:1; --w:31px; }
.icon.reagent.garlic       { --y:2; --w:24px; }
.icon.reagent.ginseng      { --y:3; --w:19px; }
.icon.reagent.mandrakeroot { --y:4; --w:20px; }
.icon.reagent.nightshade   { --y:5; --w:28px; }
.icon.reagent.spiderssilk  { --y:6; --w:20px; }
.icon.reagent.sulfurousash { --y:7; --w:29px; }


/*EOF*/