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

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0f172a;
  color: #f9fafb;
}

.user-body,
.admin-body {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.user-body {
  position: relative;
  overflow-x: hidden;
}

.user-body::before {
  content: '';
  position: absolute;
  inset: -120px;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.28), transparent 55%),
    radial-gradient(circle at 90% 10%, rgba(34, 197, 94, 0.26), transparent 55%),
    radial-gradient(circle at 0% 80%, rgba(234, 179, 8, 0.22), transparent 55%);
  opacity: 0.9;
  z-index: -1;
}

.user-container,
.admin-container {
  width: 100%;
  max-width: 1440px;
  padding: 24px 32px;
}

h1,
h2 {
  margin: 0 0 8px;
}

.card {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.user-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  margin-bottom: 16px;
}

.user-title {
  margin: 0;
  line-height: 1.1;
}

.user-title-main {
  font-weight: 800;
  font-size: 2.8rem;
  letter-spacing: 0.02em;
}

.user-title-sub {
  font-weight: 400;
  font-size: 2.8rem;
  margin-left: 2px;
  letter-spacing: 0.005em;
  font-style: italic;
}

.session-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.9rem;
  opacity: 0.9;
}

.session-connect {
  margin-bottom: 16px;
}

.user-subtitle {
  margin: 4px 0 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.user-subtitle-inline {
  margin: -2px 0 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.session-connect.card {
  background: radial-gradient(circle at top left, rgba(248, 250, 252, 0.04), rgba(15, 23, 42, 0.96));
}

.session-connect-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.session-connect-fields {
  flex: 2;
  min-width: 220px;
}

.session-connect-action {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.field-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

label {
  font-size: 0.85rem;
  margin-bottom: 4px;
  opacity: 0.85;
}

input,
select {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.8);
  color: #f9fafb;
}

button {
  border: none;
  cursor: pointer;
}

.primary-button,
.secondary-button {
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    transform 0.1s ease, box-shadow 0.1s ease;
}

.primary-button {
  background: #22c55e;
  color: #022c22;
}

.primary-button:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.secondary-button {
  background: transparent;
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.7);
}

.primary-button:hover:not(:disabled) {
  background: #16a34a;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
  transform: translateY(-1px);
}

.primary-button:active:not(:disabled) {
  background: #15803d;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.4);
  transform: translateY(0);
}

.secondary-button:hover {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(148, 163, 184, 0.95);
}

.secondary-button:active {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.8);
  transform: translateY(0);
  box-shadow: none;
}

.stop-season-button {
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.95rem;
  background: #ef4444;
  color: #fee2e2;
  border: 1px solid rgba(248, 113, 113, 0.9);
}

.stop-season-button:hover {
  background: #dc2626;
  border-color: rgba(248, 113, 113, 1);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}

.stop-season-button:active {
  background: #b91c1c;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
  transform: translateY(0);
}

.session-status {
  margin-top: 6px;
  font-size: 0.85rem;
  min-height: 1.2em;
}

.session-status.error {
  color: #fecaca;
}

.session-status.success {
  color: #bbf7d0;
}

.control-section {
  margin-top: 8px;
}

/* Batasi gesture & text-select hanya pada tombol kontrol, bukan seluruh grid */
.control-button,
.control-button * {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.control-alert {
  font-size: 0.9rem;
  min-height: 1.25em;
  margin-bottom: 6px;
}

.control-alert.error {
  color: #fecaca;
}

.control-alert.success {
  color: #bbf7d0;
}

.control-info {
  font-size: 0.85rem;
  opacity: 0.9;
  min-height: 1.1em;
  margin-bottom: 6px;
}

.controls-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 16px;
  margin-top: 12px;
  align-items: stretch;
}

.control-button {
  width: 80px;
  height: 80px;
  max-width: 26vw;
  max-height: 26vw;
  border-radius: 18px;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, #1e293b, #020617);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.7);
  touch-action: none;
}

.motion-button.is-forward {
  background: radial-gradient(circle at 30% 20%, #22c55e, #064e3b);
  color: #022c22;
}

.motion-button.is-backward {
  background: radial-gradient(circle at 30% 20%, #ef4444, #7f1d1d);
  color: #fee2e2;
}

.steer-button.is-active {
  background: radial-gradient(circle at 30% 20%, #22c55e, #064e3b);
  color: #022c22;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
}

#connection-status,
#control-status {
  min-width: 72px;
  text-align: center;
}

.badge-connected {
  background: rgba(22, 163, 74, 0.16);
  color: #bbf7d0;
}

.badge-disconnected {
  background: rgba(239, 68, 68, 0.16);
  color: #fecaca;
}

.badge-idle {
  background: rgba(148, 163, 184, 0.18);
}

.badge-moving {
  background: rgba(59, 130, 246, 0.2);
}

.focus-warning {
  font-size: 0.85rem;
  margin-top: 10px;
  color: #fde68a;
}

.hidden {
  display: none !important;
}

.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.status-strip-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
}

.status-strip-header-row .status-strip-item {
  align-items: center;
}

.status-strip-header-row .status-label {
  font-size: 0.75rem;
  opacity: 0.7;
}

.status-strip-values-row .status-strip-item {
  align-items: center;
}

.status-strip-right {
  margin-left: auto;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}

.status-label {
  font-size: 0.75rem;
  opacity: 0.7;
}

.status-value {
  font-size: 0.95rem;
}

#timer-remaining {
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
}

