html,body{width:100%;height:100%;margin:0;overflow:hidden}body{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}header{width:100%;max-width:1250px;flex:none;padding:12px 22px;min-height:38px}main{width:calc(100% - 24px);max-width:1250px;flex:1;min-height:0;margin:0 auto 12px;padding:16px;border-width:7px;border-radius:24px;display:flex;flex-direction:column}body[data-screen="roller"] #free-roller{margin:0;flex:1;min-height:0;display:flex;flex-direction:column;border:0;background:transparent;padding:0}.roller-heading{flex:none;gap:12px}.roller-heading h2{font-size:25px;margin:0}.roller-heading p,.roller-heading small,footer{display:none}.roller-options{gap:14px}.roller-options select{min-width:145px;padding:6px}.roller-heading label{font-size:9px}.scribe-toggle{font-size:13px!important}.info-button{width:36px;height:36px;padding:0;border-radius:50%;font:bold 19px Georgia;flex:none}.free-felt{flex:1;min-height:0;margin:12px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;gap:8px;padding:12px;border-width:6px;border-radius:18px;overflow:visible}.free-dice{min-width:0;min-height:0;gap:3px;justify-content:center}.free-dice .die.polyhedral{width:clamp(55px,15vh,135px);height:clamp(55px,15vh,135px);max-width:100%;cursor:pointer;touch-action:manipulation}.free-dice>span{font-size:9px}.free-dice>small{font-size:11px;margin:0}.roller-bottom{flex:none;gap:14px;display:flex;align-items:center}.roller-bottom button{padding:11px 20px}.roller-bottom p{font-size:14px;margin:0}.roller-modal{width:min(550px,calc(100vw - 24px));max-height:calc(100dvh - 28px);border:1px solid #ad935b;border-radius:15px;background:#142e25;color:#eee5ce;padding:20px;overflow:auto;box-shadow:0 20px 80px #0009}.roller-modal::backdrop{background:#06140fc9}.modal-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.modal-top h2{font:23px Georgia;margin:0}.modal-top button{font-size:20px;padding:3px 11px}.all-faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px}.face-cell{text-align:center;min-width:0}.face-cell .die.polyhedral{width:84px;height:84px;margin:0 auto}.face-cell p{margin:2px 0;font-size:13px}.face-cell small{color:#b6c8b7}.help-copy{font-size:16px;line-height:1.5}.help-copy p{margin:0 0 12px}
@media(max-width:680px){header{padding:9px 15px;min-height:32px}header>span{display:none}main{width:calc(100% - 12px);margin-bottom:6px;padding:10px;border-width:5px;border-radius:18px}.roller-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.roller-heading h2{font-size:20px}.roller-options{order:3;width:100%;display:flex;justify-content:space-between;gap:8px}.roller-options select{min-width:135px;padding:6px;font-size:14px}.free-felt{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));padding:7px 4px;gap:4px;margin:9px 0;border-width:4px}.free-dice .die.polyhedral{width:clamp(50px,11.5dvh,92px);height:clamp(50px,11.5dvh,92px)}.free-dice>span{font-size:8px}.free-dice>small{font-size:10px;line-height:1.1}.roller-bottom{display:flex;gap:10px}.roller-bottom button{width:auto;flex:none;margin:0;padding:11px 12px;font-size:12px}.roller-bottom p{font-size:12px;line-height:1.2}.roller-modal{padding:16px}.face-cell .die.polyhedral{width:70px;height:70px}}
@media(max-height:500px) and (orientation:landscape){header{padding:4px 18px;min-height:24px}main{padding:7px}.roller-heading{flex-wrap:nowrap}.roller-options{order:0;width:auto}.roller-heading h2{font-size:18px}.roller-options select{padding:3px}.free-felt{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));margin:5px 0;padding:3px}.free-dice .die.polyhedral{width:clamp(38px,15dvh,75px);height:clamp(38px,15dvh,75px)}.free-dice>span{font-size:8px}.free-dice>small{font-size:9px}.roller-bottom button{padding:7px 14px}.roller-bottom p{font-size:12px}.info-button{width:28px;height:28px}}