@font-face {
  font-family: 'SwellTR';
  src: url('../../assets/fonts/SwellTR-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Times New Roman';
  src: url('../../assets/fonts/Times New Roman Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: #111;
  font-family: 'SwellTR', 'Times New Roman', Times, serif;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

.pop-app {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: end center;    /* anchor to the bottom: the guy sits just above
                                 the browser controls */
  background: #fff;
}

/* ---- stage: fills the window; the guy's feet land at the bottom edge ---- */

.stage {
  position: relative;
  width: min(100vw, 560px);
  height: 100svh;
  /* frame inner edges as a fraction of the stage — the frame stretches with
     the stage so these stay put: x36/x1043 of 1080, y353/y1645 of 1920 */
  --arena-l: 3.3%;
  --arena-r: 3.4%;
  --arena-t: 18.4%;
  --arena-b: 14.3%;
}

/* the frame stretches to fill the whole stage */
.frame-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 3;
}
.frame-layer .ink { fill: #050304; }
.frame-layer .none { fill: none; }

/* head + hair: one drawing, kept at the drawing's own proportions so the line
   weight is consistent. Sized off the window HEIGHT, so its 1920 units map to
   the same span as the frame's -> the two line up vertically; it's centred, so
   the (near-centre) hair and head openings line up horizontally too. */
.headandhair {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: auto;                 /* = height * 1080/1920 */
  transform: translateX(-50%);
  display: block;
  pointer-events: none;
  z-index: 2;
}
.headandhair .ink { fill: #050304; }
.headandhair .none { fill: none; }

/* ---- bubbles layer: the frame interior ---- */

.bubbles {
  position: absolute;
  left: var(--arena-l);
  right: var(--arena-r);
  top: var(--arena-t);
  bottom: var(--arena-b);
  overflow: hidden;
  z-index: 1;
}
.mode-add .bubbles { cursor: crosshair; }

/* ---- bubbles: the hand-drawn ring is the outline ---- */

.bubble {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  cursor: grab;
  will-change: transform;
  user-select: none;
  color: #0b0b0b;                 /* the ring inherits this */
}
.mode-pop .bubble { color: #8b8b8b; cursor: pointer; }
.bubble--held { z-index: 10; }

/* in Pop mode, bubbles jitter where they stand to say "tap me" */
.mode-pop .bubble { animation: bubble-vibe .16s linear infinite; }
.mode-pop .bubble--popping { animation: none; }
@keyframes bubble-vibe {
  0%, 100% { translate: 0 0; }
  25%  { translate: .9px -.7px; }
  50%  { translate: -.8px .5px; }
  75%  { translate: .5px .8px; }
}

.bubble__ill {
  position: absolute;
  inset: 1%;                      /* ring nearly fills the collision circle, so */
  width: 98%;                     /* two colliding bubbles' rings actually touch */
  height: 98%;
  pointer-events: none;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: transform;
}
.bubble__ill path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5px;            /* constant weight (vector-effect on the path) */
  stroke-linejoin: round;
  stroke-linecap: round;
}

.bubble__text {
  position: relative;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 12pt;                 /* fixed — does not grow with the task */
  line-height: 1.2;
  max-width: 78%;
  max-height: 78%;
  overflow: hidden;
  overflow-wrap: anywhere;
  z-index: 1;
  text-shadow:
    0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,
    1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.bubble--held { z-index: 40; }
.bubble--held .bubble__text { text-shadow: none; background: #fff; padding: 2px 6px; border-radius: 8px; }
.bubble__img {
  position: absolute;
  left: 14%;
  top: 14%;
  width: 72%;
  height: 72%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 0;
}
.bubble__img ~ .bubble__text,
.bubble__img ~ .bubble__editor {
  color: #fff;
  background: rgba(0, 0, 0, .42);
  padding: 3px 6px;
  border-radius: 8px;
}

/* a bubble being written */
.bubble--editing { cursor: text; z-index: 20; }
.bubble--editing .bubble__ill { opacity: .45; }
.bubble__editor {
  position: relative;
  outline: none;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 12pt;                 /* matches the committed task text */
  line-height: 1.2;
  min-width: 8px;
  max-width: 78%;
  overflow-wrap: anywhere;
  color: #111;
  z-index: 1;
}
.bubble__typing { position: absolute; display: flex; gap: 5px; }
.bubble__typing i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #111;
  opacity: .3;
  animation: typing 1s infinite ease-in-out;
}
.bubble__typing i:nth-child(2) { animation-delay: .15s; }
.bubble__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: .9; transform: translateY(-3px); }
}
.bubble__photo {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #111;
  background: #fff;
  color: #111;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.bubble__photo svg { width: 17px; height: 17px; display: block; }
.bubble__photo:active { transform: translateX(-50%) scale(.9); }

.bubble__done {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #111;
  background: #111;
  color: #fff;
  cursor: pointer;
  padding: 0;
  z-index: 3;
}
.bubble__done[hidden] { display: none; }
.bubble__done svg { width: 18px; height: 18px; display: block; }
.bubble__done:active { transform: translateX(-50%) scale(.9); }

/* pop: a burst grows from the bubble's centre to its rim, then the bubble goes */
.bubble--popping { pointer-events: none; }

.pop-burst {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  overflow: visible;
  transform: scale(0.05);
  transform-origin: 50% 50%;
  transition: transform 260ms cubic-bezier(.34, .8, .3, 1);
}
.pop-burst--go { transform: scale(1); }
.pop-burst--done { opacity: 0; transition: opacity 220ms ease-out; }
.pop-burst .burst { fill: #8b8b8b; }

/* ---- the hair switch (invisible hit area over the drawn hair) ---- */

.hair-hit {
  position: absolute;
  left: 34%;
  top: 2%;
  width: 32%;
  height: 15%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 30;
  -webkit-tap-highlight-color: transparent;
}
.hair-hit.debug { background: rgba(255, 0, 0, .12); outline: 1px dashed red; }

/* ---- hand-lettered mode word ---- */

.mode-word {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  width: 10%;
  height: 3.4%;
  pointer-events: none;
  z-index: 25;
}
.mode-word__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #050304;
  overflow: visible;
  display: none;
}
.mode-pop .mode-word__svg { fill: #8b8b8b; }

.mode-add.lang-en .mw-add    { display: block; }
.mode-pop.lang-en .mw-pop    { display: block; }
.mode-add.lang-tr .mw-ekle   { display: block; }
.mode-pop.lang-tr .mw-patlat { display: block; }

/* ---- profile / login button (top-right) ---- */

.profile-btn {
  position: absolute;
  top: 2.4%;
  right: 3.5%;
  width: clamp(39px, 10.35vw, 53px);   /* 15% larger than the other top icons */
  height: clamp(39px, 10.35vw, 53px);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 35;
  -webkit-tap-highlight-color: transparent;
}
.profile-btn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.profile-btn .ink { fill: #050304; }
.profile-btn:active { transform: scale(.92); }

/* first-run hint pointing at the settings button */
.settings-hint {
  position: absolute;
  top: 20.5%;
  right: 7%;
  max-width: 54%;
  margin: 0;
  text-align: right;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: #8b8b8b;
  z-index: 20;
  pointer-events: none;
  display: none;
}
.settings-hint.is-on { display: block; }

/* ---- Instagram link (top-left, pink→purple) ---- */

.ig-btn {
  position: absolute;
  top: 2.4%;
  left: 3.5%;
  width: clamp(34px, 9vw, 46px);
  height: clamp(34px, 9vw, 46px);
  z-index: 35;
  -webkit-tap-highlight-color: transparent;
}
.ig-btn__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ig-btn:active { transform: scale(.92); }

/* ---- signature link (bottom-right) -> back to armaganbicer.com ---- */

.sign-btn {
  position: absolute;
  right: 4%;
  bottom: 3.5%;
  width: clamp(96px, 26vw, 150px);
  z-index: 30;
  -webkit-tap-highlight-color: transparent;
}
.sign-btn__img { display: block; width: 100%; height: auto; }
.sign-btn:active { transform: scale(.96); }

/* ---- undo the pops (hand-lettered, bottom-left, Pop mode only) ---- */

.undo-btn {
  position: absolute;
  left: 5.5%;
  bottom: 4%;
  width: clamp(84px, 26%, 150px);
  height: clamp(44px, 7.5%, 82px);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 30;
  display: none;                 /* only in Pop mode, and only with a pop to undo */
  -webkit-tap-highlight-color: transparent;
}
.mode-pop.has-undo .undo-btn {
  display: block;
  animation: bubble-vibe .16s linear infinite;   /* jitters like the poppable bubbles */
}
.undo-btn:active { transform: scale(.94); }

.undo-btn__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #2679c0;                 /* light blue — ~4.5:1 on white */
  overflow: visible;
  display: none;
}
.lang-en .undo-btn__svg.ub-undo   { display: block; }
.lang-tr .undo-btn__svg.ub-gerial { display: block; }

/* ---- reset / clear saved data (hand-lettered, bottom-left, Add mode) ---- */

.reset-btn,
.reset-confirm { display: none; }
.mode-add .reset-btn { display: block; }
.mode-add.confirm-reset .reset-btn { display: none; }
.mode-add.confirm-reset .reset-confirm { display: flex; }

.reset-btn {
  position: absolute;
  left: 5.5%;
  bottom: 4%;
  width: clamp(84px, 26%, 150px);
  height: clamp(44px, 7.5%, 82px);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 30;
  -webkit-tap-highlight-color: transparent;
}
.reset-btn:active { transform: scale(.94); }
.reset-btn__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #d92d20;                 /* red — ~4.4:1 on white */
  overflow: visible;
  display: none;
}
.lang-en .reset-btn__svg.rb-reset   { display: block; }
.lang-tr .reset-btn__svg.rb-sifirla { display: block; }

/* second layer: tick (confirm, green) + cross (cancel, red) */
.reset-confirm {
  position: absolute;
  left: 5.5%;
  bottom: 4%;
  gap: clamp(14px, 4vw, 28px);
  align-items: flex-end;
  z-index: 30;
}
.reset-confirm__btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.reset-confirm__btn:active { transform: scale(.9); }
.reset-confirm__btn .rc-ico { display: block; overflow: visible; }
.rc-yes .rc-ico {
  width: clamp(36px, 9vw, 50px);
  height: clamp(52px, 14vw, 74px);
  fill: #15803d;                 /* green */
}
.rc-no .rc-ico {
  width: clamp(48px, 12vw, 64px);
  height: clamp(40px, 10vw, 56px);
  fill: #d92d20;                 /* red */
}

@media (prefers-reduced-motion: reduce) {
  .bubble__typing i { animation: none; }
  .mode-pop .bubble { animation: none; }
  .mode-pop.has-undo .undo-btn { animation: none; }
  .pop-burst { transition-duration: 90ms; }
}

/* ==========================================================================
   profile panel + reminders calendar  (functional pass — not styled yet)
   ========================================================================== */

body.pp-locked { overflow: hidden; }

.profile-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  background: #fff;
  color: #141414;
  /* Deliberately NOT naming "Times New Roman": the app registers an
     italic-only @font-face under that exact name, so a literal reference can
     render the whole panel in italic. "Times" (Apple) / serif (= Times New
     Roman on Windows) / Liberation Serif give an upright Times face everywhere. */
  font-family: Times, "Liberation Serif", "Nimbus Roman", serif;
}
.profile-panel,
.profile-panel * { font-style: normal; font-synthesis: none; }
.profile-panel.open { display: flex; }

.pp-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e2e2;
}
.pp-logo { height: 26px; width: auto; display: block; }
.pp-name { font-size: 20px; font-weight: 700; }
.pp-close {
  border: 1px solid #ccc;
  background: #f4f4f4;
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.pp-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pp-sec { padding: 16px; border-bottom: 1px solid #eee; }
.pp-sec h3 { margin: 0 0 6px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.pp-muted { margin: 4px 0 12px; font-size: 13px; color: #777; line-height: 1.4; }

/* month grid */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; font-size: 15px; }
.cal-arrow {
  border: 1px solid #ccc; background: #f4f4f4; border-radius: 8px;
  width: 40px; height: 36px; font-size: 18px; cursor: pointer;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-grid--head { margin-bottom: 3px; }
.cal-hcell { text-align: center; font-size: 11px; color: #999; padding: 4px 0; }
.cal-cell {
  aspect-ratio: 1 / 1;
  border: 1px solid #ececec;
  border-radius: 6px;
  background: #fff;
  padding: 4px;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.cal-cell .cal-n { font-size: 12px; color: #333; }
.cal-cell.is-other .cal-n { color: #c4c4c4; }
.cal-cell.is-today { border-color: #141414; }
.cal-cell.is-sel { background: #eef1ff; border-color: #9aa8ff; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: #c2410c; }

.pp-dayhead { margin: 14px 0 8px; font-weight: 600; font-size: 14px; }

.ev-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ev-list li {
  border: 1px solid #e6e6e6; border-radius: 8px; padding: 9px 11px;
  font-size: 14px; cursor: pointer; background: #fafafa;
}
.ev-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; background: #eee; color: #666; font-size: 11px;
}

.btn {
  border: 0; border-radius: 8px; padding: 11px 16px;
  font: inherit; font-size: 15px; cursor: pointer;
  background: #141414; color: #fff;
}
.btn--ghost { background: #ececec; color: #141414; }
.btn--danger { background: #c0392b; color: #fff; }
.pp-add { width: 100%; }

/* event form */
.ev-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.ev-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #555; }
.ev-form label.ev-check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: #141414; }
.ev-form input,
.ev-form select,
.ev-form textarea {
  font: inherit; font-size: 15px; color: #141414;
  padding: 9px 10px; border: 1px solid #c8c8c8; border-radius: 8px;
  background: #fff; width: 100%;
}
.ev-form input[type="checkbox"] {
  width: 18px; height: 18px; padding: 0; flex: 0 0 auto;
}
.ev-form label.ev-check { justify-content: flex-start; }
.ev-form label[data-when="repeat"] { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #141414; }
.ev-form label[data-when="repeat"] input { width: 5em; }
.ev-form label[data-when="count"] { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: #141414; }
.ev-form label[data-when="count"] input { width: 5em; }
.ev-form [hidden] { display: none; }

.wd-toggle { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-btn {
  border: 1px solid #c8c8c8; background: #fff; color: #141414;
  border-radius: 8px; padding: 8px 11px; font: inherit; font-size: 13px; cursor: pointer;
  min-width: 38px;
}
.wd-btn.on { background: #141414; color: #fff; border-color: #141414; }

.ev-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }