:root {
  --parchment:#F5E6C8;--parchment-light:#FBF3E4;--ink:#1C1008;--ink-mid:#3D2B18;
  --crimson:#7A200D;--crimson-hover:#9B2E14;--crimson-glow:rgba(122,32,13,.25);
  --gold:#C9A84C;--gold-dim:#A68A3E;--bark:#4A3728;--bark-light:#5F4A38;
  --bark-dark:#2C2118;--bark-deep:#1A1009;--border:#6B5540;--shadow:rgba(0,0,0,.4);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{min-height:100vh;background:var(--bark-dark);font-family:'Crimson Text',Georgia,serif;color:var(--ink);overflow-x:hidden;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--bark);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dim);}

#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-8px);background:var(--crimson);color:var(--parchment);padding:12px 28px;border-radius:6px;font-size:15px;z-index:9999;box-shadow:0 6px 24px var(--shadow);font-family:'Crimson Text',serif;display:none;opacity:0;transition:all .3s ease;letter-spacing:.3px;}
#toast.show{display:block;opacity:1;transform:translateX(-50%) translateY(0);}

.app-header{background:var(--bark-deep);border-bottom:3px solid var(--crimson);padding:14px 24px;text-align:center;position:relative;}
.app-header::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(201,168,76,.06),transparent 50%,rgba(122,32,13,.06));}
.app-header h1{font-family:'Cinzel',serif;font-size:26px;font-weight:900;color:var(--parchment);letter-spacing:3px;text-transform:uppercase;position:relative;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.app-header p{color:var(--gold);margin-top:3px;font-size:13px;font-style:italic;position:relative;letter-spacing:.5px;}

.app-body{display:flex;gap:10px;padding:10px;height:calc(100vh - 72px);overflow:hidden;}

.col{background:var(--bark);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.3);}
.col-header{padding:9px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:6px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);}
.col-title{font-family:'Cinzel',serif;font-size:12px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.4);}
.col-body{flex:1;overflow-y:auto;padding:10px;}

.col-editor{flex:0 0 400px;min-width:320px;}
.col-list{flex:0 0 230px;min-width:190px;}
.col-canvas{flex:1;min-width:400px;}

/* Tabs - 3 tabs now - STICKY */
.tabs{display:flex;gap:0;margin-bottom:10px;border-radius:6px;overflow:hidden;border:1px solid var(--border);position:sticky;top:-10px;z-index:10;margin-top:0;margin-left:-10px;margin-right:-10px;border-radius:0 0 6px 6px;border-top:none;}
.tab-btn{flex:1;padding:8px 6px;background:var(--bark-dark);color:var(--parchment);border:none;cursor:pointer;font-family:'Cinzel',serif;font-size:10px;font-weight:400;letter-spacing:.5px;transition:all .2s;opacity:.7;}
.tab-btn:hover{opacity:1;background:var(--bark-light);}
.tab-btn.active{background:var(--crimson);font-weight:700;opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.3);}

