@import "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Caveat:wght@500;600&display=swap";:root{--wood:#241a12;--leather-1:#b87a38;--leather-2:#8a5424;--leather-3:#6e3f1c;--stitch:#f0dfb0;--brass:#c9a227;--brass-dark:#8f6e1b;--brass-light:#e9ce6e;--paper:#f3e7c9;--paper-2:#e9d7a6;--ink:#8a2a28;--ink-dark:#6e1f1e;--pencil:#7a6a4c}*{box-sizing:border-box}html,body{height:100%}html{font-size:112.5%}body{background:radial-gradient(ellipse at 50% 0%, #382a1c 0%, var(--wood) 60%);color:#2b2013;justify-content:center;min-height:100vh;margin:0;padding:22px 12px 46px;font-family:EB Garamond,serif;display:flex}.app{flex-direction:column;align-items:center;gap:18px;width:100%;max-width:470px;display:flex}.flourish{opacity:.55;width:150px;height:16px}.flourish path{stroke:var(--brass);fill:none;stroke-width:1.1px}.cover{flex-direction:column;align-items:center;gap:7px;display:flex}.cover-badge{background:radial-gradient(circle at 32% 28%, var(--leather-1), var(--leather-2) 55%, var(--leather-3) 100%);border-radius:50%;width:126px;height:126px;position:relative;box-shadow:0 10px 22px #00000080,inset 0 2px 4px #ffffff40,inset 0 -6px 10px #00000059}.cover-badge:before{content:"";border:1.5px dashed var(--stitch);opacity:.55;border-radius:50%;position:absolute;inset:10px}.cover-badge:after{content:"";border:1px solid #c9a22759;border-radius:50%;position:absolute;inset:-4px}.cover-badge .snap{background:radial-gradient(circle at 35% 30%, var(--brass-light), var(--brass) 55%, var(--brass-dark) 100%);border-radius:50%;width:30px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 4px #00000080,inset 0 1px 1px #fff9}.charm{background:var(--leather-3);width:2px;height:22px;position:absolute;top:116px;left:50%;transform:translate(-50%)}.charm:after{content:"";background:linear-gradient(135deg, var(--leather-1), var(--leather-3));border-radius:3px;width:16px;height:16px;position:absolute;top:22px;left:50%;transform:translate(-50%);box-shadow:0 2px 4px #00000080}.cover-title{text-align:center;color:#e9dcb8}.cover-title .fr{font-family:Caveat,cursive;font-size:1.95rem}.cover-title .en{color:#b3a077;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;font-style:italic}.toolbar{align-items:flex-end;gap:22px;display:flex}.tool-btn{cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;padding:0;display:flex}.tool-btn .icon{border:1px solid var(--brass-dark);background:radial-gradient(circle at 35% 30%,#3a2c1d,#201709);border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:0 3px 8px #0006}.tool-btn:hover .icon{border-color:var(--brass);transform:translateY(-2px);box-shadow:0 6px 12px #c9a2274d}.tool-btn.active .icon{border-color:var(--brass);box-shadow:0 0 0 2px #c9a22759}.tool-btn svg{width:25px;height:25px}.tool-btn .tlabel{color:#cbb98c;font-family:Caveat,cursive;font-size:.92rem}.palette-wrap{width:100%}.palette-label{color:#cbb98c;margin:0 0 7px 6px;font-family:Caveat,cursive;font-size:1.1rem}.palette{scroll-snap-type:x proximity;gap:11px;padding:6px 4px 12px;display:flex;overflow-x:auto}.palette::-webkit-scrollbar{height:6px}.palette::-webkit-scrollbar-thumb{background:var(--brass-dark);border-radius:4px}.medal{scroll-snap-align:start;cursor:pointer;flex-direction:column;flex:none;align-items:center;gap:4px;width:72px;display:flex}.medal .ring{background:radial-gradient(circle at 35% 30%, var(--paper), var(--paper-2));border:2px solid var(--brass-dark);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;position:relative;box-shadow:0 3px 6px #00000059}.medal .ring:after{content:attr(data-tag);color:#fff;background:var(--brass-dark);opacity:.85;border-radius:3px;padding:0 3px;font-size:.6rem;position:absolute;bottom:-4px;right:-4px}.medal svg{width:37px;height:37px}.medal.selected .ring{border-color:var(--brass);transform:translateY(-3px)scale(1.05);box-shadow:0 6px 14px #c9a22773}.medal .label{text-align:center;color:#d8c9a0;font-size:.68rem;line-height:1.15}.medal .label .fr{color:#f0e2b8;font-family:Caveat,cursive;font-size:.92rem;display:block}.medal .label .en{opacity:.65;font-style:italic}.category-divider{background:linear-gradient(var(--brass-dark), transparent);flex:none;align-self:stretch;width:1px;margin:6px 3px}.spell-meta{border-bottom:1px solid var(--brass-dark);background:#ffffff0a;border-radius:4px 4px 0 0;align-items:center;gap:9px;width:min(90vw,400px);padding:8px 9px;display:flex}.spell-meta span{color:#cbb98c;white-space:nowrap;font-family:Caveat,cursive;font-size:1.1rem}.spell-meta input{color:#f0e2b8;background:0 0;border:none;outline:none;flex:1;font-family:Caveat,cursive;font-size:1.3rem}.spell-meta input::placeholder{color:#cbb98c80;font-family:EB Garamond,serif;font-size:.92rem;font-style:italic}.page-shell{aspect-ratio:1;width:min(76vw,350px);position:relative}.page-shell .rim{background:radial-gradient(circle at 30% 25%, var(--leather-1), var(--leather-3) 85%);border-radius:50%;position:absolute;inset:0;box-shadow:0 16px 34px #0000008c,inset 0 2px 4px #fff3}.page-shell .rim:before{content:"";border:1.4px dashed var(--stitch);opacity:.5;border-radius:50%;position:absolute;inset:11px}.page-shell .rim:after{content:"";border:1px solid #c9a2274d;border-radius:50%;position:absolute;inset:-5px}.page-inner{background:radial-gradient(ellipse at 20% 15%, #ffffff26, transparent 45%), radial-gradient(circle, var(--paper), var(--paper-2) 90%);border-radius:50%;position:absolute;inset:19px;overflow:hidden;box-shadow:inset 0 0 30px #5a3c144d}.page-inner:after{content:"";pointer-events:none;background-image:repeating-linear-gradient(0deg,#5a3c1409 0,#0000 1px 3px);position:absolute;inset:0}.ring-svg{width:88%;height:88%;position:absolute;inset:6%}.ring-svg circle{fill:none;stroke:var(--ink);stroke-width:1.6px;filter:url(#inkwobble);opacity:.9;transition:stroke-dasharray .25s}.drop-zone{border-radius:50%;position:absolute;inset:0}.placed{touch-action:none;filter:drop-shadow(0 1px 1px #3c14144d);width:38px;height:38px;position:absolute}.placed svg{pointer-events:none;width:100%;height:100%}.placed.active{filter:drop-shadow(0 0 4px #c9a227cc)}.placed .controls{border:1px solid var(--brass-dark);white-space:nowrap;background:#241a12e6;border-radius:14px;gap:4px;padding:3px 5px;display:none;position:absolute;top:-34px;left:50%;transform:translate(-50%)}.placed.active .controls{display:flex}.placed .controls button{cursor:pointer;background:var(--brass);color:#241a12;border:none;border-radius:50%;flex:none;width:21px;height:21px;padding:0;font-size:12px;font-weight:600;line-height:21px}.placed .controls .rm{background:var(--ink-dark);color:#f2e6c8}.placed .controls .rotl,.placed .controls .rotr{font-size:13px}.spell-meta.error{border-bottom-color:var(--ink);animation:.35s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.ring-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;color:#cbb98c;align-items:center;gap:7px;font-family:Caveat,cursive;font-size:1.1rem;display:flex}.ring-toggle .dot{background:var(--ink);border-radius:50%;width:11px;height:11px;box-shadow:0 0 4px #8a2a2899}.ring-toggle.open .dot{border:1.4px solid var(--ink);box-shadow:none;background:0 0}.hint{color:#b3a077;text-align:center;max-width:320px;font-family:EB Garamond,serif;font-size:.84rem;font-style:italic}.book-nav{perspective:1200px;justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.nav-arrow{border:1px solid var(--brass-dark);width:40px;height:40px;color:var(--brass-light);cursor:pointer;background:radial-gradient(circle at 35% 30%,#3a2c1d,#201709);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:21px;line-height:1;transition:transform .15s,box-shadow .15s,opacity .15s;display:flex}.nav-arrow:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 10px #c9a2274d}.nav-arrow:disabled{opacity:.3;cursor:default}.page-shell{transform-style:preserve-3d;transition:transform .22s}.page-shell.flip{transform:rotateY(90deg)}.book-nav-label{color:#cbb98c;text-align:center;min-height:1.2em;font-family:Caveat,cursive;font-size:1.05rem}.drop-zone.readonly{cursor:pointer}.placed.readonly-symbol{pointer-events:none}.ring-toggle.disabled{opacity:.55;pointer-events:none}#spellName:disabled{opacity:.7}.footer-note{color:#8a7c60;text-align:center;max-width:380px;font-size:.78rem;font-style:italic}.book-strip{width:100%}.book-strip-label{color:#cbb98c;margin:0 0 7px 6px;font-family:Caveat,cursive;font-size:1.1rem}.book-items{gap:10px;padding:4px;display:flex;overflow-x:auto}.book-item{text-align:center;flex:none;width:64px}.book-item .thumb{background:radial-gradient(circle, var(--paper), var(--paper-2));border:1.5px solid var(--brass-dark);border-radius:50%;width:64px;height:64px;position:relative;overflow:hidden}.book-item .thumb svg{width:100%;height:100%;position:absolute;inset:0}.book-item .name{color:#d8c9a0;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-family:Caveat,cursive;font-size:.74rem;overflow:hidden}.layout-row{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.col-left,.col-right{flex-direction:column;align-items:center;gap:18px;width:100%;display:flex}@media (width>=800px){.app{max-width:920px}.cover-badge{width:150px;height:150px}.cover-title .fr{font-size:2.3rem}.toolbar{gap:30px}.tool-btn .icon{width:54px;height:54px}.layout-row{flex-direction:row;justify-content:center;align-items:flex-start;gap:50px;margin-top:8px}.col-left{flex:0 0 360px;align-items:stretch}.col-right{flex:0 0 440px}.palette{flex-wrap:wrap;justify-content:center;padding:6px 2px 10px;overflow:visible}.category-divider{display:none}.book-items{flex-wrap:wrap;justify-content:center;overflow:visible}.page-shell{width:340px}.spell-meta,.ring-toggle{width:400px}}@media (width>=1140px){.app{max-width:1100px}.col-left{flex-basis:420px}.col-right{flex-basis:500px}.page-shell{width:380px}.spell-meta,.ring-toggle{width:440px}}#printSheet{display:none}@media print{body>:not(#printSheet){display:none!important}#printSheet{display:block!important}.print-page{page-break-after:always;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;padding:16px;display:grid}.print-cell{text-align:center}.print-cell .thumb{aspect-ratio:1;background:#f3e7c9;border:1.4px solid #8a2a28;border-radius:50%;width:100%;margin-bottom:4px;position:relative;overflow:hidden}.print-cell .thumb svg{width:100%;height:100%;position:absolute;inset:0}.print-cell .pname{font-family:EB Garamond,serif;font-size:11px;font-style:italic}}.draw-overlay{z-index:50;background:#0a0704d1;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.draw-overlay.hidden{display:none}.draw-panel{background:radial-gradient(circle at 25% 15%, var(--paper), var(--paper-2));border:2px solid var(--brass-dark);border-radius:10px;flex-direction:column;align-items:center;gap:12px;width:min(92vw,400px);padding:18px;display:flex;box-shadow:0 20px 50px #0009}.draw-header{text-align:center}.draw-header .fr{color:var(--ink-dark);font-family:Caveat,cursive;font-size:1.65rem;display:block}.draw-header .en{color:var(--pencil);font-family:EB Garamond,serif;font-size:.82rem;font-style:italic}.draw-canvas-wrap{aspect-ratio:1;border:1.5px dashed var(--brass-dark);background:#ffffff59;border-radius:50%;width:100%;max-width:320px;overflow:hidden}#drawCanvas{touch-action:none;cursor:crosshair;width:100%;height:100%}.draw-toolbar{gap:12px;display:flex}.draw-toolbar button{border:1px solid var(--brass-dark);color:var(--leather);cursor:pointer;background:0 0;border-radius:6px;padding:6px 12px;font-family:EB Garamond,serif;font-size:.88rem;font-style:italic}.draw-toolbar button:hover{background:#c9a22726}.draw-name-row{border-bottom:1px solid var(--brass-dark);align-items:center;gap:9px;width:100%;padding:5px 3px;display:flex}.draw-name-row span{color:var(--ink-dark);white-space:nowrap;font-family:Caveat,cursive;font-size:1.15rem}.draw-name-row input{color:var(--leather);background:0 0;border:none;outline:none;flex:1;font-family:Caveat,cursive;font-size:1.2rem}.draw-name-row input::placeholder{color:#6b625599;font-family:EB Garamond,serif;font-size:.9rem;font-style:italic}.draw-actions{gap:12px;width:100%;margin-top:4px;display:flex}.draw-actions button{cursor:pointer;border:1px solid var(--brass-dark);border-radius:6px;flex:1;padding:9px 8px;font-family:Caveat,cursive;font-size:1.2rem}#drawCancel{color:var(--leather);background:0 0}#drawSave{background:var(--brass);color:#241a12;border-color:var(--brass-dark);font-weight:600}#drawSave:disabled{opacity:.5;cursor:default}.medal.custom-symbol .ring{border-color:#7a9e6e}