Deprecated: ScssPhp\ScssPhp\Compiler::multiplyMedia(): Implicitly marking parameter $env as nullable is deprecated, the explicit nullable type must be used instead in /home/www/hexile/vendor/scssphp/scssphp/src/Compiler.php on line 5055
Deprecated: ScssPhp\ScssPhp\Compiler::pushEnv(): Implicitly marking parameter $block as nullable is deprecated, the explicit nullable type must be used instead in /home/www/hexile/vendor/scssphp/scssphp/src/Compiler.php on line 5147
Deprecated: ScssPhp\ScssPhp\Compiler::set(): Implicitly marking parameter $env as nullable is deprecated, the explicit nullable type must be used instead in /home/www/hexile/vendor/scssphp/scssphp/src/Compiler.php on line 5211
Deprecated: ScssPhp\ScssPhp\Compiler::get(): Implicitly marking parameter $env as nullable is deprecated, the explicit nullable type must be used instead in /home/www/hexile/vendor/scssphp/scssphp/src/Compiler.php on line 5317
Deprecated: ScssPhp\ScssPhp\Compiler::has(): Implicitly marking parameter $env as nullable is deprecated, the explicit nullable type must be used instead in /home/www/hexile/vendor/scssphp/scssphp/src/Compiler.php on line 5382
Deprecated: ScssPhp\ScssPhp\Parser::__construct(): Implicitly marking parameter $cache as nullable is deprecated, the explicit nullable type must be used instead in /home/www/hexile/vendor/scssphp/scssphp/src/Parser.php on line 143
Deprecated: ScssPhp\ScssPhp\Parser::__construct(): Implicitly marking parameter $logger as nullable is deprecated, the explicit nullable type must be used instead in /home/www/hexile/vendor/scssphp/scssphp/src/Parser.php on line 143
Deprecated: ScssPhp\ScssPhp\Formatter::format(): Implicitly marking parameter $sourceMapGenerator as nullable is deprecated, the explicit nullable type must be used instead in /home/www/hexile/vendor/scssphp/scssphp/src/Formatter.php on line 275
Deprecated: ScssPhp\ScssPhp\Warn::setCallback(): Implicitly marking parameter $callback as nullable is deprecated, the explicit nullable type must be used instead in /home/www/hexile/vendor/scssphp/scssphp/src/Warn.php on line 62
Deprecated: ScssPhp\ScssPhp\Node\Number::output(): Implicitly marking parameter $compiler as nullable is deprecated, the explicit nullable type must be used instead in /home/www/hexile/vendor/scssphp/scssphp/src/Node/Number.php on line 581
@charset "UTF-8";
/* Site-wide variable colors etc to easily syncronize across stylesheets */
/*
Theme Name: Makste Huishoudboekje
Author: Stephan Kuiper
Author URI: http://stephankuiper.nl/
*/
* {
margin: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
@font-face {
font-family: Copperplate;
src: url("/assets/fonts/Copperplate.otf") format("opentype");
}
@font-face {
font-family: CopperplateGothic;
src: url("/assets/fonts/copperplate-gothic-light.ttf") format("truetype");
}
@font-face {
font-family: ChaparralPro;
src: url("/assets/fonts/ChaparralPro-Regular.otf") format("opentype");
}
@font-face {
font-family: GhostTheory;
src: url("/assets/fonts/Ghosttheory2.ttf") format("truetype");
}
@font-face {
font-family: ComicNeue;
src: url("/assets/fonts/ComicNeue-Regular.ttf") format("truetype");
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: "ChaparralPro", serif;
font-size: 12pt;
color: #C7AE6A;
background-repeat: no-repeat;
background-attachment: fixed;
background: linear-gradient(45deg, #3d072f, 70%, #981375);
transition: 1.5s all;
-webkit-transition: 1.5s all;
-ms-transition: 1.5s all;
-o-transition: 1.5s all;
display: flex;
flex-direction: column;
}
/* Thin progress bar at top during PJAX navigation */
.pjax-loader {
position: fixed;
left: 0;
top: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #4caf50, #2196f3);
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms ease, opacity 200ms ease;
opacity: 0;
z-index: 99999;
}
.pjax-loader.show {
transform: scaleX(1);
opacity: 1;
}
/* Hide the default scrollbar */
::-webkit-scrollbar {
width: 0.5em;
background-color: #000000;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
margin: 0 auto;
text-align: center;
}
.full {
width: 100%;
}
.hidden {
display: none;
}
@media screen and (max-width: 1279px) {
.mobilevisible {
display: block;
}
}
@media screen and (max-width: 1279px) {
.mobilehidden {
display: none;
}
}
.relative {
position: relative;
}
.inline {
display: inline;
}
.title {
font-family: GhostTheory, serif;
font-size: 30pt;
font-weight: 700;
}
main, .wrapper {
width: 100%;
max-width: 1280px;
margin: 0 auto;
flex: 1 0 auto;
}
main {
padding: 25px 10px;
position: relative;
}
@media screen and (max-width: 1279px) {
main {
padding: 25px;
}
}
.banner {
height: 65px;
padding: 5px 10px;
background: #3d072f;
border-top: 2px solid #C7AE6A;
border-bottom: 2px solid #C7AE6A;
text-align: center;
}
.datatable {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background-color: #3d072f;
color: #C7AE6A !important;
font-size: 14t;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
color: #C7AE6A !important;
}
.session-entry, .session-entry a {
color: #3d072f !important;
}
.session-entry img {
height: 50px;
}
/* Mobile rules (<= 768px) */
@media screen and (max-width: 1279px) {
.col-3, .col-4, .col-6 {
width: 100%;
max-width: none;
}
.col-4 .col-4 {
width: 33%;
}
}
.landing img {
width: auto;
min-width: 100vw;
max-width: auto;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: -1;
}
.landing h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
font-size: 100pt;
text-align: center;
font-weight: 700;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
width: 100%;
font-family: GhostTheory, CopperplateGothic, cursive;
}
.landing p {
position: absolute;
top: calc(50% + 100px);
width: 100%;
text-align: center;
z-index: 999;
font-size: 14pt;
color: #C7AE6A;
font-weight: 400;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family: ChaparralPro, serif;
}
@media screen and (max-width: 1279px) {
.landing img {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: center;
z-index: -1;
}
.landing h1 {
font-size: 50pt;
}
}
:root {
--bg:#ffffff;
--muted:#6b6f76;
--border:#e6e9ed;
--accent:#0b65c2;
--unread-bg:#f3f8ff;
--radius:8px;
}
.notifications {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.notification {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.notification.unread {
background: var(--unread-bg);
border-color: rgba(11, 101, 194, 0.15);
}
.notification > div {
min-width: 0;
}
.meta {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.message {
font-size: 14px;
color: #111827;
line-height: 1.3;
word-break: break-word;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-left: 12px;
}
.actions form {
margin: 0;
}
.actions button {
appearance: none;
border: 0;
background: var(--accent);
color: #fff;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
}
.actions button.secondary {
background: #6b6f76;
}
.actions a {
display: inline-flex;
}
.empty-notice {
padding: 12px;
color: var(--muted);
font-size: 14px;
}
@media (max-width: 640px) {
.notification {
flex-direction: column;
align-items: stretch;
}
.actions {
justify-content: flex-start;
}
}
.rules ol.grid > li {
padding: 0 0 15px;
border-bottom: 2px solid #C7AE6A;
margin-bottom: 15px;
}
.rules ol.grid > li .col-6:first-of-type {
padding-right: 15px;
}
.rules ol.grid > li .col-6.media img {
max-width: 100%;
height: auto;
border: 2px solid #C7AE6A;
margin: 5px;
}
/* Feedback button */
.feedback-btn {
position: fixed;
right: 16px;
bottom: 16px;
width: 56px;
height: 56px;
border-radius: 50%;
background: #2d3748;
color: #fff;
border: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
cursor: pointer;
z-index: 9999;
font-size: 28px;
}
.feedback-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
padding: 24px;
}
.feedback-modal-content {
width: 100%;
max-width: 640px;
background: #fff;
border-radius: 8px;
padding: 18px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
}
.feedback-close {
position: absolute;
right: 10px;
top: 6px;
background: transparent;
border: none;
font-size: 22px;
cursor: pointer;
color: #666;
}
#feedback-text {
width: 100%;
min-height: 140px;
resize: vertical;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
font-family: inherit;
}
.feedback-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.feedback-actions .btn {
background: #2d7ef7;
color: #fff;
border: none;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
.feedback-status {
color: #333;
font-size: 13px;
min-height: 18px;
margin-top: 4px;
}
@media (max-width: 420px) {
.feedback-modal-content {
padding: 12px;
}
.feedback-btn {
width: 48px;
height: 48px;
font-size: 24px;
left: 12px;
bottom: 12px;
}
}
.admin-tabs .tab-nav {
list-style: none;
padding: 0;
margin: 0 0 10px 0;
display: flex;
gap: 8px;
}
.admin-tabs .tab-nav li {
padding: 6px 10px;
background: #f5f5f5;
cursor: pointer;
border-radius: 4px;
}
.admin-tabs .tab-nav li.active {
background: #e0e0e0;
font-weight: 600;
}
.admin-tabs .tab-pane {
display: none;
}
.admin-tabs .tab-pane.active {
display: block;
}
/*
Header / primary nav
- Supports selectors used in project: #header, header.site-header, .logo, #mobileMenuToggle, .mobile-toggle, .navtoggle, nav.primary, #primaryMenu
*/
header#header, header.site-header {
top: 0;
left: 0;
right: 0;
background-color: #3d072f;
color: #C7AE6A;
border-bottom: 2px solid #C7AE6A;
height: 60px;
padding: 0 0 10px;
z-index: 1000;
}
header#header .wrapper, header.site-header .wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 0 12px;
}
header#header .logo, header.site-header .logo {
font-weight: 700;
letter-spacing: 6px;
text-decoration: none;
color: #C7AE6A;
font-size: 24pt;
width: 100%;
max-width: 300px;
min-width: 200px;
font-family: GhostTheory, CopperplateGothic, cursive;
}
.session-page header, .session-page footer {
display: none !important;
}
/* mobile toggle (support both id and class names used) */
#mobileMenuToggle, .mobile-toggle {
display: none;
background: none;
border: none;
font-size: 1.25rem;
padding: 0.5rem;
cursor: pointer;
color: #C7AE6A;
}
/* primary nav baseline */
nav.primary {
width: 100%;
position: relative;
z-index: 10;
}
nav.primary ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
/* allow projects that use li.logo or li.logo-link */
}
nav.primary ul li.logo, nav.primary ul li.logo-link {
order: 0;
text-align: center;
}
nav.primary ul li {
display: inline-block;
position: relative;
}
nav.primary ul li ul {
position: absolute;
z-index: 20;
}
nav.primary ul a {
color: #C7AE6A;
text-decoration: none;
padding: 6px 8px;
display: inline-block;
font-family: CopperplateGothic, cursive;
}
nav.primary ul a i.fas {
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
}
nav.primary ul a:focus {
outline: 3px solid rgba(255, 255, 255, 0.12);
outline-offset: 2px;
}
nav.primary ul .notifications {
position: relative;
}
nav.primary ul .notifications i.unread {
position: relative;
top: -15px;
}
nav.primary ul .notifications .badge {
color: #C7AE6A;
font-size: 0.75rem;
padding: 2px 6px;
border-radius: 12px;
position: absolute;
top: 20px;
right: 50%;
transform: translateX(50%);
}
/* Desktop rules (>= 769px) */
@media screen and (min-width: 1920px) {
body {
padding-top: 0;
}
#mobileMenuToggle, .mobile-toggle {
display: none;
}
nav.primary ul {
display: flex;
}
nav.primary ul li {
display: inline-block;
padding: 10px 0;
}
}
/* Mobile rules (<= 768px) */
@media screen and (max-width: 1279px) {
/* show toggle on small screens */
/* ensure body content isn't hidden under fixed header */
/* session pages use smaller header height */
header#header, header.site-header {
position: fixed;
height: 60px;
}
#mobileMenuToggle, .mobile-toggle {
display: inline-block;
font-size: 1.25rem;
padding: 0.25rem;
}
nav.primary {
width: 100%;
position: absolute;
z-index: 10;
top: 60px;
left: 0;
right: 0;
background: darkslategray;
text-align: center;
border-bottom: 2px solid #C7AE6A;
/* Make menu scrollable on mobile when it exceeds viewport height */
max-height: calc(100vh - 60px);
overflow-y: auto;
overflow-x: hidden;
/* Smooth scrolling for better UX */
-webkit-overflow-scrolling: touch;
}
nav.primary ul {
/* compact by default: hide non-logo items */
display: block;
gap: 6px;
/* keep any logo list item centered if present */
/* hide other items until JS toggles .shown on the UL (#primaryMenu) */
/* when UL has .shown (JS toggles), reveal stacked items */
/* submenus flow with document on mobile */
}
nav.primary ul li.logo, nav.primary ul li.logo-link {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
nav.primary ul li:not(.logo):not(.logo-link) {
display: none;
width: 100%;
}
nav.primary ul.shown, nav.primary ul#primaryMenu.shown {
display: block;
}
nav.primary ul.shown li, nav.primary ul#primaryMenu.shown li {
display: block;
width: 100%;
}
nav.primary ul li {
padding: 20px 0;
}
nav.primary ul li ul {
position: static;
top: auto;
left: auto;
right: auto;
width: 100%;
border: none;
background: transparent;
}
nav.primary ul a {
padding: 12px 16px;
display: block;
width: 100%;
}
body {
padding-top: 60px;
}
.session-page body, .session-page header {
padding-top: 40px;
}
.session-page header {
height: 40px;
}
}
footer {
background-color: #3d072f;
border-top: 2px solid #C7AE6A;
background-color: #3d072f;
flex-shrink: 0;
}
footer .wrapper.row {
min-height: 200px;
padding: 25px;
color: #C7AE6A;
}
@media screen and (max-width: 1279px) {
footer img {
width: 128px;
}
footer .col-4 {
margin-bottom: 25px;
}
footer .wrapper.row {
min-height: 100px;
padding: 15px;
}
}
.login form {
/*display: flex;
flex-wrap: wrap;*/
justify-content: center;
text-align: center;
margin: 0 auto;
}
@media screen and (max-width: 1279px) {
.login form .col {
max-width: 100%;
width: 100%;
flex: auto;
}
}
.login form label {
display: inline-flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #981375;
color: #ffffff;
border: 1px solid #dee0e4;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .login form select {
width: calc(100% - 55px);
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
display: inline-flex;
}
.login form input[type="submit"] {
width: 100%;
height: 50px;
background-color: #981375;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
margin-top: 25px;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #3d072f;
transition: background-color 0.2s;
}
.login .radio-button input[type="radio"] {
display: none;
}
.login .radio-button label {
display: inline-block;
background-color: #d1d1d1;
padding: 4px 11px;
font-family: Arial;
font-size: 18px;
cursor: pointer;
width: 49%;
}
.login .radio-button input[type="radio"]:checked + label {
background-color: #981375;
}
.login .registerlink {
display: inline-block;
}
.login .register-country {
width: calc(100% - 55px) !important;
}
.login .select2-container {
padding: 0 !important;
}
.login .select2-selection {
padding: 11px 0;
text-align: left;
}
.login .select2-selection--single {
height: 50px;
min-height: 50px;
box-sizing: border-box;
font: 12pt "Open Sans", sans-serif;
border: 1px solid #eee;
padding: 0 40px 0 0;
/* leave room for the dropdown arrow */
display: flex;
align-items: center;
}
.login .select2-selection__rendered {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: normal;
/* let flex alignment handle vertical centering */
}
.login .select2-selection__arrow {
height: 100%;
top: 0;
right: 8px;
display: flex;
align-items: center;
padding: 0;
pointer-events: auto;
}
.login .select2-selection__clear {
height: 100%;
display: flex;
align-items: center;
}
img {
display: block;
max-width: 100%;
margin: 0;
padding: 0;
}
img.cursor {
cursor: pointer;
}
img.stat {
max-height: 40px;
margin-right: 10px;
}
img.tinystat {
height: 20px;
}
img.rotated45 {
transform: rotate(-45deg);
}
img.small {
width: 50px;
}
img.original {
max-width: 100%;
}
img.large {
max-width: 600px;
}
img.medium {
max-width: 300px;
}
img.status {
width: 200px !important;
height: 20px !important;
padding: 0 !important;
}
img.thumb {
width: 75px;
}
img.tiny {
width: 50px;
cursor: pointer;
}
img.img40 {
width: 40px;
height: 40px !important;
}
img.addimg {
position: absolute;
top: 2px;
left: 0;
width: 20px;
cursor: pointer;
}
img.edit {
height: 20px;
display: inline;
}
img.pdf {
height: 25px;
display: inline;
}
img.inline {
display: inline;
}
#qrcode img {
padding: 25px;
background: #fff;
}
.bot-indicator img {
height: 32px !important;
width: 32px !important;
}
input, select, textarea {
width: 100%;
font: 12pt "Open Sans", sans-serif;
border: 1px solid #eee;
padding: 5px;
height: 35px;
}
textarea {
height: 80px;
}
.buttons {
display: flex;
flex-wrap: wrap;
}
.buttons > .bttn {
flex: 1 1 120px;
}
.bttn {
position: relative;
padding: 10px 25px;
text-align: center;
margin: 0.125rem;
min-height: 50px;
border: 2px solid #6B0D52;
background-color: #6B0D52;
color: #C7AE6A;
transition: color 0.125s ease;
display: block;
cursor: pointer;
}
.bttn em {
font-size: 8pt;
}
.bttn.acknowledge {
padding: 10px 25px;
bottom: 15px;
}
.bttn:hover {
background-color: #63758a;
color: #fff;
}
input[type="radio"], .btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled):active {
border: 1px solid #3d072f;
color: #fff;
}
/* text elements */
h1 {
font-family: "CopperplateGothic", cursive;
font-weight: 300;
margin: 0;
}
h2 {
font-family: "ChaparralPro", sans-serif;
font-size: 24px;
font-weight: 400;
}
h3 {
font-family: "ChaparralPro", sans-serif;
font-size: 24px;
color: #C7AE6A;
}
h4 {
font-family: "ChaparralPro", sans-serif;
font-size: 18px;
color: #C7AE6A;
}
h5 {
font-family: "ChaparralPro", sans-serif;
font-size: 12pt;
color: #C7AE6A;
font-weight: 700;
}
p, li, em {
font-family: "ChaparralPro", sans-serif;
font-size: 11pt;
color: #C7AE6A;
}
p {
text-align: justify;
}
/* Anchor elements */
a {
text-decoration: none;
color: #981375;
cursor: pointer;
}
a:hover {
color: #999;
}
a.button {
padding: 10px 20px;
background-color: #3d072f;
color: #C7AE6A;
border: 1px solid #C7AE6A;
text-shadow: none;
}
a.button:hover {
background-color: #981375;
}
/* text alignment classes */
.textleft {
text-align: left;
}
.textright {
text-align: right;
float: right;
}
.textjustified {
text-align: justify;
}
.textgrey {
color: #888;
}
.bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.form-text, .text-muted {
color: #C7AE6A !important;
}
.session-entry {
margin: 5px;
padding: 10px;
border: 1px solid #981375;
border-radius: 5px;
background-color: #C7AE6A;
}
.session-entry:hover {
background-color: #947b37;
color: black;
}
.session-entry a:hover {
color: black;
}
.session-entry .session-name {
font-weight: bold;
font-size: 14pt;
}
.session-entry .session-players {
font-size: 12pt;
}
.session-entry .session-creation {
font-size: 8pt;
}
.scores {
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
}
.scores .col-4 {
text-align: center;
margin: 0 auto;
}
.scores .col-4 img {
width: 64px;
height: 64px;
text-align: center;
margin: 0 auto;
}
.scores .col-4 p {
text-align: center;
margin: 0 auto;
margin: 5px 0 0 0;
font-size: 14pt;
font-weight: bold;
}
/* Mobile rules (<= 768px) */
@media screen and (max-width: 1279px) {
.register {
margin-top: 25px;
border-top: 2px solid #C7AE6A;
padding-top: 25px;
}
}
@media screen and (max-width: 1279px) {
.session-page {
padding-top: 0;
}
}
.session-page main {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 100%;
padding: 0;
}
/* Side bar contains the list of players and their current era as a top left overlay over the game board */
#side_bar {
position: absolute;
top: 40%;
left: 0;
transform: translateY(-50%);
z-index: 10;
padding: 10px 0;
width: 300px;
background-color: antiquewhite;
border: 2px solid #C7AE6A;
animation: all 0.3s ease-out;
}
#side_bar #player-toggler {
cursor: pointer;
font-size: 26pt;
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 46px;
display: block;
}
#side_bar #player-toggler:hover {
background-color: #f7e0c0;
}
#side_bar #session-info {
padding: 10px;
text-align: center;
}
#side_bar #player-info .player {
margin-bottom: 5px;
padding: 10px;
display: flex;
align-items: center;
}
#side_bar #player-info .player img {
display: inline-block;
}
#side_bar #player-info .player img.civ-icon {
width: 64px;
height: 64px;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}
#side_bar #player-info .player div {
display: inline-block;
}
#side_bar #player-info .player p {
margin: 0;
}
#side_bar #player-info .player .cede {
font-weight: 700;
cursor: pointer;
}
#side_bar #player-info .player .cede img {
width: 25px;
height: 25px;
vertical-align: middle;
}
#side_bar #player-info .player.current-player {
background-color: #C7AE6A;
padding: 5px;
}
#side_bar #player-info .player.current-player h4, #side_bar #player-info .player.current-player p {
color: #3d072f !important;
font-weight: 700;
}
#side_bar.small {
width: 50px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
#side_bar.small #session-info h2, #side_bar.small .player-details {
display: none !important;
}
#side_bar.small .player {
padding: 5px !important;
margin: 0 0 5px !important;
}
#side_bar.small .player-icon {
width: 40px !important;
height: 40px !important;
position: relative;
}
#side_bar.small .player-icon img {
width: 40px !important;
height: 40px !important;
}
#side_bar.small .player-icon .player-status-icon {
position: absolute;
top: -6px;
left: -6px;
width: 28px;
height: 28px;
pointer-events: none;
}
#side_bar.small #player-toggler {
position: relative;
transform: rotate(180deg);
}
/* Bottom bar is the resources list */
#bottom_bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100px;
border-top: 2px solid #C7AE6A;
}
#board-container {
position: absolute;
left: 0;
top: 51px;
width: 100vw;
height: 100vh;
overflow: hidden;
cursor: grab;
}
canvas#epoch-canvas {
position: absolute;
top: 0;
left: 0;
}
.fight-details {
width: 50%;
margin: 10% auto;
padding: 25px;
background: #3d072f;
color: palegoldenrod;
}
#pixi-container {
width: 100vw;
height: calc(100vh - 150px);
border: 1px solid #ccc;
}
/* Resources & tables */
#resources {
width: 100%;
position: relative;
float: left;
}
#resources table {
width: calc(20% - 20px);
max-width: 150px;
margin: 0 10px;
border-collapse: collapse;
}
#resources table tbody td {
text-align: center;
background-color: #981375;
border-top: 1px solid #C7AE6A;
border-bottom: 1px solid #C7AE6A;
padding: 3px;
cursor: help;
}
#resources table tbody td:first-child {
border-left: 1px solid #C7AE6A;
}
#resources table tbody td:nth-child(2) {
border-right: 1px solid #C7AE6A;
}
#resources table tbody td:last-child {
border-right: 1px solid #C7AE6A;
}
#resources table img {
vertical-align: middle;
width: 32px;
height: 32px;
margin-right: 5px;
}
/* Top bar and turn actions */
#top_bar {
width: 100%;
}
#turn_actions {
height: 50px;
width: 100%;
float: left;
}
#turn_actions div, #turn_actions button {
background-color: antiquewhite;
height: 45px;
margin: 3px 20px;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 175px;
width: 20%;
border: 1px solid #C7AE6A;
border-radius: 4px;
cursor: pointer;
padding: 0 8px;
}
#turn_actions div img, #turn_actions button img {
height: 43px;
display: inline-block;
}
#turn_actions div h4, #turn_actions button h4 {
color: #3d072f;
margin: 0 auto 0;
font-size: 16pt;
}
#turn_actions div:hover, #turn_actions button:hover {
background-color: #efbe7c;
}
/* Action overlays */
.action-overlay {
position: absolute;
right: 0;
top: 0;
z-index: 9999;
max-height: calc(100vh - 200px);
/*width: 50%;*/
max-width: 1000px;
min-width: 500px;
padding: 0 25px;
color: #C7AE6A;
display: none;
}
.action-overlay li {
padding: 4px 0;
}
.action-overlay h2 {
line-height: 20px;
}
.action-overlay .overlay-closer {
position: absolute;
top: 0;
right: 25px;
cursor: pointer;
font-size: 48px;
font-weight: bold;
}
.action-overlay .overlay-container {
padding: 20px;
border-top: 2px solid #C7AE6A;
max-height: calc(100vh - 271px);
overflow-y: auto;
}
.action-overlay .overlay-container > div {
background: #222;
justify-content: space-between;
margin: 20px 30px;
border-radius: 4px;
border: 1px solid #C7AE6A;
padding: 5px;
/*display: flex;*/
align-items: center;
}
/* Overlay opener, end-turn and other small utilities */
.overlay-opener {
float: left;
text-align: center;
}
#end-turn {
border: 0;
display: inline-block;
font-size: 16pt;
}
#player-toggler {
cursor: pointer;
}
/* Player icon/details */
.player-icon {
width: 75px;
position: relative;
}
.player-icon .player-status-icon {
position: absolute;
top: -8px;
left: -8px;
width: 36px;
height: 36px;
pointer-events: none;
}
.player-details {
width: 195px;
}
/* Victory modal */
.victory-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 12000;
}
.victory-modal.is-visible {
display: flex;
}
.victory-modal::before {
content: "";
position: absolute;
inset: 0;
background: rgba(10, 6, 16, 0.86);
backdrop-filter: blur(2px);
}
.victory-modal__content {
position: relative;
z-index: 1;
max-width: 420px;
width: min(90vw, 420px);
padding: 32px 28px;
border-radius: 16px;
text-align: center;
background: antiquewhite;
border: 2px solid #C7AE6A;
box-shadow: 0 20px 60px rgba(5, 0, 12, 0.45);
}
.victory-modal__icon {
width: 96px;
height: 96px;
margin: 0 auto 16px;
display: block;
}
.victory-modal__title {
margin: 0 0 12px;
font-size: 28px;
color: #3d072f;
}
.victory-modal__message {
margin: 0 0 24px;
font-size: 18px;
color: #C7AE6A;
}
.victory-modal__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 200px;
padding: 12px 24px;
border: none;
border-radius: 8px;
background: #3d072f;
color: #C7AE6A;
font-size: 18px;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.victory-modal__cta:hover, .victory-modal__cta:focus {
background: #6b0c52;
transform: translateY(-1px);
}
.victory-modal__cta:focus {
outline: 3px solid rgba(199, 174, 106, 0.6);
outline-offset: 2px;
}
/* Fight overlay */
#fight-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
padding: 4vh 0;
justify-content: center;
align-items: center;
background: rgba(10, 6, 16, 0.88);
backdrop-filter: blur(2px);
box-sizing: border-box;
}
#fight-overlay .fight-overlay-inner {
position: relative;
display: grid;
grid-template-columns: 1fr minmax(0, 12px) 1fr;
width: clamp(320px, 90vw, 1200px);
max-width: 1200px;
height: clamp(400px, 85vh, 900px);
padding: 32px 40px;
background: radial-gradient(circle at top, rgba(61, 7, 47, 0.92), rgba(20, 6, 28, 0.96));
border: 2px solid #c7ae6a;
border-radius: 18px;
box-shadow: 0 24px 60px rgba(5, 0, 12, 0.7);
overflow: visible !important;
box-sizing: border-box;
}
#fight-overlay .fight-overlay-inner .dice-3d-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 150;
}
#fight-overlay .fight-overlay-inner .dice-3d-container canvas {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 150 !important;
}
#fight-overlay .fight-overlay-inner > canvas {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
pointer-events: none;
z-index: 150 !important;
}
#fight-overlay .fight-close {
position: absolute;
top: 18px;
right: 24px;
padding: 0;
border: none;
background: transparent;
color: #c7ae6a;
font-size: 40px;
line-height: 1;
cursor: pointer;
z-index: 200;
transition: color 0.2s ease;
}
#fight-overlay .fight-close:hover {
color: #ffffff;
}
#fight-overlay .fight-column {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px 0 20px;
color: #f4ead3;
overflow: hidden;
z-index: 2;
}
#fight-overlay .flag-wrapper {
position: absolute;
inset: -24px -40px -40px -40px;
opacity: 0.2;
pointer-events: none;
z-index: 1;
}
#fight-overlay .flag-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(125%);
}
#fight-overlay .fight-counters {
position: relative;
display: flex;
align-items: center;
gap: 16px;
z-index: 2;
}
#fight-overlay .counter-icon {
width: 74px;
height: 74px;
object-fit: contain;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}
#fight-overlay .counter-copy {
display: flex;
flex-direction: column;
gap: 4px;
letter-spacing: 0.04em;
}
#fight-overlay .counter-label {
font-size: 13px;
text-transform: uppercase;
color: #c7ae6a;
font-weight: 600;
}
#fight-overlay .counter-value {
font-size: 30px;
font-weight: 700;
}
#fight-overlay .counter-defense {
font-size: 14px;
text-transform: uppercase;
color: #ffdd8a;
font-weight: 600;
letter-spacing: 0.06em;
}
#fight-overlay .player-meta {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
#fight-overlay .player-name {
font-size: 20px;
font-weight: 700;
letter-spacing: 0.04em;
}
#fight-overlay .player-civ {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.85;
}
#fight-overlay .fight-divider {
width: 2px;
background: linear-gradient(180deg, rgba(199, 174, 106, 0), rgba(199, 174, 106, 0.75), rgba(199, 174, 106, 0));
border-radius: 2px;
align-self: stretch;
}
#fight-overlay .animated-die {
position: absolute !important;
width: 56px;
height: 56px;
background: linear-gradient(145deg, #ffffff, #e8e8e8);
border: 2px solid #333;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: bold;
color: #1a1a1a;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
pointer-events: none;
z-index: 9000 !important;
will-change: transform, opacity, left, top;
}
#fight-overlay .animated-die.attacker {
background: linear-gradient(145deg, #ff6b6b, #ee5a52);
color: #ffffff;
border-color: #c92a2a;
box-shadow: 0 8px 20px rgba(201, 42, 42, 0.7);
}
#fight-overlay .animated-die.defender {
background: linear-gradient(145deg, #4dabf7, #339af0);
color: #ffffff;
border-color: #1971c2;
box-shadow: 0 8px 20px rgba(25, 113, 194, 0.7);
}
#fight-overlay .fight-log-card {
position: absolute;
left: 50%;
bottom: 20%;
transform: translateX(-50%);
width: 62%;
max-width: 640px;
padding: 20px 28px;
background: rgba(20, 6, 30, 0.92);
border: 1px solid rgba(199, 174, 106, 0.55);
border-radius: 16px;
color: #f7f0d5;
box-shadow: 0 16px 44px rgba(5, 0, 12, 0.6);
backdrop-filter: blur(2px);
z-index: 5;
}
#fight-overlay .log-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #c7ae6a;
}
#fight-overlay .round-indicator {
font-size: 14px;
color: #ffdf8a;
}
#fight-overlay .dice-rolls {
display: flex;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
font-size: 14px;
letter-spacing: 0.05em;
}
#fight-overlay .dice-group {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
#fight-overlay .dice-group.attacker {
color: #f6a1a8;
}
#fight-overlay .dice-group.defender {
color: #9ccfff;
text-align: right;
}
#fight-overlay .dice-label {
text-transform: uppercase;
font-weight: 600;
}
#fight-overlay .dice-values {
font-size: 18px;
color: #ffffff;
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
#fight-overlay .dice-group.defender .dice-values {
justify-content: flex-end;
}
#fight-overlay .die-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: linear-gradient(145deg, #ffffff, #e8e8e8);
border: 2px solid #333;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
color: #1a1a1a;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#fight-overlay .dice-group.attacker .die-icon {
background: linear-gradient(145deg, #ff6b6b, #ee5a52);
color: #ffffff;
border-color: #c92a2a;
}
#fight-overlay .dice-group.defender .die-icon {
background: linear-gradient(145deg, #4dabf7, #339af0);
color: #ffffff;
border-color: #1971c2;
}
#fight-overlay .round-log {
max-height: 160px;
overflow-y: auto;
padding-right: 6px;
font-size: 15px;
line-height: 1.45;
}
#fight-overlay .round-log::-webkit-scrollbar {
width: 6px;
}
#fight-overlay .round-log::-webkit-scrollbar-thumb {
background: rgba(199, 174, 106, 0.55);
border-radius: 8px;
}
#fight-overlay .log-line {
margin: 6px 0;
}
#fight-overlay .log-line.empty {
color: rgba(255, 255, 255, 0.65);
font-style: italic;
}
#fight-overlay .fight-building {
position: absolute;
right: 0;
bottom: 0;
width: 38%;
height: 46%;
background-size: cover;
background-position: center bottom;
opacity: 0.85;
filter: drop-shadow(0 -12px 28px rgba(0, 0, 0, 0.55));
z-index: 1;
}
#fight-overlay .fight-army {
position: absolute;
bottom: 0;
width: 26%;
height: 34%;
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
z-index: 4;
}
#fight-overlay .fight-army.attacker {
left: 32px;
transform: scaleX(-1);
}
#fight-overlay .fight-army.defender {
right: 28%;
}
#fight-overlay .button-bar {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 18px;
z-index: 6;
}
#fight-overlay .button-bar button {
background: linear-gradient(135deg, #c7ae6a, #e4d39a);
color: #1c0b16;
border: none;
padding: 12px 32px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
#fight-overlay .button-bar button:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 14px 24px rgba(199, 174, 106, 0.35);
}
#fight-overlay .button-bar button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
@media (max-width: 768px) {
#fight-overlay {
padding: 12px 8px;
}
#fight-overlay .fight-overlay-inner {
display: flex;
flex-direction: column;
width: 95vw;
height: auto;
max-height: 95vh;
min-height: auto;
padding: 20px 16px;
gap: 16px;
overflow-y: auto;
overflow-x: hidden;
}
#fight-overlay .fight-close {
top: 12px;
right: 12px;
font-size: 32px;
}
#fight-overlay .fight-divider {
display: none;
}
#fight-overlay .fight-column {
padding: 12px 0;
width: 100%;
}
#fight-overlay .fight-counters {
gap: 12px;
}
#fight-overlay .counter-icon {
width: 60px;
height: 60px;
}
#fight-overlay .player-name {
font-size: 18px;
}
#fight-overlay .player-civ {
font-size: 12px;
}
#fight-overlay .fight-log-card {
position: static;
transform: none;
width: 100%;
max-width: 100%;
padding: 16px 20px;
margin-top: 12px;
}
#fight-overlay .fight-army {
position: static;
width: 50%;
height: 180px;
margin: 0 auto;
transform: none;
}
#fight-overlay .fight-army.attacker {
transform: scaleX(-1);
}
#fight-overlay .fight-building {
position: static;
width: 100%;
height: 200px;
margin: 12px auto;
border-radius: 12px;
}
#fight-overlay .button-bar {
position: static;
transform: none;
justify-content: center;
margin-top: 16px;
gap: 12px;
}
#fight-overlay .button-bar button {
padding: 10px 24px;
font-size: 14px;
}
#fight-overlay .dice-3d-container {
inset: 0;
width: 100%;
height: 100%;
}
}
/* legacy/table helpers */
table[style*="border-top"] {
float: left;
text-align: center;
}
/* Tech Tree */
.center {
text-align: center;
}
.overlay-container {
position: relative;
padding: 16px;
}
.overlay-closer {
position: absolute;
top: 0;
right: 25px;
cursor: pointer;
font-size: 48px;
font-weight: bold;
}
.era-block {
margin-bottom: 24px;
border: 2px solid #C7AE6A;
border-radius: 8px;
padding: 12px;
background: #222;
}
.era-title {
font-size: 1.5em;
margin-bottom: 12px;
color: #C7AE6A;
}
.tech-block {
display: flex;
align-items: stretch;
margin-bottom: 8px;
border-radius: 6px;
border: 1px solid #ccc;
padding: 8px;
}
.tech-block.unlocked {
background: antiquewhite;
}
.tech-block.available {
background: #444;
}
.tech-block.locked {
background: #888;
}
.tech-icon {
flex: 0 0 64px;
display: flex;
align-items: center;
justify-content: center;
}
.tech-icon img {
width: 48px;
height: 48px;
}
.tech-info {
flex: 1;
padding: 0 12px;
}
.tech-actions {
flex: 0 0 180px;
text-align: right;
}
.unlocked-label {
color: #3d072f;
font-weight: bold;
}
.cost-list {
margin-right: 8px;
margin-bottom: 8px;
}
.resource-cost {
text-align: right;
margin: 0 0 6px 0;
}
.resource-icon {
width: 24px;
height: 24px;
vertical-align: middle;
margin-right: 5px;
display: inline-block;
}
.unlock-tech-btn {
padding: 6px 12px;
background: #C7AE6A;
color: #222;
border: none;
border-radius: 4px;
cursor: pointer;
}
.not-enough {
color: #b00;
font-weight: bold;
}
@media screen and (max-width: 1279px) {
#turn_actions {
display: flex;
gap: 8px;
align-items: center;
justify-content: flex-start;
--slots: 5;
--gap: 8px;
--slot-width: calc((100% - ((var(--slots) - 1) * var(--gap))) / var(--slots));
}
#turn_actions div, #turn_actions button {
flex: 1 1 var(--slot-width);
min-width: 0;
margin: 0;
}
.action-overlay {
position: fixed;
left: 0;
right: 0;
top: 50px;
bottom: 0;
max-width: none;
min-width: 0;
max-height: calc(100vh - 50px);
padding: 10px 15px;
background: darkcyan;
}
.action-overlay .overlay-closer {
right: 15px;
top: 10px;
}
.action-overlay .overlay-container {
max-height: calc(100vh - 111px);
padding: 10px;
}
.action-overlay .overlay-container > div {
margin: 10px 0;
flex-direction: column;
align-items: flex-start;
}
.action-overlay .tech-block {
flex-direction: column;
align-items: stretch;
padding: 0 8px;
}
.action-overlay .tech-info {
flex: none;
width: 100%;
padding: 0;
margin-bottom: 8px;
}
.action-overlay .tech-actions {
flex: none;
width: 100%;
text-align: right;
}
#bottom_bar {
height: auto;
background-color: #3d072f;
padding-bottom: 20px;
}
#resources table {
margin: 0;
width: 20%;
}
#resources table th {
font-size: 8pt;
}
#resources table td {
display: inline-block;
height: 40px;
}
#resources table td:nth-child(2), #resources table td:last-child {
padding-top: 8px;
}
#side_bar {
width: 90%;
max-width: 300px;
}
#fight-overlay {
padding: 20px 12px;
align-items: flex-start;
}
#fight-overlay .fight-overlay-inner {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
min-height: calc(100vh - 120px);
padding: 24px 20px 28px;
gap: 18px;
}
#fight-overlay .fight-divider {
display: none;
}
#fight-overlay .fight-column {
padding: 12px 0;
}
#fight-overlay .fight-army {
position: static;
width: 70%;
height: 200px;
margin: 0 auto;
transform: none;
}
#fight-overlay .fight-army.attacker {
transform: none;
}
#fight-overlay .fight-building {
position: static;
width: 100%;
height: 220px;
margin: 12px 0 0;
border-radius: 12px;
}
#fight-overlay .dice-stage {
position: static;
transform: none;
width: 100%;
height: 220px;
}
#fight-overlay .fight-log-card {
position: static;
transform: none;
width: 100%;
}
#fight-overlay .button-bar {
position: static;
transform: none;
justify-content: center;
margin-top: 8px;
}
}
img.left-army-icon {
transform: scaleX(-1);
position: absolute;
bottom: 0;
height: 100%;
}
img.right-army-icon {
position: absolute;
bottom: 0;
height: 100%;
}
/* Hexile UI shell */
:root {
--hexile-bg: #f7f0e6;
--hexile-paper: #fff9ec;
--hexile-ink: #1f2937;
--hexile-ink-soft: #475569;
--hexile-wood: #a16207;
--hexile-blue: #2563eb;
--hexile-red: #dc2626;
--hexile-green: #22c55e;
--hexile-gold: #eab308;
}
#hexileTopBar.hexile-top-bar {
position: sticky;
top: 0;
z-index: 64;
width: 100%;
min-height: 60px;
padding: 0.45rem 0.85rem 0.52rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0.45rem;
color: #fffdf7;
background: linear-gradient(110deg, #6b3e1f 0%, #4f2a14 45%, #39200f 100%);
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 20px rgba(26, 18, 10, 0.35);
}
@media (min-width: 769px) {
#hexileTopBar.hexile-top-bar {
flex-direction: row;
align-items: center;
min-height: 52px;
padding: 0.38rem 0.85rem;
gap: 0.35rem;
}
}
#hexileTopMenuBar.hexile-top-menu-bar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.6rem;
}
@media (min-width: 769px) {
#hexileTopMenuBar.hexile-top-menu-bar {
flex: 0 0 auto;
gap: 0.35rem;
}
}
#hexileMainMenuBtn.hexile-main-menu-btn {
text-decoration: none;
color: #fffefb;
font-family: GhostTheory, Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
letter-spacing: 0.02em;
font-size: 0.95rem;
font-weight: 700;
padding: 0.36rem 0.78rem;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.12);
transition: transform 0.2s ease, background 0.2s ease;
}
#hexileMainMenuBtn.hexile-main-menu-btn:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.2);
}
#hexileTopMetrics.hexile-top-metrics {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.hexile-top-chip {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 253, 247, 0.16);
color: #fff9eb;
font-size: 12px;
font-family: GhostTheory, Tahoma, sans-serif;
letter-spacing: 0.04em;
padding: 0.2rem 0.58rem;
white-space: nowrap;
}
#hexileScoresToggle.hexile-scores-toggle {
border: 2px solid rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.16);
color: #fffdf8;
font-weight: 700;
border-radius: 999px;
padding: 0.34rem 0.72rem;
white-space: nowrap;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
@media (min-width: 769px) {
#hexileScoresToggle.hexile-scores-toggle {
display: none;
}
}
#hexileScoresToggle.hexile-scores-toggle:hover, #hexileScoresToggle.hexile-scores-toggle.is-active {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.24);
}
#hexilePlayerBar.hexile-player-bar {
display: flex;
gap: 0.48rem;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (min-width: 769px) {
#hexilePlayerBar.hexile-player-bar {
flex-wrap: nowrap;
min-width: 0;
flex: 1 1 auto;
}
}
.hexile-player-loading {
color: rgba(255, 247, 237, 0.72);
font-size: 12px;
}
.hexile-player-card {
min-width: 168px;
border-radius: 12px;
padding: 7px 10px;
background: rgba(255, 251, 236, 0.14);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 4px 12px rgba(20, 11, 3, 0.25);
transition: transform 0.2s ease;
}
.hexile-player-card.is-active {
transform: translateY(-2px);
box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.45), 0 8px 18px rgba(20, 11, 3, 0.35);
}
.hexile-player-head {
display: flex;
align-items: center;
gap: 8px;
}
.hexile-avatar {
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.45);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
}
.hexile-player-name {
font-size: 12px;
font-weight: 700;
max-width: 132px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hexile-player-meta {
margin-top: 2px;
font-size: 11px;
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 248, 236, 0.94);
}
.hexile-minor-bugs {
color: #93c5fd;
}
.hexile-major-bugs {
color: #fca5a5;
}
.hexile-turn-badge {
color: #fef3c7;
font-weight: 700;
letter-spacing: 0.04em;
animation: hexileTurnBounce 0.85s ease-out infinite alternate;
}
.hexile-me-badge {
color: #bbf7d0;
font-weight: 700;
}
@keyframes hexileTurnBounce {
from {
transform: translateY(0);
}
to {
transform: translateY(-1px);
}
}
#hexileBoard.hexile-board {
width: 100%;
height: calc(100vh - 62px);
min-height: 420px;
display: flex;
position: relative;
z-index: 1;
background: var(--hexile-bg);
overflow: hidden;
}
#hexileBoard.hexile-board::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.025) 49%, rgba(255, 255, 255, 0.025) 51%, transparent 52%), linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.015) 49%, rgba(255, 255, 255, 0.015) 51%, transparent 52%);
background-size: 84px 84px, 84px 84px;
background-position: 0 0, 42px 0;
pointer-events: none;
z-index: 0;
}
#boardCanvas.hexile-board-canvas {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
#boardDebugPanel.hexile-board-debug-panel {
height: 270px;
overflow: auto;
background: #ffffff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 0.5rem;
margin-bottom: 130px;
display: none;
}
.hexile-board-debug-title {
font-weight: 600;
margin-bottom: 0.4rem;
}
.hexile-board-debug-table {
font-family: Consolas, "Courier New", monospace;
font-size: 12px;
margin-bottom: 0.8rem;
}
#hexileHandDock {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 24;
pointer-events: none;
height: 250px;
}
#playerHand {
pointer-events: none;
}
.hexile-hand-fan {
position: absolute;
left: 0;
right: 0;
bottom: -12px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding-left: 28px;
overflow: visible;
}
.hexile-hand-tile {
flex: 0 0 auto;
width: 240px;
margin-left: -84px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
pointer-events: auto;
transform-origin: 50% 86%;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
filter: drop-shadow(0 12px 16px rgba(15, 23, 42, 0.26));
}
.hexile-hand-tile:first-child {
margin-left: 0;
}
.hexile-hand-tile .hexile-hand-svg {
display: block;
width: 100%;
height: auto;
}
.hexile-hand-tile:hover {
transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 16px)) rotate(var(--rot, 0deg)) scale(1.06);
}
.hexile-hand-tile.is-selected {
transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 10px)) rotate(var(--rot, 0deg)) scale(1.09);
filter: drop-shadow(0 16px 22px rgba(15, 23, 42, 0.32)) drop-shadow(0 0 12px rgba(250, 204, 21, 0.34));
}
.hexile-hand-tile.is-disabled {
opacity: 0.74;
cursor: not-allowed;
}
.hexile-hand-loading {
position: absolute;
left: 50%;
top: 44%;
transform: translate(-50%, -50%);
display: none;
flex-direction: column;
align-items: center;
gap: 8px;
color: #1e293b;
font-size: 13px;
}
.hexile-hand-fan.is-loading .hexile-hand-loading {
display: flex;
}
.hexile-hand-spinner {
width: 32px;
height: 32px;
border-radius: 999px;
border: 3px solid rgba(71, 85, 105, 0.24);
border-top-color: #334155;
animation: hexileHandSpin 0.7s linear infinite;
}
#hexileFloatingStatus {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 30;
width: min(440px, 42vw);
background: var(--hexile-paper);
border: 2px solid #d6c9a9;
border-radius: 14px;
box-shadow: 0 12px 26px rgba(30, 20, 8, 0.22);
padding: 10px 12px;
}
#hexilePlacementControls {
pointer-events: none;
}
.hexile-placement-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
pointer-events: auto;
}
.hexile-placement-row {
display: flex;
align-items: center;
gap: 10px;
}
.hexile-placement-btn {
appearance: none;
border: 2px solid transparent;
border-radius: 999px;
min-width: 104px;
padding: 0.62rem 1.1rem;
font-family: ComicNeue, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.03em;
color: #fffef8;
cursor: pointer;
box-shadow: 0 10px 20px rgba(20, 11, 3, 0.24);
transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.hexile-placement-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 14px 24px rgba(20, 11, 3, 0.3);
filter: saturate(1.05);
}
.hexile-placement-btn:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 7px 14px rgba(20, 11, 3, 0.24);
}
.hexile-placement-btn:disabled {
opacity: 0.58;
cursor: not-allowed;
box-shadow: none;
}
.hexile-placement-btn.is-rotate {
background: linear-gradient(180deg, #5aa9ff 0%, #2f7fda 52%, #1d5da9 100%);
border-color: #cfe6ff;
}
.hexile-placement-btn.is-place {
background: linear-gradient(180deg, #6fd88c 0%, #2fa65d 54%, #1f7a42 100%);
border-color: #d9f6df;
}
.hexile-placement-btn.is-cancel {
background: linear-gradient(180deg, #ffb36f 0%, #ea6b45 54%, #b9412b 100%);
border-color: #ffe2cc;
}
#currentTurn {
font-size: 13px;
font-weight: 700;
color: var(--hexile-ink);
margin-bottom: 8px;
text-align: center;
}
.hexile-status-wrap {
display: flex;
flex-direction: column;
gap: 8px;
}
.hexile-pipeline {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 5px;
}
.hexile-node {
height: 12px;
border-radius: 999px;
border: 1px solid #d6d3d1;
background: #ede9dd;
}
.hexile-node.is-complete {
background: #60a5fa;
border-color: #3b82f6;
}
.hexile-node.is-current {
background: #22c55e;
border-color: #16a34a;
}
.hexile-bug-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.hexile-bug-pill {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 3px 8px;
background: #ffffff;
border: 1px solid #d6d3d1;
color: #334155;
font-size: 12px;
}
.hexile-dot-minor {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--hexile-blue);
}
.hexile-dot-major {
width: 8px;
height: 8px;
background: var(--hexile-red);
transform: rotate(45deg);
}
#hexileScoresOverlay.hexile-scores-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 120;
background: rgba(20, 12, 5, 0.46);
align-items: center;
justify-content: center;
padding: 14px;
}
#hexileScoresPanel.hexile-scores-panel {
width: min(560px, 92vw);
max-height: min(78vh, 680px);
overflow: auto;
background: #fffaf0;
border: 2px solid #d6c9a9;
border-radius: 14px;
box-shadow: 0 20px 40px rgba(26, 18, 10, 0.35);
padding: 12px;
}
.hexile-scores-overlay-body {
font-size: 13px;
color: #1f2937;
}
.hexile-score-summary {
background: #fffcf5;
border: 1px solid #e7e5e4;
border-radius: 10px;
padding: 8px 10px;
margin-bottom: 10px;
color: #334155;
font-size: 12px;
display: grid;
gap: 4px;
}
.hexile-score-list {
display: grid;
gap: 6px;
}
.hexile-score-row {
display: grid;
grid-template-columns: 24px 1fr auto auto;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: 9px;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #334155;
font-size: 12px;
}
.hexile-score-rank {
font-weight: 700;
color: #475569;
text-align: center;
}
.hexile-score-name {
font-weight: 700;
color: #0f172a;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hexile-score-value {
font-weight: 700;
color: #0f172a;
white-space: nowrap;
}
.hexile-score-meta {
color: #475569;
white-space: nowrap;
}
.hexile-score-empty {
text-align: center;
color: #64748b;
padding: 8px;
}
@media (max-width: 1024px) {
#hexilePlayerBar.hexile-player-bar {
overflow-x: auto;
flex-wrap: nowrap;
justify-content: flex-start;
padding-bottom: 2px;
}
#hexileFloatingStatus {
width: min(500px, 58vw);
}
}
@media (max-width: 768px) {
#hexileTopBar.hexile-top-bar {
padding: 0.38rem 0.5rem 0.44rem;
}
#hexileTopMenuBar.hexile-top-menu-bar {
grid-template-columns: auto 1fr auto;
gap: 0.35rem;
}
.hexile-top-chip {
font-size: 11px;
padding: 0.16rem 0.42rem;
}
#hexileMainMenuBtn.hexile-main-menu-btn, #hexileScoresToggle.hexile-scores-toggle {
font-size: 12px;
padding: 0.28rem 0.52rem;
}
#hexileBoard.hexile-board {
height: calc(100vh - 56px);
}
#hexileFloatingStatus {
position: fixed;
right: 8px;
left: 8px;
bottom: 150px;
width: auto;
}
#hexileHandDock {
height: 150px;
}
.hexile-hand-fan {
justify-content: flex-start;
gap: 10px;
padding: 0 10px 0;
overflow-x: auto;
scrollbar-width: thin;
margin-bottom: 0;
}
.hexile-hand-tile {
width: 156px;
margin-left: 0;
transform: translate(0, 0) rotate(0deg) scale(1) !important;
}
.hexile-hand-tile:hover, .hexile-hand-tile.is-selected {
transform: translate(0, -6px) rotate(0deg) scale(1.04) !important;
}
.hexile-score-row {
grid-template-columns: 20px 1fr auto;
grid-template-areas: "rank name score" "rank meta meta";
}
.hexile-score-rank {
grid-area: rank;
}
.hexile-score-name {
grid-area: name;
}
.hexile-score-value {
grid-area: score;
}
.hexile-score-meta {
grid-area: meta;
}
}
.civ_flag {
width: 128px;
height: 128px;
vertical-align: middle;
margin-right: 8px;
border-radius: 64px;
padding: 10px;
border: 2px solid #C7AE6A;
}
.civilization-selection {
cursor: pointer;
transition: background-color 0.3s ease;
}
.civilization-selection:hover > img {
background-color: #C7AE6A;
}
.civilization-selection.selected > img {
background-color: #C7AE6A;
}
#civ_details {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
padding: 25px;
position: relative;
}
#civ_details h3 {
font-size: 48pt;
}
#civ_details img {
position: absolute;
top: 25px;
right: 25px;
width: 128px;
height: 128px;
}
#civ_details p {
width: calc(100% - 150px);
font-size: 16pt;
}
@media screen and (max-width: 1279px) {
#civ_details::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
#civ_details h3 {
position: relative;
z-index: 1;
color: #fff;
}
#civ_details img {
z-index: 1;
}
#civ_details p {
position: relative;
z-index: 1;
width: 100%;
font-size: 12pt;
color: #fff;
}
}
#randomFriendsList {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
}
/* friend request block */
.friend-request {
display: grid !important;
grid-template-columns: 75px 1fr;
grid-template-rows: auto auto auto;
grid-template-areas: "avatar details" "avatar games" "avatar button";
column-gap: 12px;
row-gap: 6px;
min-width: 250px;
max-width: 500px;
width: clamp(250px, 30%, 500px);
margin: 10px;
padding: 12px;
border: 1px solid #C7AE6A;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.04);
color: #C7AE6A;
box-sizing: border-box;
align-items: start;
}
/* avatar (either img or placeholder) sits in the left column spanning rows */
.friend-request > img, .friend-request > .avatar-placeholder {
grid-area: avatar;
width: 75px !important;
height: 75px !important;
max-height: none;
object-fit: cover;
border-radius: 50%;
align-self: start;
justify-self: center;
}
/* title — top right */
.friend-request > h4 {
grid-area: details;
display: block;
margin: 0;
font-weight: 700;
font-size: 14pt;
color: #C7AE6A;
}
/* games/won — middle right */
.friend-request > p:nth-of-type(1) {
grid-area: games;
margin: 0;
font-size: 12pt;
color: #C7AE6A;
opacity: 0.9;
}
/* button — bottom right (p wrapper then button full width) */
.friend-request > p:nth-of-type(2) {
grid-area: button;
margin: 0;
align-self: start;
}
.friend-request > p:nth-of-type(2) > button {
width: 100%;
padding: 8px 10px;
border-radius: 4px;
}
/* small responsive tweaks */
@media screen and (max-width: 599px) {
.friend-request {
width: 100%;
max-width: none;
min-width: 0;
grid-template-columns: 75px 1fr;
}
}
@media screen and (max-width: 959px) {
.overlay-opener h4 {
display: none;
}
}