/* ============================================================
   OllieCraft — Minecraft-flavoured routine app
   ============================================================ */

@font-face {
  font-family: 'PressStart';
  src: url('../fonts/PressStart2P-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'PixelBody';
  src: url('../fonts/VT323-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --dirt:        #6b4423;
  --dirt-dark:   #4a2f18;
  --dirt-light:  #8a5a30;
  --grass:       #5fa845;
  --grass-dark:  #3f7a2c;
  --grass-light: #7bc95a;
  --stone:       #7a7a7a;
  --stone-dark:  #565656;
  --wood:        #9a6a3a;
  --panel:       #2b2622;
  --panel-2:     #38312b;
  --ink:         #f4efe6;
  --ink-dim:     #c9beac;
  --xp:          #7bd93a;
  --xp-dark:     #4a8f1f;
  --emerald:     #23c665;
  --diamond:     #4fe6e6;
  --gold:        #ffcf3f;
  --heart:       #ff5a5a;
  --danger:      #d64545;
  --shadow:      rgba(0,0,0,.35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
body {
  font-family: 'PixelBody', 'Courier New', monospace;
  color: var(--ink);
  background:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.45)),
    repeating-linear-gradient(0deg,  #6b4423 0 24px, #63401f 24px 48px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 24px, rgba(255,255,255,.03) 24px 48px);
  background-attachment: fixed;
  image-rendering: pixelated;
  font-size: 22px;
  line-height: 1.15;
}
#app { max-width: 860px; margin: 0 auto; min-height: 100%; padding: env(safe-area-inset-top) 12px 24px; }

/* ---------- pixel headings ---------- */
.pixel { font-family: 'PressStart', monospace; letter-spacing: .5px; line-height: 1.5; }

/* ---------- generic blocky panel ---------- */
.panel {
  position: relative;
  background: var(--panel);
  border: 4px solid #000;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.35), inset 4px 4px 0 rgba(255,255,255,.08), 0 6px 0 var(--shadow);
  padding: 16px;
}

/* ---------- buttons ---------- */
.btn {
  font-family: 'PressStart', monospace;
  font-size: 13px;
  color: #fff;
  background: var(--grass);
  border: 3px solid #000;
  box-shadow: inset -3px -3px 0 var(--grass-dark), inset 3px 3px 0 var(--grass-light);
  padding: 14px 16px;
  cursor: pointer;
  text-align: center;
  transition: transform .04s;
}
.btn:active { transform: translateY(3px); box-shadow: inset -2px -2px 0 var(--grass-dark), inset 2px 2px 0 var(--grass-light); }
.btn.gray  { background: var(--stone); box-shadow: inset -3px -3px 0 var(--stone-dark), inset 3px 3px 0 #9a9a9a; }
.btn.wood  { background: var(--wood); box-shadow: inset -3px -3px 0 #6d4a26, inset 3px 3px 0 #b98a56; }
.btn.danger{ background: var(--danger); box-shadow: inset -3px -3px 0 #8f2a2a, inset 3px 3px 0 #e86a6a; }
.btn.small { font-size: 11px; padding: 10px 12px; }
.btn:disabled { opacity: .45; filter: grayscale(.5); }

/* ============================================================
   TOP BAR (HUD)
   ============================================================ */
.hud { display: flex; align-items: center; gap: 10px; padding: 14px 4px 10px; flex-wrap: wrap; }
.hud .avatar {
  width: 56px; height: 56px; flex: 0 0 auto;
  background:
    linear-gradient(var(--grass) 0 30%, var(--dirt) 30% 100%);
  border: 4px solid #000; box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
  image-rendering: pixelated;
}
.hud .who { flex: 1 1 auto; min-width: 120px; }
.hud .who .hi { font-family: 'PressStart', monospace; font-size: 15px; color: var(--ink); }
.hud .who .hi.gold { color: var(--gold); text-shadow: 0 0 10px rgba(255,207,63,.8), 0 2px 0 #000; animation: goldPulse 2s ease-in-out infinite; }
@keyframes goldPulse { 0%,100%{ text-shadow: 0 0 6px rgba(255,207,63,.6), 0 2px 0 #000; } 50%{ text-shadow: 0 0 16px rgba(255,207,63,1), 0 2px 0 #000; } }
.hud .who .lvl { font-size: 22px; color: var(--ink-dim); margin-top: 2px; }
.hud .buddy { flex: 0 0 auto; font-size: 40px; line-height: 1; animation: bob 1.3s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
@keyframes bob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-9px) } }
.hud .avatar.skin {
  display: flex; align-items: center; justify-content: center;
  background: #2b2622; font-size: 34px; line-height: 1;
}
.hud .coins { display: flex; gap: 8px; }
.coin-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel-2); border: 3px solid #000; padding: 6px 10px;
  font-size: 24px; line-height: 1;
}
.gem { width: 20px; height: 20px; display: inline-block; box-sizing: border-box; flex: 0 0 auto; }
.gem.emerald { background: var(--emerald); box-shadow: inset -3px -3px 0 #147a3d; transform: rotate(45deg); border: 2px solid #0c5228; }
.gem.diamond { background: var(--diamond); box-shadow: inset -3px -3px 0 #2a9c9c; transform: rotate(45deg); border: 2px solid #1c7d7d; }
.streak-pill { display:flex; align-items:center; gap:6px; font-size: 24px; }

/* XP bar (Minecraft style) */
.xp-wrap { padding: 4px 4px 0; }
.xp-meta { display: flex; justify-content: space-between; font-size: 20px; color: var(--ink-dim); margin-bottom: 4px; }
.xp-meta .lvlnum {
  font-family:'PressStart',monospace; font-size: 15px; color: var(--xp);
  text-shadow: 0 2px 0 #000;
}
.xp-bar {
  height: 20px; background: #1c1c1c; border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.6);
  overflow: hidden;
}
.xp-fill {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, var(--xp) 0 10px, var(--xp-dark) 10px 12px);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35);
  transition: width .5s cubic-bezier(.2,.9,.3,1);
}

/* ============================================================
   NAV TABS
   ============================================================ */
.tabs { display: flex; gap: 8px; margin: 14px 0; }
.tab {
  flex: 1; font-family: 'PressStart', monospace; font-size: 11px; text-align: center;
  padding: 12px 4px; color: var(--ink-dim);
  background: var(--panel); border: 3px solid #000; cursor: pointer;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}
.tab.active { color: #fff; background: var(--grass-dark); box-shadow: inset -3px -3px 0 rgba(0,0,0,.3), 0 0 0 3px var(--grass) inset; }
.tab .ico { font-size: 22px; display: block; margin-bottom: 4px; }

/* ============================================================
   QUEST CARDS
   ============================================================ */
.section-title { font-family: 'PressStart', monospace; font-size: 14px; color: var(--gold); margin: 18px 4px 10px; text-shadow: 0 2px 0 #000; }

/* date navigator */
.datebar { display: flex; align-items: center; gap: 10px; margin: 12px 4px 4px; }
.datebar .daynav {
  flex: 0 0 auto; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
  font-family: 'PressStart', monospace; font-size: 20px; color: #fff;
  background: var(--panel); border: 3px solid #000; cursor: pointer;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.35), inset 3px 3px 0 rgba(255,255,255,.06);
}
.datebar .daynav:active { transform: translateY(2px); }
.datebar .daynav.disabled { opacity: .25; pointer-events: none; }
.datebar .daymid { flex: 1; text-align: center; }
.datebar .dayname { font-family: 'PressStart', monospace; font-size: 14px; color: var(--ink); }
.datebar .dayback { font-size: 18px; color: var(--gold); margin-top: 4px; cursor: pointer; }
.past-banner {
  text-align: center; font-size: 18px; color: #d8c9ff;
  background: #3a2f5a; border: 3px solid #000; padding: 9px 12px; margin: 8px 4px;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}

/* collection / loot shelf */
.col-label { font-size: 19px; color: var(--ink-dim); margin: 10px 4px 8px; }
.col-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 4px 10px; -webkit-overflow-scrolling: touch; }
.col-chip {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 88px; padding: 12px 6px; cursor: pointer;
  background: var(--panel-2); border: 3px solid #000;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
}
.col-chip .ce { font-size: 40px; line-height: 1; }
.col-chip .cl { font-family: 'PressStart', monospace; font-size: 9px; color: var(--ink-dim); text-align: center; line-height: 1.3; }
.col-chip.active { background: var(--grass-dark); box-shadow: inset 0 0 0 3px var(--grass), inset -3px -3px 0 rgba(0,0,0,.3); }
.col-chip.active .cl { color: #fff; }
.col-chip:active { transform: translateY(2px); }
.quest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .quest-grid { grid-template-columns: 1fr; } }

.quest-card {
  position: relative; cursor: pointer; overflow: hidden;
  border: 4px solid #000; padding: 16px; min-height: 120px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.35), inset 4px 4px 0 rgba(255,255,255,.12), 0 6px 0 var(--shadow);
  transition: transform .05s;
}
.quest-card:active { transform: translateY(3px); }
.quest-card .qtop { display: flex; align-items: center; gap: 12px; }
.quest-card .qico { font-size: 40px; line-height: 1; }
.quest-card .qname { font-family: 'PressStart', monospace; font-size: 14px; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.quest-card .qprog { font-size: 22px; color: rgba(255,255,255,.9); margin-top: 10px; }
.quest-card .mini-bar { height: 12px; background: rgba(0,0,0,.4); border: 2px solid #000; margin-top: 6px; overflow: hidden; }
.quest-card .mini-fill { height: 100%; background: var(--xp); box-shadow: inset 0 2px 0 rgba(255,255,255,.4); transition: width .4s; }
.quest-card.done::after {
  content: '✔ DONE'; position: absolute; top: 10px; right: -34px;
  background: var(--emerald); color: #063; font-family:'PressStart',monospace; font-size: 10px;
  padding: 4px 40px; transform: rotate(45deg); border: 2px solid #063;
}
.quest-card.done { filter: saturate(.7) brightness(.9); }

/* time-of-day tints */
.q-morning { background: linear-gradient(160deg,#e8a13a,#c66a1f); }
.q-after   { background: linear-gradient(160deg,#4f9bd6,#2c6aa0); }
.q-bed     { background: linear-gradient(160deg,#5b4a9a,#332a63); }
.q-holiday { background: linear-gradient(160deg,#3fae5a,#2c7a40); }
.q-default { background: linear-gradient(160deg,#7a7a7a,#565656); }
.quest-card.locked { opacity: .5; filter: grayscale(.6); }
.quest-card .later { font-size: 18px; color: rgba(255,255,255,.85); margin-top: 8px; }

/* ============================================================
   QUEST DETAIL (mining view)
   ============================================================ */
.detail-head { display: flex; align-items: center; gap: 12px; margin: 8px 4px 16px; }
.detail-head .qico { font-size: 44px; }
.detail-head .qname { font-family:'PressStart',monospace; font-size: 16px; }
.detail-head .qsub { font-size: 20px; color: var(--ink-dim); }

.task-list { display: flex; flex-direction: column; gap: 12px; }
.task {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; cursor: pointer;
  border: 4px solid #000; min-height: 66px;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.4), inset 4px 4px 0 rgba(255,255,255,.1);
  transition: transform .05s;
}
.task:active { transform: scale(.98); }
.task .block {
  width: 46px; height: 46px; flex: 0 0 auto; border: 3px solid #000; image-rendering: pixelated;
  position: relative; overflow: hidden;
}
.task .tname { flex: 1; font-size: 26px; }
.task .txp { font-family:'PressStart',monospace; font-size: 11px; color: var(--xp); text-shadow: 0 2px 0 #000; white-space: nowrap; }

/* block textures */
.blk-grass   { background: linear-gradient(var(--grass-light) 0 26%, var(--grass) 26% 34%, var(--dirt) 34% 100%); }
.blk-dirt    { background: var(--dirt); box-shadow: inset -6px -6px 0 rgba(0,0,0,.25); }
.blk-stone   { background: var(--stone); box-shadow: inset -6px -6px 0 rgba(0,0,0,.3); }
.blk-wood    { background: repeating-linear-gradient(90deg,#9a6a3a 0 8px,#875c31 8px 12px); }
.blk-plank   { background: repeating-linear-gradient(0deg,#c19a5b 0 10px,#a37f45 10px 12px); }
.blk-diamond { background: var(--diamond); box-shadow: inset -6px -6px 0 #2a9c9c, inset 6px 6px 0 rgba(255,255,255,.5); }
.blk-gold    { background: var(--gold); box-shadow: inset -6px -6px 0 #b8901f; }
.blk-iron    { background: linear-gradient(135deg,#d8d8d8,#a8a8a8); }
.blk-water   { background: linear-gradient(160deg,#4a8fe0,#2f6fbf); }
.blk-book    { background: linear-gradient(135deg,#b23b3b,#7d2626); }

.task.done { background: var(--panel) !important; filter: none; }
.task.done .tname { color: var(--stone); text-decoration: line-through; }
.task.done .block { filter: grayscale(1) brightness(.6); }
.task.done .txp { color: var(--stone); }
.task .check {
  position: absolute; right: 14px; font-size: 30px; color: var(--emerald);
  opacity: 0; transition: opacity .2s;
}
.task.done .check { opacity: 1; }

.task.cracking .block::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(45deg, transparent 46%, #000 46% 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #000 46% 54%, transparent 54%);
  opacity: .8; animation: crackflash .18s steps(3);
}
@keyframes crackflash { 0%{opacity:.2} 100%{opacity:.9} }

/* completion banner in detail */
.quest-complete {
  text-align: center; padding: 20px; margin-top: 16px;
  background: var(--grass-dark); border: 4px solid #000;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 4px 4px 0 rgba(255,255,255,.12);
}
.quest-complete .pixel { color: var(--gold); font-size: 14px; }
.quest-complete .rew { font-size: 24px; margin-top: 10px; }

/* ============================================================
   SHOP
   ============================================================ */
.shop-tabs { display:flex; gap:8px; margin: 6px 4px 14px; }
.shop-item {
  display:flex; align-items:center; gap:14px; padding:14px; margin-bottom:12px;
}
.shop-item .sico { font-size: 40px; }
.shop-item .sinfo { flex:1; }
.shop-item .sname { font-size: 26px; }
.shop-item .sdesc { font-size: 18px; color: var(--ink-dim); }
.shop-item .cost { font-family:'PressStart',monospace; font-size: 13px; color: var(--gold); display:flex; align-items:center; gap:9px; margin-top:8px; }
.shop-item .cost .gem { width: 22px; height: 22px; margin-left: 2px; }

.pending-note { font-size: 20px; color: var(--gold); text-align:center; padding: 10px; }

/* ============================================================
   ADVANCEMENTS
   ============================================================ */
.adv-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.adv {
  text-align:center; padding:16px 10px; border:4px solid #000;
  background: var(--panel);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.35), inset 4px 4px 0 rgba(255,255,255,.06);
}
.adv .aico { font-size: 40px; }
.adv .aname { font-family:'PressStart',monospace; font-size: 10px; color: var(--gold); margin-top:8px; line-height:1.4; }
.adv .adesc { font-size: 17px; color: var(--ink-dim); margin-top:6px; }
.adv.locked { filter: grayscale(1) brightness(.5); }
.adv.unlocked { background: var(--grass-dark); }

/* ============================================================
   TOASTS (Advancement Made!)
   ============================================================ */
#toast-layer { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display:flex; flex-direction:column; align-items:center; gap:8px; padding-top: calc(env(safe-area-inset-top) + 12px); pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:12px;
  background: #2b2622; border: 3px solid #000; padding: 12px 16px; min-width: 260px; max-width: 90%;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.15), 0 6px 0 var(--shadow);
  animation: toastIn .35s cubic-bezier(.2,1.4,.4,1), toastOut .4s ease 3.4s forwards;
}
.toast .ti { font-size: 34px; }
.toast .tt { font-family:'PressStart',monospace; font-size: 11px; color: var(--gold); }
.toast .ts { font-size: 20px; color: var(--ink); margin-top: 2px; }
@keyframes toastIn { from{ transform: translateY(-90px); opacity:0 } to{ transform: translateY(0); opacity:1 } }
@keyframes toastOut { to { transform: translateY(-90px); opacity:0 } }

/* ============================================================
   FX (floating XP orbs / particles)
   ============================================================ */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.orb {
  position: fixed; width: 16px; height: 16px; background: var(--xp);
  border: 2px solid #2c5a12; box-shadow: 0 0 8px var(--xp);
  animation: orbFly .7s ease-out forwards;
}
@keyframes orbFly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; }
}
.floatxp {
  position: fixed; font-family:'PressStart',monospace; font-size: 14px; color: var(--xp);
  text-shadow: 0 2px 0 #000; pointer-events:none; z-index:56;
  animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-60px);opacity:0} }

.particle { position: fixed; width: 8px; height: 8px; pointer-events:none; z-index:54; animation: partFall .6s ease-out forwards; }
@keyframes partFall { 0%{opacity:1} 100%{ transform: translate(var(--px),var(--py)); opacity:0 } }

/* level-up flash */
.levelup-flash {
  position: fixed; inset: 0; z-index: 58; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle, rgba(123,217,58,.35), transparent 60%);
  animation: luFade 1.4s ease-out forwards;
}
.levelup-flash .lu { font-family:'PressStart',monospace; font-size: 28px; color:#fff; text-shadow: 0 0 12px var(--xp), 0 3px 0 #000; }
@keyframes luFade { 0%{opacity:0} 15%{opacity:1} 100%{opacity:0} }

/* ============================================================
   MODAL / PARENT AREA
   ============================================================ */
#modal-root:empty { display: none; }
.modal-back {
  position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.72);
  display:flex; align-items:flex-start; justify-content:center; padding: 20px 12px;
  overflow-y: auto;
}
.modal {
  width: 100%; max-width: 620px; margin-top: 20px;
  background: var(--panel); border: 4px solid #000;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.35), inset 4px 4px 0 rgba(255,255,255,.08), 0 10px 0 var(--shadow);
  padding: 18px;
}
.modal h2 { font-family:'PressStart',monospace; font-size: 15px; color: var(--gold); margin: 4px 0 16px; text-shadow: 0 2px 0 #000; }
.modal h3 { font-family:'PressStart',monospace; font-size: 12px; color: var(--ink); margin: 18px 0 8px; }

.field { margin-bottom: 14px; }
.field label { display:block; font-size: 20px; color: var(--ink-dim); margin-bottom: 6px; }
input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%; font-family:'PixelBody',monospace; font-size: 24px; color: var(--ink);
  background: #1c1815; border: 3px solid #000; padding: 10px 12px;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.5);
}
select { font-size: 22px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.row > * { flex: 1; }
.modal-actions { display:flex; gap:10px; margin-top: 18px; }

/* PIN pad */
.pinpad { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; max-width: 280px; margin: 16px auto; }
.pinkey { font-family:'PressStart',monospace; font-size: 20px; padding: 18px 0; text-align:center; }
.pin-dots { display:flex; gap:14px; justify-content:center; margin: 10px 0 4px; }
.pin-dot { width: 20px; height: 20px; border: 3px solid #000; background: #1c1815; }
.pin-dot.filled { background: var(--xp); }
.pin-msg { text-align:center; font-size: 20px; color: var(--danger); min-height: 26px; }

/* parent list rows */
.plist { display:flex; flex-direction:column; gap:8px; }
.prow {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background: var(--panel-2); border: 3px solid #000; font-size: 22px;
}
.prow .grab { cursor: grab; color: var(--ink-dim); font-size: 24px; }
.prow.off { opacity: .5; }
.prow.off .pname { text-decoration: line-through; }
.prow .pname { flex:1; }
.prow .ix { font-family:'PressStart',monospace; font-size: 10px; color: var(--xp); }
.tiny-btn {
  font-family:'PressStart',monospace; font-size: 10px; padding: 8px 10px;
  border: 3px solid #000; cursor: pointer; color:#fff; background: var(--stone);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.3);
}
.tiny-btn.up { background: var(--grass); }
.tiny-btn.del { background: var(--danger); }

.day-toggles { display:flex; gap:6px; flex-wrap: wrap; }
.day-toggles .day {
  font-family:'PressStart',monospace; font-size: 10px; padding: 10px; border:3px solid #000; cursor:pointer;
  background: #1c1815; color: var(--ink-dim);
}
.day-toggles .day.on { background: var(--grass); color:#fff; }

.settings-tool {
  position: fixed; bottom: calc(env(safe-area-inset-bottom) + 12px); right: 12px; z-index: 40;
  width: 54px; height: 54px; font-size: 26px; display:flex; align-items:center; justify-content:center;
  background: var(--panel); border: 4px solid #000; cursor: pointer;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.4), 0 4px 0 var(--shadow); opacity: .6;
}
.settings-tool:active { opacity: 1; }

.empty { text-align:center; color: var(--ink-dim); font-size: 22px; padding: 30px 10px; }
.back-btn { margin: 6px 4px 14px; }
.badge-count { font-family:'PressStart',monospace; font-size:10px; background:var(--danger); color:#fff; border:2px solid #000; padding:2px 5px; margin-left:6px; }