:root{color-scheme:dark;font-family:"Noto Sans SC",system-ui,sans-serif;background:#080304}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;touch-action:pan-y}
body{min-height:100svh;background:#080304 url("/house-rules/background-still.jpg?v=3e2198bcae3f5805") center/cover fixed no-repeat}
.ambient-video{position:fixed;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.page{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}
.poster{position:relative;container-type:inline-size;width:min(100%,768px,calc((100svh - 18px)*768/1560));aspect-ratio:768/1560;overflow:hidden;isolation:isolate}
.artwork{display:block;width:100%;height:100%;object-fit:fill;animation:unroll-art 2.6s cubic-bezier(.35,.05,.22,1) both}
.rolling-end{position:absolute;z-index:2;top:35%;left:0;width:100%;height:4.1%;background:url("/house-rules/scroll-clean.webp?v=3e2198bcae3f5805") center 89%/100% auto no-repeat;filter:drop-shadow(0 10px 9px #000b);pointer-events:none;animation:unroll-end 2.6s cubic-bezier(.35,.05,.22,1) both}
.bear-logo-layer{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;animation:unroll-art 2.6s cubic-bezier(.35,.05,.22,1) both}
.bear-logo-frame{position:absolute;top:1.7%;left:16.6667%;width:66.6667%;aspect-ratio:1}
.bear-logo-fallback,.bear-logo-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.bear-logo-fallback[hidden],.bear-logo-canvas[hidden]{display:none}
.bear-logo-atlas{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.paper-copy{position:absolute;z-index:3;top:35.5%;left:18%;width:64%;height:49%;display:flex;flex-direction:column;color:#251817;text-align:center;animation:ink-appear .45s .7s both}
.eyebrow{margin:0;color:#942b2c;font-family:system-ui,sans-serif;font-size:clamp(8px,2.4cqw,11px);font-weight:800;letter-spacing:.18em}
h1{margin:4px 0 0;font-family:"Ma Shan Zheng","Noto Sans SC",sans-serif;font-size:clamp(31px,8.2cqw,44px);font-weight:400;line-height:1.2;letter-spacing:.04em;text-shadow:0 1px #fff8}
.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}
.art-heading{width:min(100%,280px);margin:4px auto 0}
.title-art{position:relative;display:block;width:100%;aspect-ratio:1344/400;overflow:hidden}
.title-art img{position:absolute;top:-44%;left:0;display:block;width:100%;height:auto;max-width:none}
.divider{flex:none;width:36%;height:1px;margin:clamp(9px,2.4cqw,15px) auto;background:linear-gradient(90deg,transparent,#a86845,transparent)}
.rules-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a8684580 transparent;padding:0 clamp(2px,1cqw,8px) 12px 0;text-align:left;-webkit-overflow-scrolling:touch}
.rules-scroll:focus-visible{outline:2px solid #a86845;outline-offset:2px;border-radius:2px}
.rules{display:grid;gap:clamp(7px,1.7cqw,12px);margin:0 0 0 clamp(10px,4cqw,24px);padding:0;list-style:none;text-align:left}
.rules li+li{padding-top:clamp(7px,1.7cqw,12px);border-top:1px solid #99634254}
.number{display:block;margin-bottom:4px;color:#a7272b;font-family:"Noto Sans SC",system-ui,sans-serif;font-size:clamp(12px,3cqw,15px);font-weight:800;line-height:1.2;letter-spacing:.12em}
.rules p{margin:0;font-size:clamp(14px,4.4cqw,20px);font-weight:700;line-height:1.5;letter-spacing:.025em;overflow-wrap:anywhere;text-wrap:pretty}
.scroll-hint{flex:none;display:flex;align-items:center;justify-content:center;gap:7px;min-height:19px;margin:2px 0 0;color:#805844;font-size:clamp(10px,2.5cqw,12px);font-weight:700;line-height:1.2;letter-spacing:.05em;transition:opacity .2s ease}
.scroll-hint[hidden]{display:none}
.scroll-chevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.close{position:absolute;z-index:4;top:90.5%;left:50%;display:grid;place-items:center;width:44px;height:44px;transform:translateX(-50%);border:1px solid rgba(232,189,125,.48);border-radius:50%;background:rgba(29,10,13,.75);color:#f5ddc5;font:300 27px/1 Arial,sans-serif;text-decoration:none;transition:border-color .2s ease,background-color .2s ease,transform .2s ease;animation:close-appear .35s 2.65s backwards}
.close:hover{border-color:#f5d0a2;background:#56252a;transform:translateX(-50%) rotate(90deg)}
.close:focus-visible{outline:2px solid #ffe1ae;outline-offset:4px}
.music{position:absolute;z-index:4;top:90.5%;right:2.5%;display:flex;align-items:center;justify-content:center;gap:4px;width:76px;height:48px;border:1px solid #c39b5b;border-radius:24px;background:#130708e8;color:#fff1d4;box-shadow:0 3px 16px #0009;font:700 13px "Noto Sans SC",system-ui,sans-serif;cursor:pointer;animation:ink-appear .35s 2.65s both}
.music:hover,.music:focus-visible{background:#5a1820;outline:2px solid #f4be73;outline-offset:2px}
.music[aria-pressed="true"]{border-color:#ffd595;box-shadow:0 0 12px #e6994b66}
.music:disabled{opacity:.6;cursor:not-allowed}
.music-icon{font-size:22px;line-height:1}
@keyframes unroll-art{0%{clip-path:inset(0 0 63% 0)}88%{clip-path:inset(0 0 11% 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes unroll-end{0%{top:35%;opacity:1}88%{top:87%;opacity:1}100%{top:87%;opacity:0}}
@keyframes ink-appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes close-appear{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.ambient-video,.rolling-end{display:none}.artwork,.bear-logo-layer,.paper-copy,.close,.music{animation:none}.close{transform:translateX(-50%)}}