:root {
--w:#FFF;
--r:#337ab7;
--b:#222;
}

  :root { --blue-dark: #2a60b2; --blue-light: #6ea8ff; --blue-mid: #59f; --gold-dark: #b27f18; --gold-light: #ffc655; --black: #111; --white: #fff; }





.mod-process {
	display:flex;
	align-items:center;
	gap:12px;
	margin:20px 0;
	flex-wrap:wrap;
	font-family:Arial,sans-serif;
}

.mod-step {
	display:flex;
	align-items:center;
	gap:10px;
	color:#999;
	transition:0.2s;
}

.mod-step-circle {
	width:34px;
	height:34px;
	border-radius:50%;
	border:2px solid #999;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:bold;
	background:#f5f5f5;
	font-size:14px;
}

.mod-step-label {
	font-size:14px;
	font-weight:bold;
	white-space:nowrap;
}

.mod-step-line {
	width:50px;
	height:3px;
	background:#ccc;
	border-radius:2px;
}

/* COMPLETED */

.mod-step.completed {
	color:#2e9b47;
}

.mod-step.completed .mod-step-circle {
	background:#2e9b47;
	border-color:#2e9b47;
	color:#fff;
}

.mod-step-line.completed {
	background:#2e9b47;
}

/* CURRENT */

.mod-step.current {
	color:#1f6fd1;
}

.mod-step.current .mod-step-circle {
	border-color:#1f6fd1;
	background:#eaf3ff;
	color:#1f6fd1;
	box-shadow:0 0 0 4px rgba(31,111,209,0.15);
}

.mod-step-line.current {
	background:linear-gradient(to right,#2e9b47,#1f6fd1);
}

/* FUTURE */

.mod-step:not(.completed):not(.current) {
	opacity:0.55;
}


.shortcut-box {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
  background: var(--white);
  border-radius: 12px;
}

/* Each link card */
.shortcut-card {
  flex: 1 1 140px; /* responsive sizing */
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  text-decoration: none;
  color: var(--white);

  background: linear-gradient(
    135deg,
    var(--blue-mid),
    var(--blue-light)
  );

  border-radius: 10px;
  height: 24px;
  justify-content: center;
  text-align: center;
  transition: all 0.2s ease;
}

/* Icon */
.shortcut-card .icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* Label */
.shortcut-card .label {
  font-weight: 600;
  font-size: 14px;
}

/* Hover effects */
.shortcut-card:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    var(--gold-dark),
    var(--gold-light)
  );
  color: var(--black);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Optional: active click feel */
.shortcut-card:active {
  transform: translateY(0);
}






a.redbutton {
padding: 5px 5px;
border: 2px solid #f88;
color: white;
background: #f88;
font-weight: bold;
border-radius: 7px 5px;

}

#footermenu {
  background: #111;
  color: #ddd;
  padding: 40px 20px;
  font-size: 14px;
}

#footermenu a {
  color: #ccc;
  text-decoration: none;
}

#footermenu a:hover {
  color: #fff;
  text-decoration: underline;
}

#footermenu .flexcontainer {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
}

#footermenu .flexitem {
  flex: 1 1 180px;
  min-width: 160px;
}

#footermenu h3 {
  font-size: 15px;
  margin-bottom: 10px;
  color: #fff;
  font-weight: 600;
}

#footermenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footermenu li {
  margin-bottom: 6px;
}


/* =========================
   Tablet Adjustments
   ========================= */

@media (max-width: 1000px) {
  #footermenu .flexitem {
    flex: 1 1 45%;
  }
}


/* =========================
   Mobile Layout
   ========================= */

@media (max-width: 600px) {

  #footermenu {
    padding: 30px 15px;
  }

  #footermenu .flexcontainer {
    flex-direction: column;
    gap: 20px;
  }

  #footermenu .flexitem {
    width: 100%;
  }

  #footermenu h3 {
    font-size: 16px;
    margin-bottom: 8px;
  }

  #footermenu li {
    margin-bottom: 8px;
  }

  /* Optional: add separation between sections */
  #footermenu .flexitem:not(:last-child) {
    border-bottom: 1px solid #222;
    padding-bottom: 15px;
  }
}


/* =========================
   Ad Column Control
   ========================= */

#footermenu .footer-ad {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

@media (max-width: 1000px) {
  #footermenu .footer-ad {
    order: 99; /* push ad to bottom on smaller screens */
  }
}


#activitytable td, #activitytable th {
 padding: 4px 8px;
 font-size: 12px;
/*  white-space: nowrap; */
}
#activitytable img {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 vertical-align: middle;
 margin-right: 6px;
}

#ulmenu ul {
overflow:hidden;
list-style-type:none;
line-height:24px;
padding-left:0;
margin:0 2px 2px 2px;
}

#ulmenu li {
float:left;
display:block;
font-family:sans-serif;
color:var(--b);
border:1px solid var(--w);
background:var(--w);
border-width:0 0 2px;
margin:2px;
padding:0 15px;
}


.kw-name {
  margin-top: 10px;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  color: #444;
}

  .kawaii-widget {
    max-width: 380px;
    margin: 20px auto;
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    font-family: system-ui, sans-serif;
    text-align: center;
  }

  .kw-img {
    width: 100%;
/*     height: 420px; */
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    object-fit: cover;
    object-position: top center;
    transition: opacity .25s ease;
  }


.kw-btn.pop {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

  .kw-buttons {
    margin-top: 14px;
    display: flex;
    gap: 10px;
  }

  .kw-btn {
    flex: 1;
    padding: 12px 0;
    font-size: 1.1rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .kw-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  }

  .kw-btn.kawaii {
    background: #ff7dc7;
    color: white;
  }

  .kw-btn.not {
    background: #d1d1d1;
    color: #333;
  }


  div.yl728 {  width: 300px; height: 250px; }
div.yl600 {  width: 300px; height: 600px; }
div.yl300 {  width: 300px; height: 250px; }
div.yl160 {  width: 160px; height: 600px; }

.roll-in-once {
  animation: roll-in-once 2s ease ;
}
@keyframes roll-in-once {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}


@media all and (min-width: 730px) {
	div.yl728 {  width: 728px; height: 90px; }
	div.yl600 {  width: 300px; height: 250px; }
}


.sidearrows {
position:fixed;
right:10px;
bottom:10px;
width:auto;
z-index:1000;
}

.makevisible {
cursor: pointer;
transition: all 0.2s ease;
}

.makevisible:hover {
background: #fdba3a;
transform: translateY(2px);
}

.makevisible:active {
transform: translateY(0);
}



/*--w:#FFF;
--r:#337ab7;
--b:#fdb327;

--w:#FFF;
--r:#337ab7;
--b:#222;

*/

#randombuttons a {
border:3px solid var(--r);
border-radius:1em 1em;
font-size:1.1em;
border-width:0 0 2px;
padding:3px 15px;
}

A {
color:var(--r);
text-decoration:none;
}

A:hover {
color:#23527c;
text-decoration:underline;
}

div.miniframe {
border:1px solid var(--b);
padding-top:0;
margin:2px 2px 5px;
}

h4.miniframe {
margin-top:0;
margin-bottom:0;
background:var(--b);
border:1px solid var(--b);
color:var(--r);
padding:0 3px 3px;
}

#tile2search select,#tile2search input {
width:150px;
float:left;
text-align:center;
margin:3px;
}

select {
background:#FFF!important;
color:#000!important;
}

#top_rand ul {
overflow:hidden;
list-style:none;
font-size:1em;
font-family:sans-serif;
text-indent:0;
line-height:32px;
margin:0;
}

#top_rand li {
height:32px;
vertical-align:middle;
display:block;
float:left;
margin-left:5px;
color:var(--b);
background:var(--w);
opacity:1;
border-radius:10px 10px;
border:1px solid var(--w);
padding:2px 10px;
}

#top_rand li:hover {
background:var(--w);
}

td.follow {
text-align:left;
width:auto;
border:1px solid #f67;
border-radius:.5em 3em 3em .5em;
margin-left:15px;
padding:8px 15px;
}

#top_rand table {
background:#eee;
padding:0;
}

#top_rand td {
padding:0;
}

BODY {
font-family:sans-serif;
text-align:center;
font-size:.9em;
color:#080808;
margin:0;
padding:0;
}

td.newsidemenu {
background:#FFF url(https://www.animecharactersdatabase.com/bg/1_30_gray_2.png) repeat-y;
border:1px solid silver;
border-width:1px 0 0 1px;
margin:0;
padding:10px;
}

td.maincontent {
border-spacing:0;
border:1px solid silver;
border-width:1px 0 0;
margin:0;
padding:0;
}

.big {
font-size:140%;
}

.s400 {
width:400px;
}

.s500 {
width:500px;
}

.s600 {
width:600px;
}

TABLE {
border-spacing:5px;
margin:auto;
width: 100%;
}

 /* =========================================================
    ACDB 2026 — Global Form Defaults
    ========================================================= */

form {
    margin-top: 0;
}


/* ---------------------------------------------------------
   Form controls
   --------------------------------------------------------- */

