:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#223d36;background:#f7f5ee;font-synthesis:none;--green:#244b43;--muted:#687a73;--line:#dfe3d8;--pink:#f5bbc5}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #aa4d67;outline-offset:4px}a{color:inherit}button{transition:transform .15s,background .15s}button:active:not(:disabled){transform:translateY(1px)}.site-header,main,footer{max-width:1180px;margin:auto}.site-header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:800;font-size:21px;letter-spacing:1px}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:3px}.brand-icon{display:grid;place-items:center;width:45px;height:48px;background:var(--green);border-radius:12px;transform:rotate(-7deg);color:#fff;font-family:Georgia,serif;font-size:40px;line-height:1;position:relative}.brand-icon span{font:14px system-ui;color:var(--pink);position:absolute;top:4px;right:5px}nav{display:flex;gap:12px}.text-button{border:0;background:none;color:var(--green);font-size:14px;padding:10px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}.text-button:hover{text-decoration-color:currentColor}main{padding:0 32px;min-height:65vh}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:45px;padding:68px 0 40px}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:#63796b;display:flex;gap:9px;align-items:center}.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#91ac72}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(40px,4.5vw,64px);line-height:1.08;letter-spacing:-2px;margin:22px 0}h1 em{font-weight:400;color:#8f4a61}p{line-height:1.65}.hero-copy>p{max-width:410px;color:var(--muted);font-size:16px}.tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}.tag{border:1px solid var(--line);border-radius:99px;padding:7px 12px;font-size:12px;color:#52665c;background:#ffffff60}.hero-art{position:relative;height:365px;display:flex;justify-content:center;align-items:center}.hero-art:before{content:"";position:absolute;inset:12px 0;background:#e7eadb;border-radius:50% 44% 48% 40%;transform:rotate(-8deg)}.hero-card{width:215px;position:absolute;box-shadow:0 15px 24px #31453825;border:7px solid #fff;border-radius:18px;overflow:hidden;background:#fff}.hero-card:first-child{transform:translateX(-91px) rotate(-14deg);top:25px}.hero-card:nth-child(2){transform:translateX(83px) rotate(13deg);top:54px}.hero-card:nth-child(3){transform:translateY(38px) rotate(-2deg)}.art-label{position:absolute;bottom:-3px;right:0;background:#fff9e5;padding:12px 18px;border-radius:10px;transform:rotate(-4deg);font-size:12px;box-shadow:0 3px 12px #223d3610}.sprite{display:block;position:relative;overflow:hidden;background:#fff;aspect-ratio:1.06;border-radius:10px}.sprite img{position:absolute;max-width:none;height:auto;pointer-events:none;user-select:none}.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:14px 0 34px}.panel{background:#fffefb;border:1px solid var(--line);border-radius:22px;padding:28px}.panel h2{font-size:23px;font-weight:650;margin:8px 0}.panel p{color:var(--muted);font-size:14px;margin:7px 0 22px}.panel-number{display:inline-grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#edf1e5;color:#4b624b;font-size:12px;font-weight:700}.field{display:block;margin:16px 0}.field span{display:block;font-weight:650;font-size:12px;margin-bottom:7px}.field input,select{border:1px solid #d5dcd4;border-radius:10px;background:#fff;width:100%;padding:13px 14px;color:var(--green);min-height:47px}.field input::placeholder{color:#8d9992}.primary,.secondary,.danger{border:0;border-radius:11px;min-height:46px;padding:12px 20px;font-weight:650;font-size:14px}.primary{background:var(--green);color:#fff}.primary:hover:not(:disabled){background:#346659}.secondary{background:#edf0e7;color:var(--green);border:1px solid #dbe1d5}.danger{background:#f7e7e8;color:#8a3249}.wide{width:100%}.entry-grid .panel:nth-child(2){background:#f0f1e8}.entry-grid .panel:nth-child(2) .panel-number{background:#e1e5d5}.form-error{color:#a0384a!important;margin:10px 0!important;min-height:0}.learn-banner{display:flex;justify-content:space-between;gap:24px;align-items:center;border-top:1px solid var(--line);padding:23px 0;margin-top:25px}.learn-banner h3{margin:0 0 6px;font-size:16px}.learn-banner p{margin:0;font-size:13px;color:var(--muted)}footer{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:30px 32px;font-size:11px;color:var(--muted)}footer .text-button{font-size:11px}.toast{position:fixed;z-index:20;bottom:24px;left:50%;transform:translateX(-50%);padding:14px 22px;color:white;background:#28483f;border-radius:12px;box-shadow:0 10px 40px #0002;max-width:90%;width:max-content;font-size:14px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:32px 0 22px}.section-heading h1{font-size:36px;margin:8px 0}.section-heading p{margin:0;color:var(--muted);font-size:14px}.connection{font-size:12px;color:#658169;margin:0 0 14px}.connection.offline{color:#9b4f35}.room-code{font-size:30px;font-weight:750;letter-spacing:5px;margin:10px 0;color:var(--green)}.room-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}.people{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.person{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:10px 14px;border-radius:13px;background:#fff}.avatar{display:grid;place-items:center;background:#e6e9d9;border-radius:50%;width:32px;height:32px;font-weight:750;font-size:13px}.person small{display:block;color:var(--muted);font-size:11px}.person.active{border:2px solid #47785e;background:#eef4e8}.person.me .avatar{background:#f0c3c9}.room-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.table{background:#e8ede2;border:1px solid #dce2d4;border-radius:24px;padding:25px;display:grid;grid-template-columns:minmax(160px,230px) 1fr;gap:30px;align-items:center}.top-card{border:5px solid #fff;border-radius:15px;overflow:hidden;box-shadow:0 7px 16px #27423516;padding:0;background:white;width:100%}.table h2{font-family:Georgia,serif;font-size:30px;font-weight:400;margin:10px 0}.table p{font-size:14px;line-height:1.5}.turn-label{display:inline-block;border-radius:99px;background:#fff;padding:8px 12px;font-size:12px;font-weight:700}.hand-heading{display:flex;justify-content:space-between;align-items:center;margin:27px 0 14px}.hand-heading h2{font-size:19px;margin:0}.hand-heading small{color:var(--muted)}.hand,.library{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.hand-card{border:2px solid #e0e4da;border-radius:14px;background:#fff;padding:5px;text-align:left;position:relative;overflow:hidden;color:var(--green);min-width:0}.hand-card.playable{border-color:#578266;box-shadow:0 0 0 2px #7ca68725}.card-caption{display:block;padding:9px 6px;font-weight:650;font-size:12px;min-height:46px}.card-status{display:block;font-size:10px;padding:4px 7px;background:#eff3e9;border-radius:7px;text-align:center;color:#3c6146}.hand-card:not(.playable) .card-status{background:#f4f3ee;color:#7a827a}.hand-card:hover{transform:translateY(-3px)}.rules{font-size:15px;line-height:1.75;padding-left:22px}.rules li{margin-bottom:14px}.rules strong{color:#244b43}.notice{background:#f6f0dd;border-radius:12px;padding:13px 17px;font-size:13px;line-height:1.6}.library-controls{display:flex;gap:14px;align-items:center;margin:0 0 22px}.library-controls select{max-width:480px}.library{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-bottom:30px}.back-link{padding-left:0}.empty{padding:30px;text-align:center;color:var(--muted)}dialog{border:0;border-radius:22px;padding:30px;width:min(94vw,660px);max-height:92dvh;overflow:auto;color:var(--green);background:#fffefb;box-shadow:0 25px 100px #0004}dialog::backdrop{background:#172e2780;backdrop-filter:blur(4px)}dialog h2{font-family:Georgia,serif;font-weight:400;font-size:29px;margin:12px 25px 16px 0}.close{position:absolute;right:14px;top:12px;border:0;background:#edf0e8;width:36px;height:36px;border-radius:50%;font-size:25px;line-height:1}.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.detail-layout .sprite{border:1px solid var(--line)}.detail-layout h3{font-size:13px;margin:0 0 6px}.detail-layout p{font-size:13px;margin-top:0}.chips{display:flex;flex-wrap:wrap;gap:5px}.chip{padding:5px 8px;border-radius:7px;font-size:11px;background:#edf0e7}.detail-actions{margin-top:22px}.loading{padding:70px;text-align:center}.setup{max-width:630px;margin:35px auto;padding:30px}.setup h1{font-size:38px}.setup code{overflow-wrap:anywhere}.setup label{display:block;margin:17px 0}.setup input{width:100%;margin-top:7px;padding:12px;border:1px solid #ccd6c8;border-radius:8px}.setup .success{color:#2e6447}.share-input{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px}.winner{background:#f8efcc;border:1px solid #eadfaa;border-radius:18px;padding:20px;margin-bottom:20px}.winner h2{margin:0 0 8px}.preview-note{margin-top:20px}.hero-art .sprite{border-radius:7px}
@media(max-width:720px){.site-header{padding:19px 20px}.brand{font-size:18px}.brand-icon{width:38px;height:42px}nav{gap:0}.text-button{font-size:12px;padding:9px}main{padding:0 20px}.hero{gap:0;padding:33px 0 25px;grid-template-columns:1fr}.hero-copy>p{font-size:15px;max-width:none}h1{font-size:45px;letter-spacing:-1.5px;margin:17px 0}.hero-art{height:280px;margin:15px 0 3px}.hero-card{width:170px;border-width:5px}.hero-card:first-child{transform:translateX(-67px) rotate(-14deg);top:17px}.hero-card:nth-child(2){transform:translateX(68px) rotate(13deg);top:38px}.hero-card:nth-child(3){transform:translateY(25px) rotate(-2deg)}.art-label{font-size:11px;right:8px;bottom:0}.entry-grid{grid-template-columns:1fr;gap:15px;margin-top:0}.panel{padding:23px;border-radius:18px}.learn-banner{align-items:flex-start;gap:10px}.learn-banner .secondary{flex-shrink:0;padding:10px 12px;font-size:12px}.room-layout{grid-template-columns:1fr}.section-heading{align-items:flex-start;padding-top:25px}.section-heading h1{font-size:30px}.room-code{font-size:26px;letter-spacing:4px}.table{grid-template-columns:125px 1fr;gap:15px;padding:15px;border-radius:18px}.table h2{font-size:22px}.table p{font-size:12px}.table .primary{padding:10px 12px;font-size:12px;width:100%}.turn-label{font-size:11px;padding:6px 8px}.people{gap:7px}.person{padding:7px 9px;font-size:12px}.person .avatar{width:26px;height:26px}.hand{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.library{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hand-heading{align-items:flex-start;gap:12px}.hand-heading small{font-size:11px;text-align:right;max-width:150px}.detail-layout{grid-template-columns:1fr}.detail-layout .sprite{max-width:350px;width:100%;margin:auto}.detail-layout p{font-size:14px}dialog{padding:25px 20px}.room-actions button{flex:1}.tags{gap:6px}.tag{padding:6px 9px;font-size:11px}footer{padding:27px 20px;font-size:10px}.setup{margin:20px 12px;padding:23px}.setup h1{font-size:33px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.sprite{aspect-ratio:auto;min-height:90px}
.sprite img{position:static;display:block;width:100%;height:auto;max-width:100%}
.sprite img[hidden]{display:none}
.image-fallback{display:block;min-height:150px;padding:24px 14px;background:#edf0e7;color:#244b43;font-size:13px;line-height:1.5}
.image-fallback[hidden]{display:none}
.detail-actions{position:sticky;bottom:-30px;background:#fffefb;padding:12px 0 5px;border-top:1px solid var(--line);z-index:1}
.detail-actions .notice{margin:0 0 10px;font-size:12px;padding:10px 12px;line-height:1.4}
@media(max-width:720px){.detail-actions{bottom:-25px}}