/* v505 入店歡迎卡（大廳 #dcGate）＋闆卡工房入口（card.html #notice）共用。改版（D 11/08：原本「上面一張大圖＋標題＋整排粉紅大按鈕」是 AI 常見版型，要改掉）。
   跟大廳點單視窗同一套雜誌風：英文小標＋細線、大字鏤空浮水印、深紫斜切跑馬燈、斜放的切角圖框、
   01／02／03 步驟列（目前這一步有滑出來的斜切色塊）、斜切按鈕；幾何會動：細線畫出來、菱形轉、三角浮、四芒星閃、網點。
   v505b（D：「排版很微妙」「意義不明的橫條可以拿掉」）：拿掉跑馬燈；改成對齊的格子——上：標頭（左字、右鏤空大字）；
   下：圖框｜步驟 頂端對齊、說明｜按鈕 底端對齊。幾何只放在標頭右側與圖框後面，不再沿著外框畫線（看起來像雙框）。
   排在 theme-skin.css 之後，選擇器同為 html body :is(#dcGate,#notice)，必要處用 !important 蓋過舊樣式。 */
html body :is(#dcGate,#notice){background:radial-gradient(ellipse at 22% 18%,rgba(201,166,255,.38),transparent 58%),radial-gradient(ellipse at 85% 90%,rgba(255,141,181,.28),transparent 55%),rgba(28,33,86,.5)!important;backdrop-filter:blur(6px)!important;padding:20px!important}
html body :is(#dcGate,#notice) .dgCard{position:relative;isolation:isolate;width:min(780px,100%)!important;max-width:780px!important;max-height:calc(100dvh - 40px);overflow:hidden auto;padding:0!important;text-align:left!important;
  border:3px solid var(--sk-ink,#1C2156)!important;border-radius:6px 28px 6px 28px!important;color:var(--sk-ink,#1C2156)!important;
  background:radial-gradient(ellipse at 100% 0,rgba(201,166,255,.2),transparent 44%),linear-gradient(168deg,#fff 0%,#FBF8FF 55%,#F4F0FF 100%)!important;
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #DCD3FF,12px 12px 0 -1px #FFD6E6,12px 12px 0 2px var(--sk-ink,#1C2156),0 24px 60px rgba(28,33,86,.35)!important;
  animation:dgIn .5s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes dgIn{from{opacity:0;transform:translateY(18px) rotate(-1deg)}to{opacity:1;transform:none}}

/* ---- 幾何層：只在標頭右側（等比例縮放，不拉伸變形）---- */
html body :is(#dcGate,#notice) .dgGeo{position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none}
html body :is(#dcGate,#notice) .dgGeo svg{display:block;width:100%;height:auto;aspect-ratio:780/200;overflow:visible}
:is(#dcGate,#notice) .dgGeo .ln{fill:none;stroke:#1C2156;stroke-width:1.3;stroke-dasharray:300;stroke-dashoffset:300;animation:dgDraw 1.2s .45s ease-out forwards}
@keyframes dgDraw{to{stroke-dashoffset:0}}
:is(#dcGate,#notice) .dgGeo .dia{fill:none;stroke:#C08CFF;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:dgSpin 12s linear infinite}
@keyframes dgSpin{to{transform:rotate(360deg)}}
:is(#dcGate,#notice) .dgGeo .tri{fill:#FFB3CF;transform-box:fill-box;transform-origin:center;animation:dgBob 4.2s ease-in-out infinite}
@keyframes dgBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(14deg)}}
:is(#dcGate,#notice) .dgGeo .star{fill:#FF4F8B;transform-box:fill-box;transform-origin:center;animation:dgTwinkle 2.6s ease-in-out infinite}
:is(#dcGate,#notice) .dgGeo .star.s{fill:#7FD3F7;animation-delay:-1.3s}
@keyframes dgTwinkle{0%,100%{transform:scale(.55);opacity:.45}50%{transform:scale(1.1);opacity:1}}

/* ---- 標頭：左邊英文小標＋標題貼片＋說明，右邊鏤空大字＋斜切淡色塊 ---- */
html body :is(#dcGate,#notice) .dgHead{position:relative;padding:28px 36px 22px;text-align:left!important}
html body :is(#dcGate,#notice) .dgHead>*{text-align:left!important}
html body :is(#dcGate,#notice) .dgHead::before{content:"";position:absolute;right:150px;top:0;bottom:8px;width:116px;z-index:-1;transform:skewX(-24deg);
  background:linear-gradient(180deg,rgba(127,211,247,.2),rgba(201,166,255,.16));box-shadow:22px 0 0 -14px rgba(255,141,181,.22)}
html body :is(#dcGate,#notice) .dgEyebrow{position:relative;display:flex;align-items:center;gap:10px;font:900 11px/1 var(--sk-head,'TT Latin',sans-serif);letter-spacing:2.6px;color:#FF4F8B}
html body :is(#dcGate,#notice) .dgEyebrow::after{content:"";height:1.5px;width:0;background:linear-gradient(90deg,#FF4F8B,#C08CFF);animation:dgGrow .9s .35s ease-out forwards}
@keyframes dgGrow{to{width:64px}}
html body :is(#dcGate,#notice) .dgOutline{position:absolute;right:30px;top:48px;font:400 58px/1'TT Title','Rammetto One',var(--sk-head,sans-serif);letter-spacing:2px;color:transparent;-webkit-text-stroke:1.5px rgba(28,33,86,.18);
  pointer-events:none;user-select:none;white-space:nowrap;animation:dgSlide .9s .1s cubic-bezier(.2,.9,.3,1) both}
@keyframes dgSlide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
html body :is(#dcGate,#notice) .dgHead :is(h1,h2){position:relative;display:inline-flex!important;align-items:center;gap:10px;margin:14px 0 12px!important;padding:6px 18px 8px 14px!important;font:900 26px/1.3 var(--sk-head,sans-serif)!important;color:var(--sk-ink,#1C2156)!important;
  background:#fff!important;border:3px solid var(--sk-ink,#1C2156)!important;border-radius:4px 14px 4px 14px;box-shadow:5px 5px 0 #FFD6E6,5px 5px 0 2.5px var(--sk-ink,#1C2156);letter-spacing:1px;text-wrap:balance}
/* 標題前的小記號：細長四芒星（原本空心方框轉到正面時像缺字的方塊；只閃不轉，轉 45 度會像關閉的叉叉）*/
html body :is(#dcGate,#notice) .dgHead :is(h1,h2)::before{content:"";flex:none;width:16px;height:18px;background:#FF4F8B;clip-path:polygon(50% 0,58% 40%,100% 50%,58% 60%,50% 100%,42% 60%,0 50%,42% 40%);animation:dgPulse 2.6s ease-in-out infinite}
@keyframes dgPulse{0%,100%{transform:scale(.8);opacity:.75}50%{transform:scale(1.1);opacity:1}}
html body :is(#dcGate,#notice) .dgHead p{margin:0!important;max-width:30em;font-size:14px!important;line-height:1.85!important;color:var(--sk-mute,#5C6196)!important}

/* ---- 內文格子：圖框｜步驟（頂端對齊）／說明｜按鈕（底端對齊）---- */
html body :is(#dcGate,#notice) .dgBody{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"art steps" "foot cta";column-gap:32px;row-gap:34px;padding:12px 36px 28px}
html body :is(#dcGate,#notice) .dgArt{grid-area:art;align-self:start;position:relative;margin:0;transform:rotate(-1.6deg);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
html body :is(#dcGate,#notice) .dgArt:hover{transform:rotate(-.4deg) scale(1.015)}
html body :is(#dcGate,#notice) .dgArt .dgDots{position:absolute;left:-20px;top:-18px;width:104px;height:70px;z-index:-1;background:radial-gradient(circle,rgba(92,97,150,.32) 1.3px,transparent 1.9px) 0 0/9px 9px}
html body :is(#dcGate,#notice) .dgArt .dgFrame{position:relative;overflow:hidden;border:3px solid var(--sk-ink,#1C2156);border-radius:4px 20px 4px 20px;background:#926252;box-shadow:8px 8px 0 #C9A6FF,8px 8px 0 2.5px var(--sk-ink,#1C2156)}
html body :is(#dcGate,#notice) .dgArt .tavern-welcome-art{width:100%!important;max-width:100%!important;margin:0!important;border:0!important;border-radius:0!important;display:block}
html body :is(#dcGate,#notice) .dgArt .dgFrame::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 58%,rgba(255,255,255,.35) 58% 61%,transparent 61% 66%,rgba(255,255,255,.18) 66% 70%,transparent 70%);pointer-events:none}
html body :is(#dcGate,#notice) .dgArt figcaption{position:absolute;left:-10px;bottom:-14px;padding:5px 14px 6px 12px;font:900 11px/1 var(--sk-head,sans-serif);letter-spacing:1.5px;color:#fff;background:#FF4F8B;border:2.5px solid var(--sk-ink,#1C2156);transform:skewX(-12deg);box-shadow:3px 3px 0 var(--sk-ink,#1C2156)}
html body :is(#dcGate,#notice) .dgArt figcaption b{display:inline-block;transform:skewX(12deg);font-weight:900}
html body :is(#dcGate,#notice) .dgArt::before{content:"";position:absolute;right:-12px;top:-12px;width:0;height:0;border-left:22px solid transparent;border-bottom:22px solid #7FD3F7;z-index:1;filter:drop-shadow(2px 2px 0 #1C2156)}

html body :is(#dcGate,#notice) .dgSteps{grid-area:steps;align-self:stretch;display:grid;grid-template-rows:repeat(3,1fr);list-style:none;margin:0;padding:0;counter-reset:none}
html body :is(#dcGate,#notice) .dgSteps li{position:relative;display:grid;grid-template-columns:46px 1fr;align-content:center;align-items:center;column-gap:10px;row-gap:2px;padding:8px 10px 8px 6px;border-top:1.5px solid rgba(28,33,86,.14);isolation:isolate}
html body :is(#dcGate,#notice) .dgSteps li:last-child{border-bottom:1.5px solid rgba(28,33,86,.14)}
html body :is(#dcGate,#notice) .dgSteps li::before{content:"";position:absolute;inset:5px -4px 5px -8px;z-index:-1;background:linear-gradient(100deg,#FFE1EC,#EBDDFF 70%,#DDF3FF);transform:skewX(-14deg) scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.9,.3,1)}
html body :is(#dcGate,#notice) .dgSteps li:hover::before{transform:skewX(-14deg) scaleX(.55)}
html body :is(#dcGate,#notice) .dgSteps li .n{grid-row:span 2;font:400 28px/1 'Tavern Numerals','TT Latin',var(--sk-head,sans-serif);color:rgba(28,33,86,.28);letter-spacing:1px}
html body :is(#dcGate,#notice) .dgSteps li .t{font-weight:900;font-size:15px;color:var(--sk-ink,#1C2156)}
html body :is(#dcGate,#notice) .dgSteps li small{font-size:12px;color:var(--sk-mute,#5C6196);font-weight:700}
/* 目前這一步：色塊滑出來、號碼變粉紅 */
html body :is(#dcGate,#notice)[data-step="1"] .dgSteps li[data-n="1"]::before,html body :is(#dcGate,#notice)[data-step="2"] .dgSteps li[data-n="2"]::before{transform:skewX(-14deg) scaleX(1);transition-delay:.5s}
html body :is(#dcGate,#notice)[data-step="1"] .dgSteps li[data-n="1"] .n,html body :is(#dcGate,#notice)[data-step="2"] .dgSteps li[data-n="2"] .n{color:#FF4F8B}
html body :is(#dcGate,#notice)[data-step="1"] .dgSteps li[data-n="1"] .t::after,html body :is(#dcGate,#notice)[data-step="2"] .dgSteps li[data-n="2"] .t::after{content:"NOW";margin-left:8px;padding:2px 7px;border-radius:3px;font:900 9.5px/1.4 var(--sk-head,sans-serif);letter-spacing:1.5px;color:#fff;background:#1C2156;vertical-align:2px}
/* 已經做完的步驟：列尾打勾 */
html body :is(#dcGate,#notice)[data-step="2"] .dgSteps li[data-n="1"]::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:14px;margin-top:-10px;border:solid #FF4F8B;border-width:0 3px 3px 0;transform:rotate(45deg)}
html body :is(#dcGate,#notice)[data-step="2"] .dgSteps li[data-n="1"] .t{color:var(--sk-mute,#5C6196);text-decoration:line-through;text-decoration-color:#FF8DB5;text-decoration-thickness:2px}

/* ---- 說明（左下）---- */
html body :is(#dcGate,#notice) .dgFoot{grid-area:foot;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0;margin:0}
html body :is(#dcGate,#notice) .dgSub{margin:0!important;font-size:12px!important;line-height:1.8!important;color:var(--sk-mute,#5C6196)!important;max-width:34em}
html body :is(#dcGate,#notice) :is(.dgGuide,.dgSub a){display:inline-block;margin-top:2px;font-size:12.5px;font-weight:900;color:var(--sk-ink,#1C2156)!important;text-decoration:none!important;border-bottom:2px solid #FF8DB5;padding-bottom:1px;line-height:1.5}
html body :is(#dcGate,#notice) .dgSub a{border-bottom-color:#C08CFF}
html body :is(#dcGate,#notice) :is(.dgGuide,.dgSub a):hover{border-bottom-color:#7FD3F7}

/* ---- 斜切按鈕（右下，不是整排的長條）---- */
html body :is(#dcGate,#notice) .dgCta{grid-area:cta;justify-self:end;align-self:end;position:relative;display:inline-block;filter:drop-shadow(4px 4px 0 #1C2156)}
html body :is(#dcGate,#notice) .dgBtn{position:relative;display:inline-flex!important;align-items:center;gap:14px;width:auto!important;margin:0!important;padding:14px 20px 14px 28px!important;border:0!important;border-radius:0!important;overflow:hidden;
  font:900 16px/1 var(--sk-head,sans-serif)!important;letter-spacing:1.5px!important;color:#fff!important;cursor:pointer;
  background:linear-gradient(100deg,#FF6FA3 0%,#FF4F8B 48%,#B77CFF 100%)!important;box-shadow:none!important;
  clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);transition:transform .18s cubic-bezier(.34,1.7,.5,1)}
html body :is(#dcGate,#notice) .dgBtn::after{content:"→";display:grid;place-items:center;width:30px;height:30px;margin-right:4px;background:#1C2156;color:#fff;font-weight:900;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:transform .25s}
html body :is(#dcGate,#notice) .dgBtn::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:dgShine 3.2s 1.2s ease-in-out infinite}
@keyframes dgShine{0%{left:-40%}45%,100%{left:130%}}
html body :is(#dcGate,#notice) .dgBtn:hover{transform:translateY(-2px)}
html body :is(#dcGate,#notice) .dgBtn:hover::after{transform:translateX(4px)}
html body :is(#dcGate,#notice) .dgBtn:active{transform:translateY(1px)}

/* v508 確認登入中（data-step=wait）：整片透明但照樣擋住大廳（不讓人以訪客身分進去），不閃登入卡；太久才冒「連線中」 */
html body #dcGate[data-step=wait]{background:transparent!important;backdrop-filter:none!important}
html body #dcGate[data-step=wait] .dgCard{display:none!important}
html body #dcGate[data-step=wait].slow::after{content:"連線中，請稍候…";position:fixed;left:50%;bottom:32px;transform:translateX(-50%);padding:10px 20px;border-radius:999px;
  background:rgba(28,33,86,.86);border:2px solid rgba(255,255,255,.7);color:#fff;font:900 14px/1.4 var(--sk-head,sans-serif);letter-spacing:1px;animation:dgIn .4s both}
@media(max-width:640px){
  html body :is(#dcGate,#notice){padding:12px!important}
  html body :is(#dcGate,#notice) .dgCard{max-height:calc(100dvh - 24px);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #DCD3FF,7px 7px 0 -1px #FFD6E6,7px 7px 0 2px var(--sk-ink,#1C2156),0 18px 40px rgba(28,33,86,.35)!important}
  html body :is(#dcGate,#notice) .dgGeo :is(.dia,.tri,.ln,.star.s){display:none}
  html body :is(#dcGate,#notice) .dgHead{padding:20px 20px 16px}
  html body :is(#dcGate,#notice) .dgHead::before{right:34px;width:64px;bottom:-20px}
  html body :is(#dcGate,#notice) .dgOutline{display:none}   /* 手機放不下：會壓在英文小標和標題後面 */
  html body :is(#dcGate,#notice) .dgHead :is(h1,h2){font-size:21px!important}
  html body :is(#dcGate,#notice) .dgHead p{font-size:13px!important}
  html body :is(#dcGate,#notice) .dgBody{grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "steps" "cta" "foot";row-gap:22px;padding:10px 20px 20px}
  html body :is(#dcGate,#notice) .dgArt{width:94%;justify-self:center}
  html body :is(#dcGate,#notice) .dgSteps{grid-template-rows:none}
  html body :is(#dcGate,#notice) .dgCta{justify-self:stretch;display:block;margin-top:4px}
  html body :is(#dcGate,#notice) .dgBtn{width:100%!important;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  :is(#dcGate,#notice) *,:is(#dcGate,#notice) *::before,:is(#dcGate,#notice) *::after,html body :is(#dcGate,#notice) .dgCard{animation:none!important;transition:none!important}
  :is(#dcGate,#notice) .dgGeo .ln{stroke-dashoffset:0}
  html body :is(#dcGate,#notice) .dgEyebrow::after{width:64px}
}