input,
select,
textarea {
    box-sizing: border-box;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--acdb2026-border-dark);
    border-radius: var(--acdb2026-radius);
    background: #fff;
    color: var(--acdb2026-text);
    font: inherit;
    transition:
        border-color var(--acdb2026-transition),
        box-shadow var(--acdb2026-transition);
}

textarea {
    min-height: 100px;
    resize: vertical;
}


/* ---------------------------------------------------------
   Focus
   --------------------------------------------------------- */

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--acdb2026-blue-light);
    box-shadow: 0 0 0 3px rgba(110, 168, 255, .18);
}


/* ---------------------------------------------------------
   Submit
   --------------------------------------------------------- */

input[type="submit"],
button[type="submit"] {
    cursor: pointer;
    font-weight: 600;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    border-color: var(--acdb2026-blue-light);
    background: var(--acdb2026-blue-light);
    color: #fff;
}

input[type="submit"]:active,
button[type="submit"]:active {
    transform: translateY(1px);
}


H1 {
font-family:sans-serif;
color:var(--w);
padding:10px;
}

H2 {
font-family:sans-serif;

text-align:left;
}

H3 {
text-indent:10px;
text-align:left;

padding:5px;
}

UL {
list-style:disc;
color:blue;
text-align:left;
}

DL {
width:95%;
text-align:left;
margin:auto;
}

DT {
border:1px solid #ace;
color:#000;
font-weight:700;
font-family:sans-serif;
border-width:0 0 1px;
padding:2px;
}

DD {
margin-bottom:10px;
text-indent:10px;
padding:4px;
}

div.nc_date {
text-align:right;
font-style:italic;
color:#333;
padding:5px;
}

div.nc_name {
text-align:left;
font-style:italic;
padding:5px;
}

div.nc_comment {
background:#F8F8F8;
text-align:left;
border-color:silver;
border-style:solid;
border-width:1px 0;
padding:20px;
}

#watching th {
background:#000;
color:#FFF;
}

#watching td {
background:#EFEFEF;
width:120px;
vertical-align:top;
font-weight:700;
}

#guildlist table {
width:95%;
border-color:silver;
border-style:solid;
border-width:1px;
}

#guildlist th {
border-color:#000;
border-style:solid;
border-width:0 0 1px;
}

#guildlist td {
border-color:silver;
border-style:solid;
border-width:0 0 1px;
}

span.i {
font-style:italic;
}

h2.role {
text-align:center;
background:#EFEFEF;
border-color:silver;
border-style:solid;
border-width:1px;
padding:2px;
}

img.spaceme {
padding-left:20px;
}

div.commentbubbletop {
padding-right:20px;
font-style:italic;
}

div.commentbubble {
font-family:sans-serif;
font-size:12px;
margin:20px;
padding:5px 25px 25px;
}

span.score {
text-transform:none;
font-family:sans-serif;
font-size:1.5em;
color:#135;
font-weight:700;
padding-right:30px;
}

table.commentbubble {
margin-top:0;
margin-bottom:10px;
width:100%;
border-spacing:0;
}

td.commentbubble {
text-align:left;
color:#000;
box-shadow:0 5px 1em #999;
border:3px solid #ace;
border-radius:5px 5px;
border-width:3px 1px;
padding:5px 15px 0;
}

th.commentbubble {
width:180px;
height:110px;
text-align:left;
color:purple;
background:url(img/leftbubble_ace_100x200.png) center right no-repeat;
}

p.red {
color:red;
font-size:9px;
}

table.modpannel {
margin:10px 0 0;
}

div.middleframe {
margin:10px 15px 10px 10px;
padding:5px;
}

div.outframe {
margin:0px;
padding:5px;
}

#frameheader img {
height:24px;
width:24px;
}

h1.frameheader {
margin-top:0;
margin-bottom:0;
font-family:sans-serif;
font-size:1em;
text-align:left;
}

#menu2012 table {
font-size:.75em;
width:100%;
border-spacing:0;
margin:0;
padding:0;
}

#menu2012 td {
width:25%;
vertical-align:top;
padding:0 15px;
}

#menu2012 h3 {
text-align:left;
font-family:sans-serif;
color:red;
font-size:1.2em;
}

#menu2012 ul {
list-style:none;
padding:10px;
}

#menu2012 li {
color:#FF0;
border-width:0 0 1px;
margin:5px auto;
}

#menu2012 li:hover {
background:#FF0;
color:#000;
}

td.mar2012side {
border:1px solid silver;
width:300px;
vertical-align:top;
font-size:10px;
border-width:1px 0 0;
padding:0;
}

#cbtable table {
width:100%;
border-spacing:5px;
}

div.cb {
width:150px;
text-align:left;
font-size:12px;
overflow:auto;
height:300px;
margin:auto;
}

div.box {
border:solid #FFF 1px;
border-width:0 1px 1px 0;
margin:auto auto 10px;
}



div.notice {
background:#fcc;
width:auto;
border-radius:20px;
box-shadow:2px 5px 2em red;
margin:50px;
padding:5px;
}

div.notice_inner {
background:#fe9;
width:auto;
color:#000;
font-size:1.2em;
font-family:monospace;
font-weight:700;
border:1px solid red;
border-radius:10px;
box-shadow:2px 5px 2em red;
margin:10px;
padding:10px;
}

#bestform textarea {
width:100%;
height:200px;
}

font.black {
background:#000;
color:#000;
}



#ulmenu2 ul {
overflow:hidden;
list-style-type:none;
line-height:24px;
}

#ulmenu2 li {
height:24px;
float:left;
display:block;
font-size:.85em;
font-family:sans-serif;
border-radius:1em 2em;
color:#000;
border:1px solid #ccc;
border-color:#59f;
border-width:0 1px;
margin:10px;
padding:5px 15px;
}

#ulmenu3 ul {
overflow:hidden;
list-style-type:none;
line-height:2em;
}

#ulmenu3 li {
float:left;
display:block;
font-size:.9em;
font-family:sans-serif;
text-align:center;
color:#000;
border:1px solid #69f;
border-width:0 0 2px;
margin:10px;
padding:0 2px;
}

#ulmenu3 li:hover {
color:#000;
background-color:#FFF;
}



/* =========================================================
   ACDB 2026 — Best Table
   A reusable modernization layer for older table-based pages.
   ========================================================= */

#besttable {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px;
    color: var(--acdb2026-text, #222);
    text-align: left;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#besttable *,
#besttable *::before,
#besttable *::after {
    box-sizing: border-box;
}

/* ---------- Tables ---------- */

#besttable table {
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--acdb2026-border, #d9e0e8);
    border-spacing: 0;
    border-collapse: separate;
    border-radius: var(--acdb2026-radius, 6px);
    background: var(--acdb2026-surface, #fff);
    box-shadow: var(--acdb2026-shadow, 0 2px 8px rgba(0, 0, 0, .08));
    overflow: hidden;
}

#besttable caption {
    padding: 10px 12px;
    color: var(--acdb2026-muted, #68717c);
    font-weight: 600;
    text-align: left;
}

#besttable th,
#besttable td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--acdb2026-border, #d9e0e8);
    text-align: left;
    vertical-align: middle;
}

#besttable th {
    color: var(--acdb2026-text, #222);
    background: var(--acdb2026-surface-soft, #f5f8fc);
    font-weight: 700;
}

#besttable tr:last-child > th,
#besttable tr:last-child > td {
    border-bottom: 0;
}

#besttable tbody tr {
    transition:
        background-color var(--acdb2026-transition, 140ms ease),
        box-shadow var(--acdb2026-transition, 140ms ease);
}

#besttable tbody tr:hover {
    background: var(--acdb2026-surface-hover, #eaf2ff);
}

/* ---------- Links ---------- */

#besttable a {
    color: var(--acdb2026-blue, #2a60b2);
    text-decoration: none;
    transition:
        color var(--acdb2026-transition, 140ms ease),
        background-color var(--acdb2026-transition, 140ms ease),
        border-color var(--acdb2026-transition, 140ms ease);
}

#besttable a:hover,
#besttable a:focus-visible {
    color: #174d9b;
    text-decoration: underline;
}

#besttable a:focus-visible,
#besttable button:focus-visible,
#besttable input:focus-visible,
#besttable select:focus-visible,
#besttable textarea:focus-visible {
    outline: 2px solid var(--acdb2026-blue-light, #6ea8ff);
    outline-offset: 2px;
}

/* ---------- Forms and controls ---------- */

#besttable form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

#besttable input,
#besttable select,
#besttable textarea,
#besttable button {
    max-width: 100%;
    font: inherit;
}

#besttable input,
#besttable select,
#besttable textarea {
    min-height: 34px;
    border-color: var(--acdb2026-border-dark, #c3ccd8);
    border-radius: var(--acdb2026-radius, 6px);
    background: #fff;
    color: var(--acdb2026-text, #222);
}

#besttable input[type="text"],
#besttable input[type="search"],
#besttable input[type="email"],
#besttable input[type="number"],
#besttable input[type="url"],
#besttable input[type="password"],
#besttable select,
#besttable textarea {
    flex: 1 1 160px;
    width: auto;
}

#besttable input[type="checkbox"],
#besttable input[type="radio"] {
    flex: 0 0 auto;
    width: auto;
    min-height: auto;
    accent-color: var(--acdb2026-blue, #2a60b2);
}

#besttable input[type="submit"],
#besttable input[type="button"],
#besttable button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--acdb2026-border-dark, #c3ccd8);
    border-radius: var(--acdb2026-radius, 6px);
    background: var(--acdb2026-surface, #fff);
    color: var(--acdb2026-blue, #2a60b2);
    cursor: pointer;
    font-weight: 600;
    transition:
        color var(--acdb2026-transition, 140ms ease),
        background-color var(--acdb2026-transition, 140ms ease),
        border-color var(--acdb2026-transition, 140ms ease),
        box-shadow var(--acdb2026-transition, 140ms ease),
        transform var(--acdb2026-transition, 140ms ease);
}

#besttable input[type="submit"]:hover,
#besttable input[type="button"]:hover,
#besttable button:hover {
    border-color: var(--acdb2026-blue-light, #6ea8ff);
    background: var(--acdb2026-blue, #2a60b2);
    color: #fff;
    box-shadow: 0 2px 7px rgba(42, 96, 178, .18);
}

#besttable input[type="submit"]:active,
#besttable input[type="button"]:active,
#besttable button:active {
    transform: translateY(1px);
}

/* ---------- Lists ---------- */

#besttable ul,
#besttable ol {
    margin: 0;
    padding: 0;
    text-align: left;
}

#besttable ul {
    list-style: none;
}

#besttable li {
    margin: 0;
    padding: 6px 0;
}

#besttable li + li {
    border-top: 1px solid var(--acdb2026-border, #d9e0e8);
}

#besttable li > a {
    display: inline-block;
    padding: 3px 5px;
    border-radius: var(--acdb2026-radius-small, 4px);
}

#besttable li > a:hover {
    background: var(--acdb2026-surface-hover, #eaf2ff);
    text-decoration: none;
}

/* ---------- Images and common content ---------- */

#besttable img {
    max-width: 100%;
    height: auto;
    border: 0;
    border-radius: var(--acdb2026-radius-small, 4px);
    vertical-align: middle;
}

#besttable p {
    margin: 6px 0;
    font-size: .9em;
}

#besttable hr {
    margin: 12px 0;
    border: 0;
    border-top: 1px solid var(--acdb2026-border, #d9e0e8);
}

@media (max-width: 700px) {
    #besttable {
        padding: 4px;
    }

    #besttable th,
    #besttable td {
        padding: 7px 8px;
    }

    #besttable form {
        align-items: stretch;
        flex-direction: column;
    }

    #besttable form > input:not([type="checkbox"]):not([type="radio"]),
    #besttable form > select,
    #besttable form > textarea,
    #besttable form > button,
    #besttable form > input[type="submit"],
    #besttable form > input[type="button"] {
        width: 100%;
    }

    #besttable table {
        min-width: 0;
    }

    #besttable img {
        max-height: 240px;
        object-fit: contain;
    }
}


#linkheader input,select {
margin:0 auto;
}

#linkheader table {
font-size:10px;
}

h2.frame2 {
color:#F80;
text-align:left;
border:solid #eaeaea 1px;
font-size:100%;
padding-bottom:10px;
text-indent:20px;
border-width:0 0 1px;
}

div.frame2 {
border:1px solid gray;
border-color:#333 #EFEFEF #EFEFEF #AFAFAF;
border-width:2px 1px 1px;
margin:10px 0;
padding:0;
}

.s0 {
background:#dfefdf;
}

div.spro {
border:solid #efefef 1px;
font-size:11px;
margin:3px;
padding:3px;
}

table.login_box {
font-size:.9em;
color:#000;
text-align:center;
opacity:.85;
}

#login_box td {
border-spacing:0;
padding:2px;
}

#login_box input {
margin:0;
}

#qsearch INPUT,#qsearch SELECT {
font-weight:700;
width:100%;
margin-top:0;
}

table.randomlinks {
text-align:center;
width:100%;
border-spacing:0;
margin:0 auto;
}

table.content {
width:100%;
border-spacing:5px;
min-height:600px;
text-align:center;
margin:0 auto;
}

div.footer {
border:1px solid #000;
border-width:10px 0 0;
}

table.footer {
width:100%;
text-align:left;
}

table.title {
width:100%;
opacity:1;
}

h1.logo {
border:none;
}

table.rlinks {
font-size:90%;
}

#rlinks td {
padding:0 25px;
}

td.left {
text-align:left;
width:20%;
padding-left:10px;
font-size:1.1em;
}

td.center {
text-align:center;
width:60%;
padding-top:5px;
padding-bottom:5px;
}

td.right {
text-align:right;
width:20%;
padding-right:10px;
font-size:1.1em;
}

li.characterthumbs {
float:left;
display:block;
text-align:center;
border-color:silver;
border-style:solid;
border-width:1px;
margin:5px;
padding:10px;
}

ul.characterthumbswide {
overflow:hidden;
list-style-type:none;
margin:auto;
padding:0;
}

ul.characterthumbs {
overflow:hidden;
list-style-type:none;
width:928px;
margin:auto;
padding:0;
}

table.menubuttons {
text-align:center;
width:100%;
font-size:.8em;
font-weight:400;
padding:0;
}

div.mainsearch {
text-align:center;
margin:10px auto;
}

#mainsearch select {
width:160px;
text-align:center;
}

#mainsearch th {
width:100px;
border:1px solid #FFF;
background:#f8f8f8;
font-size:120%;
}

#mainsearch td {
border:1px solid #FFF;
background:#e8e8e8;
vertical-align:middle;
font:90% Arial;
padding:5px;
}

#mainsearch table {
background:#efefef;
border-spacing:5px;
border:1px solid #e0e0e0;
margin:auto;
}

div.choosemt {
width:600px;
text-align:center;
margin:10px auto;
}

div.pager {
margin:10px auto;
}

a.page,a.next,a.current {
border-radius:1em 2em;
border:1px solid var(--b);
background:var(--b);
color:var(--w);
font-weight:700;
font-size:1.5em;
font-family:monospace;
padding:10px;
}

a.current {
color:var(--r);
background:var(--w);
border-color:var(--w);
}

a.page:hover,a.next:hover {
color:var(--r);
background:var(--w);
}

a.current:hover {
color:var(--b);
background:var(--w);
}

#counts a {
font-size:2em;
}

#counts td {
width:300px;
}

#counts table {
width:100%;
text-align:center;
}

table.vs {
width:700px;
}

th.vs_top {
font-size:1.1em;
text-align:center;
border-color:silver;
border-style:solid;
border-width:0 0 1px;
}

td.vs {
font-style:italic;
padding:1px 50px;
}

#tile li {
float:left;
display:block;
text-align:center;
border:1px solid #ACE;
box-shadow:5px 1px 5px #ACE;
transition:box-shadow 1s;
margin:5px;
padding:10px;
}

#tile li:hover {
box-shadow:7px 1px 7px #FAC;
border-color:#FFF;
}

#tile img {
width:150px;
border-style:none;
}

#bigtile li {
float:left;
display:block;
text-align:center;
box-shadow:5px 1px 4px #ddd;
border:1px solid #ddd;
margin:5px;
padding:10px;
}

#bigtile li:hover {
border-color:#FFF;
}

td.green {
background:green;
}

div.vector {
margin:10px 0;
}

img.vector {
height:75px;
width:75px;
box-shadow:10px 5px 1em #000;
padding:5px;
}

#wtcb_box td {
background:green;
text-align:center;
border-color:silver;
border-style:solid;
border-width:2px;
padding:5px;
}

span.small {
font-size:.8em;
}

span.big {
font-size:1.2em;
}

div.h90 {
width:728px;
height:90px;
margin:20px auto;
}

div.h728 {
height:15px;
min-width:728px;
margin:auto;
}

div.w160 {
width:160px;
height:600px;
margin:auto;
}

div.h250 {
width:300px;
height:250px;
margin:20px auto;
}

span.character_name {
display:block;
font-size:1.25em;
font-weight:700;
margin:0 0 5px;
}

span.character_source {
display:block;
font-size:.9em;
margin:0 0 15px;
}

td.replies {
text-align:center;
background:#48F;
color:#FFF;
width:50px;
}

span.edited {
display:block;
font-size:.9em;
font-style:italic;
color:gray;
margin:20px 0 5px;
}

div.forum_navi {
font-size:1.25em;
padding-bottom:15px;
padding-top:15px;
}

tr.forum_top {
background:#48F;
color:#0048FF;
font-size:1.2em;
font-family:sans-serif;
}

h1.forum_top {
background:#13F;
color:#FAFAFA;
font-size:1.1em;
border-color:silver;
border-style:solid;
border-width:1px 0;
margin:5px auto;
}

td.post_top {
text-align:left;
border-color:silver;
border-style:solid;
border-width:0 0 1px;
padding:20px 20px 2px;
}

td.forum_name {
text-align:left;
width:60%;
}

