/* Floralia · the world map v4 skin, the TABLETOP WAR-ROOM DIORAMA (the user picked concept 2 on atlas4pick.html, 2026-10-21). On top of css/worldmap3.css (#wmap.v4, set when js/wmap3_layout.js says skin 'v4'; tools/atlas3.py --v4). The Codex kit assets/ui_book/atlas4/k_*.png: a carved walnut-and-brass frame, dark tooled-leather banner / tabs / card (light text), paper flag plates on brass (dark ink), brass tokens recoloured to each land, red leather buttons. */ #wmap.v4 { --ink: #2a1a0c; --ink2: #5a3e22; --gold: #e9b95a; --gold2: #a8782c; --w3-sky: radial-gradient(ellipse at 50% 50%, #4a3220 0%, #2c1d10 60%, #160e07 100%); } #wmap.v4 .wm3-frame { border-image: url(../assets/ui_book/atlas4/k_frame.png) 100 fill / calc(60px * var(--k)) stretch; } /* the title plaque: dark leather, light text */ #wmap.v4 .wm3-title { border-image: url(../assets/ui_book/atlas4/k_banner.png) 50 220 50 220 fill / 22px 96px 22px 96px stretch; padding: 22px 110px 18px; } #wmap.v4 .wm3-title b { color: #ffe7b0; } #wmap.v4 .wm3-title small { color: #e0c48e; } /* the place plates: a paper flag on brass (dark ink stays) */ /* (2026-10-21, the user: "ตัวหนังสือยังไม่สวยและไม่ตรงกรอบ"): a clean cream paper tag with a thin brass edge drawn by CSS (the scroll picture left the text too little room), the text centred both ways, a Thai line height (marks above / below) */ #wmap.v4 .wm3-plate { border: 0; border-image: none; border-radius: 8px; filter: none; background: linear-gradient(180deg, #fff6df 0%, #f3e2b8 100%); box-shadow: 0 0 0 1.5px #a07434, 0 0 0 3px rgba(60, 34, 10, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 8px rgba(20, 10, 2, 0.5); } #wmap.v4 .wm3-num, #wmap.v4 .wm3-tab i { -webkit-mask: url(../assets/ui_book/atlas4/k_seal.png) center / contain no-repeat; mask: url(../assets/ui_book/atlas4/k_seal.png) center / contain no-repeat; } #wmap.v4 .wm3-boss, #wmap.v4 .wm3-bossrow img { background: url(../assets/ui_book/atlas4/k_medal.png) center / contain no-repeat; } #wmap.v4 .wm3-you { background: url(../assets/ui_book/atlas4/k_pin.png) center / contain no-repeat; } #wmap.v4 .wm3-glow, #wmap.v4 .wm3-wglow { background: url(../assets/ui_book/atlas4/k_glow.png) center / 100% 100% no-repeat; } /* the land tabs: dark leather with a brass socket */ #wmap.v4 .wm3-tab { border-image: url(../assets/ui_book/atlas4/k_tab.png) 30 40 30 110 fill / 12px 16px 12px 44px stretch; color: #f6e2b8; } #wmap.v4 .wm3-tab b { color: #fbe9c4; } #wmap.v4 .wm3-tab small { color: #d8bb86; } #wmap.v4 .wm3-tab.you::after { box-shadow: 0 0 0 2px #2a1a0c; } #wmap.v4 .wm3-x, #wmap.v4 .wm3-tools button { background: url(../assets/ui_book/atlas4/k_round.png) center / contain no-repeat; color: #ffd98a; } /* the place card: dark tooled leather in walnut and brass, light text */ #wmap.v4 .wm3-card { border-image: url(../assets/ui_book/atlas4/k_card.png) 120 fill / 40px stretch; color: #f3e2c0; } #wmap.v4 .wm3-cbanner { box-shadow: inset 0 -60px 40px -24px rgba(20, 12, 4, 0.9), 0 0 0 2px #a8782c; } #wmap.v4 .wm3-chips i { background: rgba(255, 230, 180, 0.1); color: #f0dcb4; box-shadow: inset 0 0 0 1px rgba(233, 185, 90, 0.45); } #wmap.v4 .wm3-chips i.lv { background: #b0281c; color: #fff3df; } #wmap.v4 .wm3-chips i.land { background: color-mix(in srgb, var(--lc) 40%, #2a1a0c); color: #fff0d0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 70%, transparent); } #wmap.v4 .wm3-chips i.st-rec { color: #9ae87e; } #wmap.v4 .wm3-chips i.st-ahead { color: #ffd36a; } #wmap.v4 .wm3-chips i.st-hard { color: #ff9a86; } #wmap.v4 .wm3-chips i.st-easy { color: #c8b494; } #wmap.v4 .wm3-chips i.here { background: #e9b95a; color: #2a1a0c; } #wmap.v4 .wm3-story { color: #ead6b0; } #wmap.v4 .wm3-card h4 { color: #ffcf7a; } #wmap.v4 .wm3-card h4 small { color: #cdb185; } #wmap.v4 .wm3-bossrow { background: rgba(255, 220, 150, 0.06); box-shadow: inset 0 0 0 1.5px rgba(233, 185, 90, 0.5); } #wmap.v4 .wm3-bossrow:hover { background: rgba(255, 220, 150, 0.13); } #wmap.v4 .wm3-bossrow b { color: #ffd9a0; } #wmap.v4 .wm3-bossrow small, #wmap.v4 .wm3-bossrow em { color: #d2b88c; } #wmap.v4 .wm3-bossrow em.live { color: #ff8a70; } #wmap.v4 .wm3-mob { color: #ecd8b2; } #wmap.v4 .wm3-mob img { background: #3a2716; box-shadow: 0 0 0 2px #a8782c; } #wmap.v4 .wm3-hub button { color: #f3e2c0; background: rgba(255, 220, 150, 0.08); box-shadow: inset 0 0 0 1px rgba(233, 185, 90, 0.45); } #wmap.v4 .wm3-hub button:hover { background: rgba(255, 220, 150, 0.16); } #wmap.v4 .wm3-hub b { color: #ffd9a0; } #wmap.v4 .wm3-hub small, #wmap.v4 .wm3-hub p { color: #d2b88c; } #wmap.v4 .wm3-pkline { color: #ffb08a; } #wmap.v4 .wm3-pkline.safe { color: #a6e88a; } #wmap.v4 .wm3-cbtns .btn { border-image: url(../assets/ui_book/atlas4/k_btn2.png) 40 60 40 60 fill / 16px 24px 16px 24px stretch; color: #f6e2b8; } #wmap.v4 .wm3-cbtns .btn.primary { border-image-source: url(../assets/ui_book/atlas4/k_btn.png); color: #fff3d0; } /* the quest strip and the legend: dark leather */ #wmap.v4 .wm3-quest { background: #2e1e10; color: #f3e2c0; box-shadow: 0 0 0 2px #b0281c, 0 4px 12px rgba(10, 6, 2, 0.6); } #wmap.v4 .wm3-quest .q { color: #ff8a70; } #wmap.v4 .wm3-quest b { color: #ffd9a0; } #wmap.v4 .wm3-quest small { color: #d2b88c; } #wmap.v4 .wm3-lgt { background: #2e1e10; color: #f3e2c0; box-shadow: 0 0 0 1.5px #a8782c; } #wmap.v4 .wm3-legend ul { background: rgba(40, 26, 14, 0.97); box-shadow: 0 0 0 1.5px #a8782c, 0 6px 14px rgba(10, 6, 2, 0.6); } #wmap.v4 .wm3-legend li { color: #f0dcb4; } /* the models stand on the table: a soft contact shadow (no ink drop shadow) */ #wmap.v4 .wm3-art { filter: drop-shadow(0 4px 4px rgba(20, 12, 4, 0.4)); } #wmap.v4 .wm3-popart { filter: drop-shadow(0 4px 4px rgba(20, 12, 4, 0.4)); } #wmap.v4 .wm3-popart.on { filter: drop-shadow(0 28px 18px rgba(10, 6, 2, 0.6)) brightness(1.08); } /* ---------- clean by zoom (2026-10-21, the user: "ซ่อนของรก ชื่อแบบเรียบ ซูมเป็นชั้น และของขยับเบาๆ") ---------- far (the whole table): a one-line paper name flag per place, no number, no level, no boss rings, no badges; mid: the name + its level line, the number token, boss rings small; near: everything. The place under the mouse, the picked one, yours and the quest's always show in full. */ #wmap.v4 .wm3-landname { display: none; } /* (the rows mix lands: the tabs and the token colours carry them) */ #wmap.v4 .wm3-plate { padding: 3px 12px 4px 6px; gap: 7px; max-width: none; justify-content: center; align-items: center; } #wmap.v4 .wm3-nm { align-items: flex-start; justify-content: center; } #wmap.v4 .wm3-nm b { font: 700 14.5px/1.45 'Mali', sans-serif; color: #3a220c; white-space: nowrap; } #wmap.v4 .wm3-nm small { font: 700 11px/1.3 'Fredoka', 'Mali', sans-serif; margin: -2px 0 1px; } #wmap.v4 .wm3-num { width: 22px; height: 22px; font-size: 11px; } #wmap.v4 .wm3-boss, #wmap.v4 .wm3-dg, #wmap.v4 .wm3-rec, #wmap.v4 .wm3-nm small, #wmap.v4 .wm3-num { transition: opacity 0.3s ease, transform 0.3s ease; } #wmap.v4.far .wm3-pin:not(.hov):not(.sel):not(.here):not(.quest) :is(.wm3-boss, .wm3-dg, .wm3-rec, .wm3-nm small) { opacity: 0; pointer-events: none; } #wmap.v4.far .wm3-pin:not(.hov):not(.sel):not(.here):not(.quest) .wm3-num { display: none; } #wmap.v4.far .wm3-pin:not(.hov):not(.sel):not(.here):not(.quest) .wm3-plate { padding: 2px 12px 3px; } #wmap.v4.far .wm3-pin:not(.hov):not(.sel):not(.here):not(.quest) .wm3-nm { align-items: center; } #wmap.v4.far .wm3-pin:not(.hov):not(.sel):not(.here):not(.quest) .wm3-nm small { display: none; } #wmap.v4.far .wm3-pin.hov .wm3-nm small, #wmap.v4.far .wm3-pin.sel .wm3-nm small, #wmap.v4.far .wm3-pin.here .wm3-nm small, #wmap.v4.far .wm3-pin.quest .wm3-nm small { display: block; } /* the glass domes stand close together: their tags only for the one under the mouse, picked, yours or the quest's */ #wmap.v4 .wm3-pin.dome:not(.hov):not(.sel):not(.here):not(.quest) .wm3-plate { opacity: 0; pointer-events: none; } #wmap.v4.mid .wm3-pin:not(.hov):not(.sel):not(.here):not(.quest) :is(.wm3-rec, .wm3-dg) { opacity: 0; pointer-events: none; } #wmap.v4.mid .wm3-boss { transform: scale(0.8); } #wmap.v4 .wm3-pin.fog:not(.hov) .wm3-plate { opacity: 0.6; } /* ---------- gentle life ---------- */ /* candle light breathing over the hall and the table (one layer, opacity only) */ #wmap.v4 .wm3-world::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(ellipse 34% 40% at 6% 10%, rgba(255, 190, 90, 0.55), transparent 70%), radial-gradient(ellipse 30% 36% at 95% 8%, rgba(255, 180, 80, 0.5), transparent 70%), radial-gradient(ellipse 30% 34% at 4% 92%, rgba(255, 170, 70, 0.45), transparent 70%), radial-gradient(ellipse 32% 36% at 96% 94%, rgba(255, 180, 90, 0.45), transparent 70%); animation: w4Candle 3.8s ease-in-out infinite alternate; } @keyframes w4Candle { 0% { opacity: 0.55; } 30% { opacity: 0.8; } 55% { opacity: 0.62; } 80% { opacity: 0.9; } 100% { opacity: 0.7; } } /* your place and the quest's float softly; the glass domes glint now and then */ #wmap.v4 .wm3-art.here:not(.hov), #wmap.v4 .wm3-art.quest:not(.hov) { animation: w4Bob 3.2s ease-in-out infinite; } @keyframes w4Bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5%); } } #wmap.hov .wm3-art.here, #wmap.hov .wm3-art.quest { animation: none; } @media (prefers-reduced-motion: reduce) { #wmap.v4 .wm3-world::after, #wmap.v4 .wm3-art { animation: none !important; } } /* ---------- the close look of the user's favourite mockup (atlas5pick "ก", 2026-10-21: "แบบซูมใกล้ ก สวย") ---------- a film camera's shallow focus: the screen's top and bottom bands softly blurred and warmed (one fixed layer over the table, under the plates; off when the whole table is shown) */ #wmap .wm3-dof { display: none; } #wmap.v4 .wm3-dof { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; -webkit-backdrop-filter: blur(3.5px) saturate(1.05); backdrop-filter: blur(3.5px) saturate(1.05); -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 9%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55) 91%, #000 100%); mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 9%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55) 91%, #000 100%); } #wmap.v4:not(.far) .wm3-dof { opacity: 1; } #wmap.v4.panning .wm3-dof { transition: none; } /* warm cinematic grade + a soft dark edge (screen space) */ #wmap.v4 .wm3-frame { box-shadow: inset 0 0 calc(140px * var(--k)) rgba(30, 14, 4, 0.55); } /* the land tabs: slim colour chips; the names slide out while the mouse is over the column */ #wmap.v4 .wm3-tabs { gap: 6px; } #wmap.v4 .wm3-tab { width: 46px; overflow: hidden; padding: 5px; transition: width 0.25s ease, transform 0.2s; } #wmap.v4 .wm3-tab span { opacity: 0; transition: opacity 0.2s ease; white-space: nowrap; } #wmap.v4 .wm3-tabs:hover .wm3-tab { width: 158px; } #wmap.v4 .wm3-tabs:hover .wm3-tab span { opacity: 1; } #wmap.v4.small .wm3-tabs { display: none; } #wmap.v4.hov .wm3-pin.hov .wm3-boss { opacity: 0; } /* (over the popped model; its card shows the boss) */ /* the popped model rises over its neighbours' tags (the user: "แมพเด้งขึ้นก็โดนตัวหนังสือแมพอื่นบัง"): while a place is hovered the other tags, rings and pins step back almost out of sight */ #wmap.v4.hov .wm3-pin:not(.hov) :is(.wm3-plate, .wm3-boss, .wm3-dg, .wm3-fb, .wm3-rec) { opacity: 0.1 !important; } #wmap.v4.hov .wm3-pin:not(.hov) .wm3-you { opacity: 0.35; } /* the quest strip covered the glass domes on the back rim (the user: "ตรงนี้ก็โดนบัง"): on the war table it sits at the bottom, over the table's front edge */ #wmap.v4 .wm3-quest { top: auto; bottom: calc(16px * var(--k)); } #wmap.v4.small .wm3-quest { top: auto; bottom: calc(60px * var(--k)); } /* the land tabs (the user: "ตรงนี้ก็หลุดกรอบ" - the tab picture was shorter than the two lines): a dark leather pill with a thin brass edge drawn by CSS, as tall as its text, the text centred */ #wmap.v4 .wm3-tab { border: 0; border-image: none; filter: none; min-height: 42px; padding: 4px 10px 4px 5px; border-radius: 21px; align-items: center; background: linear-gradient(180deg, #3e2a18 0%, #24160b 100%); box-shadow: 0 0 0 1.5px #a07434, 0 0 0 3px rgba(20, 10, 2, 0.5), inset 0 1px 0 rgba(255, 220, 150, 0.18), 0 3px 6px rgba(10, 5, 1, 0.5); } #wmap.v4 .wm3-tab.on { box-shadow: 0 0 0 2px #f0c46a, 0 0 12px color-mix(in srgb, var(--lc, #e8c46a) 80%, transparent), 0 3px 6px rgba(10, 5, 1, 0.5); filter: none; } #wmap.v4 .wm3-tab span { display: flex; flex-direction: column; justify-content: center; min-width: 0; } #wmap.v4 .wm3-tab b { font: 700 14px/1.4 'Mali', sans-serif; } #wmap.v4 .wm3-tab small { font: 700 11px/1.25 'Fredoka', 'Mali', sans-serif; margin-top: -2px; } #wmap.v4 .wm3-tab i { width: 32px; height: 32px; } #wmap.v4 .wm3-tabs:hover .wm3-tab { width: 168px; } /* the title plaque: one slim line above the domes (the user: "บัง" - it covered the domes on the back rim) */ #wmap.v4 .wm3-title { min-width: 300px; padding: 9px 76px 10px; border-image-width: 14px 60px 14px 60px; } #wmap.v4 .wm3-title b { font-size: 21px; line-height: 1.3; } #wmap.v4 .wm3-title small { display: none; }