/* parchment.css - in-game "old parchment in a dark iron frame" look, made only from CSS and inline SVG
 * (no image files). Reusable on any page: wrap content in .dc-frame > .dc-parch, use .dc-plate for a
 * title bar, .dc-well for a sunken area, .dc-btn for wooden buttons and .dc-stone for stone tabs.
 * The paper grain is SVG fractal noise; the torn edge is an SVG mask (browsers without mask support
 * just show a straight edge). */
:root{
  --dc-paper:#d8bd88;--dc-paper-hi:#ead3a0;--dc-paper-lo:#b89462;--dc-ink:#3b2611;--dc-ink-soft:#6b4a26;
  --dc-burn:rgba(74,40,10,.55);--dc-iron:#2b2620;--dc-iron-hi:#5a5045;--dc-rivet:#c9a35a;
  --dc-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dc-stains:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .07 0 0 0 1.4 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --dc-torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cfilter id='t' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9'/%3E%3C/filter%3E%3Crect x='5' y='5' width='390' height='390' rx='6' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
  --dc-marble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .06' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}
/* dark iron frame with gold rivets in the corners */
.dc-frame{position:relative;padding:9px;border-radius:14px;
  background:linear-gradient(160deg,#4a4036,var(--dc-iron) 35%,#1a1612 70%,#3a3229);
  border:1px solid #0d0b09;box-shadow:0 10px 30px rgba(0,0,0,.65),inset 0 1px 0 var(--dc-iron-hi),inset 0 -2px 0 #0b0907}
.dc-frame::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(circle at 12px 12px,var(--dc-rivet) 0 3px,#6b5023 3.5px,transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) 12px,var(--dc-rivet) 0 3px,#6b5023 3.5px,transparent 4.5px),
    radial-gradient(circle at 12px calc(100% - 12px),var(--dc-rivet) 0 3px,#6b5023 3.5px,transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),var(--dc-rivet) 0 3px,#6b5023 3.5px,transparent 4.5px)}
/* aged parchment: grain + stains + burnt edges + torn outline */
.dc-parch{position:relative;color:var(--dc-ink);border-radius:8px;
  background:var(--dc-stains),var(--dc-grain),
    radial-gradient(ellipse at 30% 20%,var(--dc-paper-hi),transparent 60%),
    radial-gradient(ellipse at 80% 85%,rgba(150,105,55,.45),transparent 55%),
    linear-gradient(180deg,var(--dc-paper),var(--dc-paper-lo));
  background-size:600px 600px,260px 260px,100% 100%,100% 100%,100% 100%;
  box-shadow:inset 0 0 36px var(--dc-burn),inset 0 0 6px rgba(50,25,5,.8);
  -webkit-mask:var(--dc-torn) center/100% 100% no-repeat;mask:var(--dc-torn) center/100% 100% no-repeat}
/* title plate: dark leather with a marbled sheen */
.dc-plate{position:relative;border-radius:8px;color:#fbe9b8;font-family:"Lilita One",system-ui,sans-serif;letter-spacing:.5px;
  background:var(--dc-marble),linear-gradient(180deg,#7a4e22,#4e2f12);background-size:300px 120px,100% 100%;
  border:1px solid #2a1606;box-shadow:inset 0 1px 0 rgba(255,220,150,.35),inset 0 -2px 4px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.35);
  text-shadow:0 2px 0 #2a1606,0 0 8px rgba(0,0,0,.6)}
/* sunken area on the parchment */
.dc-well{border-radius:10px;background:rgba(80,50,20,.18);
  box-shadow:inset 0 2px 8px rgba(60,30,8,.55),inset 0 0 0 1px rgba(90,55,20,.35),0 1px 0 rgba(255,240,200,.35)}
/* wooden button (Back / Upgrade style) */
.dc-btn{appearance:none;cursor:pointer;border-radius:9px;padding:7px 12px;font:700 13px/1.2 "Segoe UI",system-ui,sans-serif;color:#fbe9b8;
  background:linear-gradient(180deg,#8a5a2b,#5b3814 60%,#43280c);border:1px solid #2a1606;
  box-shadow:inset 0 1px 0 rgba(255,215,140,.4),0 2px 0 #24150a;text-shadow:0 1px 0 #24150a}
.dc-btn:hover{filter:brightness(1.12)}
.dc-btn.on{color:#2a1606;background:linear-gradient(180deg,#fbe9b8,#e9c46a 55%,#b98a2e);border-color:#7a5a1a;text-shadow:none}
/* stone tab (the game's I / II / III buttons) */
.dc-stone{appearance:none;cursor:pointer;border-radius:8px;font:700 17px/1 Georgia,"Times New Roman",serif;color:#b9b2a6;
  background:radial-gradient(circle at 35% 30%,#5d5852,#34312d 70%);border:2px solid #1a1816;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 3px rgba(0,0,0,.6)}
.dc-stone.on{color:#ffcf4d;border-color:#ffb300;background:radial-gradient(circle at 35% 30%,#6a4a12,#2e1f06 70%);
  box-shadow:0 0 10px rgba(255,180,0,.55),inset 0 1px 0 rgba(255,220,120,.35)}
@media (prefers-reduced-transparency:reduce){.dc-parch{background:linear-gradient(180deg,var(--dc-paper),var(--dc-paper-lo))}}

/* gentle edge on every parchment (owner 2026-11-12, -13 and -15: the full-card tear above is too much): a thin torn
 * strip on the top and bottom edges only, so the tear stays a few pixels deep however tall the card is (the full-card
 * mask stretches with the height). .dc-tall is kept as a class name so older markup still reads the same. */
.dc-parch,.dc-parch.dc-tall{--dc-tear-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cfilter id='t' x='0' y='-50%25' width='100%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .02' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='-10' y='5' width='420' height='26' fill='%23fff' filter='url%28%23t%29'/%3E%3C/svg%3E");--dc-tear-bot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cfilter id='t' x='0' y='-50%25' width='100%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .02' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='-10' y='-11' width='420' height='26' fill='%23fff' filter='url%28%23t%29'/%3E%3C/svg%3E");
  -webkit-mask:var(--dc-tear-top) top/100% 14px no-repeat,var(--dc-tear-bot) bottom/100% 14px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 24px) no-repeat;
  mask:var(--dc-tear-top) top/100% 14px no-repeat,var(--dc-tear-bot) bottom/100% 14px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 24px) no-repeat}