td.forum_foot {
border-color:silver;
border-style:solid;
border-width:1px 0 0;
padding:2px 20px 20px;
}

table.forum {
text-align:center;
padding-top:50px;
padding-bottom:50px;
width:100%;
border-spacing:0;
font-size:.8em;
color:#08F;
margin:auto;
}

td.forum_post {
background:#D8E8FF;
text-align:left;
font-size:1.1em;
color:#000;
vertical-align:top;
padding:20px;
}

td.forum_profile {
background:#F8F8F8;
text-align:left;
vertical-align:top;
border-color:silver;
border-style:solid;
border-width:0 1px 0 0;
padding:10px;
}

#forum a {
color:red;
font-size:1em;
font-weight:700;
}

div.code {
text-align:left;
color:#000;
font-size:1em;
font-family:monospace;
white-space:pre;
border-color:silver;
border-style:dashed;
border-width:1px;
margin:20px;
padding:20px;
}

table.ab_details {
width:80%;
text-align:left;
text-indent:20px;
}

table.sourcechars {
padding-top:10px;
text-align:left;
width:95%;
border-color:gray;
border-style:dashed;
border-width:1px 0 0;
}

td.imgside {
width:20%;
min-width:200px;
text-align:center;
vertical-align:top;
}

span.pubcname {
font-weight:700;
font-size:1.2em;
}

table.frontpage {
width:95%;
}

div.pro_select {
background:#FCFCFC;
border-color:gray #CFCFCF #CFCFCF;
border-style:solid;
border-width:1px;
}

table.smallprofile {
border-spacing:0;
width:100%;
margin:5px auto;
}

td.source_image {
width:210px;
vertical-align:top;
}

table.source_details_table {
width:90%;
overflow:auto;
margin:5px auto;
}

tr.header {
background:#CFC;
font-size:1.2em;
color:#08F;
}

table.who_posts {
width:100%;
background:#efefef;
border-spacing:5px;
border:1px solid #e0e0e0;
}

i.who_posts {
color:orange;
}

td.who_posts_b {
text-align:left;
border:1px solid #FFF;
background:#e8e8e8;
vertical-align:middle;
font:90% Arial;
padding:5px;
}

div.who_r_unsolved {
background:#efefef;
margin-bottom:20px;
padding:10px;
}

div.who_r_solved {
background:#FF0;
margin-bottom:20px;
padding:10px;
}

#who_replies table {
width:100%;
border:1px solid gray;
}

#who_replies th {
background:silver;
color:#000;
width:200px;
border:1px solid gray;
text-align:center;
}

#who_replies td {
padding:20px;
}

div.who_r_date {
font-size:80%;
font-style:italic;
}

.w100 {
width:100px;
}

div.whonavi {
background:#CCC;
color:#fefefe;
border:1px solid #666;
}

#whonavi a {
background:#333;
color:#fefefe;
font-weight:700;
border:1px solid #333;
padding:5px;
}

#whonavi a:hover {
color:#333;
background:#fefefe;
}

#tile1 li {
float:left;
display:block;
text-align:center;
border:1px solid #eee;
margin:5px;
border-spacing:0px;
padding:5px;
}

#tile1 li:hover {
border:1px solid #aaa;
}

div.tile1top {
text-align:left;
font-family:sans-serif;
font-size:.8em;
margin-bottom:10px;
padding:0 5px 5px;
}

div.tile1bottom {
text-align:right;
border:1px solid #FFF;
font-family:sans-serif;
font-size:.8em;
margin-top:5px;
height:50px;
padding:15px 5px 5px;
}

div.tile3top {
text-align:center;
font-family:sans-serif;
font-size:.8em;
margin-bottom:10px;
height:50px;
border-width:0 0 1px;
}

div.tile3bottom {
text-align:right;
font-family:sans-serif;
font-size:.8em;
margin-top:5px;
}

#menutable {
color:#fca;
}

table.menutable {
width:auto;
border:1px solid #000;
background:#000;
margin:auto;
}

#menutable td {
vertical-align:top;
padding:15px;
}

#menutable h2 {
font-family:sans-serif;
font-size:1.5em;
color:silver;
border:3px solid #444;
padding-bottom:10px;
background:#000;
border-width:0 0 1px;
}

#menutable ul {
list-style:circle;
text-indent:0;
font-size:1.2em;
font-family:sans-serif;
padding:5px;
}

#menutable li {
color:silver;
margin-bottom:5px;
padding:3px;
}

#menutable li:hover {
color:var(--w);
list-style:disc;
border-color:var(--w);
}

#menutable a {
color:var(--w);
}

#top_qs table {
border-spacing:0;
padding:0;
}

#top_qs td {
border-spacing:0;
width:12%;
padding:2px;
}

#top_qs input,#top_qs select {
font-size:10px;
font-family:sans-serif;
width:100%;
margin:0;
padding:0;
}



table.top_box table {
width:100%;
height:300px;
}

#loginbox {
color:#eee;
}

#loginbox a {
color:var(--w);
font-weight:700;
}

#menugeardiv ul,#menugeardiv2 ul,#menugeardiv3 ul {
padding-left:0;
background:var(--b);
color:var(--w);
list-style:none;
}

#menugeardiv li,#menugeardiv2 li,#menugeardiv3 li {
background:var(--b);
color:var(--w);
padding:5px;
}

#menugeardiv a,#menugeardiv2 a,#menugeardiv3 a {
text-decoration:none;
color:var(--w);
}

td.nameasks {
vertical-align:top;
text-align:left;
text-indent:30px;
color:#eee;
background:#f47;
background-image:linear-gradient(15deg,#f4715%,#fab55%,#fab70%,#f4790%);
border:1px solid #f47;
border-radius:7px;
}

div.date {
background:#000;
color:#eee;
border:1px solid #000;
border-radius:5px;
}

td.msg {
text-align:left;
transition:background 1s border-radius 2s;
padding:15px;
}

td.msg:hover {
background:#FAC;
border-radius:15px;
}

td.msg2 {
text-align:left;
font-size:10px;
padding:0 15px 15px;
}

a.orange {
color:#f47;
}

a.orange:visited {
color:#FF8;
}

#exploreCharacters ul {
font-size:1.2em;
overflow:hidden;
list-style-type:none;
background:var(--w);
margin-top:0;
padding:0;
}

#exploreCharacters li {
float:left;
display:block;
font-family:sans-serif;
background:var(--w);
color:#000;
border:1px solid #FFF;
border-width:0 0 3px;
margin:2px;
padding:0 15px;
}

#exploreCharacters li:hover {
border:1px solid #59f;
border-width:0 0 3px;
}

#exploreCharacters a {
text-decoration:none;
color:#fefefe;
}

#exploreCharacters a:hover {
text-decoration:none;
color:#59f;
}

#mobileform a {
font-size:1.2em;
padding:10px 0;
}

#mobileform li {
text-indent:0;
border:1px solid var(--w);
border-width:0 0 0 2px;
margin:0 0 10px;
padding:3px 0 3px 10px;
}

#mobileform li:hover {
transition-duration:.5s;
background:var(--w);
}

#mobileform ul {
list-style:none;
margin:0;
padding:0;
}

#menu2017 dd {
text-indent:0;
margin-left:0;
}

#menu2017 dd.desc {
text-indent:15px;
margin-top:0;
padding-top:0;
}

#nuit ul {
list-style-type:none;
overflow:hidden;
background:#333;
margin:0;
padding:0;
}

#nuit li {
float:left;
margin-left:2px;
}

#nuit li a,.dropbtn {
display:inline-block;
text-align:center;
text-decoration:none;
color:#ddd;
padding:6px 8px;
}

#nuit .dropbtn {
padding:15px;
}

#nuit li a:hover,.dropdown:hover .dropbtn {
background:#111;
color:#FFF;
}

#nuit li.dropdown {
display:inline-block;
}

#nuit .dropdown-content {
display:none;
position:absolute;
background:none;
min-width:100px;
z-index:1;
box-shadow:0 5px 1em #333;
}

#nuit .dropdown-content a {
text-decoration:none;
display:block;
text-align:left;
color:#333;
margin:2px 0;
padding:6px 8px;
}

#nuit .dropdown:hover .dropdown-content {
display:block;
background:#FFF;
border:1px solid #dedede;
}

#nuit .dropbtn2 {
border-width:0;
padding:15px;
}

#nuit input[type=text] {
color:#FFF;
background:#111;
padding:17px;
}

#nuit input[type=submit] {
padding:17px;
}

#nuit input[type=text]:hover {
color:#FFF;
background:#111;
}

#mynewsearch select,#mynewsearch input {
width:90%;
font-size:1.2em;
margin:5px auto;
}

#superside::-webkit-scrollbar {
width:5px;
height:5px;
}

#superside::-webkit-scrollbar-thumb {
background:var(--b);
}

.c1 {
color:#333;
}

.c2 {
color:#59f;
}

.c3 {
color:#f80;
}

.b3 {
background:#f80;
}

.b4 {
background:#222;
}

.op {
opacity:.85;
}

.pad5 {
padding:5px;
}

