*{box-sizing:border-box}.story-page{max-width:1320px;margin:auto;padding:16px}.page-heading{padding:4px 4px 16px;color:#234b4c}.page-heading h1{font-size:28px;margin:0}.page-heading p{font-size:14px;margin:6px 0 0}.story-page #host{position:relative;isolation:isolate;height:810px;min-height:660px;display:flex;flex-direction:column;color:#fff4d7;background:#21494b;border:2px solid #976e41;border-radius:14px;overflow:hidden;font-family:'Zen Maru Gothic',sans-serif}.story-page #host [hidden]{display:none!important}#host button{font:inherit;font-weight:700;font-size:14px;line-height:1.35;min-height:44px;padding:10px 14px;background:#f9edcd;color:#4f3c2d;border:2px solid #bb8d55;border-radius:8px;cursor:pointer;touch-action:manipulation}#host button:hover{background:#fff8e8}#host button:disabled{opacity:.5;cursor:default}#host button:focus-visible,#story:focus-visible,#reader:focus-visible{outline:3px solid #fff;outline-offset:3px}#host button.primary{background:#eab151;color:#493519;border-color:#d4922c;box-shadow:0 3px 0 #845d37}#host button.primary:hover{background:#f6c66b}.story-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;background:#173b3c;border-bottom:3px solid #9b7344;flex:none}.story-top strong{font-size:16px}.story-top nav{display:flex;gap:5px}.story-top button{font-size:12px!important;padding:6px 10px!important;background:#234b4c!important;color:#fff1d1!important;border-color:#a9844e!important}#base{flex:1;min-height:0;position:relative;background:#21494b url('./assets/stage.webp') center/cover}#cover{height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.cover-art{width:100%;height:100%;object-fit:cover;object-position:center 52%;min-height:0}.welcome{padding:18px 30px;display:grid;grid-template-columns:1fr auto;gap:8px 25px;align-items:center;background:#173b3ce8;border-top:3px solid #a47a44}.welcome h2{font-size:38px;margin:0;grid-column:1;grid-row:2}.welcome small:first-child{font-size:11px;grid-column:1}.welcome p{grid-row:3;grid-column:1;font-size:13px;line-height:1.7;margin:0}.welcome #start{grid-row:1/3;grid-column:2;font-size:19px;padding:16px 24px}#ready-note{grid-row:3;grid-column:2;font-size:10px;text-align:center}#play{height:100%;padding:24px 28px;display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:minmax(200px,1.1fr) minmax(0,1fr);gap:20px}#dice{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;min-height:0}.die{margin:0;min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:center;text-align:center;background:#fff7e4;border:6px solid #987143;border-radius:90px 90px 10px 10px;box-shadow:0 8px 0 #533e29;color:#4c3c2c;overflow:hidden}.die small{font-size:13px;display:block;padding:8px 10px 2px;color:#93683b}.die img{display:block;min-height:0;width:100%;height:100%;object-fit:contain}.die figcaption{font-size:17px;font-weight:700;line-height:1.5;min-height:50px;padding:5px 8px 9px;display:grid;place-items:center}.manuscript{min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff6df;border:5px solid #9b764b;color:#4b3d30;padding:14px;gap:8px;box-shadow:0 5px 0 #503f2c}.manuscript header{display:flex;justify-content:space-between;align-items:center;gap:10px}.manuscript label{font-weight:700;font-size:14px}.manuscript small{font-size:10px}#story{flex:1;min-height:0;resize:none;border:1px solid #d7c19c;border-radius:4px;width:100%;padding:10px 12px;color:#463c2e;font:500 17px/1.9 'Zen Maru Gothic',sans-serif;background:repeating-linear-gradient(transparent 0 31px,#d7c6a633 31px 32px),#fff9ec}#story:focus-visible{outline-color:#326963}.action-tickets{display:flex;flex-direction:column;min-height:0;gap:10px}.action-tickets #feedback{font-size:12px;line-height:1.6;min-height:32px;margin:0}.action-tickets button{font-size:14px}#roll{background:#ba5a49!important;color:#fff7df!important;border-color:#d68c63!important}.guide{width:100%;height:96px;object-fit:contain;min-height:0;flex:1}.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}#result{height:100%;padding:22px 28px;display:grid;grid-template-columns:165px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:16px}#result>header{grid-column:1/-1;text-align:center}#result h2{font-size:32px;margin:3px 0}#result header small{font-size:11px}.story-cast{display:flex;flex-direction:column;min-height:0;gap:12px}#read-dice{display:flex;flex-direction:column;gap:10px}#read-dice figure{margin:0;display:flex;flex-direction:column;align-items:center;padding:6px;background:#fff1d4;border:2px solid #ac844d;color:#4b3d30;gap:5px;border-radius:5px}#read-dice img{width:58px;height:58px;object-fit:contain}#read-dice figcaption{font-size:11px;font-weight:700;line-height:1.4;text-align:center}.story-cast>img{width:100%;height:100%;min-height:0;object-fit:contain;flex:1;border-radius:5px}#reader{min-height:0;min-width:0;overflow-y:auto;background:#fff6df;border:6px solid #c6a777;box-shadow:0 5px 0 #554130;color:#483b2e;padding:25px 30px;scrollbar-color:#ae8451 #f2e5c7}#read-story{white-space:pre-wrap;overflow-wrap:anywhere;font-size:19px;line-height:2;margin:0}#empty-story{font-size:15px;line-height:2;color:#846c52}#result footer{grid-column:1/-1;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}#save-note{flex-basis:100%;font-size:12px;text-align:center;margin:0;min-height:22px}#result footer button{min-width:145px}#modal{position:absolute;inset:0;display:grid;place-items:center;background:#102b2c9e;padding:16px;z-index:10}#modal>section{width:min(520px,100%);max-height:100%;overflow-y:auto;background:#fff5da;color:#4d3e2d;border:3px solid #ac7c45;border-radius:12px;padding:20px}#modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}#modal h2{font-size:21px;margin:0}#dialog-content{font-size:15px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin:10px 0}#dialog-content label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}#dialog-content input[type=checkbox]{width:24px;height:24px;accent-color:#386360}#volume{width:100%;accent-color:#386360}#storage-note{font-size:12px}.parent-note{font-size:14px;line-height:1.9;padding:22px 6px;color:#4f665e}.parent-note h2{font-size:20px}.story-page #host:fullscreen,.story-page #host.faux-fullscreen{width:100vw;height:100dvh;min-height:0;border:0;border-radius:0}.story-page #host.faux-fullscreen{position:fixed;inset:0;z-index:10000}.die.rolled{animation:curtain-pop .35s ease-out}@keyframes curtain-pop{0%{transform:translateY(-5px) rotate(-2deg)}50%{transform:translateY(2px) rotate(1deg)}100%{transform:none}}
@media(max-width:760px){.story-page{padding:8px}.page-heading h1{font-size:23px}.page-heading p{font-size:12px}.story-page #host{height:840px;min-height:650px}.story-top{padding:8px;flex-wrap:wrap;gap:5px}.story-top strong{font-size:13px}.story-top nav{width:100%;justify-content:center;gap:4px}.story-top button{font-size:11px!important;padding:5px 7px!important}.welcome{padding:18px;grid-template-columns:1fr;gap:10px;text-align:center}.welcome small:first-child,.welcome h2,.welcome p,.welcome #start,#ready-note{grid-row:auto;grid-column:1}.welcome h2{font-size:32px}.welcome p{font-size:12px}.welcome #start{font-size:17px;padding:12px}.welcome small:first-child{font-size:10px}#play{padding:16px 10px;grid-template-columns:1fr;grid-template-rows:220px minmax(0,1fr) auto;gap:14px}#dice{grid-column:1;grid-row:1;gap:8px}.die{border-width:4px;border-radius:50px 50px 6px 6px;box-shadow:0 5px 0 #533e29}.die small{font-size:10px;padding:9px 4px 3px}.die figcaption{font-size:12px;min-height:47px;padding:4px 3px 7px;line-height:1.4}.manuscript{padding:10px;border-width:4px;gap:6px}.manuscript label{font-size:12px}.manuscript small{font-size:9px}#story{font-size:16px;padding:8px;line-height:1.85}.action-tickets{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:7px}.action-tickets #feedback{grid-column:1/-1;min-height:20px;font-size:11px}.action-tickets button{font-size:11px;padding:9px 4px}.guide{display:none}#result{padding:16px 12px;grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px}#result h2{font-size:27px}#result header small{font-size:10px}.story-cast{grid-column:1;grid-row:2}.story-cast>img{display:none}#read-dice{flex-direction:row;gap:6px}#read-dice figure{flex:1;min-width:0;padding:5px;gap:5px}#read-dice img{height:46px;width:46px}#read-dice figcaption{font-size:10px}#reader{grid-column:1;grid-row:3;padding:16px;border-width:4px}#read-story{font-size:17px;line-height:1.9}#result footer{gap:7px}#result footer button{min-width:0;flex:1;font-size:12px;padding:9px 5px}#save-note{font-size:11px;min-height:22px}#modal{padding:10px}#modal>section{padding:15px}#modal h2{font-size:18px}#dialog-content{font-size:13px}}
@media(max-width:360px){.story-top strong{display:none}.story-top button{font-size:10px!important;padding:5px!important}#play{padding:12px 8px;grid-template-rows:190px minmax(0,1fr) auto;gap:12px}#dice{gap:5px}.die figcaption{font-size:11px;min-height:43px}.welcome h2{font-size:29px}#read-story{font-size:16px}#result footer button{font-size:11px}}
@media(max-height:520px) and (min-width:600px){.story-page #host{height:460px;min-height:400px}.story-top{padding:5px 10px;flex-wrap:nowrap}.story-top strong{font-size:12px;white-space:nowrap}.story-top nav{width:auto}.story-top button{font-size:10px!important}#cover{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr}.welcome{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px}.welcome h2{font-size:28px}.welcome small:first-child{font-size:9px}.welcome p{font-size:11px}.welcome #start{font-size:15px;padding:10px 14px}#ready-note{font-size:9px}#play{grid-template-columns:minmax(0,1fr) 180px;grid-template-rows:minmax(0,1fr) minmax(0,1fr);padding:9px 16px;gap:12px}#dice{grid-column:1;grid-row:1;gap:12px}.die{border-width:3px;border-radius:35px 35px 5px 5px;grid-template-rows:auto minmax(0,1fr) auto;box-shadow:0 3px 0 #533e29}.die small{font-size:9px;padding:3px}.die figcaption{font-size:11px;min-height:22px;padding:2px 3px 5px}.manuscript{grid-column:1;grid-row:2;padding:7px;gap:4px;border-width:3px}.manuscript label{font-size:11px}.manuscript small{font-size:9px}#story{font-size:14px;line-height:1.65;padding:6px}.action-tickets{grid-column:2;grid-row:1/-1;display:flex;gap:9px;justify-content:center}.action-tickets #feedback{font-size:11px;min-height:30px}.action-tickets button{font-size:12px}.guide{display:block;height:60px;max-height:85px;flex:1}#result{padding:10px 18px;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:9px}#result h2{font-size:24px}#result header small{display:none}.story-cast{grid-column:1;grid-row:2}#read-dice{flex-direction:column;gap:6px}#read-dice figure{flex-direction:row;padding:3px;gap:5px;min-height:0}#read-dice img{width:33px;height:33px}#read-dice figcaption{font-size:9px;text-align:left}#reader{grid-column:2;grid-row:2;padding:12px 18px}#read-story{font-size:16px;line-height:1.75}#result footer{grid-row:3;gap:8px}#result footer button{min-width:125px;flex:none;font-size:11px}#save-note{font-size:10px;min-height:18px}#modal>section{padding:12px}#modal header{margin-bottom:4px}#dialog-content{font-size:12px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){.die.rolled{animation:none}}