/* games: the daily riddle (#/riddle), Walk to Mordor (#/walk), Which character are you? (#/quiz) */

/* ------------------------------------------------------------------ shared */
.rd-page, .qz-page { max-width: 860px; }
.rd-small { font: italic 400 15px/1.5 var(--body); color: var(--text-3, var(--text-2)); margin: 10px 0; }

/* ------------------------------------------------------------------ riddle */
.rd-head { padding-top: 34px; margin-bottom: 22px; }
.rd-title { margin: 6px 0 0; font: 500 clamp(34px, 5vw, 54px)/1.05 var(--display); color: var(--gold-hi); }
.rd-note { font: italic 400 15px/1.4 var(--body); color: var(--text-2); }
.rd-clue { font: 400 19px/1.5 var(--body); color: var(--text); margin: 0 0 18px; }
.rd-clue b { font: 500 12px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

.rd-rows { display: grid; gap: 6px; justify-content: center; margin: 10px 0 20px; }
.rd-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; }
.rd-cell { display: grid; place-items: center; width: clamp(40px, 10vw, 56px); aspect-ratio: 1; font: 600 clamp(20px, 4vw, 28px)/1 var(--label); color: var(--text); border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(236, 211, 154, .18); background: rgba(255, 240, 210, .02); transition: background .3s, box-shadow .3s; }
.rd-cell.typed { box-shadow: inset 0 0 0 1.5px rgba(236, 211, 154, .55); animation: rd-pop .12s ease-out; }
.rd-cell.g, .rd-cell.y, .rd-cell.b { color: #fff; box-shadow: none; animation: rd-flip .5s ease both; animation-delay: calc(var(--i) * 90ms); }
.rd-cell.g { background: #4f7a3a; }
.rd-cell.y { background: #b0892e; }
.rd-cell.b { background: #3a332b; color: #c9bba0; }
@keyframes rd-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes rd-pop { 50% { transform: scale(1.08); } }
.rd-row.shake { animation: rd-shake .4s ease; }
@keyframes rd-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.rd-kb { display: grid; gap: 6px; max-width: 560px; margin: 0 auto 20px; }
.rd-kb > div { display: flex; justify-content: center; gap: 5px; }
.rd-key { flex: 1; min-width: 0; max-width: 46px; height: 52px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; font: 600 15px/1 var(--label); color: var(--text); background: rgba(255, 240, 210, .09); transition: background .3s; }
.rd-key[data-k='ENTER'], .rd-key[data-k='⌫'] { max-width: 72px; flex: 1.5; font-size: 12px; letter-spacing: .08em; }
.rd-key:hover { background: rgba(255, 240, 210, .16); }
.rd-key.g { background: #4f7a3a; color: #fff; }
.rd-key.y { background: #b0892e; color: #fff; }
.rd-key.b { background: #26201a; color: #7d705c; }
@media (prefers-reduced-motion: reduce) { .rd-cell, .rd-row { animation: none !important; } }

.rd-verse { margin: 0 0 22px; padding: 26px 30px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: rgba(255, 240, 210, .04); font: italic 400 clamp(20px, 2.6vw, 25px)/1.6 var(--display); color: var(--text); }
.rd-verse span { display: block; }
.rd-form { display: flex; gap: 10px; flex-wrap: wrap; }
.rd-input { flex: 1 1 220px; padding: 12px 16px; border: 0; border-radius: 10px; font: 400 18px/1.2 var(--body); color: var(--text); background: rgba(255, 240, 210, .06); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .25); }
.rd-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold-hi); }
.rd-hints, .rd-tries { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.rd-hints li { font: italic 400 17px/1.45 var(--body); color: var(--gold-hi); }
.rd-tries li { font: 400 16px/1.4 var(--body); color: var(--text-2); }
.rd-tries li.wrong { text-decoration: line-through; text-decoration-color: rgba(200, 80, 60, .7); }
.rd-tries li.right { color: #9fd17f; }
ol.rd-tries { list-style: decimal; padding-left: 1.4em; }
.rd-line { margin: 0 0 14px; font: italic 400 clamp(22px, 3vw, 30px)/1.45 var(--display); color: var(--text); }
.rd-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.rd-opt { padding: 16px; border: 0; border-radius: 12px; cursor: pointer; font: 500 18px/1.2 var(--body); color: var(--text); background: rgba(255, 240, 210, .05); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .2); transition: background .2s, box-shadow .2s; }
.rd-opt:hover:not(:disabled) { background: rgba(255, 240, 210, .1); box-shadow: inset 0 0 0 1px var(--gold-hi); }
.rd-opt.right { background: #4f7a3a; color: #fff; box-shadow: none; }
.rd-opt.wrong { background: #5a2a22; color: #e9c9bd; box-shadow: none; }
.rd-opt:disabled { cursor: default; }

.rd-result:empty { display: none; }
.rd-done { margin: 26px 0; padding: 26px 28px; border-radius: 16px; text-align: center; background: linear-gradient(180deg, rgba(201, 163, 91, .14), rgba(201, 163, 91, .04)); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .3); }
.rd-done.lost { background: rgba(255, 240, 210, .04); }
.rd-done h2 { margin: 0 0 8px; font: 500 30px/1.1 var(--display); color: var(--gold-hi); }
.rd-answer { font: 400 18px/1.5 var(--body); color: var(--text); }
.rd-answer b { color: var(--gold-hi); }
.rd-grid { margin: 14px auto; font: 24px/1.2 system-ui, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; letter-spacing: 2px; white-space: pre; }
.rd-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.rd-next { font: italic 400 15px/1.4 var(--body); color: var(--text-2); }
.rd-count { font: 500 15px/1 var(--label); letter-spacing: .1em; color: var(--gold-hi); font-style: normal; }
.rd-stats { display: flex; justify-content: center; gap: 26px; margin-top: 16px; }
.rd-stats div { display: flex; flex-direction: column; gap: 4px; }
.rd-stats strong { font: 500 28px/1 var(--display); color: var(--gold-hi); }
.rd-stats span { font: 500 10px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.rd-archive { margin: 28px 0 40px; }
.rd-archive summary { cursor: pointer; font: 500 11px/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); padding: 8px 0; }
.rd-arch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 12px; max-height: 260px; overflow-y: auto; }
.rd-arch { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 10px; text-decoration: none; color: var(--text); background: rgba(255, 240, 210, .04); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .12); }
.rd-arch.on, .rd-arch:hover { box-shadow: inset 0 0 0 1px var(--gold-hi); }
.rd-arch strong { font: 500 16px/1 var(--display); color: var(--gold-hi); }
.rd-arch em { font: italic 400 12px/1 var(--body); color: var(--text-2); min-height: 12px; }

/* riddle: where on the map? — a panel over the live map, place names hidden */
body.riddle-where .marker, body.riddle-where .mpin, body.riddle-where .stopdot3 { display: none !important; }
.riddle-map .rd-panel { position: fixed; z-index: 20; left: 20px; top: calc(var(--top, 64px) + 14px); width: min(380px, calc(100vw - 40px)); max-height: calc(100vh - var(--top, 64px) - 40px); overflow-y: auto; padding: 4px 22px 18px; border-radius: 14px; background: var(--glass, rgba(14, 11, 8, .88)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--glass-shadow, 0 20px 50px rgba(0, 0, 0, .5)); }
.riddle-map .rd-head { padding-top: 14px; margin-bottom: 8px; }
.riddle-map .rd-title { font-size: 30px; }
.rd-find { margin: 6px 0; font: 400 22px/1.3 var(--display); color: var(--text); }
.rd-find b { color: var(--gold-hi); font-weight: 600; }
.riddle-map .rd-done { padding: 18px; margin: 14px 0; }
.riddle-map .rd-stats { gap: 16px; }
.rd-pin { position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; }
.rd-pin i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #c0392b; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 4px 10px rgba(0, 0, 0, .5); }
.rd-pin span { position: absolute; left: 14px; top: -10px; padding: 2px 7px; border-radius: 6px; white-space: nowrap; font: 600 12px/1.3 var(--label); letter-spacing: .06em; color: #fff; background: rgba(10, 8, 6, .8); }
.rd-pin.answer i { background: var(--gold-hi); animation: rd-ping 1.6s ease-out infinite; }
@keyframes rd-ping { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 0 rgba(236, 211, 154, .8); } 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 26px rgba(236, 211, 154, 0); } }
@media (max-width: 700px) { .riddle-map .rd-panel { top: auto; bottom: 12px; left: 12px; width: calc(100vw - 24px); max-height: 46vh; } }

/* ------------------------------------------------------------------ walk to Mordor */
.walk-map .wk-panel { position: fixed; z-index: 20; right: 20px; top: calc(var(--top, 64px) + 14px); width: min(400px, calc(100vw - 40px)); max-height: calc(100vh - var(--top, 64px) - 34px); overflow-y: auto; padding: 18px 22px; border-radius: 14px; background: var(--glass, rgba(14, 11, 8, .88)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--glass-shadow, 0 20px 50px rgba(0, 0, 0, .5)); }
.wk-total { margin: 4px 0 0; font: 500 46px/1 var(--display); color: var(--gold-hi); }
.wk-of { margin: 6px 0 12px; font: italic 400 16px/1.4 var(--body); color: var(--text-2); }
.wk-bar { height: 8px; border-radius: 99px; background: rgba(255, 240, 210, .08); overflow: hidden; }
.wk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7a2216, #e4a43a); transition: width .8s var(--ease, ease); }
.wk-bar.back i { background: linear-gradient(90deg, #3f6b4a, #c9d98a); }
.wk-where { margin: 10px 0 16px; font: 400 15.5px/1.45 var(--body); color: var(--text); }
.wk-where b { color: var(--gold-hi); font-weight: 500; }
.wk-log { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.wk-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wk-amount, .wk-date { padding: 10px 12px; border: 0; border-radius: 9px; font: 400 16px/1.2 var(--body); color: var(--text); background: rgba(255, 240, 210, .06); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .22); color-scheme: dark; }
.wk-amount { width: 96px; }
.wk-date { width: 150px; }
.wk-log .btn { flex: 1; min-width: 110px; }
.wk-quick > span { font: 500 10px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); margin-right: 2px; }
.wk-quick .chip { padding: 6px 10px; font-size: 13px; }
.wk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0; }
.wk-stats div { display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; border-radius: 10px; text-align: center; background: rgba(255, 240, 210, .04); }
.wk-stats strong { font: 500 19px/1.1 var(--display); color: var(--gold-hi); }
.wk-stats span { font: 500 9px/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.wk-hobbit { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.wk-label { font: 500 10px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); margin-right: 4px; }
.wk-hobbit .chip { padding: 4px 10px 4px 4px; font-size: 14px; }
.wk-hobbit .chip.on { box-shadow: inset 0 0 0 1px var(--gold-hi); color: var(--gold-hi); }
.wk-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 12px; }
.wk-import { position: relative; overflow: hidden; cursor: pointer; }
.wk-import input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wk-sec { border-top: 1px solid var(--hair); padding: 10px 0; }
.wk-sec summary { cursor: pointer; font: 500 11px/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); padding: 4px 0; }
.wk-miles { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 2px; }
.wk-miles li { position: relative; padding: 6px 0 6px 86px; font: 400 15px/1.35 var(--body); color: var(--text-3, #8a7d68); }
.wk-miles li.reached { color: var(--text); }
.wk-miles li.reached b { color: var(--gold-hi); }
.wk-miles li b { font-weight: 500; }
.wk-miles li p { margin: 3px 0 0; font: italic 400 14px/1.4 var(--body); color: var(--text-2); }
.wk-mi { position: absolute; left: 0; top: 8px; width: 78px; font: 500 11px/1.2 var(--label); letter-spacing: .06em; color: var(--text-2); }
.wk-walks { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.wk-walks li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; font: 400 15px/1.3 var(--body); color: var(--text-2); }
.wk-walks b { color: var(--text); font-weight: 500; }
.wk-del { border: 0; background: none; color: var(--text-2); font-size: 18px; cursor: pointer; padding: 0 4px; }
.wk-del:hover { color: #e07a5f; }
.wk-empty, .wk-note { font: italic 400 14px/1.5 var(--body); color: var(--text-2); }
.wk-you { position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; display: flex; flex-direction: column; align-items: center; margin: -86px 0 0 -22px; width: 44px; }
.wk-you b { margin-top: 3px; padding: 2px 7px; border-radius: 6px; font: 600 10px/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; color: #1a1208; background: var(--gold-hi); }
.wk-face { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #2a2118; color: var(--gold-hi); box-shadow: 0 0 0 2px var(--gold-hi), 0 6px 16px rgba(0, 0, 0, .55); }
.wk-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.wk-cele { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(5, 3, 2, .6); backdrop-filter: blur(4px); animation: wk-in .3s ease; }
.wk-cele-box { width: min(520px, 100%); padding: 30px 30px 20px; border-radius: 18px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(240, 190, 90, .22), transparent 60%), linear-gradient(180deg, #2a1d10, #120d08); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .4), 0 30px 80px rgba(0, 0, 0, .6); animation: wk-rise .45s cubic-bezier(.2, .9, .3, 1.2); }
.wk-cele-box h2 { margin: 8px 0 10px; font: 500 36px/1.1 var(--display); color: var(--gold-hi); }
.wk-cele-box p { font: 400 18px/1.55 var(--body); color: var(--text); }
.wk-cele-mi { font: italic 400 15px/1 var(--body) !important; color: var(--text-2) !important; }
.wk-also { font-size: 15px !important; color: var(--text-2) !important; }
.wk-cele .wk-actions { justify-content: center; margin-top: 18px; }
@keyframes wk-in { from { opacity: 0; } }
@keyframes wk-rise { from { opacity: 0; transform: translateY(20px) scale(.96); } }
@media (max-width: 700px) { .walk-map .wk-panel { top: auto; bottom: 10px; right: 10px; left: 10px; width: auto; max-height: 52vh; } .wk-total { font-size: 36px; } }

/* ------------------------------------------------------------------ quiz */
.qz-head { padding-top: 40px; }
.qz-bar { height: 4px; margin: 14px 0 26px; border-radius: 99px; background: rgba(255, 240, 210, .08); overflow: hidden; }
.qz-bar i { display: block; height: 100%; background: var(--gold-hi); transition: width .4s ease; }
.qz-q { max-width: 20ch; }
.qz-opts { display: grid; gap: 10px; margin: 8px 0 18px; }
.qz-opt { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; font: 400 19px/1.35 var(--body); color: var(--text); background: rgba(255, 240, 210, .04); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .16); transition: background .2s, box-shadow .2s, transform .2s; animation: qz-in .35s ease both; animation-delay: calc(var(--k) * 60ms); }
.qz-opt:hover, .qz-opt:focus-visible { outline: none; background: rgba(255, 240, 210, .09); box-shadow: inset 0 0 0 1px var(--gold-hi); transform: translateX(4px); }
.qz-letter { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 600 13px/1 var(--label); color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .4); }
@keyframes qz-in { from { opacity: 0; transform: translateY(8px); } }
.qz-back { margin-bottom: 40px; border: 0; background: none; cursor: pointer; }
.qz-result { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start; padding: 50px 0 30px; }
.qz-portrait { display: grid; place-items: center; width: 240px; height: 240px; border-radius: 50%; overflow: hidden; font: 500 80px/1 var(--display); color: var(--gold-hi); background: #2a2118; box-shadow: 0 0 0 4px #a8803e, 0 0 0 9px rgba(236, 211, 154, .15), 0 30px 60px rgba(0, 0, 0, .5); animation: qz-reveal .7s cubic-bezier(.2, .9, .3, 1.15) both; }
.qz-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
@keyframes qz-reveal { from { opacity: 0; transform: scale(.85) rotate(-4deg); } }
.qz-text .ptitle { margin: 4px 0 6px; }
.qz-epithet { font: italic 400 24px/1.3 var(--display); color: var(--gold-hi); margin: 0 0 16px; }
.qz-desc { font: 400 19px/1.65 var(--body); color: var(--text); max-width: 56ch; }
.qz-second, .qz-road { font: 400 17px/1.5 var(--body); color: var(--text-2); }
.qz-second a, .qz-road a { color: var(--gold-hi); }
.qz-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }
.qz-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.qz-mini { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 99px; text-decoration: none; font: 400 15px/1 var(--body); color: var(--text-2); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .16); }
.qz-mini.on, .qz-mini:hover { color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-hi); }
@media (max-width: 700px) { .qz-result { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; } .qz-portrait { width: 180px; height: 180px; } .qz-actions { justify-content: center; } .qz-desc { margin-inline: auto; } }

/* ------------------------------------------------------------------ home: the Play row */
.play-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 44px auto 0; }
.play-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 14px; text-decoration: none; color: var(--text); background: rgba(255, 240, 210, .035); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .16); transition: background .25s, box-shadow .25s, transform .25s; }
.play-card:hover { background: rgba(255, 240, 210, .07); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .45); transform: translateY(-2px); }
.play-card .pc-ico { font-size: 28px; line-height: 1; }
.play-card strong { font: 500 22px/1.15 var(--display); color: var(--gold-hi); }
.play-card span { font: 400 15px/1.45 var(--body); color: var(--text-2); }
.play-card em { margin-top: auto; padding-top: 6px; font: 500 10.5px/1 var(--label); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.play-card .pc-done { position: absolute; top: 14px; right: 14px; font: 500 10px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: #9fd17f; }
/* line icons in place of emoji */
.play-card .pc-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--gold-hi); background: rgba(201, 163, 91, .1); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .3); }
.play-card .pc-ico svg { width: 24px; height: 24px; }
.rd-title { display: flex; align-items: center; gap: 14px; }
.rd-title .rd-ico { width: .8em; height: .8em; flex: none; }
.rd-arch .rd-arch-ico { width: 18px; height: 18px; color: var(--text-2); }
.rd-hint-ico { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--gold-hi); }