.zero {
border-spacing:0 0;
margin:0;
padding:0;
}

.zerot {
width:auto;
border-spacing:0 0;
margin:0;
}

.top {
vertical-align:top;
}

.boxshadow {
box-shadow:5px 5px 5px #ACE;
border-width:0;
}

.boxshadow:hover {
box-shadow:5px 5px 5px #FAC;
}

.boxshadow2 {
box-shadow:0 5px 1em #ACE;
border-width:0;
}

.boxshadow2:hover {
box-shadow:0 5px 1em #FAC;
}

#darkbgzone * {
color:#9d9d9d;
}

.flexitem {
display:inline;
margin:5px;
}


.thumb200 {
width:200px;
height:200px;
}

.thumb150 {
width:150px;
height:150px;
}

.thumb100 {
width:100px;
height:100px;
}

.thumb75 {
width:75px;
height:75px;
}

.thumb50 {
width:50px;
height:50px;
}

div.topspace {
height:90px;
}

div.yl2 {
width:300px;
height:600px;
}

div.yl7 {
width:160px;
height:600px;
}

.bg1 {
background:#2a60b2;
}

.bg2 {
background:#6ea8ff;
}

.bg4 {
background:#b27f18;
}

.bg5 {
background:#ffc655;
}

.bo1 {
border:1px solid #2a60b2;
}

.bo2 {
border:1px solid #6ea8ff;
}

.bo3 {
border:1px solid #59F;
}

.bo4 {
border:1px solid #b27f18;
}

.bo5 {
border:1px solid #ffc655;
}

.fg1 {
color:#2a60b2;
}

.fg2 {
color:#6ea8ff;
}

.fg3 {
color:#59F;
}

.fg4 {
color:#b27f18;
}

.fgi {
color:inherit;
}

.pad2 {
padding:5px 15px;
}

.point {
cursor:pointer;
}

.w200 {
width:150px;
}

dd.titles {
text-indent:0;
margin:0;
padding:0;
}

#newmenu div:hover {
background:#ffc655;
color:#b27f18;
}

div.submenu {
background:#59F;
text-align:left;
font-size:12px;
padding:3px 3px 3px 15px;
}

#kona_links div {
font-size:1.2em;
padding:10px 10px 10px 70px;
}

div.quotebg {
min-height:300px;
width:400px;
margin:10px;
}

div.quotecontainer {
font-size:2em;
padding:30px;
}

a.quoteline {
font-weight:700;
text-shadow:-1px 0 black, 0 1px #222, 1px 0 #222, 0 -1px #222;
color:#fff;
}

a.quoteline:hover {
background:none;
}

div.quotet {
width:850px;
border:2px solid #000;
border-spacing:0 0;
margin:20px;
padding:0;
}

table.quotet {
width:850px;
height:400px;
border:2px solid silver;
border-spacing:0 0;
margin:0;
padding:0;
}

td.quotebg2 {
height:392px;
width:295px;
margin:0;
}

td.quotebg3 {
background:#333;
vertical-align:top;
}

p.quoteline2 {
font-size:2em;
font-weight:700;
text-shadow:-1px 0 black, 0 1px #222, 1px 0 #222, 0 -1px #222;
color:#fff;
cursor:pointer;
padding:10px 30px 30px;
}

div.quotet_small {
width:400px;
border:2px solid #000;
border-spacing:0 0;
margin:10px;
padding:0;
}

table.quotet_small {
width:400px;
height:100px;
border:2px solid silver;
border-spacing:0 0;
margin:0;
padding:0;
}

td.quotebg2_small {
height:100px;
width:100px;
margin:0;
}

td.quotebg3_small {
background:#333;
border:2px solid silver;
vertical-align:top;
border-width:0 0 0 2px;
}

p.quoteline2_small {
font-size:1em;
font-weight:700;
text-shadow:-1px 0 black, 0 1px #222, 1px 0 #222, 0 -1px #222;
color:#fff;
cursor:pointer;
padding:10px 30px 30px;
}

#calendar th {
width:120px;
background:#b27f18;
color:#ffc655;
}

#calendar td {
text-align:left;
vertical-align:top;
height:150px;
background:#2a60b2;
color:#ffc655;
padding:5px;
}

#calendar p {
padding-top:0;
margin-top:0;
font-size:1.2em;
margin-bottom:5px;
}

#calendar a {
color:#FFF;
text-decoration:none;
}

#calendar a:hover {
color:#6ea8ff;
text-decoration:underline;
}

div.va {
margin-top:5px;
}

#va a {
text-decoration:none;
font-weight:700;
text-size:1.2em;
}

#characterzone * {
border-radius:0 0!important;
}

#characternames h1 {
text-align:left;
font-size:2em;
background:var(--w);
color:var(--r);
margin:0;
}

#characternames a {
color:var(--r);
}

#characternames h3 {
font-size:1em;
padding-top:0;
background:var(--w);
color:var(--b);
border:1px solid var(--b);
border-width:0 0 2px;
margin:0;
}

#sidephoto table {
border:1px solid #000;
width:200px;
margin-right:0;
border-spacing:0 0;
padding:0;
}

#sidephoto th {
text-align:right;
border-spacing:0 0;
background:var(--b);
color:var(--w);
margin:0;
padding:0 5px;
}

#sidephoto td {
text-align:left;
border-spacing:0 0;
border:1px solid var(--b);
border-width:0 0 0 1px;
margin:0;
padding:10px 5px;
}

textarea,img,#nuit * {
border-radius:0 0;
}

a.follow,span.b,.bold {
font-weight:700;
}


.left,div.forum_left,#source_details_table th,div.who_replies,div.top_box,#modtable td {
text-align:left;
}

.right,div.watchingfooter,td.footright,ul.footright,th.vs,div.forum_right,#modtable tr,div.sidephoto {
text-align:right;
}

.center,td.footcenter,div.forum_center {
text-align:center;
}

IMG,#randomlinks img,#characterthumbswide img,img.noborder,#pager img,#bigtile img {
border-style:none;
}

LI,#cbtable input,#cbtable textarea {
color:#000;
}

TH,#characternames a:hover {
color:var(--b);
}

table.nc,#bestform input,#qsearch table,table.pager_links,table.source_table,.w100p {
width:100%;
}



#cb div,#cb2 div,textarea.cb {
font:11px Arial,Verdana,Tahoma,sans-serif;
}

#tile ul,#bigtile ul,#tile1 ul {
list-style-type:none;
overflow:hidden;
margin:auto;
padding:10px;
}

img.vector:hover,.solved {
background:#FF0;
}

td.forum_top,tr.post_top {
color:#0048FF;
font-family:sans-serif;
font-size:1.2em;
}

td.forum_image,.pad {
padding:10px;
}

div.quote,div.blockquote {
color:#000;
font-size:.8em;
text-align:center;
border-color:silver;
border-style:dashed;
border-width:1px;
margin:20px;
padding:20px;
}

#a_details th,#b_details th {
font-family:sans-serif;
font-size:1.1em;
text-align:right;
}

#a_details td,#b_details td {
font-size:1em;
}

td.who_posts_a,td.who_posts_c {
background:#f8f8f8;
border:1px solid #FFF;
font-size:80%;
width:100px;
}

#nuit .dropdown-content a:hover,.c4,#darkbgzone a,.fgw {
color:#FFF;
}

#superside::-webkit-scrollbar-track,.b2 {
background:#59f;
}

.b1,.bgw {
background:#FFF;
}

#darkbgzone a:hover,#darkbgzone h3,#darkbgzone input {
background:inherit;
}

.flexcontainer,div.flexcontainer {
display:flex;
flex-direction:row;
flex-wrap:wrap;
}

.m_plus,.hidetinyinline {
display:none;
}

div.yl1,div.yl3,div.yl4,div.yl5,div.yl6 {
height:250px;
width:300px;
}

.bg3,#supermenuside div:hover,td.today {
background:#59F;
}

.fg5,a.submenu {
color:#ffc655;
}

p.quotename,p.quotename_small {
color:#59f;
font-size:1.2em;
padding:30px 30px 0;
}

p.quoteacdb,p.quoteacdb_small {
color:silver;
font-size:.8em;
font-style:italic;
}

@media all and max-width: 731px {
div.topspace {
height:250px;
}

div.mobilesearchbox {
display:block!important;
}

.supermenuside,td.topmostsearchbox {
display:none!important;
}
}

@media all and max-width: 920px {
.m_extra {
display:none!important;
}

.m_plus {
display:block!important;
}
}

@media all and min-width: 600px {
table.acdbheaderdesktop {
display:table!important;
}

table.acdbheadermobile {
display:none;
}

.hidetinyinline {
display:inline;
}
}

@media all and min-width: 730px {
div.yl2 {
width:300px;
height:250px;
}

div.yl1,div.yl5,div.yl6 {
height:90px;
width:728px;
}
}

@media all and max-width: 768px {
#newmenu {
display:flex!important;
}

#newmenumobile {
display:none!important;
}

#mobileacdbhead {
display:block!important;
}
}

@media all and min-width: 768px {
#newmenumobile {
display:flex!important;
}

