/* Tropical travel club — presentation layer v2 */
:root{--bg:#063b3e;--ink:#e5faf3;--muted:#9cc7c0;--green:#0d9488;--accent:#f59e0b;--line:#ffffff20;--paper:#0b4a4d}body{background:radial-gradient(ellipse at 12% 5%,#0e777370,transparent 45%),radial-gradient(ellipse at 100% 95%,#0a7a6d60,transparent 40%),#063b3e;color:var(--ink);min-height:100dvh}body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.15;background-image:radial-gradient(#a9e7cf 1px,transparent 1px);background-size:27px 27px}header{height:78px;border-bottom:1px solid #ffffff17;background:#073d3ac9;backdrop-filter:blur(16px);padding:0 4vw}.brand{color:#fff5cd}.brand span{color:#9fdbc7}.connection{color:#99e6cb;font-size:11px}.eyebrow{color:#9fd9c4;letter-spacing:2px}p{color:#b1d2c9}.panel{background:linear-gradient(145deg,#0e5353e6,#083e42ed);border:1px solid #83d5bb25;box-shadow:0 18px 45px #001c2438;border-radius:22px}h1,h2,h3{color:#fff5dc}button{border-color:#ffffff2a;background:#ffffff09;color:#d8fff0;box-shadow:0 3px 0 #001c2433;transition:transform .18s,background .18s,box-shadow .18s}button:hover{background:#ffffff1a;transform:translateY(-2px)}button.primary{background:linear-gradient(135deg,#ffc65c,#f59e0b);color:#3d310e;border:1px solid #ffda84;box-shadow:0 5px 0 #99681d,0 10px 30px #f59e0b35}button.primary:hover{background:linear-gradient(135deg,#ffdc92,#ffb424);box-shadow:0 5px 0 #99681d,0 15px 35px #f59e0b50}button:disabled{transform:none}input,select{background:#052f32;color:#e8fff5;border-color:#72c1ad45}input::placeholder{color:#72998e}.entry{background:#0a4648d9}.divider,.small{color:#95c6b9}.chips span{border-color:#9eddb537;color:#ddf5c9;background:#88dfbd0d}.landscape{background:linear-gradient(145deg,#25a99a,#0f6871);box-shadow:0 18px 45px #001a2440;border:5px solid #fff3d8;transform:rotate(-2deg)}.landscape b{z-index:2;text-shadow:0 3px 15px #00302b}.welcome-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.landscape:after{z-index:1;background:linear-gradient(transparent,#003b3bcb);inset:0;transform:none;top:0;left:0;width:100%;height:100%;border-radius:0}.intro h1{color:#fff7dc;text-shadow:0 4px 0 #003d3d}.intro>p{color:#b9dcd1}.entry h2{color:#fff1cc}#welcome{margin:42px auto}.lobby-panel{background:linear-gradient(145deg,#126a62,#06444b);border:1px solid #74c9ad45}.lobby-panel #room-code{letter-spacing:4px;color:#ffc763;font-size:22px}#lobby-players .person{background:#ffffff08;border-radius:16px;border:1px solid #ffffff19;padding:18px;margin:12px 0}#game{grid-template-columns:210px minmax(340px,1fr) 245px;max-width:1640px;gap:18px;padding:0 24px;margin:20px auto}.board-area{min-width:0}.board-title{padding:3px 9px 17px}.board-title h2{color:#fff3ca;font-size:19px}.board-title .eyebrow{font-size:9px}#dice{font-size:12px;background:#fff7dc;color:#175b51;border:2px solid #ffd179;padding:9px 12px;border-radius:12px;box-shadow:0 4px 0 #012c31}.person{position:relative;flex-wrap:nowrap;gap:10px;border:1px solid #ffffff12;border-radius:14px;padding:15px 9px;margin:13px -7px;background:#ffffff05}.person.active{margin:13px -7px;padding:15px 9px 23px;background:linear-gradient(140deg,#116e64,#0c4a4e);border:1px solid var(--player-color,#5eead4);box-shadow:0 0 22px #5eead41a,inset 0 0 15px #5eead40a}.person.active:before{content:'ĐẾN LƯỢT';position:absolute;top:-7px;left:11px;padding:2px 6px;border-radius:4px;background:#f5b445;color:#184d42;font-size:7px;letter-spacing:1px;font-weight:800}.person strong{font-size:11px;color:#f2ffe9}.person small{color:#9ac4b5;font-size:9px}.person .avatar{width:35px;height:35px;background:color-mix(in srgb,var(--player-color,#5eead4) 20%,transparent);display:grid;place-items:center;border-radius:11px;font-size:23px;flex-shrink:0;filter:drop-shadow(0 3px 2px #001b1b50)}.person .money{font-size:12px;white-space:nowrap;color:#ffd78b}.turn-progress{position:absolute;bottom:8px;left:10px;right:10px;height:4px;background:#042d32;border-radius:9px;overflow:hidden}.turn-progress i{display:block;background:#5eead4;width:100%;height:100%;transform-origin:left;transition:transform .25s linear}.trip-info{border-top:1px solid #ffffff15;padding-top:16px}.trip-info strong{color:#ffd78b}.trip-info p{color:#a2c9bc}.trip-info button{border-color:#a2c9bc40}#log{max-height:310px;margin-top:18px;display:flex;flex-direction:column;gap:11px;scrollbar-width:thin;scrollbar-color:#42ab9160 transparent}#log li{font-size:10px;background:#ffffff09;border:1px solid #ffffff0e;border-left:3px solid var(--note-color,#2dd4bf);border-radius:3px 13px 13px;padding:11px 12px;position:relative;color:#d0eadb;animation:note-in .3s ease}#log li:first-child{background:#f5af2112;color:#fff0c6}#properties h3{font-size:13px;color:#f5dfad}.asset{background:#ffffff05;border:1px solid #ffffff12;border-radius:11px;margin:10px 0;padding:12px}.asset strong{color:#fdf1ce}.asset small{color:#97c8b7}.asset .buttons button{font-size:9px;background:#0d696040}.action-bar{padding:17px 0}.action-bar button{padding:13px 20px;border-radius:14px}.action-bar p{color:#a8d5c5;font-size:11px}.activity>.eyebrow{color:#cde5c0}dialog{background:linear-gradient(145deg,#10564e,#053d42);color:#e0f3df;border-color:#6dbda54a;box-shadow:0 35px 100px #001b29a0}dialog::backdrop{background:#00252bba}dialog h2{color:#fff0c8}.link{color:#ffc65c}#toast{background:#fff2d7;color:#205b50;border:1px solid #e9be65;box-shadow:0 9px 40px #001d2580}a.review-link[hidden]{display:none!important}
/* 32 postcard tiles around a cinematic, seven-cell center stage. */
#board.postcard-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));position:relative;isolation:isolate;gap:5px;padding:8px;width:100%;aspect-ratio:1;height:auto;background:linear-gradient(145deg,#217c7160,#073c4390);border:1px solid #86d9b966;border-radius:24px;overflow:visible;box-shadow:0 20px 65px #002a36a0,inset 0 1px 0 #d7ffdc30;container-type:inline-size}.game-tile{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;padding:0;background:#fff7e7;border:0;border-radius:8px;overflow:hidden;color:#18443e;box-shadow:0 4px 0 #003c4380,0 5px 8px #002e3833;transition:transform .2s,box-shadow .2s;cursor:pointer;transform-origin:center}.game-tile:hover,.game-tile:focus-visible{transform:translateY(-4px) scale(1.05);z-index:9;box-shadow:0 0 0 2px #ffe4a4,0 8px 22px #0d948880;background:#fff9eb}.tile-media{height:55%;width:100%;position:relative;flex-shrink:0;background:linear-gradient(145deg,#4ab6b4,#24766b);overflow:hidden;border-top:4px solid var(--tile-color)}.tile-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.game-tile:hover .tile-image{transform:scale(1.12)}.tile-media:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#00382b30)}.tile-media.image-missing:before{content:'🌴';position:absolute;inset:0;display:grid;place-items:center;font-size:23px}.tile-info{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;flex:1;padding:2px;min-height:0;line-height:1.15}.tile-name{font-size:clamp(5px,1.15cqw,12px);color:#14483e;line-height:1.13;max-width:100%;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tile-price{font-size:clamp(4px,.85cqw,9px);font-weight:700;color:#677264}.owner-flag{position:absolute;top:3px;right:2px;background:var(--owner-color);color:#153b36;width:17px;height:20px;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);font-size:13px;display:grid;place-items:center;z-index:2}.owner-flag[hidden]{display:none}.owned-tile{box-shadow:0 3px 0 var(--owner-color),0 0 0 1px var(--owner-color)}.tile-buildings{position:absolute;bottom:25%;left:3px;font-size:clamp(6px,1.45cqw,17px);filter:drop-shadow(0 2px 0 #ffffff);z-index:3;letter-spacing:-4px}.active-tile{box-shadow:0 0 0 2px #ffda74,0 0 22px #ffd36e9e;z-index:4;animation:active-glow 2s ease-in-out infinite}.mortgaged .tile-image{filter:grayscale(1) brightness(.7)}.special-tile{background:linear-gradient(150deg,#ffedac,#f3c96b);border:2px solid #fff0be}.special-tile .tile-media{height:60%;border:0;background:transparent;display:grid;place-items:center}.special-tile .tile-media:after{display:none}.special-icon{font-size:clamp(12px,3.7cqw,43px);filter:drop-shadow(0 3px 0 #bf9a4d55)}.special-tile .tile-name{font-size:clamp(5px,1.05cqw,11px)}.just-purchased{animation:purchase-pop .7s ease}.travel-stage{position:relative;grid-column:2/9;grid-row:2/9;isolation:isolate;border-radius:18px;overflow:hidden;margin:5px;background:linear-gradient(145deg,#267d70,#0d544f);box-shadow:inset 0 0 0 1px #b4f4d63b,0 5px 25px #002b3a50;display:flex;flex-direction:column;justify-content:flex-end}.stage-photo,.stage-shade,.weather-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.stage-photo{z-index:-3;filter:saturate(1.1);transition:opacity .5s}.photo-reveal{animation:photo-arrive .8s ease both}.stage-shade{z-index:-2;background:linear-gradient(180deg,#00372b36 0%,#002f2c00 20%,#003a3270 45%,#002f31f5 100%)}.stage-top{position:absolute;top:5%;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:2}.stage-tag{font-size:clamp(5px,.9cqw,10px);letter-spacing:1.7px;color:#fff5d6;background:#034a46a0;border:1px solid #e7ffe044;padding:7px 10px;border-radius:20px;backdrop-filter:blur(8px)}.weather-button{font-size:clamp(5px,.9cqw,10px);padding:7px 10px;background:#fff2d4e6;color:#27604c;border-color:#ffeab4;white-space:nowrap}.stage-story{padding:0 7% 12%;z-index:1;position:relative}.stage-story .stage-kicker{color:#ffdc82;font-size:clamp(6px,1.15cqw,12px);letter-spacing:2px;font-weight:700}.stage-story h2{font-size:clamp(18px,4.6cqw,52px);line-height:1.07;color:#fff9e8;letter-spacing:-1.3px;margin:12px 0 13px;max-width:90%;text-shadow:0 2px 18px #00352d60}.stage-story p{font-size:clamp(7px,1.35cqw,14px);line-height:1.7;max-width:92%;color:#e5f1dc;margin:0 0 14px}.review-link{display:inline-block;background:#f4c46d;color:#164a3e;text-decoration:none;font-size:clamp(6px,1.03cqw,11px);font-weight:800;padding:10px 14px;border-radius:9px;box-shadow:0 3px 0 #956b35}.photo-note{display:block;color:#c8dcca80;font-size:clamp(4px,.8cqw,9px);margin-top:12px}.stage-footer{position:absolute;bottom:4%;left:7%;color:#a3cebb70;font-size:clamp(5px,.9cqw,10px);letter-spacing:2px;z-index:2}.dice-tray{display:flex;position:absolute;top:24%;right:7%;gap:10px;z-index:3;perspective:600px}.travel-die{height:clamp(22px,6.5cqw,72px);width:clamp(22px,6.5cqw,72px);display:grid;place-items:center;background:linear-gradient(145deg,#fffdf2,#e7d9ad);border-radius:18%;color:#0d6b62;font-size:clamp(24px,6.3cqw,68px);line-height:1;box-shadow:4px 7px 0 #806a40,7px 14px 25px #00372d80;border:1px solid #fff9e1;transform:rotate(-10deg)}.travel-die:nth-child(2){transform:rotate(14deg);color:#d18b13;margin-top:18px}.rolling .travel-die{animation:dice-roll .36s linear infinite}.rolling .travel-die:nth-child(2){animation-delay:-.14s}.travel-pawn{position:absolute;z-index:12;width:5.1%;aspect-ratio:1;display:grid;place-items:center;font-size:clamp(13px,3cqw,34px);transform:translate(-50%,-50%);border-radius:50%;background:color-mix(in srgb,var(--pawn-color) 85%,white);border:2px solid #fff0ce;box-shadow:0 4px 0 #00383880,0 0 13px var(--pawn-color);transition:left .2s ease,top .2s ease;pointer-events:none;filter:drop-shadow(0 3px 3px #001c2470)}.travel-pawn[hidden]{display:none}.pawn-hop{animation:pawn-hop .22s ease}.checkin .stage-story{animation:checkin-story .6s ease}.checkin-confetti{position:absolute;left:50%;top:50%;pointer-events:none;z-index:25}.checkin-confetti i{position:absolute;width:7px;height:11px;animation:confetti-fly 1.4s ease-out both;border-radius:1px}.weather-layer{z-index:0;overflow:hidden;opacity:.6}.weather-layer i{position:absolute;left:var(--left);top:-20%;animation-delay:var(--delay)!important}.sunshine i{width:5px;height:5px;background:#fff6a8;border-radius:50%;box-shadow:0 0 18px #fff7a8;animation:sun-drift 13s linear infinite}.rainfall i{height:26px;width:1px;background:linear-gradient(transparent,#e5fffb);transform:rotate(15deg);animation:rain-drift 2s linear infinite}.falling-leaves i{width:14px;height:7px;border-radius:0 100% 0 100%;background:#bcce65;animation:leaf-drift 8s linear infinite}
@keyframes pawn-hop{50%{transform:translate(-50%,-90%) rotate(-8deg)}}@keyframes active-glow{50%{box-shadow:0 0 0 2px #ffdf8a,0 0 16px #ffd36e45}}@keyframes dice-roll{0%{transform:rotateX(0) rotateZ(-10deg) translateY(0)}50%{transform:rotateX(180deg) rotateZ(35deg) translateY(-14px)}100%{transform:rotateX(360deg) rotateZ(-10deg) translateY(0)}}@keyframes purchase-pop{40%{transform:scale(1.1) rotate(-3deg)}70%{transform:scale(.97)}}@keyframes photo-arrive{from{opacity:.4;transform:scale(1.07)}to{opacity:1;transform:scale(1)}}@keyframes checkin-story{from{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes confetti-fly{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}@keyframes sun-drift{from{transform:translateY(0);opacity:0}30%{opacity:.9}to{transform:translate(-30px,600px);opacity:0}}@keyframes rain-drift{to{transform:translate(-80px,650px) rotate(15deg)}}@keyframes leaf-drift{to{transform:translate(70px,650px) rotate(400deg)}}@keyframes note-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media(min-width:1500px){#game{grid-template-columns:230px minmax(340px,900px) 265px;justify-content:center}}@media(max-width:1100px){#game{grid-template-columns:185px minmax(320px,1fr)}.activity{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}#log{max-height:210px}.activity #trade-open{align-self:start}.activity #properties{grid-column:2;grid-row:2/4}.activity>.eyebrow{grid-column:1/-1}#game .panel{padding:19px}}@media(max-width:700px){header{height:63px;padding:0 20px}.brand{font-size:29px}.connection{font-size:9px}#welcome{margin:28px auto}.intro h1{font-size:48px}.entry{padding:26px}#game{padding:0 8px;margin:12px auto;gap:12px;display:flex}.board-title{padding:3px 6px 13px}.board-title h2{font-size:15px}.board-title .eyebrow{font-size:8px}#dice{font-size:10px;padding:8px}.travelers{order:1}#players{grid-template-columns:1fr 1fr;gap:0 10px}.person,.person.active{padding:12px 7px 19px;margin:9px -3px}.person .avatar{font-size:19px;width:29px;height:29px}.person .money{font-size:10px}.person strong{font-size:10px}.person small{font-size:8px}.action-bar{background:transparent;position:relative;padding:14px 5px;margin:0;min-height:60px}.action-bar button{font-size:11px;padding:11px 15px}.activity{display:block;order:2}#board.postcard-board{gap:2px;padding:4px;border-radius:14px}.travel-stage{margin:2px;border-radius:10px}.game-tile{border-radius:4px}.tile-media{border-top-width:2px}.tile-info{gap:1px;padding:1px}.tile-name{font-size:clamp(5px,1.55cqw,8px)}.tile-price{font-size:clamp(4px,1.25cqw,7px)}.special-tile{border-width:1px}.special-tile .tile-name{font-size:clamp(4px,1.4cqw,7px)}.special-icon{font-size:clamp(14px,4cqw,23px)}.owner-flag{width:10px;height:12px;font-size:8px;top:1px;right:1px}.travel-pawn{width:6.2%;border-width:1px;font-size:15px}.stage-top{top:5%;left:5%;right:5%}.stage-tag{letter-spacing:.6px;font-size:5px;padding:4px 5px}.weather-button{font-size:6px;padding:4px 5px}.stage-story{padding:0 7% 12%}.stage-story .stage-kicker{font-size:6px;letter-spacing:1px}.stage-story h2{font-size:24px;margin:8px 0;letter-spacing:-.8px}.stage-story p{font-size:8px;line-height:1.5;margin-bottom:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.review-link{padding:6px 8px;font-size:6px;border-radius:5px}.stage-footer{font-size:5px;letter-spacing:1px}.photo-note{font-size:5px;margin-top:7px}.dice-tray{gap:6px;top:24%;right:9%}.travel-die{height:28px;width:28px;font-size:29px;box-shadow:2px 4px 0 #806a40,3px 8px 15px #00372d80}.travel-die:nth-child(2){margin-top:8px}.tile-buildings{font-size:9px;letter-spacing:-3px;left:1px}#game .panel{border-radius:17px;padding:17px}.trip-info{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:13px;padding-top:12px}.trip-info p{font-size:9px;margin:0}.trip-info strong{font-size:10px}#log{max-height:180px}#log li{font-size:10px}.lobby-panel h1{font-size:34px}.lobby-panel #room-code{font-size:19px}}
@media(prefers-reduced-motion:reduce){.game-tile,.travel-pawn{transition:none}.weather-layer{display:none}*,*:before,*:after{animation:none!important}.travel-die{transform:none!important}}

.tile-image[hidden]{display:none!important}.gallery-nav{position:absolute;bottom:3%;right:5%;display:flex;align-items:center;gap:10px;z-index:6;color:#d4eedc;font-size:10px}.gallery-nav button{border-radius:50%;height:26px;width:26px;padding:0;background:#ffffff1a;color:#fff5ce;font-size:20px;border-color:#ffffff30}.gallery-nav button:hover{background:#f59e0b;color:#194e3f}.gallery-nav span{font-size:9px}.gallery-nav button:focus-visible{outline:2px solid #ffd47e}@media(max-width:700px){.gallery-nav{gap:5px;bottom:3%;right:4%}.gallery-nav button{height:16px;width:16px;font-size:13px}.gallery-nav span{font-size:6px}.stage-footer{max-width:63%;letter-spacing:.7px}}