.field-label{display:block;font-weight:700;font-size:11px;color:var(--gold);margin-bottom:3px;font-family:'Cinzel',serif;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.3);}
.field-input,.field-select,.field-textarea{width:100%;padding:8px 10px;border:2px solid var(--border);border-radius:5px;font-size:14px;font-family:'Crimson Text',serif;background:var(--parchment-light);color:var(--ink);box-shadow:inset 0 1px 4px rgba(0,0,0,.08);transition:all .2s;}
.field-input:focus,.field-select:focus,.field-textarea:focus{outline:none;border-color:var(--crimson);box-shadow:0 0 0 3px var(--crimson-glow),inset 0 1px 4px rgba(0,0,0,.08);background:#fff;}
.field-input::placeholder,.field-textarea::placeholder{color:#998A76;font-style:italic;}
.field-textarea{resize:vertical;}
.mono-textarea{font-family:'Courier New',monospace;font-size:11.5px;line-height:1.5;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:10px;}
.col-span-2{grid-column:1/-1;}

.ability-cell{text-align:center;background:var(--parchment);border-radius:5px;padding:5px 3px;border:1px solid #D4C4A8;}
.ability-label{font-size:10px;font-family:'Cinzel',serif;font-weight:700;color:var(--crimson);letter-spacing:1px;}
.ability-mod{font-size:11px;color:var(--ink-mid);margin-top:2px;font-weight:600;}
.ability-input{text-align:center;padding:5px 2px!important;font-weight:700;font-size:16px!important;border:1px solid #C4B496!important;}

.btn{border:none;border-radius:5px;padding:8px 16px;cursor:pointer;font-family:'Cinzel',serif;font-size:11px;white-space:nowrap;transition:all .2s;position:relative;letter-spacing:.5px;font-weight:600;}
.btn:active{transform:scale(.96);}
.btn-primary{background:linear-gradient(180deg,var(--crimson-hover),var(--crimson));color:var(--parchment);font-weight:700;box-shadow:0 2px 8px rgba(122,32,13,.4),inset 0 1px 0 rgba(255,255,255,.15);text-shadow:0 1px 2px rgba(0,0,0,.3);}
.btn-primary:hover{background:linear-gradient(180deg,#B33518,var(--crimson-hover));box-shadow:0 4px 16px rgba(122,32,13,.5);transform:translateY(-1px);}
.btn-secondary{background:linear-gradient(180deg,var(--bark-light),var(--bark));color:var(--parchment);box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);}
.btn-secondary:hover{background:linear-gradient(180deg,#7A6350,var(--bark-light));transform:translateY(-1px);}
.btn-outline{background:transparent;border:2px solid var(--border);color:var(--gold);box-shadow:none;}
.btn-outline:hover{border-color:var(--gold);color:var(--parchment);background:rgba(201,168,76,.1);}
.btn-small{padding:5px 10px;font-size:10px;}
.btn-danger{background:linear-gradient(180deg,#6B1A08,#4A1206);color:#F5C6B8;box-shadow:0 2px 6px rgba(74,18,6,.4);}
.btn-danger:hover{background:linear-gradient(180deg,#8B2210,#6B1A08);}
.btn-big{padding:12px 20px;font-size:13px;letter-spacing:1px;width:100%;text-align:center;margin-top:4px;}
.btn-save-edit{background:linear-gradient(180deg,#C9A84C,#A68A3E);color:var(--ink);font-weight:700;box-shadow:0 2px 8px rgba(201,168,76,.4),inset 0 1px 0 rgba(255,255,255,.3);}
.btn-save-edit:hover{background:linear-gradient(180deg,#DFC060,#C9A84C);transform:translateY(-1px);}
.btn-ai{background:linear-gradient(180deg,#4A6B8A,#2E4A64);color:#E0ECF5;font-weight:700;box-shadow:0 2px 8px rgba(46,74,100,.4),inset 0 1px 0 rgba(255,255,255,.15);}
.btn-ai:hover{background:linear-gradient(180deg,#5A7FA0,#4A6B8A);transform:translateY(-1px);}
.btn-ai:disabled{opacity:.5;cursor:not-allowed;transform:none;}

.btn-add{background:var(--crimson);color:var(--parchment);border:none;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:'Cinzel',serif;font-weight:600;transition:all .2s;}
.btn-add:hover{background:var(--crimson-hover);}
.btn-remove{background:none;border:none;color:var(--crimson);cursor:pointer;font-size:16px;padding:4px;line-height:1;flex-shrink:0;transition:all .15s;border-radius:3px;}
.btn-remove:hover{background:rgba(122,32,13,.1);transform:scale(1.1);}

.entry-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.entry-row{display:flex;gap:5px;margin-bottom:5px;background:var(--parchment);border:1px solid #D4C4A8;border-radius:5px;padding:7px;align-items:flex-start;transition:border-color .15s;}
.entry-row:hover{border-color:var(--crimson);}
.entry-fields{flex:1;display:flex;flex-direction:column;gap:4px;}
.entry-input{width:100%;padding:6px 8px;border:1px solid #C4B496;border-radius:4px;font-size:13px;font-family:'Crimson Text',serif;background:#fff;color:var(--ink);transition:all .2s;}
.entry-input:focus{outline:none;border-color:var(--crimson);box-shadow:0 0 0 2px var(--crimson-glow);}
.entry-list-section{margin-bottom:10px;}
.json-error{color:#D44;font-size:12px;margin:5px 0 0;font-weight:600;}
.image-section{margin-bottom:10px;}
.image-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}

.edit-banner{background:linear-gradient(90deg,rgba(201,168,76,.15),rgba(201,168,76,.05));border:1px solid var(--gold-dim);border-radius:6px;padding:8px 12px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
.edit-banner-text{font-family:'Cinzel',serif;font-size:11px;color:var(--gold);font-weight:600;letter-spacing:.5px;}

/* AI Generate */
.ai-panel{padding:0;}
.ai-prompt-area{margin-bottom:10px;}
.ai-prompt-textarea{min-height:120px;font-size:14px;line-height:1.6;}
.ai-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:30px 0;color:var(--gold);font-family:'Cinzel',serif;font-size:13px;letter-spacing:.5px;}
.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Saved List */
.saved-item{background:var(--parchment);border:2px solid #D4C4A8;border-radius:6px;padding:10px 12px;margin-bottom:7px;cursor:pointer;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.1);position:relative;}
.saved-item:hover{border-color:var(--crimson);transform:translateY(-1px);box-shadow:0 3px 12px rgba(0,0,0,.15);}
.saved-item.active{border-color:var(--crimson);background:var(--parchment-light);box-shadow:0 0 0 2px var(--crimson-glow),0 3px 12px rgba(0,0,0,.15);}
.saved-item .si-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--crimson);line-height:1.2;padding-right:24px;}
.saved-item .si-type{font-size:12px;color:var(--ink-mid);font-style:italic;margin-top:2px;}
.saved-item .si-actions{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;}
.saved-item .si-hint{font-size:10px;color:var(--crimson);margin-top:4px;font-style:italic;font-weight:600;}
.saved-item .si-delete{position:absolute;top:6px;right:6px;width:22px;height:22px;background:var(--crimson);color:var(--parchment);border:none;cursor:pointer;font-size:12px;line-height:22px;text-align:center;border-radius:4px;opacity:0;transition:all .15s;z-index:2;}
.saved-item:hover .si-delete{opacity:1;}
.saved-item .si-delete:hover{background:#B33518;transform:scale(1.1);}
.saved-empty{color:var(--gold-dim);font-size:13px;font-style:italic;text-align:center;padding:30px 10px;line-height:1.6;}

/* Canvas */
.canvas-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0;}
.canvas-area{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;overflow:auto;background:var(--bark-deep);background-image:radial-gradient(ellipse at center,rgba(74,55,40,.3),transparent 70%);}

.paper{background:#fff;box-shadow:0 6px 32px rgba(0,0,0,.6);position:relative;flex-shrink:0;cursor:crosshair;user-select:none;transition:background .3s;}

/* Parchment Mode */
.paper.parchment-mode{background:var(--parchment);box-shadow:0 6px 32px rgba(0,0,0,.6),inset 0 0 80px rgba(139,100,50,.2);}

/* Tea stains */
.tea-stain{position:absolute;border-radius:50%;pointer-events:none;z-index:0;mix-blend-mode:multiply;}

/* MM-style border */
.mm-border{position:absolute;inset:0;pointer-events:none;z-index:1;}
.mm-border-inner{position:absolute;inset:12px;border:2px solid rgba(122,32,13,.3);pointer-events:none;}
.mm-border-inner::before{content:'';position:absolute;inset:3px;border:1px solid rgba(122,32,13,.15);}
.mm-border-corner{position:absolute;width:20px;height:20px;pointer-events:none;}
.mm-border-corner svg{width:100%;height:100%;}
.mm-corner-tl{top:6px;left:6px;}.mm-corner-tr{top:6px;right:6px;transform:scaleX(-1);}
.mm-corner-bl{bottom:6px;left:6px;transform:scaleY(-1);}.mm-corner-br{bottom:6px;right:6px;transform:scale(-1);}

.paper-block{position:absolute;overflow:hidden;cursor:move;border:2px solid transparent;transition:border-color .15s,box-shadow .15s;z-index:2;}
.paper-block:hover{border-color:rgba(122,32,13,.4);box-shadow:0 2px 12px rgba(122,32,13,.15);}
.paper-block.selected{border:2px dashed var(--crimson);box-shadow:0 2px 12px rgba(122,32,13,.2);}
.paper-block .pb-resize{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:var(--crimson);opacity:0;transition:opacity .15s;border-radius:2px 0 0 0;}
.paper-block:hover .pb-resize{opacity:.7;}
.paper-block .pb-resize:hover{opacity:1;}
.paper-block .pb-delete{position:absolute;top:0;right:0;width:18px;height:18px;background:var(--crimson);color:var(--parchment);border:none;cursor:pointer;font-size:11px;line-height:18px;text-align:center;display:none;border-radius:0 0 0 4px;z-index:3;transition:background .15s;}
.paper-block .pb-delete:hover{background:#B33518;}
.paper-block:hover .pb-delete,.paper-block.selected .pb-delete{display:block;}

.paper-img-block{position:absolute;overflow:hidden;cursor:move;border:2px solid transparent;transition:border-color .15s;z-index:1;}
.paper-img-block:hover{border-color:rgba(201,168,76,.5);}
.paper-img-block img{width:100%;height:100%;object-fit:contain;pointer-events:none;}
.paper-img-block .pb-resize{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:var(--gold-dim);opacity:0;transition:opacity .15s;border-radius:2px 0 0 0;}
.paper-img-block:hover .pb-resize{opacity:.7;}
.paper-img-block .pb-delete{position:absolute;top:0;right:0;width:18px;height:18px;background:var(--gold-dim);color:var(--ink);border:none;cursor:pointer;font-size:11px;line-height:18px;text-align:center;display:none;border-radius:0 0 0 4px;z-index:2;}
.paper-img-block:hover .pb-delete{display:block;}

.draw-rect{position:absolute;border:2px dashed var(--crimson);background:rgba(122,32,13,.06);pointer-events:none;z-index:10;}

/* Stat Block */
.statblock{font-family:'Crimson Text',Georgia,serif;background:#FDF5E6;border:2px solid var(--crimson);color:var(--ink);line-height:1.35;font-size:12px;position:relative;overflow:hidden;width:100%;}
.statblock .top-bar,.statblock .bottom-bar{height:3px;background:var(--crimson);}
.statblock .content{padding:8px 12px 12px;}
.statblock .monster-name{font-family:'Cinzel',Georgia,serif;font-size:16px;font-weight:700;color:var(--crimson);margin:0 0 1px;letter-spacing:.5px;line-height:1.15;}
.statblock .monster-type{margin:0 0 3px;font-style:italic;font-size:10px;color:#555;}
.statblock .core-stat{margin:1px 0;font-size:11px;}
.statblock .ability-table{width:100%;text-align:center;border-collapse:collapse;margin:2px 0;}
.statblock .ability-table th{font-family:'Cinzel',serif;font-size:9px;font-weight:700;color:var(--crimson);padding:1px 2px;letter-spacing:.8px;}
.statblock .ability-table td{padding:1px 2px;font-size:10.5px;}
.statblock .property{margin:1px 0;font-size:11px;}
.statblock .section-title{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--crimson);border-bottom:1.5px solid var(--crimson);margin:6px 0 3px;padding-bottom:1px;}
.statblock .entry{margin:3px 0;font-size:11px;}
.statblock .entry-name{font-weight:700;font-style:italic;}
.statblock .legendary-desc{margin:2px 0 5px;font-size:10px;font-style:italic;color:#555;}
.statblock .monster-img{max-width:100%;max-height:120px;border:1px solid var(--crimson);border-radius:2px;object-fit:contain;}
.statblock .img-wrap{text-align:center;margin:4px 0;}
.stat-divider{display:block;width:100%;height:4px;margin:3px 0;}

/* Parchment stat block variant */
.statblock.sb-parchment{background:#ECD9B0;border-color:#6B3A1F;box-shadow:inset 0 0 20px rgba(100,60,20,.12);}
.statblock.sb-parchment .top-bar,.statblock.sb-parchment .bottom-bar{background:#6B3A1F;}
.statblock.sb-parchment .monster-name{color:#4A1A08;}
.statblock.sb-parchment .section-title{color:#4A1A08;border-color:#6B3A1F;}
.statblock.sb-parchment .ability-table th{color:#4A1A08;}

.paper-block .statblock{border:none;}
.paper-block .statblock .top-bar,.paper-block .statblock .bottom-bar{height:2px;}

.toggle-row{display:flex;align-items:center;gap:8px;}
.toggle-label{font-family:'Cinzel',serif;font-size:10px;color:var(--gold);letter-spacing:.5px;}
.toggle-check{width:16px;height:16px;accent-color:var(--crimson);cursor:pointer;}

/* STICKY save area at bottom */
#save-area{position:sticky;bottom:-10px;z-index:10;margin-left:-10px;margin-right:-10px;padding:10px 10px 12px;background:var(--bark);border-top:1px solid var(--border);box-shadow:0 -4px 12px rgba(0,0,0,.3);}

@media print{
  body{background:#fff!important;}
  .col-editor,.col-list,.app-header,#toast,.canvas-toolbar{display:none!important;}
  .app-body{padding:0!important;height:auto!important;}
  .col-canvas{border:none!important;background:none!important;box-shadow:none!important;}
  .canvas-area{padding:0!important;background:none!important;}
  .paper{box-shadow:none!important;}
  .paper-block,.paper-img-block{border-color:transparent!important;cursor:default!important;}
  .paper-block .pb-resize,.paper-block .pb-delete,.paper-img-block .pb-resize,.paper-img-block .pb-delete{display:none!important;}
  .draw-rect{display:none!important;}
}

/* ===== Mobile layout (<=740px) =====
   Desktop uses a 3-column flex row (editor 400px | list 230px | canvas 1fr)
   locked to a fixed viewport height with overflow:hidden. None of that works
   on a phone: the columns can't fit side-by-side in a 390px viewport, and
   the fixed 100vh-72px is wrong now that .app-header is hidden on phone.
   Switch to a vertical stack with the editor on top (primary action),
   followed by the saved list, then the canvas preview. The whole page
   scrolls as one document, which is what mobile users expect. */
@media (max-width: 740px) {
  .app-body {
    flex-direction: column;
    height: auto;
    padding: 8px;
    gap: 12px;
    overflow: visible;
  }
  .col,
  .col-editor,
  .col-list,
  .col-canvas {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .col-editor { min-width: 0; }
  .col-list   { min-width: 0; max-height: 300px; }
  .col-canvas { min-width: 0; }
  /* Canvas-area was flex-centered in a fixed-height column; on mobile give
     it room to breathe and let horizontal overflow scroll (for the 8.5in
     stat-block paper) rather than clipping. */
  .canvas-area { padding: 10px; overflow: auto; }
  /* Grid-2 collapses to one column so paired fields stack. Grid-6 (ability
     scores) stays as repeat(6,1fr) since each cell is already tiny. */
  .grid-2 { grid-template-columns: 1fr; }
  /* Tabs sit flush with the editor's header — drop the negative side margins
     that were yanking them past the col's 10px padding on desktop. */
  .tabs { margin-left: 0; margin-right: 0; }
  /* Sticky save-area uses the same -10px trick; reset for mobile. */
  #save-area { margin-left: 0; margin-right: 0; bottom: 0; }
}