@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Oswald:wght@600;700&display=swap');

:root {
  /* Playskool palette — from the actual device */
  --body-white:  #F4F0EB;
  --red:         #D42B2B;
  --yellow:      #F5C400;
  --green:       #2C8A2C;
  --blue:        #1A5BAA;
  --label-black: #1A1A1A;
  --gray-rim:    #AAAAAA;
  --gray-dark:   #555555;
  --gray-foot:   #6A6A6A;
  --tape-clear:  #C8D8E8;
  --tape-brown:  #6B3A1F;
  --off-white:   #EDE8E0;

  --radius-btn: 6px;
  --radius-body: 24px;
  --font-label: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:  'Nunito', 'Arial Rounded MT Bold', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: #D0CBC2;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(0,0,0,0.03) 4px,
    rgba(0,0,0,0.03) 8px
  );
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* Safe area padding for notched phones */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Generic utility button ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  transition: transform 60ms, filter 60ms;
  user-select: none;
  text-transform: uppercase;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-red    { background: var(--red);    color: #fff; }
.btn-yellow { background: var(--yellow); color: var(--label-black); }
.btn-green  { background: var(--green);  color: #fff; }
.btn-blue   { background: var(--blue);   color: #fff; }
.btn-white  { background: var(--body-white); color: var(--label-black); border: 2px solid var(--gray-rim); }

/* ── Playskool cube button (the iconic square ones) ── */
.cube-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  box-shadow:
    0 4px 0 rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 60ms, box-shadow 60ms;
  user-select: none;
  position: relative;
}
.cube-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.cube-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.cube-btn .cube-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 2px; }
.cube-btn .cube-label { font-size: 0.56rem; letter-spacing: 0.3px; opacity: 0.9; }

.cube-red    { background: linear-gradient(160deg, #E83030, var(--red)); }
.cube-yellow { background: linear-gradient(160deg, #FFD930, var(--yellow)); color: var(--label-black); }
.cube-green  { background: linear-gradient(160deg, #38AA38, var(--green)); }
.cube-blue   { background: linear-gradient(160deg, #2575CC, var(--blue)); }
.cube-orange   { background: linear-gradient(160deg, #FF8C00, #D46A00); }
.cube-cerulean { background: linear-gradient(160deg, #1BBCE0, #0099BB); }