/* icon_btn.css -- ICON BUTTONS (owner, 6 Nov 2026: "make save load download icons too", across the tool pages).
   Give a button  class="ibtn" data-ic="save" data-label="Save"  and keep its text. The text is hidden (font-size 0)
   and the icon is drawn by ::after as a mask in the button's own colour, so a page that rewrites the label while it
   works ("Download" -> "Rendering...") keeps its icon, and a danger (red) button keeps its red. The button's own
   plate (the skewed ::before) is untouched. icon_btn.js shows data-label as a hover name. */
.ibtn{font-size:0 !important;letter-spacing:0 !important;line-height:0 !important;width:42px !important;min-width:0 !important;
  height:36px !important;padding:0 !important;display:inline-grid !important;place-items:center;vertical-align:middle;flex:none}
/* the icon is placed dead centre, out of the flow: the hidden label is still a (zero-size) line in the button and
   pushed an in-flow icon ~5px low (measured on every page, 6 Nov 2026) */
.ibtn{position:relative}
.ibtn::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:19px;height:19px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ibtn:disabled{opacity:.5}
.ibtn[data-ic=save]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E")}
.ibtn[data-ic=load]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 5h7l2 2h9v12H3z'/%3E%3C/svg%3E")}
.ibtn[data-ic=download]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5'/%3E%3Cpath d='M4 17v3h16v-3'/%3E%3C/svg%3E")}
.ibtn[data-ic=share]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 10.5l6.8-4M8.6 13.5l6.8 4'/%3E%3C/svg%3E")}
.ibtn[data-ic=clear]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E")}
.ibtn[data-ic=characters]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.6 3.3-5.5 6.5-5.5s5.7 1.9 6.5 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16.5 14.6c2.6.1 4.3 1.8 5 4.9'/%3E%3C/svg%3E")}
.ibtn[data-ic=submit]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 17v3h16v-3'/%3E%3C/svg%3E")}
#ibtnTip{position:fixed;z-index:10050;pointer-events:none;white-space:nowrap;background:#08090d;border:1px solid rgba(var(--acc-rgb,255,216,74),.45);
  border-radius:5px;padding:3px 9px;font:700 .7rem Rajdhani,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#fff;
  opacity:0;transition:opacity .12s;box-shadow:0 6px 16px rgba(0,0,0,.5)}
#ibtnTip.on{opacity:1}

/* Banner Creator outline tools (8 Nov 2026): native 24px drawings from the owner's icon plan. */
.ibtn[data-ic=thumb]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'4'%20y%3D'4'%20width%3D'16'%20height%3D'16'%20rx%3D'3'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'10'%20r%3D'3'%2F%3E%3Cpath%20d%3D'M7%2018c1-3%203-4%205-4s4%201%205%204'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=mychar]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'9'%20cy%3D'8'%20r%3D'3.5'%2F%3E%3Cpath%20d%3D'M3%2020c.8-3.6%203.2-5.5%206-5.5'%2F%3E%3Cpath%20d%3D'M17%2012l1.2%202.5%202.8.4-2%202%20.5%202.8-2.5-1.3-2.5%201.3.5-2.8-2-2%202.8-.4z'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=card]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'3'%20width%3D'14'%20height%3D'18'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%207h8M8%2017h5'%2F%3E%3Crect%20x%3D'8'%20y%3D'10'%20width%3D'8'%20height%3D'5'%20rx%3D'1'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=picture]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'16'%20rx%3D'2'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'10'%20r%3D'2'%2F%3E%3Cpath%20d%3D'M21%2016l-5-5-9%209'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=sparkle]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l1.8%205.2L19%2010l-5.2%201.8L12%2017l-1.8-5.2L5%2010l5.2-1.8z'%2F%3E%3Cpath%20d%3D'M19%2016v4M17%2018h4'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=badge]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l7%203v6c0%204.5-3%207.5-7%209-4-1.5-7-4.5-7-9V6z'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=text]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%206V4h14v2M12%204v16M9%2020h6'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=reset]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%204v5h5'%2F%3E%3Cpath%20d%3D'M5.5%2015a7%207%200%201%200%201.6-7.4L4%209'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=cutout]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'6'%20cy%3D'6'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'6'%20cy%3D'18'%20r%3D'3'%2F%3E%3Cpath%20d%3D'M20%204L8.1%2015.9M14.5%2014.5L20%2020M8.1%208.1L12%2012'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=tofront]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2019V7M7%2012l5-5%205%205M5%203h14'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=up]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2019V5M6%2011l6-6%206%206'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=down]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M6%2013l6%206%206-6'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=toback]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v12M7%2012l5%205%205-5M5%2021h14'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=addpng]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'13'%20height%3D'11'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M3%2013l4-4%204%204M19%2014v6M16%2017h6'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=plus]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M5%2012h14'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=replace]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%207h12l-3-3M20%2017H8l3%203'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=magic]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2020L14%2010M15%204v3M13.5%205.5h3M19%209v2M18%2010h2M9%203v2M8%204h2'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=wand]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2020L16%208M15%203l1%202%202%201-2%201-1%202-1-2-2-1%202-1z'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=eraser]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2020h12M5%2014l8-8%206%206-6%206H9z'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=brush]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M18%203l3%203-9%209-3-3zM9%2012c-3%200-5%202-5%205%200%201-1%202-2%202%202%202%207%202%208-1%20.6-1.6%200-3%201-4'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=undo]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2014L4%209l5-5'%2F%3E%3Cpath%20d%3D'M4%209h10a6%206%200%200%201%200%2012h-3'%2F%3E%3C%2Fsvg%3E")}
.ibtn[data-ic=hiddenpng]{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%206h18v4H3zM5%2010v11h14V10M10%2014h4'%2F%3E%3C%2Fsvg%3E")}
/* Dokkan Diamond + Tier List on a phone: their 3-column grid was laid out for text buttons. With icons the bar is one
   row -- Back on the left, the icons together on the right. */
@media (max-width:600px){
  html body .dia-header{display:flex !important;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:6px}
  html body .dia-header .house-back{margin-right:auto !important}
  html body .dia-header .ibtn{width:40px !important}
}