/* 8-B: 画像を画面高55%以内に制限。余白・書体寸法は仮。 */
body.entry-active > :not(.topbar):not(#entryScreen):not(#thanksScreen):not(#entryLogoScreen):not(#addressScreen):not(#addressResult):not(#supportReceipt):not(script):not(.dissolve-layer){display:none!important}
#entryScreen{box-sizing:border-box;height:100svh;min-height:0;padding:max(8px,env(safe-area-inset-top)) 16px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:#F6F0E6 url('assets/felt/cloth.webp') center/360px;color:#443C35}
#entryScreen[hidden]{display:none}
#entryScreen h1{flex:none;font-family:'Kiwi Maru',serif;font-size:clamp(24px,7vw,34px);line-height:1.3;margin:0}
#entryArt{display:block;box-sizing:border-box;width:100%;max-width:440px;height:min(55svh,440px);max-height:55svh;min-height:0;flex:0 1 440px;object-fit:cover;border-radius:28px}
#entryCopy{flex:none;font-size:14px;line-height:1.6;margin:0}
#entryNext{flex:none;width:min(100%,340px);min-height:48px;margin:0}
#entryMusic{flex:none;min-height:44px;border:0;background:transparent;color:#443C35}
#entryStatus{flex:none;font-size:12px;max-width:340px;margin:0}
#entryStatus:empty{display:none}
#entryReplay{display:block;margin:24px auto;font-size:12px;padding:10px;background:transparent;border:0;color:#443C35;text-decoration:underline}
#earth .stage{width:min(100%,520px);aspect-ratio:auto;filter:none;margin:auto}
#earth.earth-view{padding:76px 12px 110px}
#earth .felt-scene{position:relative;aspect-ratio:1;background:#101d38 url('assets/felt/felt-space.webp') center/cover;border-radius:28px;overflow:hidden}
#earth .stage-art{position:static;width:100%;height:100%;object-fit:contain;border-radius:0;animation:none;padding:18px 24%;filter:drop-shadow(0 10px 8px #050c2180)}
#earth .share-area{position:static;transform:none;width:100%;margin:18px auto 0;padding:0}
#earth .global-sound{top:12px;left:12px;font-size:12px;min-height:44px;padding:8px}
#earth .global-music{left:148px}
#machineHandle:not(:disabled) span{animation:entryHandle 1.4s ease-in-out infinite!important}
.handle-callout{position:absolute;left:4%;top:38%;max-width:92%;padding:8px 10px;border-radius:16px;background:#F6F0E6;color:#443C35;box-shadow:0 3px 8px #0003;font-size:14px;pointer-events:none}
.handle-callout:after{content:'';position:absolute;bottom:-9px;left:55%;border:10px solid transparent;border-top-color:#F6F0E6;border-bottom:0}
.machine-turning .handle-callout{display:none}
#singleMachine.machine-dropped #machineHint{display:table;margin:0 auto 14px;padding:10px 16px;background:#F6F0E6;color:#443C35;border-radius:18px;text-shadow:none}
@keyframes entryHandle{0%,100%{transform:rotate(-25deg)}50%{transform:rotate(-12deg)}}
@keyframes entryBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
#earth .stage-art{transform:none;background:transparent;border:0;box-shadow:none}
#earth .global-sound{position:absolute;display:inline-block;margin:0}

@media(prefers-reduced-motion:reduce){#machineHandle:not(:disabled) span{animation:none!important}}

/* 8-D: 浮かび上がり。時間・上昇量は仮。切り抜きは8-Eで適用。 */
#resultDialog.revealing .result-card {animation:residentRise var(--effect-reveal) ease-out both}
#resultDialog .result-card.felt-rare:after {animation-delay:var(--effect-reveal)}
#batchResults .batch-back {display:none}
#batchResults .batch-card.waiting .batch-flip {opacity:0;transform:none}
#batchResults .flipping .batch-flip {animation:residentRise var(--effect-flip) ease-out both}
@keyframes residentRise {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
 #resultDialog.revealing .result-card,#batchResults .flipping .batch-flip {animation-name:residentFade}
}
@keyframes residentFade {from{opacity:0}to{opacity:1}}

/* 8-E: 住人は透過素材、背景は枠なし。影の位置・濃度、角4pxは仮。 */
#resultDialog .result-card,
#batchResults .batch-card,
#collection .card[data-item-type="character"],
#collection .card[data-item-type="background"] {
 background:transparent;border:0;box-shadow:none;padding:0;
}
#resultDialog .result-card img,
#batchResults .batch-card img,
#collection [data-item-type="character"] .card-img,
#collection [data-item-type="background"] .card-img,
#collection [data-item-type="character"] .card-img img,
#collection [data-item-type="background"] .card-img img,
.collection-large[data-item-type="character"],
.collection-large[data-item-type="background"],
.town-character,.town-background {
 background:transparent;border:0;border-radius:4px;padding:0;box-shadow:none;
}
#resultDialog .result-card:not(.background) img,
#batchResults .batch-card.character img,
#collection [data-item-type="character"] .card-img img,
.collection-large[data-item-type="character"],
.town-character {
 border-radius:0;
 background:radial-gradient(ellipse 28% 3% at 50% 94%,#443c3526,transparent);
}
.collection-large[data-item-type="character"] {width:min(100%,65dvh);aspect-ratio:1;margin-inline:auto}
/* 完成絵とその札は維持。住人・背景の完成印は小さな名前の札に残す。 */
#collection .card.is-complete:not([data-item-type="complete"]) h3 {
 color:#443C35;background:#D7B76A;border-radius:4px;
}
/* 導入2だけは縦長の全景を収め、街並みや器を切らない。 */
#entryArt[data-scene="1"] {object-fit:contain;border-radius:4px}

/* 9-E: 1コマ目で待機。プロンプトの寸法・配置は仮。 */
#entryScreen.opening-active > :not(#openingScreen){display:none}
#openingScreen{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#101d38;overflow:hidden;cursor:pointer;touch-action:manipulation}
#openingScreen[hidden]{display:none}
/* 縁の幅は仮50px、映像の比率を維持。 */
#openingVideo,#openingPoster{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:min(100%,780px);height:auto;aspect-ratio:780/442;object-fit:contain;pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 50px,#000 calc(100% - 50px),transparent),linear-gradient(to bottom,transparent,#000 50px,#000 calc(100% - 50px),transparent);mask-image:linear-gradient(to right,transparent,#000 50px,#000 calc(100% - 50px),transparent),linear-gradient(to bottom,transparent,#000 50px,#000 calc(100% - 50px),transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
#openingVideo{z-index:1}
#openingScreen.opening-still #openingVideo{visibility:hidden}
#openingPrompt{position:absolute;z-index:2;top:max(24px,env(safe-area-inset-top));left:0;right:0;color:#F6F0E6;font-size:14px;text-shadow:0 1px 6px #101d38;pointer-events:none}
@media(prefers-reduced-motion:reduce){#openingVideo{display:none}}
/* 共通の退場レイヤー。元画面を透かして次画面を見せる。操作と保存は即時。 */
.dissolve-layer{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;padding:0!important;border:0!important;margin:0!important;overflow:hidden!important;pointer-events:none!important;background:transparent!important;z-index:2147483647!important}
.dissolve-layer::backdrop{background:transparent;pointer-events:none}

/* 9-D: 同額単価の3択。320pxでは縦に並べる。 */
.ticket-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}
.ticket-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:104px;padding:8px 4px;border:2px solid #D7B76A;border-radius:12px;cursor:pointer;color:#443C35;background:#F6F0E6;touch-action:manipulation}
.ticket-option:has(input:checked){background:#ffe69b;border-color:#926b2e}
.ticket-option>span{display:grid;gap:6px;font-size:12px}
.ticket-option strong{font-size:20px}
.ticket-option input{margin:0;accent-color:#926b2e}
@media(max-width:340px){.ticket-options{grid-template-columns:1fr}.ticket-option{min-height:72px;flex-direction:row}.ticket-option>span{display:flex;align-items:center;gap:12px}}

/* 9-E: 同じ映像を背景へ拡大。ぼかし24px・はみ出し48px・縮小0.35秒は仮。 */
#openingBackdrop,#openingBackdropPoster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(24px);pointer-events:none}
#openingScreen.opening-still #openingBackdrop{visibility:hidden}
#openingPrompt[hidden],#openingSkip[hidden]{display:none}
#openingSkip{position:absolute;z-index:3;right:max(16px,env(safe-area-inset-right),calc((100vw - 780px)/2 + 16px));bottom:max(16px,env(safe-area-inset-bottom),calc((100svh - min(100vw,780px)*442/780)/2 + 16px));font-size:12px;color:#F6F0E6;background:#101d3866;border:0;padding:12px}
#resultDialog.revealing #singleResultBadge.is-new{animation:newLabel 1.15s linear var(--effect-reveal) both}
#resultDialog.revealing #singleResultBadge.is-new:before{content:'NEW';position:fixed;z-index:5;left:50vw;top:50dvh;width:70vw;font:bold 30vw/1 'Kiwi Maru',serif;text-align:center;color:#D7B76A;text-shadow:0 0 18px #ffe29b;pointer-events:none;animation:newImpact 1.15s ease-in-out var(--effect-reveal) both}
@keyframes newLabel{0%,99%{color:transparent;background:transparent;border-color:transparent;text-shadow:none}100%{color:#D7B76A}}
@keyframes newImpact{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}12%,69.56%{opacity:1;left:50vw;top:50dvh;transform:translate(-50%,-50%) scale(1)}99%{opacity:1;left:var(--new-x);top:var(--new-y);transform:translate(-50%,-50%) scale(var(--new-scale))}100%{opacity:0;left:var(--new-x);top:var(--new-y);transform:translate(-50%,-50%) scale(var(--new-scale))}}
#resultDialog.revealing.single-new .sparkle{animation-delay:calc(var(--effect-reveal) + var(--delay));animation-duration:.8s}
#resultDialog.revealing #singleResultBadge.is-new:after{animation-delay:calc(var(--effect-reveal) + .8s)}
/* 10連はカードの中で中央から札へ。比率と移動量は仮。 */
.batch-front{position:relative}
.batch-card:not(.waiting):not(.flipping) .batch-new,.batch-card.revealed .batch-new{animation:batchNewImpact 1.15s ease-in-out both}
@keyframes batchNewImpact{0%{opacity:0;transform:translateY(-60px) scale(1.8)}12%,69.56%{opacity:1;transform:translateY(-60px) scale(1.8);text-shadow:0 0 12px #D7B76A}100%{opacity:1;transform:none}}
.batch-new:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#D7B76A 0 2px,transparent 3px) 0 0/14px 14px;opacity:0}
.batch-card:not(.waiting):not(.flipping) .batch-new:before,.batch-card.revealed .batch-new:before{animation:batchNewGold .8s ease-out both}
@keyframes batchNewGold{10%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
@media(prefers-reduced-motion:reduce){
 #openingBackdrop{display:none}
 #resultDialog.revealing #singleResultBadge.is-new{animation:none}
 #resultDialog.revealing #singleResultBadge.is-new:before{display:none}
 #resultDialog.revealing.single-new .sparkle{animation-name:feltTwinkleSoft}
 .batch-card .batch-new{animation:none!important}
 .batch-card .batch-new:before{animation:none!important}
}
#resultDialog .result>#singleResultBadge{z-index:4}

/* 10-F4 (b): 同じ絵を幅に合わせ、足りない上下は既存フェルトで埋める。 */
/* 10-F5: 絵はcover・中央配置で全画面を覆う。吹き出しは全画面の親を基準に維持。 */
#thanksScreen{position:fixed;inset:0;z-index:100;width:100%;height:100svh;overflow:hidden;display:none;padding:0;border:0;border-radius:0;box-shadow:none;background:#F6F0E6 url('assets/felt/cloth.webp') center/240px;color:#443C35;cursor:pointer}
#thanksScreen .thanks-title{position:absolute;z-index:1;left:50%;right:auto;bottom:72%;transform:translateX(-50%);box-sizing:border-box;width:360px;min-width:0;max-width:calc(100% - 32px);margin:0;padding:12px 16px;background:#F6F0E6;border-radius:24px;font-family:'Kiwi Maru',serif;font-size:min(24px,5.5vw);font-weight:400;line-height:1.55;letter-spacing:0;text-align:center;white-space:normal;overflow-wrap:anywhere}
#thanksScreen .thanks-title::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border-left:9px solid transparent;border-right:9px solid transparent;border-top:12px solid #F6F0E6}
#thanksScreen img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none;max-height:none;border:0;border-radius:0;margin:0}
#thanksScreen:focus-visible{outline:3px solid #789078;outline-offset:-6px}

/* 10-D3: §4t。縦並び、320px幅と短い画面ではスクロール。 */
#thanksScreen[hidden]{display:none!important}
#addressResult{position:fixed;inset:0;z-index:101;box-sizing:border-box;width:100%;height:100svh;margin:0;padding:24px 16px max(24px,env(safe-area-inset-bottom));overflow:auto;border:0;border-radius:0;background:#F6F0E6 url('assets/felt/cloth.webp') center/240px;color:#443C35;font-family:'Zen Maru Gothic',sans-serif}
#addressScreen{position:static;box-sizing:border-box;width:100%;height:auto;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:24px}
#addressScreen form{box-sizing:border-box;flex:none;width:100%;max-width:440px;min-width:0;display:flex;flex-direction:column;gap:10px;padding:12px 0;border:0;border-radius:0;background:transparent;box-shadow:none}
#addressScreen label{font-size:14px;line-height:1.7}
#addressScreen input{box-sizing:border-box;width:100%;min-width:0;min-height:48px;padding:10px 12px;border:1px solid #789078;border-radius:12px;background:#fff9;color:#443C35;font:16px 'Zen Maru Gothic',sans-serif}
#addressScreen button,#addressResultGo,#addressResultReport{min-height:48px;width:100%;padding:12px 16px;border:1px dashed #789078;border-radius:16px;background:#789078;color:#fff;font:18px 'Kiwi Maru',serif;cursor:pointer;margin-top:12px}
#addressScreen :is(input,button):focus-visible,#addressResultGo:focus-visible,#addressResultReport:focus-visible{outline:3px solid #D7B76A;outline-offset:3px}
#addressScreen button:disabled{opacity:.6}
.address-result-inner{width:100%;max-width:480px;min-height:100%;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
/* 10-J: 見出しは1.2倍・太字。焦げ茶は仮。 */
#addressResultLead{font:700 19.2px/1.8 'Kiwi Maru',serif;color:#443C35;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;margin:8px 0 16px}
#addressResultCount{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:8px;max-width:100%;margin:0;font-family:'Kiwi Maru',serif}
#addressResultNumber{font-size:clamp(64px,18vw,112px);line-height:1.2;font-weight:500;max-width:100%;overflow-wrap:anywhere}
#addressResultNumber:empty{display:none}
#addressResultCount span{font-size:28px}
#addressResultLabel{font:16px/1.9 'Kiwi Maru',serif;margin:16px 0;overflow-wrap:anywhere}
#addressResultChild{display:flex;width:min(100%,280px);height:clamp(160px,32svh,300px);margin:24px auto 16px}
#addressResultChild img:only-child{width:100%;height:100%}
#addressResultChild img:not(:only-child){flex:1 1 0;width:0;height:auto;aspect-ratio:1}
#addressResultGo,#addressResultReport{max-width:320px}
#addressScreen[hidden],#addressResult[hidden],#addressResult [hidden]{display:none!important}

/* 10-H: JS開始前も透明。減動時は最初の描画から全表示。 */
#thanksScreen.thanks-revealing img,#thanksScreen.thanks-revealing .thanks-title{opacity:0}
@media(prefers-reduced-motion:reduce){
 #thanksScreen.thanks-revealing img,#thanksScreen.thanks-revealing .thanks-title{opacity:1!important}
}

/* 10-I: 説明と既存の子を入力欄の上に。狭い画面は縦スクロール。 */
.address-explanation{box-sizing:border-box;width:100%;max-width:440px;margin:0;font-size:16px;line-height:1.8;overflow-wrap:anywhere;text-align:left}
.address-explanation-child{display:block;width:80px;max-width:100%;height:96px;object-fit:contain;flex:none}

/* 10-J: 指定注記を説明文の直下に小さく配置。 */
.address-registration-note{box-sizing:border-box;width:100%;max-width:440px;min-width:0;margin:-16px 0 0;font-size:12px;line-height:1.8;color:#443C35;white-space:normal;overflow-wrap:anywhere;text-align:left}

/* 10-K: 更新日の指定注記。入力と結果で共通表示。 */
.meal-update-note{box-sizing:border-box;width:100%;max-width:440px;min-width:0;margin:8px 0 0;font-size:12px;line-height:1.8;color:#443C35;white-space:normal;overflow-wrap:anywhere}

#addressForget{display:block;margin:12px auto 0;padding:10px;background:none;border:0;color:inherit;font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}

/* 11-M3: 本人の3文を通常フローで縦に表示。 */
#addressResultSummary{flex:none;font-weight:400}
#addressResultSummary{line-height:1.8}
#addressResultSummary span{display:block}

/* 11-U: 同じ文字寸法・色で、絵文字・言葉・数を1行ずつ。 */
#addressResultSummary{list-style:none;padding:0;text-align:left}
#addressResultSummary li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 6px;align-items:baseline;margin:10px 0}
#addressResultSummary li>span:last-child{text-align:right;white-space:nowrap}

/* 11-W: 通常の注記と同じ文字サイズ。ボタンの言葉は仮。 */
#addressResultSummary #addressResultLastPayment{display:block}
#addressResultContinue{display:inline-block;padding:10px 16px;border:1px solid #789078;border-radius:12px;color:#443C35;background:transparent;text-decoration:none;font-weight:400}
#addressResultReport{display:block;box-sizing:border-box;min-width:0;flex:none;background:#7A5C43;border-color:#7A5C43;color:#fff;text-decoration:none;text-align:center;white-space:nowrap;overflow-wrap:normal;letter-spacing:0;line-height:1.5}

/* Manual batch results stay bounded on narrow phones. */
body .topbar .counters{flex-wrap:wrap;justify-content:center;min-width:0}
#moreDrawsDialog{box-sizing:border-box;width:calc(100% - 32px);max-width:440px;max-height:90dvh;overflow:auto;padding:20px;border:2px solid #789078;border-radius:24px;background:#F6F0E6;color:#443C35;overflow-wrap:anywhere}
#moreDrawsClose,#remainingDraws{box-sizing:border-box;max-width:100%;padding:12px;border:1px solid #789078;border-radius:14px;background:#fffaf2;color:#443C35;font:inherit;text-align:center}
#moreDrawsImage{display:block;width:160px;max-width:100%;height:160px;object-fit:contain;margin:12px auto}
#moreDrawsDialog [hidden],#remainingDraws[hidden],#paidReturnNote[hidden]{display:none!important}
#paidReturnNote{font-size:12px;overflow-wrap:anywhere}

/* The existing header is hidden before a support record is found. */

/* All results are already saved before this optional overview is shown. */
#moreDrawsResults{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
#moreDrawsResults img{width:100%;height:90px;object-fit:contain;min-width:0}
#moreDrawsAll{max-width:100%;padding:12px;border:1px solid #789078;border-radius:14px;background:#fffaf2;color:#443C35;font:inherit}

/* 15-B: isolated silent logo between the top and address entry. */
#entryLogoScreen{position:fixed;inset:0;z-index:102;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100svh;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;background:#F6F0E6 url('assets/felt/cloth.webp') center/240px;cursor:pointer}
#entryLogoScreen[hidden]{display:none!important}
#entryLogoScreen img{display:block;width:70vw;max-width:520px;max-height:80svh;height:auto;object-fit:contain;margin:0}
#entryLogoScreen:focus-visible{outline:3px solid #789078;outline-offset:-6px}
#addressResultThanks{max-width:100%;overflow-wrap:anywhere;text-align:left;line-height:1.9}

/* 15-C: 読み込み前も手入力欄を隠し、余白と入力フォーカスを残さない。 */
#cardNumberForm[hidden]{display:none!important}

/* 16-A: share action; existing report and gacha rules stay intact. */
#addressResultShare{box-sizing:border-box;flex:none;min-height:48px;width:100%;max-width:320px;min-width:0;padding:12px 16px;border:2px solid #7A5C43;border-radius:16px;background:transparent;color:#7A5C43;font:18px 'Kiwi Maru',serif;cursor:pointer;margin-top:12px;overflow-wrap:anywhere}
#addressResultShare:focus-visible{outline:3px solid #D7B76A;outline-offset:3px}
#addressResultShare:disabled{opacity:.6;cursor:wait}

/* 16-B: explanation directly below the breakdown. */
#addressResultNumbers{flex:none;max-width:100%;margin:4px 0 0;color:#443C35;font:12px/1.8 'Zen Maru Gothic',sans-serif;text-underline-offset:.2em;overflow-wrap:anywhere}
#addressResultNumbers:focus-visible{outline:2px solid currentColor;outline-offset:4px}
