:root {
  --ink: #24221f;
  --muted: #777166;
  --paper: #fffaf0;
  --paper-2: #f5ecd9;
  --line: #d7c8aa;
  --red: #e6554f;
  --red-dark: #a92f34;
  --green: #6c9b58;
  --blue: #4d86c8;
  --gold: #e2a83e;
  --purple: #8b5ac6;
  --shadow: 0 12px 30px rgba(54, 42, 25, .16);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #171a22; }

body {
  overflow: hidden;
  color: var(--ink);
  font-family: "Pretendard", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }

.app {
  width: min(100%, 480px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(circle at 80% 0%, rgba(255, 220, 136, .28), transparent 28%),
    linear-gradient(180deg, #f9f1df 0%, #fffaf1 58%, #f3e6ce 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 70px rgba(0,0,0,.45);
}

.topbar {
  z-index: 20;
  min-height: 72px;
  padding: max(12px, env(safe-area-inset-top)) 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(77, 61, 39, .14);
  background: rgba(255, 250, 240, .86);
  backdrop-filter: blur(15px);
}

.kicker {
  display: block;
  margin-bottom: 2px;
  color: #8c7558;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

h1, h2, h3, p { margin: 0; }

h1 { font-size: 21px; line-height: 1.05; letter-spacing: -.04em; }
h2 { font-size: 22px; letter-spacing: -.045em; }
h3 { font-size: 15px; letter-spacing: -.025em; }

.power-badge {
  min-width: 92px;
  padding: 8px 11px;
  display: grid;
  gap: 1px;
  text-align: right;
  border: 2px solid #332d26;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 0 #c9b58e;
}

.power-badge span { color: var(--muted); font-size: 9px; font-weight: 800; }
.power-badge strong { color: var(--red-dark); font-size: 17px; line-height: 1; }

.view {
  min-height: 0;
  overflow: hidden;
  display: none;
  padding: 12px 12px 8px;
}

.view.active { display: flex; flex-direction: column; animation: view-in .22s ease-out; }

@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }

.match-strip {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 9px;
}

.match-strip > div,
.enemy-picker {
  flex: 1;
  padding: 8px 11px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.72);
}

.enemy-picker { cursor: pointer; box-shadow: inset 0 -2px rgba(99, 71, 35, .1); }
.match-strip small { display: block; color: var(--muted); font-size: 9px; font-weight: 800; }
.match-strip strong { display: block; margin-top: 2px; font-size: 12px; }

.arena {
  flex: 1 1 auto;
  min-height: 410px;
  max-height: 620px;
  overflow: hidden;
  position: relative;
  border: 3px solid #322b24;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(56,38,17,.08)),
    url("assets/jurassic-arena-v1.png") center center / cover no-repeat;
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255,255,255,.25);
  isolation: isolate;
}

/* 시대 배경은 한 장면으로 묶어 인물과 땅이 따로 노는 느낌을 없앤다. */
.arena-sky,
.arena-hills,
.arena-ground { display: none; }

.arena-sky {
  position: absolute;
  inset: 0 0 53%;
  background: linear-gradient(180deg, #8cc7ce, #d9ead4);
}

.arena-sky::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  right: 26px;
  top: 35px;
  border-radius: 50%;
  background: #ffe79b;
  box-shadow: 0 0 0 14px rgba(255,235,157,.18);
}

.arena-sky i {
  position: absolute;
  width: 70px;
  height: 18px;
  border-radius: 100px;
  background: rgba(255,255,255,.72);
  animation: cloud-drift 15s linear infinite;
}

.arena-sky i::before,
.arena-sky i::after {
  content: "";
  position: absolute;
  bottom: 3px;
  border-radius: 50%;
  background: inherit;
}

.arena-sky i::before { width: 28px; height: 28px; left: 12px; }
.arena-sky i::after { width: 35px; height: 35px; right: 10px; }
.arena-sky i:nth-child(1) { top: 58px; left: -80px; }
.arena-sky i:nth-child(2) { top: 105px; left: -150px; transform: scale(.7); animation-delay: -8s; }
.arena-sky i:nth-child(3) { top: 145px; left: -100px; transform: scale(.48); animation-delay: -4s; }

@keyframes cloud-drift { to { left: 115%; } }

.arena-hills {
  position: absolute;
  left: -8%; right: -8%; top: 34%; height: 30%;
  background:
    radial-gradient(ellipse at 12% 100%, #4f8756 0 38%, transparent 39%),
    radial-gradient(ellipse at 38% 100%, #6a9e5d 0 46%, transparent 47%),
    radial-gradient(ellipse at 68% 100%, #568c57 0 42%, transparent 43%),
    radial-gradient(ellipse at 94% 100%, #77a768 0 40%, transparent 41%);
}

.arena-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 39%;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.18), transparent 50%),
    repeating-linear-gradient(174deg, transparent 0 28px, rgba(111,76,31,.1) 29px 30px),
    #d7b16b;
}

.arena-ground::before,
.arena-ground::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 14px;
  border-radius: 50%;
  background: rgba(80, 53, 25, .16);
  bottom: 62px;
}

.arena-ground::before { left: 34px; }
.arena-ground::after { right: 34px; }

.hp-panel {
  position: absolute;
  z-index: 5;
  top: 13px;
  width: calc(50% - 27px);
}

.player-hp-panel { left: 12px; }
.enemy-hp-panel { right: 12px; }

.hp-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 4px;
  color: #24221f;
  text-shadow: 0 1px rgba(255,255,255,.7);
}

.hp-label strong { font-size: 12px; }
.hp-label span { font-size: 9px; font-weight: 900; }

.hp-track {
  height: 16px;
  overflow: hidden;
  position: relative;
  border: 2px solid #2e2822;
  border-radius: 8px;
  background: #493e37;
  box-shadow: 0 2px 0 rgba(255,255,255,.35);
}

.hp-track i,
.hp-track b {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transition: width .25s ease;
}