#newmenu,#mobileacdbhead {
display:none!important;
}
}

/*  adding mobile.css again  */

@media all and (max-width: 731px) {

div.topspace { height: 250px; }
.supermenuside { display: none !important; }
td.topmostsearchbox { display: none !important; }
div.mobilesearchbox { display: block !important; }
}

@media all and (max-width: 920px) {

.m_extra { display: none !important; }
.m_plus { display: block !important; }
}

@media all and (min-width: 600px) {
table.acdbheaderdesktop { display: table !important; }
table.acdbheadermobile { display: none; }

.hidetinyinline { display: inline; }
}

.box-big {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-big div {
  width: 100px;
  height: 75px;
  border: 2px solid #ace;
  border-radius: 5px;
  background-color: #f8f8fb;
  align-items: center;
  justify-content: center;

  margin: 0 0 5px 5px;

}




.search-results {
    margin: 0;
    padding: 0;
    list-style: none;

    background: #fff;
    border: 1px solid #ddd;
    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.08);
}

.search-result {
    border-bottom: 1px solid #eee;
}

.search-result:last-child {
    border-bottom: none;
}

.search-result-link {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    text-decoration: none;
    color: inherit;

    min-height: 72px;

    transition:
        background 0.15s ease,
        transform 0.08s ease;
}

.search-result-link:hover {
    background: #f7f7f7;
}

.search-result-link:active {
    transform: scale(0.99);
}

.search-thumb {
    width: 56px;
    height: 56px;

    border-radius: 10px;

    object-fit: cover;
    flex-shrink: 0;

    background: #eee;
}

.search-meta {
    flex: 1;
    min-width: 0;
}

