/* Prototype 11: the camera owns canvas gestures; the screen respects its edges. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
body[data-screen=play] .app-topbar{height:calc(48px + var(--safe-top));min-height:calc(48px + var(--safe-top));padding-top:var(--safe-top);padding-left:max(12px,var(--safe-left));padding-right:max(12px,var(--safe-right));background:var(--paper);isolation:isolate}
body[data-screen=play]>main{padding-left:max(10px,var(--safe-left));padding-right:max(10px,var(--safe-right))}.app-topbar{padding-top:var(--safe-top);min-height:calc(65px + var(--safe-top));height:auto;background:var(--paper)}
.play-dock{padding-left:max(14px,var(--safe-left));padding-right:max(14px,var(--safe-right));padding-bottom:calc(7px + var(--safe-bottom));border-radius:20px 20px 0 0;background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
.viewport{touch-action:none;overscroll-behavior:none;scroll-behavior:auto;-webkit-overflow-scrolling:auto}#stageSizer{position:relative}.stage{position:absolute}.viewport:active{cursor:grabbing}
body[data-pane=table] #draftTitle{display:block}body[data-pane=table] #draftHelp{display:block}.character{width:44px;height:44px;border-radius:12px;font-size:28px;opacity:1;transition:opacity .8s ease!important}.character.idle-fade{opacity:0}.character img{width:52px;height:52px;left:-4px;top:-4px}
dialog{max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom))}.training-dialog{max-height:100dvh;height:92dvh}.training-map-header{padding-top:calc(14px + var(--safe-top))}.training-detail{padding-bottom:calc(14px + var(--safe-bottom))}
.calendar-dialog{width:min(620px,calc(100vw - 30px));padding:22px 28px 24px;background:var(--paper);overflow:auto}.calendar-dialog h2{font:600 26px/1.15 var(--display);letter-spacing:-1px;margin:10px 0}.calendar-dialog #dailyDate{font-size:10px;color:var(--muted);margin:8px 0 22px}
.calendar-stack{position:relative;margin:15px 5px 10px;isolation:isolate}.calendar-stack:before,.calendar-stack:after{content:'';position:absolute;inset:5px -4px -6px;background:var(--white);border:1px solid var(--line);border-radius:9px;z-index:-1;transform:rotate(1.5deg)}.calendar-stack:after{inset:8px 3px -10px;transform:rotate(-1.7deg)}
.calendar-page{position:relative;padding:0 22px 20px;background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px var(--shadow);text-align:center;overflow:visible}.calendar-page:after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:7px;background:linear-gradient(135deg,var(--white) 5px,transparent 0) 0 0/10px 10px repeat-x}
.calendar-heading{display:flex;justify-content:space-between;gap:10px;background:var(--forest);color:var(--on-accent);margin:0 -22px;padding:16px 18px 11px;border-radius:8px 8px 0 0;font-size:8px;letter-spacing:1.4px;border-bottom:2px dashed color-mix(in srgb,var(--on-accent) 35%,transparent)}.calendar-rings{position:absolute;inset:-12px 18% auto;display:flex;justify-content:space-between;z-index:1}.calendar-rings i{width:10px;height:23px;border-radius:6px;background:linear-gradient(90deg,#718079,#eff0e7 45%,#65766d);box-shadow:0 2px 2px #203c3533}
.calendar-month{font:500 17px var(--display);letter-spacing:3px;text-transform:uppercase;margin:17px 0 0}.calendar-number{font:500 112px/.98 var(--display);letter-spacing:-8px;color:var(--forest);margin:0}.calendar-page h3{font:600 20px var(--display);letter-spacing:-.6px;margin:3px 0}.calendar-status{font-size:11px;color:var(--muted);min-height:20px;margin:8px 0 14px}.calendar-stamp{font-size:8px;letter-spacing:1px;padding:3px 5px;border:1px solid var(--success);color:var(--success);display:inline-block;transform:rotate(-7deg);margin-right:5px}.calendar-page .button{min-height:44px;font-size:12px}
.calendar-navigation{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 0 10px}.calendar-navigation>span{font-size:8px;color:var(--muted)}.calendar-navigation .tool{font-size:10px;min-height:34px}.calendar-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.calendar-tab{position:relative;border:1px solid var(--line);border-radius:5px;padding:8px 2px;font-size:9px;text-transform:uppercase;letter-spacing:1px;background:var(--white);color:var(--muted)}.calendar-tab.current{background:var(--forest);color:var(--on-accent);border-color:var(--forest)}.calendar-tab i{font-style:normal;position:absolute;right:2px;top:0;font-size:8px}.calendar-help{font-size:10px;margin-top:15px;color:var(--muted)}.calendar-help summary{cursor:pointer}.calendar-help p{line-height:1.7}
#stageProps{position:absolute;inset:-84px;pointer-events:none;z-index:0;background-repeat:no-repeat;background-position:left bottom;background-size:220px 150px;opacity:.72}
[data-theme=candy] #stageProps{background-image:url('assets/candy-props.svg')}[data-theme=patch] #stageProps{background-image:url('assets/sewing-props.svg')}[data-theme=overhead] #stageProps{background-image:url('assets/shop-props.svg')}
[data-theme=candy] .drafting-area{background:linear-gradient(100deg,#fff2d7cc,#f9dce5bb),var(--soft);box-shadow:inset 0 4px 0 #fff9ef,inset 0 -4px 0 #d9b69455}[data-theme=candy] .rack-tool{border:1px solid #c98d9f;background:linear-gradient(135deg,#fffcf6,#f5d4d4);box-shadow:inset 0 2px 0 #fff,0 2px 0 #be919a}[data-theme=candy] .rack-tool.active{background:linear-gradient(135deg,#fff0b5,#e9b990);color:#713347}[data-theme=candy] .ledger .panel-heading{border-bottom:2px dotted #d7b382}[data-theme=candy] .play-tabs [aria-selected=true]{box-shadow:inset 0 -3px 0 #d8a578}
[data-theme=patch] .drafting-area{background-image:url('assets/fabric.svg');border-top:3px dashed #fff3d8}[data-theme=patch] .rack-tool{background:#e4d6ba;border:1px dashed #8d765a;box-shadow:inset 0 0 0 2px #f9efd9,1px 2px 2px #534d2c33;border-radius:5px}[data-theme=patch] .rack-tool.active{background:#bac8bc;outline:1px dashed #fff7e3;outline-offset:-4px}[data-theme=patch] .ledger .panel-heading{border-bottom:2px dashed #c1aa87}[data-theme=patch] .play-tabs [aria-selected=true]{outline:1px dashed var(--forest);outline-offset:-4px}
[data-theme=overhead] .drafting-area{background:linear-gradient(90deg,#dddbc9,#eee9d8);box-shadow:inset 0 4px 0 #8c927b,inset 0 -3px 0 #a9ac96}[data-theme=overhead] .rack-tool{background:linear-gradient(#f2ecd9,#d2c7a4);border:1px solid #8f927a;box-shadow:inset 0 1px 0 #fff9e4,0 2px 0 #8b8d76;border-radius:4px}[data-theme=overhead] .rack-tool.active{background:#ebc65a}[data-theme=overhead] .ledger .panel-heading{border-bottom:4px solid transparent;border-image:repeating-linear-gradient(45deg,#cfac45 0 6px,#69705b 6px 12px) 4}
@media(max-width:640px){.training-dialog{height:100dvh}.calendar-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:calc(18px + var(--safe-top)) max(20px,var(--safe-right)) calc(20px + var(--safe-bottom)) max(20px,var(--safe-left))}.calendar-dialog h2{font-size:25px}.appearance-dialog,.menu-sheet{padding-top:calc(22px + var(--safe-top));padding-bottom:calc(22px + var(--safe-bottom))}.training-map-header{padding-left:max(15px,var(--safe-left));padding-right:max(15px,var(--safe-right))}}
@media(prefers-reduced-motion:reduce){.character{transition:none!important}}
#stageProps{background-position:100px calc(100% - 164px);background-size:180px 122px}