@charset "UTF-8";
:root{color-scheme:dark;font-family:Inter,"Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#222224;color:#f2f0ee}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{background:#222224}.app{min-height:100svh;display:flex;flex-direction:column}.masthead{height:82px;flex:0 0 auto;padding:0 4%;display:flex;justify-content:space-between;align-items:center;background:#242426;color:#f4f3f1;box-shadow:0 5px 25px #0005;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}.brand-mark{width:29px;height:29px;display:grid;place-items:center;border:1px solid #d4d0cb;border-radius:8px;position:relative}.brand-mark:before{content:"";width:20px;height:10px;border-radius:12px 12px 3px 3px;background:conic-gradient(from 270deg at 50% 100%,#75cffa 0 18%,#8177d5 18% 36%,#c45abb 36% 54%,#f37945 54% 73%,#edcb5b 73% 100%)}.brand-mark span{position:absolute;top:16px;left:13px;width:7px;height:2px;background:#fff;transform:rotate(-42deg);transform-origin:left center}.brand-text{font-weight:780;font-size:15px;line-height:1;letter-spacing:.055em}.brand-text>span{color:#e4b487}.brand-text small{display:block;font-size:8px;color:#b7b3ae;letter-spacing:.17em;margin-top:6px;font-weight:500}.header-center{position:absolute;left:50%;transform:translateX(-50%);height:100%;display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.05em}.header-center:after{content:"";position:absolute;height:1px;width:56px;background:#d5a481;bottom:23px;left:0}.header-center sup{font-size:7px;color:#aaa39b;align-self:center;margin-top:-13px}.header-right{font-size:9px;letter-spacing:.15em;color:#c2beb8}.header-right span{color:#d5a481;font-size:14px;margin-left:9px}
.wall{flex:1;min-height:630px;position:relative;display:flex;flex-direction:column;background:radial-gradient(ellipse 45% 46% at 24% 30%,#6a6665b8,transparent 78%),radial-gradient(ellipse 37% 46% at 69% 28%,#5856559c,transparent 80%),linear-gradient(170deg,#494748,#353436 51%,#29282b 92%);overflow:hidden}.wall-grain{position:absolute;inset:0;opacity:.2;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}.heading{position:relative;z-index:2;margin:36px 4% 0}.eyebrow{font-size:8px;letter-spacing:.22em;color:#d5bfae;margin:0 0 14px;font-weight:650}.heading h1{font-size:clamp(27px,2.8vw,42px);font-weight:550;letter-spacing:.045em;line-height:1.2;margin:0}.heading h1 span{color:#e7af82}.intro{font-size:12px;color:#c2bfbc;letter-spacing:.08em;margin:11px 0 0}.gallery{width:min(1240px,92%);margin:auto auto;position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,6vw,100px);align-items:end;padding:30px 0 57px}.game{min-width:0;text-decoration:none;color:inherit;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.game:focus-visible{outline:2px solid #e9c2a4;outline-offset:10px;border-radius:3px}.light{position:absolute;left:-25%;right:-25%;top:-13%;height:95%;background:radial-gradient(ellipse,#f4d8b222,transparent 67%);opacity:.2;filter:blur(24px);transition:opacity .5s;pointer-events:none}.art{height:clamp(210px,29vw,345px);width:100%;display:flex;align-items:flex-end;justify-content:center;position:relative;transition:transform .5s cubic-bezier(.2,.75,.2,1),filter .5s;filter:drop-shadow(0 15px 15px #0006)}.art img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}.game-fishing .art img{max-width:110%}.game-hoops .art img,.game-hunter .art img{max-width:98%}.shelf{width:105%;height:13px;display:block;position:relative;background:linear-gradient(180deg,#d1d5d6a8 0%,#979c9c83 18%,#383a3b 45%,#222529 70%,#8e959b 100%);border-left:1px solid #ffffff5c;border-right:1px solid #ffffff5c;box-shadow:0 4px 3px #000a,0 15px 18px #0008;transform:perspective(300px) rotateX(8deg);transition:filter .5s}.shelf:before{content:"";position:absolute;top:-4px;left:1%;right:1%;height:4px;background:linear-gradient(#ffffff75,#89979e40)}.shelf span{position:absolute;left:3%;right:3%;bottom:2px;height:2px;background:#ffd6ab;box-shadow:0 0 7px #ffd5a8,0 0 18px #ffb87c;opacity:.2;transition:opacity .5s}.label{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px}.index{font-size:8px;letter-spacing:.2em;color:#c7b6a9}.label strong{font-size:clamp(16px,1.4vw,21px);letter-spacing:.06em;font-weight:580;line-height:1.35}.go{font-size:10px;letter-spacing:.08em;color:#c8c1bb}.go b{font-size:13px;font-weight:400;color:#e0b08e;margin-left:5px}.game:hover .light,.game:focus-visible .light{opacity:1}.game:hover .art,.game:focus-visible .art{transform:translateY(-8px) scale(1.02);filter:drop-shadow(0 17px 19px #0009) drop-shadow(0 0 15px #f8ca8e45)}.game:hover .shelf span,.game:focus-visible .shelf span{opacity:1}.wall-base{position:absolute;bottom:0;left:0;right:0;height:9px;background:linear-gradient(#131315,#454344);box-shadow:0 -2px 5px #0008}.footer{flex:0 0 70px;background:#272729;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 4%;color:#aaa49e;gap:10px}.footer p{margin:0;font-size:8px;letter-spacing:.16em;white-space:nowrap}.footer .footer-hint{text-align:center;font-size:10px;letter-spacing:.06em;color:#c0bbb5}.footer-end{text-align:right}.footer-dot{width:4px;height:4px;display:inline-block;border-radius:50%;background:#e4b387;box-shadow:0 0 8px #e4b387;margin-right:7px;vertical-align:middle}
@media(max-width:700px){.masthead{height:68px;padding:0 5%}.header-center{display:none}.header-right{font-size:8px}.wall{min-height:0;overflow:hidden}.heading{margin:31px 6% 0}.heading h1{font-size:clamp(27px,6.5vw,35px)}.intro{font-size:11px}.gallery{width:88%;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10%;row-gap:24px;margin:25px auto 0;padding:0 0 45px}.game:last-child{grid-column:1/-1;width:45%;justify-self:center}.art{height:auto;aspect-ratio:1/1;max-height:235px}.shelf{height:10px}.label{margin-top:14px;gap:5px}.label strong{font-size:15px}.index{font-size:7px}.go{font-size:9px}.footer{height:auto;min-height:58px;flex-basis:auto;padding:16px 5%;grid-template-columns:1fr 1fr}.footer .footer-hint{text-align:right;font-size:9px}.footer-end{display:none}}
@media(max-width:370px){.header-right{font-size:7px}.gallery{column-gap:7%}.label strong{font-size:13px}.heading h1{font-size:26px}.footer p{font-size:7px}.footer .footer-hint{font-size:8px}}
@media(prefers-reduced-motion:reduce){.art,.light,.shelf span{transition:none!important}}
.brand-logo{display:block;width:64px;height:64px;object-fit:contain;flex:none}.brand-text{font-size:12px;font-weight:650;letter-spacing:.1em;white-space:nowrap}@media(max-width:700px){.brand-logo{width:54px;height:54px}.brand-text{font-size:10px;letter-spacing:.07em}}
