:root{
  --gold:#e9ad46;
  --gold-hi:#ffd271;
  --gold-dark:#8b4d11;
  --black:#080705;
  --panel:#0c0a08;
  --red:#b82017;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#080604}
body{font-family:Georgia,"Times New Roman",serif;color:#f5d797;overflow-x:hidden}
a,button{-webkit-tap-highlight-color:transparent}
button{font:inherit}
.page-shell{width:100%;min-height:100vh;min-height:100dvh;display:block;background:#080604}
.artboard{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  min-height:680px;
  overflow:hidden;
  isolation:isolate;
  background:#080604;
}
.reference-art{
  position:absolute;inset:0;z-index:-3;
  background:url("assets/reference.png") center center/100% 100% no-repeat;
  pointer-events:none;
}
/* A subtle cover over the screenshot UI makes the live DOM controls the visible controls. */
.action-row,.ca-wrap,.accordion-area{z-index:5}
.action-row{
  position:absolute;
  left:14.71%; right:14.39%; top:62.20%; height:6.67%;
  display:grid;grid-template-columns:1fr 1fr 1fr 1.04fr;gap:1.58%;
}
.samurai-btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:7.5%;
  height:100%;padding:0 10%;text-decoration:none;color:#f1bd55;
  font-family:Arial,Helvetica,sans-serif;font-size:1.76dvh;font-weight:700;
  background:linear-gradient(180deg,rgba(17,15,12,.995),rgba(6,6,5,.995));
  border:2px solid #d08c2b;
  clip-path:polygon(4% 0,96% 0,100% 18%,100% 82%,96% 100%,4% 100%,0 82%,0 18%);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.76),inset 0 0 0 4px rgba(242,180,67,.3),0 0 16px rgba(228,120,18,.24),0 7px 15px rgba(0,0,0,.45);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.samurai-btn::after{
  content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px solid rgba(252,196,75,.62);
  clip-path:polygon(3% 0,97% 0,100% 20%,100% 80%,97% 100%,3% 100%,0 80%,0 20%);
}
.samurai-btn:hover,.samurai-btn:focus-visible{transform:translateY(-2px);filter:brightness(1.16);box-shadow:inset 0 0 0 3px rgba(0,0,0,.72),inset 0 0 0 4px rgba(242,180,67,.38),0 0 24px rgba(241,145,23,.38),0 10px 22px rgba(0,0,0,.5);outline:none}
.samurai-btn:active{transform:translateY(1px) scale(.99)}
.ornament{position:absolute;left:2.4%;color:#f0a62c;font-size:1.37dvh;text-shadow:0 0 6px #d9760c}
.ornament-right{left:auto;right:2.4%}
.action-icon{flex:0 0 auto;color:#f0b248;filter:drop-shadow(0 1px 1px #341b05)}
.pill-icon{width:3.22dvh;height:1.66dvh;border-radius:999px;background:#f2bd52;transform:rotate(-45deg);box-shadow:inset -1px -1px 0 #9d5b13}
.pill-icon::after{content:"";position:absolute;width:1px;top:1px;bottom:1px;left:50%;background:#8c5415}
.swap-icon{font-family:Arial,sans-serif;font-size:4.10dvh;font-weight:400;line-height:1}
.telegram-icon{width:4.10dvh;height:auto;fill:#f0b248}
.x-icon{font-family:Arial,sans-serif;font-size:4.30dvh;line-height:1}
.action-label{white-space:nowrap}

.ca-wrap{
  position:absolute;left:24.55%;top:70.62%;width:51.03%;height:7.08%;
  display:grid;grid-template-columns:5.2% 8% 1fr 6.5% 5.2%;align-items:center;gap:1.6%;
  padding:0 1.4%;color:#f5bd53;
  background:linear-gradient(180deg,rgba(15,13,10,.995),rgba(5,5,4,.995));
  border:2px solid #d18a28;
  clip-path:polygon(3% 0,97% 0,100% 22%,100% 78%,97% 100%,3% 100%,0 78%,0 22%);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.75),inset 0 0 0 4px rgba(242,180,67,.3),0 0 18px rgba(228,120,18,.18),0 8px 18px rgba(0,0,0,.4);
}
.ca-wrap::before{content:"";position:absolute;inset:6px;border:1px solid rgba(249,188,67,.6);clip-path:inherit;pointer-events:none}
.flower{position:relative;z-index:1;text-align:center;font-size:3.32dvh;color:#f0ac37;text-shadow:0 1px 0 #6b3a0d}
.ca-label{position:relative;z-index:1;font-family:Arial,sans-serif;font-size:3.13dvh;font-weight:900;letter-spacing:.02em;text-align:center}
.ca-field{position:relative;z-index:1;height:58%;display:flex;align-items:center;padding:0 2%;border:1px solid #9a6728;border-radius:4px;background:#090a09;overflow:hidden}
.ca-field code{font-family:"Courier New",monospace;color:#efefea;font-size:1.56dvh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy-btn{position:relative;z-index:1;width:100%;aspect-ratio:1;border:0;background:transparent;color:#efb841;display:grid;place-items:center;cursor:pointer;border-radius:5px;transition:background .15s ease,transform .15s ease}
.copy-btn:hover,.copy-btn:focus-visible{background:rgba(224,144,26,.12);outline:1px solid rgba(241,182,58,.6)}
.copy-btn:active{transform:scale(.92)}
.copy-btn svg{width:68%;height:68%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round}

.accordion-area{position:absolute;left:13.08%;top:80.31%;width:73.89%;display:flex;flex-direction:column;gap:1.56dvh}
.accordion{position:relative}
.accordion-head{
  position:relative;width:100%;height:6.93dvh;display:grid;grid-template-columns:6.8% 1fr 7%;align-items:center;
  padding:0 2.2% 0 3.7%;border:2px solid #cf8422;cursor:pointer;color:#eeb44c;text-align:left;
  background:linear-gradient(180deg,rgba(17,15,12,.995),rgba(8,7,6,.995));
  clip-path:polygon(1.2% 0,98.8% 0,100% 14%,100% 86%,98.8% 100%,1.2% 100%,0 86%,0 14%);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.76),inset 0 0 0 4px rgba(229,155,41,.24),0 0 14px rgba(226,95,15,.18);
}
.accordion-head::after{content:"";position:absolute;inset:6px;border:1px solid rgba(249,186,63,.45);clip-path:inherit;pointer-events:none}
.accordion-head:hover{filter:brightness(1.12)}
.seal{position:relative;z-index:1;width:4.39dvh;aspect-ratio:.9;display:grid;place-items:center;background:linear-gradient(#b61515,#8e0e0e);border-radius:3px;color:#160a07;font-family:serif;font-size:1.86dvh;font-weight:900;writing-mode:vertical-rl;box-shadow:inset 0 0 0 1px rgba(255,120,70,.25),0 2px 5px rgba(0,0,0,.5)}
.accordion-title{position:relative;z-index:1;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-style:italic;font-size:4.79dvh;letter-spacing:.01em;line-height:1;color:#e3a64b;text-shadow:0 2px 0 #4c2507;transform:skewX(-6deg)}
.chevron{justify-self:end;width:2.15dvh;height:2.15dvh;border-right:3px solid #efae38;border-bottom:3px solid #efae38;transform:rotate(45deg) translateY(-25%);transition:transform .2s ease}
.accordion-head[aria-expanded="true"] .chevron{transform:rotate(225deg) translate(-20%,-20%)}
.accordion-panel{position:relative;margin-top:-2px;padding:1.76dvh 1.82vw 2.15dvh;color:#ead9bd;background:linear-gradient(180deg,#11100e,#090807);border:2px solid #b66f1c;border-top:0;box-shadow:0 10px 30px rgba(0,0,0,.55);font-family:Arial,Helvetica,sans-serif;font-size:1.46dvh;line-height:1.55}
.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.faq-grid details{background:#0b0a08;border:1px solid rgba(214,142,39,.4);padding:10px 12px}
.faq-grid summary{cursor:pointer;color:#f2bb58;font-weight:800}
.faq-grid p,.disclaimer-panel p{margin:.6em 0 0}
.disclaimer-panel p{max-width:980px}

.toast{position:absolute;z-index:20;left:50%;top:68%;transform:translate(-50%,8px);opacity:0;pointer-events:none;padding:10px 16px;border:1px solid #d68b28;border-radius:6px;background:rgba(8,7,5,.96);color:#f4c96b;font-family:Arial,sans-serif;font-size:1.37dvh;box-shadow:0 8px 20px rgba(0,0,0,.5);transition:opacity .18s ease,transform .18s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:701px){
  /* Full-bleed desktop mode: the 1536×1024 reference is mapped to the entire monitor.
     This removes side bars on 16:9, 16:10, ultrawide and 4K displays while keeping
     every interactive element aligned to the artwork by percentage coordinates. */
  .artboard{width:100vw;height:100vh;height:100dvh;min-height:680px;aspect-ratio:auto}
  .reference-art{background-size:100% 100%;background-position:center center}
  .samurai-btn{border-width:max(1px,.13dvh)}
  .samurai-btn::after,.ca-wrap::before,.accordion-head::after{inset:.59dvh}
  .ca-wrap,.accordion-head{border-width:max(1px,.20dvh)}
  .ca-field{border-radius:.39dvh}
  .copy-btn{border-radius:.49dvh}
  .accordion-panel{border-width:max(1px,.20dvh)}
  .faq-grid{gap:1.37dvh}
  .faq-grid details{padding:.98dvh .78vw}
  .toast{padding:.98dvh 1.04vw;border-radius:.59dvh}
}

@media (max-width:700px){
  .page-shell{display:block;min-height:100vh;background:#090705}
  .artboard{width:100%;height:auto;aspect-ratio:auto;min-height:100vh;padding-top:66.66vw;background:#090705;overflow:hidden}
  .reference-art{height:66.66vw;background-size:100% auto;background-position:center top;background-repeat:no-repeat}
  .action-row,.ca-wrap,.accordion-area{position:relative;left:auto;right:auto;top:auto;width:auto;height:auto}
  .action-row{margin:10px 16px 0;grid-template-columns:1fr 1fr;gap:10px}
  .samurai-btn{min-height:54px;font-size:15px;padding:0 18px}
  .ca-wrap{margin:12px 16px 0;min-height:66px;grid-template-columns:34px 42px 1fr 42px 26px;padding:0 12px;gap:6px}
  .ca-field code{font-size:11px}
  .accordion-area{margin:14px 16px 34px;gap:12px}
  .accordion-head{height:66px;grid-template-columns:58px 1fr 40px;padding:0 16px}
  .accordion-title{font-size:34px}
  .faq-grid{grid-template-columns:1fr}
  .toast{position:fixed;top:auto;bottom:24px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}