@font-face{font-family:LuneliaSerif;src:url('fonts/lunelia-serif.woff') format('woff');font-display:swap}
@font-face{font-family:LuneliaItalic;src:url('fonts/lunelia-italic.woff') format('woff');font-display:swap}
@font-face{font-family:LuneliaSans;src:url('fonts/lunelia-sans.woff') format('woff');font-display:swap}
:root{
 color-scheme:dark;--heading:LuneliaSerif,Georgia,serif;--italic:LuneliaItalic,Georgia,serif;--body:LuneliaSans,system-ui,sans-serif;
 --base:#201727;--panel:#322338;--panel-lit:#493049;--edge:#b88798;--accent:#f0bec3;--shimmer:#f5dfbf;--ink:#fff3e8;--soft:#e2cbcf;
 --corner-size:25px;--frame-top-left:url('ui/canto-lunar-1.svg');--frame-top-right:url('ui/canto-lunar-2.svg');
 --frame-bottom-right:url('ui/canto-lunar-3.svg');--frame-bottom-left:url('ui/canto-lunar-4.svg')
}
*,*::before,*::after{box-sizing:border-box}
html{min-width:0}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 15% 0,var(--panel-lit),transparent 63%),var(--base);color:var(--ink);font:1rem/1.46 var(--body)}
body::before{content:'';position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background-position:center;background-size:cover;opacity:.62}
body.mosaics{--base:#14242c;--panel:#1b303b;--panel-lit:#345760;--edge:#9ebcb4;--accent:#c9ede0;--shimmer:#e6e7ce;--ink:#f3f7eb;--soft:#c7dfdb}
[hidden]{display:none!important}
button,a{touch-action:manipulation}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.53;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit}
img{max-width:100%;height:auto;vertical-align:middle}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--heading);font-weight:500;line-height:1.03}
h2{font-size:clamp(1.6rem,4vw,2.6rem)}
h3{font-size:1.35rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shell{width:min(1160px,100%);margin:auto;padding:0 14px;padding-inline:max(14px,env(safe-area-inset-left,0px)) max(14px,env(safe-area-inset-right,0px))}
.world-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:max(11px,env(safe-area-inset-top));padding-bottom:12px}
.world-tools,.action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.world-tools{gap:6px;justify-content:flex-end}
.portal-mark{width:102px;filter:drop-shadow(0 3px 7px #100b14);margin-right:auto}
.icon{display:inline-block;width:22px;height:22px;vertical-align:middle;flex:none;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.coin-pill{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 12px;border:1px solid #e4bdad51;border-radius:23px 9px 23px 9px;background:#110c1554;color:var(--shimmer);font-variant-numeric:tabular-nums}
.coin-pill .icon{width:18px;height:18px}
.charm,.jewel,.quiet-link{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:45px;border:1px solid var(--edge);border-radius:24px 9px 24px 9px;
 color:var(--ink);background:linear-gradient(145deg,var(--panel-lit),var(--panel));box-shadow:inset 0 0 0 3px #ffefdc0c,0 3px 11px #09050e43;
 text-align:center;text-decoration:none;font-weight:650;line-height:1.15;padding:10px 16px;transition:background .25s,border-color .25s,transform .25s,box-shadow .25s
}
.charm:not(:disabled):hover,.jewel:hover,.quiet-link:hover{border-color:var(--shimmer);box-shadow:inset 0 0 0 3px #ffefdc17,0 3px 13px #09050e70}
.charm:not(:disabled):active,.jewel:active,.quiet-link:active{transform:translateY(2px)}
.charm.main-action{color:#291e2b;border-color:#fff2d6;background:linear-gradient(155deg,var(--shimmer),var(--accent));box-shadow:inset 0 0 0 3px #49324618,0 4px 20px #100a1965}
.charm[aria-pressed=true]{background:var(--accent);color:var(--base);border-color:var(--shimmer)}
.charm .icon,.quiet-link .icon{width:19px;height:19px}
.jewel{padding:8px;width:44px;min-width:44px;border-radius:17px 6px 17px 6px;background:#130f1d53;color:var(--accent)}
.jewel[aria-pressed=false]{color:var(--soft);opacity:.63}
.quiet-link{padding:8px 11px;background:transparent;border-color:transparent;box-shadow:none;color:var(--accent)}
.eyebrow{font-size:.69rem;font-weight:720;text-transform:uppercase;letter-spacing:.15em;color:var(--accent)}
.fine{font-size:.84rem;color:var(--soft)}
.game-logo{width:min(355px,86%);height:auto;display:block;filter:drop-shadow(0 5px 9px #120d1c9b)}
.lunar-panel{position:relative;isolation:isolate;border:1px solid var(--edge);border-color:color-mix(in srgb,var(--edge),transparent 23%);border-radius:18px;background:linear-gradient(145deg,var(--panel-lit),var(--panel) 73%);box-shadow:0 14px 32px #100b1650}
.lunar-panel::before{
 content:'';position:absolute;top:4px;right:4px;bottom:4px;left:4px;z-index:3;pointer-events:none;border:1px solid #ffe7c323;border-radius:14px;
 background:var(--frame-top-left) left top/var(--corner-size) var(--corner-size) no-repeat,var(--frame-top-right) right top/var(--corner-size) var(--corner-size) no-repeat,
 var(--frame-bottom-right) right bottom/var(--corner-size) var(--corner-size) no-repeat,var(--frame-bottom-left) left bottom/var(--corner-size) var(--corner-size) no-repeat;opacity:.78
}
.game-intro{min-height:510px;display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,1fr);align-items:stretch;overflow:hidden}
.game-intro .introduction{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:clamp(23px,4.8vw,62px);position:relative;z-index:1}
.game-intro .introduction>.eyebrow{margin-bottom:-6px}
.introduction .game-logo{margin:0 0 1px -6px;width:min(390px,100%)}
.introduction>p:not(.fine){font-size:1rem;max-width:43ch;color:var(--soft);margin-bottom:6px}
.intro-art{position:relative;overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;min-width:0;min-height:240px}
.intro-art::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,var(--panel),transparent 23%,transparent 88%,#130e1a37);pointer-events:none}
.intro-art .intro-caption{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;text-align:right;font:1.14rem var(--italic);color:#fff0d9;text-shadow:0 2px 5px #151024}
.game-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.game-heading .game-logo{width:196px}
.game-heading .heading-commands{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.game-heading .heading-commands button{font-size:.78rem;min-height:44px;padding:7px 11px}
.note{font-size:.85rem;color:var(--soft)}
.toast-lunar{position:fixed;z-index:15;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,12px);width:max-content;max-width:calc(100% - 24px);padding:10px 15px;border:1px solid var(--edge);border-radius:15px;background:var(--base);color:var(--ink);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 6px 30px #08070a90;font-size:.87rem}
.toast-lunar.show{opacity:1;transform:translate(-50%,0)}
.game-footer{padding-block:17px max(19px,env(safe-area-inset-bottom));display:flex;gap:9px;justify-content:center;flex-wrap:wrap;color:var(--soft);font-size:.79rem}
.game-footer a{text-underline-offset:4px}
.lunar-dialog{color:var(--ink);width:min(525px,calc(100% - 24px));max-height:88vh;max-height:88dvh;padding:28px;overflow:auto}
.lunar-dialog::backdrop{background:#0e0915be;backdrop-filter:blur(3px)}
.lunar-dialog[open]{animation:dialog-appear .3s ease both}
.lunar-dialog h2{padding-right:24px}
.lunar-dialog .dialog-close{float:right;margin:-8px -8px 0 8px}
.lunar-dialog .dialog-copy{color:var(--soft);margin:13px 0;line-height:1.53}
.dialog-extra{display:grid;gap:10px;color:var(--soft)}
.dialog-extra img.mascot{display:block;max-height:105px;width:auto;margin:0 auto}
.dialog-extra ul{padding-left:21px;margin:4px 0 10px}
.dialog-extra li+li{margin-top:8px}
.dialog-extra .payout{display:inline-flex;gap:7px;align-items:center;color:var(--shimmer);font-family:var(--heading);font-size:1.45rem}
.dialog-extra label{display:grid;gap:5px}
.dialog-extra input,.dialog-extra select{width:100%;border:1px solid var(--edge);border-radius:12px;padding:10px;background:var(--base);color:var(--ink)}
.lunar-dialog .action-row{margin-top:17px}
.lunar-dialog.is-victory{animation:lunar-reveal 1.55s both}
.coin-travel{position:fixed;z-index:30;pointer-events:none;color:var(--shimmer);filter:drop-shadow(0 0 6px var(--accent))}
@keyframes dialog-appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes lunar-reveal{0%{transform:translateY(12px) scale(.98);box-shadow:0 0 20px #fff4d400}32%{transform:none;box-shadow:0 0 49px #fff4d46b}100%{transform:none;box-shadow:0 14px 32px #100b1650}}
@media(max-width:700px){
 .game-intro{display:flex;flex-direction:column-reverse;min-height:0}
 .game-intro .introduction{gap:9px;padding:20px 20px 25px}
 .introduction .game-logo{width:min(260px,90%);margin:-2px 0 0}
 .intro-art{min-height:0;height:clamp(160px,38vw,245px)}
 .intro-art::after{background:linear-gradient(0deg,var(--panel),transparent 38%)}
 .intro-art .intro-caption{display:none}
 .game-heading{gap:7px;margin-bottom:9px}
 .game-heading .game-logo{width:145px;flex:0 1 145px;min-width:94px}
 .game-heading .heading-commands button{font-size:.75rem;padding:7px 8px}
}
@media(max-width:390px){.world-bar{gap:8px}.portal-mark{width:70px}.coin-pill{padding-inline:8px}.shell{padding-inline:10px;padding-inline:max(10px,env(safe-area-inset-left,0px)) max(10px,env(safe-area-inset-right,0px))}.game-heading .heading-commands .icon{display:none}.charm{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@media(max-width:475px){
 .game-heading .heading-commands #menu{width:44px;padding:6px;gap:0;font-size:0}
 .game-heading .heading-commands #menu .icon{display:block;width:18px;height:18px}
}