/* Shared game journal: the photograph stays on the left while the text scrolls. */
#notes{--ink:#352e22;--paper:#ded0ad;box-sizing:border-box;width:min(1120px,94vw);height:min(90dvh,790px);max-width:none;max-height:none;margin:auto;padding:0;border:1px solid #aa9064;border-radius:3px;background:var(--paper);color:var(--ink);box-shadow:0 22px 90px #0009;overflow:hidden;user-select:text;font-family:'Microsoft YaHei','PingFang SC',sans-serif;color-scheme:light}
#notes::backdrop{background:#06171ee0;backdrop-filter:blur(5px)}
#notes .close{position:absolute;right:8px;top:7px;width:44px;height:44px;border:0;background:transparent;color:var(--ink);font:31px Georgia;z-index:5;cursor:pointer}
#note-tabs{height:64px;display:flex;align-items:center;gap:12px;padding:8px 62px 8px 28px;border-bottom:1px solid #8a734f55;background:#b8a17a}
#note-tabs button{font:20px KaiTi,STKaiti,serif;padding:9px 12px;min-height:44px;border:0;border-bottom:2px solid transparent;background:transparent;color:#4b3b25;cursor:pointer;white-space:nowrap}
#note-tabs button.active{border-bottom-color:#5a411d;color:#251e13}
#notes :focus-visible{outline:2px solid #76552b;outline-offset:2px}
#note-content{height:calc(100% - 64px);display:grid;grid-template-columns:43% 57%;background:linear-gradient(90deg,#d7c7a4 42.7%,#907d58 43%,#c0ae88 43.5%,#e3d5b5 45%);min-width:0}
#notes .note-left{margin:0;padding:28px 30px 20px;display:flex;flex-direction:column;gap:16px;min-height:0;min-width:0;align-items:center}
#notes .note-left img{width:100%;height:calc(100% - 40px);object-fit:contain;filter:drop-shadow(0 4px 5px #48372544)}
#notes .note-left figcaption{display:flex;justify-content:space-between;gap:18px;width:100%;font:15px KaiTi,serif;color:#67563a}
#notes .note-right{min-width:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:26px 36px 24px;scrollbar-color:#9c835c transparent;scrollbar-width:thin;line-height:1.8}
#notes .note-eyebrow{margin:0 0 4px;font-size:11px;letter-spacing:3px;color:#7b6848}
#notes h2{font:32px KaiTi,STKaiti,serif;margin:0 0 17px;color:#2c251a}
#notes .note-facts{font-size:14px;margin:0 0 20px;padding:0 0 15px;border-bottom:1px solid #917b5544}
#notes .note-facts div{display:flex;gap:14px;margin:4px 0}
#notes dt{flex:0 0 30px;color:#786344}#notes dd{margin:0}
#notes h3{font:21px KaiTi,STKaiti,serif;margin:16px 0 9px;color:#654823}
#notes .note-history{font-size:15px;line-height:1.95;margin:0 0 12px;text-align:justify}
#notes .note-history strong{font-weight:650;color:#673b25}
#notes .note-context{font-size:13px;padding:10px 13px;border-left:2px solid #a28757;background:#b4a07722;line-height:1.85}
#notes details{font-size:13px;line-height:1.8;margin:15px 0}
#notes summary{cursor:pointer;min-height:28px;color:#654823}
#notes a{display:block;font-size:12px;margin:8px 0;color:#6b522a;text-underline-offset:3px;overflow-wrap:anywhere}
#notes .note-small{font-size:11px;line-height:1.7;color:#7b6b50;margin:16px 0 0}
#notes .note-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:55vh;background:#101e21;margin-top:10px}
@media(max-height:520px){#notes{height:96dvh;width:96vw}#note-tabs{height:52px;padding:4px 55px 4px 18px;gap:7px}#note-tabs button{font-size:16px;padding:7px 10px;min-height:42px}#note-content{height:calc(100% - 52px)}#notes .note-left{padding:15px 22px 12px;gap:9px}#notes .note-right{padding:15px 24px}#notes h2{font-size:26px;margin-bottom:10px}#notes .note-facts{font-size:12px;margin-bottom:12px;padding-bottom:9px}#notes .note-history{font-size:13px;line-height:1.9}#notes h3{font-size:18px;margin-top:12px}#notes .note-eyebrow{font-size:10px}}
@media(max-width:540px) and (orientation:portrait){#notes{width:96vw;height:94dvh}#note-tabs{padding-left:8px;gap:0}#note-tabs button{font-size:15px;padding:9px 7px}#note-content{grid-template-columns:38% 62%;background:linear-gradient(90deg,#d7c7a4 37.7%,#907d58 38%,#e3d5b5 40%)}#notes .note-left{padding:18px 9px}#notes .note-left figcaption{font-size:12px;flex-direction:column;gap:0}#notes .note-right{padding:20px 15px}#notes h2{font-size:26px}#notes .note-history{font-size:13px}#notes .note-facts div{gap:7px}#notes .note-facts{font-size:12px}}