.play-root { --play-ink: #2a2118; --play-paper: color-mix(in oklab, var(--surface) 86%, #f4ead2 14%); --play-brass: #9c6b2f; --play-green: #486b57; --play-red: #8a3f3f; --play-blue: #3e5f8a; max-width: 1100px; margin: 2rem auto 4rem; padding: 0 1rem; } .play-root * { box-sizing: border-box; } .play-root.is-odd { filter: saturate(1.08) contrast(1.02); } .play-hero, .play-console, .play-tool { border: 1px solid var(--border); border-radius: 8px; background: var(--play-paper); box-shadow: 0 18px 45px rgba(35, 26, 16, 0.08); } .play-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); align-items: center; gap: 2rem; padding: clamp(1.25rem, 4vw, 3rem); overflow: hidden; } .play-kicker { margin: 0 0 0.45rem; color: var(--play-brass); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .play-hero h1, .play-page-head h1 { margin: 0; color: var(--heading); } .play-lede, .play-page-head p { max-width: 62ch; margin-top: 0.75rem; color: var(--muted); } .play-orbit { position: relative; aspect-ratio: 1; min-height: 300px; border: 1px dashed color-mix(in oklab, var(--border) 70%, var(--play-brass)); border-radius: 50%; background: linear-gradient(90deg, transparent 49.8%, color-mix(in oklab, var(--border) 70%, transparent) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, color-mix(in oklab, var(--border) 70%, transparent) 50%, transparent 50.2%); } .play-orbit::after { content: "PLAY"; position: absolute; inset: 35%; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); color: var(--muted); font-weight: 800; letter-spacing: 0.16em; } .play-orbit__node { position: absolute; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--fg); cursor: pointer; transform: translate(-50%, -50%); } .play-orbit__node.is-active, .play-orbit__node:hover { background: var(--play-brass); color: #fff8e8; } .play-console { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; margin: 1rem 0; padding: 1rem; } .play-console__screen { min-height: 190px; padding: 1.25rem; border-radius: 6px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.025) 1px, transparent 1px, transparent 7px), color-mix(in oklab, var(--surface) 92%, var(--play-green) 8%); } .play-console__screen h2 { margin: 0.2rem 0 0.5rem; } .play-whisper, .play-live-note { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.92rem; font-style: italic; } .play-console__eyebrow { margin: 0; color: var(--play-green); font-weight: 800; text-transform: uppercase; } .play-console__controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-content: start; } .play-root button, .play-primary, .sigil-form button { min-height: 42px; border: 1px solid color-mix(in oklab, var(--border) 70%, var(--play-brass)); border-radius: 6px; padding: 0.55rem 0.85rem; background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; } .play-root button:hover, .play-primary:hover, .sigil-form button:hover { background: var(--play-ink); color: #fff8e8; text-decoration: none; } .play-primary { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.5rem; background: var(--play-brass); color: #fff8e8; font-weight: 800; } .play-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.8rem; } .play-grid a { min-height: 135px; padding: 1rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in oklab, var(--surface) 88%, var(--play-paper) 12%); color: var(--fg); transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; } .play-grid a:hover, .play-grid a.is-active { transform: translateY(-3px); border-color: var(--play-brass); background: color-mix(in oklab, var(--surface) 76%, var(--play-brass) 24%); text-decoration: none; } .play-grid span { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 800; } .play-grid strong { display: block; margin-top: 2rem; color: var(--heading); font-size: 1.05rem; } .play-back { display: inline-flex; margin-bottom: 1rem; color: var(--muted); } .play-page-head { margin-bottom: 1rem; } .play-tool { padding: 1rem; } .play-scorebar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; color: var(--muted); } .memory-board { display: grid; grid-template-columns: repeat(4, minmax(72px, 1fr)); gap: 0.7rem; } .memory-card { aspect-ratio: 1.08; border: 1px solid var(--border); border-radius: 8px; background: radial-gradient(circle at 50% 38%, rgba(246, 216, 137, 0.15), transparent 28%), linear-gradient(135deg, #211812, var(--play-ink)); color: #e7c978; font-size: clamp(1.3rem, 4vw, 2.2rem); font-weight: 900; transform: rotate(var(--tilt, 0deg)); transition: transform 180ms ease, background 180ms ease, color 180ms ease; } .memory-card.is-open, .memory-card.is-matched, .memory-card.is-peeking { background: color-mix(in oklab, var(--surface) 72%, var(--play-green) 28%); color: var(--fg); transform: rotate(0deg) translateY(-2px); } .memory-card.is-matched { outline: 2px solid color-mix(in oklab, var(--play-brass) 70%, transparent); } .play-canvas, .sigil-canvas { display: block; width: 100%; max-height: 70vh; border: 1px solid var(--border); border-radius: 8px; background: #18130f; } .poem-tool { display: grid; gap: 1rem; } .poem-slip { min-height: 220px; padding: 1.2rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; line-height: 1.7; } .poem-slip[data-stamp]:not([data-stamp=""])::after { content: attr(data-stamp); display: inline-block; margin-top: 1rem; padding: 0.2rem 0.5rem; border: 2px solid var(--play-red); color: var(--play-red); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; transform: rotate(-4deg); } .bookshelf { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; } .book-spine { touch-action: none; border: 1px solid var(--border); border-radius: 7px; padding: 0.8rem; background: var(--surface); cursor: grab; user-select: none; } .book-spine { width: 120px; min-height: 230px; writing-mode: vertical-rl; text-orientation: mixed; color: #fff8e8; font-weight: 800; } .book-spine:nth-child(3n+1) { background: var(--play-red); } .book-spine:nth-child(3n+2) { background: var(--play-green); } .book-spine:nth-child(3n+3) { background: var(--play-blue); } .booklet { flex: 1 1 220px; min-height: 110px; padding: 0.9rem; border: 1px dashed var(--play-brass); border-radius: 7px; background: color-mix(in oklab, var(--surface) 74%, var(--play-brass) 26%); font-family: Georgia, "Times New Roman", serif; font-weight: 700; } .terminal-tool { background: #15120e; color: #f2e3bd; } .terminal-log { min-height: 310px; max-height: 460px; overflow: auto; padding: 1rem; border: 1px solid rgba(242, 227, 189, 0.2); border-radius: 7px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; } .terminal-form { display: flex; gap: 0.6rem; margin-top: 0.8rem; } .terminal-form label { display: flex; flex: 1; align-items: center; gap: 0.5rem; } .terminal-form input, .sigil-form input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 0.65rem; background: var(--surface); color: var(--fg); font: inherit; } .study-tool { display: grid; justify-items: center; gap: 1rem; } .study-scene { position: relative; width: min(100%, 520px); aspect-ratio: 1.6; border: 1px solid var(--border); border-radius: 8px; background: radial-gradient(circle at 50% 22%, rgba(244, 210, 113, var(--lamp, 0.18)), transparent 30%), linear-gradient(#27211b 0 62%, #4b3425 62% 100%); overflow: hidden; } .study-scene span { position: absolute; left: 42%; bottom: 30%; width: 16%; height: 38%; border-radius: 50% 50% 6px 6px; background: #b88639; box-shadow: 0 0 calc(20px + var(--glow, 0px)) rgba(244, 210, 113, 0.7); } .study-time { font-size: clamp(2.4rem, 8vw, 5rem); font-weight: 900; font-variant-numeric: tabular-nums; } .sigil-tool { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 520px); gap: 1rem; align-items: start; } .sigil-form { display: grid; gap: 0.85rem; } .sigil-form label { display: grid; gap: 0.35rem; color: var(--muted); } .sigil-canvas { background: var(--surface); } .archive-world { --world-ink: #17251e; --world-panel: #efe2c2; --world-paper: #fff9e9; --world-line: #8b6841; --world-brass: #d49a3a; --world-moss: #527657; --world-berry: #9d5268; max-width: 1540px; } .archive-world__heading { max-width: 900px; } .archive-world__shell { position: relative; overflow: hidden; border: 2px solid var(--world-line); border-radius: 12px; background: var(--world-ink); box-shadow: 0 22px 70px rgba(23, 37, 30, 0.28); } .archive-world.is-restored .archive-world__shell { box-shadow: 0 22px 80px rgba(215, 184, 94, 0.32), 0 0 0 3px rgba(239, 213, 137, 0.22); } .archive-world__shell:fullscreen { width: 100vw; height: 100vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto; border: 0; border-radius: 0; background: #101b18; } .archive-world__hud { display: grid; grid-template-columns: 1.1fr 1.4fr 0.8fr 1.15fr auto; gap: 0.65rem; align-items: stretch; padding: 0.65rem; border-bottom: 2px solid #6e5738; background: linear-gradient(rgba(255, 255, 255, 0.04), transparent), #2d3f33; color: #fff6dc; } .archive-world__hud > div:not(.rpg-hud__actions) { display: grid; align-content: center; min-width: 0; padding: 0.45rem 0.6rem; border: 1px solid rgba(229, 200, 135, 0.25); border-radius: 6px; background: rgba(9, 20, 15, 0.28); } .archive-world__hud span, .rpg-objective span { color: #d8c9a6; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .archive-world__hud strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .archive-world__hud small { color: #b8d4bb; } .rpg-hud__health span { display: flex; justify-content: space-between; gap: 0.5rem; } .rpg-meter { height: 9px; overflow: hidden; border: 1px solid #d6b777; border-radius: 999px; background: #211c18; } .rpg-meter i { display: block; height: 100%; background: linear-gradient(90deg, #8dbb73, #d8db78); transition: width 180ms ease; } .rpg-hud__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-content: center; justify-content: flex-end; } .archive-world__hud button, .archive-world__controls button, .archive-world__dialog button, .archive-world__panel button { border: 1px solid #d6b777; border-radius: 6px; background: #fff3d2; color: #2b2116; font: inherit; font-weight: 800; cursor: pointer; } .archive-world__hud button { padding: 0.48rem 0.62rem; font-size: 0.76rem; } .archive-world__hud button:hover, .archive-world__hud button:focus-visible, .archive-world__controls button:hover, .archive-world__controls button:focus-visible, .archive-world__dialog button:hover, .archive-world__dialog button:focus-visible, .archive-world__panel button:hover, .archive-world__panel button:focus-visible, .archive-world__panel a:focus-visible, .archive-world__panel select:focus-visible, .archive-world__panel input:focus-visible { border-color: #fff0b5; background: #fffaf0; box-shadow: 0 0 0 3px rgba(255, 236, 173, 0.24); outline: none; } .rpg-objective { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.55rem 0.8rem; border-bottom: 1px solid rgba(245, 228, 183, 0.16); background: #24342b; color: #fff4cf; } .rpg-objective strong { font-size: 0.88rem; } .archive-world__badge { margin: 0; padding: 0.4rem 0.65rem; border: 1px solid #f2d483; border-radius: 999px; background: #604b1f; color: #fff1b6; font-size: 0.78rem; font-weight: 900; } .archive-world__stage { position: relative; min-height: 0; background: #101b18; } .archive-world__game { position: relative; width: 100%; aspect-ratio: 3 / 2; max-height: min(72vh, 760px); overflow: hidden; outline: none; background: #17251e; image-rendering: pixelated; } .archive-world__shell:fullscreen .archive-world__stage, .archive-world__shell:fullscreen .archive-world__game { height: 100%; max-height: none; aspect-ratio: auto; } .archive-world__game:focus-visible { box-shadow: inset 0 0 0 4px #fff0a9; } .archive-world__game canvas { display: block; width: 100% !important; height: 100% !important; image-rendering: pixelated; } .archive-world__loading { position: absolute; inset: 45% 0 auto; margin: 0; color: #f5e4b7; text-align: center; font-weight: 800; } .archive-world[data-game-ready="true"] .archive-world__loading { display: none; } .rpg-boss { position: absolute; z-index: 25; top: 0.65rem; left: 50%; width: min(520px, 82%); padding: 0.45rem 0.65rem; border: 1px solid #f0bfd0; border-radius: 7px; background: rgba(21, 12, 20, 0.9); color: #ffe9f0; text-align: center; transform: translateX(-50%); } .rpg-meter--boss { height: 11px; margin-top: 0.25rem; border-color: #df8ca8; } .rpg-meter--boss i { background: linear-gradient(90deg, #80324e, #d97691); } .archive-world__controls { display: flex; gap: 1rem; align-items: center; justify-content: center; padding: 0.8rem; border-top: 2px solid #6e5738; background: #2d3f33; touch-action: none; } .archive-world__dpad { display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 42px); gap: 0.3rem; } .archive-world__action-pad { display: grid; grid-template-columns: repeat(2, minmax(84px, 1fr)); gap: 0.4rem; } .archive-world__dpad [data-world-move="up"] { grid-column: 2; } .archive-world__dpad [data-world-move="left"] { grid-column: 1; } .archive-world__dpad [data-world-move="down"] { grid-column: 2; } .archive-world__dpad [data-world-move="right"] { grid-column: 3; } .archive-world__controls button { min-height: 42px; padding: 0.5rem 0.8rem; user-select: none; -webkit-user-select: none; } .archive-world__action-pad [data-world-attack], .archive-world__action-pad [data-world-interact] { min-height: 54px; background: #f5d98d; } .archive-world__status, .archive-world__instructions, .archive-world__prompt { margin: 0; padding: 0.65rem 1rem; color: #f5e4b7; text-align: center; } .archive-world__prompt { padding-bottom: 0.15rem; color: #fff0b7; font-weight: 900; } .archive-world__status { padding-top: 0.2rem; font-weight: 800; } .archive-world__instructions { padding-top: 0; color: #cbbd9d; font-size: 0.85rem; } .archive-world__overlay { position: absolute; z-index: 60; inset: 0; display: grid; place-items: center; padding: clamp(0.6rem, 2vw, 1.5rem); background: rgba(9, 15, 12, 0.78); backdrop-filter: blur(2px); } .archive-world__overlay[hidden] { display: none; } .archive-world__panel { width: min(720px, 100%); max-height: 96%; overflow: auto; border: 3px double #9c7846; border-radius: 6px; background: linear-gradient(rgba(255, 255, 255, 0.26), transparent 30%), var(--world-panel); color: #2a2118; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.58); } .archive-world__panel > header { position: sticky; z-index: 2; top: 0; display: flex; gap: 1rem; justify-content: space-between; align-items: start; padding: 0.85rem 1rem; border-bottom: 2px solid #a6834f; background: #e8d5aa; } .archive-world__panel h2, .archive-world__panel h3, .archive-world__dialog h2 { font-family: Georgia, "Times New Roman", serif; } .archive-world__panel h2 { margin: 0.15rem 0 0; } .archive-world__panel > header button { min-width: 42px; min-height: 42px; padding: 0; font-size: 1.4rem; } .archive-world__panel-body { padding: 1rem; } .archive-world__panel blockquote { margin: 0.9rem 0; padding: 0.8rem; border-left: 4px solid var(--world-moss); background: rgba(255, 255, 255, 0.46); } .rpg-panel__landmark-icon { float: right; margin: 0 0 0.5rem 0.8rem; color: #8b6828; font-size: 3rem; } .rpg-panel__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } .rpg-panel__facts div { padding: 0.55rem; border: 1px solid #c1a87d; border-radius: 4px; background: rgba(255, 255, 255, 0.34); } .rpg-panel__facts dt { color: #66563d; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; } .rpg-panel__facts dd { margin: 0.2rem 0 0; } .rpg-panel__actions, .rpg-panel__puzzle-buttons, .rpg-menu-tabs { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0.9rem 0; } .archive-world__panel button { min-height: 42px; padding: 0.6rem 0.8rem; } .rpg-panel__complete { color: #2e6237; font-weight: 900; } .rpg-panel__destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid #b99d70; } .rpg-panel__destinations h3 { grid-column: 1 / -1; margin: 0; } .rpg-panel__destinations a { padding: 0.65rem; border: 1px solid #a88654; border-radius: 5px; background: var(--world-paper); color: #302516; font-weight: 800; text-decoration: none; } .rpg-panel__hint, .rpg-panel__note { color: #6f614d; font-size: 0.82rem; } .rpg-panel__sequence { min-height: 1.5em; font-weight: 900; } .archive-world__panel form, .archive-world__panel label { display: grid; gap: 0.4rem; } .archive-world__panel form { gap: 0.75rem; } .archive-world__panel select, .archive-world__panel input[type="range"] { width: 100%; } .archive-world__panel select { min-height: 42px; border: 1px solid #9c7846; border-radius: 4px; padding: 0.45rem; background: #fff9e9; color: #2a2118; font: inherit; } .rpg-menu-tabs { position: sticky; top: 76px; z-index: 1; padding: 0.45rem; background: #efe2c2; } .rpg-menu-tabs [aria-current="page"] { background: #385341; color: #fff8e7; } .rpg-menu-list { display: grid; gap: 0.55rem; padding: 0; list-style: none; } .rpg-menu-list li { display: grid; gap: 0.18rem; padding: 0.7rem; border: 1px solid #b89b6c; border-radius: 5px; background: rgba(255, 255, 255, 0.38); } .rpg-menu-list li.is-complete { border-color: #6d966c; background: #e1edd5; } .rpg-menu-list small, .rpg-menu-list span { color: #665a46; } .rpg-inventory li { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; } .rpg-item-icon { display: block; width: 44px; height: 44px; border: 1px solid #9b7948; border-radius: 6px; background-color: #e7d4aa; background-image: url("/assets/images/play/archive-world/v2/item-atlas.png"); background-repeat: no-repeat; background-size: 176px 176px; image-rendering: pixelated; } .rpg-item-icon--0 { background-position: 0 0; } .rpg-item-icon--1 { background-position: -44px 0; } .rpg-item-icon--2 { background-position: -88px 0; } .rpg-item-icon--3 { background-position: -132px 0; } .rpg-item-icon--4 { background-position: 0 -44px; } .rpg-item-icon--5 { background-position: -44px -44px; } .rpg-item-icon--6 { background-position: -88px -44px; } .rpg-item-icon--7 { background-position: -132px -44px; } .rpg-item-icon--8 { background-position: 0 -88px; } .rpg-item-icon--9 { background-position: -44px -88px; } .rpg-item-icon--10 { background-position: -88px -88px; } .rpg-item-icon--11 { background-position: -132px -88px; } .rpg-item-icon--12 { background-position: 0 -132px; } .rpg-controls-list div { display: grid; grid-template-columns: minmax(90px, 0.35fr) 1fr; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid #c9b38e; } .rpg-controls-list dt { font-weight: 900; } .rpg-controls-list dd { margin: 0; } .rpg-toggle { grid-template-columns: auto 1fr !important; align-items: center; } .rpg-danger { border-color: #a34e57 !important; background: #f3c8c5 !important; } .archive-world__dialog { width: min(92vw, 620px); max-height: 86vh; overflow: auto; border: 2px solid var(--world-line); border-radius: 10px; padding: 1.2rem; background: linear-gradient(rgba(255, 255, 255, 0.45), transparent 50%), var(--world-panel); color: #2b2116; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46); } .archive-world__dialog::backdrop { background: rgba(15, 24, 19, 0.78); backdrop-filter: blur(3px); } .archive-world__dialog h2 { margin-top: 0.25rem; } .archive-world__dialog form, .archive-world__dialog label, .archive-world__dialog fieldset { display: grid; gap: 0.65rem; } .archive-world__dialog input[type="text"] { width: 100%; border: 1px solid var(--world-line); border-radius: 6px; padding: 0.7rem; background: var(--world-paper); color: #2b2116; font: inherit; } .archive-world__dialog fieldset { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #b79b70; } .archive-world__dialog fieldset label { display: flex; gap: 0.4rem; align-items: center; } .archive-world__dialog button { padding: 0.65rem 0.85rem; } .palette-swatch { width: 18px; height: 18px; border: 2px solid #392e22; border-radius: 3px; } .palette-swatch--brass { background: #f1c46f; } .palette-swatch--moss { background: #91c788; } .palette-swatch--berry { background: #d894ad; } .archive-world__error { min-height: 1.4em; margin: 0; color: #8b2635; font-weight: 800; } .archive-world__directory { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .archive-world__directory summary { padding: 0.9rem 1rem; font-weight: 900; cursor: pointer; } .archive-world__directory > p { margin: 0; padding: 0 1rem 0.8rem; color: var(--muted); } .archive-world__directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; padding: 0 1rem 1rem; } .archive-world__directory-grid section { padding: 0.8rem; border: 1px solid var(--border); border-radius: 6px; } .archive-world__directory-grid h2 { margin: 0 0 0.45rem; font-size: 1rem; } .archive-world__noscript { padding: 0.8rem; border-left: 4px solid var(--world-brass); background: var(--surface); } @media (max-width: 760px) { .play-hero, .play-console, .sigil-tool { grid-template-columns: 1fr; } .play-orbit { min-height: 260px; } .memory-board { grid-template-columns: repeat(3, minmax(64px, 1fr)); } .book-spine { width: calc(50% - 0.4rem); min-height: 160px; } .archive-world__hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rpg-hud__actions { grid-column: 1 / -1; justify-content: start; } .archive-world__game { min-height: 360px; max-height: 62vh; } .archive-world__dialog fieldset, .rpg-panel__facts, .rpg-panel__destinations, .archive-world__directory-grid { grid-template-columns: 1fr; } .rpg-objective { display: grid; gap: 0.2rem; } } @media (max-width: 480px) { .archive-world__game { min-height: 300px; } .archive-world__controls { justify-content: space-between; gap: 0.4rem; padding: 0.5rem; } .archive-world__dpad { grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(2, 40px); } .archive-world__action-pad { grid-template-columns: repeat(2, minmax(64px, 1fr)); } .archive-world__controls button { min-height: 40px; padding: 0.4rem 0.5rem; font-size: 0.8rem; } .archive-world__panel { max-height: 100%; } .archive-world__panel-body { padding: 0.75rem; } .rpg-menu-tabs { top: 70px; } .rpg-inventory li { grid-template-columns: 44px minmax(0, 1fr); } .rpg-inventory li button { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .archive-world *, .archive-world *::before, .archive-world *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .rpg-meter i { transition: none; } }