/* =========================================================================
   AllAroundPlay Games — UI styles
   ========================================================================= */
.aap-game {
	--g-navy: #0b1f33;
	--g-navy2: #142a40;
	--g-gold: #b3864b;
	--g-gold-d: #9c7338;
	--g-beige: #f4eee3;
	--g-line: #dce1e6;
	max-width: 760px;
	margin: 0 auto;
}
.aap-game * { box-sizing: border-box; }

.aap-game-card {
	background: #fff;
	border: 1px solid #eceff2;
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 12px 34px rgba(11, 31, 51, 0.08);
}
.aap-game-sub { color: #5a6976; font-size: 0.95rem; margin: 0 0 18px; }
.aap-game .lbl { display: block; font-weight: 600; color: var(--g-navy); margin-bottom: 6px; font-size: 0.9rem; }
.aap-game textarea, .aap-game input, .aap-game select {
	width: 100%; padding: 11px 13px; border: 1px solid var(--g-line);
	border-radius: 9px; font-size: 1rem; font-family: inherit; color: var(--g-navy);
}
.aap-game textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
.aap-game textarea:focus, .aap-game input:focus, .aap-game select:focus {
	outline: none; border-color: var(--g-gold); box-shadow: 0 0 0 3px rgba(179, 134, 75, 0.15);
}
.aap-game .row { display: flex; gap: 14px; flex-wrap: wrap; }
.aap-game .row > * { flex: 1 1 0; min-width: 0; }

.aap-gbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 12px 22px; border: 1.5px solid var(--g-gold); border-radius: 9px;
	background: var(--g-gold); color: #fff; font-weight: 700; font-size: 1rem;
	font-family: inherit; cursor: pointer; transition: background .15s, transform .1s;
}
.aap-gbtn:hover { background: var(--g-gold-d); border-color: var(--g-gold-d); }
.aap-gbtn:active { transform: translateY(1px); }
.aap-gbtn:disabled { opacity: .5; cursor: not-allowed; }
.aap-gbtn.is-ghost { background: transparent; color: var(--g-gold); }
.aap-gbtn.is-ghost:hover { background: var(--g-gold); color: #fff; }
.aap-gbtn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }

.aap-stage {
	margin-top: 18px; background: var(--g-navy); border-radius: 12px;
	padding: 14px; display: flex; justify-content: center; align-items: center;
	overflow: hidden;
}
.aap-stage canvas { max-width: 100%; height: auto; display: block; border-radius: 8px; }

.aap-winner {
	margin-top: 16px; text-align: center; font-size: 1.5rem; font-weight: 800;
	color: var(--g-gold-d); min-height: 1.2em;
}
.aap-winner .tag { font-size: 0.95rem; color: #6a7884; font-weight: 600; display: block; margin-bottom: 4px; }

.aap-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; justify-content: center; }
.aap-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--g-navy); }
.aap-legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

.aap-names-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; justify-content: center; }
.aap-name-chip {
	padding: 8px 14px; border-radius: 999px; background: var(--g-beige);
	color: var(--g-navy); font-weight: 600; cursor: pointer; border: 1.5px solid transparent;
	transition: border-color .15s, background .15s;
}
.aap-name-chip:hover { border-color: var(--g-gold); }
.aap-name-chip.is-active { background: var(--g-gold); color: #fff; }
.aap-note { font-size: 0.85rem; color: #6a7884; margin-top: 12px; }

/* 원작 임베드 (마블 룰렛) */
.aap-embed { max-width: 980px; margin: 0 auto; }
.aap-embed iframe {
	display: block; width: 100%; height: 680px; max-height: 80vh;
	border: 0; border-radius: 12px; background: #000;
	box-shadow: 0 14px 38px rgba(11, 31, 51, 0.2);
}
.aap-embed-credit { text-align: center; font-size: 0.85rem; color: #6a7884; margin-top: 12px; }
.aap-embed-credit a { color: #9c7338; text-decoration: none; }
.aap-embed-credit a:hover { text-decoration: underline; }

/* 칩(태그) 입력 */
.aap-chipbox { margin-bottom: 6px; }
.aap-chip-input-row { display: flex; gap: 8px; margin-bottom: 12px; }
.aap-chip-input-row .aap-chip-field { flex: 1 1 auto; }
.aap-chip-input-row .aap-chip-add { flex: 0 0 auto; padding: 11px 18px; }
.aap-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 22px; }
.aap-empty-hint { color: #9aa6b1; font-size: 0.88rem; }
.aap-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 8px 7px 14px; background: var(--g-beige);
	border-radius: 999px; color: var(--g-navy); font-weight: 600; font-size: 0.95rem;
}
.aap-chip button {
	border: none; background: rgba(11, 31, 51, 0.12); color: var(--g-navy);
	width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
	font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.aap-chip button:hover { background: var(--g-gold); color: #fff; }