diff --git a/src/css/sr2ini.scss b/src/css/sr2ini.scss
index 67122fd..8298200 100644
--- a/src/css/sr2ini.scss
+++ b/src/css/sr2ini.scss
@@ -1,18 +1,83 @@
-/*$fg: deeppink;				// #ff1493
-$fg-bright: lightpink;		// #ffb6c1
-$fg-dark: #b3005f;*/
+/* ***********************
+ * Non-bootstrap variables
+ ************************* */
+
 $fg: gold;
 $fg-bright: yellow;
 $fg-dark: orange;
+// old fg-colors: deeppink, lightpink, #b3005f;
 
 $bg: cyan;					// #00ffff
 $bg-bright: lightcyan;		// #e0ffff
 $bg-dark: darkcyan;			// #008b8b
 
+$html-font-size: 14px;
+
+
+/* ******************************
+ * Overriding Bootstrap variables
+ ******************************** */
+
+@import "../../node_modules/bootstrap/scss/functions";
+
+// fonts
 @font-face {
 	font-family: "Electrolize";
 	src: local("Electrolize"), url("../img/Electrolize-Regular.ttf") format("truetype"), url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
 }
+$font-family-base: "Electrolize";
+
+// colors
+$warning: $bg;
+$danger: $fg;
+
+// <input>
+$input-bg: transparent;
+$input-color: $fg;
+$input-font-size: 1rem !important;
+$input-focus-box-shadow: 0 0 .25rem $bg-bright, 0 0 .5rem $bg, 0 0 1rem $bg-dark !important;
+
+// <input type="text/number">
+$input-group-addon-color: $bg;
+$input-group-addon-bg: transparent;
+$input-group-addon-border-color: none;
+
+// <input type="range">
+$form-range-track-height: .2rem;
+$form-range-track-bg: $bg;
+$form-range-track-box-shadow: none;
+$form-range-thumb-width: .25rem;
+$form-range-thumb-height: 1rem;
+$form-range-thumb-bg: $fg;
+$form-range-thumb-border: none;
+$form-range-thumb-box-shadow: none;
+$form-range-thumb-focus-box-shadow: 0 0 .5rem $fg-bright, 0 0 1rem $fg, 0 0 2rem $fg-dark;
+
+// <input> validation
+$form-feedback-valid-color: $warning;
+$form-feedback-icon-valid: none;
+$form-feedback-icon-invalid: none;
+
+// more bootstrap stylesheets
+//@import "../../node_modules/bootstrap/scss/bootstrap";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/variables-dark";
+@import "../../node_modules/bootstrap/scss/maps";
+@import "../../node_modules/bootstrap/scss/mixins";
+@import "../../node_modules/bootstrap/scss/root";
+@import "../../node_modules/bootstrap/scss/containers";
+@import "../../node_modules/bootstrap/scss/navbar";
+@import "../../node_modules/bootstrap/scss/tables";
+@import "../../node_modules/bootstrap/scss/modal";
+@import "../../node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/utilities";
+@import "../../node_modules/bootstrap/scss/badge";
+@import "../../node_modules/bootstrap/scss/reboot";
+
+
+/* ******
+ * Mixins
+ ******** */
 
 @mixin aug() {
 	--aug-b: 5px;
@@ -25,25 +90,64 @@ $bg-dark: darkcyan;			// #008b8b
 }
 
 @mixin border() {
-	--aug-border-all: 2px;
+	--aug-border-all: .1rem;
 	--aug-border-bg: cyan; // variables don't work in this specific instance
 	--aug-border-opacity: .5;
 }
 
 @mixin inlay() {
 	--aug-inlay-bg: rgba(0, 0, 0, .5);
-	--aug-inlay-y: 10%;
+	--aug-inlay-x: .12em;
+	--aug-inlay-y: .12em;
 }
 
