body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
      user-select: none;
      background-color: #0f172a;
    }
    .p1-color { color: #ef4444; }
    .p2-color { color: #3b82f6; }
    .p1-tile { background-color: rgba(239, 68, 68, 0.12); border-color: #ef4444; }
    .p2-tile { background-color: rgba(59, 130, 246, 0.12); border-color: #3b82f6; }
    .p1-badge { background-color: #ef4444; color: white; }
    .p2-badge { background-color: #3b82f6; color: white; }
    
    .card-red { color: #dc2626; }
    .card-black { color: #0f172a; }

    .industrial-info-tip { display: none; }
    .industrial-info-wrap:hover .industrial-info-tip { display: block; }
    .population-info-tip { display: none; }
    .population-info-wrap:hover .population-info-tip { display: block; }
    .score-info-tip { display: none; }
    .score-info-wrap:hover .score-info-tip { display: block; }
    .base-outline {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 10;
    }
    .base-outline-p1 {
      fill: none;
      stroke: #ef4444;
      stroke-width: 0.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .base-outline-p2 {
      fill: none;
      stroke: #3b82f6;
      stroke-width: 0.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    #historico-painel {
      top: 3rem;
      right: 0;
      bottom: 0;
      width: min(20rem, calc((100% - 440px) / 2 - 1rem));
      height: auto;
      max-height: none;
    }
    .card-info-tip { display: none; }
    .card-info-wrap:hover .card-info-tip,
    .card-info-wrap:focus-within .card-info-tip { display: block; }
    .tutorial-pages {
      flex: 1;
      min-height: 0;
    }

    @media (max-width: 900px) {
      #historico-painel {
        position: absolute !important;
        inset: 5.3125rem 0.5rem 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
      }
    }

    @media (max-width: 640px) {
      header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
      }
      .header-brand {
        min-width: 0;
        gap: 0.5rem;
      }
      .header-brand > div {
        min-width: 0;
      }
      .header-actions {
        grid-column: 2;
        grid-row: 1;
        gap: 0.375rem;
      }
      #hand-container {
        width: 100%;
        min-width: 0;
        grid-area: hand;
      }
      #turn-badge {
        grid-column: 1 / -1;
        grid-row: 2;
      }
      #industrial-info-p1,
      #industrial-info-p2,
      #population-info {
        min-width: 0;
      }
      .status-layout {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: 0.5rem;
      }
      #industrial-status-p1,
      #industrial-status-p2 {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
        font-size: 9px;
      }
      .hand-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
          "left right"
          "hand hand";
        min-width: 0;
      }
      .hand-actions-left {
        grid-area: left;
      }
      .hand-actions-right {
        grid-area: right;
      }
      .hand-actions-left,
      .hand-actions-right {
        justify-self: center;
      }
      .board-frame {
        width: min(100%, 310px) !important;
      }
    }

    @media (max-width: 380px) {
      #hand-container {
        gap: 0.25rem !important;
        min-height: 0 !important;
        padding: 0.375rem !important;
      }
      #hand-container .card-info-wrap > div:first-child,
      #hand-container > div:not(.card-info-wrap) {
        width: 3rem !important;
        height: 4.5rem !important;
      }
      #hand-container .card-info-wrap > div:first-child {
        padding: 0.375rem !important;
      }
    }

    /* Custom scrollbar for action log */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); }
    ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #475569; }