.search-title {
    font-size: 1rem;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-subtitle {
    margin-top: 3px;

    font-size: 0.85rem;
    color: #777;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-score {
    font-size: 0.75rem;

    color: #999;

    flex-shrink: 0;
}

@media (max-width: 700px) {

    .search-result-link {

        padding: 12px;
        gap: 10px;
    }

    .search-thumb {
        width: 52px;
        height: 52px;
    }

    .search-title {
        font-size: 0.95rem;
    }

    .search-subtitle {
        font-size: 0.8rem;
    }
}





.arcadeNav {
    width: 50px;
    vertical-align: top;
    padding-top: 10px;
    background: #fecd71;
}

.arcadeContent {
    vertical-align: top;
}

.gameIcon {
    font-size: 1.5em;
    border: 1px solid white;
    border-radius: 1em;
    margin-bottom: 10px;
    text-align: center;
}

.gameIcon.active {
    background: white;
}

.gameIcon a {
    display: block;
    text-decoration: none;
}


.arcadeHeader {
text-align: left;
    padding: 8px 12px;
    font-size: 1.3em;
    font-weight: bold;
    background: linear-gradient(#ffe8b0,#ffd47a);
    border-bottom: 2px solid #d8a23a;
}

.arcadeHeader .icon {
    font-size: 1.6em;
}


@media (min-width: 2400px) {
	body {
		padding-left: 160px;
		padding-right: 160px;
		box-sizing: border-box;
	}

	div.sitecontainer {
	}
}

/* menu css */

:root{--acdb-blue:#2a60b2;--acdb-blue-light:#6ea8ff;--acdb-gold:#ffc655;--acdb-text:#172033;--acdb-muted:#64748b;--acdb-border:#dce3ee;--acdb-surface:#fff;--acdb-surface-alt:#f4f7fc;--acdb-shadow:0 18px 50px rgba(20,48,82,.14);--acdb-header-height:70px}
.acdb-header{position:sticky;top:0;z-index:1000;background: #59f;;border-bottom:1px solid var(--acdb-border);backdrop-filter:blur(14px)}
.acdb-header__inner{width:min(1220px,calc(100% - 32px));height:var(--acdb-header-height);margin:auto;display:flex;align-items:center;gap:22px}
.acdb-header__brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color: #ffc655; font-size:2em;line-height:1.05;font-weight:800;
letter-spacing: 0;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 ; text-decoration:none}
.acdb-header__brand-mark{width:43px;height:43px;display:grid;place-items:center;border-radius:11px;background:var(--acdb-blue);color:#fff;font-weight:900;letter-spacing:-.06em}
.acdb-header__brand-name{color: #ffc655;
letter-spacing: 0;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 ; width:145px;font-size:13px;line-height:1.05;font-weight:800}
.acdb-primary-nav{display:flex;align-self:stretch;margin-left:auto}


.acdb-primary-nav__trigger{position:relative;border:0;background:transparent;padding:0 15px;color: #fafafa;font-size:15px;font-weight:750}
.acdb-primary-nav__trigger:hover,.acdb-primary-nav__trigger:focus-visible,.acdb-primary-nav__trigger.is-active{color: var(--acdb-gold);}
.acdb-primary-nav__trigger.is-active:after{content:"";position:absolute;left:15px;right:15px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--acdb-blue)}
.acdb-header__actions{display:flex;align-items:center;gap:7px}
.acdb-search-button,.acdb-account-button,.acdb-header__mobile-toggle{min-height:42px;border:1px solid var(--acdb-border);border-radius:11px;background:var(--acdb-surface);color:var(--acdb-text)}
.acdb-search-button{display:flex;align-items:center;gap:7px;padding:0 10px}.acdb-search-button:hover,.acdb-account-button:hover{border-color:var(--acdb-blue-light)}
.acdb-search-button__icon{color:var(--acdb-blue);font-size:22px;line-height:1}.acdb-search-button kbd{margin-left:5px;padding:2px 5px;border:1px solid var(--acdb-border);border-bottom-width:2px;border-radius:5px;background:var(--acdb-surface-alt);color:var(--acdb-muted);font-size:10px}
.acdb-account-button{width:42px;font-size:10px}
.acdb-mega{position:absolute;top:var(--acdb-header-height);left:50%;width:min(1120px,calc(100vw - 30px));transform:translateX(-50%);background:#fff;border:1px solid var(--acdb-border);border-top:0;border-radius:0 0 20px 20px;box-shadow:var(--acdb-shadow);overflow:hidden;visibility:hidden;opacity:0;transition:opacity .14s ease,visibility .14s ease}
.acdb-mega.is-open{visibility:visible;opacity:1}.acdb-mega__inner{padding:22px}.acdb-mega__panel{animation:acdb-menu-in .12s ease}@keyframes acdb-menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.acdb-mega__columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 220px;gap:24px}.acdb-mega__section h2{margin:0 0 8px;color:var(--acdb-blue);font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.acdb-mega__link{display:block;padding:7px 9px;border-radius:8px;color:var(--acdb-text);text-decoration:none}.acdb-mega__link:hover,.acdb-mega__link:focus-visible{background:var(--acdb-surface-alt);color:var(--acdb-blue)}.acdb-mega__link small{display:block;margin-top:1px;color:var(--acdb-muted);font-size:11px}
.acdb-mega__feature{min-height:235px;padding:19px;border-radius:16px;background:linear-gradient(145deg,var(--acdb-blue),#173e74);color:#fff;display:flex;flex-direction:column;justify-content:flex-end}.acdb-mega__feature-icon{margin-bottom:auto;color:var(--acdb-gold);font-size:32px}.acdb-mega__feature strong{font-size:18px}.acdb-mega__feature p{margin:5px 0 17px;color:#dbe7f7;font-size:13px}.acdb-mega__feature a{align-self:flex-start;padding:7px 11px;border-radius:8px;background:var(--acdb-gold);color:#171717;font-size:13px;font-weight:850;text-decoration:none}
.acdb-header__mobile-toggle{display:none;width:42px;padding:9px}.acdb-header__mobile-toggle span{display:block;width:20px;height:2px;margin:4px auto;border-radius:2px;background:var(--acdb-text)}
.acdb-mobile-backdrop,.acdb-mobile-nav{display:none}
@media(max-width:1050px){.acdb-header__brand-name{display:none}.acdb-primary-nav__trigger{padding:0 10px}.acdb-primary-nav__trigger.is-active:after{left:10px;right:10px}}
@media(max-width:760px){.acdb-header{--acdb-header-height:62px}.acdb-header__inner{width:calc(100% - 20px);gap:9px}.acdb-header__mobile-toggle{display:block}.acdb-primary-nav{display:none}.acdb-header__brand{margin-right:auto}.acdb-search-button__label,.acdb-search-button kbd{display:none}.acdb-search-button{width:42px;justify-content:center;padding:0}.acdb-mega{display:none}
.acdb-mobile-backdrop{position:fixed;inset:0;z-index:1100;display:block;background:rgba(9,20,36,.52);opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}.acdb-mobile-backdrop.is-open{opacity:1;visibility:visible}
.acdb-mobile-nav{position:fixed;inset:0 auto 0 0;z-index:1200;display:block;width:min(390px,91vw);overflow-y:auto;background:#fff;box-shadow:20px 0 60px rgba(0,0,0,.18);transform:translateX(-105%);transition:transform .2s}.acdb-mobile-nav.is-open{transform:none}
.acdb-mobile-nav__header{height:62px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--acdb-border);position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
.acdb-mobile-nav__close{width:40px;height:40px;border:1px solid var(--acdb-border);border-radius:10px;background:#fff;font-size:25px;line-height:1}.acdb-mobile-nav__section{padding:18px 15px 2px}.acdb-mobile-nav__section>h2{margin:0 0 9px;color:var(--acdb-blue);font-size:18px}.acdb-mobile-nav__section>h3{margin:14px 0 2px;color:var(--acdb-muted);font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.acdb-mobile-nav__section a{display:block;padding:9px 8px;border-radius:8px;color:var(--acdb-text);text-decoration:none}.acdb-mobile-nav__section a:hover,.acdb-mobile-nav__section a:focus-visible{background:var(--acdb-surface-alt);color:var(--acdb-blue)}}
@media(prefers-reduced-motion:reduce){.acdb-mega,.acdb-mobile-nav,.acdb-mobile-backdrop{transition:none}.acdb-mega__panel{animation:none}}

.acdb-mega__section { text-align: left; }


.acdb-search-active .acdb-primary-nav {
	display: none;
}

.acdb-search-active .acdb-search-button {
	display: none;
}

.acdb-search-active .acdb-search {
	display: flex;
}




/* Modern page headers */
.page-header {
    text-align: left;
    margin: 0 0 28px;
    padding: 4px 16px 14px;
    border-bottom: 3px solid #6ea8ff;
}

.page-header h1 {
    margin: 0;
    font-size: clamp(26px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    color: #222;
}

.page-header h1 a {
    color: #2a60b2 !important;
    text-decoration: none;
}

.page-header h1 a:hover,
.page-header h1 a:focus {
    text-decoration: underline;
}

.page-header-description {
    max-width: 850px;
    margin: 7px 0 0;
    color: #666;
    font-size: 15px;
    line-height: 1.5;
}

/* Mobile */
@media (max-width: 600px) {
    .page-header {
        margin-bottom: 22px;
        padding: 2px 12px 12px;
    }

    .page-header h1 {
        font-size: 26px;
    }

    .page-header-description {
        font-size: 15px;
        line-height: 1.45;
    }
}


/*
 * ACDB Notifications GPT
 */

#acdb_notifications {
	position: fixed;
	top: calc(var(--acdb-nav-height, 60px) + 12px);
	right: 16px;
	z-index: 2000;

	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;

	width: min(420px, calc(100vw - 32px));

	pointer-events: none;
}

.acdb_notice {
	display: flex;
	align-items: stretch;

	width: 100%;
	max-width: 420px;

	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 8px;

	box-shadow:
		0 4px 12px rgba(0, 0, 0, .12),
		0 10px 30px rgba(0, 0, 0, .08);

	overflow: hidden;

	pointer-events: auto;

	animation: acdb_notice_in .25s ease-out both;
}

.acdb_notice_message {
	flex: 1;
	padding: 14px 16px;

	color: #222;
	font-size: 15px;
	line-height: 1.4;
}

.acdb_notice_close {
	flex: 0 0 auto;

	width: 42px;
	padding: 0;

	border: 0;
	border-left: 1px solid rgba(0, 0, 0, .08);

	background: transparent;
	color: #666;

	font-size: 22px;
	line-height: 1;

	cursor: pointer;

	transition:
		background-color .15s ease,
		color .15s ease;
}

.acdb_notice_close:hover {
	background: rgba(0, 0, 0, .05);
	color: #111;
}

.acdb_notice_close:focus-visible {
	outline: 2px solid #2a60b2;
	outline-offset: -2px;
}


/* Notification types */

.acdb_notice_success {
	border-right: 4px solid #2a60b2;
}

.acdb_notice_error {
	border-right: 4px solid #c62828;
}

.acdb_notice_warning {
	border-right: 4px solid #b27f18;
}

.acdb_notice_info {
	border-right: 4px solid #6ea8ff;
}


/* Dismiss animation */

.acdb_notice_out {
	animation: acdb_notice_out .2s ease-in forwards;
}

@keyframes acdb_notice_in {
	from {
		opacity: 0;
		transform: translateX(30px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes acdb_notice_out {
	from {
		opacity: 1;
		transform: translateX(0);
	}

	to {
		opacity: 0;
		transform: translateX(30px);
	}
}


/* Mobile */

@media (max-width: 600px) {
	#acdb_notifications {
		top: calc(var(--acdb-nav-height, 60px) + 8px);
		right: 8px;
		width: calc(100vw - 16px);
	}

	.acdb_notice {
		max-width: none;
	}
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.acdb_notice {
		animation: none;
	}

	.acdb_notice_out {
		animation: none;
		opacity: 0;
	}
}



.acdb-account-button__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3fa;
    color: #59f;
}

.acdb-account-button__avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.acdb-account-button__avatar--default {
    background: #eef3fa;
}

.acdb-account-button__default {
    font-size: 20px;
    line-height: 1;
}



/* =========================================================
   ACDB UI — reusable visual language
   Built around the modern interactive menu style:
   subtle surfaces, responsive borders, lively hover states.
   ========================================================= */

:root {
    --acdb2026-blue: #2a60b2;
    --acdb2026-blue-light: #6ea8ff;
    --acdb2026-blue-bright: #5599ff;
    --acdb2026-gold: #b27f18;
    --acdb2026-gold-light: #ffc655;

    --acdb2026-text: #222;
    --acdb2026-muted: #68717c;
    --acdb2026-border: #d9e0e8;
    --acdb2026-border-dark: #c3ccd8;

    --acdb2026-surface: #fff;
    --acdb2026-surface-soft: #f5f8fc;
    --acdb2026-surface-hover: #eaf2ff;
    --acdb2026-surface-active: #dceaff;

    --acdb2026-success: #247a45;
    --acdb2026-success-bg: #eaf7ef;
    --acdb2026-warning: #9a6810;
    --acdb2026-warning-bg: #fff7df;
    --acdb2026-danger: #a93636;
    --acdb2026-danger-bg: #fff0f0;

    --acdb2026-radius: 6px;
    --acdb2026-radius-small: 4px;
    --acdb2026-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    --acdb2026-transition: 140ms ease;
}

/* ---------- Base ---------- */

.acdb2026-ui,
.acdb2026-ui * {
    box-sizing: border-box;
}

.acdb2026-ui {
    color: var(--acdb2026-text);
}

.acdb2026-ui a {
    color: var(--acdb2026-blue);
    text-decoration: none;
    transition:
        color var(--acdb2026-transition),
        background-color var(--acdb2026-transition),
        border-color var(--acdb2026-transition),
        box-shadow var(--acdb2026-transition),
        transform var(--acdb2026-transition);
}

.acdb2026-ui a:hover {
    color: #174d9b;
}

/* ---------- Buttons / action links ---------- */

.acdb2026-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--acdb2026-border-dark);
    border-radius: var(--acdb2026-radius);
    background: var(--acdb2026-surface);
    color: var(--acdb2026-blue);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition:
        color var(--acdb2026-transition),
        background-color var(--acdb2026-transition),
        border-color var(--acdb2026-transition),
        box-shadow var(--acdb2026-transition),
        transform var(--acdb2026-transition);
}

.acdb2026-button:hover {
    background: var(--acdb2026-surface-hover);
    border-color: var(--acdb2026-blue-light);
    color: #174d9b;
    box-shadow: 0 1px 4px rgba(42, 96, 178, .14);
}

.acdb2026-button:active {
    background: var(--acdb2026-surface-active);
    transform: translateY(1px);
}

.acdb2026-button-primary {
    background: var(--acdb2026-blue);
    border-color: var(--acdb2026-blue);
    color: #fff !important;
}

.acdb2026-button-primary:hover {
    background: #174d9b;
    border-color: #174d9b;
    color: #fff !important;
}

.acdb2026-button-success {
    color: var(--acdb2026-success);
    border-color: #a9d6ba;
}

.acdb2026-button-success:hover {
    background: var(--acdb2026-success-bg);
    border-color: var(--acdb2026-success);
    color: var(--acdb2026-success);
}

.acdb2026-button-warning {
    color: var(--acdb2026-warning);
    border-color: #e4cc91;
}

.acdb2026-button-warning:hover {
    background: var(--acdb2026-warning-bg);
    border-color: var(--acdb2026-warning);
    color: var(--acdb2026-warning);
}

.acdb2026-button-danger {
    color: var(--acdb2026-danger);
    border-color: #e2b2b2;
}

.acdb2026-button-danger:hover {
    background: var(--acdb2026-danger-bg);
    border-color: var(--acdb2026-danger);
    color: var(--acdb2026-danger);
}

.acdb2026-button-muted {
    color: var(--acdb2026-muted);
}

/* Compact actions used repeatedly in list rows/cards. */
.acdb2026-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.acdb2026-action {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: var(--acdb2026-radius-small);
    color: var(--acdb2026-blue);
    font-size: .92em;
}

.acdb2026-action:hover {
    background: var(--acdb2026-surface-hover);
    border-color: var(--acdb2026-blue-light);
}

/* ---------- Panels / sections ---------- */

.acdb2026-panel {
    background: var(--acdb2026-surface);
    border: 1px solid var(--acdb2026-border);
    border-radius: var(--acdb2026-radius);
    overflow: hidden;
}

.acdb2026-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--acdb2026-surface-soft);
    border-bottom: 1px solid var(--acdb2026-border);
}

.acdb2026-panel-title {
    margin: 0;
    color: var(--acdb2026-text);
    font-size: 1rem;
    font-weight: 600;
}

.acdb2026-panel-body {
    padding: 14px;
}

/* ---------- Toolbar / search / filters ---------- */

.acdb2026-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px;
    background: var(--acdb2026-surface-soft);
    border: 1px solid var(--acdb2026-border);
    border-radius: var(--acdb2026-radius);
}

.acdb2026-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.acdb2026-toolbar-label {
    color: var(--acdb2026-muted);
    font-size: .88em;
    font-weight: 600;
}

.acdb2026-input,
.acdb2026-select {
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--acdb2026-border-dark);
    border-radius: var(--acdb2026-radius);
    background: #fff;
    color: var(--acdb2026-text);
    font: inherit;
    transition:
        border-color var(--acdb2026-transition),
        box-shadow var(--acdb2026-transition);
}

.acdb2026-input:focus,
.acdb2026-select:focus {
    outline: none;
    border-color: var(--acdb2026-blue-light);
    box-shadow: 0 0 0 3px rgba(110, 168, 255, .18);
}

.acdb2026-search {
    display: flex;
    flex: 1 1 280px;
    gap: 6px;
}

.acdb2026-search .acdb2026-input {
    flex: 1 1 auto;
}

/* ---------- Tabs / filters ---------- */

.acdb2026-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 12px;
}

.acdb2026-tab {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid transparent;
    border-radius: var(--acdb2026-radius);
    color: var(--acdb2026-muted);
    background: transparent;
}

.acdb2026-tab:hover {
    background: var(--acdb2026-surface-hover);
    border-color: #c9dcfa;
    color: var(--acdb2026-blue);
}

.acdb2026-tab-active {
    background: var(--acdb2026-blue);
    border-color: var(--acdb2026-blue);
    color: #fff !important;
}

.acdb2026-tab-active:hover {
    background: #174d9b;
    border-color: #174d9b;
    color: #fff !important;
}

/* ---------- Lists / rows ---------- */

.acdb2026-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.acdb2026-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--acdb2026-radius);
    background: var(--acdb2026-surface);
    transition:
        background-color var(--acdb2026-transition),
        border-color var(--acdb2026-transition),
        box-shadow var(--acdb2026-transition),
        transform var(--acdb2026-transition);
}

.acdb2026-row:hover {
    background: var(--acdb2026-surface-hover);
    border-color: #c9dcfa;
    box-shadow: 0 1px 4px rgba(42, 96, 178, .10);
}

.acdb2026-row-main {
    min-width: 0;
    flex: 1 1 auto;
}

.acdb2026-row-title {
    display: block;
    color: var(--acdb2026-blue);
    font-weight: 600;
}

.acdb2026-row:hover .acdb2026-row-title {
    color: #174d9b;
}

.acdb2026-row-meta {
    margin-top: 2px;
    color: var(--acdb2026-muted);
    font-size: .88em;
}

.acdb2026-row-actions {
    flex: 0 0 auto;
}

/* ---------- Status badges ---------- */

.acdb2026-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--acdb2026-border);
    border-radius: 999px;
    background: var(--acdb2026-surface-soft);
    color: var(--acdb2026-muted);
    font-size: .8em;
    font-weight: 600;
}

