/* 宝可梦3D世界 #/world/:id（js/steps/world.js）—— 全屏、一屏只有顶条＋底条，字都≥14px */
.wd { position: fixed; inset: 0; overflow: hidden; background: #2E2638; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* 下面好几个元素自己设了 display:grid/flex，会盖掉 hidden 属性：藏起来的词卡照样挡手指、藏起来的点照样显示 */
.wd [hidden] { display: none !important; }
.wd-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* 圆点：44px 的格子（真正判点中的是画布，按点的屏幕位置26px内算），里面一个小白点 */
.wd-dots { position: absolute; inset: 0; pointer-events: none; }
.wd-dot { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; pointer-events: none; }
.wd-dot b { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2.5px solid #4A3728; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.wd-dot.gold b { width: 16px; height: 16px; background: #FFC93C; animation: wdpulse 1.4s ease-in-out infinite; }
.wd-dot.sel b { box-shadow: 0 0 0 5px rgba(123, 201, 111, .85); }
@keyframes wdpulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 201, 60, .9); } 50% { box-shadow: 0 0 0 9px rgba(255, 201, 60, .15); } }

/* 顶条 */
.wd-top { position: absolute; left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px;
  background: rgba(255, 248, 239, .92); border: 2px solid #4A3728; border-radius: 16px; padding: 2px 4px; }
.wd-back { width: 44px; height: 44px; flex: none; border: 0; background: none; font: inherit; font-size: 30px; line-height: 1; color: #4A3728; }
.wd-title { flex: 1; min-width: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4A3728; }
.wd-book { flex: none; min-height: 40px; border: 2px solid #E6DCCB; border-radius: 12px; background: #fff; font: inherit; font-size: 15px; font-weight: 800; color: #4A3728; padding: 4px 10px; }

/* 找一找的题目条（只给声音，点对了才露出词） */
.wd-q { position: absolute; left: 50%; transform: translateX(-50%); top: calc(66px + env(safe-area-inset-top)); max-width: calc(100% - 24px); }
.wd-qb { display: flex; align-items: center; gap: 6px; border: 2px solid #4A3728; border-radius: 999px; background: #FFF1D6; font: inherit; font-size: 16px; font-weight: 800; color: #4A3728; padding: 8px 16px; min-height: 44px; white-space: nowrap; }
.wd-qw { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.wd-qw b { font-family: var(--en); font-size: 18px; }
.wd-qw small { font-size: 13px; font-weight: 700; color: #8a7560; }
.wd-qw small:empty { display: none; }

.wd-hint, .wd-load { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); background: rgba(46, 38, 56, .78); color: #fff; font-size: 16px; font-weight: 800; border-radius: 999px; padding: 10px 18px; white-space: nowrap; pointer-events: none; transition: opacity .6s; }
.wd-hint { top: 30%; }
.wd-hint.gone { opacity: 0; }
.wd-load { background: #4A3728; }

/* 词卡：盖在底条上（底条那一块本来就不放东西，画面中间的物件不被挡） */
.wd-card { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); min-height: 102px; background: #FFF8EF; border: 2.5px solid #4A3728; border-radius: 20px;
  padding: 12px 48px 12px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; box-shadow: 0 6px 0 rgba(74, 55, 40, .25); }
.wd-en { grid-column: 1; font-size: 28px; line-height: 1.15; color: #4A3728; overflow-wrap: anywhere; }
.wd-zh { grid-column: 1; font-size: 17px; color: #6f6252; }
.wd-sub { grid-column: 1; font-size: 14px; color: #B5602A; font-weight: 800; }
.wd-sub:empty { display: none; }
.wd-again { grid-column: 2; grid-row: 1 / span 3; border: 2px solid #4A3728; border-radius: 14px; background: #fff; font: inherit; font-size: 15px; font-weight: 800; color: #4A3728; padding: 10px 8px; min-height: 44px; }
.wd-x { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: none; font: inherit; font-size: 18px; color: #8B7A63; }

/* 底条：一排地点＋一个绿按钮 */
.wd-bot { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.wd-places { display: flex; gap: 6px; justify-content: center; }
.wd-pl { flex: 1 1 0; min-width: 0; min-height: 44px; border: 2px solid #4A3728; border-radius: 14px; background: rgba(255, 248, 239, .92); font: inherit; font-size: 15px; font-weight: 800; color: #4A3728; padding: 4px 2px; white-space: nowrap; }
.wd-pl.on { background: #FFC93C; }
.wd-find { padding: 10px; font-size: 20px; }
.wd-find.off { background: #fff; color: #4A3728; box-shadow: 0 4px 0 #CDBFA8; border: 2px solid #4A3728; }

/* 词册 */
.wd-panel { position: absolute; left: 10px; right: 10px; top: calc(64px + env(safe-area-inset-top)); bottom: calc(10px + env(safe-area-inset-bottom)); overflow-y: auto; touch-action: pan-y;
  background: #FFF8EF; border: 2.5px solid #4A3728; border-radius: 20px; padding: 12px; }
.wd-ph { position: relative; padding: 6px 44px 10px 4px; font-size: 17px; color: #4A3728; }
.wd-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.wd-it { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; border: 2px solid #4A3728; border-radius: 14px; background: #fff; font: inherit; color: #4A3728; padding: 6px 4px; }
.wd-it b { font-size: 16px; overflow-wrap: anywhere; text-align: center; }
.wd-it small { font-size: 14px; color: #8B7A63; }
.wd-it.gold { background: #FFF1D6; border-color: #E0A800; }
.wd-it.off { border-style: dashed; border-color: #CDBFA8; opacity: .7; }
.wd-hid { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: #4A3728; }
.wd-hid > b { width: 100%; }
.wd-hm { min-width: 64px; min-height: 48px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #CDBFA8; border-radius: 14px; font-size: 18px; font-weight: 800; color: #8B7A63; padding: 4px 8px; }
.wd-hm.on { border: 2px solid #4A3728; background: #FFF1D6; color: #4A3728; font-size: 16px; }
.wd-hm small { font-size: 14px; color: #8B7A63; }

/* KET 页签上的「3D世界」一行（只有有图的世界才出） */
.kt-3d { display: flex; gap: 10px; }
.kt-wd { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px; border: 2.5px solid #4A3728; border-radius: 16px; background: #fff; font: inherit; color: #4A3728; text-align: left; text-decoration: none; }
.kt-wd i { font-style: normal; font-size: 28px; line-height: 1; }
.kt-wd b { display: block; font-size: 15px; }
.kt-wd small { display: block; font-size: 14px; color: #8B7A63; }
.kt-wd.wait { border-style: dashed; border-color: #CDBFA8; }