/* Header, resizable model stage and controls each own a real layout row. */
#playAreaSheet.play-area-screen{
  display:grid;grid-template-rows:auto minmax(90px,1fr) auto;gap:10px;justify-content:stretch;
  width:100%;height:100dvh!important;min-height:0;inset:0!important;transform:none!important;margin:0;
  padding:calc(var(--ui-safe-top) + 10px) calc(var(--ui-safe-right) + 12px) calc(var(--ui-safe-bottom) + 10px) calc(var(--ui-safe-left) + 12px)!important;
  background:#071b2d!important;overflow:hidden;
}
#playAreaSheet .play-backdrop{position:absolute;inset:0;z-index:-1;background:#23545d url('/assets/encounters/sunny-beach-v0.1.131.webp') center / cover no-repeat;}
#playAreaSheet[data-landscape='tropical-clearing'] .play-backdrop{background-image:url('/assets/encounters/tropical-clearing-v0.1.131.webp');}
#playAreaSheet[data-landscape='moonlit-coast'] .play-backdrop{background-image:url('/assets/encounters/moonlit-coast-v0.1.131.webp');background-color:#10233d;}
#playAreaSheet .play-backdrop::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#041a3280,transparent 30%,transparent 58%,#03182c80);pointer-events:none;}
#playAreaSheet .play-area-top{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;align-items:start;width:100%;max-width:780px;margin:0 auto;z-index:2;}
#playAreaSheet #closePlayArea{position:static;min-width:54px;min-height:44px;padding:10px 8px;font-size:12px;border-radius:11px;background:#0a283be8;color:#bde4df;border:1px solid #60928d;box-shadow:none;}
#playAreaSheet .encounter-titlewrap{background:#082638d9;border:1px solid #48727b80;border-radius:13px;padding:10px 12px;text-align:left;min-width:0;backdrop-filter:blur(8px);}
#playAreaSheet .encounter-number{font:700 10px/1.3 ui-monospace,monospace;color:#90d4c3;letter-spacing:.08em;margin:0;}
#playAreaSheet.play-area-screen #playAreaName{font-size:24px;line-height:1.15;color:#d7ebde;margin:4px 0;overflow-wrap:anywhere;text-shadow:none;}
#playAreaSheet.play-area-screen #playAreaInfo{font-size:11px;line-height:1.5;color:#9ebcc6;margin:0;text-shadow:none;}
#playAreaSheet .play-area-playfield,#playAreaSheet.animation-test-open .play-area-playfield{display:block;position:relative;min-width:0;min-height:0;width:100%;max-width:900px;margin:0 auto;padding:0;overflow:hidden;}
#playAreaSheet.play-area-screen .play-creature-stage,#playAreaSheet.animation-test-open .play-creature-stage{
  position:relative;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;background:none!important;border-radius:0!important;overflow:hidden;
}
#playAreaSheet .play-creature-stage::before{background:radial-gradient(ellipse,#14252045,transparent 70%)!important;bottom:9%!important;pointer-events:none;}
#playAreaSheet .play-control-panel{position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;min-height:0;width:100%;max-width:600px;margin:0 auto;padding:12px;border-radius:18px;border:1px solid #58888a80;background:#082331ed;box-shadow:0 4px 18px #04142140;}
#playAreaSheet .play-area-statusbar{order:0;position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,.65fr);gap:10px;align-items:center;width:100%;margin:0;padding:0 0 9px;border:0;border-bottom:1px solid #2d5260;border-radius:0;background:none;backdrop-filter:none;}
#playAreaSheet .play-area-stat{display:grid;gap:4px;min-width:0;color:#bddcda;}
#playAreaSheet .play-area-stat strong{font-size:12px;line-height:1.3;overflow-wrap:anywhere;}
#playAreaSheet .play-area-stat-label{font:9px/1.2 ui-monospace,monospace;letter-spacing:.08em;color:#7ea5ad;}
#playAreaSheet .play-area-affection-block{grid-template-columns:1fr auto;gap:5px;}
#playAreaSheet .play-area-affection-block .play-area-stat-label{grid-column:1;}
#playAreaSheet .play-area-affection-block strong{grid-column:2;grid-row:1;font-size:10px;}
#playAreaSheet .play-area-affection-bar{grid-column:1/-1;grid-row:2;min-width:0;width:100%;height:7px;background:#274354;}
#playAreaSheet .play-area-affection-bar span{background:#77d2b6;box-shadow:none;}
#playAreaSheet .play-area-actions{order:1;position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:none;width:100%;margin:0;}
#playAreaSheet .play-action-button{position:static;min-height:46px!important;height:auto;padding:10px 8px;border-radius:10px;font-size:14px;line-height:1.25;box-shadow:none;}
#playAreaSheet .play-action-button.secondary{background:#143e4d;color:#bce1df;border:1px solid #49737d;}
#playAreaSheet .play-action-button.primary{background:#6ac4aa;color:#102f31;border:1px solid #82d3bf;}
#playAreaSheet .play-area-actions .admin-animation-test{min-height:44px!important;padding:8px;font:700 10px/1.3 ui-monospace,monospace;letter-spacing:.05em;color:#8babbb;border:1px dashed #385a68;background:#0a2634;}
#playAreaSheet .play-area-message,#playAreaSheet.animation-test-open .play-area-message{order:2;position:static;display:block!important;align-self:stretch;min-height:28px;max-width:none;width:100%;margin:0;padding:3px 2px;border:0;border-radius:0;background:none!important;font-size:11px;line-height:1.5;text-align:center;color:#a1c1c7;box-shadow:none;backdrop-filter:none;}
#playAreaSheet .play-area-message.error{color:#eeac9e;}
#playAreaSheet .play-animation-test-panel{order:3;position:static!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;max-height:36dvh;margin:0!important;padding:10px!important;border-radius:10px!important;overflow-y:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:'label close' 'select select' 'play loop' 'current current';gap:7px!important;background:#071d2a!important;border:1px solid #315663!important;box-shadow:none!important;}
#playAreaSheet .play-animation-test-panel label{grid-area:label!important;grid-column:auto!important;line-height:1.3;}
#playAreaSheet .animation-test-close{grid-area:close;justify-self:end;min-height:44px;width:44px;height:44px;background:#122e3b;color:#a9ceca;border-radius:8px;}
#playAreaSheet .play-animation-test-panel select{grid-area:select;min-height:44px!important;height:44px;background:#102b3a;color:#b9d9d7;font-size:16px;}
#playAreaSheet #playSelectedAnimationButton{grid-area:play;}
#playAreaSheet #playAllAnimationsButton{grid-area:loop!important;}
#playAreaSheet .play-animation-now{grid-area:current!important;grid-column:1/-1!important;width:100%;min-height:28px!important;height:auto;padding:5px;font-size:11px;}
#playAreaSheet.animation-test-open .play-area-statusbar,#playAreaSheet.animation-test-open .play-area-actions{display:none!important;}
@media(max-height:650px){#playAreaSheet.play-area-screen{gap:6px;}#playAreaSheet .play-control-panel{gap:6px;padding:8px;}#playAreaSheet .encounter-titlewrap{padding:7px 10px;}#playAreaSheet.play-area-screen #playAreaName{font-size:20px;}#playAreaSheet .play-area-message{min-height:20px;font-size:10px;}}
@media(orientation:landscape) and (max-height:500px){#playAreaSheet.play-area-screen{grid-template-columns:minmax(0,1fr) minmax(240px,.7fr);grid-template-rows:auto minmax(90px,1fr);column-gap:12px;}#playAreaSheet .play-area-top{grid-column:1/-1;}#playAreaSheet .play-area-playfield{grid-column:1;grid-row:2;}#playAreaSheet .play-control-panel{grid-column:2;grid-row:2;align-self:center;max-height:100%;overflow-y:auto;}#playAreaSheet .play-animation-test-panel{max-height:none;}}