/* Shared presentation patch. Artwork / labels stay separate from gameplay state. */
@font-face{font-family:Itim;src:url('../../public/assets/fonts/itim/Itim-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
body.chrono-ui{--cm-user-font:Itim,'Leelawadee UI',Tahoma,sans-serif}
body.chrono-ui :is(.cu-shell,.cu-shell button,.cu-shell input,.cu-shell select,.cu-dialog,.cu-dialog button,dialog,dialog button){font-family:var(--cm-user-font)!important}
body.chrono-ui .cu-shell[data-scene-backdrop]{background-image:var(--cm-scene-backdrop);background-size:cover;background-position:center;background-repeat:no-repeat}
body.chrono-ui .cu-shell>:is(.cu-hud,.cu-play-nav,.cu-nav){position:relative;isolation:isolate;background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none;overflow:visible!important}
body.chrono-ui :is(.cu-hud,.cu-play-nav)>.cm-button{filter:drop-shadow(0 3px 3px #365b6033);z-index:1}
.cm-ambient-mote.is-chrome{position:absolute!important;z-index:0!important}
body.chrono-ui .board-wrap:has(>.cm-board-perimeter){padding:var(--cm-board-gutter,32px)!important;box-sizing:border-box;overflow:visible}
body.chrono-ui .cu-shop-card>.cm-button{width:calc(100% - 20px)!important;min-width:0!important;max-width:calc(100% - 20px)!important;justify-self:center;margin:8px 10px 4px!important;min-height:48px;padding-inline:14px!important}
body.chrono-ui .cu-shop-card>.cm-button .cm-button__label{font-size:15px;line-height:1.5;overflow-wrap:normal}
body.chrono-ui .cu-map-screen{overflow:visible;touch-action:pan-y;padding-bottom:14px;gap:8px!important}
.cu-map-heading{padding-inline:48px;min-height:54px}
body.chrono-ui .cu-map-heading h1{font-size:22px;margin:2px 0}
body.chrono-ui .cu-map-library.cm-button{width:48px;height:48px;min-width:48px;min-height:48px;background:transparent!important;border:0;box-shadow:none;padding:0!important;filter:drop-shadow(0 4px 6px #e6bc5377)}
.cu-map-library>:is(.cm-frame__layers,.cm-frame__ornaments,.cm-button__background,.cm-button__foreground){display:none!important}
body.chrono-ui .cu-map-library .cm-button__icon{width:42px;height:42px}
body.chrono-ui .cu-playtime{display:flex;flex-direction:column;align-items:center;gap:0;background:none;border:0;border-radius:0;padding:0;margin:2px 0 8px;line-height:1.25;text-align:center;color:#325366}
.cu-playtime>span{font-size:15px}.cu-playtime-value{font-size:clamp(28px,8vw,38px);font-weight:400;text-shadow:0 2px 0 #fff,0 4px 10px #41657840;font-variant-numeric:tabular-nums}
.cu-region-title{font-size:clamp(24px,6.5vw,34px);line-height:1.25;margin:4px 10px 8px;text-align:center;text-transform:uppercase;color:#244e5d;text-shadow:0 2px 0 #fff8e9,0 3px 12px #72c8bf80;text-wrap:balance}
body.chrono-ui .cu-era-period{font-size:15px;line-height:1.4}
body.chrono-ui .cu-era-summary{max-width:90%;margin:6px auto;padding:7px 14px;border-radius:18px;background:#fffdf36b;backdrop-filter:blur(7px);text-align:center;font-size:14px;line-height:1.5;box-shadow:0 3px 12px #47786c0b}
body.chrono-ui .cu-world-map{overflow:visible;height:clamp(250px,36dvh,430px);margin:6px 0 10px;border:0;background:transparent}
body.chrono-ui .cu-world-map .cu-map-landmark{left:50%;top:39%!important;translate:-50% -50%!important;width:26%;height:29%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 4px #ae831f55)}
body.chrono-ui .cu-world-map.is-locked>:is(.cu-map-scene-art,.cu-map-landmark,svg){filter:grayscale(1) brightness(.22);opacity:.68}
body.chrono-ui .cu-map-arrow.cm-button{position:absolute;top:45%;translate:0 -50%;z-index:5;min-width:68px!important;width:auto;min-height:44px;height:44px;padding:5px 10px!important;--cm-button-color:#a8dda1;--cm-ui-button-base:#a8dda1;--cm-ui-button-fill:#a8dda1;filter:drop-shadow(0 4px 4px #375e5355)}
.cu-map-arrow.is-previous{left:0}.cu-map-arrow.is-next{right:0}.cu-map-arrow .cm-button__label{display:inline!important;position:relative;width:auto;height:auto;clip-path:none;overflow:visible;white-space:nowrap;font:15px/1.3 Itim,sans-serif!important}
.cu-map-arrow:not(:disabled) .cm-button__background{background:linear-gradient(#e6fbc9,#9bd29c)!important}
body.chrono-ui .cu-map-caption{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-height:94px;padding:20px 24px!important;border-radius:20px;background:transparent;filter:drop-shadow(0 4px 5px #5175662b)}
.cu-map-caption>strong{text-align:center;font-size:17px;line-height:1.5;position:relative;z-index:1}.cu-map-caption>.cm-button{grid-column:1;grid-row:auto;justify-self:center}
body.chrono-ui .cu-world-map button.cu-map-node.is-current{outline:3px solid #fff7ce;outline-offset:4px;filter:drop-shadow(0 4px 5px #71542d88)}
body.chrono-ui .cu-map-node.is-current::before{content:'';position:absolute;inset:-8px;border-radius:20px;box-shadow:0 0 8px 3px #ffcf6277;animation:cm-current-glow 2.8s ease-in-out infinite;pointer-events:none}
@keyframes cm-current-glow{0%,100%{opacity:.4}50%{opacity:.95}}
.cu-map-charge{position:absolute;left:50%;top:40%;width:32%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#ffe37966,transparent 68%)}
.cu-map-charge::before{content:'';position:absolute;inset:20%;border-radius:50%;box-shadow:0 0 20px #ffd54f88;animation:cm-current-glow 3s ease-in-out infinite}
.cu-map-charge i{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#fff5b5;box-shadow:0 0 7px 2px #ffca43;rotate:calc(var(--particle)*90deg + 20deg);animation:cm-inward-light 3s ease-in-out infinite;animation-delay:calc(var(--particle)*-.75s)}
@keyframes cm-inward-light{0%{transform:translateX(58px) scale(.3);opacity:0}25%{opacity:.75}85%,100%{transform:translateX(5px) scale(.15);opacity:0}}
/* Same clear glass / cyan liquid visual for progress and native range tracks. */
body.chrono-ui .cm-progress{position:relative;height:22px;border:2px solid #9fbbc7;border-radius:999px;background:linear-gradient(#d2e4ee99,#f4fbffcc 48%,#c1d4e3a8);box-shadow:inset 0 2px 3px #304e6338,0 1px 0 #fff;overflow:hidden}
body.chrono-ui .cm-progress__fill{height:100%;width:var(--cm-progress,0%);background:linear-gradient(#e9ffff 0%,#7defff 22%,#35bfed 52%,#188dce 70%,#7defff 100%);border-radius:999px;box-shadow:inset 0 1px 1px #fff,0 0 5px #2ccdf485}
.cm-progress::after{content:'';position:absolute;inset:2px 5px 48%;border-radius:999px;background:linear-gradient(#ffffffa6,#ffffff00);pointer-events:none}
body.chrono-ui input[type=range]{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:44px;min-height:44px;border:0;padding:0;background:transparent;cursor:pointer;--glass-liquid:linear-gradient(#e9ffff,#7defff 22%,#35bfed 52%,#188dce 70%,#7defff);--glass-empty:linear-gradient(#d2e4ee,#f4fbff 48%,#c1d4e3)}
body.chrono-ui input[type=range]::-webkit-slider-runnable-track{height:16px;border:1px solid #92b3c1;border-radius:99px;background:var(--glass-liquid) left/var(--range-fill,0%) 100% no-repeat,var(--glass-empty);box-shadow:inset 0 1px 2px #3a637344,0 1px 0 #fff}
body.chrono-ui input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:26px;margin-top:-6px;border:2px solid #f8e1a2;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#b7f7ff 35%,#5fc7d4 70%,#538fa8);box-shadow:0 2px 4px #395d6655,inset 0 0 0 2px #ffffffa8}
body.chrono-ui input[type=range]::-moz-range-track{height:14px;border:1px solid #92b3c1;border-radius:99px;background:var(--glass-empty)}
body.chrono-ui input[type=range]::-moz-range-progress{height:14px;border-radius:99px;background:var(--glass-liquid)}
body.chrono-ui input[type=range]::-moz-range-thumb{width:24px;height:24px;border:2px solid #f8e1a2;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#b7f7ff 35%,#5fc7d4);box-shadow:0 2px 4px #395d6655}
body.chrono-ui input[type=range]:focus-visible{outline:2px solid #398fae;outline-offset:2px;border-radius:99px}
.cu-screen-settings select[data-setting=locale]{min-height:44px;padding:6px 12px;border-radius:12px;border:1px solid #a7c4bf;background:#fffdf1;color:#25495b;font:inherit;max-width:65%}
@media(prefers-reduced-motion:reduce){.cu-map-charge i,.cu-map-charge::before,.cu-map-node.is-current::before{animation:none!important}.cu-map-charge i{display:none}}

/* A single stable play viewport; board geometry fits both available axes. */
body.chrono-ui .cu-order-flow .cu-merge-area{overflow:hidden;overscroll-behavior:none;touch-action:none}
body.chrono-ui .cu-order-flow .game.cu-live-game{height:100%!important;min-height:0!important;margin:0 auto!important;background:transparent!important;backdrop-filter:none}
body.chrono-ui .cu-order-flow .cu-live-game>.board-wrap{flex:1 1 0%!important;height:100%!important;min-height:0!important;align-items:center!important;overflow:visible!important}
/* Square level recipes use square artwork, with continuous edges at any scale. */
body.chrono-ui .cu-world-map .cu-map-node .cm-frame__nine-slice{border-image-repeat:stretch}
body.chrono-ui .cu-world-map .cu-map-node[data-frame-surface-mask=true]>.cm-button__background,
body.chrono-ui .cu-world-map .cu-map-node[data-frame-surface-mask=true]>.cm-frame__layers>.cm-frame__surface{-webkit-mask-box-image-repeat:stretch}
/* Feather the scroll boundary into the scene; leave the board and its rim intact. */
body.chrono-ui .cu-host:not(.is-board){mask-image:linear-gradient(to bottom,transparent,#000 14px,#000 calc(100% - 22px),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14px,#000 calc(100% - 22px),transparent);padding-block:20px 28px}
body.chrono-ui .cu-shell>:is(.cu-hud,.cu-play-nav)::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:0;right:0;background:linear-gradient(to bottom,#edf9f47a,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);mask-image:linear-gradient(to bottom,#000,transparent);-webkit-mask-image:linear-gradient(to bottom,#000,transparent)}
body.chrono-ui .cu-shell>.cu-hud::before{top:0;bottom:-24px}
body.chrono-ui .cu-shell>.cu-play-nav::before{top:-28px;bottom:0;transform:rotate(180deg)}

/* Selection content must not redistribute the board host height. */
body.chrono-ui .cu-order-flow .cu-selected-bar{height:64px;min-height:64px!important;max-height:64px;flex:0 0 64px;flex-wrap:nowrap}

/* Selection content must not redistribute the board host height. */
body.chrono-ui .cu-order-flow .cu-selected-bar{height:64px;min-height:64px!important;max-height:64px;flex:0 0 64px;flex-wrap:nowrap}
/* Authoritative portrait stage; outer document owns short-screen scrolling. */
body.chrono-ui:has(.cm-game-stage){overflow:auto!important;height:auto;min-height:100%;background:#d3e9e5}
.cm-game-stage{position:relative;margin-inline:auto;padding:0;box-sizing:content-box;margin-top:env(safe-area-inset-top);margin-bottom:env(safe-area-inset-bottom)}
body.chrono-ui .cu-shell[data-game-stage]{position:absolute;inset:0 auto auto 0;width:var(--stage-width);height:var(--stage-height);min-height:0;max-width:none;transform:scale(var(--stage-scale));transform-origin:top left;padding:0;grid-template-columns:minmax(0,1fr);grid-template-rows:54px minmax(0,1fr) 54px;overflow:hidden}
[data-game-stage] .cu-hud{grid-column:1;grid-row:1;padding:5px 8px;gap:5px}
[data-game-stage] .cu-hud .cm-button{min-height:44px;height:44px}
[data-game-stage] .cu-wallet{flex:1;min-width:0;padding:4px 6px;gap:1px}
[data-game-stage] .cu-wallet .cm-button__icon{width:27px;height:27px}
[data-game-stage] .cu-wallet .cm-button__label{font-size:15px;white-space:nowrap}
[data-game-stage] .cu-settings{min-width:40px;padding:4px}
[data-game-stage] .cu-settings .cm-button__icon{width:27px;height:27px}
body.chrono-ui [data-game-stage] .cu-host{grid-column:1;grid-row:2;min-width:0}
body.chrono-ui [data-game-stage] .cu-host.is-board{padding:3px;overflow:hidden}
body.chrono-ui [data-game-stage] .cu-merge-screen{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:204px minmax(0,1fr) 64px;gap:6px;height:100%;max-width:none}
body.chrono-ui [data-game-stage] .cu-order-host{grid-column:1;grid-row:1;overflow:visible;display:block}
body.chrono-ui [data-game-stage] .cu-delivery-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;height:100%;padding:0;gap:8px}
body.chrono-ui [data-game-stage] .cu-order-status:not(:empty){position:absolute;z-index:5;top:54px;left:6px;right:6px;background:#fff8e6;border-radius:8px}
body.chrono-ui [data-game-stage] .cu-merge-area{grid-column:1;grid-row:2;display:block;min-height:0;overflow:hidden;touch-action:pan-y}
body.chrono-ui [data-game-stage] .cu-board-sidebar{display:none}
body.chrono-ui [data-game-stage] .game.cu-live-game{width:100%!important;max-width:none!important;max-height:none!important;padding:0!important}
body.chrono-ui [data-game-stage] .cu-selected-bar{grid-column:1;grid-row:3;height:64px;min-height:64px!important;max-height:64px;flex-wrap:nowrap;gap:5px;padding:4px 8px!important}
[data-game-stage] .cu-selection-art{width:36px;height:36px;flex-shrink:0}
[data-game-stage] .cu-selected-bar strong,[data-game-stage] .cu-selected-bar small,[data-game-stage] .cu-selected-bar .cm-button__label{font-size:12px}
[data-game-stage] .cu-selected-bar .cm-button{min-height:38px;padding:3px 6px}
[data-game-stage] .cu-selected-bar .cm-button__icon{width:20px;height:20px}
body.chrono-ui [data-game-stage] .cu-play-nav{grid-column:1;grid-row:3;display:flex;gap:4px;padding:3px 5px;height:54px}
[data-game-stage] .cu-play-nav .cm-button{flex:1;min-width:0;min-height:48px;font-size:14px}
[data-game-stage] .cu-play-nav .cm-button__label{font-size:14px}
[data-game-stage] .cu-order-quest{--quest-portrait-size:100px;--quest-reveal:76px}
body.chrono-ui [data-game-stage] .cu-order-quest>.cu-delivery-card{padding:20px 6px 14px;display:flex}
[data-game-stage] .cu-order-quest .cu-order-reward{font-size:11px;gap:2px 4px;min-height:20px}
[data-game-stage] .cu-order-quest .cu-order-reward .cu-art{width:15px;height:15px}
[data-game-stage] .cu-order-quest .cu-order-request{min-height:40px;height:auto;gap:4px;margin-top:auto;padding-top:4px}
[data-game-stage] .cu-order-quest .cu-request-slot{padding:2px}
[data-game-stage] .cu-order-quest .cu-request-slot img{width:34px;height:34px}
[data-game-stage] .cu-order-quest .cm-frame__ornament{width:18px}
/* A compact-fit rejection retains native artwork and presents the complete value. */
body.chrono-ui [data-chrome-native-value]>.cm-button__icon,body.chrono-ui [data-full-counter]:not(:has(.signature-chrome))>.cm-button__icon{position:absolute!important;width:18px!important;height:18px!important;left:calc(50% - 9px)!important;top:3px!important;object-fit:contain}
body.chrono-ui [data-chrome-native-value]>.cm-button__label,body.chrono-ui [data-full-counter]:not(:has(.signature-chrome))>.cm-button__label{position:absolute!important;left:4px!important;right:4px!important;bottom:2px!important;top:auto!important;width:auto!important;height:21px!important;padding:0!important;white-space:nowrap!important;font-size:15px!important;display:flex;justify-content:center;align-items:center}
/* Root scrolling must be user-scrollable, not merely accessible to scrollTo(). */
html:has(.cm-game-stage){overflow:auto!important;height:auto;min-height:100%;touch-action:pan-y}
body.chrono-ui:has(.cm-game-stage){min-height:100dvh;touch-action:pan-y}
body.chrono-ui [data-game-stage] .cu-host.is-board,body.chrono-ui [data-game-stage] .cu-merge-area{overscroll-behavior:auto}

body.chrono-ui:has(.cm-game-stage){padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
.cm-game-stage{margin-top:max(env(safe-area-inset-top),calc((100dvh - var(--display-stage-height))/2))}

/* Quest intrinsic content must fit its reserved row, including a second reward line. */
body.chrono-ui [data-game-stage] .cu-delivery-strip{grid-template-rows:minmax(0,1fr)}
html:has(.cm-game-stage),body.chrono-ui:has(.cm-game-stage){background:#d3e9e5!important}

/* Step 8: adaptive visible viewport. Long routes scroll inside the host. */
html:has(.cm-game-stage),body.chrono-ui:has(.cm-game-stage){height:100%;min-height:0;overflow:hidden!important;overscroll-behavior:none;padding:0!important}
.cm-safe-area-probe{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.cm-game-stage{position:fixed;margin:0!important;height:100svh;height:100dvh}
body.chrono-ui [data-game-stage] .cu-merge-screen{grid-template-rows:var(--quest-track,158px) minmax(0,1fr) var(--info-track,52px);gap:4px}
body.chrono-ui [data-game-stage] .cu-selected-bar{height:var(--info-track,52px);min-height:var(--info-track,52px)!important;max-height:var(--info-track,52px);padding:7px 9px!important}
[data-game-stage] .cu-order-quest{--quest-portrait-size:80px;--quest-reveal:var(--stage-quest-reveal,54px)}
body.chrono-ui [data-game-stage] .cu-order-quest>.cu-delivery-card{padding:15px 14px 14px;min-height:0;gap:2px}
[data-game-stage] .cu-order-quest .cu-order-request{border:0!important;margin:0;padding-top:0;min-height:32px;gap:2px}
[data-game-stage] .cu-order-quest .cu-request-slot{padding:3px;border:1px solid #bd914c;border-radius:6px;background:#fff3dc;box-shadow:inset 0 1px 2px #fff9;filter:none}
body.chrono-ui [data-game-stage] .cu-order-quest .cu-request-slot[data-frame-slice]{padding:2px}
[data-game-stage] .cu-order-quest .cu-request-slot img{width:24px;height:24px}
[data-game-stage] .cu-order-quest .cu-order-request::before,[data-game-stage] .cu-order-quest .cu-order-request::after{display:none}
[data-game-stage] .cu-order-quest .cu-order-reward{gap:1px 3px;min-height:18px;font-size:11px}
[data-game-stage] .cu-order-quest .cu-order-currency{gap:0}
[data-game-stage] .cu-order-quest .cu-order-reward .cu-art{width:13px;height:13px}
body.chrono-ui [data-game-stage] .cu-merge-area{touch-action:pan-x pan-y;overflow:hidden}
body.chrono-ui [data-game-stage] .cu-host:not(.is-board){overflow:auto;overscroll-behavior:contain;min-height:0}
[data-game-stage] .cu-hud{padding-top:8px;padding-bottom:2px}
body.chrono-ui [data-game-stage] .cu-play-nav{padding-top:0;padding-bottom:6px}
.cm-global-gold{position:absolute;inset:0;pointer-events:none;border-radius:10px;background:linear-gradient(#fff5e0,#fff0d5);box-shadow:inset 0 0 0 2px #bc853c,inset 0 3px 5px #5e3b1625}
.cm-global-gold__piece{object-fit:fill;user-select:none;-webkit-user-drag:none;pointer-events:none}
.cm-board-perimeter>.cm-global-gold{background:transparent;box-shadow:none}
[data-active-frame]>.cm-frame__ornaments{display:none}

html:has(.cm-game-stage),body.chrono-ui:has(.cm-game-stage){touch-action:pan-x pan-y pinch-zoom}