/* Shared chrome for the Works-page variants: topbar cluster, hero, end note */
html { scroll-behavior: auto; }
html, body { overflow-x: clip; }
.tag-variant { position: fixed; bottom: 14px; right: 14px; z-index: 60; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; }
.top-right { pointer-events: auto; display: flex; align-items: center; gap: 10px; }
.coins-chip, .pill-menu { height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 999px; box-shadow: 2px 3px 0 rgba(34,32,25,.18); }
.coins-chip { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; background: var(--paper); padding: 0 16px; color: var(--d-yellow); }
.coins-chip b { color: var(--ink); font-weight: 500; }
.pill-menu { gap: 10px; background: var(--f-yellow); padding: 0 20px; font-family: var(--font-disp); font-weight: 700; font-size: .95rem; color: var(--ink); cursor: pointer; transition: box-shadow .15s; }
.pill-menu:hover { box-shadow: 3px 4px 0 rgba(34,32,25,.3); }
.pill-menu .bars span { display: block; width: 16px; height: 2px; background: var(--ink); margin: 3px 0; }
.pill-panel { position: fixed; z-index: 46; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 240px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s, transform .25s; box-shadow: 4px 6px 0 rgba(34,32,25,.2); }
.pill-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.pill-panel a { display: flex; justify-content: space-between; font-family: var(--font-disp); font-weight: 700; padding: 9px 14px; border-radius: 10px; text-decoration: none; }
.pill-panel a:hover { background: var(--accent-soft); }

.hero { padding-top: 140px; padding-bottom: 10px; }
.worldtag { font-family: var(--font-body); font-weight: 500; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.mega { font-size: clamp(2.8rem, 9.5vw, 8rem); line-height: .98; letter-spacing: -.02em; margin-top: 10px; }
.mega .ch { display: inline-block; will-change: transform; }
.mega .ch:hover { color: var(--accent); }
.hero .sub { max-width: 520px; margin-top: 16px; color: var(--ink-soft); }
.hero .hand-note { margin-top: 12px; font-family: var(--font-hand); font-size: 1.2rem; color: var(--muted); }

.lvltag { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; background: var(--f-yellow); border: 2px solid var(--ink); border-radius: 8px; padding: 3px 12px; }
.start-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-disp); font-weight: 700; font-size: .9rem; background: var(--accent); color: #fff; border: 2px solid #000; border-radius: 999px; padding: 10px 20px; box-shadow: 3px 4px 0 #000; white-space: nowrap; text-decoration: none; transition: transform .12s, box-shadow .12s; cursor: pointer; }
.start-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 5px 0 #000; }
.start-btn:active { transform: translate(3px, 4px); box-shadow: 0 0 0 #000; }

.quests-end { text-align: center; padding: clamp(46px, 8vh, 80px) 16px 20px; }
.quests-end .hand { font-size: 1.35rem; color: var(--muted); }