/* Astoria Dayze - the postcard desk.
   Furniture follows the Channel Markers system in dayze.css: tar lines,
   hull white, the label voice for furniture, plain words everywhere.
   The card itself is a drawn scene (SVG layers built by desk.js);
   code here only frames it, lights its zones, and prints it. */

.friezeband{display:block;width:100%;height:auto;border:2.5px solid var(--tar);margin:14px 0 4px}

/* ---------- doors ---------- */
.doors{display:grid;grid-template-columns:1fr;gap:10px;margin:18px 0 8px}
@media(min-width:760px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{border:2px solid var(--tar);background:#fff;padding:14px 16px;text-align:left;cursor:pointer;font:inherit;color:var(--tar);min-height:48px}
.door:hover{background:var(--steel-soft)}
.door .dt{font-weight:700;font-size:20px;display:block;margin-bottom:4px}
.door .dd{font-size:15px;color:var(--steel);display:block}
.door.today{border-color:var(--red)}
.door.start{border-color:var(--green)}
.shelfhead{font-size:24px;margin:22px 0 2px}
.shelfsub{font-size:15.5px;color:var(--steel);max-width:64ch}
.shelf{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0 26px}
@media(min-width:760px){.shelf{grid-template-columns:1fr 1fr}}
.predone{border:2px solid var(--tar);background:#fff;padding:0;text-align:left;cursor:pointer;font:inherit;color:var(--tar);display:block;width:100%}
.predone:hover{box-shadow:4px 4px 0 var(--steel-soft)}
.predone .pimg{display:block;width:100%;height:auto}
.predone .pmeta{display:block;padding:10px 14px 12px}
.predone .pt{font-weight:700;font-size:18px;display:block}
.predone .pd{font-size:14.5px;color:var(--steel);display:block}

/* ---------- builder ---------- */
.buildbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:16px 0 10px}
.buildtitle{font-weight:700;font-size:19px;margin:0}
.deskbtn{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:15px;border:1.5px solid var(--tar);background:#fff;color:var(--tar);padding:10px 14px;cursor:pointer;min-height:48px}
.deskbtn:hover{background:var(--tar);color:var(--hull)}
.deskbtn.primary{background:var(--red);border-color:var(--red);color:#fff}
.deskbtn.primary:hover{background:var(--tar);border-color:var(--tar)}
.stagewrap{margin:6px 0 4px}
.stage{position:relative;border:2.5px solid var(--tar);background:#fff;line-height:0}
.stage svg{display:block;width:100%;height:auto}
#zoneLayer{position:absolute;inset:0;line-height:normal}
.zonebtn{position:absolute;background:rgba(246,243,236,.14);border:2px dashed transparent;cursor:pointer;padding:0;min-width:44px;min-height:44px}
.zonebtn.lit{border-color:var(--red);background:rgba(178,58,29,.13)}
.zonebtn.lit:hover{background:rgba(178,58,29,.25)}
.zonebtn .zlab{position:absolute;left:4px;top:3px;font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;color:var(--red);background:var(--hull);padding:1px 6px;border:1.5px solid var(--red)}
.carddesc{font-size:15.5px;margin:10px 0 2px;max-width:68ch}
.placedbar{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px;align-items:center}
.placedbar .plabel{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:var(--steel)}
.placedchip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--tar);background:#fff;padding:6px 8px 6px 12px;font-size:15px;min-height:44px}
.placedchip button{font-family:var(--label);text-transform:uppercase;letter-spacing:.04em;font-size:13px;border:1.5px solid var(--red);color:var(--red);background:#fff;padding:6px 9px;cursor:pointer;min-height:36px}
.placedchip button:hover{background:var(--red);color:#fff}
.placedpiece{cursor:pointer}
.placedpiece:hover{opacity:.82}

.steps{margin:14px 0}
.step{border:2px solid var(--tar);background:#fff;margin:0 0 12px;padding:12px 14px}
.step h3{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:16px;margin:0 0 4px}
.step .shelp{font-size:15px;color:var(--steel);margin:0 0 10px}
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:760px){.optgrid.grounds{grid-template-columns:repeat(3,1fr)}}
.opt{border:1.5px solid var(--tar);background:#fff;cursor:pointer;font:inherit;color:var(--tar);text-align:left;padding:8px;min-height:48px}
.opt:hover{background:var(--steel-soft)}
.opt[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--red);background:#fff}
.opt .oname{font-weight:700;font-size:16px;display:block;padding:2px 4px 0}
.opt .osub{font-size:13.5px;color:var(--steel);display:block;padding:0 4px 4px}
.opt svg{display:block;width:100%;height:auto}
.optgrid.words .opt{padding:12px 14px}
.wordprev{display:block;line-height:1.15}
.wordprev .wf{display:block;font-size:14px;color:var(--steel)}
.wordprev .ww{display:block;font-size:27px;font-weight:700;letter-spacing:.02em}
.hand-poster .ww{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;color:var(--tar)}
.hand-plain .ww{font-family:var(--body);font-weight:600;font-size:22px;color:var(--tar)}
.hand-adventure .ww{font-family:Impact,"Arial Black","Arial Narrow",sans-serif;text-transform:uppercase;color:var(--red);-webkit-text-stroke:1px #D9A441;letter-spacing:.03em}
.hand-school .ww{font-family:"Arial Rounded MT Bold","Helvetica Rounded",Verdana,sans-serif;text-transform:uppercase;color:var(--green);letter-spacing:.04em}
.hand-ocean .ww{font-family:var(--label);text-transform:uppercase;color:#2E4A56;letter-spacing:.06em;border-bottom:3px solid var(--steel);border-radius:0 0 50% 50%/0 0 8px 8px}
.hand-circuit .ww{font-family:"Courier New",monospace;text-transform:uppercase;color:var(--tar);letter-spacing:.22em}
.chipgrid{display:flex;flex-wrap:wrap;gap:8px}
.wchip{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:15px;border:1.5px solid var(--tar);background:#fff;color:var(--tar);padding:10px 13px;cursor:pointer;min-height:48px}
.wchip:hover{background:var(--steel-soft)}
.wchip[aria-pressed="true"]{background:var(--tar);color:var(--hull)}
.wchip .live{display:block;font-family:var(--body);text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--red)}
.wchip[aria-pressed="true"] .live{color:#F2C230}

/* the pack drawer: a tray under the card */
.drawer{margin-top:4px}
.dgroup{margin:0 0 12px}
.dgroup h4{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:14.5px;color:var(--steel);margin:0 0 6px}
.dgrid{display:flex;flex-wrap:wrap;gap:8px}
.piece{display:flex;flex-direction:column;align-items:center;gap:2px;width:104px;border:1.5px solid var(--tar);background:#fff;cursor:pointer;font:inherit;color:var(--tar);padding:7px 4px 6px;min-height:96px}
.piece:hover{background:var(--steel-soft)}
.piece[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--red)}
.piece.spent{opacity:.38}
.piece .pbox{display:block;width:64px;height:64px;line-height:0}
.piece .pbox svg{width:64px;height:64px}
.piece .pname{font-size:13.5px;text-align:center;line-height:1.2}
.inhand{border-left:5px solid var(--red);background:#fff;padding:8px 12px;font-size:15.5px;margin:0 0 10px}
.buildfoot{margin:16px 0 26px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- the back of the card ---------- */
.frontthumb{max-width:340px;border:2px solid var(--tar);line-height:0;margin:0 0 12px}
.frontthumb svg{display:block;width:100%;height:auto}
.cardback{position:relative;border:2.5px solid var(--tar);background:#fff;aspect-ratio:600/425;display:grid;grid-template-columns:1fr;overflow:hidden}
@media(min-width:760px){.cardback{grid-template-columns:1fr 1fr}}
.cb-left{padding:16px 18px;border-bottom:2px solid var(--tar)}
@media(min-width:760px){.cb-left{border-bottom:none;border-right:2px solid var(--tar)}}
.cb-right{padding:16px 18px;position:relative}
.cardback label{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:var(--steel);display:block;margin:0 0 5px}
.cardback textarea{width:100%;font:inherit;font-size:16.5px;line-height:1.55;color:var(--tar);border:none;background:repeating-linear-gradient(#fff,#fff 27px,#DCE3E2 28px);padding:2px 2px 0;resize:vertical;min-height:118px}
.cardback textarea:focus-visible{outline:3px solid var(--red);outline-offset:1px}
.cardback input[type="text"]{width:100%;font:inherit;font-size:16.5px;border:none;border-bottom:1.5px solid var(--tar);background:transparent;padding:5px 2px;margin:0 0 14px}
.cb-date{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;font-size:14.5px;color:var(--tar)}
.cb-dayline{font-size:14.5px;color:var(--steel);border:1.5px dashed var(--steel);padding:8px 10px;margin:10px 0}
.cb-dayline .ex{font-family:var(--label);text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--red);display:block;margin-bottom:2px}
.daylinebtn{margin:2px 0 10px}
.stampmark{position:absolute;top:10px;right:10px;width:104px;height:104px;transform:rotate(-10deg);opacity:.92;pointer-events:none}
.finishbox{border:2px solid var(--tar);background:#fff;padding:14px 16px;margin:16px 0 26px}
.finishbox h3{font-size:20px;margin:0 0 4px}
.finishbox .frow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.finishbox p{font-size:15px;max-width:66ch}
.savenote{font-size:14.5px;color:var(--steel)}

/* ---------- print: the card sheets ---------- */
#printRoot{display:none}
@media print{
  body[data-print] header.masthead,body[data-print] main,body[data-print] footer{display:none !important}
  body[data-print] #printRoot{display:block}
  @page{size:letter;margin:.5in}
  .psheet{page-break-after:always}
  .psheet:last-child{page-break-after:auto}
  .pcard-print{width:6in;height:4.25in;margin:0 auto;border:1.5px solid #000;overflow:hidden;position:relative;background:#fff}
  .pcard-print > svg{display:block;width:6in;height:4.25in}
  .pnote{font-size:11pt;max-width:6in;margin:.18in auto 0;color:#000}
  .foldwrap{width:6in;margin:0 auto;border:1.5px dashed #000;padding:.12in}
  .foldline{border-top:2.5px dotted #000;margin:.1in 0;padding-top:.06in;font-size:11pt;text-align:center}
  .foldback{transform:rotate(180deg)}
  .cb-print{font-size:12pt}
}