* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
  font-size: 16px; /* default */
}
@media (max-width: 1200px) {
  html { font-size: 15px; }
}
@media (max-width: 992px) {
  html { font-size: 14px; }
}
@media (max-width: 768px) {
  html { font-size: 13px; }
}
@media (max-width: 480px) {
  html { font-size: 12px; }
}

body { 
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  height: 100vh;
  width: 100vw;
  background-color: #1e1e1e;
  color: #ffffff;
}
#title {
  text-align: center;
  margin-top: 1rem;
}

/* --- Input --- */
input,
select {
  background-color: #3c3c3c;
  color: #ffffff;
  border: 1px solid #555;
  border-radius: 0.3rem;
  outline: none;
}
input[type="color"] {
  padding: 0.1rem;
  height: 1.5rem;
}

/* --- General Buttons --- */
button {
  background-color: #3c3c3c; 
  color: #ffffff;
  padding: 0.8rem 0.9rem;
  border: 1px solid #555;
  border-radius: 0.3rem;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}
button:hover {
  background-color: #0a84ff;
}
button:active {
  background-color: #0a84ff;
  transform: translateY(1px);
}
@media (hover: none) and (pointer: coarse) {
  button:hover {
    background-color: #3c3c3c; /* same as normal, ignore hover */
  }
}

/* --- Tab Buttons --- */
.tabs-btn {
  background-color: transparent;
  color: #ccc; /* inactive tab */
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, border-bottom 0.2s;
}
.tabs-btn:hover {
  background-color: #3c3c3c;
  color: #ffffff;
  border: none;
}
.tabs-btn.active {
  background-color: transparent;
  color: #ffffff;
  font-weight: 700; 
  border-bottom: 2px solid #ffffff;
}

/* --- Tab panels --- */
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: flex;
  flex-direction: row;
  gap: 0.3rem;
}

/* --- Canvas and text objects --- */
#canvas {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  touch-action: none;
}
@media (max-height: 500px) {
  #title {
    display: none;
  }
}
.text {
  position: absolute;
  text-align: center;
}
.text:focus {
  outline: none;
}
.text.active {
  outline: 1px solid #4da3ff;
  outline-offset: 1px;
}

/* --- Custom Right-Click Menu --- */
.custom-menu {
  position: absolute;
  display: none;
  background: #3c3c3c;
  border: 1px solid #555;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  padding: 5px;
  z-index: 1000;
}
.custom-menu button {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0.3rem 0.7rem;
  text-align: left;
  cursor: pointer;
  color: #fff;
}
.custom-menu button:hover {
  background-color: #0a84ff;
  color: #fff;
}

/* --- Handle for dragging text--- */
.drag-handle {
  display: none;          /* hidden until select */
  position: absolute;
  color: white;
  -webkit-text-stroke: 0.5px black; 
  cursor: move;
  font-size: 1.6rem;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  z-index: 10;
}
.drag-handle.active {
  display: block;
}

/* --- Animations --- */
.anim-none { animation: none;}
.anim-spinX { animation: spinX var(--anim-duration) linear infinite; }
.anim-spinY { animation: spinY var(--anim-duration) linear infinite; }
.anim-swing3D { animation: swing3D var(--anim-duration) ease-in-out; }
.anim-jump { animation: jump var(--anim-duration) ease-out; }
.anim-flipBounce { animation: flipBounce var(--anim-duration) ease; }
.anim-wave { animation: wave var(--anim-duration) ease-in-out; }
.anim-tilt { animation: tilt var(--anim-duration) ease-in-out; }
.anim-heartBeat { animation: heartBeat var(--anim-duration) ease; }
.anim-fadeIn { animation: fadeIn var(--anim-duration) ease; }
.anim-fadeOut { animation: fadeOut var(--anim-duration) ease; }
.anim-rotate { animation: rotate var(--anim-duration) ease; }
.anim-slideInLeft { animation: slideInLeft var(--anim-duration) ease; }
.anim-slideOutRight { animation: slideOutRight var(--anim-duration) ease; }
.anim-slideInBottom { animation: slideInBottom var(--anim-duration) ease; }
.anim-slideOutTop { animation: slideOutTop var(--anim-duration) ease; }
.anim-grow { animation: grow var(--anim-duration) ease; }
.anim-shrink { animation: shrink var(--anim-duration) ease; }
.anim-bounce { animation: bounce var(--anim-duration) ease; }
.anim-pulse { animation: pulse var(--anim-duration) ease; }
.anim-wiggle { animation: wiggle var(--anim-duration) ease; }
.anim-flipY { animation: flipY var(--anim-duration) ease; }
.anim-flipX { animation: flipX var(--anim-duration) ease; }
.anim-shake { animation: shake var(--anim-duration) ease; }
.anim-swing { animation: swing var(--anim-duration) ease; }
.anim-zoomIn { animation: zoomIn var(--anim-duration) ease; }
.anim-zoomOut { animation: zoomOut var(--anim-duration) ease; }
.anim-blurIn { animation: blurIn var(--anim-duration) ease; }
.anim-ripple { animation: ripple var(--anim-duration) ease; }

@keyframes spinX {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(360deg); }
}

@keyframes spinY {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@keyframes swing3D {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  25% { transform: rotateX(15deg) rotateY(-10deg); }
  50% { transform: rotateX(-10deg) rotateY(15deg); }
  75% { transform: rotateX(10deg) rotateY(-15deg); }
  100% { transform: rotateX(0deg) rotateY(0deg); }
}

@keyframes jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

@keyframes flipBounce {
  0% { transform: rotateX(0deg); }
  40% { transform: rotateX(180deg); }
  60% { transform: rotateX(160deg); }
  80% { transform: rotateX(180deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(10deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

@keyframes tilt {
  0%, 100% { transform: rotateZ(0deg); }
  25% { transform: rotateZ(5deg); }
  50% { transform: rotateZ(-5deg); }
  75% { transform: rotateZ(3deg); }
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1.1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
@keyframes slideInBottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes slideOutTop {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}
@keyframes grow {
  from { transform: scale(1); }
  to { transform: scale(1.2); }
}
@keyframes shrink {
  from { transform: scale(1); }
  to { transform: scale(0.8); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}
@keyframes flipY {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}
@keyframes flipX {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(180deg); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}
@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes zoomOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.5); opacity: 0; }
}
@keyframes blurIn {
  from { filter: blur(10px); opacity: 0; }
  to { filter: blur(0); opacity: 1; }
}
@keyframes ripple {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0.3; }
  100% { transform: scale(1); opacity: 0; }
}