:root{color-scheme:dark;font-family:"Yu Gothic UI","Meiryo",sans-serif;background:#3e2a40;color:#fff0e5}
*{box-sizing:border-box}
button{transition:background-color .16s,box-shadow .16s,filter .16s,transform .16s}
button:focus:not(:focus-visible){outline:none}
button:focus-visible{outline:3px solid #f2b653;outline-offset:3px;box-shadow:0 0 0 6px #71344f}
body{margin:0;min-height:100dvh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 22%,#97637d 0,#583b54 56%,#36263b 100%)}
main{width:min(100vw,calc(100dvh * 4 / 3),1440px);margin:auto}
.machine{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:22px;box-shadow:0 22px 80px #26122366;isolation:isolate}
canvas{display:block;width:100%;height:100%}
.controls{position:absolute;inset:0}
.controls button{position:absolute;border:0;background:transparent;border-radius:16px;cursor:pointer;color:transparent;padding:0;touch-action:none}
.controls button::after{content:"";position:absolute;inset:5px;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse,#fff3be5c 0,#ffc15b24 48%,#ffc15b00 76%);box-shadow:0 0 16px 2px #ffbd5400;opacity:0;transform:scale(.96);transition:opacity .16s,box-shadow .16s,transform .16s}
.controls button:focus-visible{outline:3px solid #f2b653;outline-offset:-4px;box-shadow:inset 0 0 0 7px #71344f}
.controls button:active:enabled::after{opacity:1;transform:scale(.97);box-shadow:0 0 20px 3px #ffc56377}
.controls button:disabled{cursor:default}
.controls button[hidden]{display:none}
#spin{border-radius:50%;min-width:44px;min-height:44px}
.fullscreen-button{position:absolute;left:4px;bottom:4px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:4px;border:0;border-radius:50%;background:transparent;color:#ffe3a8;font-size:28px;cursor:pointer;touch-action:manipulation}
.fullscreen-button img{display:block;grid-area:1/1;z-index:1;width:36px;height:36px;object-fit:contain;pointer-events:none;transition:filter .16s,transform .16s}
.fullscreen-fallback{grid-area:1/1;pointer-events:none}
.fullscreen-button:focus-visible{outline-offset:0;box-shadow:0 0 10px #ffcf7855}
.fullscreen-button:active img{transform:scale(.96)}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:#fff1e3;color:#91536d;font-size:clamp(20px,3vw,36px)}
#loading[hidden]{display:none}
#fault{position:absolute;left:10%;right:10%;top:36%;z-index:2;background:#fff4e7;color:#9e355e;padding:24px;border:3px solid #c9819e;border-radius:20px;box-shadow:0 12px 40px #48213755;text-align:center}
#fault p{margin:0;line-height:1.7}
#retry-save{margin-top:16px;border:2px solid #b76c8e;border-radius:12px;background:#f9dce7;color:#763e5d;padding:12px 22px;font:600 17px "Yu Gothic UI",sans-serif;cursor:pointer}
.art-dialog{color-scheme:light;border:3px solid #dfb184;border-radius:30px;background:#fff2e3;color:#794761;box-shadow:0 24px 80px #26142b99;width:min(620px,94vw);max-width:94vw;max-height:90dvh;padding:20px 28px;overflow:auto}
.art-dialog[open]{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.art-dialog::backdrop{background:#40283dcb}
.dialog-brand{display:block;width:80%;height:74px;object-fit:contain;margin:0 auto}
.art-dialog h1{display:flex;justify-content:center;margin:0;min-height:0;flex-shrink:0}
.art-dialog h1 img{display:block;width:240px;max-width:80%;height:86px;object-fit:contain}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center}
.menu-grid form{margin:0;min-width:0}
.menu-grid,.dialog-brand{flex-shrink:0}
.art-button{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:68px;padding:4px;border:2px solid transparent;border-radius:20px;background:transparent;cursor:pointer;touch-action:manipulation}
.art-button img{display:block;width:100%;height:108px;object-fit:contain;pointer-events:none;user-select:none;transition:filter .16s,transform .16s}
.art-button:focus-visible{outline:3px solid #bd7a26;outline-offset:2px;background:#f2d4df}
.art-button:active img{transform:translateY(2px)}
.art-button[aria-pressed="true"]{border-color:#d49bb4;background:#fae2e7}
#toggle-sound{position:relative}
.se-caption{position:absolute;left:50%;bottom:1px;transform:translateX(-50%);max-width:calc(100% - 8px);padding:0 7px;border-radius:8px;background:#fff4e9;color:#794761;white-space:nowrap;font:600 11px/14px "Yu Gothic UI","Meiryo",sans-serif;pointer-events:none}
.site-settings{display:grid;gap:12px;flex-shrink:0;min-width:0;border-top:1px solid #ead1d6;padding-top:14px}
#menu{width:min(900px,94vw);padding:16px 20px;overflow:hidden;overscroll-behavior:contain}
#menu[open]{gap:10px}
.options-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;min-width:0}
.options-heading .dialog-brand{width:min(58%,340px);height:46px;margin:0;flex:0 1 auto;min-width:0}
.options-heading h1{min-width:0;flex:none}
.options-heading h1 img{width:170px;max-width:100%;height:46px}
.options-layout{display:grid;grid-template-columns:minmax(200px,.72fr) minmax(0,1.28fr);align-items:start;gap:18px;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding-block:8px;padding:4px;margin:-4px}
.options-layout:focus-visible{outline:2px solid #a9547a;outline-offset:-2px;border-radius:12px}
#menu .menu-grid{gap:8px;align-self:start}
#menu .menu-grid .art-button{min-height:84px;padding:4px;border-radius:16px}
#menu .menu-grid .art-button img{height:72px}
#menu #toggle-sound{flex-direction:column}
#menu #toggle-sound img{height:56px}
#menu .se-caption{position:static;transform:none;max-width:100%;font-size:12px;line-height:16px}
#menu .site-settings{gap:10px;border-top:0;border-left:1px solid #ead1d6;padding:0 0 0 18px}
.text-button{min-width:0;min-height:44px;padding:9px 14px;border:2px solid #d7a4b8;border-radius:14px;background:#fae6ea;color:#794761;font:600 14px/1.4 "Yu Gothic UI","Meiryo",sans-serif;cursor:pointer;touch-action:manipulation;scroll-margin-block:12px}
.text-button:focus-visible,.site-settings input:focus-visible,.site-settings select:focus-visible{outline:3px solid #bd7a26;outline-offset:2px;box-shadow:0 0 0 6px #f7dba955}
.text-button:disabled{cursor:default;opacity:.65}
.music-toggle{display:flex;align-items:center;gap:9px;width:100%}
.music-name{flex:1;text-align:left}
.music-state{flex:none;min-width:3.5em;padding:2px 8px;border:1px solid #d7a4b8;border-radius:999px;text-align:center;background:#fff4e9}
.music-toggle[aria-pressed="true"]{border-color:#a9547a;background:#f6d9e3}
.music-toggle[aria-pressed="true"] .music-state{border-color:#a9547a;background:#a9547a;color:#fff8ee}
.music-retry{width:100%;margin-top:8px;background:#ffe4ad;border-color:#c6964c;color:#724e35}
.music-retry[hidden]{display:none}
.option-hint{margin:6px 2px 0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.volume-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.volume-control{min-width:0}
.volume-label{display:flex;align-items:start;justify-content:space-between;gap:6px;font-size:13px;font-weight:600;line-height:1.45}
.volume-label label{min-width:0;overflow-wrap:anywhere}
.volume-label output{flex:none;min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.volume-control input{display:block;width:100%;min-width:0;height:44px;margin:0;accent-color:#a9547a;cursor:pointer;scroll-margin-block:12px}
.motion-option{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,1fr);align-items:center;gap:0 10px;font-size:13px;font-weight:600}
.motion-option select{min-width:0;width:100%;min-height:44px;padding:7px 8px;border:2px solid #d7a4b8;border-radius:10px;background:#fff6ec;color:#794761;font:inherit;scroll-margin-block:12px}
.motion-option .option-hint{grid-column:1/-1;font-weight:400}
.option-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.option-links .text-button{overflow-wrap:anywhere}
.option-links a.text-button{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none}
#open-guide{grid-column:1/-1}
.preferences-hint{padding:8px 10px;border:1px solid #d7a4b8;border-radius:10px;background:#fff6ec}
.options-return{flex:none;margin:0;padding:10px 0 0;background:#fff2e3;border-top:1px solid #ead1d6}
.options-return .text-button{width:100%}
.text-dialog{padding:0;overflow:hidden}
.text-dialog[open]{gap:0}
.text-dialog-heading{flex:none;padding:18px 22px 12px;border-bottom:1px solid #ead1d6}
.text-dialog-heading h1{font-size:23px;line-height:1.4}
.help-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 22px 16px;scroll-padding-block:12px}
.help-content:focus-visible{outline:2px solid #a9547a;outline-offset:-3px}
.help-content h2{margin:16px 0 6px;font-size:16px;line-height:1.45}
.help-content p{margin:0;line-height:1.75;font-size:14px;overflow-wrap:anywhere}
.help-content p+p{margin-top:6px}
.dialog-actions{flex:none;padding:10px 22px 16px;border-top:1px solid #ead1d6;background:#fff2e3}
.dialog-actions .text-button{width:100%}
#site-help{width:min(1040px,96vw);max-width:96vw;max-height:94dvh}
#site-help [hidden]{display:none!important}
.help-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.help-heading h1{min-width:0;overflow-wrap:anywhere}
.help-heading .text-button{flex:none}
.manual-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 22px 16px}
.manual-intro{margin:0 0 10px;font-size:14px;line-height:1.65}
.manual-toolbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.manual-toolbar .text-button{flex:1 1 auto;padding-inline:10px}
.manual-zoom-state{margin:7px 0;font-size:12px;line-height:1.5;color:#85536e}
.manual-viewport{height:min(56dvh,640px);min-height:160px;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;border:1px solid #d5b2bd;border-radius:10px;background:#e8d4d7;cursor:grab;scrollbar-gutter:stable}
.manual-viewport.is-panning{cursor:grabbing}
.manual-viewport:focus-visible{outline:3px solid #bd7a26;outline-offset:2px}
.manual-image{display:block;width:100%;max-width:none;height:auto;user-select:none;-webkit-user-drag:none}
.manual-image-status{margin:8px 0 0;font-size:13px;line-height:1.65;overflow-wrap:anywhere}
#manual-retry{margin-top:8px}
.help-text-details{margin-top:16px;border-top:1px solid #ead1d6}
.help-text-details>summary{min-height:44px;padding:12px 2px;cursor:pointer;font-size:15px;font-weight:600;line-height:1.4}
.help-text-details>summary:focus-visible{outline:3px solid #bd7a26;outline-offset:2px}
.help-text-details .help-content{overflow:visible;padding:0 0 8px}
@media(max-width:600px){.manual-scroll{padding:10px 14px 14px}.help-heading{gap:8px}.help-heading h1{font-size:20px}.help-heading .text-button{padding-inline:10px}.manual-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.manual-toolbar .text-button{padding-inline:7px}.manual-viewport{height:48dvh;min-height:150px}}
@media(max-height:450px){.manual-scroll{padding-block:8px}.manual-viewport{height:45dvh;min-height:120px}.manual-intro{margin-bottom:7px}}
#payout{width:min(670px,94vw);overflow:hidden}
#payout h1 img{height:90px;width:300px}
#payout-list{display:grid;gap:8px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:8px}
#payout-list>div{display:grid;grid-template-columns:64px minmax(72px,1fr) minmax(110px,1.8fr);align-items:center;gap:12px;font-size:16px;border-bottom:1px solid #ead1d6;padding:6px 0}
#payout-list strong{color:#a84f6c;text-align:right;overflow-wrap:anywhere;line-height:1.45}
.payout-symbol{position:relative;width:64px;height:64px}
.payout-symbol img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.payout-symbol img.payout-face{inset:auto;left:8%;top:3.5%;width:84%;height:84%}
.payout-symbol .rainbow{animation:rainbow-frame 4s linear infinite}
.back-button{width:min(220px,65%);align-self:center;flex-shrink:0}
.back-button img{height:66px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes rainbow-frame{to{filter:hue-rotate(360deg)}}
@media(max-width:600px){.machine{border-radius:0}.art-dialog{padding:16px 14px;border-radius:22px;gap:8px}.dialog-brand{height:58px}.art-dialog h1 img{height:70px}.menu-grid{gap:6px}.art-button{padding:2px;min-height:54px}.art-button img{height:86px}#payout-list>div{grid-template-columns:54px minmax(62px,.9fr) minmax(100px,1.7fr);font-size:14px;gap:8px}.payout-symbol{width:54px;height:54px}.back-button img{height:58px}}
@media(max-height:600px) and (min-width:601px){.art-dialog{padding:12px 24px;gap:4px}.dialog-brand{height:45px}.art-dialog h1 img{height:60px}.art-button img{height:78px}.menu-grid{gap:4px}.back-button img{height:48px}#payout h1 img{height:64px}}
@media(max-height:450px){.art-dialog{padding:8px 12px;gap:4px;border-radius:18px}.dialog-brand{height:34px}.art-dialog h1 img{height:44px}.menu-grid{gap:4px}.art-button{min-height:44px;padding:2px}.art-button img{height:50px}.back-button img{height:42px}#payout h1 img{height:44px}}
@media(max-width:600px){.site-settings{gap:12px;padding-top:10px}.volume-grid{gap:12px}.text-dialog{padding:0}.text-dialog-heading{padding:14px 16px 10px}.help-content{padding:2px 16px 14px}.dialog-actions{padding:10px 16px 14px}}
@media(max-height:450px){.site-settings{gap:10px;padding-top:8px}.options-return{padding-top:8px}.text-dialog{padding:0}.text-dialog-heading{padding-top:10px}.text-dialog-heading h1{font-size:20px}.dialog-actions{padding-top:8px;padding-bottom:10px}}
@media(max-width:719px){#menu{padding:12px 14px}.options-heading{gap:8px}.options-heading .dialog-brand{width:58%;height:38px}.options-heading h1 img{width:120px;height:38px}.options-layout{grid-template-columns:minmax(0,1fr);gap:12px}#menu .menu-grid{gap:6px}#menu .menu-grid .art-button{min-height:68px;padding:2px}#menu .menu-grid .art-button img{height:60px}#menu #toggle-sound img{height:44px}#menu .site-settings{border-left:0;border-top:1px solid #ead1d6;padding:12px 0 0}.option-links .text-button{padding-inline:8px;font-size:13px}.options-return{padding-top:8px}}
@media(max-height:450px){#menu{padding:8px 12px}#menu[open]{gap:6px}.options-heading .dialog-brand,.options-heading h1 img{height:30px}.options-heading h1 img{width:110px}.options-layout{gap:12px}#menu .menu-grid .art-button{min-height:56px;padding:2px}#menu .menu-grid .art-button img{height:48px}#menu #toggle-sound img{height:32px}#menu .site-settings{gap:8px}.options-return{padding-top:6px}}
@media(min-width:560px) and (max-width:719px) and (max-height:450px){#menu .menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
:fullscreen main{width:min(100vw,calc(100dvh * 4 / 3),1440px);margin:auto}
:fullscreen body{background:#36263b}
@media(hover:hover) and (pointer:fine){
 .controls button:hover:enabled::after{opacity:1;transform:scale(1.025);box-shadow:0 0 20px 3px #ffc56366}
 .fullscreen-button:hover:enabled img{filter:brightness(1.15) drop-shadow(0 0 6px #ffd281bb);transform:translateY(-1px)}
 .art-button:hover:enabled{background:#f6dfd7;box-shadow:0 4px 15px #d59a6240}
 .art-button:hover:enabled img{filter:brightness(1.08) drop-shadow(0 3px 5px #d5996655);transform:translateY(-2px)}
 .text-button:hover:enabled,#retry-save:hover:enabled{background:#f6dcb7;box-shadow:0 4px 14px #d49a5f38;transform:translateY(-1px)}
}
html[data-motion="reduced"] button,html[data-motion="reduced"] .art-button img,html[data-motion="reduced"] .fullscreen-button img,html[data-motion="reduced"] .controls button::after{transition:background-color .12s,box-shadow .12s,filter .12s,opacity .12s;transform:none!important}
html[data-motion="reduced"] .payout-symbol .rainbow{animation:none}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) button,html:not([data-motion="full"]) .art-button img,html:not([data-motion="full"]) .fullscreen-button img,html:not([data-motion="full"]) .controls button::after{transition:background-color .12s,box-shadow .12s,filter .12s,opacity .12s;transform:none!important}}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .payout-symbol .rainbow{animation:none}}
button{touch-action:manipulation}
#loading{align-content:center;gap:18px;padding:24px}#loading p{margin:0;font-size:clamp(18px,2.2vw,28px)}#loading-logo{width:min(70%,600px);height:100px;object-fit:contain;justify-self:center}#loading-logo[hidden]{display:none}#loading-progress{appearance:none;width:min(62%,360px);height:12px;border:0;border-radius:20px;overflow:hidden;background:#edcbd8}#loading-progress::-webkit-progress-bar{background:#edcbd8;border-radius:20px}#loading-progress::-webkit-progress-value{background:linear-gradient(90deg,#e7af5c,#dc7f9f);border-radius:20px;transition:width .12s}#loading-progress::-moz-progress-bar{background:#dc7f9f;border-radius:20px}
