/* Design Decisions */
/* - Rounded corners and soft shadows for a friendly, approachable feel
   - A vibrant yet harmonious color palette to evoke creativity and playfulness
   - Clear typography hierarchy for easy scanning and usability
*/

@import url("https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  font-family: "Sour Gummy", sans-serif;
}

:root {
  --pink: #ff5fa2;
  --coral: #ff8a5b;
  --yellow: #ffb703;
  --green: #8ac926;
  --teal: #00c2a8;
  --blue: #00b4ff;
  --purple: #7b61ff;

  --lightCanvas: #f8f5f0;
  --darkCanvas: #1f2330;

  --panelBg: rgba(255, 255, 255, 0.82);
  --panelBorder: rgba(255, 255, 255, 0.45);
  --textDark: #20242f;
  --textLight: #5d6472;

  --shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  --radiusLarge: 1.2rem;
  --radiusMedium: 0.85rem;
  --radiusRound: 999px;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  background: var(--lightCanvas);
  color: var(--textDark);
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#stageContainer {
  width: 100%;
  height: 100%;
  background: var(--lightCanvas);
}
#intro-dialog {
  border: none;
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  margin: auto;
  max-width: 420px;
}
#intro-dialog p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: var(--textDark);
  text-align: center;
}
#dialog-close-button {
  margin-top: 1.2rem;
  background: var(--blue);
  color: white;
  padding: 0.75rem 1.2rem;
  border-radius: var(--radiusRound);
  border: none;
  font-size: 1rem;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

#intro-dialog::backdrop {
  background: rgba(0, 0, 0, 0.25);
}

/* Floating toolbar */
.floatingToolbar {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(340px, calc(100vw - 2.4rem));
  padding: 1rem 1.1rem;
  background: var(--panelBg);
  border: 1px solid var(--panelBorder);
  border-radius: var(--radiusLarge);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.toolHeader {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.toolHeader h1 {
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--purple);
}

.toolHeader p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--textLight);
}

.toolGroup {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.toolGroup h2 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--textDark);
}

.buttonRow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

button {
  border: none;
  border-radius: var(--radiusRound);
  padding: 0.7rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  color: white;
  background: var(--blue);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

button:active {
  transform: translateY(1px) scale(0.98);
}

button:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

/* Tone buttons */
#lightCanvasBtn {
  background: var(--yellow);
  color: var(--textDark);
}

#darkCanvasBtn {
  background: var(--darkCanvas);
  color: white;
}

/* Burst types */
.burstTypeBtn[data-burst="circle"] {
  background: var(--pink);
}

.burstTypeBtn[data-burst="triangle"] {
  background: var(--coral);
}

.burstTypeBtn[data-burst="star"] {
  background: var(--purple);
}

/* Save/ClearActions */
#clearBtn {
  background: var(--teal);
}

#saveFileBtn {
  background: var(--green);
  color: var(--textDark);
}

/* Colour Palette */
.colourPaletteBox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.paletteColour {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

.paletteColour:hover {
  transform: scale(1.08);
}

#palette01 {
  background: var(--pink);
}
#palette02 {
  background: var(--coral);
}
#palette03 {
  background: var(--yellow);
}
#palette04 {
  background: var(--green);
}
#palette05 {
  background: var(--teal);
}
#palette06 {
  background: var(--blue);
}
#palette07 {
  background: var(--purple);
}
#palette08 {
  background: white;
  border-color: #dcdcdc;
}

.actionsGroup {
  padding-top: 0.4rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}