.acdb2026-badge-success {
    background: var(--acdb2026-success-bg);
    border-color: #b9ddc5;
    color: var(--acdb2026-success);
}

.acdb2026-badge-warning {
    background: var(--acdb2026-warning-bg);
    border-color: #ead59e;
    color: var(--acdb2026-warning);
}

.acdb2026-badge-danger {
    background: var(--acdb2026-danger-bg);
    border-color: #e6bebe;
    color: var(--acdb2026-danger);
}

/* ---------- Thumbnail cards ---------- */

.acdb2026-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.acdb2026-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--acdb2026-border);
    border-radius: var(--acdb2026-radius);
    background: var(--acdb2026-surface);
    transition:
        border-color var(--acdb2026-transition),
        box-shadow var(--acdb2026-transition),
        transform var(--acdb2026-transition);
}

.acdb2026-card:hover {
    border-color: var(--acdb2026-blue-light);
    box-shadow: var(--acdb2026-shadow);
    transform: translateY(-1px);
}

.acdb2026-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--acdb2026-surface-soft);
}

.acdb2026-card-body {
    padding: 8px 10px 10px;
}

.acdb2026-card-title {
    display: block;
    color: var(--acdb2026-blue);
    font-weight: 600;
    line-height: 1.25;
}

.acdb2026-card-meta {
    margin-top: 3px;
    color: var(--acdb2026-muted);
    font-size: .82em;
}

.acdb2026-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
    font-size: .88em;
}

/* ---------- Notices ---------- */

.acdb2026-notice {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--acdb2026-border);
    border-left: 4px solid var(--acdb2026-blue);
    border-radius: var(--acdb2026-radius);
    background: var(--acdb2026-surface-soft);
}

.acdb2026-notice-success {
    border-left-color: var(--acdb2026-success);
    background: var(--acdb2026-success-bg);
}

.acdb2026-notice-warning {
    border-left-color: var(--acdb2026-warning);
    background: var(--acdb2026-warning-bg);
}

.acdb2026-notice-danger {
    border-left-color: var(--acdb2026-danger);
    background: var(--acdb2026-danger-bg);
}

/* ---------- Pagination ---------- */

.acdb2026-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 14px;
}

.acdb2026-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid var(--acdb2026-border);
    border-radius: var(--acdb2026-radius);
    background: #fff;
}

.acdb2026-page:hover {
    background: var(--acdb2026-surface-hover);
    border-color: var(--acdb2026-blue-light);
}

.acdb2026-page-active {
    background: var(--acdb2026-blue);
    border-color: var(--acdb2026-blue);
    color: #fff !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
    .acdb2026-toolbar {
        align-items: stretch;
    }

    .acdb2026-toolbar-group,
    .acdb2026-search {
        width: 100%;
    }

    .acdb2026-search {
        flex-basis: 100%;
    }

    .acdb2026-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .acdb2026-row-actions {
        width: 100%;
    }

    .acdb2026-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}



/* Publisher / Title cards */

.ptiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ptile {
	position: relative;
	min-width: 0;
	border: 1px solid #e1e5ea;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transition:
		transform .15s ease,
		box-shadow .15s ease,
		border-color .15s ease;
}

.ptile:hover {
	transform: translateY(-2px);
	border-color: #b9c9df;
	box-shadow: 0 5px 16px rgba(0,0,0,.10);
}

.ptile-title {
	display: block;
	padding: 11px 10px 9px;
	color: #2a60b2;
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ptile-title:hover {
	color: #174c99;
	text-decoration: underline;
}

.ptile-image {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 150px;
	// padding: 8px 10px 12px;
	background: #fafbfc;
}

.ptile-image a {
	display: block;
	line-height: 0;
}

.ptile-image img {
	display: block;
	width: 150px;
	height: 150px;
	object-fit: contain;
	margin: auto;
	border-radius: 3px;
}

/*
 * Member actions
 */

.ptile-actions {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 8px;

	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 6px;
	border-radius: 7px;

	background: rgba(255,255,255,.94);
	box-shadow: 0 2px 8px rgba(0,0,0,.18);

	opacity: 0;
	transform: translateY(5px);
	transition:
		opacity .15s ease,
		transform .15s ease;
}

.ptile:hover .ptile-actions,
.ptile-actions:focus-within {
	opacity: 1;
	transform: translateY(0);
}

.ptile-action {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;
	padding: 0;

	border: 0;
	border-radius: 6px;

	background: transparent;
	cursor: pointer;

	transition:
		background .12s ease,
		transform .12s ease;
}

.ptile-action:hover {
	background: #edf3fc;
	transform: scale(1.05);
}

.ptile-action img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.ptile-type {
	display: block;
	padding: 7px 10px 10px;

	color: #666;
	font-size: 12px;
	line-height: 1;
	text-align: center;
}

.ptile-type::before {
	content: \"\";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 6px;
	margin-bottom: 2px;
	border-radius: 50%;
	background: #6ea8ff;
}

/* Keep controls available on touch devices */
@media (hover: none) {
	.ptile-actions {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 500px) {
	.ptiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.ptile-title {
		font-size: 14px;
	}

	.ptile-image {
		min-height: 155px;
		padding-left: 5px;
		padding-right: 5px;
	}

	.ptile-image img {
		width: 140px;
		height: 140px;
	}


	.ptile-actions {
	left: 6px;
	right: 6px;
	bottom: 6px;
	padding: 3px 4px;
	border-radius: 6px;
	}

	.ptile-action {
	width: 28px;
	height: 28px;
	}

	.ptile-action img {
	width: 22px;
	height: 22px;
	}
}