/* Shared cel-shaded desert rock material; illustration size is independent of frame. */
html body #title-settings,html body .journal-tutorial-sheet,html body #cloud-auth-panel article{
 --journal-bt:18px;--journal-br:20px;--journal-bb:20px;--journal-bl:30px;--journal-art:clamp(90px,20%,190px);
 border-style:solid!important;border-color:transparent!important;border-width:var(--journal-bt) var(--journal-br) var(--journal-bb) var(--journal-bl)!important;
 border-image:url('/ui/desert-cel-panel.png') 90 90 100 110 fill stretch!important;
 border-radius:0!important;background:none!important;color:#f4dfb7!important;box-sizing:border-box!important;text-shadow:none!important;isolation:isolate;
 /* The authored palette stays fixed under browser themes. */
 color-scheme:only light;forced-color-adjust:none;
}
html body .journal-ornaments{position:absolute;inset:calc(-1 * var(--journal-bt)) calc(-1 * var(--journal-br)) calc(-1 * var(--journal-bb)) calc(-1 * var(--journal-bl));z-index:0;pointer-events:none;overflow:hidden;}
html body .journal-ornament{position:absolute;display:block;width:var(--journal-art);aspect-ratio:1;background:url('/ui/desert-cel-ornaments.png') no-repeat;background-size:200% 200%;opacity:1;pointer-events:none;}
html body .journal-ornament-tl{left:12px;top:0;background-position:0 0;transform:translateY(-43%);}
html body .journal-ornament-tr{right:12px;top:0;background-position:100% 0;transform:translateY(-43%);}
html body .journal-ornament-bl{left:12px;bottom:0;background-position:0 100%;transform:translateY(4%);}
html body .journal-ornament-br{right:12px;bottom:0;background-position:100% 100%;transform:translateY(4%);}
html body #title-settings>.title-panel-heading,html body #title-settings>.journal-settings-content,html body #title-settings>.title-panel-close,
html body .journal-tutorial-sheet>:not(.journal-ornaments),html body #cloud-auth-panel article>:not(.journal-ornaments){position:relative;z-index:1;}
html body #title-settings{display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:8px 16px!important;overflow:visible!important;}
html body #title-settings[hidden]{display:none!important;}
html body #title-settings .title-panel-heading{color:#ffe1a0!important;text-shadow:none!important;font-size:clamp(24px,3.5vh,32px);min-height:100px;display:grid;place-items:center;margin:0;flex-shrink:0;}
html body #title-settings .journal-settings-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(12px,2.4vw,24px);min-height:0;overflow-y:auto;overflow-x:hidden;flex-shrink:1;touch-action:pan-y;}
html body #title-settings .title-setting,html body #title-settings .title-range{color:#f4dfb7!important;border-top-color:#e9b86a44!important;}
html body #title-settings .title-range{grid-column:1/-1;}
html body #title-settings .title-range input{accent-color:#865126;}
html body #title-settings input.settings-selected{outline-color:#70421f!important;}
html body #title-settings .title-panel-close{margin:14px auto 54px!important;flex-shrink:0;}
html body #howto-screen{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;box-sizing:border-box!important;padding:12px!important;background:#160e0bbd!important;backdrop-filter:blur(3px)!important;justify-content:center!important;overflow:hidden!important;}
html body .journal-tutorial-sheet{position:relative;width:min(1040px,100%);height:100%;max-height:900px;min-height:0;padding:8px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;}
html body #howto-screen #intro-title{color:#ffe1a0!important;text-shadow:none!important;font-size:clamp(25px,4.5vh,40px)!important;line-height:1.15!important;min-height:100px;display:grid;place-items:center;margin:0!important;flex-shrink:0;}
html body #howto-screen #intro-content{flex:1;min-height:0;width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;box-sizing:border-box!important;padding:6px 14px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#f4dfb7!important;text-shadow:none!important;overflow-x:hidden!important;overflow-y:auto!important;overflow-wrap:anywhere;}
html body #intro-content [style*='color'],html body #intro-content .inst-panel,html body #intro-content .inst-key{color:#f4dfb7!important;text-shadow:none!important;}
html body #intro-content h3{color:#ffdc98!important;border-bottom-color:#e9b86a66!important;}
html body #intro-content b[style*='#4CAF50']{color:#b9cf95!important;}
html body #intro-content b[style*='#FF9800']{color:#efbf76!important;}
html body #intro-content b[style*='#F44336']{color:#f5a28a!important;}
html body #intro-content .inst-panel{min-width:0!important;max-width:100%;background:#30170d33!important;border:1px solid #e9b86a44!important;border-radius:3px!important;}
html body #intro-content .inst-key{background:#30170d66!important;border:1px solid #dba66566;white-space:normal!important;overflow-wrap:anywhere;}
html body #intro-content .inst-panel p{gap:12px;overflow-wrap:normal;align-items:flex-start!important;}
html body #intro-content .inst-panel .inst-key{flex-shrink:0;min-width:min(5ch,65%);max-width:65%;box-sizing:border-box;}
html body #howto-screen #btn-close-howto{margin:10px auto 52px!important;flex-shrink:0;}
html body #title-settings .journal-settings-content::-webkit-scrollbar,html body #intro-content::-webkit-scrollbar{width:7px;background:#25130d44;}
html body #title-settings .journal-settings-content::-webkit-scrollbar-thumb,html body #intro-content::-webkit-scrollbar-thumb{background:#bf8a4e;border-radius:3px;}
/* Login, registration and the signed-in account view share the same material. */
html body #cloud-auth-panel{background:#160e0bbd;}
html body #cloud-auth-panel article{--journal-bt:14px;--journal-br:18px;--journal-bb:18px;--journal-bl:24px;--journal-art:clamp(80px,22%,108px);position:relative;width:min(500px,100%);padding:8px 18px 24px;box-shadow:0 16px 40px #0006;}
html body #cloud-auth-panel h2{color:#ffe1a0!important;text-shadow:none!important;margin:0 0 8px!important;min-height:76px;display:grid;place-items:center;text-align:center;font-size:clamp(21px,4vw,27px);}
html body #cloud-auth-panel p,html body #cloud-auth-panel label{color:#f4dfb7!important;text-shadow:none!important;}
html body #cloud-auth-panel input{background:#ead0a3!important;color:#382313!important;border:1px solid #80552e!important;border-radius:3px;}
html body #cloud-auth-panel input:focus,html body #cloud-auth-panel input.auth-selected{outline-color:#70421f!important;}
html body #cloud-auth-panel #cloud-auth-error{color:#ffc1a3!important;font-weight:600;}
html body #cloud-auth-panel #cloud-auth-close{margin-bottom:30px!important;}
@media(max-width:619px){
 html body #title-settings{--journal-bt:8px;--journal-br:17px;--journal-bb:9px;--journal-bl:16px;padding:6px!important;}
 html body #title-settings .title-panel-heading{min-height:78px;}
 html body #title-settings .title-setting,html body #title-settings .title-range{font-size:12px!important;}
 html body #title-settings button{font-size:12px!important;}
 html body #title-settings .title-panel-close{margin-bottom:36px!important;}
 html body .journal-tutorial-sheet{--journal-bt:10px;--journal-br:14px;--journal-bb:12px;--journal-bl:18px;padding:4px 2px;}
 html body #howto-screen #intro-title{min-height:100px;padding-top:15px;}
 html body #howto-screen #intro-content{padding:4px 6px!important;}
 html body #intro-content .inst-panel{width:100%!important;}
 html body #howto-screen #btn-close-howto{margin-bottom:30px!important;}
}
@media(max-width:419px){html body #title-settings .title-setting>span{font-size:11px;}}
@media(max-height:500px){
 html body #title-settings,html body .journal-tutorial-sheet{--journal-art:120px;--journal-bt:10px;--journal-br:16px;--journal-bb:12px;--journal-bl:20px;}
 html body #title-settings .title-panel-heading,html body #howto-screen #intro-title{min-height:65px;font-size:24px!important;padding-top:0;}
 html body #title-settings .title-panel-close,html body #howto-screen #btn-close-howto{margin-top:6px!important;margin-bottom:32px!important;}
 html body #howto-screen{padding:6px!important;}
 html body .journal-tutorial-sheet{gap:3px;padding-top:3px;}
 html body #cloud-auth-panel article{padding:6px 14px 10px;}
 html body #cloud-auth-panel h2{min-height:65px;font-size:22px;}
}

/* Leave more game/background visible beside the settings sheet on phones. */
@media (orientation:landscape) and (pointer:coarse), (max-width:1024px) and (max-height:500px){
 html body #title-settings{width:min(760px,88vw)!important;}
}

/* Paint the material independently from content and wooden controls. */
html body :is(#title-settings,.journal-tutorial-sheet,#cloud-auth-panel article){border-image:none!important;}
html body :is(#title-settings,.journal-tutorial-sheet,#cloud-auth-panel article)::before{
 content:"";position:absolute;inset:calc(-1 * var(--journal-bt)) calc(-1 * var(--journal-br)) calc(-1 * var(--journal-bb)) calc(-1 * var(--journal-bl));
 box-sizing:border-box;border-style:solid;border-color:transparent;
 border-width:var(--journal-bt) var(--journal-br) var(--journal-bb) var(--journal-bl);
 border-image:url('/ui/desert-cel-panel.png') 90 90 100 110 fill stretch;
 filter:none;z-index:0;pointer-events:none;
}

/* Fixed illustrated tutorial symbols replace platform-dependent emoji. */
html body #intro-content .tutorial-icon{display:inline-block;width:1.5em;height:1.5em;object-fit:contain;vertical-align:-.32em;margin-right:.18em;opacity:1;filter:none;}