/* Local Font Faces */
@font-face {
  font-family: 'Caveat';
  src: url('./fonts/Caveat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('./fonts/Caveat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('./fonts/Caveat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('./fonts/Caveat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Cedarville Cursive';
  src: url('./fonts/CedarvilleCursive-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Indie Flower';
  src: url('./fonts/IndieFlower-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Nothing You Could Do';
  src: url('./fonts/NothingYouCouldDo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Oooh Baby';
  src: url('./fonts/OoohBaby-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Reenie Beanie';
  src: url('./fonts/ReenieBeanie-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Shadows Into Light';
  src: url('./fonts/ShadowsIntoLight-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}


:root{
  --bg:#0f1115;
  --panel:#121316;
  --muted:#9aa0a6;
  --accent:#ffd166;
  --accent-2:#06d6a0;
  --radius:12px;
}

*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,#0b0c0e 0%, #0f1216 100%);
  color:#e6eef3;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:18px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height:100vh;
}

/* Prevent overscroll pull-to-refresh and allow scrolling inside */
html,body{
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* disable long-press menu on iOS */
}

/* allow selecting inside textareas and inputs */
input, textarea { -webkit-user-select: text; user-select: text; }

/* modal styles */
.app-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999}
.app-modal[aria-hidden="false"]{display:flex}
.app-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)}
.app-modal-card{position:relative;background:var(--panel);color:inherit;border-radius:12px;padding:14px;max-width:92%;width:420px;box-shadow:0 8px 30px rgba(0,0,0,0.6);z-index:2}
.app-modal-actions{display:flex;justify-content:flex-end;margin-top:10px}

.app{
  width:100%;
  max-width:920px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

header{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  text-align:center;
}
header .app-title{display:flex;align-items:center;gap:10px}
header .app-icon{width:44px;height:44px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.5)}
/* Use a varied handwritten font stack for the main title so it visually matches the app's mixed-font rendering */
header h1{
  margin:0;
  font-size:36px;
  letter-spacing:0.2px;
  background:linear-gradient(90deg,#ffd166,#06d6a0);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:700;
  font-family: "Caveat", "Indie Flower", "Reenie Beanie", "Shadows Into Light", "Oooh Baby", "Nothing You Could Do", "Cedarville Cursive", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  /* slightly larger and looser for a handwritten feel */
  line-height:1.05;
  text-rendering: optimizeLegibility;
}
.hint{margin:0;color:var(--muted);font-size:13px}

.controls{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius:var(--radius);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.03);
}

label{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:6px}
.full{width:100%}
textarea{
  width:100%;
  resize:vertical;
  min-height:80px;
  max-height:240px;
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  color: #e9f0f6;
  font-size:15px;
  outline:none;
}

.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.row > label{flex:1; min-width:120px}
input[type="range"]{width:100%}
input[type="color"]{width:100%;height:36px;border-radius:8px;border:none;padding:0}

.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.btn{
  padding:10px 14px;border-radius:10px;border:none;background:transparent;color:#e6eef3;font-weight:600;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease;
  border:1px solid rgba(255,255,255,0.04);
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(90deg,#1f2937,#111316);box-shadow:0 4px 10px rgba(0,0,0,0.5)}
.btn.accent{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b0c0e;border:none}

.preview{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.canvas-wrap{
  border-radius:14px;
  overflow: visible;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:240px;
  /* allow the canvas to expand vertically as needed so text isn't clipped */
  border:1px solid rgba(255,255,255,0.03);
  padding:24px; /* keep visual margin consistent with renderer padding */
  position:relative;
}

.back-to-top{
  position:absolute;
  right:12px;
  bottom:12px;
  width:40px;
  height:40px;
  border-radius:10px;
  border:none;
  background:rgba(11,92,255,0.95);
  color:#fff;
  font-weight:700;
  display:none; /* hidden by default, shown via JS */
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.45);
  transition:transform .12s ease, opacity .12s ease;
  z-index:4;
}
.back-to-top:active{transform:translateY(1px)}
/* show with slightly larger hit area on mobile when visible */
@media (hover:none){
  .back-to-top{width:46px;height:46px;right:10px;bottom:10px}
}

canvas{
  width:100%;
  height:auto;
  display:block;
  max-width:100%;
  background:transparent;
}

/* small footer */
.note{color:var(--muted);font-size:12px;margin:0;padding:6px 2px;text-align:center}
footer{display:flex;justify-content:center;color:var(--muted);font-size:12px;padding-bottom:6px}

/* Enlace del pie: texto blanco y subrayado para mayor contraste */
.credit a{
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  color-scheme: dark;
}