.generator-page { background: radial-gradient(circle at 8% 8%,rgba(183,25,51,.09),transparent 28%),radial-gradient(circle at 92% 32%,rgba(191,151,73,.12),transparent 25%),#eeeae3; color: #1b1719; }
.generator-main { width: min(660px, calc(100% - 30px)); margin: 0 auto; padding: 48px 0 96px; display: grid; gap: 24px; }
.generator-heading { position: static; width: min(100%,580px); margin: 0 auto; padding: 0 2px 18px; border-bottom: 1px solid rgba(52,39,45,.16); }
.generator-heading h1 { margin: 0; font-size: clamp(25px,5vw,42px); line-height: 1.08; letter-spacing: -.045em; white-space: nowrap; }
.generator-heading p { margin: 0; color: #746b68; font-size: 13px; font-weight: 700; }
.direct-editor { width: min(100%,580px); margin: 0 auto; padding: 0; display: grid; gap: 14px; border: 0; background: transparent; box-shadow: none; }
.direct-editor-guide { margin: 0; color: #766d69; font-size: 12px; font-weight: 800; text-align: center; }
.generator-profile-inputs { padding: 15px; display: grid; grid-template-columns: 92px 1fr; gap: 12px; border: 1px solid rgba(48,37,42,.12); border-radius: 14px; background: rgba(255,255,255,.82); }
.generator-avatar-input { grid-row: 1 / 3; position: relative; cursor: pointer; }
.generator-avatar-input > span { width: 92px; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; border: 1px solid #cbc2bd; border-radius: 50%; color: #6f6569; background: #eee9e4; text-align: center; }
.generator-avatar-input b { width: 70%; font-size: 10px; line-height: 1.4; }.generator-avatar-input img { width: 100%; height: 100%; object-fit: cover; }
.generator-avatar-input input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.generator-text-inputs,.generator-number-inputs { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.generator-profile-inputs label:not(.generator-avatar-input) { min-width: 0; display: grid; gap: 5px; color: #554c50; font-size: 10px; font-weight: 900; }
.generator-profile-inputs label:not(.generator-avatar-input) input { width: 100%; min-width: 0; height: 44px; padding: 0 11px; border: 1px solid #d5cdc8; border-radius: 9px; outline: 0; background: #fff; font: inherit; font-size: 15px; }
.generator-profile-inputs input:focus { border-color: #9c1730; box-shadow: 0 0 0 3px rgba(156,23,48,.09); }
.shared-member-card-preview { width: 100%; margin: 0 auto; display: grid; place-items: center; overflow: visible; contain: layout paint; }
.shared-member-card-preview .member-modal-card.profile-card { width: min(460px,100%) !important; height: 700px !important; min-height: 700px !important; max-height: none !important; display: grid !important; visibility: visible !important; opacity: 1 !important; touch-action: auto !important; }
.shared-member-card-preview .member-modal-card.profile-card,.shared-member-card-preview .member-modal-card.profile-card::after { animation: none !important; transition: none !important; }
.generator-shared-card[data-card-theme="black"] { background: linear-gradient(142deg,#55545a,#17171a 28%,#050506 72%,#343338) !important; }
.generator-shared-card[data-card-theme="aurora"] { background: conic-gradient(from 210deg,#ff4f81,#ffb84b,#e9ff70,#55e6ba,#55b8ff,#a478ff,#ff67d4,#ff4f81) !important; }
.generator-shared-card:not([data-card-theme="black"]):not([data-card-theme="aurora"]) { background: linear-gradient(142deg,color-mix(in srgb,var(--generator-card-color) 42%,white),var(--generator-card-color) 35%,color-mix(in srgb,var(--generator-card-color) 48%,black)) !important; }
.generator-shared-card::before { border-color: color-mix(in srgb,var(--generator-card-color,#888) 48%,white) !important; }
.generator-shared-empty { flex: 1; display: grid; place-items: center; color: rgba(255,240,213,.5); font-size: 13px; font-weight: 800; }
.generator-shared-card .profile-results-scroll { overflow-y: visible !important; overscroll-behavior-y: auto; touch-action: pan-y !important; }
.generator-shared-card .profile-results-scroll.is-scrollable { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.generator-shared-card .tournament-result { cursor: pointer; touch-action: pan-y; }
.generator-shared-card .profile-day2-summary { cursor: pointer; touch-action: pan-y; }
.generator-year-heading { margin: 3px 0 4px; color: rgba(255,232,183,.6); font-size: 10px; }
.generator-shared-card [contenteditable] { cursor: text; border-radius: 4px; outline: 0; touch-action: manipulation; -webkit-user-select: text; user-select: text; transition: background .15s ease,box-shadow .15s ease; }
.generator-shared-card [contenteditable]:hover { background: rgba(255,255,255,.055); }
.generator-shared-card [contenteditable]:focus { background: rgba(18,15,20,.48); box-shadow: 0 0 0 2px rgba(255,231,174,.55); }
.generator-shared-card .profile-avatar { cursor: pointer; }
.generator-shared-card .profile-avatar .avatar-fallback { font-size: 0 !important; color: transparent !important; }
.generator-shared-card .profile-avatar::after { content: '画像を選択してください'; position: absolute; z-index: 3; left: 50%; top: 50%; width: min(110px,calc(100% - 24px)); transform: translate(-50%,-50%); color: #fff8e8; background: transparent; text-shadow: 0 2px 8px rgba(20,14,17,.8); font-size: 12px; font-weight: 900; line-height: 1.5; text-align: center; }
.generator-shared-card .profile-avatar.has-image::after { content: '画像を変更'; opacity: 0; }.generator-shared-card .profile-avatar.has-image:hover::after,.generator-shared-card .profile-avatar.has-image:focus::after { opacity: 1; }
.generator-shared-card .profile-avatar:focus-visible { outline: 3px solid rgba(255,231,174,.72); outline-offset: 3px; }
.card-style-picker { padding: 13px 14px; display: grid; gap: 9px; border: 1px solid rgba(48,37,42,.12); border-radius: 12px; background: rgba(255,255,255,.78); }
.card-style-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-style-heading > span { color: #554c50; font-size: 11px; font-weight: 900; }
.card-style-heading button { padding: 6px 10px; border: 1px solid #d5ccc7; border-radius: 8px; color: #8d1830; background: #fff; cursor: pointer; font: inherit; font-size: 10px; font-weight: 900; }
.card-theme-options { display: flex; flex-wrap: wrap; gap: 7px; }
.card-theme-options button,.custom-theme { min-height: 36px; padding: 0 11px; display: flex; align-items: center; gap: 6px; border: 1px solid #d8d0cb; border-radius: 999px; color: #544b4f; background: #fff; cursor: pointer; font: inherit; font-size: 10px; font-weight: 850; }
.card-theme-options button.is-active,.custom-theme.is-active { border-color: #2c2226; box-shadow: inset 0 0 0 1px #2c2226; }
.card-theme-options i { width: 14px; height: 14px; display: block; border-radius: 50%; }
.theme-black { background: #28272b; }.theme-aurora { background: conic-gradient(#ff4f81,#ffcf59,#aaff76,#55d9db,#668cff,#b868ff,#ff4f81); }
.theme-purple { background: #8b5cf6; }.theme-blue { background: #1688d4; }.theme-red { background: #d62649; }
.custom-theme { position: relative; }
.custom-theme input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.custom-theme i { background: conic-gradient(from 90deg,red,#ff0,#0f8,#08f,#c4f,red); }
.profile-card-editor {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 490/745;
  min-height: 0;
  padding: 8.3cqw 6.8cqw 7cqw;
  overflow: hidden;
  --frame-gradient: linear-gradient(135deg,#a8a8ad,#28272b 45%,#08080a);
  --frame-highlight: #c9c9ce;
  --frame-shadow: rgba(0,0,0,.58);
  border: 1.1cqw solid transparent;
  border-radius: 7.6cqw;
  color: #fff;
  background: repeating-linear-gradient(56deg,transparent 0 2.2cqw,rgba(255,255,255,.014) 2.3cqw 2.5cqw) padding-box,linear-gradient(135deg,#302b2d 0%,#1c2528 48%,#30302e 100%) padding-box,var(--frame-gradient) border-box;
  box-shadow: inset 0 0 0 .35cqw var(--frame-highlight), inset 0 0 0 1.5cqw #292427, inset 0 0 0 1.75cqw var(--frame-shadow), 0 18px 52px rgba(31,21,25,.25),0 0 28px color-mix(in srgb,var(--frame-shadow) 45%,transparent);
}
.profile-card-editor::before { content: ''; position: absolute; inset: 2.5cqw; pointer-events: none; border: .2cqw solid color-mix(in srgb,var(--frame-highlight) 58%,transparent); border-radius: 5cqw; }
.editor-profile-head { position: relative; z-index: 1; display: grid; grid-template-columns: 35cqw minmax(0,1fr); gap: 5.5cqw; align-items: start; }
.editor-avatar { position: relative; width: 34cqw; aspect-ratio: 1; display: block; cursor: pointer; }
.editor-avatar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.editor-avatar-preview { width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; border: 1cqw solid var(--frame-highlight); border-radius: 50%; background: radial-gradient(circle at 35% 25%,#756779,#272126 72%); box-shadow: 0 0 0 .45cqw var(--frame-shadow),0 0 0 .85cqw color-mix(in srgb,var(--frame-highlight) 70%,transparent); }
.editor-avatar-preview img { width: 100%; height: 100%; object-fit: cover; object-position: var(--crop-x,50%) var(--crop-y,50%); transform: scale(var(--crop-zoom,1)); }
.editor-avatar-preview b { max-width: 70%; color: rgba(255,255,255,.76); text-align: center; font-size: 3cqw; line-height: 1.35; }
.editor-identity { min-width: 0; display: grid; gap: 2.2cqw; }
.profile-card-editor input { min-width: 0; outline: 0; font-family: inherit; }
.card-name-input { width: 100%; padding: 0 0 2cqw; border: 0; border-bottom: .25cqw solid rgba(238,205,139,.52); color: #fff0d2; background: transparent; font-size: 9.1cqw; font-weight: 950; line-height: 1; letter-spacing: -.07em; }
.card-name-input::placeholder { font-size: 4.8cqw; letter-spacing: -.03em; }
.card-name-input:focus { border-bottom-color: #f1d18d; }
.card-x-pill { width: min(100%, 39cqw); min-height: 7.6cqw; padding: 0 2.4cqw; display: flex; align-items: center; gap: 1.5cqw; border: .2cqw solid rgba(189,173,255,.62); border-radius: 1.4cqw; color: #f8f4ff; background: rgba(9,13,17,.48); backdrop-filter: blur(8px); }
.card-x-pill span { font-size: 3.4cqw; font-weight: 950; }
.card-x-pill input { width: 100%; padding: 0; border: 0; color: #fff; background: transparent; font-size: 2.55cqw; font-weight: 850; }
.editor-rank-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.editor-rank-stats label { min-width: 0; padding: 1.1cqw 1.2cqw; display: grid; gap: .6cqw; border: .15cqw solid rgba(189,173,255,.28); border-radius: 1.2cqw; background: rgba(9,13,17,.34); }
.editor-rank-stats label > span:first-child { color: rgba(255,246,224,.58); font-size: 1.85cqw; font-weight: 850; white-space: nowrap; }
.editor-stat-value { min-width: 0; display: flex; justify-content: flex-end; align-items: baseline; gap: .4cqw; }
.editor-stat-value input { width: 100%; padding: 0; border: 0; background: transparent; text-align: right; font-size: 4.4cqw; font-weight: 950; font-variant-numeric: tabular-nums; }
.editor-stat-value em { font-size: 2.4cqw; font-style: normal; font-weight: 900; }
.editor-stat-value.is-beyond input { color: #a86bef; }
.editor-stat-value.is-beyond em { color: #f1e8dc; }
.editor-stat-value.is-cr input { color: #9f92ff; }
.editor-divider { position: relative; z-index: 1; height: .2cqw; margin: 5.5cqw 0 2.5cqw; background: rgba(255,255,255,.13); }
.editor-day2-controls { position: relative; z-index: 1; }
.day2-toggle { position: absolute; right: 0; top: -4.7cqw; display: flex; align-items: center; gap: .8cqw; color: rgba(255,246,224,.7); font-size: 1.8cqw; font-weight: 800; cursor: pointer; }
.day2-toggle input { width: 2.8cqw; height: 2.8cqw; accent-color: #b56eea; }
.editor-day2-row { width: 100%; min-height: 10.2cqw; padding: 1.2cqw 2.1cqw; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2.2cqw; border: .2cqw solid rgba(202,159,81,.52); border-radius: 1.5cqw; color: #f3e5cb; background: linear-gradient(90deg,rgba(92,70,56,.7),rgba(48,55,57,.72)); text-align: left; cursor: pointer; font: inherit; }
.editor-day2-row[hidden] { display: none; }
.editor-day2-row strong { color: #f3e5cb; font-size: 2.6cqw; }
.editor-day2-row > span { font-size: 2.2cqw; font-weight: 850; white-space: nowrap; }
.editor-day2-row b { font-size: 2.5cqw; }
.editor-day2-row label { display: grid; grid-template-columns: auto auto; align-items: end; color: #f3e5cb; font-size: 2.2cqw; font-weight: 850; white-space: nowrap; }
.editor-day2-row label span { grid-column: 1 / -1; margin-bottom: .4cqw; color: rgba(255,246,224,.66); font-size: 1.6cqw; }
.editor-day2-row input { width: 5cqw; padding: 0; border: 0; border-bottom: .2cqw solid rgba(200,184,255,.58); color: #fff; background: transparent; text-align: center; font-size: 2.55cqw; font-weight: 900; }
.editor-day2-row em { font-size: 1.8cqw; font-style: normal; }
.editor-day2-controls.is-hidden { min-height: 1cqw; }
.editor-achievements { position: relative; z-index: 1; margin-top: 2cqw; }
.editor-achievement-rows { overflow: hidden; border: .2cqw solid rgba(255,255,255,.1); border-radius: 1.4cqw; }
.achievement-empty { min-height: 12cqw; padding: 2cqw; display: grid; place-content: center; gap: .8cqw; border: .2cqw dashed rgba(217,181,108,.34); border-radius: 1.4cqw; text-align: center; background: rgba(15,13,14,.18); }
.achievement-empty[hidden] { display: none; }
.achievement-empty strong { color: #f2e3c6; font-size: 2.7cqw; }
.achievement-empty span { color: rgba(255,246,224,.55); font-size: 1.75cqw; font-weight: 700; }
.card-achievement-row { position: relative; min-height: 7.3cqw; padding: 1cqw; display: grid; grid-template-columns: 8cqw 13cqw minmax(0,1fr); align-items: center; gap: 1.2cqw; background: rgba(69,70,70,.65); border-bottom: .15cqw solid rgba(255,255,255,.08); }
.card-achievement-row:nth-child(even) { background: rgba(73,83,87,.56); }
.card-achievement-row:last-child { border-bottom: 0; }
.card-achievement-row input { width: 100%; height: 5cqw; padding: 0 1cqw; border: 0; color: #fff; background: transparent; font-size: 2.55cqw; font-weight: 900; }
.card-achievement-row input::placeholder { color: rgba(255,255,255,.62); opacity: 1; }
.card-achievement-row .achievement-name-input { border-bottom: .2cqw dashed rgba(255,255,255,.35); }
.achievement-name-picker { width: 100%; min-width: 0; min-height: 5cqw; padding: .4cqw 1cqw; display: grid; align-content: center; gap: .25cqw; overflow: hidden; border: 0; border-bottom: .2cqw dashed rgba(255,255,255,.35); color: #fff; background: transparent; text-align: left; cursor: pointer; }
.achievement-name-picker span,.achievement-name-picker small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achievement-name-picker span { font-size: 2.55cqw; font-weight: 900; }
.achievement-name-picker small { color: rgba(255,255,255,.55); font-size: 1.35cqw; font-weight: 700; }
.card-achievement-row input:focus { background-color: rgba(255,255,255,.08); }
.card-achievement-row .achievement-result-input { border: .2cqw solid rgba(255,255,255,.42); border-radius: .9cqw; background: linear-gradient(135deg,#bd7a43,#75401f); text-align: center; }
.achievement-result-preview { width: 100%; min-height: 4.4cqw; padding: 0 .7cqw; overflow: hidden; border: .15cqw solid rgba(255,255,255,.42); border-radius: .8cqw; color: #fff; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font: inherit; font-size: 2.05cqw; font-weight: 900; }
.achievement-year-preview { color: rgba(255,255,255,.58); font-size: 1.75cqw; font-weight: 850; }
.card-achievement-row:nth-child(2) .achievement-result-input { background: linear-gradient(135deg,#bc64ef,#7130b4); }
.card-achievement-row:nth-child(3) .achievement-result-input { color: #26282d; background: linear-gradient(135deg,#f4f5fb,#aab0c1); }
.remove-achievement { position: absolute; right: 1cqw; top: 50%; width: 4.5cqw; height: 4.5cqw; padding: 0; border: 0; border-radius: 50%; color: rgba(255,255,255,.8); background: rgba(19,16,17,.48); transform: translateY(-50%); cursor: pointer; font-size: 2.6cqw; }
.card-add-achievement { width: 100%; min-height: 6.5cqw; margin-top: 1.2cqw; border: .2cqw dashed rgba(217,181,108,.5); border-radius: 1.2cqw; color: #e5c987; background: rgba(15,13,14,.22); cursor: pointer; font: inherit; font-size: 2.4cqw; font-weight: 850; }
.outside-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.outside-card-action { width: 100%; min-height: 52px; margin: 0; padding: 0 14px; border: 1px solid rgba(51,39,45,.18); border-radius: 10px; color: #fff; background: #2a2024; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 850; line-height: 1.3; }
.editor-card-credit { position: absolute; z-index: 1; left: 7.5cqw; right: 7.5cqw; bottom: 5.6cqw; display: flex; justify-content: space-between; gap: 2cqw; color: rgba(244,220,172,.45); font-size: 1.75cqw; }
.editor-card-credit b { color: #d6b66f; }
.profile-card-editor input:focus,.profile-card-editor button:focus-visible { box-shadow: 0 0 0 .3cqw rgba(167,132,255,.32),0 0 1.4cqw rgba(121,181,255,.18); }
.direct-editor-note { margin: 0; color: #7a716d; font-size: 10px; line-height: 1.7; }
.generator-layout { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(360px, .86fr); gap: 22px; align-items: start; }
.generator-form, .preview-panel { border: 1px solid rgba(65,53,57,.12); border-radius: 16px; background: rgba(255,255,255,.72); box-shadow: 0 18px 48px rgba(61,43,49,.08); }
.generator-form { padding: 22px; display: grid; gap: 16px; }
.form-heading, .preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid rgba(50,42,45,.11); }
.form-heading strong, .preview-heading strong { font-size: 17px; }
.form-heading small, .preview-heading small { color: #8a817c; font-size: 9px; font-weight: 750; }
.field { min-width: 0; display: grid; gap: 7px; }
.field > span, .theme-field legend { color: #474044; font-size: 11px; font-weight: 850; }
.field b { margin-left: 5px; color: #bc1934; font-size: 8px; }
.field input { width: 100%; min-width: 0; height: 45px; padding: 0 13px; border: 1px solid rgba(48,39,43,.16); border-radius: 8px; outline: 0; color: #1c181a; background: rgba(255,255,255,.82); font: inherit; font-size: 14px; }
.field input:focus { border-color: rgba(188,25,52,.58); box-shadow: 0 0 0 3px rgba(188,25,52,.08); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-upload input { height: auto; padding: 10px; font-size: 11px; }
.field-upload small { color: #837a76; font-size: 9px; line-height: 1.6; }
.stat-fields input { font-variant-numeric: tabular-nums; }
.achievement-editor { display: grid; gap: 10px; }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editor-heading > span { color: #474044; font-size: 11px; font-weight: 850; }
.editor-heading button { padding: 7px 11px; border: 1px solid rgba(48,39,43,.16); border-radius: 999px; color: #fff; background: #272025; cursor: pointer; font: inherit; font-size: 10px; font-weight: 850; }
.achievement-editor-rows { display: grid; gap: 9px; }
.achievement-editor-row { position: relative; display: grid; grid-template-columns: minmax(96px,.55fr) minmax(180px,1.45fr) auto; align-items: end; gap: 8px; padding: 11px; border: 1px solid rgba(48,39,43,.11); border-radius: 10px; background: #f3efe9; }
.achievement-editor-row .field input { height: 40px; background: #fff; }
.remove-achievement { height: 40px; padding: 0 10px; border: 0; border-radius: 7px; color: #9f1730; background: rgba(178,23,48,.08); cursor: pointer; font: inherit; font-size: 9px; font-weight: 850; }
.terms-check { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border-radius: 8px; background: #f1ede6; color: #51494c; font-size: 11px; font-weight: 750; line-height: 1.6; }
.terms-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: #b71933; }
.terms-check a { color: #ac1730; text-decoration: underline; text-underline-offset: 3px; }
.generator-error { margin: -5px 0 0; color: #b31530; font-size: 11px; font-weight: 850; }
.generator-actions { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 9px; }
.generator-actions button { min-height: 47px; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 900; }
.action-view { color: #fff; background: linear-gradient(135deg,#9b1730,#6f1427); }
.action-download { color: #282124; background: #e6ddd4; }
.action-share { color: #fff; background: #171317; }
.generator-actions button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.share-status { min-height: 1.6em; margin: -5px 0 0; color: #6b615e; font-size: 10px; line-height: 1.6; }
.preview-panel { position: sticky; top: 92px; padding: 18px; }
.canvas-shell { width: min(100%, 410px); margin: 15px auto 0; overflow: hidden; border-radius: 12px; background: #120f11; box-shadow: 0 15px 40px rgba(24,15,19,.2); }
.canvas-shell canvas { display: block; width: 100%; height: auto; aspect-ratio: 98/149; }
.preview-panel > p { margin: 13px 2px 0; color: #7a716d; font-size: 10px; line-height: 1.7; }
.completed-card-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: #fff;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.06) 0, rgba(255,255,255,.012) 24%, transparent 50%),
    radial-gradient(circle at 50% 56%, rgba(117,76,101,.10) 0, transparent 42%),
    linear-gradient(180deg,#0b090b 0%,#100c0f 45%,#070607 100%);
  box-shadow: none;
}
.completed-card-dialog[open] { display: block; }
.completed-card-dialog::backdrop { background: #070607; }
.completed-card-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
  box-sizing: border-box;
  isolation: isolate;
}
.completed-card-viewer::before,
.completed-card-viewer::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.completed-card-viewer::before {
  inset: -18%;
  opacity: .58;
  background:
    radial-gradient(ellipse at 50% 49%, rgba(230,196,126,.07) 0 8%, transparent 34%),
    radial-gradient(ellipse at 28% 38%, rgba(100,77,134,.08), transparent 34%),
    radial-gradient(ellipse at 73% 66%, rgba(120,43,70,.08), transparent 38%);
  filter: blur(18px);
}
.completed-card-viewer::after {
  inset: 0;
  opacity: .24;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0 20%, transparent 74%);
  mask-image: radial-gradient(circle at center, #000 0 20%, transparent 74%);
}
.completed-card-close {
  position: absolute;
  z-index: 20;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  color: rgba(255,255,255,.62);
  background: rgba(10,8,10,.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  font: 300 24px/1 system-ui,sans-serif;
  opacity: .62;
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
}
.completed-card-close:hover,
.completed-card-close:focus-visible { opacity: 1; background: rgba(255,255,255,.08); transform: scale(1.04); outline: none; }
.completed-card-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  perspective: 1100px;
  overflow: visible;
}
.completed-card-slot {
  width: min(460px, calc(100vw - 48px), calc(65.714dvh - 31.54px));
  min-height: 0;
  display: grid;
  place-items: center;
  perspective: 1100px;
  touch-action: none;
}
.completed-card-slot .member-modal-card.profile-card {
  width: min(460px, calc(100vw - 48px), calc(65.714dvh - 31.54px)) !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 48px) !important;
  aspect-ratio: 46 / 70;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: grab;
  filter: drop-shadow(0 32px 55px rgba(0,0,0,.58));
}
.completed-card-slot .member-modal-card.profile-card.is-dragging-card { cursor: grabbing; }
.completed-card-slot .profile-avatar::after { display: none !important; }
.completed-card-slot .profile-results-scroll { overscroll-behavior-y: contain; touch-action: pan-y; }

.generator-terms { position: fixed; width: min(900px, calc(100% - 24px)); max-height: min(86vh, 820px); margin: auto; padding: 0; overflow: hidden; border: 0; border-top: 5px solid #b71933; border-radius: 3px; color: #1b1719; background: #f7f4ef; box-shadow: 0 20px 60px rgba(25,15,19,.28); }
.generator-terms::backdrop { background: rgba(17,12,14,.62); }
.terms-scroll { max-height: min(86vh, 820px); padding: 34px 38px 38px; overflow-y: auto; }
.terms-close { position: absolute; z-index: 2; right: 18px; top: 18px; width: 34px; height: 34px; border: 1px solid #292225; border-radius: 2px; color: #292225; background: transparent; cursor: pointer; font-size: 20px; }
.terms-open { padding: 0; border: 0; color: #ac1730; background: transparent; cursor: pointer; font: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 3px; }
.crop-dialog { width: min(460px, calc(100% - 20px)); max-height: calc(100vh - 20px); margin: auto; padding: 0; overflow: auto; border: 0; border-top: 5px solid #b71933; border-radius: 3px; color: #241d20; background: #f7f4ef; box-shadow: 0 20px 60px rgba(25,15,19,.32); }
.crop-dialog::backdrop { background: rgba(17,12,14,.62); }
.crop-panel { padding: 22px; display: grid; gap: 16px; }
.crop-heading { padding-bottom: 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; border-bottom: 1px solid #d8d0c9; }
.crop-heading small { color: #af1830; font-size: 10px; font-weight: 900; }
.crop-heading h2 { margin: 3px 0 0; font-size: 25px; }
.crop-close { width: 34px; height: 34px; border: 1px solid #292225; border-radius: 2px; color: #292225; background: transparent; cursor: pointer; font-size: 20px; }
.crop-viewport { width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border: 5px solid #d0ae66; border-radius: 50%; background: #251f22; box-shadow: 0 0 0 2px #725525; }
.crop-viewport img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%; transform: scale(1); }
.crop-control { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; color: #51484c; font-size: 13px; font-weight: 850; }
.crop-control input { width: 100%; accent-color: #a842c7; }
.crop-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 9px; }
.crop-actions button { min-height: 46px; border: 0; border-radius: 2px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 900; }
.crop-cancel { color: #4d4548; background: #e7e0da; }
.crop-apply { color: #fff; background: #21191d; }
.tournament-dialog { width: min(680px,calc(100% - 20px)); max-height: calc(100dvh - 20px); margin: auto; padding: 0; overflow: hidden; border: 1px solid rgba(37,27,31,.12); border-radius: 18px; color: #231c1f; background: #fbfaf8; box-shadow: 0 24px 70px rgba(20,12,15,.28); }
.tournament-dialog::backdrop { background: rgba(25,20,22,.55); backdrop-filter: blur(3px); }
.tournament-panel { max-height: calc(100dvh - 20px); padding: 18px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 11px; }
.tournament-heading { position: sticky; z-index: 10; top: -18px; margin: -18px -18px 0; padding: 14px 18px 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(53,41,46,.1); background: rgba(251,250,248,.96); backdrop-filter: blur(10px); }
.tournament-heading small { color: #b71933; font-size: 11px; font-weight: 900; }
.tournament-heading h2 { margin: 2px 0 0; font-size: 26px; letter-spacing: -.04em; }
.tournament-close { position: sticky; top: 0; flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #40373a; background: #eeeae6; cursor: pointer; font-size: 20px; }
.tournament-lead { margin: -8px 0 2px; color: #756c68; font-size: 13px; line-height: 1.7; }
.result-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.result-picker legend,.tournament-section-label { margin: 0 0 9px; color: #443b3f; font-size: 12px; font-weight: 900; }
.result-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.result-options button { min-width: 0; min-height: 36px; padding: 0 7px; border: 1px solid #d9d2cc; border-radius: 999px; color: #554b4f; background: #fff; cursor: pointer; font: inherit; font-size: 10px; font-weight: 850; }
.result-options button.is-active { border-color: #b71933; color: #9b152c; background: #fff2f4; box-shadow: inset 0 0 0 1px #b71933; }
.result-picker label { margin-top: 10px; display: grid; gap: 6px; color: #4c4246; font-size: 11px; font-weight: 850; }
.result-picker label[hidden] { display: none; }
.result-picker input { width: 100%; height: 48px; padding: 0 13px; border: 1px solid #d4cdc7; border-radius: 10px; outline: 0; background: #fff; font: inherit; font-size: 16px; }
.tournament-section-label { margin-bottom: -9px; }
.tournament-types { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.tournament-types button { min-height: 52px; padding: 8px 10px; display: grid; align-content: center; gap: 2px; border: 1px solid #ddd7d1; border-radius: 10px; color: #3d3538; background: #fff; text-align: left; cursor: pointer; font: inherit; }
.tournament-types button:last-child { grid-column: auto; }
.tournament-types button strong { font-size: 14px; }
.tournament-types button span { color: #8b817d; font-size: 10px; font-weight: 700; }
.tournament-types button.is-active { border-color: #b71933; color: #97142a; background: #fff5f6; box-shadow: inset 0 0 0 1px #b71933; }
.tournament-types button.is-active span { color: #8b5962; }
.tournament-fields { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; }
.tournament-fields label,.tournament-custom-field { display: grid; gap: 7px; color: #4c4246; font-size: 12px; font-weight: 900; }
.tournament-fields label[hidden],.tournament-custom-field[hidden] { display: none; }
.tournament-fields input,.tournament-fields select,.tournament-custom-field input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #d4cdc7; border-radius: 10px; outline: 0; color: #20191c; background: #fff; font: inherit; font-size: 15px; }
.tournament-fields input:focus,.tournament-custom-field input:focus { border-color: #b71933; box-shadow: 0 0 0 3px rgba(183,25,51,.10); }
.tournament-preview { padding: 10px 12px; display: grid; gap: 3px; border: 1px solid #e0dad4; border-radius: 10px; color: #241d20; background: #f3f0ec; }
.tournament-preview span { color: #766d69; font-size: 10px; font-weight: 800; }
.tournament-preview strong { font-size: 16px; line-height: 1.5; }
.tournament-preview strong.is-empty { color: #958c87; }
.tournament-preview strong.is-error { color: #b71933; }
.tournament-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 9px; }
.tournament-actions button { min-height: 44px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 900; }
.tournament-footer { display: grid; grid-template-columns: auto minmax(280px,1fr); align-items: center; gap: 14px; }
.tournament-cancel { color: #50464a; background: #e9e1da; }
.tournament-apply { color: #fff; background: #21191d; }
.delete-achievement { justify-self: start; padding: 4px 0; border: 0; color: #a1162d; background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.day2-display-toggle { padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid #ddd6d0; border-radius: 11px; background: #fff; cursor: pointer; }
.day2-display-toggle input { width: 22px; height: 22px; accent-color: #b71933; }
.day2-display-toggle span { display: grid; gap: 2px; }
.day2-display-toggle strong { font-size: 14px; }.day2-display-toggle small { color: #817773; font-size: 10px; }
.day2-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.day2-input-grid > label { display: grid; gap: 7px; color: #4c4246; font-size: 12px; font-weight: 900; }
.day2-input-grid label div { height: 54px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border: 1px solid #d4cdc7; border-radius: 10px; background: #fff; }
.day2-input-grid input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 20px; font-weight: 900; }
.day2-input-grid em { font-size: 12px; font-style: normal; }
.generator-terms > span { color: #af1830; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.generator-terms h2 { margin: 8px 0 12px; font-size: clamp(28px, 5vw, 47px); letter-spacing: -.05em; }
.terms-lead { margin: 0 0 32px; color: #615a57; font-size: 13px; line-height: 1.8; }
.generator-terms article { padding: 22px 0; border-top: 1px solid rgba(44,36,39,.11); }
.generator-terms h3 { margin: 0 0 8px; font-size: 16px; }
.generator-terms article p, .generator-terms li { color: #625b58; font-size: 12px; line-height: 1.9; }
.generator-terms article p { margin: 0; }.generator-terms ul { margin: 0; padding-left: 1.35em; }
.terms-updated { margin: 24px 0 0; color: #8a817c; font-size: 10px; }
@media (max-width: 900px) {
  .generator-main { padding-top: 34px; gap: 20px; }
  .generator-heading { max-width: 580px; margin: 0 auto; }
  .generator-heading p { max-width: none; }
  .generator-layout { grid-template-columns: 1fr; }
  .preview-panel { position: static; grid-row: 1; }
}
@media (max-width: 560px) {
  .generator-main { width: min(100% - 18px, 1180px); padding-bottom: 60px; }
  .generator-heading { padding: 0 2px 14px; }.generator-heading h1 { max-width: 100%; font-size: clamp(23px, 7.2vw, 34px); }
  .generator-form, .preview-panel { border-radius: 12px; }
  .generator-form { padding: 16px; }
  .preview-panel { padding: 10px; }
  .preview-heading { padding: 4px 4px 11px; }
  .field-row { grid-template-columns: 1fr; }
  .achievement-editor-row { grid-template-columns: 1fr; }
  .remove-achievement { width: 100%; }
  .generator-actions { grid-template-columns: 1fr; }
  .terms-scroll { padding: 28px 20px 30px; }
  .crop-panel { padding: 18px; }
  .crop-viewport { width: min(72vw, 310px); }
  .direct-editor { gap: 12px; }
  .direct-editor { padding: 0; }
  .direct-editor-guide { padding: 0 2px; text-align: left; }
  .shared-member-card-preview .member-modal-card.profile-card { width: 100% !important; height: 560px !important; min-height: 560px !important; }
  .outside-card-actions { grid-template-columns: 1fr; gap: 8px; }
  .generator-actions { position: sticky; z-index: 20; bottom: max(8px,env(safe-area-inset-bottom)); padding: 7px; border: 1px solid rgba(58,42,48,.12); border-radius: 14px; background: rgba(246,242,236,.92); box-shadow: 0 12px 34px rgba(34,22,27,.2); backdrop-filter: blur(12px); }
  .generator-profile-inputs { grid-template-columns: 76px 1fr; padding: 12px; }
  .generator-avatar-input > span { width: 76px; }
  .generator-text-inputs,.generator-number-inputs { grid-template-columns: 1fr; }
  .profile-card-editor { aspect-ratio: 490/745; min-height: 0; overflow: hidden; }
  .profile-card-editor input,.profile-card-editor button { touch-action: manipulation; }
  .completed-card-dialog { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .completed-card-viewer { width: 100%; height: 100%; min-height: 100dvh; padding: max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
  .completed-card-close { width: 34px; height: 34px; font-size: 21px; }
  .completed-card-stage { height: 100%; min-height: 0; }
  .completed-card-slot { width: min(360px, calc(100vw - 32px), calc(65.714dvh - 21.03px)); min-height: 0; }
  .completed-card-slot .member-modal-card.profile-card { width: min(360px, calc(100vw - 32px), calc(65.714dvh - 21.03px)) !important; height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 32px) !important; aspect-ratio: 46 / 70; }
  .tournament-panel { max-height: calc(100dvh - 12px); padding: 14px; gap: 9px; }
  .tournament-heading { top: -14px; margin: -14px -14px 0; padding: 11px 14px 8px; }
  .tournament-heading small { font-size: 9px; }.tournament-heading h2 { font-size: 23px; }
  .tournament-types { grid-template-columns: repeat(3,1fr); gap: 6px; }
  .tournament-types button { min-height: 48px; padding: 7px 8px; }.tournament-types button strong { font-size: 12px; }.tournament-types button span { font-size: 8px; }
  .tournament-fields { grid-template-columns: .65fr 1.35fr; gap: 7px; }
  .result-options { grid-template-columns: repeat(4,1fr); gap: 5px; }.result-options button { min-height: 34px; padding: 0 4px; font-size: 9px; }
  .tournament-footer { grid-template-columns: auto minmax(0,1fr); gap: 9px; }.tournament-footer .tournament-actions { gap: 6px; }
  .day2-input-grid { grid-template-columns: 1fr; }
  .tournament-dialog { width: calc(100% - 12px); max-height: calc(100dvh - 12px); margin: auto; border-radius: 16px; }
}
@media (max-width: 390px) {
  .shared-member-card-preview .member-modal-card.profile-card { height: 540px !important; min-height: 540px !important; }
}