:root{--generator:"Proudly made by OliRO"}

/* Base */
html,body{overflow-x:hidden}
body{margin:0;font-family:'Crimson Pro',serif;background-color:#111;color:#f5f5f5}
h1{margin:0;font-size:2rem}

/* Title banner */
#titleBanner{position:relative;width:100%;height:25vh;min-height:180px;max-height:300px;overflow:hidden;text-align:center}
#titleBanner img{width:100%;height:100%;object-fit:cover;display:block}
#titleBanner h1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:75pt;color:#ffa600;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;z-index:2}

/* Overlay (theme) */
#overlay{position:relative;z-index:1}
#overlay.dark{background-color:rgba(0,0,0,.4)}
#overlay.light{background-color:rgba(255,255,255,.4);color:#111}
#overlay.light .watermark{color:#000}
#overlay.light #toolbarWrapper{background-color:rgba(255,255,255,.6);border-top:2px solid #fff;border-bottom:2px solid #fff}
#overlay.light #queueToolbar{background-color:rgba(255,255,255,.4);box-shadow:0 0 10px rgba(0,0,0,.1);border-top:2px solid #fff;border-bottom:2px solid #fff}

/* Toolbar */
#toolbarWrapper{padding:10px;background-color:rgba(0,0,0,.4);border-top:2px solid #000;border-bottom:2px solid #000;display:flex;justify-content:center;width:100%;margin-bottom:16px}
#toolbar{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;gap:10px}
#toolbarPrimary,#toolbarSecondary{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
#toolbarPrimary{position:sticky;top:0;z-index:50;margin-bottom:4px}
#toolbar button:hover{background-color:#444;cursor:pointer}
#toolbar label,#toolbar span label{font-size:1.1rem;font-weight:700;color:gold;text-shadow:1px 1px 2px #000;display:block;text-align:center;margin:0 0 6px}
#overlay.light #toolbar label,#overlay.light #toolbar span label{color:#b8860b;text-shadow:1px 1px 2px rgba(255,255,255,.6)}
.login-vertical{display:flex;flex-direction:column;align-items:center;gap:4px}
body::before {content: "OliRO was here";display: none;}
#patreonLoginWrapper { flex: 0 0 100%;display: flex;flex-direction: column;align-items: center;gap: 6px;}
#authControls {display: inline-flex;justify-content: center;align-items: center;gap: 8px;}

/* Toolbar bottom row controls */
.toolbar-bottom{display:flex;justify-content:center;align-items:flex-end;gap:2px;padding-top:6px;flex-wrap:nowrap;overflow-x:auto;border-top:none}
.toolbar-bottom .control-group,.toolbar-bottom .toolbar-group{display:flex;flex-direction:column;align-items:center;min-width:96px}
.toolbar-bottom .control-label,.toolbar-bottom label{font-size:.95rem;font-weight:700;margin-bottom:3px}
.toolbar-bottom input[type=color],.toolbar-bottom select,.toolbar-bottom button{height:32px;padding:0 8px}
#overlay.light .toolbar-bottom{border-top:none}

/* Controls + buttons */
.control-group{display:flex;flex-direction:column;align-items:center;margin-right:1rem}
.control-label{font-size:.8rem;margin-bottom:.25rem;font-weight:700;text-align:center}
#toolbar button,#toolbar select,#queueToolbar button,#exportQueuedCardsBtn,#clearQueuedCardsBtn,#queueCardBtn,#importCardArtBtn,#importSchoolIconBtn,#removeSchoolIconBtn{padding:8px 14px;font-size:1rem;font-weight:600;border-radius:10px;background:linear-gradient(145deg,#2d2d2d,#1b1b1b);border:2px solid #555;color:#f0f0f0;box-shadow:0 2px 4px rgba(0,0,0,.6);transition:all .2s ease-in-out}
#toolbar button:hover,#queueToolbar button:hover,#exportQueuedCardsBtn:hover,#clearQueuedCardsBtn:hover,#queueCardBtn:hover,#importCardArtBtn:hover,#importSchoolIconBtn:hover,#removeSchoolIconBtn:hover{background:linear-gradient(145deg,#444,#222);transform:scale(1.05);border-color:#999;box-shadow:0 4px 10px rgba(255,255,255,.1)}
#cardType,#schoolPreset{color:CanvasText;background-color:Canvas}
#cardType option,#schoolPreset option{color:CanvasText;background-color:Canvas}
select:disabled{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;padding-right:6px}
.toggle-btn{background-color:#444;color:#fff;border:none;padding:6px 12px;margin-right:8px;border-radius:12px;outline:2px solid #000;cursor:pointer;font-family:'Crimson Pro',serif;font-size:1.1rem;opacity:.8;transition:all .2s ease}
.toggle-btn.active{background-color:rgba(1,179,75,.815);color:#000;font-weight:700;border-radius:12px;outline:2px solid #000;opacity:1}
.queue-toggle{margin-top:4px;font-size:.8rem;padding:3px 6px;background-color:#333;color:#fff;border:1px solid #555;border-radius:4px;cursor:pointer}

/* Stage + scroll */
#stageWrap{width:100%;overflow-x:clip}
#stage{display:inline-block;transform-origin:top center}
#scrollWrapper{width:100%;overflow-x:clip}

/* Cards */
#cardContainer{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:40px;flex-wrap:nowrap;transform-origin:top center;margin-top:16px;scale:.7}
.card{position:relative;width:826px;height:1417px;background-color:transparent;box-shadow:0 0 15px rgba(0,0,0,.4)}
.card img{width:100%;height:100%;object-fit:fill;display:block;user-select:none;-webkit-user-drag:none}
#frontCard,#backCard,.card{aspect-ratio:826/1417;width:826px;height:auto;flex:0 0 auto;overflow:hidden}
#frontCard>img,#backCard>img{display:block;width:100%;height:100%;object-fit:fill!important}

/* Layout boxes */
#layoutBoxes{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}
.layout-box{position:absolute;overflow:hidden;z-index:2;border:0;border-radius:20px;background-color:transparent;background-clip:border-box;box-sizing:border-box;margin:0;padding:0}
.layout-box.debug{outline:1px dashed red;background-color:rgba(255,0,0,.05)}
.layout-box *{border:none!important;border-radius:inherit!important;background:transparent!important;box-sizing:border-box}

/* Static text/image panes */
.static-box{width:100%;height:100%;font-size:inherit;font-family:inherit;color:inherit;background-color:transparent;text-align:center;display:flex;justify-content:center;align-items:center;pointer-events:none;user-select:none}
.text-box,.textarea-box,#SpellSchool,.select-box{width:100%;height:100%;font-size:inherit;font-family:inherit;color:inherit;background-color:transparent;border-radius:inherit;padding:0;margin:0;border:none;box-sizing:border-box;resize:none;overflow:hidden}
.select-box option{font-size:.5em!important}

/* Image boxes */
.layout-box img{display:block}
.layout-box[data-type=image]{font-size:0!important;color:transparent!important}
.layout-box[data-type=image] img:not(.static-icon):not(.toggle-icon){display:block;width:100%;height:100%;object-fit:fill;border-radius:inherit}
.layout-box[data-fit=contain] img{object-fit:contain!important}
.layout-box[data-fit=fill] img{object-fit:fill!important}
.layout-box[data-fit=cover] img{object-fit:cover!important}

/* Toggles & icons */
.static-icon,.toggle-icon{width:100%;height:100%;object-fit:contain;border-radius:6px;transition:opacity .5s ease;user-select:none;-webkit-user-drag:none}
.toggle-icon.inactive{opacity:.3}
.toggle-wrapper{width:100%;height:100%;cursor:pointer;display:flex;justify-content:center;align-items:center;pointer-events:auto}
.card img,.toggle-icon,.static-icon{user-select:none;-webkit-user-drag:none;pointer-events:none}

/* Watermark */
.watermark{position:absolute;bottom:4px;left:38%;font-size:22px;color:#000;background-color:#fff;padding:0 22px;border-radius:8px;pointer-events:none;border:2px solid #000;z-index:5;white-space:nowrap}
#backCard .watermark{display:none}

/* Background */
#background{position:fixed;top:0;left:0;z-index:0;width:100%;height:100%;background:url("../images/backgrounds/hunter.png") no-repeat center center fixed;background-size:cover;pointer-events:none}

/* Export/queue buttons */
#exportBothPNG{display:block;margin:1rem auto;padding:.6rem 1.2rem;font-size:1rem;font-weight:700;border-radius:6px;background-color:#333;color:#fff;border:2px solid #999;cursor:pointer}
#exportBothPNG:hover{background-color:#555}
#queueToolbar{padding:10px;background-color:rgba(0,0,0,.4);border-top:2px solid #000;border-bottom:2px solid #000;display:flex;justify-content:center;overflow-x:auto}
#queueList{display:flex;gap:12px;padding:6px;margin:0;list-style:none;justify-content:center}
.queue-item{display:flex;flex-direction:column;align-items:center;background-color:rgba(20,20,20,.6);padding:6px 10px;border-radius:8px;box-shadow:0 0 4px rgba(0,0,0,.3)}
.queue-title{font-size:1.2rem;margin-bottom:6px;color:#fff;text-align:center}
.queue-remove{padding:4px 8px;font-size:.8rem;background-color:#a00;color:#fff;border:none;border-radius:4px;cursor:pointer}
.queue-remove:hover{background-color:#d00}
.queue-thumb,.preview-wrapper{position:relative;width:100px;height:172px;overflow:hidden;display:flex;justify-content:center;align-items:center;border-radius:8px;box-shadow:0 0 4px rgba(0,0,0,.6);background-color:rgba(0,0,0,.5)}
.hidden{display:none!important}
.hidden-input{display:none}

/* Loading popup */
#loadingPopup{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(6px);z-index:99999;justify-content:center;align-items:center;font-family:'Crimson Pro',serif}
#loadingPopup .popup-content{text-align:center;background:rgba(0,0,0,.575);padding:30px;border-radius:12px;box-shadow:0 0 20px rgba(0,0,0,.4)}
#loadingPopup img{max-width:170px;height:auto;display:block;margin:0 auto 15px}
#offscreenRenderer{position:absolute;top:-9999px;left:-9999px;width:0;height:0;overflow:hidden;pointer-events:none;opacity:0}
#titleBanner .subtitle{font-family:'Crimson Pro',serif;font-size:1.5rem;font-weight:400;color:#fff;margin-top:-50px;text-align:center;letter-spacing:.5px}

/* Print sheet (export) */
#printSheet{position:fixed;left:-9999px;top:-9999px;pointer-events:none}
#printSheet .export-root,#printSheet #frontCard,#printSheet #backCard,#printSheet #layoutBoxes{position:static!important;display:block!important;width:826px!important;height:1417px!important;max-width:none!important;max-height:none!important;transform:none!important;scale:1!important;opacity:1!important;visibility:visible!important}
#printSheet img#frontCardImage,#printSheet img#backCardImage{display:block!important;width:826px!important;height:1417px!important;object-fit:cover!important}

/* Responsive */
@media (max-width:1199px){
  #titleBanner{height:20vh;min-height:140px;max-height:200px}
  #titleBanner h1{font-size:30pt}
  #cardContainer{flex-direction:column;align-items:center;gap:16px;scale:1;margin-inline:auto}
  .card{width:826px;height:1417px;position:relative;overflow:hidden;display:block}
  #frontCard>img,#backCard>img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:fill;display:block;z-index:1}
  #layoutBoxes{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:2;pointer-events:auto}
  #stageWrap,#scrollWrapper{display:flex;justify-content:center}
  #cardContainer{display:inline-block;width:826px;margin-top:16px}
}

/* Print-size override */
@media print{.card{width:826px;height:1417px}}

/* Cookie Banner */
#cookieBanner{position:fixed;top:0;left:0;right:0;width:100%;background:#1e1e1e;color:#fff;z-index:10000;box-shadow:0 2px 10px rgba(0,0,0,.35);display:none}
#cookieBanner .cookie-inner{max-width:980px;margin:0 auto;padding:12px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
#cookieBanner .cookie-text{margin:0;line-height:1.4;font-size:.95rem}
#cookieBanner .cookie-link{color:#7fd0ff;text-decoration:underline}
#cookieBanner .cookie-actions{display:flex;gap:10px;justify-content:center;width:100%}
#cookieBanner .cookie-btn{border:none;padding:10px 16px;cursor:pointer;border-radius:8px;font-weight:600}
#cookieBanner .cookie-accept{background:#4caf50;color:#fff}
#cookieBanner .cookie-essential{background:#2d2d2d;color:#fff;border:1px solid #444}

/* Cookie Lock */
#cookieLock{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9999;backdrop-filter:blur(1px);pointer-events:auto}

/* Scroll padding offset for fixed banners */
html,body{scroll-padding-top:72px}

/* Quick Links (above toolbar) */
#quickLinks.ql-wrap{display:flex;justify-content:center;align-items:center;gap:.5rem;padding:.4rem .8rem;position:sticky;top:0;z-index:60;background-color:rgba(0,0,0,.8);border-bottom:1px solid rgba(0,0,0,.6)}

/* Pumpkin buttons */
.ql-btn{display:inline-flex;align-items:center;gap:.4rem;height:30px;padding:0 .75rem;font-size:1.4rem;font-weight:700;border-radius:6px;text-decoration:none;background-color:#ff7518;color:rgb(230, 177, 3);border:2px solid #000;transition:transform .1s ease,filter .2s ease;cursor:pointer}
.ql-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.ql-btn:active{transform:translateY(0);filter:brightness(.95)}
.ql-btn svg{width:16px;height:16px;fill:currentColor}

/* Print */
@media print{#quickLinks.ql-wrap{display:none!important}}

/* === Toolbar + Weblink bar === */
#toolbarWrapper{padding:10px;background-color:rgba(0,0,0,.8);border-top:2px solid #000;border-bottom:2px solid #000;display:flex;justify-content:center;width:100%;margin-bottom:16px}
#overlay.light #toolbarWrapper{background-color:rgba(255,255,255,.85);border-top:2px solid #fff;border-bottom:2px solid #fff}
#toolbar{max-width:1100px;margin:0 auto;padding:0;background:transparent;border:0}

/* Weblink bar: full-bleed, no outline, flush under banner */
#siteLinks{width:100vw;margin:0 0 0 calc(50% - 50vw);padding:8px 16px;background:rgba(0,0,0,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:0;border-radius:0;box-shadow:none}
#overlay.light #siteLinks{background:rgba(255,255,255,.85);color:#111;border:0}


/* === Link row (inline patch) === */
.linkbar{display:grid;grid-template-columns:repeat(2,220px);justify-content:center;gap:6px 10px;margin:0 auto}
.linkbtn,.linkbtn:link,.linkbtn:visited,.linkbtn-wide{display:inline-flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;margin:0;padding:6px 12px;border-radius:10px;text-decoration:none;font-weight:600;font-size:1rem;letter-spacing:.2px;white-space:nowrap;background:linear-gradient(145deg,#2d2d2d,#1b1b1b);border:2px solid #555;color:#f0f0f0;opacity:1;transition:transform .12s ease,opacity .12s ease,border-color .12s ease,background .12s ease}
.linkbtn:hover{transform:translateY(-1px);opacity:.97;border-color:#999;background:linear-gradient(145deg,#3a3a3a,#202020)}
.linkbtn:active{transform:translateY(0);opacity:.9}
#overlay.light .linkbtn,#overlay.light .linkbtn:link,#overlay.light .linkbtn:visited{color:#111;border-color:#bdbdbd;background:linear-gradient(145deg,#f0f0f0,#e6e6e6)}
.linkbtn-wide{grid-column:auto;justify-self:center;margin:0;min-width:unset}