@charset "utf-8";
:root {
      --maxwidth: 834px;
      --color-red: rgb(255,220,220);
      --color-orange: rgb(255,230,200);
      --color-blue: rgb(200,230,255);
      --color-green: rgb(220,255,220);
      --color-yellow: rgb(255,255,180);
      --color-gray: rgba(180,180,180,0.7);
      --color-transp: rgba(0,0,0,0);
      --color-darkred: rgb(255,200,200);
      --gradient-angle: -30deg;
}
body { min-height: 100vh; min-height: -webkit-fill-available; }
@media screen and (min-height: 800px) {
  body { padding-top: 46px; }
}
html { height:100vh; max-width:var(--maxwidth); }
.w3-modal, .w3-modal-content { max-width:var(--maxwidth); }
.mca2-logo { font-family:Papyrus, fantasy; position:relative; font-size:112%; top:0.125em; padding-left:0.5ch!important; padding-right:0.5ch!important; }
.mca2-close { background-color:transparent; z-index:2; }
.mca2-flex-block { display:flex; height:100%; flex-direction: column; justify-content: flex-start; }
.mca2-shell { display: contents; }
.mca2-topmatter { flex-grow:0; flex-shrink:0; }
.mca2-bodymatter { flex-grow:1; flex-shrink:1; overflow-y:scroll; -webkit-overflow-scrolling:touch; }
.mca2-bodymatter>div { -webkit-transform: translate3d(0,0,0); }
.mca2-long { overflow:hidden; text-overflow:ellipsis; }
.mca2-long:hover { overflow:visible; text-overflow:inherit; z-index:1; }
#cardview { flex-grow:0; flex-shrink:0; }
#cardview h4 { width:90%; }
#menu-button { padding-left:3px; padding-right:0; }
.mca2-menubuttons { padding:8px 0; }
.mca2-menubuttons .w3-button { width:90%; margin:4px auto; }
button:disabled { background: repeating-linear-gradient(var(--gradient-angle), var(--color-gray), var(--color-gray) 6px, var(--color-transp) 6px, var(--color-transp) 12px); }
.bonus-text p { -webkit-margin-before:0.25em; -webkit-margin-after:0.25em; line-height:1.25}
.w3-bar-item.padded, .w3-cell.padded { padding-left:1ch; padding-right:1ch; }
.w3-table.mca2-thinpadding th, .w3-table.mca2-thinpadding td { padding: 4px 8px; }
.w3-bar-item.mca2-thinpadding { padding-left:4px; padding-right:4px; }
.mca2-thinpadding { padding:2px; line-height:1; }
.mca2-control span { cursor: pointer; }
.mca2-inline-input input { display: inline; padding-left: 4px; }
.mca2-inline-input span { white-space: nowrap; }
label, span.input-label { display:inline-block; }
label + input, label + label, span.input-label + span.input-label { margin-left:1ch; }
.advantage { color:green!important; background-color:inherit!important; }
.hindrance { color:red!important; background-color:inherit!important; }
.unowned-advantage { color:rgb(128,168,128)!important; background-color:inherit!important; }
.unowned-hindrance { color:rgb(168,128,128)!important; background-color:inherit!important; }
.has-tip, .is-tip { cursor:pointer; }
.is-tip { color:#000; display:none; position:relative; font-style:italic; min-width:160px; margin:0; padding:0; z-index:1}
.is-tip.shown-tip { display:initial; }
span.has-tip:not(:first-child)::before { content:", "; }
span.shown-tip + span.has-tip::before { content:none!important; }
div.mca2-progress-guide { position: relative; }
div.mca2-progress-guide span { position: absolute; z-index: 1; }
div.mca2-progress-guide div { display: inline-block; float: left; height: 100%; }
.mca2-curr-age { left: 0; white-space: nowrap; overflow-x: visible; }
.mca2-next-age { right: 0; white-space: nowrap; overflow-x: visible; }
.blue { background: var(--color-blue); }
.green { background: var(--color-green); }
.orange { background: var(--color-orange); }
.red { background: var(--color-red); }
.yellow { background: var(--color-yellow); }
.blue_green { background: repeating-linear-gradient(var(--gradient-angle), var(--color-blue), var(--color-blue) 10px, var(--color-green) 10px, var(--color-green) 20px); }
.blue_orange { background: repeating-linear-gradient(var(--gradient-angle), var(--color-blue), var(--color-blue) 10px, var(--color-orange) 10px, var(--color-orange) 20px); }
.blue_red { background: repeating-linear-gradient(var(--gradient-angle), var(--color-blue), var(--color-blue) 10px, var(--color-red) 10px, var(--color-red) 20px); }
.blue_yellow { background: repeating-linear-gradient(var(--gradient-angle), var(--color-blue), var(--color-blue) 10px, var(--color-yellow) 10px, var(--color-yellow) 20px); }
.green_orange { background: repeating-linear-gradient(var(--gradient-angle), var(--color-green), var(--color-green) 10px, var(--color-orange) 10px, var(--color-orange) 20px); }
.green_red { background: repeating-linear-gradient(var(--gradient-angle), var(--color-green), var(--color-green) 10px, var(--color-red) 10px, var(--color-red) 20px); }
.green_yellow { background: repeating-linear-gradient(var(--gradient-angle), var(--color-green), var(--color-green) 10px, var(--color-yellow) 10px, var(--color-yellow) 20px); }
.orange_yellow { background: repeating-linear-gradient(var(--gradient-angle), var(--color-orange), var(--color-orange) 10px, var(--color-yellow) 10px, var(--color-yellow) 20px); }
.red_yellow { background: repeating-linear-gradient(var(--gradient-angle), var(--color-red), var(--color-red) 10px, var(--color-yellow) 10px, var(--color-yellow) 20px); }
.minor { background: var(--color-yellow); }
.tradeable { background: var(--color-orange); }
.nontradeable { background: var(--color-darkred); }

@media (max-width:768px){.w3-modal{padding-top:37px;padding-bottom:30px;}}
@media (max-width:600px){.w3-modal{padding-top:32px;padding-bottom:20px;}}

.w3-modal.trans {
    scale: 0;
    opacity: 0;
    transition: opacity 0.5s, scale 0.25s cubic-bezier(0.25, 0.8, 1, 1.41);
}

.w3-modal.trans.show {
    scale: 1;
    opacity: 0.93;
}

@media (prefers-reduced-motion: reduce) {
  .w3-modal.trans {
    scale: 0;
    opacity: 0;
    transition: opacity 0.5s;
  }
}

.w3-modal.glass { height: auto!important; }

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), 
              inset 0 4px 20px rgba(255, 255, 255, 0.3);
}
.glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
              inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
}