:root{color-scheme:light;font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:#173751;background:#f3f7f7}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(circle at 80% 15%,#fcebcf 0,transparent 28%),linear-gradient(140deg,#e9f4f6,#fffaf0 75%)}
a{color:#075987}
button{font:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.45}
.screen-shell{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;gap:16px;padding:20px clamp(16px,2vw,32px)}
.screen-heading{display:flex;align-items:center;gap:18px;border-bottom:2px solid #d8e5e9;padding-bottom:14px}
.screen-heading img{width:88px;height:auto;border-radius:4px;object-fit:contain;box-shadow:0 3px 15px #17375120}
.screen-heading p{margin:0;font-size:clamp(.85rem,1.25vw,1.1rem);font-weight:700;letter-spacing:.14em;color:#4f6d78}
.screen-heading h1{margin:2px 0 0;font-size:clamp(1.6rem,2.6vw,2.7rem);line-height:1.25}
.screen-layout{display:grid;grid-template-columns:minmax(240px,29%) minmax(0,1fr);gap:clamp(14px,2vw,30px);min-height:0}
.qr-panel,.blessing-panel{background:#fffdfb;border:1px solid #dce8e9;border-radius:22px;box-shadow:0 14px 35px #194d5c12}
.qr-panel{padding:clamp(18px,2vw,30px);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.eyebrow{margin:0;color:#236e80;font-weight:800;letter-spacing:.1em;font-size:clamp(.82rem,1vw,1rem)}
.qr-panel h2{margin:10px 0 20px;font-size:clamp(1.5rem,2vw,2.4rem)}
.qr-panel a:has(.qr-code){display:block;width:min(100%,340px);padding:10px;border:1px solid #d7e2e6;background:white;border-radius:14px}
.qr-code{display:block;width:100%;height:auto;image-rendering:pixelated}
.qr-panel p:not(.eyebrow){margin:15px 0 0;font-weight:700;font-size:clamp(.95rem,1.3vw,1.2rem)}
.qr-panel .review-note{font-size:clamp(.86rem,1.05vw,1rem)!important;font-weight:500!important;color:#536a73;line-height:1.5}
.plain-link{margin-top:16px;text-underline-offset:4px;font-weight:700}
.blessing-panel{padding:clamp(20px,2.4vw,38px);display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px;min-width:0}
.panel-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-top span{font-size:clamp(.85rem,1.05vw,1rem);font-weight:700;color:#5c7079;white-space:nowrap}
.blessing-card{min-height:0;background:linear-gradient(145deg,#fffefa,#ffffff 60%);border:2px solid #c8dfe4;border-left:12px solid #0b84a6;border-radius:18px;padding:clamp(22px,3vw,46px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.blessing-card h2{font-size:clamp(1.1rem,1.5vw,1.5rem);color:#37637a;margin:0 0 14px}
.blessing-card blockquote{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;font-weight:600;letter-spacing:.02em;max-height:100%;overflow:auto}
.blessing-card blockquote.short{font-size:clamp(2rem,3.5vw,3.6rem)}
.blessing-card blockquote.medium{font-size:clamp(1.7rem,2.8vw,2.7rem)}
.blessing-card blockquote.long{font-size:clamp(1.35rem,2.1vw,2rem)}
.signature{margin:18px 0 0;text-align:right;font-size:clamp(1rem,1.65vw,1.6rem);font-weight:800;color:#235975}
.excerpt-note{font-size:.9rem;color:#687d87;margin:8px 0 0}
.screen-controls{display:flex;justify-content:space-between;align-items:center;gap:10px}
.screen-controls>span{color:#59717b;font-weight:700}
.button-group{display:flex;flex-wrap:wrap;gap:8px}
.button-group button{border:1px solid #9fbeca;border-radius:10px;background:white;color:#174d65;padding:8px 15px;font-weight:700}
.button-group button:hover:not(:disabled){background:#e8f6f9}
.screen-status{min-height:1.2em;margin:0;color:#a44229;font-size:.85rem}
footer{display:flex;justify-content:space-between;gap:12px;color:#5a6e78;font-size:.85rem}
footer a{font-weight:700}
@media(max-width:800px){.screen-shell{min-height:100dvh;grid-template-rows:auto auto auto}.screen-layout{grid-template-columns:1fr}.qr-panel{padding:20px}.qr-panel a:has(.qr-code){width:min(230px,65vw)}.blessing-card{min-height:330px}.blessing-panel{min-height:430px}.screen-heading img{width:50px;height:50px}}
@media(max-height:650px) and (min-width:801px){.screen-shell{gap:9px;padding-top:8px;padding-bottom:8px}.screen-heading{padding-bottom:6px}.qr-panel h2{margin:2px 0 10px}.qr-panel a:has(.qr-code){width:min(100%,250px)}.qr-panel p:not(.eyebrow){margin-top:7px}.blessing-panel{padding:16px}.blessing-card{padding:20px}}

/* 星光大道：小鯨魚沿彩虹跑道游向校門 */
.blessing-panel{grid-template-rows:auto minmax(0,1fr) auto auto auto}
.whale-road{position:relative;height:66px;background:url("/assets/rainbow-track.svg") 0 50%/auto 64px repeat-x}
.whale-road-whales{position:absolute;inset:0}
.whale{color:#0b5d8f;position:absolute;width:var(--size,32px);height:calc(var(--size,32px)*.6);transform:translate(-50%,-50%);filter:drop-shadow(0 2px 2px rgba(23,55,81,.3));transition:transform .45s cubic-bezier(.34,1.56,.64,1),filter .45s;animation:whale-bob 3.2s ease-in-out infinite;animation-delay:var(--delay,0s)}
.whale svg{display:block;width:100%;height:100%}
.whale.is-current{color:#f5a400;z-index:2;transform:translate(-50%,-50%) scale(1.9);filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(255,205,90,.95))}
.whale.is-new{animation:whale-swim-in 1.8s cubic-bezier(.22,1,.36,1) both,whale-bob 3.2s ease-in-out 1.8s infinite}
@keyframes whale-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes whale-swim-in{from{translate:-90px 0;opacity:0}to{translate:0 0;opacity:1}}
.whale-road-gate{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 8px;border-radius:12px;background:#fffdfb;color:#0b5d8f;font-size:clamp(.72rem,.9vw,.88rem);font-weight:800}
.whale-road-gate svg{width:clamp(34px,3.2vw,48px);fill:#0b5d8f}
@media(prefers-reduced-motion:reduce){.whale,.whale.is-new{animation:none;transition:none}}
@media(max-height:650px) and (min-width:801px){.whale-road{height:56px}}

/* 投影畫面固定在一個螢幕高度內，祝福卡吸收剩餘空間 */
@media(min-width:801px){.screen-shell{height:100dvh;min-height:0;overflow:hidden}.screen-layout{min-height:0}.blessing-panel,.qr-panel{min-height:0;overflow:hidden}}
@media(min-width:801px){.blessing-card{padding:clamp(18px,2.2vw,36px) clamp(22px,3vw,46px)}.blessing-card h2{margin-bottom:10px}}

/* 校友故事投影：故事標題，以及有照片時左圖右文 */
.story-title{margin:0 0 12px;font-size:clamp(1.4rem,2.2vw,2.2rem);color:#173751;line-height:1.35}
.blessing-card.has-photo{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;column-gap:clamp(18px,2.4vw,36px);align-content:stretch}
.blessing-card.has-photo>h2{grid-column:2;grid-row:1}
.blessing-card.has-photo>.story-title{grid-column:2;grid-row:2}
.blessing-card.has-photo>blockquote{grid-column:2;grid-row:3;align-self:center}
.blessing-card.has-photo>.excerpt-note{grid-column:2;grid-row:4}
.blessing-card.has-photo>.signature{grid-column:2;grid-row:5}
.story-photo{grid-column:1;grid-row:1/-1;display:block;width:100%;height:100%;min-height:0;object-fit:cover;border-radius:14px;background:#eef3f5}
.story-photo[hidden]{display:none}
.blessing-card:has(.story-title:not([hidden]))>h2{display:none}

/* 手機：故事／祝福放前面；手機上掃不了自己螢幕的 QR Code，改成投稿按鈕 */
@media(max-width:800px){
.screen-layout{display:flex;flex-direction:column}
.blessing-panel{order:1}
.qr-panel{order:2}
.qr-panel h2,.qr-panel a:has(.qr-code),.qr-panel p:not(.eyebrow):not(.review-note){display:none}
.qr-panel .plain-link{display:inline-block;margin-top:14px;padding:12px 20px;border-radius:999px;background:#0b6aa2;color:#fff;text-decoration:none}
.blessing-card blockquote.short{font-size:1.6rem}
.blessing-card blockquote.medium{font-size:1.35rem}
.blessing-card blockquote.long{font-size:1.15rem}
}

/* 有網站導覽列的投影頁（校友故事）：導覽列在上，投影區填滿剩下的高度；全螢幕時隱藏導覽列 */
body.screen-with-nav{background:radial-gradient(circle at 80% 15%,#fcebcf 0,transparent 28%),linear-gradient(140deg,#e9f4f6,#fffaf0 75%)}
@media(min-width:801px){
body.screen-with-nav{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
body.screen-with-nav .site-header{flex:none}
body.screen-with-nav .screen-shell{flex:1;height:auto;min-height:0}
}
:root:fullscreen body.screen-with-nav .site-header{display:none}
body.screen-with-nav .screen-shell h1{font-size:clamp(1.6rem,2.6vw,2.7rem);text-shadow:none;max-width:none}

/* 有導覽列時，投影頁自己的標題列與導覽列重複，先隱藏；全螢幕投影時導覽列隱藏、標題列再出現 */
body.screen-with-nav .screen-heading{display:none}
:root:fullscreen body.screen-with-nav .screen-heading{display:flex}
@media(min-width:801px){body.screen-with-nav .screen-shell{grid-template-rows:1fr auto}:root:fullscreen body.screen-with-nav .screen-shell{grid-template-rows:auto 1fr auto}}