.hp-track i { background: linear-gradient(180deg, #ff7c69, #d94043); }
.hp-track i::after { content: ""; position: absolute; inset: 1px 2px 55%; border-radius: 10px; background: rgba(255,255,255,.35); }
.hp-track b { z-index: 2; background: linear-gradient(90deg, rgba(96,198,255,.72), rgba(187,237,255,.92)); mix-blend-mode: screen; }

.mini-stats { display: flex; justify-content: space-between; padding: 3px 3px 0; font-size: 9px; font-weight: 900; }

.fighter {
  position: absolute;
  z-index: 4;
  bottom: 55px;
  width: 43%;
  aspect-ratio: 1.1;
  transform-origin: 50% 88%;
  transition: filter .15s;
}

.fighter-player { left: 2%; }
.fighter-enemy { right: 2%; }

.fighter img {
  position: absolute;
  z-index: 2;
  width: 128%;
  height: 128%;
  left: -14%;
  top: -14%;
  object-fit: contain;
  filter: drop-shadow(0 5px 2px rgba(65,42,24,.18));
  user-select: none;
  pointer-events: none;
}

.fighter-enemy img { transform: scaleX(-1); filter: sepia(.12) hue-rotate(310deg) saturate(1.15) drop-shadow(0 5px 2px rgba(65,42,24,.18)); }

.fighter-shadow {
  position: absolute;
  z-index: 1;
  left: 15%; right: 15%; bottom: 3%; height: 12%;
  border-radius: 50%;
  background: rgba(64,43,25,.22);
  filter: blur(2px);
}

.fighter.attacking { animation: player-bite .38s cubic-bezier(.24,.9,.35,1); }
.fighter-enemy.attacking { animation-name: enemy-bite; }
.fighter.hit { animation: hit-left .28s ease-out; filter: brightness(1.18) sepia(.55) saturate(2); }
.fighter-enemy.hit { animation-name: hit-right; }
.fighter.blocked { animation: block-pop .28s ease-out; }
.fighter.dodged { animation: dodge-left .34s ease-out; }
.fighter-enemy.dodged { animation-name: dodge-right; }
.fighter.defeated { animation: defeat .7s ease-in forwards; }
.fighter.winner { animation: winner-bob .5s ease-in-out 3; }

@keyframes player-bite { 0%,100% { transform: translateX(0) rotate(0); } 42% { transform: translateX(32px) rotate(2deg) scale(1.035,.97); } }
@keyframes enemy-bite { 0%,100% { transform: translateX(0) rotate(0); } 42% { transform: translateX(-32px) rotate(-2deg) scale(1.035,.97); } }
@keyframes hit-left { 35% { transform: translateX(-13px) rotate(-4deg); } }
@keyframes hit-right { 35% { transform: translateX(13px) rotate(4deg); } }
@keyframes block-pop { 45% { transform: scale(.94); filter: brightness(1.3); } }
@keyframes dodge-left { 45% { transform: translateX(-22px) translateY(-5px); } }
@keyframes dodge-right { 45% { transform: translateX(22px) translateY(-5px); } }
@keyframes defeat { to { transform: translateY(22px) rotate(-9deg) scaleY(.72); filter: grayscale(.6); opacity: .65; } }
@keyframes winner-bob { 50% { transform: translateY(-10px) rotate(-2deg); } }

.bite-word {
  position: absolute;
  z-index: 7;
  top: 18%;
  right: -3px;
  opacity: 0;
  padding: 4px 8px;
  color: #33271f;
  font-size: 18px;
  font-weight: 1000;
  transform: rotate(-9deg) scale(.6);
  text-shadow: 0 2px #fff;
}

.fighter-enemy .bite-word { right: auto; left: -3px; transform: rotate(9deg) scale(.6); }
.fighter.attacking .bite-word { animation: bite-word .35s ease-out; }
@keyframes bite-word { 35% { opacity: 1; transform: rotate(-5deg) scale(1.25); } 100% { opacity: 0; transform: translateY(-15px) scale(.9); } }

.status-icons {
  position: absolute;
  z-index: 8;
  top: 2%; left: 20%; right: 20%;
  min-height: 22px;
  display: flex;
  justify-content: center;
  gap: 3px;
}

.status-icons span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid rgba(44,36,29,.65);
  border-radius: 8px;
  background: rgba(255,255,255,.88);
  font-size: 9px;
  font-weight: 900;
}

.versus-mark {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 32%;
  width: 62px;
  transform: translateX(-50%) rotate(-4deg);
  text-align: center;
}

.versus-mark b { display: block; color: #fff6d2; font-size: 27px; -webkit-text-stroke: 2px #3b2c24; text-shadow: 0 4px #c75145; }
.versus-mark small { display: block; margin-top: 2px; padding: 3px; border-radius: 8px; background: rgba(255,255,255,.8); font-size: 8px; font-weight: 900; }

.battle-callout {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 21%;
  width: min(72%, 280px);
  padding: 8px 13px;
  transform: translateX(-50%);
  text-align: center;
  border: 2px solid #3d342b;
  border-radius: 999px;
  background: rgba(255,251,235,.93);
  box-shadow: 0 4px 0 rgba(65,48,30,.18);
  font-size: 11px;
  font-weight: 900;
  transition: .18s;
}

.battle-callout.pop { transform: translateX(-50%) scale(1.06); background: #fff2a8; }

.battle-clock {
  position: absolute;
  z-index: 6;
  left: 50%; bottom: 17px;
  transform: translateX(-50%);
  text-align: center;
}

.battle-clock span { display: block; min-width: 58px; padding: 5px 8px; border-radius: 10px; background: #2e2a27; color: #fff; font-size: 11px; font-weight: 900; }
.battle-clock i { display: block; width: 2px; height: 20px; margin: 0 auto; background: rgba(48,39,29,.35); }

.fx-layer { position: absolute; z-index: 9; inset: 0; pointer-events: none; overflow: hidden; }

.float-number {
  position: absolute;
  z-index: 20;
  width: 110px;
  margin-left: -55px;
  text-align: center;
  color: #f33e3c;
  font-size: 20px;
  font-weight: 1000;
  -webkit-text-stroke: 1px #fff;
  text-shadow: 0 3px #69272a;
  animation: float-number .72s ease-out forwards;
}

.float-number.critical { color: #ffc944; font-size: 27px; text-shadow: 0 3px #9b3e22; }
.float-number.heal { color: #59ba68; text-shadow: 0 3px #2d6b3b; }
.float-number.block { color: #6fb9e7; text-shadow: 0 3px #2c607d; }
.float-number.miss { color: #fff; text-shadow: 0 3px #4e5f64; }

@keyframes float-number { 0% { opacity: 0; transform: translateY(12px) scale(.7); } 22% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-58px) scale(.9); } }

.skill-fx { position: absolute; z-index: 15; pointer-events: none; }
.skill-fx.meteor { width: 58px; height: 58px; border-radius: 50% 50% 45% 55%; background: radial-gradient(circle at 62% 35%, #fff1a8 0 12%, #ff9838 13% 43%, #cb3c32 44% 70%, #4d2920 71%); box-shadow: -20px -25px 0 -13px #ffdc61, -38px -42px 0 -22px #f36a35; animation: meteor-drop .52s ease-in forwards; }
.skill-fx.lightning { width: 34px; height: 120px; background: linear-gradient(115deg, transparent 0 39%, #fff6a4 40% 49%, #ffd540 50% 58%, transparent 59%); filter: drop-shadow(0 0 7px #fff05b); animation: lightning-flash .36s steps(2) forwards; }
.skill-fx.shield { width: 95px; height: 110px; border: 5px solid rgba(114,210,255,.9); border-radius: 50% 50% 42% 42%; background: radial-gradient(circle, rgba(190,239,255,.14), rgba(85,185,228,.28)); box-shadow: inset 0 0 20px rgba(255,255,255,.8), 0 0 14px #8cdbff; animation: shield-pop .55s ease-out forwards; }
.skill-fx.heal-ring { width: 80px; height: 30px; border: 5px solid #7bd37d; border-radius: 50%; animation: heal-ring .55s ease-out forwards; }
.skill-fx.poison { width: 85px; height: 85px; border-radius: 50%; background: radial-gradient(circle, rgba(167,84,198,.8), transparent 66%); animation: poison-puff .65s ease-out forwards; }

@keyframes meteor-drop { from { transform: translate(90px,-180px) rotate(0); } to { transform: translate(0,0) rotate(260deg); opacity: .2; } }
@keyframes lightning-flash { 0%,100% { opacity: 0; } 20%,70% { opacity: 1; transform: scaleX(1.2); } }
@keyframes shield-pop { 0% { transform: scale(.2); opacity: 0; } 35% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes heal-ring { from { transform: translateY(15px) scale(.5); opacity: 1; } to { transform: translateY(-35px) scale(1.4); opacity: 0; } }
@keyframes poison-puff { from { transform: scale(.25); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

.battle-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: .8fr 1.45fr .8fr;
  gap: 8px;
  padding-top: 10px;
}

.primary-button,
.secondary-button {
  min-height: 48px;
  border: 2px solid #322a24;
  border-radius: 15px;
  font-weight: 950;
  cursor: pointer;
}

.primary-button { color: #fff; background: linear-gradient(#ff6c58, #d94144); box-shadow: 0 5px 0 #8e2e34; font-size: 15px; }
.secondary-button { background: #fff9ec; box-shadow: 0 4px 0 #c5ad82; font-size: 11px; }
.primary-button:active, .secondary-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #8e2e34; }
.primary-button:disabled { filter: grayscale(.6); cursor: wait; }

.battle-hint { flex: 0 0 auto; padding: 8px 4px 0; text-align: center; color: var(--muted); font-size: 9px; font-weight: 700; }

.section-head {
  flex: 0 0 auto;
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.capacity-meter { display: grid; gap: 2px; text-align: right; font-size: 10px; }
.capacity-meter span { color: var(--muted); font-weight: 800; }
.capacity-meter strong { color: var(--red-dark); font-size: 12px; }

.deck-slots {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 5px;
  margin-bottom: 7px;
}

.deck-slots button {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid #c8b695;
  border-radius: 10px;
  background: rgba(255,255,255,.68);
  cursor: pointer;
}

.deck-slots button.active { border-color: #4a3d31; background: #4a3d31; color: #fff; }
.deck-slots button b, .deck-slots button span { display: block; }
.deck-slots button b { font-size: 9px; }
.deck-slots button span { margin-top: 1px; color: #8a7b68; font-size: 7px; }
.deck-slots button.active span { color: #e7d9c3; }
.deck-slots .save-deck { padding-inline: 10px; background: #e8c86f; font-size: 8px; font-weight: 900; }

.rune-board-wrap {
  flex: 0 0 auto;
  padding: 9px;
  border: 2px solid #43372c;
  border-radius: 18px;
  background: linear-gradient(145deg, #e9dac0, #fff8e8);
  box-shadow: 0 5px 0 #b79d74;
}

.board-status { display: flex; justify-content: space-between; align-items: center; padding: 0 3px 5px; font-size: 8px; font-weight: 900; }
.board-status span { color: #695b49; }
.board-status strong { color: #a5473d; }

.rune-board {
  position: relative;
  height: 205px;
  overflow: hidden;
  border: 1px solid rgba(81,62,39,.28);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 49%, rgba(255,229,145,.46) 0 8%, transparent 9%),
    radial-gradient(ellipse at center, rgba(255,255,255,.48), transparent 68%),
    repeating-linear-gradient(115deg, rgba(98,73,41,.035) 0 2px, transparent 2px 14px),
    #d8c39c;
  box-shadow: inset 0 0 22px rgba(75,51,24,.18);
}

.rune-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.deck-link { stroke: rgba(77,62,43,.18); stroke-width: 1.1; }
.deck-link.weak { stroke: rgba(74,64,50,.34); stroke-width: 1.35; }
.deck-link.lineage { stroke: #8e806d; stroke-width: 1.6; }
.deck-link.fusion { stroke: #5f9e8a; stroke-width: 2.2; filter: drop-shadow(0 0 2px rgba(95,158,138,.55)); }
.deck-link.focus { stroke: #d8843f; stroke-width: 2.7; filter: drop-shadow(0 0 3px rgba(216,132,63,.7)); }

.rune-slot,
.rune-card {
  position: relative;
  overflow: hidden;
  border: 2px solid #4a4036;
  background: #fffdf6;
}

.rune-slot {
  position: absolute;
  z-index: 2;
  width: 43px;
  height: 43px;
  transform: translate(-50%,-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(74,55,31,.25);
}

.rune-slot::before { content: attr(data-index); color: rgba(69,59,48,.23); font-size: 11px; font-weight: 900; }
.rune-slot.filled::before { display: none; }
.rune-slot.core-slot { width: 54px; height: 54px; border-width: 3px; box-shadow: 0 0 0 5px rgba(255,224,128,.28), 0 4px 0 rgba(74,55,31,.3); }
.rune-slot.core-slot:not(.filled)::after { content:"시조"; position:absolute; bottom:6px; font-size:6px; font-weight:900; color:#8b7455; }
.rune-slot.active-slot { outline: 4px solid rgba(240,171,64,.88); outline-offset: 2px; }
.rune-slot .rune-symbol { display:grid; place-items:center; width:25px; height:25px; border-radius:48% 52% 44% 56%; background:#796750; color:#fff; font-size:10px; font-weight:1000; box-shadow:inset 0 -3px rgba(0,0,0,.13); }
.rune-slot small { position: absolute; left: -6px; right: -6px; bottom: -11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font-size: 6px; font-weight: 900; text-shadow:0 1px #fff,0 -1px #fff; }
.rune-slot .cost-dot { position: absolute; right: 3px; top: 3px; min-width: 16px; padding: 1px 3px; border-radius: 8px; background: #2e2822; color: #fff; font-size: 7px; font-weight: 900; }
.rune-slot .socket-mark { position:absolute; left:3px; top:4px; z-index:2; }

.rune-board-wrap > p { margin-top: 7px; text-align: center; color: #756956; font-size: 8px; font-weight: 700; }

.deck-traits { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:7px; }
.deck-traits span { min-width:0; padding:4px 5px; border-radius:8px; background:rgba(255,255,255,.58); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:6px; color:#635744; }
.deck-traits b { display:block; margin-bottom:1px; color:#9a6f32; font-size:6px; }

.rune-inspector { flex:0 0 auto; min-height:49px; display:flex; align-items:center; gap:8px; margin-top:8px; padding:7px 9px; border:1px solid #d0b98e; border-radius:13px; background:rgba(255,255,255,.68); }
.rune-inspector > div { min-width:0; flex:1; }
.rune-inspector span { display:block; color:#9b8261; font-size:7px; font-weight:900; }
.rune-inspector strong { display:block; margin-top:1px; font-size:10px; }
.rune-inspector p { margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#776b5b; font-size:7px; }
.rune-inspector button { flex:0 0 auto; padding:7px 9px; border:0; border-radius:9px; background:#4b4036; color:#fff; font-size:8px; font-weight:900; cursor:pointer; }
.rune-inspector button:disabled { opacity:.3; cursor:default; }

.preset-row {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 1px 8px;
  scrollbar-width: none;
}
.preset-row::-webkit-scrollbar { display: none; }
.preset-row button { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #bda989; border-radius: 999px; background: rgba(255,255,255,.8); font-size: 9px; font-weight: 900; cursor: pointer; }
.preset-row button.active { border-color: #392f27; background: #3b342e; color: #fff; }

.inventory-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 2px 6px; }
.inventory-head h3 b { color:#b3473e; }
.inventory-head input { width:132px; padding:6px 9px; border:1px solid #cbb997; border-radius:10px; background:#fffdf7; font-size:8px; outline:none; }
.inventory-head input:focus { border-color:#8d673e; box-shadow:0 0 0 2px rgba(141,103,62,.15); }
.filters { flex:0 0 auto; display: flex; gap: 3px; overflow-x:auto; padding:0 1px 6px; scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.filters button { padding: 5px 8px; border: 0; border-radius: 9px; background: #e5d7bd; color: #796b58; font-size: 8px; font-weight: 900; cursor: pointer; }
.filters button.active { background: #3e3731; color: #fff; }

.branch-filters { flex:0 0 auto; display:flex; gap:4px; overflow-x:auto; padding:0 1px 5px; scrollbar-width:none; }
.branch-filters::-webkit-scrollbar { display:none; }
.branch-filters button { flex:0 0 auto; padding:5px 8px; border:1px solid #c9b694; border-radius:999px; background:rgba(255,255,255,.66); color:#6f6252; font-size:7px; font-weight:900; cursor:pointer; }
.branch-filters button.active { border-color:#473b31; background:#473b31; color:#fff; }

.socket-filters { flex:0 0 auto; display:flex; gap:4px; overflow-x:auto; padding:0 1px 5px; scrollbar-width:none; }
.socket-filters::-webkit-scrollbar { display:none; }
.socket-filters button { flex:0 0 auto; display:flex; align-items:center; gap:4px; padding:4px 7px; border:1px solid #c9b694; border-radius:9px; background:rgba(255,255,255,.68); color:#6f6252; font-size:7px; font-weight:900; cursor:pointer; }
.socket-filters button.active { border-color:#473b31; background:#473b31; color:#fff; }

.socket-mark { display:inline-block; width:11px; height:11px; background:#9a8467; box-shadow:inset 0 -2px rgba(0,0,0,.15); }
.socket-claw { background:#bd6551; clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%); }
.socket-leaf { background:#6f9c63; border-radius:100% 0 100% 0; transform:rotate(45deg); }
.socket-ember { background:#dc8a3f; clip-path:polygon(50% 0,92% 62%,50% 100%,8% 62%); }
.socket-shell { background:#5c8fa4; border-radius:50%; box-shadow:inset 0 0 0 3px rgba(255,255,255,.46); }
.socket-wind { background:#8172a8; border-radius:50% 10% 50% 10%; transform:skewX(-18deg); }

.rune-inventory {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 7px;
  padding: 0 1px 14px;
  scrollbar-color: #ad9876 transparent;
}

.rune-card {
  min-height: 108px;
  padding: 8px 7px 6px;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 #c8b38e;
}

.rune-card.selected { outline: 3px solid #ffba49; transform: translateY(-1px); }
.rune-card .rune-symbol { display:grid; place-items:center; width:27px; height:27px; border-radius:48% 52% 45% 55%; background:#796750; color:#fff; font-size:10px; line-height:1; font-weight:1000; box-shadow:inset 0 -3px rgba(0,0,0,.13); }
.rune-card > .socket-mark { position:absolute; left:39px; top:12px; }
.rune-card strong { display: block; margin-top: 5px; font-size: 10px; }
.rune-card p { margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.35; font-weight: 700; }
.rune-card .rune-blueprint { display:block; margin-top:4px; color:var(--branch,#806d56); font-size:6px; font-weight:900; }
.rune-card .rune-meta { position: absolute; top: 6px; right: 6px; display: grid; gap: 2px; text-align: right; }
.rune-card .rune-meta b { font-size: 7px; }
.rune-card .rune-meta span { font-size: 7px; color: var(--muted); }

.grade-white { --grade: #eee8dc; }
.grade-green { --grade: #80bc78; }
.grade-blue { --grade: #6aa5df; }
.grade-yellow { --grade: #e5b64d; }
.grade-red { --grade: #e3645d; }
.grade-purple { --grade: #9a6bd0; }
.rune-card::after, .rune-slot.filled::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--grade); }

.rune-card.locked { filter:saturate(.35); background:#e7e0d3; border-style:dashed; box-shadow:0 2px 0 #b9ab96; }
.rune-card.locked::after { opacity:.45; }
.locked-silhouette { display:grid; place-items:center; width:29px; height:29px; border-radius:50% 46% 53% 42%; background:#aaa091; color:#e9e3d8; font-size:15px; font-weight:1000; }
.empty-catalog { grid-column:1/-1; padding:22px; text-align:center; color:#847766; font-size:9px; font-weight:800; }

.branch-fang { --branch:#c85b45; }
.branch-storm { --branch:#5a8fd8; }
.branch-shell { --branch:#66866c; }
.branch-blood { --branch:#c14f68; }
.branch-meteor { --branch:#d58b3d; }
.branch-venom { --branch:#8d6aae; }
.branch-luck { --branch:#4da989; }
.branch-roar { --branch:#a76548; }
.branch-egg { --branch:#c5a34b; }
.branch-ancient { --branch:#6f6d9d; }

.text-button { padding: 8px 10px; border: 1px solid #bca98b; border-radius: 10px; background: rgba(255,255,255,.72); font-size: 9px; font-weight: 900; cursor: pointer; }

.result-card {
  flex: 0 0 auto;
  min-height: 98px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 2px solid #3f352c;
  border-radius: 19px;
  background: linear-gradient(135deg, #fff8dc, #f3d889);
  box-shadow: 0 5px 0 #b59a69;
}

.result-card.loss { background: linear-gradient(135deg, #f7eeee, #dfb9b7); }
.result-card.empty { filter: grayscale(.45); }
.result-seal { flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; border: 3px solid #382f28; border-radius: 50%; background: #fff; font-size: 28px; font-weight: 1000; box-shadow: inset 0 -5px #d6c6a6; }
.result-card small { color: var(--muted); font-size: 9px; font-weight: 900; }
.result-card h3 { margin-top: 3px; font-size: 17px; }
.result-card p { margin-top: 4px; color: #6f6255; font-size: 9px; line-height: 1.4; }

.metric-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  padding: 10px 0;
}

.metric-card { min-height: 62px; padding: 9px 10px; border: 1px solid #d2c1a4; border-radius: 14px; background: rgba(255,255,255,.74); }
.metric-card span { display: block; color: var(--muted); font-size: 8px; font-weight: 800; }
.metric-card strong { display: block; margin-top: 3px; font-size: 16px; }
.metric-card small { font-size: 8px; color: #9a8263; }

.reason-card {
  flex: 0 0 auto;
  padding: 12px;
  border: 1px solid #d3c2a7;
  border-radius: 16px;
  background: rgba(255,255,255,.7);
}

.reason-card ul { margin: 8px 0 0; padding-left: 18px; color: #5e554c; font-size: 10px; line-height: 1.65; font-weight: 700; }

.analysis-card-title span,
.duel-compare-card header span { color:#c7ab70; font-size:7px; font-weight:1000; letter-spacing:.15em; }
.analysis-card-title h3,
.duel-compare-card header strong { display:block; margin-top:2px; font-size:12px; }
.duel-compare-card,.rune-impact-card,.growth-prescription {
  flex:0 0 auto;
  margin-bottom:9px;
  padding:12px;
  border:1px solid rgba(240,205,128,.18);
  border-radius:7px 14px;
  color:#f2e5c3;
  background:rgba(28,32,24,.9);
  box-shadow:0 3px 0 rgba(12,14,10,.62);
}
.duel-compare-card header { display:flex; align-items:end; justify-content:space-between; }
.duel-compare-card header small { color:#92876d; font-size:7px; }
.duel-compare-list { display:grid; gap:9px; margin-top:11px; }
.duel-compare-row { display:grid; gap:3px; }
.compare-label,.compare-sides { display:flex; align-items:center; justify-content:space-between; }
.compare-label b { font-size:8px; }
.compare-label span,.compare-sides small { color:#a99c7d; font-size:7px; font-weight:800; }
.compare-track { position:relative; height:11px; overflow:hidden; border-radius:6px; background:#151812; }
.compare-track::after { content:""; position:absolute; inset:0 auto 0 50%; width:1px; background:#82765e; }
.compare-track i { position:absolute; top:0; bottom:0; min-width:2px; transition:width .5s ease; }
.compare-track .mine { right:50%; background:linear-gradient(90deg,#d88935,#ffd77a); }
.compare-track .theirs { left:50%; background:linear-gradient(90deg,#b85d58,#713c43); }
.rune-impact-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }
.rune-impact-grid>article { min-width:0; padding:8px; border:1px solid rgba(246,211,139,.13); border-radius:6px 11px; background:#20241b; }
.rune-impact-grid header { display:flex; align-items:center; justify-content:space-between; gap:4px; margin-bottom:7px; }
.rune-impact-grid header span { color:#c49348; font-size:6px; font-weight:1000; }
.rune-impact-grid header b { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.rune-impact-row { display:flex; align-items:center; gap:6px; padding:5px 0; border-top:1px solid rgba(255,255,255,.05); }
.rune-impact-row>span { flex:0 0 17px; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; color:#382819; background:#d6a858; font-size:7px; font-weight:1000; }
.rune-impact-row div { min-width:0; }
.rune-impact-row strong,.rune-impact-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rune-impact-row strong { font-size:8px; }
.rune-impact-row small,.no-rune-impact { color:#94896f; font-size:6px; }
.growth-advice-list { display:grid; gap:7px; margin-top:10px; }
.growth-advice-list article { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:7px; padding:8px; border:1px solid rgba(244,208,132,.12); border-radius:7px 12px; background:#20241b; }
.advice-number { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#2e2417; background:linear-gradient(#f2cc72,#b97732); font-size:9px; font-weight:1000; }
.growth-advice-list strong { font-size:9px; }
.growth-advice-list p { margin-top:2px; color:#a99d80; font-size:7px; line-height:1.45; }
.growth-advice-list button { padding:7px 8px; border:1px solid #846a3b; border-radius:6px 10px; color:#fff0c8; background:linear-gradient(#755631,#453a2a); font-size:7px; font-weight:1000; cursor:pointer; }

.battle-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin-top: 9px;
  border: 1px solid #d3c2a7;
  border-radius: 14px;
  background: rgba(255,255,255,.62);
}

.battle-log summary { padding: 11px 12px; font-size: 10px; font-weight: 900; cursor: pointer; }
.battle-log[open] { overflow-y: auto; }
.battle-log ol { margin: 0; padding: 0 12px 15px 32px; color: #61584f; font-size: 9px; line-height: 1.6; }

.bottom-nav {
  z-index: 30;
  min-height: 68px;
  padding: 7px 18px max(7px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid rgba(68,53,36,.18);
  background: rgba(255, 250, 240, .93);
  backdrop-filter: blur(16px);
}

.bottom-nav button {
  min-height: 50px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #897b69;
  cursor: pointer;
}

.bottom-nav button span { font-size: 19px; line-height: 1; }
.bottom-nav button b { font-size: 9px; }
.bottom-nav button.active { color: #fff; background: #3b342e; box-shadow: 0 4px 0 #b89462; }

@media (max-height: 720px) {
  .topbar { min-height: 60px; padding-top: max(7px, env(safe-area-inset-top)); }
  h1 { font-size: 18px; }
  .arena { min-height: 355px; }
  .fighter { bottom: 43px; }
  .battle-actions { padding-top: 6px; }
  .primary-button, .secondary-button { min-height: 42px; }
  .battle-hint { display: none; }
  .rune-board-wrap { padding: 7px; }
  .rune-board { height: 145px; }
  .rune-slot { width: 37px; height: 37px; }
  .rune-slot.core-slot { width: 47px; height: 47px; }
  .deck-traits, .rune-board-wrap > p { display:none; }
  .rune-inspector { min-height: 36px; margin-top: 5px; padding-block:4px; }
  .rune-inspector p { display:none; }
  .preset-row { padding-block: 5px 4px; }
  .preset-row button { padding-block:5px; }
  .inventory-head { padding-block:2px 4px; }
  .branch-filters, .filters { padding-bottom:4px; }
  .rune-card { min-height: 86px; }
}

@media (min-width: 700px) {
  body { padding: 18px 0; }
  .app { height: calc(100dvh - 36px); border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* v7 — 카드형 웹 UI를 줄이고, 하나의 원시 세계 위에 HUD가 얹힌 게임 화면으로 통일한다. */
:root {
  --hud: rgba(31, 35, 27, .88);
  --hud-2: rgba(57, 55, 40, .9);
  --bone: #f7e7c0;
  --amber: #f4b948;
  --amber-dark: #8a4b20;
  --moss: #66824d;
  --stone-edge: #181b15;
  --game-shadow: 0 8px 0 rgba(22, 19, 13, .38), 0 16px 32px rgba(0, 0, 0, .28);
}

.app {
  background: #22261c;
}

.app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 199, 88, .08), transparent 24%),
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 20% 80%, rgba(0,0,0,.06));
}

.topbar {
  min-height: 66px;
  padding: max(10px, env(safe-area-inset-top)) 14px 9px;
  color: var(--bone);
  border: 0;
  border-bottom: 3px solid rgba(15, 17, 13, .82);
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 20% 80%, rgba(0,0,0,.12)),
    linear-gradient(180deg, #3c4431, #242a20);
  box-shadow: 0 4px 0 rgba(108, 83, 47, .85), 0 8px 18px rgba(0,0,0,.28);
  backdrop-filter: none;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 3px;
  height: 1px;
  background: rgba(255, 226, 161, .22);
}

.topbar .kicker { color: #b9ae8c; font-size: 8px; }
.topbar h1 { color: #fff4d3; text-shadow: 0 2px 0 #161a13; }

.power-badge {
  position: relative;
  min-width: 102px;
  padding: 7px 12px 7px 28px;
  color: var(--bone);
  border: 1px solid rgba(255, 225, 154, .25);
  border-radius: 8px 16px 8px 16px;
  background: linear-gradient(145deg, #161a15, #3c4031);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 3px 0 #12140f;
}

.power-badge::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 12px;
  height: 20px;
  transform: translateY(-50%) rotate(38deg);
  border-radius: 90% 10% 90% 10%;
  background: linear-gradient(135deg, #ffe88a, #c36d2d);
  box-shadow: 0 0 10px rgba(244,185,72,.45);
}

.power-badge span { color: #b9ae8c; }
.power-badge strong { color: #ffd96e; text-shadow: 0 1px #4d2818; }

.view { z-index: 1; padding: 10px 10px 7px; }

#battleView {
  background: linear-gradient(180deg, #343b2e, #1c2119);
}

.match-strip { margin: 0 2px 7px; gap: 6px; }
.match-strip > div,
.enemy-picker {
  position: relative;
  overflow: hidden;
  padding: 7px 10px 8px 13px;
  color: #f9ebc7;
  border: 1px solid rgba(244, 207, 129, .26);
  border-radius: 7px 14px 7px 14px;
  background: linear-gradient(145deg, rgba(28,32,24,.96), rgba(66,64,45,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 3px 0 #151812;
}

.match-strip > div::before,
.enemy-picker::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 4px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(#ffd974, #995323);
}

.match-strip small { color: #bdb190; }
.match-strip strong { color: #fff1c9; letter-spacing: -.02em; }

.arena {
  border: 2px solid #12140f;
  border-radius: 13px 22px 13px 22px;
  box-shadow: inset 0 0 0 2px rgba(255,232,177,.14), 0 7px 0 #11130f, 0 13px 25px rgba(0,0,0,.35);
}

.arena::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,15,11,.2), transparent 14% 86%, rgba(12,15,11,.2)),
    linear-gradient(180deg, rgba(0,0,0,.12), transparent 18% 72%, rgba(0,0,0,.2));
  box-shadow: inset 0 0 35px rgba(11,14,9,.2);
}

.hp-panel { top: 11px; z-index: 7; }
.hp-label { color: #fff5d8; text-shadow: 0 2px #22251c, 0 0 6px #171911; }
.hp-track { height: 14px; border-color: #151711; box-shadow: 0 2px 0 rgba(244,210,137,.3); }
.mini-stats {
  margin-top: 2px;
  padding: 2px 5px;
  color: #efe1bc;
  border-radius: 6px;
  background: rgba(24,27,21,.7);
  text-shadow: 0 1px #000;
}

.versus-mark small,
.battle-callout {
  color: #f8e9be;
  border-color: #181a14;
  background: linear-gradient(145deg, rgba(39,42,31,.95), rgba(81,68,44,.95));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 3px 0 rgba(19,20,15,.75);
  text-shadow: 0 1px #1a1b16;
}

.battle-callout { border-radius: 7px 14px 7px 14px; }
.battle-callout.pop { background: linear-gradient(145deg, #72582f, #3a3528); }
.battle-clock span { color: #ffe291; border: 1px solid rgba(255,220,137,.22); background: rgba(24,27,20,.9); }

.battle-actions {
  gap: 7px;
  padding: 11px 2px 2px;
}

.primary-button,
.secondary-button {
  min-height: 46px;
  position: relative;
  border: 1px solid #11130f;
  border-radius: 7px 14px 7px 14px;
  text-shadow: 0 1px rgba(0,0,0,.42);
}

.primary-button {
  color: #fff6d6;
  border-color: #421e18;
  background: linear-gradient(180deg, #e86e46, #a53732 68%, #7b2729);
  box-shadow: inset 0 2px rgba(255,218,156,.32), 0 5px 0 #4a2020, 0 8px 12px rgba(0,0,0,.28);
}

.secondary-button {
  color: #eadfbd;
  background: linear-gradient(180deg, #555342, #302f27);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 4px 0 #171913;
}

.battle-hint { color: #a99e82; }

/* 화석 덱 화면: 배경·제단·도감이 한 공간에 놓인다. */
#runeView {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(11,13,10,.18), rgba(13,15,11,.48)),
    url("assets/fossil-forge-bg-v1.png") center center / cover no-repeat;
}

#runeView::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(19,21,15,.36), transparent 35% 68%, rgba(12,14,10,.5));
}

#runeView .section-head {
  min-height: 43px;
  margin: 0 2px 6px;
  color: #fff0c4;
  text-shadow: 0 2px #1b1b15;
}

#runeView .section-head .kicker { color: #d5b770; }
.capacity-meter {
  min-width: 82px;
  padding: 6px 8px;
  color: #f7e7bd;
  border: 1px solid rgba(255,220,130,.25);
  border-radius: 6px 12px;
  background: rgba(25,28,20,.8);
  box-shadow: 0 3px 0 rgba(8,10,7,.56);
}
.capacity-meter span { color: #cbbb94; }
.capacity-meter strong { color: #ffd66d; }

.deck-slots { margin: 0 2px 6px; }
.deck-slots button {
  padding: 5px 7px;
  color: #ddcfaa;
  border: 1px solid rgba(239,206,132,.22);
  border-radius: 5px 10px;
  background: rgba(30,33,25,.88);
  box-shadow: 0 2px 0 rgba(12,13,10,.72);
}
.deck-slots button.active { color: #fff2c8; border-color: #d89a3d; background: linear-gradient(#6d532f,#3b3528); }
.deck-slots button span { color: #9e9379; }
.deck-slots .save-deck { color: #3a2b1d; border-color: #6d4b22; background: linear-gradient(#ffd870,#c98935); }

.rune-board-wrap {
  padding: 7px;
  border: 1px solid #161812;
  border-radius: 9px 18px 9px 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,209,96,.14), transparent 38%),
    linear-gradient(145deg, rgba(58,56,41,.94), rgba(25,29,21,.96));
  box-shadow: inset 0 1px rgba(255,235,187,.1), 0 5px 0 #12140f, 0 9px 20px rgba(0,0,0,.28);
}

.board-status { color: #d6c69e; }
.board-status span { color: #c9b990; }
.board-status strong { color: #ffcc63; }

.rune-board {
  height: 190px;
  border: 1px solid rgba(230,195,118,.3);
  border-radius: 8px 16px 8px 16px;
  background:
    radial-gradient(circle at 50% 49%, rgba(255,199,75,.18) 0 10%, transparent 26%),
    repeating-radial-gradient(circle at 50% 49%, transparent 0 26px, rgba(220,178,92,.08) 27px 28px),
    linear-gradient(rgba(30,32,24,.18), rgba(12,14,10,.35)),
    rgba(78,73,53,.78);
  box-shadow: inset 0 0 34px rgba(6,8,5,.48), inset 0 1px rgba(255,225,153,.1);
}

.rune-slot {
  border-color: #28271e;
  background: radial-gradient(circle at 38% 30%, #cab786, #675d46 65%, #3b382c);
  box-shadow: inset 0 2px rgba(255,238,186,.18), 0 3px 0 rgba(13,14,11,.72), 0 0 10px rgba(239,183,71,.08);
}
.rune-slot::before { color: rgba(249,226,169,.35); }
.rune-slot.core-slot { box-shadow: inset 0 2px rgba(255,238,186,.18), 0 0 0 4px rgba(255,187,59,.18), 0 4px 0 rgba(13,14,11,.72); }
.rune-slot.core-slot:not(.filled)::after { color:#e3c982; }
.rune-slot.active-slot { outline-color: #ffc65c; filter: brightness(1.18); }
.rune-slot .rune-symbol { background: linear-gradient(145deg,#9a825f,#524838); }
.rune-slot small { color:#f5e5bd; text-shadow:0 1px #171812,0 -1px #171812; }
.rune-slot .cost-dot { background:#171913; color:#ffd571; }
.rune-board-wrap > p { color:#b8aa86; }
.deck-traits span { color:#ded0aa; border:1px solid rgba(240,207,133,.12); background:rgba(16,18,14,.5); }
.deck-traits b { color:#ffc95e; }

.rune-inspector {
  min-height: 46px;
  margin-top: 7px;
  padding: 6px 8px 6px 11px;
  color: #f2e4be;
  border: 1px solid rgba(239,204,125,.22);
  border-radius: 6px 13px;
  background: rgba(23,26,19,.9);
  box-shadow: 0 3px 0 rgba(9,10,8,.66);
}
.rune-inspector span { color:#a99b78; }
.rune-inspector p { color:#b7ab8d; }
.rune-inspector button { color:#3c291a; background:linear-gradient(#f6cd68,#bd7f33); }

.inventory-head {
  margin-top: 7px;
  padding: 5px 7px;
  color: #fff0c5;
  border: 1px solid rgba(236,199,115,.2);
  border-radius: 7px 13px 0 0;
  background: rgba(21,24,18,.9);
}
.inventory-head h3 b { color:#ffca5f; }
.inventory-head input {
  width: 126px;
  color: #f4e8c8;
  border-color: rgba(239,206,132,.23);
  background: rgba(62,61,46,.92);
}
.inventory-head input::placeholder { color:#a99d80; }

.collection-filters,
.branch-filters,
.socket-filters,
#runeFilters {
  margin-inline: 0;
  padding-inline: 5px;
  background: rgba(20,23,17,.88);
}
.collection-filters { padding-top: 4px; }
#runeFilters { padding-bottom: 5px; border-radius: 0 0 7px 13px; }
.filters button,
.branch-filters button,
.socket-filters button {
  color: #cabe9f;
  border: 1px solid rgba(235,202,128,.15);
  border-radius: 4px 8px;
  background: rgba(74,72,54,.8);
}
.filters button.active,
.branch-filters button.active,
.socket-filters button.active {
  color: #332719;
  border-color: #7f5326;
  background: linear-gradient(#ffd16c,#bd7b31);
  box-shadow: inset 0 1px rgba(255,255,255,.35);
}

.rune-inventory {
  margin-top: 5px;
  padding: 3px 3px 18px;
  border-radius: 8px 14px 0 0;
  background: rgba(16,19,14,.68);
  box-shadow: inset 0 1px rgba(255,222,150,.08);
  scrollbar-color: #9d743b rgba(15,17,13,.5);
}

.rune-card {
  min-height: 104px;
  padding: 8px 7px 7px;
  color: #f5e8c6;
  border: 1px solid #24251d;
  border-radius: 6px 13px 7px 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), transparent 25%),
    linear-gradient(160deg, #6b644d, #39392e 72%);
  box-shadow: inset 0 1px rgba(255,236,187,.15), 0 3px 0 #171913, 0 5px 9px rgba(0,0,0,.18);
}
.rune-card:hover { filter:brightness(1.08); }
.rune-card.selected { outline-color:#ffc758; box-shadow:0 0 15px rgba(255,190,72,.35),0 3px 0 #171913; }
.rune-card .rune-symbol { color:#fff5d6; background:linear-gradient(145deg,#a38a62,#514737); }
.rune-card strong { color:#fff0c9; }
.rune-card p { color:#c5b99c; }
.rune-card .rune-meta span { color:#b8ab8d; }
.rune-card.locked { color:#98917e; border-style:solid; background:linear-gradient(145deg,#4b4b3d,#2d3028); box-shadow:0 3px 0 #171913; }
.locked-silhouette { color:#575649; background:#24271f; }
.empty-catalog { color:#c8ba98; }

/* 분석도 별도 웹 페이지가 아니라 전투 후 펼치는 야전 기록판처럼 보이게 한다. */
#analysisView {
  color: #f4e6c2;
  background:
    linear-gradient(rgba(22,25,18,.74),rgba(17,20,15,.86)),
    url("assets/fossil-forge-bg-v1.png") center / cover no-repeat;
}
#analysisView .section-head { color:#fff0c6; text-shadow:0 2px #161812; }
.text-button { color:#f1dfb4; border-color:rgba(239,205,128,.23); background:rgba(35,39,29,.86); }
.result-card,
.result-card.loss {
  color:#fff0c7;
  border:1px solid #191b15;
  border-radius:8px 17px 8px 17px;
  background:linear-gradient(145deg,rgba(91,76,48,.95),rgba(40,41,31,.96));
  box-shadow:inset 0 1px rgba(255,236,187,.12),0 5px 0 #151711;
}
.result-card p,.result-card small { color:#c4b796; }
.result-seal { color:#492c1d; border-color:#34291f; background:linear-gradient(#ffdb78,#c88434); box-shadow:inset 0 -5px #955729; }
.metric-card,.reason-card,.battle-log,.duel-compare-card,.rune-impact-card,.growth-prescription {
  color:#f2e5c3;
  border-color:rgba(240,205,128,.18);
  border-radius:7px 14px;
  background:rgba(28,32,24,.88);
  box-shadow:0 3px 0 rgba(12,14,10,.62);
}
.metric-card span,.metric-card small,.reason-card ul,.battle-log ol { color:#bfb397; }

.bottom-nav {
  min-height: 66px;
  padding: 6px 15px max(7px, env(safe-area-inset-bottom));
  gap: 6px;
  border: 0;
  border-top: 3px solid #12140f;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03), transparent 20% 80%, rgba(0,0,0,.1)),
    linear-gradient(180deg, #3b4131, #20251c);
  box-shadow: 0 -3px 0 #68543a, 0 -9px 20px rgba(0,0,0,.22);
  backdrop-filter: none;
}

.bottom-nav button {
  min-height: 49px;
  color: #aaa082;
  border: 1px solid transparent;
  border-radius: 6px 13px;
}
.bottom-nav button.active {
  color:#fff1c8;
  border-color:rgba(255,213,117,.25);
  background:linear-gradient(145deg,#6c5632,#34342a);
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 3px 0 #11130f;
}
.bottom-nav button b { font-size:9px; letter-spacing:.02em; }
.nav-icon {
  width: 24px;
  height: 24px;
  display:block;
  position:relative;
  filter:drop-shadow(0 2px rgba(0,0,0,.42));
}
.nav-icon::before,.nav-icon::after { content:""; position:absolute; }
.nav-duel::before { left:4px; top:2px; width:6px; height:18px; border-radius:5px 5px 2px 2px; background:#b6aa8b; transform:rotate(-38deg); box-shadow:11px 3px 0 #b6aa8b; }
.nav-duel::after { left:2px; top:15px; width:21px; height:3px; border-radius:2px; background:#d19a48; }
.nav-rune::before { inset:2px; transform:rotate(45deg); border:3px solid #b6aa8b; border-radius:4px 10px 4px 10px; }
.nav-rune::after { left:9px; top:9px; width:6px; height:6px; border-radius:50%; background:#d19a48; }
.nav-record::before { left:4px; top:2px; width:16px; height:19px; border:2px solid #b6aa8b; border-radius:3px; box-shadow:inset 0 -5px rgba(182,170,139,.18); }
.nav-record::after { left:8px; top:7px; width:9px; height:2px; background:#d19a48; box-shadow:0 5px #d19a48; }
.bottom-nav button.active .nav-icon::before { border-color:#ffe08b; background-color:#ffe08b; }
.bottom-nav button.active .nav-icon::after { background-color:#f29c43; }

@media (max-height: 720px) {
  .topbar { min-height: 56px; }
  .rune-board { height: 139px; }
  .rune-card { min-height: 82px; }
  .inventory-head { margin-top:5px; }
  .bottom-nav { min-height:59px; }
  .bottom-nav button { min-height:43px; }
  .nav-icon { width:20px;height:20px;transform:scale(.88); }
}

/* 화석 공방 — 장비 체급과 룬 전술을 분리해서 보여주는 첫 성장 공간 */
#forgeView {
  position: relative;
  isolation: isolate;
  color: #f5e7c0;
  background:
    linear-gradient(180deg, rgba(13,15,11,.32), rgba(11,13,10,.68)),
    url("assets/fossil-forge-bg-v1.png") center 32% / cover no-repeat;
}

#forgeView::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,transparent 0 34%,rgba(16,18,13,.5) 56%,rgba(12,14,10,.82));
}

.forge-head { min-height:43px; margin:0 2px 6px; text-shadow:0 2px #161812; }
.forge-head .kicker { color:#d5b770; }
.forge-wallet {
  min-width:92px;
  display:grid;
  gap:1px;
  padding:6px 9px;
  text-align:right;
  border:1px solid rgba(255,218,127,.25);
  border-radius:6px 13px;
  background:rgba(24,27,20,.86);
  box-shadow:0 3px 0 rgba(8,10,7,.6);
}
.forge-wallet span { color:#b8ac8b;font-size:7px;font-weight:900; }
.forge-wallet strong { color:#ffd369;font-size:13px; }

.forge-scene {
  flex:0 0 203px;
  overflow:hidden;
  position:relative;
  border:1px solid #151711;
  border-radius:9px 18px 9px 18px;
  background:
    radial-gradient(circle at 70% 65%,rgba(255,175,56,.2),transparent 27%),
    linear-gradient(180deg,rgba(33,34,25,.08),rgba(17,19,14,.42));
  box-shadow:inset 0 1px rgba(255,236,185,.12),0 5px 0 #11130f,0 11px 24px rgba(0,0,0,.3);
}
.forge-scene::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 30px rgba(4,6,3,.36);
}
.forge-level-plaque {
  position:absolute;
  z-index:5;
  left:9px;top:9px;
  width:91px;
  display:grid;
  padding:7px 9px;
  border:1px solid rgba(255,217,128,.25);
  border-radius:6px 13px;
  background:rgba(22,25,18,.9);
  box-shadow:0 3px 0 rgba(7,8,6,.65);
}
.forge-level-plaque span { color:#b9ad8d;font-size:7px;font-weight:900; }
.forge-level-plaque strong { color:#ffd46b;font-size:19px;line-height:1.05; }
.forge-level-plaque small { margin-top:3px;color:#d4c49e;font-size:7px;font-weight:800; }
.forge-glow {
  position:absolute;
  z-index:1;
  width:165px;height:165px;
  right:20px;bottom:-56px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,188,67,.45),rgba(206,94,31,.12) 48%,transparent 70%);
  animation:forge-breathe 2.8s ease-in-out infinite;
}
@keyframes forge-breathe { 50% { transform:scale(1.12);opacity:.72; } }
.forge-dino {
  position:absolute;
  z-index:3;
  left:61px;bottom:2px;
  width:177px;height:167px;
}
.forge-dino img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 3px rgba(0,0,0,.25)); }
.forge-dino span {
  position:absolute;
  left:-47px;bottom:13px;
  padding:5px 7px;
  color:#f6e7bd;
  border:1px solid rgba(255,217,128,.2);
  border-radius:6px 11px;
  background:rgba(23,26,19,.88);
  font-size:7px;font-weight:900;line-height:1.35;text-align:center;
}
.forge-anvil {
  position:absolute;
  z-index:4;
  right:31px;bottom:25px;
  width:95px;height:55px;
  border-radius:12px 12px 7px 7px;
  background:linear-gradient(#6f6653 0 22%,#3a3a31 23% 65%,#24271f 66%);
  box-shadow:inset 0 2px rgba(255,241,196,.18),0 8px 0 rgba(10,11,8,.65);
  transform:skewX(-5deg);
}
.forge-anvil::before { content:"";position:absolute;right:-18px;top:0;border-left:24px solid #665e4d;border-top:12px solid transparent;border-bottom:11px solid transparent; }
.forge-anvil i { position:absolute;left:12px;right:12px;bottom:-8px;height:12px;border-radius:3px;background:#171a14; }
.forge-anvil b { position:absolute;right:15px;top:-30px;color:#ffc85b;font-size:19px;opacity:0;transform:rotate(-12deg);text-shadow:0 2px #5e301e; }
.forge-scene.crafting .forge-anvil { animation:anvil-hit .42s ease-out 2; }
.forge-scene.crafting .forge-anvil b { animation:forge-word .84s ease-out; }
.forge-scene.crafting .forge-glow { animation:forge-flash .84s ease-out; }
@keyframes anvil-hit { 50% { transform:translateY(4px) skewX(-5deg);filter:brightness(1.45); } }
@keyframes forge-word { 25% { opacity:1;transform:translateY(-7px) rotate(-7deg) scale(1.25); } 100% { opacity:0;transform:translateY(-25px) rotate(-15deg); } }
@keyframes forge-flash { 30% { transform:scale(1.45);filter:brightness(2); } }
.forge-odds {
  position:absolute;
  z-index:5;
  right:8px;top:8px;
  width:104px;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px;
}
.forge-odds span { min-width:31px;padding:3px 4px;border-radius:4px 7px;background:rgba(21,23,17,.86);font-size:6px;font-weight:900;text-align:center;box-shadow:0 2px rgba(8,9,7,.48); }
.forge-odds span.off { opacity:.34; }

.gear-role-rule {
  flex:0 0 auto;
  min-height:34px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:6px;
  margin:9px 1px 6px;
  padding:5px 8px;
  border:1px solid rgba(237,202,124,.18);
  border-radius:6px 12px;
  background:rgba(22,25,18,.88);
  box-shadow:0 3px 0 rgba(8,9,7,.56);
}
.gear-role-rule span { color:#bfb395;font-size:7px;text-align:center; }
.gear-role-rule span b { display:block;color:#ffd06b;font-size:9px; }
.gear-role-rule i { color:#d4953d;font-size:13px;font-style:normal;font-weight:1000; }

.equipment-grid {
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  margin:0 1px 6px;
}
.gear-slot {
  min-width:0;
  min-height:56px;
  position:relative;
  overflow:hidden;
  padding:5px 4px 4px;
  color:#dfd2af;
  border:1px solid #20221b;
  border-radius:6px 11px 6px 11px;
  background:linear-gradient(145deg,#55513f,#2e3128);
  box-shadow:inset 0 1px rgba(255,235,184,.11),0 3px 0 #151712;
  cursor:pointer;
}
.gear-slot.active { outline:2px solid #ffc55c;filter:brightness(1.12); }
.gear-slot::after { content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--gear-grade,#706b59); }
.gear-slot .gear-icon { display:grid;place-items:center;width:22px;height:22px;margin:0 auto 2px;border-radius:48% 52% 42% 58%;background:#262921;color:#f1d68e;font-size:7px;font-weight:1000;box-shadow:inset 0 -2px rgba(0,0,0,.22); }
.gear-slot b { display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:8px;text-align:center; }
.gear-slot small { display:block;margin-top:1px;color:#aaa083;font-size:6px;text-align:center; }
.gear-slot.visible-part::before { content:"외형";position:absolute;left:3px;top:3px;color:#8ec277;font-size:5px;font-weight:1000; }

.forge-workbench {
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  grid-template-rows:1fr auto;
  gap:6px;
  padding:7px;
  border:1px solid rgba(237,202,124,.18);
  border-radius:8px 15px 8px 15px;
  background:linear-gradient(145deg,rgba(50,50,38,.95),rgba(22,25,19,.96));
  box-shadow:inset 0 1px rgba(255,235,185,.1),0 4px 0 #11130f;
}
.forge-selection,.forge-result { min-width:0;padding:7px;border-radius:5px 10px;background:rgba(11,13,10,.35); }
.forge-selection span,.forge-result-grade { display:block;color:#b8aa88;font-size:7px;font-weight:900; }
.forge-selection strong,.forge-result strong { display:block;margin-top:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#fff0c5;font-size:10px; }
.forge-selection p,.forge-result p { margin-top:4px;color:#c2b596;font-size:7px;line-height:1.45; }
.forge-result { border:1px solid rgba(255,208,111,.14); }
.forge-result.new { animation:new-gear .45s ease-out;box-shadow:0 0 15px rgba(255,185,60,.18); }
.forge-result small { display:block;margin-top:4px;color:#e4a958;font-size:7px;font-weight:900; }
@keyframes new-gear { from { transform:scale(.94);filter:brightness(1.8); } }
.forge-buttons { grid-column:1/-1;display:grid;grid-template-columns:.75fr 1.35fr .75fr;gap:6px; }
.forge-main-button,.forge-sub-button { min-height:38px;border:1px solid #171813;border-radius:5px 10px;font-weight:950;cursor:pointer; }
.forge-main-button { color:#432818;background:linear-gradient(#ffd66f,#c68435);box-shadow:inset 0 1px rgba(255,255,255,.4),0 3px 0 #6a3d20; }
.forge-sub-button { color:#d9cdac;background:linear-gradient(#514f3f,#303128);box-shadow:0 3px 0 #161812;font-size:9px; }
.forge-sub-button.equip { color:#e7f1d6;background:linear-gradient(#668554,#3d5535); }
.forge-sub-button:disabled { opacity:.3;cursor:default; }

.grade-white { --gear-grade:#e9dfc9; }
.grade-green { --gear-grade:#79b96d; }
.grade-blue { --gear-grade:#5e9edb; }
.grade-yellow { --gear-grade:#e3af40; }
.grade-red { --gear-grade:#df5e55; }
.grade-purple { --gear-grade:#9363c8; }

.bottom-nav { grid-template-columns:repeat(4,1fr);padding-inline:10px; }
.nav-forge::before { left:3px;top:7px;width:18px;height:9px;border-radius:3px;background:#b6aa8b;box-shadow:inset 0 3px rgba(255,255,255,.12),0 5px 0 -2px #b6aa8b; }
.nav-forge::after { left:8px;top:1px;width:8px;height:15px;border-left:3px solid #d19a48;transform:rotate(32deg); }

@media (max-height:720px) {
  .forge-scene { flex-basis:150px; }
  .forge-dino { left:72px;bottom:-14px;width:137px;height:137px; }
  .forge-anvil { right:24px;bottom:18px;transform:scale(.78) skewX(-5deg); }
  .forge-level-plaque { transform:scale(.86);transform-origin:left top; }
  .forge-odds { transform:scale(.86);transform-origin:right top; }
  .gear-role-rule { min-height:28px;margin-block:7px 5px;padding-block:3px; }
  .gear-slot { min-height:47px;padding-block:3px; }
  .gear-slot .gear-icon { width:18px;height:18px; }
  .forge-workbench { padding:5px; }
  .forge-selection,.forge-result { padding:5px; }
  .forge-selection p,.forge-result p { margin-top:2px;line-height:1.25; }
  .forge-main-button,.forge-sub-button { min-height:31px; }
}

/* v22 — 홈 자동 스테이지, 작은 결투 공룡, 태고 각골 룬, 제작·부화 메인 연출 */
#homeView.active { overflow-y:auto;overscroll-behavior:contain;padding-bottom:22px; }
#homeView .home-head,#homeView .home-stage,#homeView .home-production,#homeView .home-timer-board,#homeView .home-quick-grid,#homeView .tribe-banner,#homeView .today-board { flex-shrink:0; }
#homeView .today-board { flex:0 0 auto;overflow:visible;min-height:106px; }

.home-stage {
  --stage-sky:#bcd9bd;--stage-hill:#76965e;--stage-ground:#c9ad6f;
  flex:0 0 246px;overflow:hidden;position:relative;border:3px solid var(--dino-ink);border-radius:17px 24px 14px 21px;background:#ead8ad;box-shadow:inset 0 2px rgba(255,255,255,.55),0 5px #96673e;isolation:isolate;
}
.home-stage[data-era="fern"] { --stage-sky:#abcdb1;--stage-hill:#5f8655;--stage-ground:#bd9f62; }
.home-stage[data-era="coast"] { --stage-sky:#b8d5d4;--stage-hill:#7e9c6a;--stage-ground:#dbc37f; }
.home-stage[data-era="jurassic"] { --stage-sky:#a9c5a0;--stage-hill:#4f754c;--stage-ground:#ae8754; }
.home-stage[data-era="volcano"] { --stage-sky:#c9a58f;--stage-hill:#70594d;--stage-ground:#9b674b; }
.home-stage[data-era="ancient"] { --stage-sky:#a7a2bf;--stage-hill:#625c79;--stage-ground:#88705d; }
.home-stage-hud { position:absolute;z-index:12;left:7px;right:7px;top:7px;display:flex;justify-content:space-between;pointer-events:none; }
.home-stage-hud > div { min-width:105px;padding:5px 7px;border:2px solid var(--dino-ink);border-radius:8px 12px;background:rgba(255,247,218,.91);box-shadow:0 2px #997247; }
.home-stage-hud > div:last-child { text-align:right; }
.home-stage-hud small,.home-stage-hud span { display:block;color:#7b674e;font-size:5px;font-weight:900; }
.home-stage-hud strong { display:block;margin:1px 0;color:#8f5130;font-size:15px;line-height:1; }
.home-stage-world { position:absolute;z-index:1;left:0;right:0;top:0;height:178px;overflow:hidden;background:linear-gradient(180deg,var(--stage-sky) 0 61%,var(--stage-ground) 62%);transform-origin:50% 80%; }
.stage-clouds i { position:absolute;top:51px;width:50px;height:10px;border-radius:50%;background:rgba(255,249,221,.48);filter:blur(.3px); }
.stage-clouds i::before,.stage-clouds i::after { content:"";position:absolute;bottom:0;border-radius:50%;background:inherit; }
.stage-clouds i::before { left:8px;width:19px;height:18px; }.stage-clouds i::after { right:7px;width:25px;height:15px; }
.stage-clouds i:nth-child(1){left:6%;}.stage-clouds i:nth-child(2){left:47%;top:35px;transform:scale(.7)}.stage-clouds i:nth-child(3){right:3%;top:62px;transform:scale(.85)}
.stage-hills { position:absolute;left:-8%;right:-8%;bottom:58px;height:72px;background:var(--stage-hill);opacity:.68;clip-path:polygon(0 100%,0 66%,10% 35%,18% 68%,29% 22%,39% 71%,49% 39%,59% 75%,69% 18%,79% 68%,90% 31%,100% 64%,100% 100%); }
.home-stage-world::after { content:"";position:absolute;left:-5%;right:-5%;bottom:-21px;height:87px;border-radius:48% 52% 0 0;background:radial-gradient(ellipse at 18% 22%,rgba(83,60,37,.18) 0 2px,transparent 3px),radial-gradient(ellipse at 73% 35%,rgba(83,60,37,.15) 0 3px,transparent 4px),var(--stage-ground);box-shadow:inset 0 7px rgba(255,241,184,.14); }
.stage-fern { position:absolute;z-index:2;bottom:28px;width:55px;height:58px;opacity:.75; }
.stage-fern::before { content:"";position:absolute;left:25px;bottom:0;width:5px;height:42px;border-radius:5px;background:#5f633b;transform:rotate(-5deg); }
.stage-fern::after { content:"";position:absolute;inset:0;background:#5c784a;clip-path:polygon(46% 11%,22% 0,40% 29%,5% 20%,38% 43%,0 49%,40% 56%,9% 75%,45% 67%,49% 100%,55% 68%,91% 78%,61% 56%,100% 49%,60% 43%,94% 23%,58% 30%,76% 0,52% 13%); }
.fern-left { left:-7px; }.fern-right { right:-8px;transform:scaleX(-1) scale(.8); }

.home-stage-fighter { position:absolute;z-index:6;bottom:19px;width:88px;height:88px;transform-origin:50% 88%; }
.home-stage-fighter img { position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 1px rgba(55,37,23,.22)); }
.home-stage-fighter > i { position:absolute;z-index:1;left:18px;right:13px;bottom:7px;height:10px;border-radius:50%;background:rgba(59,40,25,.24);filter:blur(2px); }
.home-stage-fighter > b { position:absolute;z-index:8;top:17px;opacity:0;color:#3d2b1f;font-size:14px;text-shadow:0 2px #fff;font-weight:1000; }
.stage-player { left:14%; }.stage-enemy { right:14%; }
.stage-enemy img { transform:scaleX(-1);filter:sepia(.13) hue-rotate(305deg) saturate(1.18) drop-shadow(0 4px 1px rgba(55,37,23,.22)); }
.stage-player > b { right:-4px;transform:rotate(-7deg); }.stage-enemy > b { left:-4px;transform:rotate(7deg); }
.stage-player.stage-attacking { animation:stage-player-bite .37s cubic-bezier(.2,.8,.25,1); }.stage-enemy.stage-attacking { animation:stage-enemy-bite .37s cubic-bezier(.2,.8,.25,1); }
.home-stage-fighter.stage-attacking > b { animation:stage-bite-word .4s ease-out; }
.home-stage-fighter.stage-hit { filter:brightness(1.45) saturate(1.5);animation:stage-hit .3s ease-out; }
@keyframes stage-player-bite { 45%{transform:translateX(31px) rotate(3deg) scale(1.05,.95)} }
@keyframes stage-enemy-bite { 45%{transform:translateX(-31px) rotate(-3deg) scale(1.05,.95)} }
@keyframes stage-hit { 45%{transform:translateX(9px) rotate(5deg)} }
@keyframes stage-bite-word { 20%{opacity:1;transform:translateY(-3px) scale(1.25)} 100%{opacity:0;transform:translateY(-22px) scale(.8)} }

.home-stage-bars { position:absolute;z-index:13;left:7px;right:7px;top:172px;display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.home-stage-bars > div > span { display:flex;justify-content:space-between;color:#5f4d39;font-size:5px;font-weight:1000; }.home-stage-bars small { font-size:5px; }
.home-stage-bars i { display:block;height:8px;margin-top:2px;padding:1px;border:1px solid var(--dino-ink);border-radius:6px;background:#5d5140; }
.home-stage-bars i b { display:block;height:100%;border-radius:inherit;background:linear-gradient(#ff7762,#c9403f);transition:width .2s; }
.home-stage-bars > div:last-child { text-align:right; }
.home-stage-footer { position:absolute;z-index:14;left:7px;right:7px;bottom:6px;height:34px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px; }
.home-stage-footer > span { overflow:hidden;color:#715e47;font-size:6px;font-weight:900;white-space:nowrap;text-overflow:ellipsis; }
.home-stage-footer button { padding:7px 8px;border:2px solid var(--dino-ink);border-radius:8px 11px;background:linear-gradient(#ffd66d,#dc9942);box-shadow:0 2px #93603a;color:var(--dino-ink);font-size:6px;font-weight:1000;cursor:pointer; }
.home-stage.stage-blocked .home-stage-footer > span { color:#b04739;animation:stage-warning 1s ease-in-out infinite; }
@keyframes stage-warning { 50%{opacity:.5} }
.home-stage-fx { position:absolute;z-index:10;inset:0;pointer-events:none; }
.stage-damage { position:absolute;top:69px;width:90px;transform:translateX(-50%);color:#ef4f43;font-size:12px;font-weight:1000;text-align:center;-webkit-text-stroke:1px #fff4d7;text-shadow:0 2px #692d26;animation:stage-damage-float .72s ease-out forwards; }
.stage-damage.critical { color:#ffd34f;font-size:17px;text-shadow:0 3px #a74629; }
@keyframes stage-damage-float { 0%{opacity:0;transform:translate(-50%,12px) scale(.65)} 25%{opacity:1;transform:translate(-50%,0) scale(1.12)} 100%{opacity:0;transform:translate(-50%,-48px) scale(.9)} }
.stage-rune-impact { --glyph:#ffe16d;position:absolute;z-index:14;top:49px;width:94px;height:100px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,var(--glyph) 0 5%,color-mix(in srgb,var(--glyph) 38%,transparent) 6% 23%,transparent 64%);filter:drop-shadow(0 0 11px var(--glyph));animation:stage-rune-burst .82s ease-out forwards; }
.stage-rune-impact > .primeval-glyph { position:absolute;left:27px;top:20px;width:40px!important;height:40px!important;box-shadow:0 0 19px var(--glyph),inset 0 -5px rgba(52,35,20,.2)!important; }
.stage-rune-impact > i { position:absolute;left:50%;bottom:4px;width:88px;height:26px;border:4px solid var(--glyph);border-radius:50%;transform:translateX(-50%);animation:stage-ring .55s .12s ease-out both; }
.stage-rune-impact.branch-storm { --glyph:#7fd8ff; }.stage-rune-impact.branch-meteor { --glyph:#ff9e45; }.stage-rune-impact.branch-venom { --glyph:#c985e7; }.stage-rune-impact.branch-blood { --glyph:#ff7b84; }.stage-rune-impact.branch-shell,.stage-rune-impact.branch-egg { --glyph:#bdda87; }
@keyframes stage-rune-burst { 0%{opacity:0;transform:translateX(-50%) scale(.2) rotate(-15deg)} 30%{opacity:1;transform:translateX(-50%) scale(1.35) rotate(4deg)} 100%{opacity:0;transform:translateX(-50%) scale(1.75)} }
@keyframes stage-ring { from{opacity:1;transform:translateX(-50%) scale(.2)} to{opacity:0;transform:translateX(-50%) scale(1.7)} }
.home-stage-world.stage-quake { animation:home-stage-quake .36s linear; }
@keyframes home-stage-quake { 20%{transform:translate(3px,1px)} 40%{transform:translate(-4px,-1px)} 60%{transform:translate(2px,2px)} 80%{transform:translate(-2px,0)} }

/* 결투장의 주인공은 더 작고 하찮게, 룬 이펙트는 상대적으로 더 크게 보인다. */
.fighter { width:31%;bottom:61px; }
.fighter-player { left:8%; }.fighter-enemy { right:8%; }
.fighter img { width:116%;height:116%;left:-8%;top:-8%; }
.fighter-shadow { left:19%;right:19%;bottom:4%;height:10%; }
.skill-fx.fx-yellow { --fx-scale:1.2; }.skill-fx.fx-red { --fx-scale:1.42; }.skill-fx.fx-purple { --fx-scale:1.68; }

/* 200개 룬 공통 체계: 글자가 아니라 뼈에 새긴 태고 각골문양. */
.primeval-glyph { --glyph:#e9cf8c;position:relative;overflow:visible!important;border:2px solid #463522!important;border-radius:43% 52% 45% 55%!important;background:radial-gradient(circle at 30% 24%,#fff0be 0 5%,transparent 6%),linear-gradient(145deg,#b58b51,#59432d)!important;color:var(--glyph)!important;box-shadow:inset 0 -4px rgba(42,29,19,.32),inset 2px 2px rgba(255,239,190,.2),0 2px 4px rgba(43,29,18,.24)!important; }
.primeval-glyph::before { content:"";position:absolute;inset:3px;border:1px dashed rgba(255,231,164,.22);border-radius:inherit; }
.primeval-glyph svg { position:relative;z-index:2;width:82%;height:82%;overflow:visible;fill:none;stroke:currentColor;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px #352719); }
.primeval-glyph .glyph-scar { stroke-width:1.35;opacity:.55; }.primeval-glyph .glyph-pit { fill:currentColor;stroke:none;opacity:.92; }
.primeval-glyph[data-variant="1"] svg,.primeval-glyph[data-variant="5"] svg { transform:rotate(7deg) scale(.92); }
.primeval-glyph[data-variant="2"] svg,.primeval-glyph[data-variant="8"] svg { transform:rotate(-8deg) scaleX(.9); }
.primeval-glyph[data-variant="3"] svg,.primeval-glyph[data-variant="9"] svg { transform:rotate(3deg) scaleY(.88); }
.primeval-glyph[data-variant="4"] svg,.primeval-glyph[data-variant="10"] svg { transform:rotate(-4deg) scale(.96); }
.primeval-glyph.glyph-fang{--glyph:#ffd0b0}.primeval-glyph.glyph-storm{--glyph:#a7dcff}.primeval-glyph.glyph-shell{--glyph:#c5dda8}.primeval-glyph.glyph-blood{--glyph:#ffb0b5}.primeval-glyph.glyph-meteor{--glyph:#ffd28a}.primeval-glyph.glyph-venom{--glyph:#dfb7f0}.primeval-glyph.glyph-luck{--glyph:#a9e6cf}.primeval-glyph.glyph-roar{--glyph:#f0bb91}.primeval-glyph.glyph-egg{--glyph:#ffe183}.primeval-glyph.glyph-ancient{--glyph:#c8c2ff}
.primeval-glyph.grade-yellow,.primeval-glyph.grade-red,.primeval-glyph.grade-purple { box-shadow:inset 0 -4px rgba(42,29,19,.32),0 0 9px color-mix(in srgb,var(--grade,#ffd75e) 78%,transparent)!important; }
.rune-birth .primeval-glyph { width:43px;height:43px; }.summon-result > .primeval-glyph { width:44px;height:44px;flex:0 0 44px; }.meteor-summon-card .summon-result > .primeval-glyph { width:40px;height:40px; }

/* 제작과 부화는 화면 전체가 반응하는 핵심 성장 순간으로 보인다. */
.forge-scene,.pet-hero { isolation:isolate; }
.forge-reveal-fx,.pet-hatch-fx { position:absolute;z-index:20;inset:0;overflow:hidden;pointer-events:none;opacity:0; }
.forge-reveal-fx::before,.pet-hatch-fx::before { content:"";position:absolute;left:50%;top:52%;width:42px;height:42px;border-radius:50%;transform:translate(-50%,-50%);background:#fff9d2;box-shadow:0 0 18px 8px var(--reveal-color,var(--hatch-color,#ffe07a)),0 0 70px 35px color-mix(in srgb,var(--reveal-color,var(--hatch-color,#ffe07a)) 46%,transparent); }
.forge-reveal-fx > i,.pet-hatch-fx > i { position:absolute;left:50%;top:51%;width:8px;height:82px;transform-origin:50% 100%;border-radius:9px;background:linear-gradient(transparent,var(--reveal-color,var(--hatch-color,#ffe07a))); }
.forge-reveal-fx > i:nth-child(1),.pet-hatch-fx > i:nth-child(1){transform:translate(-50%,-100%) rotate(0)}.forge-reveal-fx > i:nth-child(2),.pet-hatch-fx > i:nth-child(2){transform:translate(-50%,-100%) rotate(90deg)}.forge-reveal-fx > i:nth-child(3),.pet-hatch-fx > i:nth-child(3){transform:translate(-50%,-100%) rotate(180deg)}.forge-reveal-fx > i:nth-child(4),.pet-hatch-fx > i:nth-child(4){transform:translate(-50%,-100%) rotate(270deg)}
.forge-reveal-fx > b,.pet-hatch-fx > b { position:absolute;left:50%;top:29%;min-width:120px;transform:translateX(-50%);padding:6px 9px;border:2px solid var(--dino-ink);border-radius:9px 13px;background:#fff4cf;color:var(--dino-ink);box-shadow:0 4px #8e6038;font-size:12px;text-align:center; }
.forge-scene.craft-reveal .forge-reveal-fx { animation:core-reveal 1.4s ease-out both; }.pet-hero.hatch-reveal .pet-hatch-fx { animation:core-reveal 1.75s ease-out both; }
.forge-scene.craft-reveal .forge-dino { animation:forge-dino-pop .8s .28s cubic-bezier(.2,1.4,.35,1) both; }.pet-hero.hatch-reveal > img { animation:hero-reveal-pop .8s .28s cubic-bezier(.2,1.4,.35,1) both; }
.forge-scene.craft-reveal { animation:forge-scene-impact .5s ease-out; }.pet-hero.hatch-reveal { animation:forge-scene-impact .55s ease-out; }
@keyframes core-reveal { 0%{opacity:0;transform:scale(.18) rotate(-18deg)} 18%{opacity:1;transform:scale(1.08) rotate(2deg)} 62%{opacity:1} 100%{opacity:0;transform:scale(1.5)} }
@keyframes hero-reveal-pop { from{transform:translate(-50%,-50%) scale(.35) rotate(-9deg);filter:brightness(2) drop-shadow(0 0 18px var(--hatch-color,#ffe07a))} to{transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 5px 1px rgba(66,43,26,.18))} }
@keyframes forge-dino-pop { from{transform:scale(.35) rotate(-9deg);filter:brightness(2) drop-shadow(0 0 18px var(--reveal-color,#ffe07a))} to{transform:scale(1);filter:none} }
@keyframes forge-scene-impact { 20%{transform:translateX(3px)} 40%{transform:translateX(-4px)} 60%{transform:translateX(2px)} 80%{transform:translateX(-1px)} }
.incubator-slot.ready { box-shadow:0 0 0 3px rgba(255,233,125,.35),0 0 18px var(--egg-grade,#ffe389); }
.incubator-slot.ready > i { animation:main-egg-crack .68s ease-in-out infinite alternate; }
@keyframes main-egg-crack { to{transform:translateY(-5px) rotate(4deg) scale(1.08);filter:drop-shadow(0 0 8px #fff1a2)} }

@media (max-height:720px) {
  .home-stage { flex-basis:224px; }
  .home-stage-world { height:160px; }.home-stage-bars { top:154px; }.home-stage-footer { height:31px; }
  .home-stage-fighter { width:78px;height:78px;bottom:16px; }
  .fighter { width:28%;bottom:48px; }
}

/* v12 — 초중후반 친구 밸런스, 다중 부화, 실제 승천 */
.forge-level-plaque > span b { color:#a66532; }
.forge-scene.ascended { box-shadow:inset 0 0 0 3px rgba(236,187,76,.5),0 5px var(--dino-shadow); }
.forge-scene.ascended::after {
  content:"승천 " attr(data-ascension);position:absolute;z-index:7;right:8px;top:8px;padding:4px 7px;border:2px solid var(--dino-ink);border-radius:10px 14px;background:linear-gradient(#ffe793,#dca745);color:var(--dino-ink);font-size:7px;font-weight:1000;box-shadow:0 3px #90613a;
}
.gear-slot.ascended { background:radial-gradient(circle at 50% 28%,#fff4bd,#d7bd79); }
.gear-slot.ascended .gear-icon { box-shadow:0 0 0 2px #efc963,inset 0 -2px rgba(0,0,0,.15); }

.pet-wallet { min-width:118px;grid-template-columns:1fr 1fr;gap:6px;padding:4px 7px; }
.pet-wallet > span { display:grid;gap:1px;text-align:center; }
.pet-wallet strong { font-size:9px; }
.pet-hero.ascended { box-shadow:inset 0 0 0 3px rgba(240,198,85,.55),0 5px var(--dino-shadow); }
.pet-hero.ascended::after {
  content:"별깨어남 " attr(data-ascension);position:absolute;z-index:5;left:8px;top:8px;padding:4px 7px;border:2px solid var(--dino-ink);border-radius:10px 14px;background:#f2cf65;color:var(--dino-ink);font-size:7px;font-weight:1000;
}
.pet-card.ascended { background:radial-gradient(circle at 20% 15%,#fff7bc,#ddc783); }
.battle-companion.ascended img { filter:drop-shadow(0 0 5px #f1d46c) drop-shadow(0 3px 1px rgba(66,43,26,.2)); }

.incubator-card.multi { display:block;margin:7px 1px 5px;padding:6px; }
.incubator-card.multi > header { display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;padding:0 2px; }
.incubator-card.multi > header span { display:block;color:#766248;font-size:5px;font-weight:900; }
.incubator-card.multi > header strong { display:block;color:var(--dino-ink);font-size:7px; }
.incubator-card.multi > header > b { color:#967040;font-size:6px; }
.incubator-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:5px; }
.incubator-slot {
  min-width:0;position:relative;display:grid;grid-template-rows:31px 12px 11px 21px;place-items:center;padding:4px 3px;border:2px solid #7e694d;border-radius:10px 14px;background:linear-gradient(#fff9e8,#deca9f);cursor:pointer;box-shadow:0 2px #a47c4d;
}
.incubator-slot.active { border-color:#89502e;outline:2px solid #efbd55;background:linear-gradient(#fff5c9,#e5bd67); }
.incubator-slot.ready { animation:hatch-ready 1.1s ease-in-out infinite; }
.incubator-slot.locked { opacity:.55;filter:grayscale(.65);cursor:default; }
.incubator-slot > i { width:29px;height:31px;display:grid;place-items:center;border:2px solid var(--dino-ink);border-radius:51% 46% 48% 44%;background:var(--egg-grade,#e7d5ae);color:#6f583d;font-size:7px;font-style:normal;font-weight:1000;box-shadow:inset -4px -3px rgba(123,83,48,.17); }
.incubator-slot > b { max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--dino-ink);font-size:6px; }
.incubator-slot > small { color:#77634c;font-size:5px; }
.incubator-slot > button { width:100%;height:19px;padding:0;border:1px solid var(--dino-ink);border-radius:5px 8px;background:#efbd55;color:var(--dino-ink);font-size:5px;font-weight:1000;cursor:pointer; }
.incubator-slot > button:disabled { opacity:.52;background:#cfc09f; }
@keyframes hatch-ready { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-2px) rotate(1deg)} }

.hatch-speed-wallet { display:grid;grid-template-columns:auto repeat(3,1fr) auto;align-items:center;gap:3px;margin-top:5px; }
.hatch-speed-wallet > span { color:#735f47;font-size:5px;font-weight:900; }
.hatch-speed-wallet > button { min-width:0;padding:4px 2px;border:1px solid var(--dino-ink);border-radius:5px 8px;background:#fff1c8;color:var(--dino-ink);font-size:5px;font-weight:1000;cursor:pointer; }
.hatch-speed-wallet > button b { color:#a55d31; }
.hatch-speed-wallet > button:disabled { opacity:.38; }
.hatch-speed-wallet > .unlock-slot { padding-inline:5px;background:#c8d49f; }

@media (max-height:720px) {
  .pet-hero { flex-basis:148px; }
  .pet-hero > img { width:176px;height:148px; }
  .incubator-card.multi { margin-top:5px;padding:4px; }
  .incubator-slot { grid-template-rows:24px 10px 10px 18px;padding:2px; }
  .incubator-slot > i { width:23px;height:25px; }
  .pet-grade-times img { width:32px;height:23px; }
}

/* v9 — 제작 둥지, 동행 친구, 화석 소환소 */
.forge-nest-button {
  position:absolute;
  z-index:5;
  right:10px;
  bottom:4px;
  width:142px;
  height:150px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.34));
}
.forge-nest-button img { width:100%;height:100%;object-fit:contain;transition:transform .2s ease; }
.forge-nest-button:hover img,.forge-nest-button:focus-visible img { transform:scale(1.05) rotate(1deg); }
.forge-nest-button b,.forge-nest-button small {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  color:#fff0bf;
  text-shadow:0 2px #3f2518;
}
.forge-nest-button b { bottom:16px;font-size:10px; }
.forge-nest-button small { bottom:6px;font-size:6px;font-weight:900; }
.forge-scene.crafting .forge-nest-button { animation:nest-craft .75s ease-out; }
@keyframes nest-craft { 25% { transform:scale(.94) rotate(-2deg);filter:brightness(1.5) drop-shadow(0 0 12px #f7b543); } 55% { transform:scale(1.06) rotate(2deg); } }

.game-modal[hidden] { display:none; }
.game-modal {
  position:absolute;
  z-index:90;
  inset:0;
  display:grid;
  place-items:center;
  padding:14px;
  background:rgba(7,9,6,.76);
  backdrop-filter:blur(4px);
}
.game-modal-card {
  width:100%;
  position:relative;
  padding:18px 14px 14px;
  color:#f5e7c0;
  border:1px solid rgba(248,212,126,.3);
  border-radius:10px 21px 10px 21px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,191,68,.13),transparent 35%),
    linear-gradient(145deg,#514b37,#20241b 72%);
  box-shadow:inset 0 1px rgba(255,241,197,.12),0 7px 0 #10120d,0 18px 42px rgba(0,0,0,.52);
}
.game-modal-card h3 { margin-top:2px;color:#fff1c5;font-size:20px; }
.game-modal-card > p { margin-top:7px;color:#c8bc9d;font-size:9px;line-height:1.55; }
.modal-close { position:absolute;right:10px;top:10px;width:30px;height:30px;border:1px solid rgba(255,223,149,.2);border-radius:50%;background:#25281f;color:#e8d8b1;font-size:19px;cursor:pointer; }
.research-road { display:flex;align-items:center;margin:15px 0 11px; }
.research-road i { flex:0 0 25px;height:25px;display:grid;place-items:center;border-radius:50%;color:#442b19;background:linear-gradient(#ffd46a,#bc7932);font-size:8px;font-style:normal;font-weight:1000;box-shadow:0 2px #5c341d; }
.research-road span { flex:1;height:3px;background:linear-gradient(90deg,#9b6732,#6b5f45); }
.research-status { display:grid;grid-template-columns:repeat(3,1fr);gap:5px; }
.research-status span { padding:7px 4px;border-radius:5px 10px;background:rgba(13,16,11,.45);color:#bcae8d;font-size:7px;text-align:center; }
.research-status b { display:block;margin-top:2px;color:#ffd16a;font-size:10px; }
.research-progress { height:30px;overflow:hidden;position:relative;margin:10px 0;border:1px solid #171914;border-radius:5px 10px;background:#141711; }
.research-progress i { position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#8a6a32,#e5a63e);transition:width .3s; }
.research-progress b { position:absolute;inset:0;display:grid;place-items:center;color:#fff0c4;font-size:8px;text-shadow:0 1px #1c1d17; }
.modal-actions { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.modal-actions button,.dust-craft-button { min-height:40px;border:1px solid #171914;border-radius:6px 11px;color:#422918;background:linear-gradient(#ffd36b,#c48134);font-size:9px;font-weight:1000;cursor:pointer;box-shadow:0 3px #663d21; }
.modal-actions button + button { color:#ebdfbd;background:linear-gradient(#55513f,#303229);box-shadow:0 3px #151712; }
.modal-actions button:disabled,.dust-craft-button:disabled { opacity:.35;cursor:default; }
.forge-guide-card > small { display:block;margin-top:10px;color:#b9ad8f;font-size:7px;text-align:center; }

.battle-companion {
  position:absolute;
  z-index:5;
  left:24%;
  bottom:42px;
  width:22%;
  aspect-ratio:1;
  pointer-events:none;
}
.battle-companion img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 2px rgba(45,31,19,.24));animation:friend-idle 2.2s ease-in-out infinite; }
.battle-companion span { position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);max-width:90px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:2px 5px;border-radius:6px;background:rgba(30,33,25,.76);color:#f5e8c2;font-size:6px;font-weight:900; }
@keyframes friend-idle { 50% { transform:translateY(-4px) rotate(-1deg); } }
.fighter-player.attacking ~ .battle-companion img { animation:friend-cheer .45s ease-out; }
@keyframes friend-cheer { 50% { transform:translateY(-10px) rotate(4deg); } }

#petView {
  position:relative;
  isolation:isolate;
  color:#f4e6c0;
  background:
    linear-gradient(180deg,rgba(15,18,12,.18),rgba(13,16,11,.72)),
    url("assets/fossil-forge-bg-v1.png") center / cover no-repeat;
}
#petView::before { content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,25,17,.2),transparent 38%,rgba(12,14,10,.62)); }
.pet-head { min-height:43px;margin:0 2px 6px;text-shadow:0 2px #161812; }
.pet-head .kicker { color:#d5b770; }
.pet-wallet { min-width:89px;display:grid;padding:6px 9px;text-align:right;border:1px solid rgba(255,218,127,.25);border-radius:6px 13px;background:rgba(24,27,20,.86);box-shadow:0 3px #0d0f0b; }
.pet-wallet span { color:#b8ac8b;font-size:7px;font-weight:900; }
.pet-wallet strong { color:#ffd369;font-size:13px; }
.pet-hero {
  flex:0 0 238px;
  overflow:hidden;
  position:relative;
  border:1px solid #151711;
  border-radius:9px 18px 9px 18px;
  background:radial-gradient(circle at 47% 52%,rgba(255,211,103,.17),transparent 37%),linear-gradient(180deg,rgba(44,56,34,.28),rgba(19,22,16,.55));
  box-shadow:inset 0 1px rgba(255,236,185,.12),0 5px #10120d;
}
.pet-aura { position:absolute;left:50%;top:50%;width:200px;height:200px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(239,190,79,.25),transparent 65%);animation:forge-breathe 3s ease-in-out infinite; }
.pet-hero > img { position:absolute;z-index:2;left:50%;top:48%;width:225px;height:225px;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 7px 4px rgba(0,0,0,.3)); }
.pet-hero-info { position:absolute;z-index:4;left:10px;bottom:10px;max-width:175px;padding:7px 9px;border:1px solid rgba(247,211,124,.2);border-radius:6px 12px;background:rgba(22,25,18,.86); }
.pet-hero-info span { color:#8fc07b;font-size:7px;font-weight:1000; }
.pet-hero-info strong { display:block;margin-top:2px;color:#fff0c5;font-size:13px; }
.pet-hero-info p { margin-top:3px;color:#c6b99a;font-size:7px;line-height:1.35; }
.nest-level { position:absolute;z-index:4;right:8px;top:8px;display:grid;gap:4px;padding:6px;border-radius:6px 11px;background:rgba(22,25,18,.88);box-shadow:0 3px #0d0f0b; }
.nest-level span { color:#e9d9ad;font-size:8px;font-weight:900;text-align:center; }
.nest-level button { padding:5px 7px;border:1px solid #684621;border-radius:4px 8px;background:linear-gradient(#f1bd52,#b36f2c);color:#432918;font-size:7px;font-weight:1000;cursor:pointer; }
.incubator-card { flex:0 0 auto;display:grid;grid-template-columns:68px 1fr auto;grid-template-rows:1fr auto;gap:4px 7px;margin:9px 1px 6px;padding:7px;border:1px solid rgba(241,205,123,.2);border-radius:7px 14px;background:rgba(23,26,19,.9);box-shadow:0 3px #0d0f0b; }
.incubator-egg { grid-row:1/3;width:66px;height:66px; }
.incubator-egg img { width:100%;height:100%;object-fit:contain; }
.incubator-info { min-width:0;align-self:center; }
.incubator-info span { color:#a99c7c;font-size:6px;font-weight:900; }
.incubator-info strong { display:block;margin-top:2px;color:#f7e7bd;font-size:10px; }
.incubator-info p { margin-top:3px;color:#beb294;font-size:7px; }
.incubator-card > button { min-width:67px;border:1px solid #171914;border-radius:5px 9px;font-size:7px;font-weight:1000;cursor:pointer; }
#hatchActionButton { grid-column:3;grid-row:1;color:#432918;background:linear-gradient(#ffd36b,#c48134); }
#speedHatchButton { grid-column:2/4;grid-row:2;min-height:25px;color:#ddd0ad;background:#3e4033; }
#speedHatchButton:disabled { opacity:.35;cursor:default; }
.pet-grade-times { flex:0 0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin:0 1px 6px; }
.pet-grade-times span { min-width:0;padding:4px 2px;border-radius:4px 7px;background:rgba(28,31,23,.86);font-size:6px;text-align:center;box-shadow:inset 0 -3px var(--pet-grade,#777); }
.pet-grade-times b { display:block;margin-bottom:2px;color:var(--pet-grade);font-size:6px; }
.pet-inventory-head { flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:5px 7px;border-radius:6px 11px 0 0;background:rgba(20,23,17,.9); }
.pet-inventory-head h3 b { color:#ffc95e; }
.pet-inventory-head span { color:#b6a98b;font-size:6px; }
.pet-inventory { flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);align-content:start;gap:6px;padding:6px;background:rgba(15,18,13,.72); }
.pet-card { min-width:0;display:grid;grid-template-columns:48px 1fr;gap:5px;padding:6px;color:#e9dbb7;border:1px solid #22241c;border-radius:6px 12px;background:linear-gradient(145deg,#56513e,#303229);box-shadow:0 3px #151712;cursor:pointer; }
.pet-card.active,.pet-card.equipped { outline:2px solid #ffc65b;box-shadow:0 0 12px color-mix(in srgb,var(--pet-grade) 38%,transparent),0 3px #151712; }
.pet-card img { width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.pet-card strong { display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:8px;color:#fff0c8; }
.pet-card span { color:var(--pet-grade);font-size:6px;font-weight:900; }
.pet-card p { margin-top:3px;color:#bdb092;font-size:6px;line-height:1.35; }

.rune-summon-banner { flex:0 0 auto;min-height:48px;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:7px;margin:0 2px 7px;padding:5px 9px;color:#efe2bd;border:1px solid rgba(239,204,125,.25);border-radius:7px 14px;background:linear-gradient(145deg,rgba(89,72,44,.95),rgba(28,31,23,.96));box-shadow:inset 0 1px rgba(255,239,191,.11),0 3px #10120d;cursor:pointer;text-align:left; }
.summon-fossil { width:30px;height:30px;border-radius:50% 45% 52% 43%;background:radial-gradient(circle at 55% 48%,#4b3a2c 0 17%,transparent 18%),radial-gradient(circle at 52% 50%,transparent 0 34%,#d3a45a 35% 47%,#796044 48%);box-shadow:0 0 10px rgba(237,174,70,.26); }
.rune-summon-banner small { display:block;color:#c0b18d;font-size:6px;font-weight:900; }
.rune-summon-banner strong { display:block;margin-top:1px;color:#fff0c4;font-size:10px; }
.rune-summon-banner > b { color:#ffd16a;font-size:8px; }
.rune-summon-banner i { font-style:normal;font-size:11px; }
.summon-card { text-align:center; }
.summon-rates { display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:12px 0; }
.summon-rates span { padding:5px 3px;border-radius:4px 8px;background:rgba(14,16,12,.44);color:#d7c9a5;font-size:7px;font-weight:900; }
.summon-result { min-height:130px;display:grid;place-items:center;align-content:center;padding:12px;border:1px solid rgba(240,204,121,.18);border-radius:8px 15px;background:radial-gradient(circle,rgba(242,184,70,.15),transparent 62%),rgba(13,15,11,.4); }
.summon-result i { width:56px;height:56px;display:grid;place-items:center;border-radius:50% 44% 51% 43%;background:linear-gradient(145deg,#98764c,#42382c);color:#ffe19a;font-size:25px;font-style:normal;font-weight:1000;box-shadow:0 0 18px rgba(239,181,66,.24),inset 0 -5px rgba(0,0,0,.18); }
.summon-result strong { margin-top:7px;color:#fff0c7;font-size:14px; }
.summon-result p { margin-top:4px;color:#bfb294;font-size:8px; }
.summon-result.awaken { animation:rune-awaken .55s ease-out; }
@keyframes rune-awaken { 35% { transform:scale(1.04);filter:brightness(1.8);box-shadow:0 0 24px rgba(255,195,74,.36); } }
.summon-wallet { display:flex;justify-content:space-around;margin:9px 0;padding:7px;border-radius:5px 10px;background:rgba(13,15,11,.42);color:#b9ad8e;font-size:8px; }
.summon-wallet b { color:#ffd069; }
.dust-craft-button { width:100%;margin-top:8px;color:#e8dbb8;background:linear-gradient(#514e3e,#313229);box-shadow:0 3px #151712; }

.bottom-nav { grid-template-columns:repeat(5,1fr);padding-inline:7px;gap:3px; }
.bottom-nav button { min-width:0; }
.nav-pet::before { left:3px;top:6px;width:18px;height:14px;border-radius:50% 50% 44% 44%;background:#b6aa8b; }
.nav-pet::after { left:8px;top:1px;width:8px;height:8px;border-radius:50% 50% 0 0;border:2px solid #d19a48;border-bottom:0; }

@media (max-height:720px) {
  .forge-nest-button { right:13px;bottom:-2px;width:112px;height:122px; }
  .pet-hero { flex-basis:170px; }
  .pet-hero > img { width:168px;height:168px; }
  .pet-hero-info { bottom:6px; }
  .incubator-card { margin-top:7px; }
  .pet-grade-times { margin-bottom:4px; }
  .rune-summon-banner { min-height:39px;margin-bottom:5px; }
  .rune-summon-banner .summon-fossil { width:25px;height:25px; }
}

/* v10 — 메인 공룡의 굵은 선·뼈색·하찮은 표정으로 전체 미술 톤 통일 */
:root {
  --dino-ink:#3b281d;
  --dino-paper:#fff8e8;
  --dino-paper-2:#efe2c4;
  --dino-moss:#9ba871;
  --dino-leaf:#6f8054;
  --dino-acorn:#a56e3c;
  --dino-sun:#efbd55;
  --dino-shadow:#b99566;
}

html,body { background:#c7b991; }
.app {
  color:var(--dino-ink);
  background:
    radial-gradient(circle at 13% 18%,rgba(123,139,85,.12) 0 3px,transparent 4px),
    radial-gradient(circle at 82% 72%,rgba(153,108,59,.10) 0 4px,transparent 5px),
    linear-gradient(180deg,#f6ecd2,#e8d7b4);
}
.app::before {
  opacity:.5;
  background:
    repeating-linear-gradient(7deg,transparent 0 26px,rgba(72,49,31,.025) 27px 28px),
    linear-gradient(90deg,rgba(255,255,255,.13),transparent 28% 72%,rgba(72,49,31,.05));
}

.topbar {
  color:var(--dino-ink);
  border-bottom:3px solid var(--dino-ink);
  background:linear-gradient(180deg,#fff9e9,#ebddbd);
  box-shadow:0 4px 0 #b88d55,0 7px 16px rgba(69,43,25,.18);
}
.topbar::after { background:rgba(255,255,255,.55); }
.topbar .kicker { color:#8a704e; }
.topbar h1 { color:var(--dino-ink);text-shadow:0 2px rgba(255,255,255,.75); }
.power-badge {
  color:var(--dino-ink);
  border:2px solid var(--dino-ink);
  border-radius:14px 18px;
  background:#fff8e6;
  box-shadow:inset 0 2px rgba(255,255,255,.8),0 4px 0 #b98b52;
}
.power-badge::before { background:linear-gradient(135deg,#f8d66f,#c9863e);box-shadow:none; }
.power-badge span { color:#806d54; }
.power-badge strong { color:#9b4b35;text-shadow:none; }

#battleView,#forgeView,#petView,#runeView,#analysisView {
  color:var(--dino-ink);
  background:
    radial-gradient(ellipse at 8% 30%,rgba(119,139,76,.13) 0 9%,transparent 10%),
    radial-gradient(ellipse at 94% 77%,rgba(119,139,76,.11) 0 10%,transparent 11%),
    linear-gradient(180deg,#f4e8c9,#e6d3aa);
}
#runeView::before,#petView::before { background:repeating-linear-gradient(4deg,transparent 0 34px,rgba(59,40,29,.025) 35px 36px); }
.section-head,#runeView .section-head,#analysisView .section-head,.forge-head,.pet-head {
  color:var(--dino-ink);
  text-shadow:0 2px rgba(255,255,255,.7);
}
.section-head .kicker,#runeView .section-head .kicker,.pet-head .kicker { color:#7e694a; }

.match-strip > div,.enemy-picker,
.gear-role-rule,.forge-workbench,.incubator-card,.pet-inventory-head,
.rune-summon-banner,.deck-slots button,.rune-board-wrap,.reason-card,.result-card,.metric-card {
  color:var(--dino-ink);
  border:2px solid var(--dino-ink);
  border-radius:13px 18px;
  background:linear-gradient(155deg,#fff9e9,#e9dbbd);
  box-shadow:inset 0 2px rgba(255,255,255,.62),0 4px 0 var(--dino-shadow);
}
.match-strip > div::before,.enemy-picker::before { background:linear-gradient(#d89b43,#8c5d32); }
.match-strip small,.match-strip strong,.gear-role-rule span,.gear-role-rule span b { color:var(--dino-ink); }
.gear-role-rule i { color:#a26835; }

.arena {
  border:3px solid var(--dino-ink);
  border-radius:20px 24px;
  box-shadow:inset 0 0 0 2px rgba(255,248,220,.55),0 6px 0 #ad7c4c,0 11px 22px rgba(72,46,28,.22);
}
.arena::after {
  background:linear-gradient(180deg,rgba(255,248,221,.09),transparent 25% 72%,rgba(91,61,33,.10));
  box-shadow:inset 0 0 26px rgba(74,49,29,.10);
}
.hp-label { color:var(--dino-ink);text-shadow:0 2px rgba(255,255,255,.75); }
.mini-stats { color:var(--dino-ink);background:rgba(255,248,225,.78);text-shadow:none;border:1px solid rgba(59,40,29,.35); }
.versus-mark small,.battle-callout {
  color:var(--dino-ink);
  border:2px solid var(--dino-ink);
  background:#fff7df;
  box-shadow:0 3px 0 #b78d5c;
  text-shadow:none;
}
.battle-clock span { color:var(--dino-ink);border:2px solid var(--dino-ink);background:#fff2c8; }
.battle-hint { color:#6f5c43; }

.primary-button,.secondary-button,.forge-main-button,.forge-sub-button,
.modal-actions button,.dust-craft-button,#hatchActionButton,#speedHatchButton {
  border:2px solid var(--dino-ink);
  border-radius:12px 16px;
  text-shadow:none;
}
.primary-button,.forge-main-button,.modal-actions button,#hatchActionButton {
  color:#4a2e1d;
  background:linear-gradient(#ffd56f,#dfa348);
  box-shadow:inset 0 2px rgba(255,255,255,.42),0 4px 0 #9a6234;
}
.secondary-button,.forge-sub-button,.modal-actions button + button,.dust-craft-button,#speedHatchButton {
  color:var(--dino-ink);
  background:linear-gradient(#f8efd8,#d9c49c);
  box-shadow:0 4px 0 #a8865b;
}

.forge-scene {
  border:3px solid var(--dino-ink);
  border-radius:18px 23px;
  background:
    radial-gradient(ellipse at 82% 100%,rgba(113,132,75,.25) 0 22%,transparent 23%),
    radial-gradient(ellipse at 18% 100%,rgba(113,132,75,.19) 0 18%,transparent 19%),
    linear-gradient(180deg,#dce5bd 0 52%,#c4aa72 53% 55%,#dac08a 56%);
  box-shadow:inset 0 2px rgba(255,255,255,.46),0 5px 0 #9d7045;
}
.forge-scene::after { box-shadow:inset 0 0 20px rgba(66,43,26,.10); }
.forge-level-plaque,.forge-odds span,.forge-dino span,.nest-level,.pet-hero-info {
  color:var(--dino-ink);
  border:2px solid var(--dino-ink);
  background:#fff6dc;
  box-shadow:0 3px 0 #b18557;
}
.forge-level-plaque span,.forge-level-plaque small,.forge-odds span,.forge-dino span,
.pet-hero-info p,.nest-level span { color:#69553c; }
.forge-level-plaque strong,.pet-hero-info strong { color:var(--dino-ink); }
.forge-glow { background:radial-gradient(circle,rgba(239,189,85,.28),transparent 67%); }
.forge-nest-button { right:5px;bottom:-2px;width:154px;height:154px;filter:drop-shadow(0 5px 1px rgba(66,43,26,.2)); }
.forge-nest-button b,.forge-nest-button small { color:var(--dino-ink);text-shadow:0 2px #fff5d8; }

.gear-slot {
  color:var(--dino-ink);
  border:2px solid var(--dino-ink);
  border-radius:11px 15px;
  background:linear-gradient(#fff8e7,#dfcfaa);
  box-shadow:inset 0 2px rgba(255,255,255,.64),0 3px 0 #a78358;
}
.gear-slot .gear-icon { color:var(--dino-ink);background:#f2dfb9;border:1px solid rgba(59,40,29,.35); }
.gear-slot small { color:#746148; }
.forge-selection,.forge-result { color:var(--dino-ink);background:#f5e8cc;border:1px solid rgba(59,40,29,.28); }
.forge-selection span,.forge-result-grade,.forge-selection strong,.forge-result strong,
.forge-selection p,.forge-result p { color:var(--dino-ink); }

.pet-wallet,.forge-wallet,.capacity-meter {
  color:var(--dino-ink);
  border:2px solid var(--dino-ink);
  background:#fff6dc;
  box-shadow:0 3px 0 #af8555;
}
.pet-wallet span,.forge-wallet span,.capacity-meter span { color:#756247; }
.pet-wallet strong,.forge-wallet strong,.capacity-meter strong { color:#8e572d; }
.pet-hero {
  border:3px solid var(--dino-ink);
  border-radius:18px 23px;
  background:
    radial-gradient(circle at 50% 51%,rgba(255,250,227,.78) 0 32%,transparent 33%),
    linear-gradient(180deg,#dbe3b9,#c5d09d 58%,#d7bd85 59%);
  box-shadow:inset 0 2px rgba(255,255,255,.48),0 5px 0 #9d7045;
}
.pet-aura { opacity:.38;background:radial-gradient(circle,#fff5c9,transparent 65%); }
.pet-hero > img { width:245px;height:205px;filter:drop-shadow(0 5px 1px rgba(66,43,26,.18)); }
.nest-level button { border:2px solid var(--dino-ink);background:#efbd55;color:var(--dino-ink);box-shadow:0 2px #9c6537; }
.incubator-card { background:linear-gradient(#fff8e5,#ead9b8); }
.incubator-info span,.incubator-info strong,.incubator-info p { color:var(--dino-ink); }
.pet-grade-times span { color:var(--dino-ink);border:1px solid rgba(59,40,29,.45);background:#f7ebcf;box-shadow:inset 0 -4px var(--pet-grade,#777); }
.pet-inventory-head { border-radius:12px 16px 0 0; }
.pet-grade-times span { display:grid;place-items:center;padding:2px 1px 5px; }
.pet-grade-times img { width:38px;height:27px;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(59,40,29,.13)); }
.pet-grade-times b { margin:0;color:var(--dino-ink);font-size:6px; }
.pet-grade-times small { color:#6f5b42;font-size:5px; }
.pet-inventory-head span { color:#715e44; }
.pet-inventory { background:rgba(232,216,181,.68); }
.pet-card {
  color:var(--dino-ink);
  border:2px solid var(--dino-ink);
  border-radius:12px 17px;
  background:linear-gradient(#fff9e9,#e4d2ad);
  box-shadow:0 3px 0 #a47e51;
}
.pet-card strong,.pet-card p { color:var(--dino-ink); }
.pet-card img { filter:drop-shadow(0 3px 1px rgba(66,43,26,.16)); }

.battle-companion {
  z-index:3;
  left:.5%;
  bottom:80px;
  width:23%;
  transform:rotate(-3deg);
}
.battle-companion img { filter:drop-shadow(0 3px 1px rgba(66,43,26,.2));animation:friend-hide 2.8s ease-in-out infinite; }
.battle-companion span { left:45%;bottom:-2px;color:var(--dino-ink);border:1px solid var(--dino-ink);background:#fff5d8; }
@keyframes friend-hide { 0%,100% { transform:translateX(-3px) translateY(1px) rotate(-2deg); } 50% { transform:translateX(2px) translateY(-2px) rotate(1deg); } }

.rune-summon-banner,.deck-slots button,.rune-board-wrap { background:linear-gradient(155deg,#fff8e7,#e1cfaa); }
.rune-summon-banner small,.rune-summon-banner strong,.rune-summon-banner > b,
.deck-slots button,.deck-slots button span,.board-status,.board-status span,.board-status strong { color:var(--dino-ink); }
.summon-fossil { box-shadow:none; }
.game-modal { background:rgba(59,40,29,.58);backdrop-filter:blur(3px); }
.game-modal-card {
  color:var(--dino-ink);
  border:3px solid var(--dino-ink);
  background:linear-gradient(155deg,#fff9e9,#e7d5b2);
  box-shadow:inset 0 2px rgba(255,255,255,.7),0 7px 0 #8c633e,0 18px 34px rgba(57,35,21,.28);
}
.game-modal-card h3,.game-modal-card > p,.forge-guide-card > small { color:var(--dino-ink); }
.modal-close { color:var(--dino-ink);border:2px solid var(--dino-ink);background:#fff2cd; }
.research-status span,.summon-rates span,.summon-wallet { color:var(--dino-ink);background:rgba(255,249,232,.72);border:1px solid rgba(59,40,29,.25); }
.research-status b,.summon-wallet b { color:#8d552d; }
.research-progress { border:2px solid var(--dino-ink);background:#d7c5a0; }
.research-progress b { color:var(--dino-ink);text-shadow:0 1px #fff4d6; }
.summon-result { border:2px solid var(--dino-ink);background:radial-gradient(circle,#fff4cf,#dfcea9); }
.summon-result strong,.summon-result p { color:var(--dino-ink); }
.bottom-nav {
  border-top:3px solid var(--dino-ink);
  background:linear-gradient(#f7ecd1,#dec9a0);
  box-shadow:0 -4px 0 rgba(177,137,83,.55);
}
.bottom-nav button { color:#756149; }
.bottom-nav button.active { color:var(--dino-ink);border:2px solid var(--dino-ink);background:#fff4d5;box-shadow:0 3px #ae8252; }
.nav-icon::before,.nav-icon::after { filter:sepia(.45); }

@media (max-height:720px) {
  .battle-companion { left:-1%;bottom:63px;width:21%; }
  .forge-nest-button { right:5px;bottom:-3px;width:126px;height:126px; }
  .pet-hero > img { width:190px;height:160px; }
}

/* v11 — 마을 로비, 임무, 일일 던전, 30인 부족 */
#homeView,#missionView,#dungeonView,#tribeView {
  color:var(--dino-ink);
  background:
    radial-gradient(ellipse at 8% 28%,rgba(116,137,77,.12) 0 10%,transparent 11%),
    radial-gradient(ellipse at 94% 80%,rgba(165,110,60,.10) 0 11%,transparent 12%),
    linear-gradient(180deg,#f4e8c9,#e7d3a9);
}
.home-head { flex:0 0 auto;min-height:37px;margin-bottom:5px; }
.tiny-record-button,.wide-back-button,.compact-view-head button {
  border:2px solid var(--dino-ink);border-radius:9px 13px;background:#fff4d6;color:var(--dino-ink);box-shadow:0 3px #af8453;font-size:7px;font-weight:1000;cursor:pointer;
}
.tiny-record-button { padding:6px 9px; }

.arena-gate {
  flex:0 0 158px;overflow:hidden;position:relative;width:100%;padding:0;border:3px solid var(--dino-ink);border-radius:18px 24px;background:linear-gradient(180deg,#c7ddbb 0 48%,#ddc483 49%);box-shadow:inset 0 2px rgba(255,255,255,.5),0 5px #996b40;cursor:pointer;text-align:left;
}
.arena-gate::before { content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 98%,rgba(125,89,46,.25) 0 32%,transparent 33%),radial-gradient(ellipse at 13% 59%,#718a56 0 10%,transparent 11%),radial-gradient(ellipse at 88% 55%,#7e935a 0 13%,transparent 14%); }
.arena-gate-copy { position:absolute;z-index:4;left:12px;top:10px;display:grid;max-width:145px;padding:7px 9px;border:2px solid var(--dino-ink);border-radius:10px 15px;background:rgba(255,247,218,.93);box-shadow:0 3px #ad8251; }
.arena-gate-copy small { color:#765e42;font-size:6px;font-weight:900; }
.arena-gate-copy strong { font-size:17px;letter-spacing:-.04em; }
.arena-gate-copy b { margin-top:3px;color:#9a5d32;font-size:7px; }
.arena-gate-dinos { position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:34px 5px 2px 145px; }
.arena-gate-dinos img { width:48%;height:105px;object-fit:contain;filter:drop-shadow(0 4px 1px rgba(59,40,29,.18)); }
.arena-gate-dinos img:last-child { transform:scaleX(-1); }
.arena-gate-dinos i { align-self:center;color:#8d4c33;font-size:12px;font-style:normal;font-weight:1000;text-shadow:0 2px #fff1c7; }

.home-production {
  flex:0 0 66px;position:relative;display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:5px;margin-top:8px;padding:5px 8px 9px;border:2px solid var(--dino-ink);border-radius:13px 18px;background:linear-gradient(155deg,#fff8e5,#e8d8b7);box-shadow:0 4px var(--dino-shadow);
}
.production-nest { width:58px;height:48px;overflow:hidden; }
.production-nest img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px rgba(59,40,29,.16)); }
.home-production span { color:#79634a;font-size:6px;font-weight:900; }
.home-production strong { display:block;font-size:9px; }
.home-production strong b { color:#9b5d30; }
.home-production p { margin-top:2px;color:#79664d;font-size:6px; }
.home-production button { min-width:55px;padding:8px 5px;border:2px solid var(--dino-ink);border-radius:9px 13px;background:linear-gradient(#ffd36b,#dda045);box-shadow:0 3px #996135;font-size:8px;font-weight:1000;cursor:pointer; }
.home-production button:disabled { opacity:.45;filter:grayscale(.6); }
.production-bar { position:absolute;left:72px;right:72px;bottom:5px;height:4px;overflow:hidden;border-radius:9px;background:#cdb991; }
.production-bar b { display:block;height:100%;border-radius:inherit;background:#7d975a;transition:width .3s; }

.home-quick-grid { flex:0 0 78px;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px; }
.home-quick { overflow:hidden;position:relative;display:grid;grid-template-columns:49px 1fr;align-items:center;gap:4px;padding:6px;border:2px solid var(--dino-ink);border-radius:13px 17px;background:#fff4d7;box-shadow:0 4px var(--dino-shadow);cursor:pointer;text-align:left; }
.home-quick i { width:45px;height:54px;border-radius:10px 14px;background:linear-gradient(145deg,#7a8f60,#3e563e);box-shadow:inset 0 0 0 3px rgba(255,246,215,.3); }
.home-quick.dungeon i::after { content:"";display:block;width:24px;height:30px;margin:17px auto 0;border-radius:15px 15px 3px 3px;background:#272d27;box-shadow:inset 0 0 0 4px #b7905a; }
.home-quick.mission i { background:linear-gradient(145deg,#e8c56e,#bd7b42); }
.home-quick.mission i::after { content:"✓";display:grid;place-items:center;width:29px;height:34px;margin:10px auto 0;border:2px solid var(--dino-ink);border-radius:5px 8px;background:#fff1cb;font-size:19px;font-style:normal;font-weight:1000; }
.home-quick small,.tribe-banner small { display:block;color:#7d684d;font-size:5px;font-weight:900; }
.home-quick strong,.tribe-banner strong { display:block;font-size:10px; }
.home-quick b,.tribe-banner b { display:block;margin-top:2px;color:#986038;font-size:6px; }

.tribe-banner { flex:0 0 70px;overflow:hidden;position:relative;display:grid;grid-template-columns:43px 1fr 74px;align-items:center;gap:6px;width:100%;margin-top:8px;padding:6px 8px;border:2px solid var(--dino-ink);border-radius:13px 19px;background:linear-gradient(155deg,#dce3b9,#c6b278);box-shadow:0 4px var(--dino-shadow);cursor:pointer;text-align:left; }
.tribe-badge { width:38px;height:38px;display:grid;place-items:center;border:2px solid var(--dino-ink);border-radius:50% 45% 48% 44%;background:#8da069;color:#fff9dd;font-size:14px;font-weight:1000;box-shadow:0 3px #6e5437; }
.tribe-boss { position:absolute;right:-3px;bottom:-18px;width:90px;height:84px;background:url("assets/dino-fighter-v1.png") center/contain no-repeat;filter:sepia(.45) saturate(1.8) brightness(.72) drop-shadow(0 3px rgba(59,40,29,.2));transform:scaleX(-1) rotate(-4deg); }

.today-board { flex:1 1 auto;min-height:0;overflow:hidden;margin-top:8px;border:2px solid var(--dino-ink);border-radius:12px 17px;background:rgba(255,247,220,.76);box-shadow:0 4px var(--dino-shadow); }
.today-board header { display:flex;justify-content:space-between;padding:5px 8px;border-bottom:1px solid rgba(59,40,29,.23);font-size:8px;font-weight:1000; }
.today-board header b { color:#9a5b31; }
.today-board > div { min-height:25px;display:grid;grid-template-columns:1fr auto;align-items:center;padding:3px 7px;border-bottom:1px dashed rgba(59,40,29,.17);font-size:7px;font-weight:800; }
.today-board button { min-width:46px;padding:4px;border:1px solid var(--dino-ink);border-radius:6px 9px;background:#f0bd56;font-size:6px;font-weight:1000;cursor:pointer; }
.today-board button:disabled { color:#786a55;background:#d8c9aa; }

.compact-view-head { flex:0 0 32px;display:grid;grid-template-columns:65px 1fr auto;align-items:center;gap:6px;margin-bottom:6px; }
.compact-view-head button { height:27px; }
.compact-view-head strong { text-align:center;font-size:11px; }
.compact-view-head span { color:#776249;font-size:6px;font-weight:900; }

.mission-summary { flex:0 0 auto;padding:9px 11px;border:2px solid var(--dino-ink);border-radius:13px 18px;background:linear-gradient(145deg,#dce4b9,#f1d68c);box-shadow:0 4px var(--dino-shadow); }
.mission-summary span { color:#786046;font-size:6px;font-weight:900; }
.mission-summary strong { display:block;margin-top:2px;font-size:10px; }
.mission-summary p { margin-top:4px;color:#725d45;font-size:6px;line-height:1.35; }
.mission-tabs { flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 6px; }
.mission-tabs button { padding:7px;border:2px solid var(--dino-ink);border-radius:9px 13px;background:#e1cfaa;font-size:8px;font-weight:1000;cursor:pointer; }
.mission-tabs button.active { background:#f0bd56;box-shadow:0 3px #a16b3d; }
.mission-list { flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;align-content:start;gap:6px;padding:1px 2px 6px; }
.mission-card { display:grid;grid-template-columns:42px 1fr 66px;align-items:center;gap:7px;padding:6px;border:2px solid var(--dino-ink);border-radius:11px 16px;background:linear-gradient(#fff8e5,#e8d8b5);box-shadow:0 3px var(--dino-shadow); }
.mission-card > i { width:38px;height:38px;display:grid;place-items:center;border:2px solid var(--dino-ink);border-radius:50% 44% 49% 43%;background:#c9d59f;color:#5f523e;font-size:11px;font-style:normal;font-weight:1000; }
.mission-card.complete > i { background:#efc45e; }
.mission-card strong { display:block;font-size:8px; }
.mission-card p { margin-top:1px;color:#756249;font-size:6px; }
.mission-card span { display:block;margin-top:2px;color:#9b5a31;font-size:6px;font-weight:900; }
.mission-card em { display:block;height:4px;margin-top:4px;border-radius:5px;background:#cfbc96; }
.mission-card em b { display:block;height:100%;border-radius:inherit;background:#81975c; }
.mission-card button { padding:7px 3px;border:2px solid var(--dino-ink);border-radius:8px 11px;background:#efbd55;font-size:6px;font-weight:1000;cursor:pointer; }
.mission-card button small { display:block;margin-top:2px;font-size:5px; }
.mission-card button:disabled { color:#756954;background:#d9c9a8; }
.rune-value-note { margin:-4px 0 8px;padding:5px 7px;border:1px dashed rgba(59,40,29,.38);border-radius:7px;background:#fff5d9;color:#7b6248;font-size:6px;font-weight:900; }

.view-lead { flex:0 0 auto;margin:-2px 1px 7px;color:#705c43;font-size:7px;line-height:1.4; }
.dungeon-keys,.tribe-count { padding:6px 8px;border:2px solid var(--dino-ink);border-radius:9px 13px;background:#fff4d7;box-shadow:0 3px #ad8150;font-size:7px;font-weight:900; }
.dungeon-list { flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;align-content:start;gap:9px;padding:1px 2px 6px; }
.dungeon-card { min-height:113px;display:grid;grid-template-columns:92px 1fr 54px;align-items:center;gap:8px;padding:7px;border:2px solid var(--dino-ink);border-radius:14px 19px;background:#f7ebcf;box-shadow:0 4px var(--dino-shadow); }
.dungeon-art { height:94px;overflow:hidden;position:relative;border:2px solid var(--dino-ink);border-radius:11px 15px;background:linear-gradient(160deg,#7e9363,#354534); }
.dungeon-art::before { content:"";position:absolute;left:17px;right:17px;bottom:-4px;height:68px;border-radius:50% 50% 8px 8px;background:#252b26;box-shadow:inset 0 0 0 6px #9d7a4f; }
.dungeon-card.rune .dungeon-art { background:linear-gradient(155deg,#7b719c,#35344e); }
.dungeon-card.egg .dungeon-art { background:linear-gradient(155deg,#d9c77e,#74845a); }
.dungeon-art i { position:absolute;z-index:2;left:34px;top:31px;width:22px;height:29px;border-radius:55% 48% 50% 45%;background:#f5ddb2;box-shadow:inset -4px -3px rgba(148,93,47,.25); }
.dungeon-card.rune .dungeon-art i { border-radius:50% 44%;background:#b99cdc;box-shadow:0 0 10px #e5c9ff; }
.dungeon-art b { position:absolute;z-index:3;right:4px;bottom:3px;color:#fff4d6;font-size:7px; }
.dungeon-card small { color:#8b603b;font-size:6px;font-weight:1000; }
.dungeon-card strong { display:block;margin-top:2px;font-size:10px; }
.dungeon-card p { margin-top:5px;color:#756149;font-size:6px; }
.dungeon-card span { display:block;margin-top:4px;color:#995a31;font-size:7px;font-weight:1000; }
.dungeon-card button,.raid-attack-button,.wide-back-button { padding:9px 4px;border:2px solid var(--dino-ink);border-radius:9px 13px;background:linear-gradient(#ffd36b,#dda045);box-shadow:0 3px #966036;font-size:7px;font-weight:1000;cursor:pointer; }
.dungeon-card button:disabled,.raid-attack-button:disabled { opacity:.42;filter:grayscale(.6); }
.wide-back-button { flex:0 0 auto;width:100%;margin-top:5px;background:#fff1ce; }

.tribe-raid-hero { flex:0 0 198px;overflow:hidden;position:relative;border:3px solid var(--dino-ink);border-radius:18px 23px;background:linear-gradient(180deg,#737c72,#393d36 53%,#72583e 54%);box-shadow:inset 0 2px rgba(255,255,255,.18),0 5px #8e633e; }
.raid-moon { position:absolute;right:25px;top:18px;width:72px;height:72px;border-radius:50%;background:#ecd985;box-shadow:0 0 18px rgba(242,218,132,.45); }
.tribe-raid-hero > img { position:absolute;right:-10px;bottom:-25px;width:235px;height:190px;object-fit:contain;transform:scaleX(-1) rotate(-4deg) scale(1.15);filter:sepia(.5) saturate(2) brightness(.48) contrast(1.15) drop-shadow(0 7px 2px rgba(0,0,0,.28)); }
.raid-eye { position:absolute;z-index:3;right:72px;top:87px;width:8px;height:8px;border-radius:50%;background:#ff694f;box-shadow:0 0 10px #ff4c3b; }
.raid-copy { position:absolute;z-index:4;left:11px;top:12px;width:185px;padding:8px 9px;border:2px solid #e8d8b1;border-radius:10px 15px;background:rgba(45,40,31,.83);color:#fff1c8; }
.raid-copy small { color:#d6ba72;font-size:6px;font-weight:900; }
.raid-copy strong { display:block;font-size:15px; }
.raid-copy p { margin-top:3px;color:#e2d4b2;font-size:6px;line-height:1.4; }
.raid-hp { position:absolute;z-index:4;left:11px;right:11px;bottom:10px; }
.raid-hp span { display:flex;justify-content:space-between;color:#fff0c4;font-size:7px;font-weight:900; }
.raid-hp > i { display:block;height:11px;margin-top:3px;padding:2px;border:2px solid #ead9b4;border-radius:8px;background:#2a2a26; }
.raid-hp > i b { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#c64b3d,#ef9d4b);transition:width .3s; }
.raid-phases { flex:0 0 46px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px; }
.raid-phases span { display:flex;align-items:center;justify-content:center;gap:3px;border:2px solid var(--dino-ink);border-radius:9px 12px;background:#d6c39e;color:#77634b;font-size:6px;font-weight:900; }
.raid-phases span b { width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#aa8e64;color:#fff3d0; }
.raid-phases .done { background:#c9d8a4;color:var(--dino-ink); }
.raid-phases .active { background:#efc45f;color:var(--dino-ink);box-shadow:0 3px #a66e3e; }
.raid-attack-button { flex:0 0 35px;width:100%;margin-top:7px; }
.tribe-war-card { flex:0 0 auto;margin-top:8px;padding:8px;border:2px solid var(--dino-ink);border-radius:12px 17px;background:#fff3d4;box-shadow:0 4px var(--dino-shadow); }
.tribe-war-card header { display:flex;justify-content:space-between;align-items:center; }
.tribe-war-card small { display:block;color:#846b4d;font-size:5px;font-weight:900; }
.tribe-war-card strong { font-size:9px; }
.tribe-war-card header > b { color:#9b5334;font-size:10px; }
.war-days { display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:6px; }
.war-days span { padding:4px 1px;border-radius:5px 7px;background:#ddcaa4;color:#806b50;font-size:6px;text-align:center; }
.war-days span b { font-size:5px; }
.war-days .done { background:#b7ca8e;color:#3e482f; }
.war-days .active { background:#efbd55;color:#4b321f;box-shadow:inset 0 -3px #ad713c; }
.tribe-war-card p { margin-top:5px;color:#745f47;font-size:6px;text-align:center; }
.tribe-menu-grid { flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px; }
.tribe-menu-grid button { border:2px solid var(--dino-ink);border-radius:10px 14px;background:linear-gradient(#fff7df,#dfcea9);box-shadow:0 3px var(--dino-shadow);cursor:pointer; }
.tribe-menu-grid b { display:block;font-size:8px; }
.tribe-menu-grid span { color:#77634b;font-size:6px; }

.nav-home::before { left:4px;top:8px;width:17px;height:13px;border:2px solid currentColor;border-radius:2px 2px 7px 7px;background:currentColor;clip-path:polygon(0 37%,50% 0,100% 37%,100% 100%,0 100%); }
.nav-home::after { left:10px;top:14px;width:5px;height:7px;background:#f5e7c7;border-radius:2px 2px 0 0; }
.nav-tribe::before { left:2px;top:7px;width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:8px -3px 0 currentColor,16px 0 0 currentColor; }
.nav-tribe::after { left:0;top:15px;width:25px;height:8px;border-radius:50% 50% 4px 4px;background:currentColor; }

@media (max-height:720px) {
  .home-head { min-height:31px;margin-bottom:3px; }
  .arena-gate { flex-basis:143px; }
  .home-production { flex-basis:58px;margin-top:6px; }
  .home-quick-grid { flex-basis:70px;margin-top:6px; }
  .tribe-banner { flex-basis:62px;margin-top:6px; }
  .today-board { margin-top:6px; }
  .tribe-raid-hero { flex-basis:174px; }
  .raid-phases { flex-basis:40px;margin-top:6px; }
  .tribe-war-card { margin-top:6px; }
  .mission-summary { padding:7px 9px; }
  .mission-tabs { margin:6px 0 4px; }
  .mission-card { padding:4px 6px; }
  .dungeon-card { min-height:101px; }
}

/* v13 — 별똥별을 바라보는 아기 공룡들의 스킬룬 소환 장면 */
.meteor-summon-card {
  max-height:calc(100% - 6px);
  overflow:hidden;
  padding:12px 11px 11px;
  text-align:center;
}
.meteor-summon-card h3 { margin-top:0;font-size:17px; }
.meteor-summon-card .summon-lead { margin:3px 34px 7px;font-size:7px;line-height:1.35; }
.meteor-summon-card .modal-close:disabled { opacity:.35;cursor:default; }
.meteor-summon-scene {
  --summon-color:#d9d7c6;
  --summon-glow:rgba(236,232,202,.62);
  height:195px;
  overflow:hidden;
  position:relative;
  border:3px solid var(--dino-ink);
  border-radius:15px 22px 13px 20px;
  background:
    radial-gradient(circle at 71% 21%,rgba(206,223,180,.11) 0 2px,transparent 3px),
    linear-gradient(180deg,#243643 0 58%,#536651 59% 72%,#354937 73%);
  box-shadow:inset 0 2px rgba(255,255,255,.1),0 4px #9b7045;
  isolation:isolate;
  transition:filter .25s,background .25s;
}
.meteor-summon-scene::before {
  content:"";
  position:absolute;z-index:1;left:-7%;right:-7%;bottom:17px;height:54px;
  background:
    radial-gradient(ellipse at 12% 80%,#293a2d 0 11%,transparent 12%),
    radial-gradient(ellipse at 29% 78%,#304532 0 15%,transparent 16%),
    radial-gradient(ellipse at 53% 84%,#263b2c 0 17%,transparent 18%),
    radial-gradient(ellipse at 78% 78%,#304830 0 15%,transparent 16%),
    radial-gradient(ellipse at 96% 82%,#273b2c 0 13%,transparent 14%);
}
.meteor-summon-scene::after {
  content:"";
  position:absolute;z-index:8;inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 51% 53%,var(--summon-color),transparent 8%,var(--summon-glow) 18%,transparent 43%);
}
.summon-night-stars { position:absolute;z-index:0;inset:0 0 54px; }
.summon-night-stars i { position:absolute;width:2px;height:2px;border-radius:50%;background:#fff6c7;box-shadow:0 0 5px #fff1a3;animation:summon-twinkle 1.8s ease-in-out infinite alternate; }
.summon-night-stars i:nth-child(1) { left:10%;top:18%; }
.summon-night-stars i:nth-child(2) { left:23%;top:34%;animation-delay:.7s; }
.summon-night-stars i:nth-child(3) { left:41%;top:13%;animation-delay:.3s; }
.summon-night-stars i:nth-child(4) { left:62%;top:31%;animation-delay:1.1s; }
.summon-night-stars i:nth-child(5) { left:81%;top:15%;animation-delay:.5s; }
.summon-night-stars i:nth-child(6) { left:92%;top:39%;animation-delay:.9s; }
.summon-moon { position:absolute;z-index:0;right:18px;top:13px;width:38px;height:38px;border-radius:50%;background:#efe2a6;box-shadow:0 0 17px rgba(239,226,166,.28); }
.summon-moon::after { content:"";position:absolute;left:-8px;top:-5px;width:38px;height:38px;border-radius:50%;background:#273947; }
.summon-meteor {
  position:absolute;z-index:7;left:82%;top:-34px;width:19px;height:19px;
  opacity:0;border-radius:52% 46% 55% 43%;
  background:radial-gradient(circle at 40% 35%,#fff 0 8%,var(--summon-color) 26%,#72543b 72%);
  box-shadow:0 0 9px 3px var(--summon-glow);
  transform:translate(0,0) rotate(-35deg) scale(.35);
}
.summon-meteor::before {
  content:"";position:absolute;left:9px;top:-49px;width:9px;height:58px;border-radius:50%;
  background:linear-gradient(0deg,var(--summon-color),transparent);
  filter:blur(2px);transform:rotate(35deg);transform-origin:bottom;
}
.summon-meteor i { position:absolute;inset:-10px;border:1px solid var(--summon-color);border-radius:50%;opacity:.6; }
.meteor-impact { position:absolute;z-index:7;left:50%;top:51%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%) scale(.1);opacity:0;background:#fff;box-shadow:0 0 0 7px var(--summon-color),0 0 34px 20px var(--summon-glow); }
.rune-birth {
  position:absolute;z-index:10;left:50%;top:47%;width:58px;height:63px;
  display:grid;place-items:center;align-content:center;
  opacity:0;transform:translate(-50%,-28%) scale(.1) rotate(-12deg);
  border:3px solid var(--dino-ink);border-radius:48% 43% 51% 45%;
  background:radial-gradient(circle at 40% 30%,#fff7da,var(--summon-color) 57%,#6f4d34 120%);
  box-shadow:0 5px #4c3425,0 0 25px var(--summon-glow);
}
.rune-birth i { color:var(--dino-ink);font-size:22px;font-style:normal;font-weight:1000;line-height:1; }
.rune-birth b { margin-top:2px;padding:2px 5px;border-radius:8px;background:var(--dino-ink);color:#fff4d6;font-size:5px; }
.dino-watch-party { position:absolute;z-index:5;inset:auto 0 24px;height:74px; }
.watch-dino { position:absolute;bottom:0;width:62px;height:62px;transform-origin:center bottom; }
.watch-dino img { width:100%;height:100%;object-fit:contain;filter:sepia(.13) saturate(.82) brightness(.94) drop-shadow(0 3px 1px rgba(23,28,20,.35)); }
.watch-one { left:2%;transform:rotate(6deg) scale(.86); }
.watch-two { left:18%;bottom:-4px;transform:rotate(-4deg) scale(.72); }
.watch-three { left:38%;bottom:-6px;transform:rotate(1deg) scale(.64); }
.watch-four { right:18%;bottom:-4px;transform:scaleX(-1) rotate(-4deg) scale(.72); }
.watch-five { right:2%;transform:scaleX(-1) rotate(6deg) scale(.86); }
.meteor-summon-scene > p { position:absolute;z-index:12;left:7px;right:7px;bottom:5px;margin:0;color:#fff1c7;font-size:6px;font-weight:1000;text-shadow:0 1px 2px #1c251f; }
.meteor-summon-scene[data-rarity="green"] { --summon-color:#8fdd8d;--summon-glow:rgba(112,231,129,.68); }
.meteor-summon-scene[data-rarity="blue"] { --summon-color:#78c9ff;--summon-glow:rgba(86,178,255,.74); }
.meteor-summon-scene[data-rarity="yellow"] { --summon-color:#ffd65d;--summon-glow:rgba(255,199,55,.88); }
.meteor-summon-scene[data-rarity="red"] { --summon-color:#ff6b57;--summon-glow:rgba(255,68,52,.9);background:linear-gradient(180deg,#382735 0 58%,#69574a 59% 72%,#443c34 73%); }
.meteor-summon-scene[data-rarity="purple"] { --summon-color:#d58cff;--summon-glow:rgba(188,79,255,.96);background:radial-gradient(ellipse at 50% 0,#43306f,#1f293f 52%,#506450 53% 72%,#334736 73%); }
.meteor-summon-scene.summoning .summon-meteor { animation:meteor-fall 1.05s cubic-bezier(.32,.04,.62,1) forwards; }
.meteor-summon-scene.summoning .meteor-impact { animation:meteor-hit .7s .82s ease-out forwards; }
.meteor-summon-scene.summoning::after { animation:sky-impact .72s .8s ease-out; }
.meteor-summon-scene.summoning .watch-dino { animation:dino-look-up .52s .38s ease-in-out 2 alternate; }
.meteor-summon-scene.summoning .watch-two { animation-delay:.43s; }
.meteor-summon-scene.summoning .watch-three { animation-delay:.48s; }
.meteor-summon-scene.summoning .watch-four { animation-delay:.4s; }
.meteor-summon-scene.summoning .watch-five { animation-delay:.46s; }
.meteor-summon-scene.revealed .rune-birth { animation:rune-rise .62s cubic-bezier(.18,1.38,.43,1) forwards; }
.meteor-summon-scene[data-rarity="yellow"].summoning,
.meteor-summon-scene[data-rarity="red"].summoning,
.meteor-summon-scene[data-rarity="purple"].summoning { animation:rare-sky-shake .15s .92s linear 4; }
.meteor-summon-scene[data-rarity="purple"].revealed .rune-birth { box-shadow:0 5px #4c3425,0 0 18px 7px #cb78ff,0 0 45px 18px rgba(107,52,255,.52); }
@keyframes summon-twinkle { to { opacity:.25;transform:scale(.55); } }
@keyframes meteor-fall { 0% { opacity:0;transform:translate(0,0) rotate(-35deg) scale(.35); } 12% { opacity:1; } 78% { opacity:1;transform:translate(-116px,111px) rotate(-35deg) scale(1); } 100% { opacity:0;transform:translate(-129px,124px) rotate(-35deg) scale(1.18); } }
@keyframes meteor-hit { 0% { opacity:0;transform:translate(-50%,-50%) scale(.1); } 16% { opacity:1; } 100% { opacity:0;transform:translate(-50%,-50%) scale(7); } }
@keyframes sky-impact { 0% { opacity:0; } 22% { opacity:.95; } 100% { opacity:0; } }
@keyframes dino-look-up { to { translate:0 -5px;rotate:-3deg;filter:brightness(1.25); } }
@keyframes rune-rise { 0% { opacity:0;transform:translate(-50%,-20%) scale(.1) rotate(-12deg); } 60% { opacity:1;transform:translate(-50%,-58%) scale(1.12) rotate(3deg); } 100% { opacity:1;transform:translate(-50%,-53%) scale(1) rotate(0); } }
@keyframes rare-sky-shake { 25% { translate:-2px 1px; } 75% { translate:2px -1px; } }
.meteor-summon-card .summon-result {
  min-height:59px;display:grid;grid-template-columns:43px 1fr;gap:7px;align-items:center;
  margin-top:7px;padding:5px 8px;text-align:left;
}
.meteor-summon-card .summon-result > i { width:40px;height:40px;font-size:18px; }
.meteor-summon-card .summon-result strong { display:block;margin:0;font-size:10px; }
.meteor-summon-card .summon-result p { margin-top:2px;font-size:6px; }
.meteor-summon-card .summon-result.waiting > i { animation:waiting-star .55s ease-in-out infinite alternate; }
@keyframes waiting-star { to { transform:rotate(28deg) scale(1.12);filter:brightness(1.35); } }
.summon-grade-counts { display:flex;flex-wrap:wrap;gap:2px;margin-top:3px; }
.summon-grade-counts span { padding:1px 3px;border-radius:4px;background:rgba(59,40,29,.12);font-size:5px;font-weight:900; }
.summon-grade-counts .grade-green { color:#397543; }
.summon-grade-counts .grade-blue { color:#2b6eaa; }
.summon-grade-counts .grade-yellow { color:#9b6c06; }
.summon-grade-counts .grade-red { color:#b63e34; }
.summon-grade-counts .grade-purple { color:#8236aa; }
.meteor-summon-card .summon-wallet { margin:5px 0;padding:4px;font-size:7px; }
.meteor-summon-card .summon-actions { grid-template-columns:repeat(3,1fr);gap:5px; }
.meteor-summon-card .summon-actions button { min-height:39px;padding:4px 2px; }
.meteor-summon-card .summon-actions button b { display:block;font-size:9px; }
.meteor-summon-card .summon-actions button small { display:block;margin-top:1px;font-size:5px; }
.meteor-summon-card .summon-actions button:nth-child(2) { color:#fff2d3;background:linear-gradient(#7e8563,#515942); }
.meteor-summon-card .summon-actions button:nth-child(3) { color:#fff0cf;background:linear-gradient(#7d5a8e,#4b385a); }
.meteor-summon-card .summon-rates { grid-template-columns:repeat(6,1fr);gap:2px;margin:7px 0 4px; }
.meteor-summon-card .summon-rates span { min-width:0;padding:3px 1px;font-size:5px; }
.meteor-summon-card .summon-rates b { display:block;margin-top:1px;font-size:5px; }
.meteor-summon-card .rune-value-note { margin:0 0 5px;padding:3px 5px;font-size:5px; }
.meteor-summon-card .dust-craft-button { min-height:27px;margin-top:0;font-size:6px; }
@media (max-height:720px) {
  .meteor-summon-scene { height:170px; }
  .meteor-summon-card .summon-result { min-height:52px;margin-top:5px; }
  .meteor-summon-card .summon-wallet { margin:4px 0; }
  .meteor-summon-card .summon-rates { margin-top:5px; }
}

/* v14 — 주식회사 최상 오프닝과 첫 발자국 튜토리얼 */
.game-opening[hidden],.tutorial-layer[hidden] { display:none !important; }
.game-opening {
  position:fixed;z-index:500;left:50%;top:0;width:min(100%,480px);height:100dvh;
  overflow:hidden;transform:translateX(-50%);background:#151b17;
  box-shadow:0 0 80px rgba(0,0,0,.72);
}
.game-opening.closing { animation:opening-close .42s ease-in forwards; }
@keyframes opening-close { to { opacity:0;filter:brightness(1.5);transform:translateX(-50%) scale(1.025); } }
.opening-company {
  position:absolute;z-index:20;inset:0;display:grid;place-items:center;align-content:center;
  color:#45301f;background:
    radial-gradient(circle at 50% 43%,rgba(255,231,159,.7),transparent 27%),
    linear-gradient(160deg,#fff8e6,#dbc18d);
  transition:opacity .55s ease,transform .55s ease;
}
.opening-company::before,.opening-company::after { content:"";position:absolute;width:92px;height:2px;top:57%;background:linear-gradient(90deg,transparent,#7d5a35); }
.opening-company::before { left:7%; }
.opening-company::after { right:7%;transform:scaleX(-1); }
.company-egg { width:92px;height:108px;position:relative;border:5px solid #493322;border-radius:52% 49% 48% 46%;background:linear-gradient(145deg,#fff9dd,#e7c777);box-shadow:0 8px #9a6e3d,0 18px 35px rgba(82,54,29,.2);animation:company-egg-breathe 1.3s ease-in-out infinite alternate; }
.company-egg::before,.company-egg::after { content:"";position:absolute;border-radius:50%;background:#a7b970; }
.company-egg::before { left:18px;top:24px;width:16px;height:21px;transform:rotate(-24deg); }
.company-egg::after { right:18px;top:48px;width:21px;height:14px;transform:rotate(18deg); }
.company-egg b { position:absolute;left:50%;top:49%;width:37px;height:31px;transform:translate(-50%,-50%); }
.company-egg b::before,.company-egg b::after { content:"";position:absolute;top:7px;width:7px;height:9px;border-radius:50%;background:#493322; }
.company-egg b::before { left:5px; }.company-egg b::after { right:5px; }
.opening-company > span { margin-top:29px;color:#8a704f;font-size:8px;font-weight:1000;letter-spacing:.22em; }
.opening-company > strong { margin-top:5px;font-size:25px;letter-spacing:-.04em; }
.opening-company > small { margin-top:7px;color:#8b7253;font-size:8px;font-weight:800; }
@keyframes company-egg-breathe { to { transform:translateY(-5px) rotate(1deg); } }
.game-opening:not([data-scene="company"]) .opening-company { opacity:0;pointer-events:none;transform:scale(1.05); }
.opening-world {
  position:absolute;inset:0;overflow:hidden;opacity:0;
  background:#6f8d58 url("assets/jurassic-arena-v1.png") center/cover no-repeat;
  transition:opacity .65s ease,filter .5s ease;
}
.game-opening:not([data-scene="company"]) .opening-world { opacity:1; }
.opening-world::before { content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(255,243,187,.05),transparent 52%,rgba(54,44,27,.26)); }
.opening-world::after { content:"";position:absolute;z-index:2;left:-15%;right:-15%;bottom:-6%;height:27%;background:radial-gradient(ellipse at center,rgba(95,116,61,.5),transparent 67%);filter:blur(12px); }
.opening-skip { position:absolute;z-index:40;right:13px;top:max(13px,env(safe-area-inset-top));padding:7px 10px;border:2px solid rgba(66,46,30,.68);border-radius:18px;background:rgba(255,247,217,.78);color:#624a34;font-size:7px;font-weight:1000;backdrop-filter:blur(7px);cursor:pointer; }
.opening-sunbeam { position:absolute;z-index:1;left:8%;top:-20%;width:70%;height:60%;background:linear-gradient(120deg,rgba(255,245,183,.42),transparent 42%);filter:blur(18px);transform:rotate(14deg);animation:sunbeam-shift 4s ease-in-out infinite alternate; }
@keyframes sunbeam-shift { to { translate:25px 8px;opacity:.6; } }
.opening-leaves { position:absolute;z-index:12;inset:0;pointer-events:none; }
.opening-leaves i { position:absolute;top:-20px;width:9px;height:17px;border-radius:80% 10% 70% 20%;background:#849859;animation:opening-leaf 4.8s linear infinite; }
.opening-leaves i:nth-child(1) { left:8%;animation-delay:.3s; }.opening-leaves i:nth-child(2) { left:28%;animation-delay:2.1s;transform:scale(.7); }.opening-leaves i:nth-child(3) { left:54%;animation-delay:1.2s; }.opening-leaves i:nth-child(4) { left:76%;animation-delay:3.2s;transform:scale(.75); }.opening-leaves i:nth-child(5) { left:91%;animation-delay:1.8s; }
@keyframes opening-leaf { to { translate:-48px 105dvh;rotate:540deg; } }
.opening-runner,.opening-dino { position:absolute;z-index:8;pointer-events:none; }
.opening-runner img,.opening-dino img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 3px rgba(46,40,26,.28)); }
.opening-runner { width:64px;height:64px;opacity:0; }
.runner-far-one { left:-80px;bottom:43%;transform:scale(.56); }
.runner-far-two { right:-80px;bottom:39%;transform:scaleX(-1) scale(.48); }
.runner-friend { left:-70px;bottom:28%;width:54px;height:54px;transform:scale(.7); }
.game-opening[data-scene="forest"] .runner-far-one { opacity:.72;animation:small-run-right 4.1s .2s linear infinite; }
.game-opening[data-scene="forest"] .runner-far-two { opacity:.62;animation:small-run-left 5s 1.1s linear infinite; }
.game-opening[data-scene="forest"] .runner-friend { opacity:.8;animation:friend-run 4.6s 1.7s linear infinite; }
@keyframes small-run-right { 0% { left:-80px;translate:0 0; } 48% { translate:0 -5px; } 100% { left:110%;translate:0 0; } }
@keyframes small-run-left { 0% { right:-80px;translate:0 0; } 48% { translate:0 -4px; } 100% { right:110%;translate:0 0; } }
@keyframes friend-run { 0% { left:-70px;rotate:-5deg; } 50% { rotate:5deg; } 100% { left:110%;rotate:-5deg; } }
.opening-dino { width:148px;height:148px;bottom:18%;opacity:0;transition:left .72s cubic-bezier(.2,.8,.3,1),right .72s cubic-bezier(.2,.8,.3,1),bottom .6s,transform .6s,opacity .3s; }
.opening-hero { left:-170px; }
.opening-rival { right:-170px;transform:scaleX(-1); }
.game-opening[data-scene="forest"] .opening-hero { opacity:1;animation:hero-run-in 3.1s ease-in-out forwards; }
@keyframes hero-run-in { 0% { left:-170px;bottom:17%;rotate:-5deg; } 20% { bottom:20%;rotate:4deg; } 48% { bottom:17%;rotate:-3deg; } 74% { bottom:20%;rotate:3deg; } 100% { left:38%;bottom:17%;rotate:0; } }
.game-opening[data-scene="encounter"] .opening-hero { left:16%;bottom:18%;opacity:1;transform:rotate(5deg);animation:hero-brake .52s ease-out; }
.game-opening[data-scene="encounter"] .opening-rival { right:13%;bottom:18%;opacity:1;transform:scaleX(-1) rotate(5deg);animation:rival-brake .52s ease-out; }
@keyframes hero-brake { 35% { translate:22px 0;rotate:-7deg; } 70% { translate:-7px 0; } }
@keyframes rival-brake { 35% { translate:-22px 0;rotate:7deg; } 70% { translate:7px 0; } }
.opening-apple { position:absolute;z-index:10;left:50%;bottom:22%;width:45px;height:43px;opacity:0;transform:translateX(-50%) scale(.1);transition:opacity .3s,transform .55s cubic-bezier(.18,1.35,.42,1); }
.opening-apple::before { content:"";position:absolute;left:3px;top:7px;width:38px;height:35px;border:4px solid #4b2e20;border-radius:48% 48% 52% 52%;background:#e45948;box-shadow:inset -7px -7px rgba(157,47,43,.25),0 5px 2px rgba(68,43,25,.2); }
.opening-apple i { position:absolute;z-index:2;left:21px;top:0;width:5px;height:14px;border-radius:4px;background:#5b3925;transform:rotate(12deg); }
.opening-apple b { position:absolute;z-index:2;left:25px;top:1px;width:16px;height:9px;border-radius:80% 10% 80% 10%;background:#7b9b4c;transform:rotate(-17deg); }
.game-opening[data-scene="encounter"] .opening-apple,.game-opening[data-scene="quarrel"] .opening-apple { opacity:1;transform:translateX(-50%) scale(1); }
.opening-bump { position:absolute;z-index:15;left:50%;bottom:43%;opacity:0;transform:translateX(-50%) scale(.2) rotate(-8deg);color:#fff5cf;font-size:23px;font-weight:1000;text-shadow:-2px -2px #583624,2px 2px #583624; }
.game-opening[data-scene="encounter"] .opening-bump { animation:bump-pop .7s .15s ease-out; }
@keyframes bump-pop { 20% { opacity:1;transform:translateX(-50%) scale(1.25) rotate(7deg); } 100% { opacity:0;transform:translateX(-50%) translateY(-22px) scale(.8); } }
.opening-anger { position:absolute;z-index:17;bottom:31%;opacity:0;color:#d84b3e;font-size:32px;font-weight:1000;text-shadow:0 2px #fff0c4; }
.anger-left { left:21%;transform:rotate(-18deg); }.anger-right { right:21%;transform:scaleX(-1) rotate(-18deg); }
.game-opening[data-scene="quarrel"] .opening-hero,.game-opening[data-scene="title"] .opening-hero { left:9%;bottom:20%;opacity:1;transform:scale(1.12) rotate(3deg); }
.game-opening[data-scene="quarrel"] .opening-rival,.game-opening[data-scene="title"] .opening-rival { right:7%;bottom:20%;opacity:1;transform:scaleX(-1) scale(1.12) rotate(3deg); }
.game-opening[data-scene="quarrel"] .opening-hero img,.game-opening[data-scene="quarrel"] .opening-rival img { animation:angry-huff .42s ease-in-out infinite alternate; }
.game-opening[data-scene="quarrel"] .opening-anger { opacity:1;animation:anger-hop .55s ease-in-out infinite alternate; }
@keyframes angry-huff { to { translate:0 -5px;filter:drop-shadow(0 7px 3px rgba(46,40,26,.28)) saturate(1.18); } }
@keyframes anger-hop { to { translate:0 -7px;rotate:7deg; } }
.opening-caption { position:absolute;z-index:30;left:28px;right:28px;bottom:10%;padding:10px 12px;border:2px solid #4a3423;border-radius:15px 19px;background:rgba(255,247,218,.9);color:#513d2d;font-size:9px;font-weight:1000;text-align:center;box-shadow:0 4px #92663d;backdrop-filter:blur(7px);transition:opacity .25s,translate .4s; }
.opening-title-card { position:absolute;z-index:35;left:20px;right:20px;bottom:7%;padding:17px 15px 15px;border:3px solid #493221;border-radius:18px 27px;background:linear-gradient(155deg,rgba(255,249,225,.96),rgba(231,207,155,.96));box-shadow:0 7px #805a36,0 17px 40px rgba(49,33,20,.32);opacity:0;transform:translateY(55px) scale(.92);pointer-events:none;text-align:center;transition:opacity .55s,transform .55s cubic-bezier(.2,1.22,.35,1); }
.opening-title-card > span { color:#956b3e;font-size:7px;font-weight:1000;letter-spacing:.12em; }
.opening-title-card h2 { margin-top:4px;color:#3c291d;font-size:28px; }
.opening-title-card p { margin-top:5px;color:#735b43;font-size:8px; }
.opening-title-card button { width:100%;margin-top:13px;padding:12px;border:3px solid #3f2a1d;border-radius:12px 18px;background:linear-gradient(#ffd56b,#e59a3f);box-shadow:0 5px #9d5b31;color:#432a1a;font-size:12px;font-weight:1000;cursor:pointer; }
.game-opening[data-scene="title"] .opening-world { filter:saturate(.92) brightness(.86); }
.game-opening[data-scene="title"] .opening-caption { opacity:0;translate:0 30px; }
.game-opening[data-scene="title"] .opening-title-card { opacity:1;transform:translateY(0) scale(1);pointer-events:auto; }
.game-opening[data-scene="title"] .opening-dino { bottom:51%;width:132px;height:132px; }
.game-opening[data-scene="title"] .opening-apple { opacity:1;bottom:54%;transform:translateX(-50%) scale(.82); }

.home-head-actions { display:flex;gap:4px; }
.home-head-actions .tiny-record-button { padding-inline:7px; }
.tutorial-layer {
  position:fixed;z-index:490;left:50%;top:0;width:min(100%,480px);height:100dvh;
  transform:translateX(-50%);background:rgba(53,39,25,.48);backdrop-filter:blur(2px);
}
.tutorial-layer.leaving { animation:tutorial-leave .22s ease-in forwards; }
@keyframes tutorial-leave { to { opacity:0; } }
.tutorial-focus-ring { position:absolute;left:20px;right:20px;top:90px;height:190px;border:3px solid rgba(255,224,131,.65);border-radius:25px;box-shadow:0 0 0 999px rgba(50,36,24,.2),0 0 20px rgba(255,218,100,.28);animation:focus-breathe 1.3s ease-in-out infinite alternate; }
@keyframes focus-breathe { to { box-shadow:0 0 0 999px rgba(50,36,24,.2),0 0 30px rgba(255,218,100,.58); } }
.tutorial-card { position:absolute;z-index:3;left:13px;right:13px;bottom:max(13px,env(safe-area-inset-bottom));padding:12px;border:3px solid var(--dino-ink);border-radius:18px 26px 17px 23px;background:linear-gradient(155deg,#fff9e8,#e7d1a7);box-shadow:0 7px #825a36,0 20px 45px rgba(45,30,18,.38); }
.tutorial-card header { display:flex;align-items:center;justify-content:space-between; }
.tutorial-card header span { color:#997044;font-size:7px;font-weight:1000;letter-spacing:.08em; }
.tutorial-card header button { padding:4px 7px;border:1px solid rgba(59,40,29,.35);border-radius:12px;background:#eee0bf;color:#7a654c;font-size:6px;font-weight:900;cursor:pointer; }
.tutorial-visual { height:115px;overflow:hidden;position:relative;margin:7px 0 9px;border:2px solid var(--dino-ink);border-radius:13px 18px;background:linear-gradient(180deg,#bcd5b4,#e7d39e 58%,#778b58 59%); }
.tutorial-card h2 { font-size:15px;text-align:center; }
.tutorial-card > p { min-height:35px;margin:5px 9px 0;color:#705b43;font-size:7px;line-height:1.45;text-align:center; }
.tutorial-progress { display:flex;justify-content:center;gap:4px;margin:7px 0; }
.tutorial-progress i { width:17px;height:4px;border-radius:5px;background:#c2ac85; }
.tutorial-progress i.active { background:#c57c38; }
.tutorial-next { width:100%;padding:10px;border:2px solid var(--dino-ink);border-radius:10px 15px;background:linear-gradient(#ffd46d,#e7a044);box-shadow:0 4px #995d34;font-size:9px;font-weight:1000;cursor:pointer; }
.tutorial-next:disabled { opacity:.55; }
.tutorial-duel { position:absolute;inset:0; }
.tutorial-duel span { position:absolute;bottom:4px;width:100px;height:100px; }
.tutorial-duel span:first-child { left:20px; }.tutorial-duel span:nth-of-type(2) { right:20px;transform:scaleX(-1); }
.tutorial-duel img { width:100%;height:100%;object-fit:contain; }
.tutorial-duel > i { position:absolute;left:50%;bottom:19px;transform:translateX(-50%);font-size:22px;font-style:normal; }
.tutorial-duel > b { position:absolute;left:50%;top:15px;opacity:0;transform:translateX(-50%) scale(.2);color:#fff8d8;font-size:24px;text-shadow:-2px -2px #5a3521,2px 2px #5a3521; }
.tutorial-visual.activated .tutorial-duel span:first-child { animation:tutorial-bite-left .5s ease-out; }
.tutorial-visual.activated .tutorial-duel span:nth-of-type(2) { animation:tutorial-bite-right .5s ease-out; }
.tutorial-visual.activated .tutorial-duel > b { animation:tutorial-ang .5s ease-out; }
@keyframes tutorial-bite-left { 50% { translate:38px -3px;rotate:5deg; } }
@keyframes tutorial-bite-right { 50% { translate:-38px -3px;rotate:-5deg; } }
@keyframes tutorial-ang { 30% { opacity:1;transform:translateX(-50%) scale(1.25) rotate(-7deg); } 100% { opacity:0;transform:translateX(-50%) translateY(-15px) scale(.8); } }
.tutorial-luck { height:100%;display:grid;grid-template-columns:1fr 24px 1fr;align-items:center;gap:4px;padding:10px 25px; }
.tutorial-luck > span { display:grid;place-items:center;padding:8px;border:2px solid var(--dino-ink);border-radius:15px;background:#fff1c8;box-shadow:0 4px #97704a; }
.tutorial-luck i { font-size:20px;font-style:normal; }.tutorial-luck b { font-size:11px; }.tutorial-luck small { color:#7e674c;font-size:6px; }
.tutorial-luck em { font-size:24px;font-style:normal;font-weight:1000;text-align:center; }
.tutorial-luck span:first-child { animation:luck-first 1s ease-in-out infinite alternate; }
@keyframes luck-first { to { translate:0 -5px;box-shadow:0 4px #97704a,0 0 15px #ffd75c; } }
.tutorial-rune { height:100%;position:relative;display:grid;place-items:center;align-content:center; }
.tutorial-rune > i { position:absolute;left:24px;top:13px;color:#fff5b9;font-size:24px;font-style:normal;animation:rune-star-fall 1.4s ease-in-out infinite; }
.tutorial-rune > b { width:55px;height:55px;display:grid;place-items:center;border:3px solid var(--dino-ink);border-radius:49% 43% 51% 44%;background:#86b6d9;box-shadow:0 0 16px #c6e9ff;font-size:13px; }
.tutorial-rune > span { position:absolute;left:50%;top:12px;width:2px;height:35px;background:linear-gradient(#fff8b5,transparent);transform:rotate(34deg); }
.tutorial-rune strong { position:absolute;right:47px;top:29px;font-size:25px;animation:lightning-pop .8s ease-in-out infinite alternate; }
.tutorial-rune small { margin-top:7px;color:#4e4435;font-size:7px;font-weight:1000; }
@keyframes rune-star-fall { 50% { translate:80px 42px;rotate:180deg; } 51%,100% { opacity:0; } }
@keyframes lightning-pop { to { filter:brightness(1.5);transform:scale(1.2) rotate(7deg); } }
.tutorial-growth { height:100%;display:grid;grid-template-columns:1fr 15px 1fr 15px 1fr;align-items:center;gap:2px;padding:15px 10px; }
.tutorial-growth span { height:72px;display:grid;place-items:center;align-content:center;border:2px solid var(--dino-ink);border-radius:12px 17px;background:#fff2cc;box-shadow:0 4px #98704a; }
.tutorial-growth i { font-size:19px;font-style:normal; }.tutorial-growth b { margin-top:3px;font-size:6px; }.tutorial-growth em { font-size:14px;font-style:normal;font-weight:1000;text-align:center; }
.tutorial-growth span:nth-of-type(1) { animation:growth-pop 1.2s ease-in-out infinite alternate; }.tutorial-growth span:nth-of-type(2) { animation:growth-pop 1.2s .35s ease-in-out infinite alternate; }.tutorial-growth span:nth-of-type(3) { animation:growth-pop 1.2s .7s ease-in-out infinite alternate; }
@keyframes growth-pop { to { translate:0 -5px;filter:brightness(1.08); } }
.tutorial-ready { height:100%;position:relative;display:flex;align-items:center;justify-content:center;gap:13px; }
.tutorial-ready > img { width:95px;height:95px;object-fit:contain;animation:ready-dino 1s ease-in-out infinite alternate; }
.tutorial-ready > span { display:grid;gap:4px; }.tutorial-ready > span i { min-width:76px;padding:5px 7px;border:2px solid var(--dino-ink);border-radius:8px 12px;background:#fff1c9;font-size:7px;font-style:normal;font-weight:1000;text-align:center; }
.tutorial-ready > b { position:absolute;left:50%;top:7px;transform:translateX(-50%);color:#9a5e31;font-size:9px; }
@keyframes ready-dino { to { translate:0 -5px;rotate:-3deg; } }
@media (max-height:720px) {
  .opening-title-card { bottom:5%;padding-block:12px; }
  .opening-title-card button { margin-top:9px;padding:9px; }
  .tutorial-card { padding:9px 10px; }
  .tutorial-visual { height:96px;margin:5px 0 6px; }
  .tutorial-card > p { min-height:29px; }
  .tutorial-progress { margin:5px 0; }
  .tutorial-next { padding:8px; }
}

/* v17 — 이름, 통합 타이머, 확률 안내, 부족 물품과 성장 상점 */
.name-edit-button { width:23px;height:23px;margin-left:3px;padding:0;border:2px solid var(--dino-ink);border-radius:50%;background:#ffe08b;color:var(--dino-ink);font-size:10px;font-weight:1000;vertical-align:3px;cursor:pointer;box-shadow:0 2px #a97a43; }
.home-head-actions { display:flex;gap:4px; }

.home-timer-board { flex:0 0 61px;margin-top:7px;padding:5px 6px;border:2px solid var(--dino-ink);border-radius:11px 16px;background:rgba(255,247,222,.83);box-shadow:0 3px var(--dino-shadow); }
.home-timer-board header { display:flex;justify-content:space-between;margin-bottom:4px;padding:0 2px;color:#756048;font-size:6px;font-weight:1000; }
.home-timer-board header b { color:#9a5c32; }
#homeTimerCards { display:grid;grid-template-columns:repeat(3,1fr);gap:4px; }
#homeTimerCards button { min-width:0;height:34px;display:grid;grid-template-columns:23px 1fr;align-items:center;gap:3px;padding:3px;border:1px solid #9a7a55;border-radius:7px 10px;background:#e4d4b2;color:#78664f;text-align:left;cursor:pointer; }
#homeTimerCards button.active { border:2px solid var(--dino-ink);background:#fff0c8;color:var(--dino-ink); }
#homeTimerCards i { width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#9aaa70;color:#fff6d7;font-size:7px;font-style:normal;font-weight:1000; }
#homeTimerCards span { min-width:0;font-size:5px;font-weight:900;white-space:nowrap; }
#homeTimerCards b { display:block;overflow:hidden;margin-top:1px;color:#95562f;font-size:6px;text-overflow:ellipsis; }

.home-quick-grid { flex-basis:63px;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px; }
.home-quick { grid-template-columns:32px 1fr;gap:3px;padding:4px; }
.home-quick i { width:29px;height:42px; }
.home-quick.dungeon i::after { width:18px;height:23px;margin-top:14px;box-shadow:inset 0 0 0 3px #b7905a; }
.home-quick.mission i::after { width:21px;height:27px;margin-top:7px;font-size:14px; }
.home-quick.shop i { background:linear-gradient(145deg,#cda968,#875c37); }
.home-quick.shop i::after { content:"◆";display:grid;place-items:center;width:22px;height:22px;margin:9px auto 0;border:2px solid var(--dino-ink);border-radius:50%;background:#ffe38b;color:#9b5a32;font-size:10px;font-style:normal; }
.home-quick strong { font-size:8px; }
.home-quick small,.home-quick b { font-size:4.7px; }
.arena-gate { flex-basis:143px; }
.home-production { flex-basis:58px;margin-top:7px; }
.tribe-banner { flex-basis:61px;margin-top:7px; }
.today-board { margin-top:7px; }

#shopView { color:var(--dino-ink);background:linear-gradient(180deg,#f4e8c9,#e7d3a9); }
.shop-hero { flex:0 0 116px;display:grid;grid-template-columns:105px 1fr;align-items:center;gap:9px;padding:10px;border:3px solid var(--dino-ink);border-radius:17px 23px;background:linear-gradient(150deg,#d8e1ac,#f0ce79);box-shadow:0 5px #93683e; }
.shop-hero > i { width:92px;height:88px;position:relative;border:2px solid var(--dino-ink);border-radius:48% 46% 44% 49%;background:#fff1c7;box-shadow:inset 0 -9px #d7bd80; }
.shop-hero > i::before { content:"";position:absolute;left:15px;top:23px;width:59px;height:42px;border:3px solid var(--dino-ink);border-radius:7px 7px 20px 20px;background:#9e7547;box-shadow:inset 0 7px #c99a59; }
.shop-hero > i::after { content:"◆";position:absolute;left:34px;top:34px;color:#ffe27a;font-size:19px;font-style:normal; }
.shop-hero small { color:#786148;font-size:6px;font-weight:900; }.shop-hero strong { display:block;font-size:14px; }.shop-hero p { margin-top:5px;color:#6f5c45;font-size:7px;line-height:1.4; }
.shop-wallet { flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px; }
.shop-wallet span { padding:7px 4px;border:2px solid var(--dino-ink);border-radius:8px 11px;background:#fff2ce;color:#725d45;font-size:6px;font-weight:900;text-align:center; }.shop-wallet b { display:block;margin-top:2px;color:#975c32;font-size:10px; }
.shop-tabs,.tribe-activity-tabs,.gear-help-tabs { flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:8px 0 6px; }
.shop-tabs button,.tribe-activity-tabs button,.gear-help-tabs button { padding:7px 3px;border:2px solid var(--dino-ink);border-radius:8px 11px;background:#ddcaa5;font-size:7px;font-weight:1000;cursor:pointer; }.shop-tabs button.active,.tribe-activity-tabs button.active,.gear-help-tabs button.active { background:#efbd55;box-shadow:0 3px #9d693c; }
.shop-product-list { flex:1;min-height:0;overflow-y:auto;display:grid;align-content:start;gap:8px;padding:1px 2px 5px; }
.shop-product { min-height:84px;display:grid;grid-template-columns:55px 1fr 78px;align-items:center;gap:7px;padding:8px;border:2px solid var(--dino-ink);border-radius:12px 17px;background:linear-gradient(#fff8e4,#e2cfa9);box-shadow:0 4px var(--dino-shadow); }
.shop-product > i { width:51px;height:51px;display:grid;place-items:center;border:2px solid var(--dino-ink);border-radius:50% 45% 48% 43%;background:#9bad76;color:#fff4ca;font-size:19px;font-style:normal; }.shop-product small { color:#9c5c31;font-size:6px;font-weight:1000; }.shop-product strong { display:block;font-size:10px; }.shop-product p { margin-top:3px;color:#715d46;font-size:7px; }
.shop-product button { padding:8px 3px;border:2px solid var(--dino-ink);border-radius:9px 13px;background:linear-gradient(#ffd56c,#dc9841);box-shadow:0 3px #966036;cursor:pointer; }.shop-product button b,.shop-product button span { display:block;font-size:8px;font-weight:1000; }.shop-product button span { margin-top:2px;font-size:6px; }
.shop-product button:disabled { cursor:not-allowed;filter:grayscale(.65);opacity:.5;box-shadow:0 2px #8c806e; }

.rune-recycle-guide { margin:8px 0;padding:9px;border:2px solid var(--dino-ink);border-radius:14px 18px;background:linear-gradient(145deg,#30291f,#4b3d2a);color:#fff4d2;box-shadow:0 4px #1d1813; }
.rune-recycle-guide header { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.rune-recycle-guide header small { display:block;color:#d9bc80;font-size:6px;font-weight:1000;letter-spacing:.8px; }
.rune-recycle-guide header strong { display:block;font-size:10px; }
.rune-recycle-guide header > span { padding:5px 7px;border:1px solid #a98c59;border-radius:9px;background:#201c17;font-size:7px;font-weight:900;white-space:nowrap; }
.rune-recycle-guide > div { display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:7px; }
.rune-recycle-guide > div span { padding:5px 3px;border:1px solid currentColor;border-radius:7px;background:#241f19;text-align:center;font-size:7px;font-weight:1000; }
.rune-recycle-guide > div b { display:block;margin-top:2px;color:#f7e7c0;font-size:6px; }
.rune-recycle-guide p { margin:6px 1px 0;color:#d8c9a9;font-size:6px;line-height:1.45; }
.rune-inspector-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.prototype-payment-note { flex:0 0 auto;margin-top:5px;color:#776249;font-size:5.5px;text-align:center; }

.tribe-activity-card,.gear-help-card { width:calc(100% - 4px);height:min(580px,calc(100% - 28px));max-height:calc(100% - 28px);min-height:0;overflow:hidden;display:flex;flex-direction:column; }
.tribe-activity-tabs,.gear-help-tabs { margin-top:10px; }
.tribe-leaf-wallet { padding:7px;border:2px solid var(--dino-ink);border-radius:8px 11px;background:#fff2ce;font-size:7px;font-weight:900;text-align:center; }.tribe-leaf-wallet b { color:#966035;font-size:11px; }
.tribe-activity-list,.gear-help-list { min-height:0;overflow-y:auto;display:grid;align-content:start;gap:7px;margin-top:7px;padding:1px 2px 5px; }
.tribe-item { display:grid;grid-template-columns:42px 1fr 65px;align-items:center;gap:7px;padding:7px;border:2px solid var(--dino-ink);border-radius:11px 15px;background:#fff2d2; }
.tribe-item > i { width:38px;height:38px;display:grid;place-items:center;border:2px solid var(--dino-ink);border-radius:50%;background:#a0ae75;color:#fff5cf;font-size:8px;font-style:normal;font-weight:1000; }.tribe-item strong { display:block;font-size:8px; }.tribe-item p { margin-top:2px;color:#756149;font-size:6px; }.tribe-item span { display:block;margin-top:3px;color:#995d34;font-size:6px;font-weight:900; }
.tribe-item button { padding:6px 2px;border:2px solid var(--dino-ink);border-radius:8px 11px;background:#efbd55;font-size:7px;font-weight:1000;cursor:pointer; }.tribe-item button small { display:block;margin-top:2px;font-size:5px; }.tribe-item button:disabled { opacity:.45;filter:grayscale(.5); }
.tribe-item em { display:block;height:4px;margin-top:4px;border-radius:4px;background:#d2bd95; }.tribe-item em b { display:block;height:100%;border-radius:inherit;background:#82985e; }

.equipment-title-row { flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;margin:6px 1px 4px; }.equipment-title-row strong { display:block;font-size:9px; }.equipment-title-row span { color:#827058;font-size:5px; }.equipment-title-row button { padding:5px 7px;border:2px solid var(--dino-ink);border-radius:8px 11px;background:#ffe18b;font-size:6px;font-weight:1000;cursor:pointer;box-shadow:0 2px #9e6c3c; }
.gear-help-current { display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:9px; }.gear-help-current span { padding:7px;border:1px solid #9f835f;border-radius:7px 10px;background:#fff2cf;font-size:6px;text-align:center; }.gear-help-current b { display:block;margin-top:2px;color:#965b32;font-size:10px; }
.gear-help-tabs { grid-template-columns:1fr 1fr; }
.gear-rate-row,.gear-option-row { display:grid;grid-template-columns:30px 1fr 86px 47px;align-items:center;gap:5px;padding:6px;border:1px solid #a88b66;border-radius:8px 11px;background:#fff4d8; }
.gear-rate-row i,.gear-option-row i { width:27px;height:27px;display:grid;place-items:center;border:2px solid var(--dino-ink);border-radius:50%;background:var(--rate-color,#d8c8a8);font-size:7px;font-style:normal;font-weight:1000; }.gear-rate-row strong,.gear-option-row strong { font-size:7px; }.gear-rate-row span,.gear-option-row span { color:#7a6750;font-size:5.5px; }.gear-rate-row > b,.gear-option-row > b { color:#995b32;font-size:9px;text-align:right; }.gear-help-card > small { margin-top:7px;color:#756149;font-size:6px;line-height:1.45;text-align:center; }

.name-editor-card { max-width:390px; }.name-input-wrap { display:block;margin-top:14px; }.name-input-wrap > span { display:block;margin-bottom:5px;font-size:7px;font-weight:1000; }.name-input-wrap input { width:100%;padding:12px 45px 12px 11px;border:2px solid var(--dino-ink);border-radius:10px 14px;background:#fff8e3;font-size:14px;font-weight:900;outline:none; }.name-input-wrap input:focus { box-shadow:0 0 0 4px rgba(239,189,85,.35); }.name-input-wrap small { float:right;margin:-29px 10px 0 0;position:relative;color:#8a745a;font-size:7px; }.name-save-button { width:100%;margin-top:12px;padding:11px;border:2px solid var(--dino-ink);border-radius:10px 14px;background:linear-gradient(#ffd66d,#dc9942);box-shadow:0 4px #93603a;font-size:9px;font-weight:1000;cursor:pointer; }

.bottom-nav { grid-template-columns:repeat(6,1fr);gap:2px;padding-inline:5px; }
.bottom-nav button { min-width:0;padding-inline:1px; }
.nav-mission::before { left:4px;top:4px;width:17px;height:20px;border:2px solid currentColor;border-radius:3px;background:transparent; }.nav-mission::after { content:"✓";left:8px;top:6px;width:11px;height:11px;color:currentColor;background:transparent;font-size:11px;font-weight:1000; }

@media (max-height:720px) {
  .arena-gate { flex-basis:126px; }
  .home-production { flex-basis:52px;margin-top:5px; }
  .home-timer-board { flex-basis:56px;margin-top:5px; }
  .home-quick-grid { flex-basis:57px;margin-top:5px; }
  .tribe-banner { flex-basis:54px;margin-top:5px; }
  .today-board { margin-top:5px; }
}

/* v18 — 다이노 앙 브랜딩, 확장형 룬 도감, 등급별 전투 연출 */
.topbar-brand { min-width:0;display:flex;align-items:center;gap:8px; }
.topbar-brand > img { width:40px;height:40px;flex:0 0 40px;border:2px solid var(--dino-ink);border-radius:10px 14px;object-fit:cover;box-shadow:0 3px #98703f; }
.topbar-brand > div { min-width:0; }
.topbar-brand h1 { line-height:1;letter-spacing:-.055em; }

.opening-company { gap:0; }
.opening-company::before,.opening-company::after { top:69%;width:72px; }
.opening-app-icon { width:142px;height:142px;display:block;border:5px solid #493322;border-radius:31px 42px 34px 45px;object-fit:cover;background:#fff1bd;box-shadow:0 8px #9a6e3d,0 20px 38px rgba(82,54,29,.24);animation:opening-icon-breathe 1.45s ease-in-out infinite alternate; }
.opening-company > span { margin-top:24px;color:#8a704f;font-size:8px;font-weight:1000;letter-spacing:.12em; }
.opening-company > strong { margin-top:3px;color:#3d2a1d;font-size:34px;letter-spacing:-.075em;text-shadow:0 2px #fff2c8; }
.opening-company > small { margin-top:12px;padding:5px 9px;border:1px solid rgba(97,69,42,.32);border-radius:999px;background:rgba(255,248,220,.7);color:#7e684d;font-size:7px;font-weight:900;letter-spacing:.04em; }
@keyframes opening-icon-breathe { to { transform:translateY(-6px) rotate(1.4deg);box-shadow:0 11px #9a6e3d,0 25px 42px rgba(82,54,29,.2); } }

.rune-picker-title { flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 9px;border:1px solid rgba(240,205,125,.25);border-radius:9px 15px 5px 5px;background:linear-gradient(135deg,rgba(28,32,23,.96),rgba(58,54,39,.95));box-shadow:0 3px #141610;color:#fff0c7; }
.rune-picker-title > div { min-width:0;display:grid; }
.rune-picker-title small { color:#c3a762;font-size:5px;font-weight:1000;letter-spacing:.12em; }
.rune-picker-title strong { margin-top:1px;font-size:11px; }
.rune-picker-title span { margin-top:2px;overflow:hidden;color:#bdb091;font-size:6px;white-space:nowrap;text-overflow:ellipsis; }
.rune-picker-title button { flex:0 0 auto;padding:7px 9px;border:2px solid #392b1c;border-radius:8px 12px;background:linear-gradient(#ffd870,#c98b39);box-shadow:0 3px #6f4726;color:#3b291c;font-size:7px;font-weight:1000;cursor:pointer; }
.rune-picker-title button[aria-pressed="true"] { background:linear-gradient(#bcd889,#76965d); }

#runeView .inventory-head { margin-top:4px;padding-block:7px; }
#runeView .inventory-head h3 { font-size:10px; }
#runeView .inventory-head input { width:148px;padding:8px 10px;font-size:8px; }
#runeView .collection-filters,#runeView .branch-filters,#runeView .socket-filters,#runeView #runeFilters { padding-block:5px; }
#runeView .filters button,#runeView .branch-filters button,#runeView .socket-filters button { min-height:26px;padding:6px 9px;font-size:7px; }
#runeView .rune-inventory { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:6px;padding:5px 5px 20px; }
#runeView .rune-card { min-height:132px;padding:11px 10px 10px;border-width:2px;border-radius:10px 17px 11px 16px; }
#runeView .rune-card::before { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 17%,rgba(255,227,150,.11),transparent 26%),repeating-linear-gradient(132deg,transparent 0 15px,rgba(255,255,255,.025) 16px 17px); }
#runeView .rune-card .rune-symbol { width:40px;height:40px;border:2px solid rgba(255,235,185,.22);font-size:15px;box-shadow:inset 0 -5px rgba(0,0,0,.17),0 3px 6px rgba(0,0,0,.18); }
#runeView .rune-card > .socket-mark { left:47px;top:14px;width:14px;height:14px; }
#runeView .rune-card strong { margin-top:7px;padding-right:34px;font-size:11px;line-height:1.15; }
#runeView .rune-card p { min-height:30px;margin-top:5px;font-size:8px;line-height:1.45; }
#runeView .rune-card .rune-blueprint { margin-top:5px;font-size:7px; }
#runeView .rune-card .rune-meta { top:9px;right:9px;gap:3px; }
#runeView .rune-card .rune-meta b { padding:2px 5px;border-radius:999px;background:var(--grade);color:#2f291f;font-size:7px; }
#runeView .rune-card .rune-meta span { font-size:7px; }
#runeView .rune-card::after { height:7px;box-shadow:0 -2px 8px color-mix(in srgb,var(--grade) 55%,transparent); }
#runeView .locked-silhouette { width:40px;height:40px;font-size:17px; }

#runeView.library-expanded .rune-summon-banner,
#runeView.library-expanded .deck-slots,
#runeView.library-expanded .rune-board-wrap,
#runeView.library-expanded .rune-inspector { display:none; }
#runeView.library-expanded .rune-picker-title { margin-top:0;padding-block:11px; }
#runeView.library-expanded .rune-picker-title strong { font-size:14px; }
#runeView.library-expanded .rune-picker-title span { font-size:7px; }
#runeView.library-expanded .inventory-head { margin-top:7px; }
#runeView.library-expanded .rune-inventory { padding-bottom:28px; }

/* 전설·신화로 갈수록 같은 룬도 크기, 빛, 충격파가 단계적으로 강해진다. */
.skill-fx { --fx-scale:1;--fx-glow:#ffe466; }
.skill-fx.fx-green { --fx-scale:.9;--fx-glow:#96ee8a; }
.skill-fx.fx-blue { --fx-scale:1;--fx-glow:#73c8ff; }
.skill-fx.fx-yellow { --fx-scale:1.12;--fx-glow:#fff074; }
.skill-fx.fx-red { --fx-scale:1.28;--fx-glow:#ff7958; }
.skill-fx.fx-purple { --fx-scale:1.48;--fx-glow:#cf86ff; }

.skill-fx.lightning { width:82px;height:220px;margin-left:-24px;margin-top:-92px;border-radius:45%;background:radial-gradient(ellipse at 50% 88%,color-mix(in srgb,var(--fx-glow) 55%,transparent),transparent 47%);filter:drop-shadow(0 0 8px var(--fx-glow)) drop-shadow(0 0 19px var(--fx-glow));animation:dino-lightning-strike .68s steps(2,end) forwards; }
.skill-fx.lightning::before,.skill-fx.lightning::after { content:"";position:absolute;left:50%;top:-32px;width:5px;height:224px;transform:translateX(-50%) skewX(-10deg);background:linear-gradient(180deg,transparent 0 2%,#fff 3% 72%,var(--fx-glow) 73% 100%);clip-path:polygon(42% 0,100% 0,65% 31%,100% 31%,39% 63%,71% 63%,0 100%,25% 62%,0 62%,48% 31%,19% 31%); }
.skill-fx.lightning::after { width:3px;left:30%;opacity:.65;transform:translateX(-50%) scale(.72) skewX(14deg); }
.skill-fx .lightning-bolt { position:absolute;inset:-24px -20px 0;border-radius:50%;box-shadow:inset 0 0 30px color-mix(in srgb,var(--fx-glow) 35%,transparent); }
.skill-fx .lightning-impact { position:absolute;left:50%;bottom:10px;width:96px;height:30px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#fff 0 7%,var(--fx-glow) 8% 25%,transparent 66%);animation:rune-impact-burst .58s .11s ease-out both; }

.skill-fx.meteor { width:92px;height:92px;margin-left:-20px;margin-top:-45px;border:0;border-radius:54% 46% 49% 51%;background:radial-gradient(circle at 62% 33%,#fff8c5 0 8%,#ffb43e 9% 28%,#ed5b31 29% 51%,#64342b 52% 72%,#2c2520 73%);box-shadow:-26px -28px 0 -17px var(--fx-glow),-55px -58px 0 -34px #ff783e,0 0 28px var(--fx-glow);animation:dino-meteor-slam .88s cubic-bezier(.28,.72,.25,1) forwards; }
.skill-fx.meteor::before { content:"";position:absolute;right:55px;bottom:54px;width:190px;height:49px;transform:rotate(43deg);transform-origin:right center;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(255,79,43,.22) 28%,var(--fx-glow) 75%,#fff8d4);filter:blur(4px); }
.skill-fx.meteor::after { content:"";position:absolute;right:91px;bottom:94px;width:25px;height:25px;border-radius:50%;background:#ff9a3e;box-shadow:-52px 7px 0 -6px #ffd45b,-91px -7px 0 -9px #ee5b38;opacity:.88; }
.skill-fx .meteor-core { position:absolute;inset:15px;border:3px solid rgba(255,237,173,.45);border-radius:55% 45% 52% 48%;transform:rotate(28deg); }
.skill-fx .ground-crack { position:absolute;z-index:-1;left:50%;top:72px;width:165px;height:66px;transform:translateX(-50%);opacity:0;background:repeating-conic-gradient(from 8deg at 50% 35%,transparent 0 9deg,rgba(83,47,28,.9) 10deg 12deg,transparent 13deg 31deg);clip-path:polygon(0 24%,43% 36%,49% 0,54% 36%,100% 16%,61% 52%,90% 100%,54% 65%,49% 100%,44% 64%,7% 100%,39% 51%);animation:ground-crack-open .62s .43s ease-out both; }
.skill-fx .impact-ring { position:absolute;left:50%;bottom:-19px;width:92px;height:35px;transform:translateX(-50%);border:5px solid var(--fx-glow);border-radius:50%;opacity:0;animation:rune-ring-spread .62s .34s ease-out both; }
.skill-fx.fx-purple .impact-ring { box-shadow:0 0 0 9px rgba(180,104,255,.28),0 0 28px #d78dff; }

.arena.rune-quake { transform-origin:50% 88%;animation:arena-rune-quake .56s linear; }
.arena.rune-quake::before { content:"";position:absolute;z-index:30;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.38),transparent 52%);animation:rune-screen-flash .48s ease-out forwards; }
.arena.rune-quake.quake-purple::before { background:radial-gradient(circle at 50% 55%,rgba(255,244,196,.62),rgba(188,95,255,.25) 33%,transparent 67%); }

@keyframes dino-lightning-strike { 0% { opacity:0;transform:scale(var(--fx-scale)) scale(.55) translateY(-42px); } 12%,22% { opacity:1; } 27% { opacity:.12; } 35%,67% { opacity:1;transform:scale(var(--fx-scale)) translateY(0); } 100% { opacity:0;transform:scale(var(--fx-scale)) scale(1.08); } }
@keyframes dino-meteor-slam { 0% { opacity:0;transform:translate(180px,-340px) rotate(-115deg) scale(var(--fx-scale)) scale(.42); } 11% { opacity:1; } 58% { opacity:1;transform:translate(18px,-28px) rotate(220deg) scale(var(--fx-scale)); } 66% { transform:translate(0,0) rotate(260deg) scale(var(--fx-scale)) scale(1.08); } 78% { opacity:1;transform:translate(0,3px) rotate(268deg) scale(var(--fx-scale)); } 100% { opacity:0;transform:translate(0,7px) rotate(275deg) scale(var(--fx-scale)) scale(1.18); } }
@keyframes rune-impact-burst { 0% { opacity:0;transform:translateX(-50%) scale(.15); } 25% { opacity:1; } 100% { opacity:0;transform:translateX(-50%) scale(2.2); } }
@keyframes rune-ring-spread { 0% { opacity:0;transform:translateX(-50%) scale(.15); } 22% { opacity:1; } 100% { opacity:0;transform:translateX(-50%) scale(2.45); } }
@keyframes ground-crack-open { 0% { opacity:0;transform:translateX(-50%) scale(.18); } 35% { opacity:1; } 100% { opacity:0;transform:translateX(-50%) scale(1.22); } }
@keyframes arena-rune-quake { 0%,100% { transform:translate(0,0); } 12% { transform:translate(-3px,2px) rotate(-.35deg); } 25% { transform:translate(4px,-2px) rotate(.35deg); } 38% { transform:translate(-3px,-1px); } 52% { transform:translate(3px,2px); } 68% { transform:translate(-2px,0); } 84% { transform:translate(1px,-1px); } }
@keyframes rune-screen-flash { from { opacity:1; } to { opacity:0; } }

@media (max-height:720px) {
  .topbar-brand > img { width:35px;height:35px;flex-basis:35px; }
  #runeView .rune-card { min-height:122px; }
  .rune-picker-title { padding-block:6px; }
}

/* v20 — 모바일의 긴 관리 화면은 작은 목록 안이 아니라 페이지 전체가 자연스럽게 스크롤된다. */
#runeView.active,
#forgeView.active,
#petView.active,
#missionView.active,
#dungeonView.active,
#tribeView.active,
#shopView.active,
#analysisView.active {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scroll-padding-bottom: 32px;
  padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px));
}

/* v24 — 서로 다른 18종 친구 스프라이트, 친구 합성, 100인 주간 결투장 */
.companion-sprite{display:block;background-image:url("assets/friend-atlas-18-v2.png");background-repeat:no-repeat;background-size:300% 600%;background-position:calc(var(--sprite-col,0)*50%) calc(var(--sprite-row,0)*20%);filter:drop-shadow(0 3px 1px rgba(66,43,26,.2))}
.pet-hero-sprite{position:absolute;z-index:2;left:50%;top:49%;width:245px;height:184px;transform:translate(-50%,-50%)}
.pet-hero.hatch-reveal .pet-hero-sprite{animation:hero-reveal-pop .8s .28s cubic-bezier(.2,1.4,.35,1) both}
.battle-companion{aspect-ratio:4/3}.battle-companion>.companion-sprite{width:100%;height:100%;animation:friend-idle 2.2s ease-in-out infinite}
.fighter-player.attacking~.battle-companion>.companion-sprite{animation:friend-cheer .45s ease-out}
.hatch-pool-grade .companion-sprite{width:48px;height:36px}
.grade-species-pack .companion-sprite{width:28px;height:21px;margin:0 -5px}.grade-species-pack .companion-sprite:nth-child(2){transform:translateY(-3px) scale(.9)}.grade-species-pack .companion-sprite:nth-child(3){transform:scaleX(-1) scale(.86)}
.pet-card>.companion-sprite{width:54px;height:41px;align-self:center}

.pet-fusion-lab{flex:0 0 auto;margin:6px 1px;padding:8px;border:2px solid var(--dino-ink);border-radius:12px 17px;background:linear-gradient(145deg,#fff3cf,#d8c28e);box-shadow:0 3px #9f7448;color:var(--dino-ink)}
.pet-fusion-lab>header{display:flex;align-items:center;justify-content:space-between}.pet-fusion-lab>header span{display:block;color:#9a6a3e;font-size:5px;font-weight:1000}.pet-fusion-lab>header strong{display:block;font-size:10px}.pet-fusion-lab>header>b{padding:4px 7px;border-radius:8px;background:#574638;color:#ffe49a;font-size:8px}.pet-fusion-lab>p{margin-top:4px;color:#715d45;font-size:6px;line-height:1.45}
.fusion-exp-chart{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin:6px 0}.fusion-exp-chart span{padding:4px 2px;border-radius:6px;background:#f8e9c5;font-size:5px;font-weight:900;text-align:center}.fusion-exp-chart b{display:block;color:#a15f31;font-size:7px}
.fusion-progress{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px}.fusion-progress>i{height:11px;padding:2px;border:1px solid var(--dino-ink);border-radius:7px;background:#7b674e}.fusion-progress>i b{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#7ebc69,#f2cb5c)}.fusion-progress span{font-size:6px;font-weight:900}.pet-fusion-lab>button{width:100%;margin-top:6px;padding:7px;border:2px solid var(--dino-ink);border-radius:8px 11px;background:linear-gradient(#ffd568,#df9940);box-shadow:0 2px #965e34;color:var(--dino-ink);font-size:7px;font-weight:1000}.pet-fusion-lab>button:disabled{opacity:.45;filter:grayscale(.5)}
.pet-card{grid-template-columns:54px 1fr;grid-template-rows:auto auto}.pet-card>span{min-width:0}.pet-card em{color:#a05c31;font-style:normal;font-size:7px}.pet-card-actions{grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;gap:4px}.pet-card-actions button{min-height:22px;border:1px solid var(--dino-ink);border-radius:6px 8px;background:#fff0c5;color:var(--dino-ink);font-size:6px;font-weight:1000}.pet-card-actions .feed{background:#d8c18e}.pet-card.fusion-selected{outline:3px solid #e18d48;background:linear-gradient(#fff1c5,#e7b66f)}

#leagueView{color:var(--dino-ink);background:linear-gradient(180deg,#e7d8b4,#c7b58a)}
.league-tier-card{--league-color:#ad7045;flex:0 0 auto;display:grid;grid-template-columns:66px 1fr 58px;align-items:center;gap:8px;padding:12px;border:3px solid var(--dino-ink);border-radius:16px 22px;background:radial-gradient(circle at 20% 20%,#fff5cc,transparent 32%),linear-gradient(145deg,color-mix(in srgb,var(--league-color) 34%,#fff1c4),#f0d7a1);box-shadow:0 5px #8e6742}.league-emblem{width:60px;height:60px;display:grid;place-items:center;border:4px solid var(--dino-ink);border-radius:50% 44% 51% 46%;background:var(--league-color);color:#fff1cf;font-size:28px;font-weight:1000;text-shadow:0 3px #5d3e2b}.league-tier-card span{color:#7b6548;font-size:6px;font-weight:900}.league-tier-card strong{display:block;margin-top:2px;font-size:16px}.league-tier-card p{margin-top:3px;color:#68553e;font-size:7px}.league-rank{text-align:center}.league-rank small{display:block;font-size:6px}.league-rank b{font-size:27px}.league-rank span{font-size:8px}
.league-rule-strip{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0}.league-rule-strip span{padding:6px 3px;border:1px solid #8e7452;border-radius:8px 11px;background:#fff3d3;color:#715a3f;font-size:6px;text-align:center}.league-rule-strip b{display:block;color:#9a552f;font-size:8px}
.league-reward-preview{flex:0 0 auto;display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:center;padding:8px 10px;border:2px solid var(--dino-ink);border-radius:11px 16px;background:linear-gradient(120deg,#59483a,#2d2a24);color:#ffedbd}.league-reward-preview span{font-size:5px}.league-reward-preview strong{display:block;font-size:12px}.league-reward-preview p{grid-column:1;color:#d4c29c;font-size:6px}.league-reward-preview button{grid-column:2;grid-row:1/3;padding:7px;border:1px solid #1e1a16;border-radius:7px 10px;background:#edbd55;color:#3d2c20;font-size:6px;font-weight:1000}.league-reward-preview #leagueClaimButton{grid-column:1/3;grid-row:auto;background:#89bd72}
.league-ladder-card{flex:0 0 auto;margin-top:8px;padding:8px;border:2px solid var(--dino-ink);border-radius:12px 18px;background:#f7e9c9}.league-ladder-card>header{display:flex;justify-content:space-between;align-items:end;margin-bottom:6px}.league-ladder-card>header span{display:block;color:#8e6b45;font-size:5px}.league-ladder-card>header strong{display:block;font-size:10px}.league-ladder-card>header small{color:#756247;font-size:5px}.league-ladder{display:grid;gap:4px}.league-ladder article{display:grid;grid-template-columns:25px 25px 1fr auto;align-items:center;gap:5px;padding:5px 6px;border:1px solid #b79a6a;border-radius:8px 11px;background:#fff8e6}.league-ladder article.me{border:2px solid #b86638;background:#ffe5a7}.league-ladder article>b{font-size:11px;text-align:center}.league-ladder article>i{font-style:normal;font-size:10px}.league-ladder article strong{display:block;font-size:7px}.league-ladder article small{display:block;color:#806a4c;font-size:5px}.league-ladder article button{padding:6px 8px;border:1px solid var(--dino-ink);border-radius:6px 9px;background:#efbd55;font-size:6px;font-weight:1000}.league-ladder article em{color:#9b5a34;font-size:6px;font-style:normal;font-weight:900}
.league-reward-table{position:absolute;z-index:60;inset:55px 8px 10px;overflow:auto;padding:12px;border:3px solid var(--dino-ink);border-radius:16px 22px;background:#fff2cf;box-shadow:0 9px 30px rgba(55,38,24,.4)}.league-reward-table>header{display:flex;justify-content:space-between}.league-reward-table>header button{border:0;background:transparent;font-weight:1000}.league-reward-table>div{display:grid;gap:5px;margin-top:10px}.league-reward-table>div>div{display:grid;grid-template-columns:70px 1fr;gap:2px 8px;padding:7px;border-left:8px solid var(--league-color);border-radius:8px;background:#f5e3bd}.league-reward-table>div b{grid-row:1/3}.league-reward-table>div span{font-size:8px;font-weight:1000}.league-reward-table>div small{color:#786247;font-size:6px}.league-reward-table>p{margin-top:9px;color:#725d44;font-size:7px;line-height:1.5}

#leagueView.active{overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding-bottom:max(32px,calc(env(safe-area-inset-bottom) + 20px))}
@media(max-height:720px){.pet-hero-sprite{width:190px;height:143px}.league-tier-card{grid-template-columns:52px 1fr 48px;padding:8px}.league-emblem{width:46px;height:46px;font-size:20px}.league-tier-card strong{font-size:13px}}

/* 중첩 스크롤을 제거해 어느 위치에서 밀어도 같은 페이지가 움직이게 한다. */
#runeView .rune-inventory,
#petView .pet-inventory,
#missionView .mission-list,
#dungeonView .dungeon-list,
#shopView .shop-product-list {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

#forgeView .forge-workbench,
#tribeView .tribe-menu-grid {
  flex: 0 0 auto;
  min-height: auto;
}

#tribeView .tribe-menu-grid {
  grid-auto-rows: minmax(58px, auto);
  margin-bottom: 4px;
}

#dungeonView .wide-back-button,
#shopView .prototype-payment-note {
  margin-bottom: 2px;
}

/* v25 — 직관적인 룬 장착판, 재화 중심 결투장 보상, 전투 친구 자연 배치 */
#battleCompanion {
  z-index:4;
  left:-2%;
  bottom:62px;
  width:20%;
  aspect-ratio:4/3;
  transform:rotate(-4deg);
  opacity:.96;
}
#battleCompanion > .companion-sprite {
  position:relative;
  left:auto;
  bottom:auto;
  width:100%;
  height:100%;
  max-width:none;
  padding:0;
  border:0;
  border-radius:0;
  transform:none;
  background-color:transparent;
  background-image:url("assets/friend-atlas-18-v2.png");
  background-repeat:no-repeat;
  background-size:300% 600%;
  background-position:calc(var(--sprite-col,0)*50%) calc(var(--sprite-row,0)*20%);
  color:transparent;
  filter:drop-shadow(0 3px 1px rgba(66,43,26,.2));
  animation:friend-hide 2.8s ease-in-out infinite;
}
#battleCompanionName { display:none; }
#battleView .fighter-player { z-index:5; }

#runeView .simple-rune-board {
  padding:9px;
  border-radius:13px 18px;
  background:linear-gradient(155deg,#fff8e5,#dfc99e);
}
#runeView .simple-rune-board .rune-board {
  position:relative;
  height:auto;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  overflow:visible;
  padding:8px;
  border:2px solid rgba(73,52,35,.45);
  border-radius:11px 15px;
  background:#cdb78e;
  box-shadow:inset 0 3px 9px rgba(83,57,28,.17);
}
#runeView .simple-rune-board .rune-slot {
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  aspect-ratio:1;
  transform:none;
  border-radius:10px 13px;
  background:linear-gradient(#fffaf0,#e9d8b8);
  box-shadow:0 2px #937653;
}
#runeView .simple-rune-board .rune-slot::before { font-size:9px; }
#runeView .simple-rune-board .rune-slot.active-slot {
  outline:3px solid #e79b3f;
  outline-offset:1px;
}
#runeView .simple-rune-board .rune-slot .rune-symbol { width:27px;height:27px; }
#runeView .simple-rune-board .rune-slot small {
  left:2px;
  right:2px;
  bottom:2px;
  padding:1px 2px;
  border-radius:4px;
  background:rgba(255,249,230,.9);
  color:var(--dino-ink);
  font-size:5px;
  text-shadow:none;
}
#runeView .simple-rune-board .rune-slot .cost-dot { right:2px;top:2px;min-width:13px;font-size:5px; }
#runeView .simple-rune-board > p { display:block;margin-top:7px;color:#735f46;font-size:7px; }
#runeView .deck-traits,
#runeView .branch-filters,
#runeView .socket-filters,
#runeView #runeFilters { display:none!important; }
#runeView .rune-picker-title { margin-top:8px; }
#runeView .rune-inventory { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
#runeView .rune-card { min-height:126px;padding:9px 8px 27px; }
#runeView .rune-card strong { padding-right:32px;font-size:10px; }
#runeView .rune-card p { font-size:7px;line-height:1.45; }
#runeView .rune-action {
  position:absolute;
  left:7px;
  right:7px;
  bottom:8px;
  display:block;
  padding:4px 3px;
  border:1px solid rgba(63,45,31,.45);
  border-radius:6px 9px;
  background:#f1ca68;
  color:#4c3829;
  font-size:6px;
  font-weight:1000;
  text-align:center;
}
#runeView .rune-card.selected .rune-action { background:#4f4438;color:#fff1c8; }
#runeView .rune-card.selected { outline:3px solid #dd9240;background:#ffe8ad; }

.league-reward-table > div > div { grid-template-columns:64px 1fr; }
.league-reward-table > div span { color:#4d3c2d;font-size:7px; }

@media(max-height:720px){
  #battleCompanion{left:-2%;bottom:50px;width:19%}
  #runeView .simple-rune-board .rune-board{gap:5px;padding:6px}
  #runeView .rune-card{min-height:118px}
}

/* v23 — 10칸 스테이지, 100단계 둥지와 등급별 3종 친구 */
.stage-enemy[data-enemy="shell"] img{filter:sepia(.1) saturate(.8) drop-shadow(0 4px 1px rgba(55,37,23,.22))}
.stage-enemy[data-enemy="leaf"] img{filter:hue-rotate(18deg) saturate(1.15) drop-shadow(0 4px 1px rgba(55,37,23,.22))}
.stage-enemy[data-enemy="rock"] img{filter:hue-rotate(168deg) saturate(.9) drop-shadow(0 4px 1px rgba(55,37,23,.22))}
.stage-enemy[data-enemy="sun"] img{filter:hue-rotate(326deg) saturate(1.18) drop-shadow(0 4px 1px rgba(55,37,23,.22))}
.stage-enemy[data-enemy="ember"] img{filter:hue-rotate(312deg) saturate(1.28) drop-shadow(0 4px 1px rgba(55,37,23,.22))}
.stage-enemy[data-enemy="star"] img{filter:hue-rotate(220deg) saturate(1.2) drop-shadow(0 4px 1px rgba(55,37,23,.22))}
.stage-enemy[data-enemy="tricera"] img{filter:saturate(.9) drop-shadow(0 4px 1px rgba(55,37,23,.22))}
.stage-enemy[data-enemy="stripe"] img{filter:hue-rotate(72deg) saturate(1.15) drop-shadow(0 4px 1px rgba(55,37,23,.22))}
.stage-enemy[data-enemy="boss"] img{filter:sepia(.2) hue-rotate(315deg) saturate(1.45) contrast(1.05) drop-shadow(0 0 7px #e49b4e) drop-shadow(0 4px 1px rgba(55,37,23,.22))}
.stage-enemy[data-variant="1"] img{scale:1.03}.stage-enemy[data-variant="2"] img{filter:brightness(.92) saturate(1.22) drop-shadow(0 4px 1px rgba(55,37,23,.22))}.stage-enemy[data-variant="3"] img{filter:contrast(1.05) hue-rotate(25deg) drop-shadow(0 4px 1px rgba(55,37,23,.22))}

.nest-growth-card,.hatch-pool-card{flex:0 0 auto;margin:7px 1px 5px;padding:8px;border:2px solid var(--dino-ink);border-radius:12px 17px;background:linear-gradient(#fff8df,#e6cf9f);box-shadow:0 3px #9d7248;color:var(--dino-ink)}
.nest-growth-card{display:grid;grid-template-columns:1fr 92px;align-items:center;gap:8px}
.nest-growth-card span,.nest-growth-card small,.hatch-pool-card header span,.hatch-pool-card header small{display:block;color:#766146;font-size:6px;font-weight:900}
.nest-growth-card strong,.hatch-pool-card header strong{display:block;margin-top:2px;font-size:9px}.nest-growth-card strong b{color:#a66031}
.nest-growth-card>i{height:12px;padding:2px;border:2px solid var(--dino-ink);border-radius:8px;background:#8e7657}.nest-growth-card>i b{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#8fc46d,#f2c75c);transition:width .25s}
.hatch-pool-card>header{display:flex;align-items:end;justify-content:space-between;margin-bottom:6px}.hatch-pool-card>header small{text-align:right}
.hatch-pool{display:flex;gap:6px;overflow-x:auto;padding:1px 1px 4px;scrollbar-width:none}.hatch-pool::-webkit-scrollbar{display:none}
.hatch-pool-grade{flex:0 0 165px;padding:5px;border:1px solid rgba(59,40,29,.45);border-radius:9px 13px;background:#fff5d7;box-shadow:inset 0 -4px var(--pet-grade)}
.hatch-pool-grade>header{display:flex;justify-content:space-between;align-items:center}.hatch-pool-grade>header b{font-size:7px}.hatch-pool-grade>header strong{color:#9f5c2f;font-size:9px}
.hatch-pool-grade>div{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:3px}.hatch-pool-grade span{position:relative;min-width:0;text-align:center}.hatch-pool-grade img{width:48px;height:39px;object-fit:contain;filter:drop-shadow(0 2px rgba(59,40,29,.18))}.hatch-pool-grade small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#66533e;font-size:5px;font-weight:900}.hatch-pool-grade i{position:absolute;right:1px;top:1px;width:11px;height:11px;display:grid;place-items:center;border-radius:50%;background:var(--pet-grade);color:#fff;font-size:5px;font-style:normal;font-weight:1000}
.grade-species-pack{display:flex;align-items:center;justify-content:center;height:29px}.grade-species-pack img{width:28px!important;height:25px!important;margin:0 -5px}.grade-species-pack img:nth-child(2){transform:translateY(-3px) scale(.9)}.grade-species-pack img:nth-child(3){transform:scaleX(-1) scale(.86)}

[data-species="pebble"] img,[data-species="shell"] img{filter:sepia(.18) saturate(.72) drop-shadow(0 2px rgba(59,40,29,.18))}
[data-species="crest"] img{filter:hue-rotate(12deg) saturate(1.22) drop-shadow(0 2px rgba(59,40,29,.18))}
[data-species="horn"] img{filter:hue-rotate(25deg) saturate(1.2) drop-shadow(0 2px rgba(59,40,29,.18))}
[data-species="tail"] img{filter:hue-rotate(305deg) saturate(1.05) drop-shadow(0 2px rgba(59,40,29,.18))}
[data-species="frill"] img{filter:hue-rotate(68deg) saturate(1.1) drop-shadow(0 2px rgba(59,40,29,.18))}
[data-species="plate"] img{filter:hue-rotate(176deg) saturate(.95) drop-shadow(0 2px rgba(59,40,29,.18))}
[data-species="wing"] img{filter:hue-rotate(330deg) saturate(1.25) drop-shadow(0 2px rgba(59,40,29,.18))}
.pet-card[data-species]::after{content:"외형";position:absolute;right:5px;top:4px;color:rgba(76,54,35,.28);font-size:5px;font-weight:1000}.pet-card{position:relative}

@media(max-height:720px){.nest-growth-card{grid-template-columns:1fr 75px;padding:5px}.hatch-pool-card{padding:5px}.hatch-pool-grade{flex-basis:145px}.hatch-pool-grade img{width:42px;height:33px}}

/* v21 — 첫 이용자용 장비·친구·룬 성장 안내 */
.section-head-tools { min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:6px; }
.page-help-button { flex:0 0 28px;width:28px;height:28px;padding:0;border:2px solid var(--dino-ink);border-radius:50% 46% 52% 45%;background:linear-gradient(#ffe891,#e8ae49);box-shadow:0 3px #99623a;color:var(--dino-ink);font-size:12px;font-weight:1000;cursor:pointer; }
.page-help-button:active { translate:0 2px;box-shadow:0 1px #99623a; }

.tutorial-gear { height:100%;position:relative;display:grid;grid-template-columns:1fr 16px 1fr;align-items:center;gap:3px;padding:10px 13px 10px 118px; }
.tutorial-gear > img { position:absolute;left:10px;bottom:-5px;width:111px;height:111px;object-fit:contain;filter:drop-shadow(0 3px 1px rgba(66,43,26,.2)); }
.tutorial-gear > span { min-width:0;height:58px;display:grid;place-items:center;align-content:center;border:2px solid var(--dino-ink);border-radius:11px 15px;background:#fff0c4;box-shadow:0 4px #9b7046; }
.tutorial-gear > span i { font-size:16px;font-style:normal; }.tutorial-gear > span b { margin-top:2px;font-size:5.5px;text-align:center; }
.tutorial-gear > em { font-size:14px;font-style:normal;font-weight:1000;text-align:center; }
.tutorial-gear > strong { position:absolute;left:116px;right:11px;bottom:4px;color:#76533a;font-size:6px;text-align:center; }
.tutorial-visual.activated .tutorial-gear > span { animation:growth-pop .55s ease-out; }

.tutorial-pet { height:100%;position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4px;padding-bottom:1px; }
.tutorial-pet > img { width:112px;height:105px;object-fit:contain;filter:drop-shadow(0 3px 1px rgba(66,43,26,.18)); }
.tutorial-pet > img:last-of-type { width:83px;height:83px; }
.tutorial-pet > span { align-self:center;display:grid;place-items:center;width:25px;height:25px;border:2px solid var(--dino-ink);border-radius:50%;background:#ffe17b;font-size:14px;font-weight:1000; }
.tutorial-pet > b { position:absolute;left:50%;top:7px;transform:translateX(-50%);padding:4px 8px;border:1px solid rgba(59,40,29,.35);border-radius:999px;background:rgba(255,246,210,.86);color:#775238;font-size:6px;white-space:nowrap; }
.tutorial-visual.activated .tutorial-pet > img:last-of-type { animation:friend-cheer .55s ease-out; }

.growth-help-card { width:min(420px,calc(100% - 22px));max-height:calc(100dvh - 34px);overflow-y:auto;padding-bottom:13px; }
.growth-help-card > p { margin-top:6px;padding-right:24px;color:#705c44;font-size:7px;line-height:1.5; }
.growth-help-visual { height:112px;overflow:hidden;position:relative;margin-top:9px;border:2px solid var(--dino-ink);border-radius:13px 18px;background:linear-gradient(180deg,#bed5b2,#ead59e 59%,#81915d 60%); }
.growth-help-visual .tutorial-rune,.growth-help-visual .tutorial-gear,.growth-help-visual .tutorial-pet { height:100%; }
.growth-help-steps { display:grid;gap:6px;margin-top:9px; }
.growth-help-steps article { display:grid;grid-template-columns:30px 1fr;align-items:center;gap:7px;padding:7px;border:1px solid #a68964;border-radius:9px 13px;background:#fff2d1; }
.growth-help-steps article > i { width:28px;height:28px;display:grid;place-items:center;border:2px solid var(--dino-ink);border-radius:50% 45% 51% 44%;background:#efbd55;font-size:10px;font-style:normal;font-weight:1000; }
.growth-help-steps strong { display:block;font-size:8px; }.growth-help-steps p { margin-top:2px;color:#78644b;font-size:6px;line-height:1.4; }
.growth-help-confirm { width:100%;margin-top:10px;padding:10px;border:2px solid var(--dino-ink);border-radius:10px 15px;background:linear-gradient(#ffd66d,#df9d43);box-shadow:0 4px #966039;font-size:9px;font-weight:1000;cursor:pointer; }

@media (max-width:390px) {
  .page-help-button { flex-basis:25px;width:25px;height:25px; }
  .section-head-tools { gap:4px; }
  .tutorial-gear { padding-left:104px; }.tutorial-gear > img { width:99px;height:99px; }
}

/* v22 final sizing — 전투 공룡은 배경과 이펙트 안에서 더 작고 소중하게 보인다. */
#battleView .fighter { width:26%;bottom:65px; }
#battleView .fighter-player { left:11%; }#battleView .fighter-enemy { right:11%; }
@media (max-height:720px) {
  #battleView .fighter { width:24%;bottom:52px; }
}

/* v26 — 이름으로 시작하는 성장 안내와 확장된 발자국 */
.tutorial-card { max-height:calc(100dvh - 26px);overflow-y:auto;overscroll-behavior:contain; }
.tutorial-card [hidden] { display:none !important; }
.tutorial-name-form { margin:7px 4px 3px;padding:8px;border:2px solid #806143;border-radius:11px 16px;background:rgba(255,248,221,.88);box-shadow:inset 0 1px rgba(255,255,255,.8); }
.tutorial-name-form > label { display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;color:#59432f;font-size:7px;font-weight:1000; }
.tutorial-name-form label small { color:#9b7248;font-size:6px; }
.tutorial-name-form > div { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px; }
.tutorial-name-form input { min-width:0;padding:9px 10px;border:2px solid var(--dino-ink);border-radius:9px 12px;background:#fffdf3;color:#432e20;font:1000 10px/1.1 inherit;outline:none; }
.tutorial-name-form input:focus { border-color:#a76633;box-shadow:0 0 0 3px rgba(229,164,65,.25); }
.tutorial-name-form button { padding:8px 10px;border:2px solid var(--dino-ink);border-radius:9px 12px;background:linear-gradient(#ffd96e,#eaa444);box-shadow:0 3px #9f6035;color:#432e20;font-size:7px;font-weight:1000;cursor:pointer; }
.tutorial-name-form > p { display:none;margin:6px 0 0;color:#b04432;font-size:6px;font-weight:900;text-align:center; }
.tutorial-name-form > p.visible { display:block; }
.tutorial-name-visual { position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:9px;padding-bottom:4px; }
.tutorial-name-visual img { width:102px;height:102px;object-fit:contain;animation:ready-dino 1s ease-in-out infinite alternate; }
.tutorial-name-visual span { align-self:center;display:grid;place-items:center;gap:2px;padding:8px 11px;border:2px solid var(--dino-ink);border-radius:14px 19px 14px 6px;background:#fff3c9;box-shadow:0 4px #98704a; }
.tutorial-name-visual span i { width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#efd06c;font-size:14px;font-style:normal;font-weight:1000; }
.tutorial-name-visual span b { font-size:7px; }.tutorial-name-visual em { position:absolute;right:28px;top:10px;color:#dd765e;font-size:17px;font-style:normal;animation:lightning-pop .8s ease-in-out infinite alternate; }
.tutorial-stage { position:relative;height:100%;display:grid;place-items:center;align-content:start;padding-top:10px; }
.tutorial-stage > span { z-index:2;display:flex;align-items:center;gap:7px;padding:5px 9px;border:2px solid var(--dino-ink);border-radius:10px;background:#fff0bf;box-shadow:0 3px #96704b; }
.tutorial-stage span b { font-size:8px; }.tutorial-stage span i { color:#a06536;font-style:normal;font-weight:1000; }
.tutorial-stage img { position:absolute;left:50%;bottom:-5px;width:90px;height:90px;object-fit:contain;transform:translateX(-50%);animation:stage-trot 1.6s ease-in-out infinite; }
.tutorial-stage strong { position:absolute;right:16px;bottom:12px;padding:4px 6px;border-radius:8px;background:#526c43;color:#fff5d6;font-size:6px; }
@keyframes stage-trot { 0%,100% { transform:translateX(-70%) rotate(-2deg) } 50% { transform:translateX(-30%) translateY(-3px) rotate(2deg) } }
.tutorial-league,.tutorial-mission,.tutorial-shop,.tutorial-tribe { height:100%;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px; }
.tutorial-league > i,.tutorial-tribe > i { width:45px;height:45px;display:grid;place-items:center;border:3px solid var(--dino-ink);border-radius:50%;background:#d8c596;box-shadow:0 4px #7e5a3c;font-size:15px;font-style:normal;font-weight:1000; }
.tutorial-league > span { display:grid;place-items:center;padding:6px 8px;border:2px solid var(--dino-ink);border-radius:9px 13px;background:#fff1c8; }
.tutorial-league span b { font-size:7px; }.tutorial-league span em { color:#936034;font-size:6px;font-style:normal;font-weight:900; }
.tutorial-league > strong,.tutorial-tribe > strong { position:absolute;left:50%;bottom:7px;transform:translateX(-50%);font-size:7px;white-space:nowrap; }
.tutorial-mission > span,.tutorial-shop > span { min-width:76px;height:70px;display:grid;place-items:center;align-content:center;gap:3px;border:2px solid var(--dino-ink);border-radius:12px 17px;background:#fff1c9;box-shadow:0 4px #97704a; }
.tutorial-mission i,.tutorial-shop i { width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#91a86e;color:#fff8de;font-size:10px;font-style:normal;font-weight:1000; }
.tutorial-mission b,.tutorial-shop b { font-size:6px; }.tutorial-shop small { position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:6px;font-weight:1000;white-space:nowrap; }
.tutorial-tribe { flex-direction:column;padding-bottom:18px; }.tutorial-tribe > span { display:flex;gap:4px; }.tutorial-tribe span b { padding:5px 7px;border:2px solid var(--dino-ink);border-radius:8px;background:#fff0c4;font-size:6px; }
.today-board > div { min-height:27px; }
.today-board .today-link { min-width:50px; }
#homeView .today-board { min-height:187px; }
@media (max-height:720px) {
  .tutorial-name-form { margin-top:4px;padding:6px; }
  .tutorial-name-form input,.tutorial-name-form button { padding:7px 8px; }
  .tutorial-progress i { width:13px; }
}

/* v27 — 스테이지 해금 룬판과 중복 룬 성장 */
.capacity-meter i { font-style:normal; }
#runeView .simple-rune-board .rune-slot.locked-slot {
  border-style:dashed;
  border-color:#766b57;
  background:repeating-linear-gradient(135deg,#373a31 0 6px,#2c3028 6px 12px);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 3px rgba(20,22,18,.75);
  opacity:.66;
}
#runeView .simple-rune-board .rune-slot.locked-slot::before { content:""; }
.slot-lock { display:grid;place-items:center;width:29px;height:21px;border:1px solid #ad9569;border-radius:8px;background:#1f231d;color:#e8d5a5;font-size:6px;line-height:1;font-weight:1000; }
.rune-level-chip { display:block;margin-top:3px;color:#725635;font-size:6px;font-weight:1000; }
.rune-inspector-actions { flex:0 0 auto !important;display:flex;align-items:center;gap:4px; }
.rune-inspector-actions #upgradeRuneButton { background:linear-gradient(#ffe47c,#db9d3d);color:#3c291a; }
.rune-inspector-actions #clearSlotButton { background:linear-gradient(#65584b,#3d352e);color:#fff4d7; }
@media (max-width:390px) {
  .rune-inspector-actions { flex-direction:column;gap:2px; }
  .rune-inspector-actions button { min-width:52px;padding:5px 6px; }
}

/* v28 — 한눈에 이해하는 제작 둥지·친구 성장 */
.system-growth-card {
  flex:0 0 auto;margin:7px 1px 5px;padding:9px;border:2px solid var(--dino-ink);border-radius:13px 18px;
  background:linear-gradient(145deg,#fff7d8,#e7ce98);box-shadow:0 4px #966b43;color:var(--dino-ink);
}
.system-growth-card > header { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.system-growth-card > header span { display:block;color:#7b674d;font-size:6px;font-weight:1000; }
.system-growth-card > header strong { display:block;margin-top:2px;font-size:11px; }
.system-growth-card > header strong b { color:#9d5b30; }
.system-growth-card > header button,.system-growth-card > header em { flex:0 0 auto;padding:5px 7px;border:1px solid #8e6f4e;border-radius:8px 11px;background:#fff1c4;color:#785036;font-size:6px;font-style:normal;font-weight:1000;cursor:pointer; }
.growth-benefit-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:7px; }
.growth-benefit { min-width:0;display:grid;grid-template-columns:29px 1fr;align-items:center;gap:5px;position:relative;padding:6px 5px;border:1px solid rgba(65,44,29,.48);border-radius:9px 12px;background:rgba(255,249,228,.82);box-shadow:inset 0 -3px var(--growth-grade,#d6aa59); }
.growth-benefit > i { width:27px;height:27px;display:grid;place-items:center;border:2px solid var(--dino-ink);border-radius:50% 44% 52% 46%;background:var(--growth-grade,#e5bd68);font-size:5px;font-style:normal;font-weight:1000; }
.growth-benefit > span { min-width:0; }
.growth-benefit b { display:block;overflow:hidden;font-size:7px;white-space:nowrap;text-overflow:ellipsis; }
.growth-benefit small { display:block;margin-top:2px;color:#77634b;font-size:5.5px;font-weight:900;white-space:nowrap; }
.growth-benefit em { position:absolute;right:4px;top:3px;padding:2px 4px;border-radius:7px;background:#584638;color:#fff0bf;font-size:4.8px;font-style:normal;font-weight:1000; }
.growth-benefit.speed { --growth-grade:#86b5c8; }
.growth-live-row { display:grid;grid-template-columns:1fr minmax(116px,42%);align-items:center;gap:7px;margin-top:7px;padding-top:7px;border-top:1px dashed rgba(66,45,30,.4); }
.growth-live-row > span b { display:block;color:#5c4938;font-size:7px; }
.growth-live-row > span small { display:block;margin-top:2px;color:#8b603d;font-size:6px;font-weight:900; }
.growth-live-row > button { min-height:35px;padding:6px;border:2px solid var(--dino-ink);border-radius:9px 12px;background:linear-gradient(#ffd86c,#df9b40);box-shadow:0 3px #936039;color:var(--dino-ink);font-size:7px;font-weight:1000;cursor:pointer; }
.growth-live-row > button:disabled { opacity:.5;filter:grayscale(.45);box-shadow:0 2px #8f806c; }
.growth-live-progress { display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;margin-top:7px; }
.growth-live-progress > i { height:11px;padding:2px;border:1px solid var(--dino-ink);border-radius:8px;background:#857057; }
.growth-live-progress > i b { display:block;width:0;height:100%;border-radius:5px;background:linear-gradient(90deg,#7dbf6d,#f1c651);transition:width .3s; }
.growth-live-progress > span { color:#70543b;font-size:5.5px;font-weight:1000;white-space:nowrap; }
.growth-live-progress[hidden] { display:none!important; }

.forge-growth-card { margin-top:8px;background:linear-gradient(145deg,#fff4cf,#dfc28a); }
.forge-growth-card + .gear-role-rule { margin-top:7px; }

.companion-level-badge small { color:#8b7354;font-size:5px;font-weight:1000;text-align:center; }
.pet-mode-tabs { flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 1px 1px; }
.pet-mode-tabs button { min-width:0;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:5px;padding:7px;border:2px solid #7d684e;border-radius:11px 15px;background:#d5c29e;color:#715e47;text-align:left;cursor:pointer;box-shadow:0 3px #8f7351; }
.pet-mode-tabs button.active { border-color:var(--dino-ink);background:linear-gradient(#fff1bd,#efbd55);color:var(--dino-ink);box-shadow:0 3px #956039; }
.pet-mode-tabs i { width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:rgba(255,250,229,.72);font-size:12px;font-style:normal; }
.pet-mode-tabs b,.pet-mode-tabs small { display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.pet-mode-tabs b { font-size:8px; }.pet-mode-tabs small { margin-top:2px;font-size:5px;font-weight:900; }
.pet-mode-panel { flex:0 0 auto; }
.pet-research-card { background:linear-gradient(145deg,#fff6d3,#d8d9a4); }
.training-explain-card { display:grid;grid-template-columns:43px 1fr;align-items:center;gap:8px;margin:7px 1px 5px;padding:8px;border:2px solid var(--dino-ink);border-radius:12px 17px;background:linear-gradient(145deg,#ffeec1,#e6c486);box-shadow:0 3px #966a43;color:var(--dino-ink); }
.training-explain-card > i { width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--dino-ink);border-radius:50% 45% 52% 44%;background:#df8f7e;color:#fff3db;font-size:17px;font-style:normal; }
.training-explain-card strong { display:block;font-size:9px; }.training-explain-card p { margin-top:3px;color:#705b43;font-size:6px;line-height:1.4; }
#petTrainingPanel .pet-inventory { padding-bottom:12px; }

#homeTimerCards button:not(.active) b { color:#796b58; }
#homeTimerCards button.active b { color:#9b572d; }

@media (max-width:390px) {
  .growth-benefit-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .growth-benefit-list .growth-benefit:nth-child(3) { grid-column:1/-1; }
  .growth-live-row { grid-template-columns:1fr 118px; }
}
@media (max-height:720px) {
  .system-growth-card { padding:7px;margin-top:5px; }
  .growth-benefit-list { margin-top:5px; }.growth-benefit { padding:4px; }.growth-benefit > i { width:23px;height:23px; }
  .growth-live-row { margin-top:5px;padding-top:5px; }.growth-live-row > button { min-height:31px; }
  .pet-mode-tabs { margin-top:5px; }.pet-mode-tabs button { padding:5px; }
}

.rune-inspector-actions { display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));width:124px;gap:4px; }
.rune-inspector-actions button { min-width:0 !important;padding:5px 4px; }