/* Felt artwork remains the title. The controls occupy the medallion and its own lower strip. */
.title-art-plane{container-type:inline-size}
.title-brand{position:absolute;left:38%;top:21%;width:24%;margin:0;text-align:center;color:#fff1d9;line-height:1.15;text-shadow:1px 1px #e4cba6,2px 3px 1px #746756,0 0 3px #fff0d3}
.title-brand strong{display:block;font-size:clamp(44px,5.4cqw,94px);font-weight:900;letter-spacing:.12em;padding-left:.12em}
.title-brand>span{display:block;margin-top:.4em;font-size:clamp(16px,1.6cqw,27px);letter-spacing:.16em;font-weight:700}
.title-start-hit,.has-save .title-start-hit{left:41.7%;top:44%;width:16.6%;height:6.8%;border:1px dashed #dbc6a5;border-radius:30%;background:#201d1dc9;color:#fff1d9;box-shadow:none;text-shadow:1px 2px #81715a;font-size:clamp(16px,1.7cqw,28px);font-weight:800;letter-spacing:.08em}
.title-save-note{left:36%;top:52%;width:28%;font-size:14px;color:#fff4de;line-height:1.3;text-shadow:0 2px 2px #151313}
.title-demo{position:absolute;left:50%;top:85.2%;bottom:auto;width:min(340px,calc(100vw - 32px));padding:10px 24px 10px 42px;border:3px solid #ead2aa;border-radius:8px 18px 18px 8px;background-color:#1c3a59;background-image:var(--felt-noise);outline:1px dashed #f8e6c4;outline-offset:-8px;box-shadow:0 4px 0 #744129,0 6px 12px #81371740;transform:translateX(-50%) rotate(-2deg);color:#fff2d9;white-space:normal;text-align:center}
.title-demo:before{content:'';position:absolute;left:18px;top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:#f87929;box-shadow:0 0 0 3px #edd5ad}
.title-demo strong{display:block;font-size:20px;letter-spacing:.13em;line-height:1.4}
.title-demo small{font-size:14px;opacity:1;line-height:1.4;color:#fff1d8;margin-top:3px}
.title-demo:focus-visible{outline:3px dashed white;outline-offset:4px}
.demo-exit{font:inherit;font-size:14px;font-weight:700;white-space:nowrap;color:#fff1d9;background:#23476a;border:1px dashed #edcea1;border-radius:10px;padding:10px 12px;cursor:pointer}
.demo-reflection{display:grid;place-items:center;padding:32px 20px;background-color:#17385f;background-image:var(--felt-noise)}
.demo-writing{width:min(100%,660px);color:#fff0d8;text-align:center;padding:30px 20px}
.demo-writing h2{font-size:clamp(26px,4vw,40px);line-height:1.4;margin:16px 0}
.demo-writing p{font-size:16px;line-height:1.8}
.demo-writing .feel-options{justify-content:center;flex-wrap:wrap;margin:25px 0}
.demo-writing .ticket-input{text-align:left;max-width:430px;margin:0 auto 26px;font-size:16px}
.demo-writing .demo-save-note{font-size:14px;color:#f1d2a9}
#app[data-view="demoTicket"] .ticket-page{padding:24px;min-height:100%;overflow:visible}
#app[data-view="demoTicket"] .ticket-editor{min-width:0}
.perception-options{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.perception-options .btn{font-size:16px;padding:13px 23px;min-height:48px}
.perception-heard{display:block;font-size:14px;color:#f1c895;margin:0 0 7px}
.felt-play .dialogue:has(.perception-options){grid-template-columns:1fr}
.felt-play .dialogue:has(.perception-options)>.actions{grid-column:1;grid-row:auto;justify-self:start}
.choice-keepsake{position:absolute;left:30%;top:61%;width:23%;max-height:37%;padding:0;border:0;background:none;cursor:pointer;color:#51351e;filter:drop-shadow(2px 5px 4px #37281745);animation:keepsake-arrive .5s ease both;z-index:4}
.choice-keepsake>.outcome-photo{display:block;width:100%;max-height:190px;object-fit:contain;border:7px solid #ffefd1;border-bottom-width:25px;border-radius:2px;transform:rotate(-4deg)}
.choice-keepsake>.outcome-prop{display:block;width:76%;height:clamp(65px,10vw,180px);margin:0 auto}
.choice-keepsake>span:last-child:not(.outcome-prop){display:block;font-size:14px;font-weight:700;line-height:1.4;background:#fff1d5;border-radius:6px;padding:5px 8px;margin:3px auto 0;width:max-content;max-width:100%}
.choice-keepsake:focus-visible{outline:3px dashed #ffedd0;outline-offset:6px}
.outcome-prop{position:relative;display:block;overflow:hidden;width:min(100%,330px);margin:0 auto}
.outcome-prop>image{pointer-events:none}
.outcome-detail{max-width:560px;margin:0 auto;text-align:center}
.outcome-detail .outcome-photo{display:block;width:100%;height:auto;max-height:380px;object-fit:contain;border:8px solid #f5e5c8}
.outcome-detail figcaption{margin:18px 0 0;font-size:16px;line-height:1.8}
.emotion-transition{display:flex;flex-direction:column;gap:5px;margin-top:9px;max-width:none;font-size:14px;line-height:1.5;text-align:left;color:#674936}
.emotion-transition>span{display:flex;align-items:baseline;gap:7px}
.emotion-transition em{font-size:14px;font-style:normal;white-space:nowrap;color:#775536;flex:none}
.emotion-token small{font-size:14px}
.resonance-objects{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.resonance-objects li{display:flex;flex-direction:column;gap:6px;padding:12px 8px;border-top:1px dashed #bda17f;font-size:16px;line-height:1.5}
.resonance-objects small{font-size:14px;color:#775d43}
.resonance-full{font-size:16px;line-height:1.8}
.resonance-full summary{font-size:14px;font-weight:700;cursor:pointer;padding:10px 0;color:#664127}
.resonance-full>p{margin-top:10px}
.resonance-line{font-size:16px;line-height:1.8}
.felt-brew .recipe-note,#brew-reason,.felt-brew .brew-main-action>p,.felt-brew .brew-navigation .textbtn,.felt-brew .brew-navigation .btn.ghost{font-size:14px;line-height:1.5}
@keyframes keepsake-arrive{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@media(max-width:700px){
 #app[data-demo="true"] .game-topbar h1{display:none}
 #app[data-demo="true"] .game-brand{gap:8px;min-width:0}
 #app[data-demo="true"] .game-tools{gap:6px}
 #app[data-demo="true"] .game-topbar{padding-left:10px;padding-right:10px;gap:8px}
 .emotion-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
 .emotion-orb{margin-left:auto;margin-right:auto}
 .emotion-token small,.emotion-transition{font-size:14px}
 .emotion-transition{max-width:175px;margin-left:auto;margin-right:auto}
 .mix-seat .emotion-transition{display:none}
 .resonance-objects{gap:8px}
 .recipe-note{max-width:14ch;text-align:center}
 .felt-brew .brew-main-action>p{font-size:14px}
 #app[data-view="demoTicket"] .ticket-page{display:flex;flex-direction:column;padding:26px 20px;gap:30px}
 #app[data-view="demoTicket"] .ticket-editor,#app[data-view="demoTicket"] .ticket{width:100%;max-width:540px;margin:auto}
 #app[data-view="demoTicket"] .ticket-editor h1{font-size:28px}
 .ticket-actions .small,.ticket-footer,.ticket-input,.feel-options button{font-size:14px}
 .choice-keepsake{width:27%;left:27%;top:61%}
 .choice-keepsake>span:last-child:not(.outcome-prop){font-size:14px;max-width:100%;padding:3px 5px}
 .perception-options{justify-content:flex-start}
 .perception-options .btn{padding:10px 16px}
 .felt-play .dialogue:has(.perception-options){max-height:52dvh}
}
@media(max-height:520px) and (orientation:landscape){
 .title-art-plane{width:min(100vw,177.6833dvh)}
 .title-brand{top:20%}
 .title-brand strong{font-size:clamp(28px,5.1cqw,48px)}
 .title-brand>span{font-size:14px;margin-top:.25em}
 .title-start-hit,.has-save .title-start-hit{font-size:14px;top:43%;height:8%}
 .title-save-note{top:52%;font-size:12px}
 .title-demo{top:85%;padding:5px 20px 5px 34px;width:280px}
 .title-demo strong{font-size:16px;line-height:1.2}
 .title-demo small{font-size:14px;line-height:1.2}
 .title-demo:before{left:14px}
 .demo-writing{padding:10px}
 .demo-writing h2{font-size:28px}
 .felt-brew .brew-navigation{gap:4px}
 .felt-brew .brew-navigation #brew-reason{margin-bottom:0}
 .felt-brew .brew-main-action>p{display:block;font-size:14px;max-width:34ch}
}
@media(prefers-reduced-motion:reduce){.choice-keepsake{animation:none}}

.mix-seat .emotion-transition{display:none}
.reward-emotion .emotion-token small{font-size:14px}