.motion-pad,
.center-board,
.steer-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mode-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.mode-switch-label {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mode-switch-toggle {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(51, 65, 85, 0.9);
}

.mode-button {
  padding: 6px 18px;
  font-size: 0.95rem;
  border-radius: 999px;
}

.back-to-login-button {
  margin-top: 6px;
  font-size: 0.85rem;
}

.mode-button.active {
  background: rgba(59, 130, 246, 0.28);
  border-color: rgba(59, 130, 246, 0.9);
}

.pad-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
  margin: 0;
}

.motion-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.steer-buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

/* Mode analog: satukan tombol vertikal & horizontal */
.analog-mode .motion-buttons {
  gap: 0;
}

.analog-mode #btn-forward {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.analog-mode #btn-backward {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.analog-mode .steer-buttons {
  gap: 0;
}

.analog-mode #btn-left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.analog-mode #btn-right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.center-board .stop-button {
  margin-top: 8px;
}

.center-hint {
  font-size: 0.8rem;
  text-align: center;
  opacity: 0.8;
  margin: 4px 0 0;
}

/* Admin layout */

.admin-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.admin-sidebar {
  background: radial-gradient(circle at top left, rgba(248, 250, 252, 0.05), rgba(15, 23, 42, 0.98));
  border-radius: 18px;
  padding: 16px 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.4);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 10%, #22c55e, #065f46);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #022c22;
}

.brand-title {
  font-weight: 600;
}

.brand-subtitle {
  font-size: 0.8rem;
  opacity: 0.8;
}

.sidebar-section {
  margin-top: 4px;
}

.sidebar-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  margin-bottom: 4px;
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

.sidebar-nav li {
  margin-bottom: 3px;
}

.sidebar-status {
  margin-top: 2px;
}

.sidebar-copy {
  font-size: 0.78rem;
  opacity: 0.8;
  margin: 4px 0 0;
}

.admin-main-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.admin-subtitle {
  font-size: 0.9rem;
  opacity: 0.8;
  margin: 2px 0 0;
}

#rc-list,
#sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
}

/* RC status table-style layout */
.rc-table-header {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1.2fr 1.4fr 1.4fr 1.2fr;
  padding: 6px 2px 8px;
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e5e7eb;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.rc-table-header .rc-col {
  white-space: nowrap;
}

.rc-table-header .rc-col-name {
  text-align: left;
}

.rc-table-header .rc-col-status,
.rc-table-header .rc-col-duration,
.rc-table-header .rc-col-session,
.rc-table-header .rc-col-tx,
.rc-table-header .rc-col-action {
  text-align: center;
}

.rc-item {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1.2fr 1.4fr 1.4fr 1.2fr;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(8, 47, 73, 0.96));
  border: 1px solid transparent;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

.rc-item .rc-col {
  font-size: 0.86rem;
}

.rc-item .rc-col-id {
  font-weight: 600;
}

.rc-item .rc-col-name {
  opacity: 0.92;
  text-align: left;
}

.rc-item .rc-col-status {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rc-item .rc-col-duration {
  text-align: center;
}

.rc-item .rc-col-session {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 0.8rem;
  text-align: center;
}

.rc-item .rc-col-tx {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 0.8rem;
  text-align: center;
}

.rc-item .rc-col-action {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rc-action-btn {
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  border: none;
}

.rc-action-stop {
  background: #ef4444;
  color: #fee2e2;
  border: 1px solid rgba(248, 113, 113, 0.9);
}

.rc-action-cancel {
  background: #eab308;
  color: #422006;
  border: 1px solid rgba(234, 179, 8, 0.8);
}

.rc-action-stop:hover {
  background: #dc2626;
  border-color: rgba(248, 113, 113, 1);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}

.rc-action-cancel:hover {
  background: #ca8a04;
  border-color: rgba(234, 179, 8, 1);
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.45);
  transform: translateY(-1px);
}

.rc-action-stop:active {
  background: #b91c1c;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.6);
  transform: translateY(0);
}

.rc-action-cancel:active {
  background: #a16207;
  box-shadow: 0 1px 4px rgba(234, 179, 8, 0.55);
  transform: translateY(0);
}

/* RC status pill (idle / reserved / active) */
.rc-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
}

.rc-status-idle {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.4);
  color: #e5e7eb;
}

.rc-status-reserved {
  background: rgba(234, 179, 8, 0.16);
  border-color: rgba(234, 179, 8, 0.5);
  color: #fef3c7;
}

.rc-status-active {
  background: rgba(22, 163, 74, 0.18);
  border-color: rgba(22, 163, 74, 0.6);
  color: #bbf7d0;
}

