Deprecated: ScssPhp\ScssPhp\Compiler::multiplyMedia(): Implicitly marking parameter $env as nullable is deprecated, the explicit nullable type must be used instead in /home/qz138095/domains/regents.tabletopjourneys.nl/private_html/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/qz138095/domains/regents.tabletopjourneys.nl/private_html/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/qz138095/domains/regents.tabletopjourneys.nl/private_html/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/qz138095/domains/regents.tabletopjourneys.nl/private_html/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/qz138095/domains/regents.tabletopjourneys.nl/private_html/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/qz138095/domains/regents.tabletopjourneys.nl/private_html/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/qz138095/domains/regents.tabletopjourneys.nl/private_html/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/qz138095/domains/regents.tabletopjourneys.nl/private_html/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/qz138095/domains/regents.tabletopjourneys.nl/private_html/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/qz138095/domains/regents.tabletopjourneys.nl/private_html/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");
}
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;
}
/* 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;
}
.badge-success {
background-color: #809425;
color: #300c2e;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
}
/*
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: Garamond, 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) */
/* Desktop rules (> 959px) */
@media screen and (min-width: 1280px) {
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 (<= 959px) */
@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;
}
.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;
}
/* Common utility classes */
.clearfix::after {
content: "";
display: table;
clear: both;
}
.left {
float: left;
}
.center {
text-align: center;
margin: 0 auto;
}
.right {
float: right;
}
/* Top bar - player info and turn controls */
#top_bar.regents-top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
border-bottom: 2px solid #C7AE6A;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
background-color: #3d072f;
}
#top_bar.regents-top-bar #main_actions {
display: flex;
gap: 10px;
}
#top_bar.regents-top-bar #main_actions .overlay-opener {
cursor: pointer;
text-align: center;
padding: 8px;
border: 1px solid #3d072f;
background-color: #3d072f;
color: #C7AE6A;
border-radius: 4px;
}
#top_bar.regents-top-bar #main_actions .overlay-opener:hover {
background-color: #C7AE6A;
}
#top_bar.regents-top-bar #main_actions .overlay-opener:hover h4 {
color: #3d072f;
}
#top_bar.regents-top-bar #main_actions .overlay-opener h4 {
margin: 0 0 5px 0;
font-size: 18px;
display: inline-block;
}
#top_bar.regents-top-bar #main_actions .overlay-opener img {
width: 20px;
height: 20px;
display: inline-block;
}
#top_bar.regents-top-bar #players_bar {
display: flex;
gap: 15px;
align-items: center;
}
#top_bar.regents-top-bar #players_bar .player-card {
height: 70px;
padding: 14px;
border: 1px solid #C7AE6A;
border-radius: 6px;
background-color: #C7AE6A;
color: #3d072f;
min-width: 160px;
display: flex;
align-items: center;
position: relative;
top: 15px;
}
#top_bar.regents-top-bar #players_bar .player-card.current-player {
border-color: #C7AE6A;
background-color: #3d072f;
color: #C7AE6A;
font-weight: bold;
}
#top_bar.regents-top-bar #players_bar .player-card .player-info {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
#top_bar.regents-top-bar #players_bar .player-card .player-info .player-name-row {
display: flex;
align-items: center;
gap: 6px;
}
#top_bar.regents-top-bar #players_bar .player-card .player-info .player-name-row .ceded-image {
width: 24px;
height: 24px;
flex-shrink: 0;
}
#top_bar.regents-top-bar #players_bar .player-card .player-info .player-name-row .player-name {
font-size: 18px;
display: flex;
align-items: center;
gap: 4px;
font-weight: inherit;
}
#top_bar.regents-top-bar #players_bar .player-card .player-info .player-name-row .player-name .bot-icon {
width: 16px;
height: 16px;
}
#top_bar.regents-top-bar #players_bar .player-card .player-info .player-stats-row {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
}
#top_bar.regents-top-bar #players_bar .player-card .player-info .player-stats-row .player-score, #top_bar.regents-top-bar #players_bar .player-card .player-info .player-stats-row .player-regents {
opacity: 0.8;
white-space: nowrap;
}
#top_bar.regents-top-bar #players_bar .player-card .player-info .player-stats-row .cede-btn {
font-size: 9px;
padding: 2px 6px;
background-color: #ff4444;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
margin-left: auto;
}
#top_bar.regents-top-bar #players_bar .player-card .player-info .player-stats-row .cede-btn:hover {
background-color: #C7AE6A;
}
/* Main game container */
#app-container.regents-game-container {
margin-top: 60px;
width: 100%;
height: calc(100vh - 160px);
position: relative;
}
#app-container.regents-game-container #app {
width: 100%;
height: 100%;
}
#app-container.regents-game-container #app #pixi-container {
width: 100%;
height: 100%;
background-color: #333;
border: 2px solid #3d072f;
}
/* Overlays */
.action-overlay {
position: fixed;
top: 60px;
left: 0;
width: 100%;
height: calc(100vh - 60px);
background-color: rgba(0, 0, 0, 0.9);
z-index: 1000;
display: none;
}
.action-overlay h1 {
color: #3d072f;
margin: 20px 0;
}
.action-overlay p {
color: #ccc;
margin: 10px 0;
}
.action-overlay .overlay-closer {
position: absolute;
top: 10px;
right: 25px;
cursor: pointer;
font-size: 48px;
font-weight: bold;
color: #3d072f;
}
.action-overlay .overlay-closer:hover {
color: black;
}
.action-overlay .overlay-container {
padding: 20px;
max-height: calc(100vh - 120px);
overflow-y: auto;
color: #3d072f;
}
/* Bottom bar - tiles and hand */
#bottom_bar.regents-bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
border-top: 2px solid #C7AE6A;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
#bottom_bar.regents-bottom-bar #tiles_remaining .tiles-count {
display: flex;
flex-direction: column;
align-items: center;
}
#bottom_bar.regents-bottom-bar #tiles_remaining .tiles-count #tiles-remaining-count {
font-size: 32px;
font-weight: bold;
color: #C7AE6A;
}
#bottom_bar.regents-bottom-bar #tiles_remaining .tiles-count .tiles-label {
font-size: 12px;
color: #C7AE6A;
}
#bottom_bar.regents-bottom-bar #my_hand {
position: relative;
top: -50px;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles {
display: flex;
gap: 10px;
max-width: 600px;
overflow-x: auto;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
border: 2px solid #666;
border-radius: 6px;
background-color: #333;
cursor: pointer;
min-width: 120px;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile:hover, #bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile.clickable:hover {
border-color: #3d072f;
background-color: #C7AE6A;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile.selected {
border-color: #3d072f;
background-color: #3d072f;
color: #C7AE6A;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile .tile-image {
width: 120px;
height: 120px;
border-radius: 4px;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile .tile-name {
font-size: 10px;
margin-top: 4px;
text-align: center;
color: #3d072f;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile .tile-preview {
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
padding: 10px;
background-color: rgba(0, 0, 0, 0.9);
border: 2px solid #3d072f;
border-radius: 4px;
color: #3d072f;
font-size: 12px;
max-width: 200px;
text-align: center;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile.tile-placed {
opacity: 0.3;
transform: scale(0.9);
transition: all 0.3s ease-out;
}
.flying-tile {
position: fixed;
z-index: 1000;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
opacity: 0.8;
transform: scale(1.1);
}
.flying-tile.flying {
opacity: 0.3;
transform: scale(0.6);
}
.placement-mode .hand-tile:not(.selected) {
opacity: 0.6;
}
.placement-mode .hand-tile.selected {
animation: pulse-selected 1.5s infinite;
}
@keyframes pulse-selected {
0%, 100% {
border-color: #3d072f;
box-shadow: 0 0 0 0 rgba(61, 7, 47, 0.4);
}
50% {
border-color: #991276;
box-shadow: 0 0 0 4px rgba(61, 7, 47, 0.1);
}
}
/* Tile hover network highlighting styles */
.tile-hover-tooltip {
position: fixed;
background-color: rgba(0, 0, 0, 0.9);
border: 2px solid #3d072f;
border-radius: 6px;
padding: 10px 15px;
color: #3d072f;
font-size: 12px;
z-index: 1500;
pointer-events: none;
max-width: 250px;
line-height: 1.4;
}
.tile-hover-tooltip .network-title {
font-weight: bold;
color: #991276;
margin-bottom: 5px;
}
.tile-hover-tooltip .network-info {
color: #C7AE6A;
font-size: 11px;
}
/* Overlay styles for network visualization (if needed for non-PIXI elements) */
.network-highlight-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 200;
}
.network-highlight-overlay .highlight-area {
position: absolute;
border: 3px solid;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.1);
transition: all 0.2s ease-in-out;
}
.network-highlight-overlay .highlight-area.city-network {
border-color: #4CAF50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
.network-highlight-overlay .highlight-area.forest-network {
border-color: #8BC34A;
box-shadow: 0 0 10px rgba(139, 195, 74, 0.5);
}
.network-highlight-overlay .highlight-area.road-network {
border-color: #FF9800;
box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
}
#bottom_bar.regents-bottom-bar #available-regents .regent-inventory {
display: flex;
gap: 5px;
flex-wrap: wrap;
max-width: 150px;
}
#bottom_bar.regents-bottom-bar #available-regents .regent-inventory .regent-piece {
width: 40px;
height: 40px;
border: 2px solid #666;
border-radius: 50%;
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#bottom_bar.regents-bottom-bar #available-regents .regent-inventory .regent-piece.available {
border-color: #3d072f;
}
#bottom_bar.regents-bottom-bar #available-regents .regent-inventory .regent-piece.available:hover {
background-color: #3d072f;
}
#bottom_bar.regents-bottom-bar #available-regents .regent-inventory .regent-piece .regent-image {
width: 40px;
height: 40px;
}
#bottom_bar.regents-bottom-bar h3 {
color: #C7AE6A;
margin-bottom: 10px;
font-size: 14px;
}
/* Regent placement modal */
.regent-placement-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.regent-placement-modal .regent-placement-content {
background-color: #C7AE6A;
border: 2px solid #3d072f;
border-radius: 8px;
padding: 30px;
text-align: center;
color: #3d072f;
}
.regent-placement-modal .regent-placement-content h3 {
margin-bottom: 15px;
color: #3d072f;
}
.regent-placement-modal .regent-placement-content p {
margin-bottom: 20px;
}
.regent-placement-modal .regent-placement-content .regent-placement-buttons {
display: flex;
gap: 15px;
justify-content: center;
}
.regent-placement-modal .regent-placement-content .regent-placement-buttons .action-btn {
padding: 10px 20px;
border: 2px solid #3d072f;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
min-width: 80px;
}
.regent-placement-modal .regent-placement-content .regent-placement-buttons .action-btn.yes-btn {
background-color: #3d072f;
color: #C7AE6A;
}
.regent-placement-modal .regent-placement-content .regent-placement-buttons .action-btn.yes-btn:hover {
background-color: #0f020c;
}
.regent-placement-modal .regent-placement-content .regent-placement-buttons .action-btn.no-btn {
background-color: transparent;
color: #3d072f;
}
.regent-placement-modal .regent-placement-content .regent-placement-buttons .action-btn.no-btn:hover {
background-color: rgba(61, 7, 47, 0.1);
}
/* Victory modal */
.victory-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: none;
align-items: center;
justify-content: center;
z-index: 3000;
}
.victory-modal.is-visible {
display: flex;
}
.victory-modal .victory-modal__content {
background-color: #C7AE6A;
border: 3px solid #C7AE6A;
border-radius: 12px;
padding: 40px;
text-align: center;
max-width: 400px;
}
.victory-modal .victory-modal__content .victory-modal__icon {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.victory-modal .victory-modal__content .victory-modal__title {
color: #C7AE6A;
font-size: 28px;
margin-bottom: 15px;
}
.victory-modal .victory-modal__content .victory-modal__message {
color: #3d072f;
margin-bottom: 25px;
font-size: 16px;
}
.victory-modal .victory-modal__content .victory-modal__cta {
background-color: gold;
color: #C7AE6A;
border: 2px solid gold;
padding: 12px 24px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
border-radius: 6px;
}
.victory-modal .victory-modal__content .victory-modal__cta:hover:not(:disabled) {
background-color: #ccac00;
}
.victory-modal .victory-modal__content .victory-modal__cta:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Action log specific styles */
#action-log-container .era-block {
margin-bottom: 24px;
border: 2px solid #C7AE6A;
border-radius: 8px;
padding: 12px;
background: #222;
}
/* Recent opponent tile highlighting */
.recent-opponent-tile {
position: relative;
}
.recent-opponent-tile::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid rgba(153, 50, 204, 0.6);
border-radius: 4px;
pointer-events: none;
z-index: 1;
}
.recent-opponent-tile::after {
content: "";
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
background: rgba(153, 50, 204, 0.1);
border-radius: 6px;
pointer-events: none;
z-index: 0;
}
/* Mobile responsive adjustments */
@media screen and (max-width: 1279px) {
/* Mobile Top Bar - 3 tiles: Menu, Players, Tiles Counter */
/* Mobile Players Dropdown Overlay */
/* Game container adjustment for mobile bars */
/* Mobile Bottom Bar - Hand tiles + small status bar */
#top_bar.regents-top-bar {
height: 60px;
flex-direction: row;
padding: 10px;
background-color: #3d072f;
border-bottom: 2px solid #C7AE6A;
}
#top_bar.regents-top-bar #main_actions {
display: flex;
gap: 8px;
flex: 1;
justify-content: space-between;
}
#top_bar.regents-top-bar #main_actions .mobile-top-tile {
background-color: #C7AE6A;
color: #3d072f;
border: 2px solid #C7AE6A;
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 80px;
height: 40px;
}
#top_bar.regents-top-bar #main_actions .mobile-top-tile:hover, #top_bar.regents-top-bar #main_actions .mobile-top-tile:active {
background-color: #d5c28f;
}
#top_bar.regents-top-bar #main_actions .mobile-top-tile.active {
background-color: #981375;
border-color: #981375;
color: #C7AE6A;
}
#top_bar.regents-top-bar #main_actions .mobile-top-tile img {
width: 16px;
height: 16px;
margin-bottom: 2px;
}
#top_bar.regents-top-bar #main_actions .mobile-top-tile .tile-label {
font-size: 10px;
font-weight: bold;
line-height: 1.1;
text-align: center;
}
#top_bar.regents-top-bar #main_actions .mobile-top-tile .tile-value {
font-size: 14px;
font-weight: bold;
line-height: 1;
}
#top_bar.regents-top-bar #players_bar {
display: none;
}
#top_bar.regents-top-bar #players_bar.mobile-visible {
display: flex !important;
position: fixed;
top: 60px;
left: 0;
right: 0;
flex-direction: column;
gap: 8px;
padding: 15px;
background-color: rgba(61, 7, 47, 0.95);
border-bottom: 2px solid #C7AE6A;
z-index: 200;
max-height: 50vh;
overflow-y: auto;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card {
width: 100%;
min-width: unset;
height: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
margin: 0;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card .player-info {
width: 100%;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card .player-info .player-name-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card .player-info .player-name-row .player-name {
font-size: 16px;
font-weight: bold;
display: flex;
align-items: center;
gap: 4px;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card .player-info .player-name-row .ceded-image, #top_bar.regents-top-bar #players_bar.mobile-visible .player-card .player-info .player-name-row .bot-icon {
width: 20px;
height: 20px;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card .player-info .player-stats-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card .player-info .player-stats-row .player-score {
font-weight: bold;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card .player-info .player-stats-row .player-regents {
opacity: 0.8;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card .player-info .player-stats-row .cede-btn {
background-color: #dc3545;
color: white;
border: none;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card .player-info .player-stats-row .cede-btn:hover {
background-color: #bd2130;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card.current-player {
background-color: #981375;
color: #C7AE6A;
border-color: #981375;
}
#top_bar.regents-top-bar #players_bar.mobile-visible .player-card.current-player .cede-btn {
background-color: #C7AE6A;
color: #981375;
}
#mobile-players-dropdown {
position: fixed;
top: 60px;
left: 10px;
right: 10px;
background-color: rgba(61, 7, 47, 0.95);
border: 2px solid #C7AE6A;
border-radius: 8px;
z-index: 200;
padding: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
display: none;
transform: translateY(-10px);
opacity: 0;
transition: all 0.3s ease-in-out;
}
#mobile-players-dropdown.active {
display: block;
transform: translateY(0);
opacity: 1;
}
#mobile-players-dropdown .players-list {
display: flex;
flex-direction: column;
gap: 10px;
}
#mobile-players-dropdown .players-list .mobile-player-card {
background-color: #C7AE6A;
color: #3d072f;
border: 1px solid #C7AE6A;
border-radius: 6px;
padding: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
#mobile-players-dropdown .players-list .mobile-player-card.current-player {
background-color: #981375;
color: #C7AE6A;
border-color: #981375;
font-weight: bold;
}
#mobile-players-dropdown .players-list .mobile-player-card .player-info {
display: flex;
flex-direction: column;
gap: 4px;
}
#mobile-players-dropdown .players-list .mobile-player-card .player-info .player-name {
font-size: 16px;
font-weight: bold;
display: flex;
align-items: center;
gap: 4px;
}
#mobile-players-dropdown .players-list .mobile-player-card .player-info .player-name .bot-icon {
width: 16px;
height: 16px;
}
#mobile-players-dropdown .players-list .mobile-player-card .player-info .player-name .ceded-image {
width: 20px;
height: 20px;
}
#mobile-players-dropdown .players-list .mobile-player-card .player-stats {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
font-size: 14px;
}
#mobile-players-dropdown .players-list .mobile-player-card .player-stats .player-score {
font-weight: bold;
}
#mobile-players-dropdown .players-list .mobile-player-card .player-stats .player-regents {
opacity: 0.8;
font-size: 12px;
}
#mobile-players-dropdown .mobile-cede-section {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #C7AE6A;
}
#mobile-players-dropdown .mobile-cede-section .cede-button {
width: 100%;
background-color: #dc3545;
color: #C7AE6A;
border: none;
border-radius: 6px;
padding: 12px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
#mobile-players-dropdown .mobile-cede-section .cede-button:hover {
background-color: #bd2130;
}
#mobile-players-dropdown .mobile-cede-section .cede-button:disabled {
background-color: #666;
cursor: not-allowed;
}
#app-container.regents-game-container {
margin-top: 60px;
margin-bottom: 140px;
height: calc(100vh - 200px);
overflow: hidden;
}
#bottom_bar.regents-bottom-bar {
height: 140px;
flex-direction: column;
padding: 10px;
background-color: #3d072f;
border-top: 2px solid #C7AE6A;
}
#bottom_bar.regents-bottom-bar #my_hand {
position: relative;
top: 0;
width: 100%;
margin-bottom: 10px;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles {
display: flex;
justify-content: center;
gap: 15px;
max-width: 100%;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile {
min-width: 100px;
max-width: 140px;
flex: 1;
padding: 5px 3px;
border: 2px solid #C7AE6A;
border-radius: 8px;
background-color: #C7AE6A;
color: #3d072f;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile:hover, #bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile.clickable:hover {
border-color: #981375;
background-color: #d5c28f;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile.selected {
border-color: #981375;
background-color: #981375;
color: #C7AE6A;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile .tile-image {
width: 75px;
height: 75px;
margin: 0 auto;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile .tile-name {
font-size: 11px;
text-align: center;
font-weight: bold;
line-height: 1.2;
}
#bottom_bar.regents-bottom-bar #my_hand .hand-tiles .hand-tile .tile-rotation {
font-size: 10px;
text-align: center;
opacity: 0.7;
}
#bottom_bar.regents-bottom-bar .mobile-status-bar {
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
background-color: rgba(199, 174, 106, 0.1);
border-radius: 6px;
}
#bottom_bar.regents-bottom-bar .mobile-status-bar #available-regents .regent-inventory {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
#bottom_bar.regents-bottom-bar .mobile-status-bar #available-regents .regent-inventory .regent {
width: 24px;
height: 24px;
}
#bottom_bar.regents-bottom-bar .mobile-status-bar #available-regents .regent-inventory .regent img {
width: 100%;
height: 100%;
}
#bottom_bar.regents-bottom-bar .mobile-status-bar .turn-info {
color: #C7AE6A;
font-size: 12px;
text-align: center;
}
#bottom_bar.regents-bottom-bar .mobile-status-bar .turn-info .turn-counter {
font-weight: bold;
font-size: 14px;
}
#bottom_bar.regents-bottom-bar .mobile-status-bar .mobile-actions {
display: flex;
gap: 8px;
}
#bottom_bar.regents-bottom-bar .mobile-status-bar .mobile-actions .mobile-action-btn {
background-color: #C7AE6A;
color: #3d072f;
border: 1px solid #C7AE6A;
border-radius: 4px;
padding: 6px 10px;
font-size: 11px;
cursor: pointer;
}
#bottom_bar.regents-bottom-bar .mobile-status-bar .mobile-actions .mobile-action-btn:hover {
background-color: #981375;
color: #C7AE6A;
border-color: #981375;
}
#bottom_bar.regents-bottom-bar .mobile-status-bar .mobile-actions .mobile-action-btn:disabled {
background-color: #666;
border-color: #666;
cursor: not-allowed;
}
#bottom_bar.regents-bottom-bar #tiles_remaining {
display: none;
}
.mobile-only {
display: block !important;
}
.desktop-only {
display: none !important;
}
}
@media screen and (max-width: 1279px) and (max-width: 360px) {
#my_hand .hand-tiles .hand-tile {
min-width: 85px;
padding: 8px 6px;
}
#my_hand .hand-tiles .hand-tile .tile-image {
width: 40px;
height: 40px;
}
#my_hand .hand-tiles .hand-tile .tile-name {
font-size: 10px;
}
#top_bar.regents-top-bar #main_actions .mobile-top-tile {
min-width: 70px;
padding: 6px 8px;
}
#top_bar.regents-top-bar #main_actions .mobile-top-tile .tile-label {
font-size: 10px;
}
#top_bar.regents-top-bar #main_actions .mobile-top-tile .tile-value {
font-size: 12px;
}
}
/* Desktop-specific styles - hide mobile elements */
@media screen and (min-width: 1280px) {
#mobile-players-dropdown {
display: none !important;
}
.mobile-status-bar {
display: none !important;
}
.mobile-top-tile {
display: none !important;
}
.mobile-only {
display: none !important;
}
#top_bar.regents-top-bar #players_bar {
display: flex !important;
}
#bottom_bar.regents-bottom-bar #tiles_remaining {
display: block !important;
}
}
.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;
}
}
.btn-join-public:disabled {
opacity: 0.6;
}
#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;
}
}