-@mixin button() {
-	background: transparent;
-	border: 1px solid $bg;
-	border-radius: 1px;
-	box-shadow: 0 0 2px $bg-bright, 0 0 4px $bg, 0 0 8px $bg-dark;
-	color: $fg;
-	padding-inline: 0px;
+
+/* *******************
+ *  Responsive styles
+ ********************* */
+
+@media (width <= 500px) {
+	html {
+		font-size: $html-font-size;
+	}
+
+	.container {
+		min-width: 100vw;
+		max-width: 100vw;
+  	}
+
+  	.table-responsive { max-width: calc(100% - .8rem); }
 }
 
+@media (500px < width < 1000px) {
+	html {
+		font-size: calc(100vw / (500px / $html-font-size));
+	}
+
+	.container {
+		$calc-width: calc(100vw / 2 + 250px);
+		min-width: $calc-width;
+		max-width: $calc-width;
+  	}
+}
+
+@media (1000px <= width) {
+	html {
+		font-size: calc($html-font-size * 2);
+	}	
+
+	.container {
+		min-width: 75vw;
+		max-width: 75vw;
+  	}
+}
+
+
+
+/* *****************
+ *  Basic styles
+ ******************* */
+
 html {
 	font-family: 'Electrolize', sans-serif;
 	height: 100%;
@@ -58,23 +162,60 @@ body {
 	background-repeat: no-repeat;
 	background-position: center center;
 	background-size: cover;
-}
-
-.svg-icons { display: none; }
-
-.icon { fill: $fg; }
-
-.sr2-button:focus-visible {
-	border: 1px solid $bg !important;
-	box-shadow: 0 0 4px $bg-bright, 0 0 8px $bg, 0 0 16px $bg-dark !important;
-	outline: none;
+	margin: .2rem;
 }
 
 .container {
-	padding: 4px;
+	padding: .2rem;
 	position: relative;
 }
 
+button { font-family: Electrolize; }
+
+button:focus {
+	filter: brightness(150%) !important;
+	outline: none;
+}
+
+.sr2-button {
+	background: transparent;
+	border: .07rem solid $bg;
+	border-radius: .07rem;
+	box-shadow: 0 0 .15rem $bg-bright, 0 0 .3rem $bg, 0 0 .6rem $bg-dark;
+	color: $fg;
+	font-size: 1rem;
+	margin-left: .2rem;
+	margin-right: .2rem;
+	padding-inline: 0px;
+
+	svg {
+		fill: $fg; 
+		height: 93%;
+		width: 93%;
+		vertical-align: unset;
+	}
+
+	&:focus {
+		border: .1rem solid $bg !important;
+		box-shadow: 0 0 .3rem $bg-bright, 0 0 .6rem $bg, 0 0 1.2rem $bg-dark !important;
+	}
+	
+	&:disabled {
+		box-shadow: none;
+		border-color: $bg-dark;
+
+		svg { fill: $fg-dark; }
+	}
+}
+
+.display-none { display: none; }
+
+
+
+/* *****************
+ *  Header styles
+ ******************* */
+
 header.navbar {
 	@include border;
 	@include inlay;
@@ -87,34 +228,35 @@ header.navbar {
 	--aug-r: 7px;
 	--aug-tl: 7px;
 	--aug-tr: 7px;
-	padding-right: .6rem;;
+	padding-left: calc(15px + 1rem);
+	padding-right: 15px;
 
 	.navbar-brand {
 		color: $bg;
-		text-shadow: 0 0 3px, 0 0 6px, 0 0 12px, 0 0 24px;
+		font-size: 140%;
+		text-shadow: 0 0 .25rem, 0 0 .5rem, 0 0 .75rem, 0 0 1rem;
 	}
 
+	nav { justify-content: flex-end !important; }
+
 	button {
-		@include button;
-
-		height: 38px;
-		margin-left: 3px;
-		margin-right: 3px;
-		width: 38px;
-
-		svg {
-			width: 32px;
-			height: 32px;
-			fill: $fg;
-		}
-
+		height: 2rem;
+		width: 2rem;
 	}
 }
 
-.table-responsive { margin-bottom: 1px; }
+
+
+/* *****************
+ *  Table styles
+ ******************* */
+
+.table-responsive {	overflow: visible !important; }
 
 #combatants-table {
-	margin-top: .5rem;
+	border-collapse: collapse !important;
+	margin-bottom: .1rem; 
+	margin-top: .4rem;
 
 	tr {
 		@include aug;
@@ -125,18 +267,10 @@ header.navbar {
 		--aug-border-right: 0px;
 	}
 
-	.combatant-row { 
-		clip-path: none; 
-		vertical-align: middle !important;
-	}
+	tr:last-of-type td,
+	tr:last-of-type th { --aug-border-bottom: 2px; }
 
-	th:not(:first-of-type) { text-align: center; }
-
-	.th-ini { min-width: 3rem; }
-
-	.th-dice-and-rea { min-width: 3.75rem; }
-
-	.th-actions { min-width: 6.5rem; }
+	.combatant-row { clip-path: none; }
 
 	th, 
 	td {
@@ -147,6 +281,7 @@ header.navbar {
 		--aug-border-bottom: 0px;
 		--aug-border-right: 0px;
 		background: none !important;
+		vertical-align: middle !important;
 	}
 
 	th {
@@ -154,116 +289,97 @@ header.navbar {
 		text-transform: uppercase; 
 	}
 
+	.th-name { 
+		padding-left: .75rem !important; 
+		text-align: left;
+		width: 100%;
+	}
+
+	.th-ini { 
+		min-width: 4rem; 
+	}
+
+	.th-dice-and-rea { min-width: 3rem; }
+
+	.th-actions { 
+		min-width: min-content; 
+		--aug-border-right: 2px; 		
+	}
+
 	td {
-		clip-path: none;
 		color: $fg;
 		font-weight: bold;
-	}
-
-	th:first-of-type, 
-	td:first-of-type {
-		padding-left: 1rem !important;
-	}
-
-	th:last-of-type, 
-	td:last-of-type {
-		--aug-border-right: 2px;
-		padding-right: .75rem;
-	}
-
-	tr:last-of-type td,
-	tr:last-of-type th {
-		--aug-border-bottom: 2px;
-	}
-
-	.combatant-actions {
-		display: flex;
-		justify-content: flex-end;
-	}
-
-	.sr2-button {
-		@include button;
-
-		height: 24px;
-		margin-left: 3px;
-		margin-right: 3px;
-		width: 24px;
-
-		svg, 
-		.icon {
-			bottom: 3px;
-			height: 16px;
-			position: relative;
-			width: 16px;
-		}
-
-		&:disabled {
-			box-shadow: none;
-			border-color: $bg-dark;
-
-			.icon { fill: $fg-dark;	}
-
+		text-align: center; 
+		
+		.sr2-button {
+			height: 1.3rem;
+			width: 1.3rem;
 		}
 	}
 
-	.combatant-ini {
-		padding-right: 1rem !important;
-		text-align: center;
-	}
+	.combatant-name { 
+		padding-left: .6rem !important; 
+		text-align: left;
 
-	.combatant-dice-and-rea { text-align: center; }
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 
 	.combatant-dice::before { content: attr(data-combatant-dice); }
 
 	.combatant-rea::before { content: attr(data-combatant-rea); }
 
+	.combatant-actions { 
+		--aug-border-right: 2px; 
+		display: flex;
+		min-width: 5rem;
+	}
+
 	.actions-menu {
 		display: flex;
 		flex-flow: column;
-		padding: 6px;
+		padding: .2rem;
 
-		button {
-			@include button;
-
-			height: 24px;
-			margin: 4px;
-			width: 24px;
+		.sr2-button {
+			margin-bottom: .2rem;
+			margin-top: .2rem;
 		}
 	}
 }
 
 .max-ini td {
-	text-shadow: 0 0 .15em $fg;
+	text-shadow: 0 0 .15rem $fg;
 }
 
 .zero-ini td {
-	color: $fg-dark !important;
+	color: $fg-dark;
 
-	.icon { fill: $fg-dark !important; }
+	svg { fill: $fg-dark; }
 }
 
 .ko-or-dead td {
 	background-color: rgba(0, 0, 0, .5);
-	color: $fg-dark !important;
-	text-decoration: line-through .1em $fg;
+	color: $fg-dark;
+	text-decoration: line-through .1rem $fg;
 
-	.icon { fill: $fg-dark !important; }
+	.sr2-button svg { fill: $fg-dark; }
 }
 
 .badge.bg-warning {
 	background: radial-gradient(circle at center, $bg, $bg-dark);
+	bottom: .2rem;
 	color: black;
-	bottom: -4px;
-	left: 12px;
-	width: 20px;
+	left: .2rem;
+	position: absolute;
 }
 
 .badge.bg-danger {
 	background: radial-gradient(circle at center, $fg, $fg-dark);
 	color: black;
-	left: 12px;
-	top: 12px;
-	width: 20px;
+	left: .2rem;
+	position: absolute;
+	top: .3rem;
 }
 
 .damage-dropdown, 
@@ -279,8 +395,8 @@ header.navbar {
 
 	--aug-inlay-bg: rgba(0, 0, 0, .5);
 	--aug-border-opacity: .75;
-	padding-top: 10px;
-	padding-bottom: 10px;
+	padding-top: .7remx;
+	padding-bottom: .7rem;
 	position: absolute;
 	z-index: 200;
 
@@ -288,7 +404,7 @@ header.navbar {
 	right: 50%;
 	transform: translateX(50%);
 
-	// transition: fade in/out
+	// transition: fade in/out 
 	transition: opacity .2s ease-in-out, visibility .2s;
 	opacity: 0%;
 	visibility: hidden;
@@ -297,20 +413,24 @@ header.navbar {
 .seen { 
 	visibility: visible;
 	opacity: 100%;
- }
+}
 
 .damage-monitor {
+	padding: .5rem;
+
 	button {
 		border: none;
 		border-radius: 0;
-		font-size: smaller;
-		height: 24px;
-		margin: 0px 2px;
-		width: 24px;
+		font-family: Electrolize;
+		font-size: .9rem;
+		font-weight: bold;
+		height: 1.5rem !important;
+		margin: 0rem .15rem;
+		width: 1.5rem !important;
 
-		&:focus-visible {
-			filter: brightness(150%) !important;
-			outline: none;
+		svg { 
+			height: 100%;
+			width: 100%;
 		}
 	}
 
@@ -322,75 +442,36 @@ header.navbar {
 
 	.damage-stun.active {
 		background: radial-gradient(circle at center, $bg-bright, $bg);
-		box-shadow: 0 0 3px $bg-bright, 0 0 6px $bg, 0 0 12px $bg-dark;
+		box-shadow: 0 0 .25rem $bg-bright, 0 0 .5rem $bg, 0 0 1rem $bg-dark;
 	}
 
 	.damage-physical {
 		background: radial-gradient(circle at center, $fg, $fg-dark);
-		border-radius: 50%;;
+		border-radius: 50%;  // circle, not square
 		box-shadow: none;
 		transition: background .5s, box-shadow .5s;
-
-		&:focus-visible { outline: $fg !important;	}
 	}
 
 	.damage-physical.active {
 		background: radial-gradient(circle at center, $fg-bright, $fg);
-		box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark;
-	}
-
-	svg { 
-		height: 16px;
-		width: 16px;
+		box-shadow: 0 0 .25rem $fg-bright, 0 0 .5rem $fg, 0 0 1rem $fg-dark;
 	}
 }
 
 
 
-.footer-container {
-	bottom: 0px;
-	left: 0px;
-	position: fixed;
-	right: 0px;
-}
-
-footer {
-	@include aug;
-	@include inlay;
-
-	--aug-border-all: 2px !important;
-	--aug-border-bg: cyan !important; // vars don't work here
-	--aug-border-opacity: .5 !important;
-	--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
-	--aug-tl: 10px;
-	--aug-tr: 10px;
-	height: 2.5em;
-
-	p {
-		color: $bg;
-		font-size: xx-small;
-		margin: .25rem;
-		padding-top: .65em;
-		text-align: center;
-		user-select: auto;
-
-		a {
-			color: $fg;
-			text-decoration: none;
-		}
-	}
-}
-
+/* *****************
+ *  Modal styles
+ ******************* */
 
 .sr2-modal {
 	@include border;
 	@include aug;
 
 	color: $bg;
+	font-family: Electrolize !important;
 	pointer-events: auto;
 
-	button { @include button; }
-
 	.modal-header {
 		@include inlay;
 		@include border;
@@ -399,7 +480,7 @@ footer {
 		border-bottom: none;
 		text-transform: uppercase;
 
-		button { width: 30px; }
+		button { width: 2.5rem; }
 	}
 
 	.modal-body {
@@ -416,10 +497,16 @@ footer {
 		--aug-inlay-top: 0;
 		border-top: none;
 
-		button { width: 4rem; }
+		button { 
+			width: 5rem; 
+			margin: .3rem;
+		}
 	}
 
-	label { margin: 0; }
+	label { 
+		margin: 0; 
+		margin-left: calc(100% / 22 + 1rem);
+	}
 
 	.label-swap {
 		display: flex;
@@ -431,97 +518,99 @@ footer {
 
 	}
 
+	.range-group { margin-top: 1rem; }
+
 	input {
-		background-color: transparent;
-		color: $fg;
+		margin: .3em;
 		user-select: text;
+		width: 98%;		// 100% is inexplicably too long on the right hand side  
 
 		&::selection {
 			background-color: $fg;
 			color: black;
 		}
 	
-		&:focus {
-			background-color: transparent;
-			color: $fg;
+		&[type="number"]::-webkit-inner-spin-button,
+		&[type="number"]::-webkit-outer-spin-button { 
+			appearance: none; 
 		}
 
-		&:focus-visible {
-			background-color: transparent;
-			color: $fg;
-		}
+		&:focus:invalid { box-shadow: 0 0 .25rem $fg-bright, 0 0 .5rem $fg, 0 0 1rem $fg-dark !important; }
 
-	 	&:not([type=range]):valid {
-			background-image: none !important;
-	 		border: 1px solid $bg !important	;
-	 	}
-
-	 	&:invalid {
-			background-image: none !important;
-	 		border: 1px solid $fg;
-			box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark;
-	 	}
-
-		&[type=number]::-webkit-inner-spin-button,
-		&[type=number]::-webkit-outer-spin-button { 
-			-webkit-appearance: none; 
-			margin: 0; 
-		}
-
-		&[type=number] { 
-			-moz-appearance: textfield;
-			appearance: textfield;
-	 		margin: 0; 
-	 	}
-
-	 	&[type=range] {
-//			-webkit-appearance: none;
-			margin-left: calc(4.5% - 2px);
-			width: 91%;
+	 	&[type="range"] {
+			box-shadow: none !important;
+			margin-left: calc(100% / 22 - .15rem);
+			width: calc(100% / 11 * 10 + .3rem);
 
 	 		+ datalist {
-	 			display: block;
+	 			border-collapse: collapse;
+	 			display: table;
+	 			table-layout: fixed;
 	 			width: 100%;
 
 	 			option {
-	 				display: inline-block;
-	 				margin: 0;
+	 				display: table-cell;
 	 				text-align: center;
-	 				width: 9%;
 	 			}
 	 		}
+		}
+ 	}
 
-	 		&::-moz-range-track {
-	 			border: 1px;
-	 			border-radius: 1px;
-	 			height: 2px;
-	 		}
-	 		
- 			&::-moz-range-thumb {
-	 			height: 20px;
- 				width: 4px;
-	 		}
-	 	}
-	}
+ 	#combatant-modal-dice { margin-right: 0; }
+
+	#combatant-modal-rea { margin-left: 0; }
 
  	.input-group-text {
  		background-color: transparent;
  		border: none;
  		color: $fg;
+ 		padding: .25rem;
  	}
-
- 	hr {
- 		border-top: 2px solid $bg;
- 		opacity: .5;
- 	}
- }
-
-#combatant-modal-stun {
-	&::-moz-range-track { background-color: $bg-dark; }
-	&::-moz-range-thumb { background-color: $bg; }
 }
 
-#combatant-modal-physical {
-	&::-moz-range-track { background-color: $fg-dark; }
-	&::-moz-range-thumb { background-color: $fg; }
-}
\ No newline at end of file
+
+/* *****************
+ *  Footer styles
+ ******************* */
+
+.footer-container {
+	bottom: 0px;
+	left: 0px;
+	position: fixed;
+	right: 0px;
+}
+
+footer {
+	@include aug;
+	@include inlay;
+
+	--aug-border-all: .1rem !important;
+	--aug-border-bg: cyan !important; // vars don't work here
+	--aug-border-opacity: .5 !important;
+	--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
+	--aug-tl: .7rem;
+	--aug-tr: .7rem;
+
+	p {
+		color: $bg;
+		font-size: x-small;
+		margin: .15em;
+		padding: .25rem;
+		text-align: center;
+		user-select: text;
+		-webkit-user-select: text;
+
+		a {
+			color: $fg;
+			text-decoration: none;
+		}
+
+		&::selection,
+		a::selection {
+			background-color: $fg;
+			color: black;
+		}
+
+	}
+}
+