.rc-status-pending {
  background: rgba(234, 179, 8, 0.16);
  border-color: rgba(234, 179, 8, 0.5);
  color: #fef3c7;
}

.rc-status-expired,
.rc-status-cancelled {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.4);
  color: #e5e7eb;
}

/* Recent Sessions table (same style as RC Status, no Action) */
.session-table-header {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1.2fr 1.4fr 1.4fr;
  padding: 6px 2px 8px;
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e5e7eb;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.session-table-header .session-col {
  white-space: nowrap;
}

.session-table-header .session-col-name {
  text-align: left;
}

.session-table-header .session-col-status,
.session-table-header .session-col-duration,
.session-table-header .session-col-session,
.session-table-header .session-col-tx {
  text-align: center;
}

.session-item {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1.2fr 1.4fr 1.4fr;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(8, 47, 73, 0.96));
  border: 1px solid transparent;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  font-size: 0.86rem;
}

/* Per-RC color fills (opacity lembut) */
.rc-color-green {
  background: linear-gradient(
    135deg,
    rgba(21, 128, 61, 0.25),
    rgba(6, 78, 59, 0.35)
  );
  border-color: transparent;
}

.rc-color-yellow {
  background: linear-gradient(
    135deg,
    rgba(234, 179, 8, 0.22),
    rgba(161, 98, 7, 0.32)
  );
  border-color: transparent;
}

.rc-color-red {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.24),
    rgba(127, 29, 29, 0.34)
  );
  border-color: transparent;
}

.rc-color-blue {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.24),
    rgba(30, 64, 175, 0.34)
  );
  border-color: transparent;
}

.rc-color-white {
  background: linear-gradient(
    135deg,
    rgba(248, 250, 252, 0.24),
    rgba(148, 163, 184, 0.3)
  );
  border-color: transparent;
}

.session-item .session-col-name {
  text-align: left;
  opacity: 0.92;
}

.session-item .session-col-status {
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-item .session-col-duration {
  text-align: center;
}

.session-item .session-col-session,
.session-item .session-col-tx {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 0.8rem;
  text-align: center;
}

.sessions-toggle-button {
  margin-top: 10px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.session-meta {
  font-size: 0.8rem;
  opacity: 0.9;
}

.config-warnings {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #fde68a;
}

.config-warnings ul {
  margin: 0;
  padding-left: 18px;
}

.config-warnings.has-warnings {
  padding: 8px 10px;
  background: rgba(253, 230, 138, 0.12);
  border-radius: 8px;
  border: 1px solid rgba(253, 230, 138, 0.3);
}

.copy-area {
  margin-top: 12px;
}

.copy-area .copy-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.copy-area .copy-row input {
  flex: 1;
  min-width: 0;
}

.copy-area .copy-row textarea {
  flex: 1;
  min-width: 0;
  resize: vertical;
}

.admin-login-card {
  margin-top: 4px;
}

.admin-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-hero-main p {
  font-size: 0.85rem;
  opacity: 0.85;
}

.admin-hero-stats {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
}

.hero-stat {
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.5);
  font-size: 0.8rem;
}

.hero-stat-label {
  display: block;
  opacity: 0.7;
}

.hero-stat-value {
  font-weight: 600;
}

.admin-login-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.admin-login-fields {
  flex: 2;
  min-width: 220px;
}

.admin-login-action {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-config-card {
  background: radial-gradient(circle at top left, rgba(248, 250, 252, 0.04), rgba(15, 23, 42, 0.96));
}

.admin-config-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.admin-config-text {
  font-size: 0.85rem;
  opacity: 0.9;
}

.admin-config-base {
  font-size: 0.85rem;
  margin-top: 4px;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 12px;
}

.admin-panel-desc {
  font-size: 0.8rem;
  opacity: 0.85;
  margin: 2px 0 8px;
}

.admin-sessions-card {
  margin-top: 12px;
}

@media (max-width: 600px) {
  .controls-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    grid-auto-flow: row dense;
  }

  /* Center board di baris kedua, lebar penuh di antara dua kolom */
  .controls-grid .center-board {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  /* Tata ulang baris nilai status di HP potrait */
  #status-strip-section .status-strip-values-row {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /* STOP SEASON dan badge status dipindah ke baris kedua, full width dan center */
  #status-strip-section .status-strip-values-row .status-strip-item:nth-child(4),
  #status-strip-section .status-strip-values-row .status-strip-item.status-strip-right {
    flex-basis: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
  }

  #status-strip-section .status-strip-values-row .status-strip-item.status-strip-right {
    margin-left: 0;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  .user-container {
    padding: 12px 16px;
  }

  .user-header {
    margin-bottom: 8px;
  }

  .session-connect.card {
    margin-bottom: 8px;
  }

  #control-section .card.controls-grid {
    margin-top: 8px;
  }

  .control-button {
    width: 64px;
    height: 64px;
    max-width: 22vw;
    max-height: 22vw;
    font-size: 1.4rem;
  }
}