/* Garden art and dimensional presentation. Rules and audio remain independent. */
:root{--scene-gold:#efd5a3;--scene-ink:#253e31;--scene-wood:#8d5c35;background:#27392b}
body{background:linear-gradient(180deg,rgba(19,36,28,.25),rgba(23,36,25,.52)),url('/assets/garden-veranda.png') center top/cover fixed no-repeat;min-height:100vh}
.topbar{max-width:none;padding:18px max(28px,calc((100vw - 1344px)/2));background:linear-gradient(180deg,#172f28f5,#233e32ec);border-bottom:1px solid #e6be7870;box-shadow:0 6px 22px #13251e44;color:#f7e5bf}
.brand{color:#fff0c9;text-shadow:0 2px 1px #0008}.brand-flower{color:#e9c789;text-shadow:0 2px 3px #071d19}.brand small{color:#d8d6b9}nav button{color:#f7e6c2}nav button:hover,nav button[aria-pressed=true]{background:#47634a}
.layout{max-width:1480px;grid-template-columns:290px minmax(0,1fr);gap:30px;padding:28px 38px 36px;align-items:start}
.companion{padding:24px 20px;background:linear-gradient(160deg,#193d31ee,#264a38ed);border:1px solid #bea57877;border-radius:20px;box-shadow:inset 0 1px #f6e6b733,0 16px 36px #13271d55;color:#fff0cd;position:sticky;top:20px}
.season{color:#edd5ac;font-size:13px}.season:before{background:#d7b780}.companion h1{color:#ffedc3;font-size:30px;text-shadow:0 2px #12251e;margin:16px 0}.intro{color:#e1e4ce;font-size:16px;margin-bottom:16px}
.portrait{height:290px;margin:16px -4px 8px;border-radius:120px 120px 22px 22px;background:#42573a;box-shadow:0 0 0 4px #8a704544,0 0 0 5px #d3b77e88,0 15px 25px #0c221a70;isolation:isolate}
.portrait:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 2px 8px #ffebc52e,inset 0 -15px 20px #17392b55;z-index:1}
.sunja-portrait{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;border-radius:inherit;filter:saturate(.95);position:relative;z-index:0}
.character-name{z-index:2;bottom:-14px;border:1px solid #c2a271;background:linear-gradient(#fff6dc,#eddec0);color:#4d4434;box-shadow:0 4px 10px #0d221c66}.character-name strong{color:#304733}
.speech{margin:36px 0 0;padding:17px 13px;color:#3b4936;background:linear-gradient(135deg,#fff9e9,#eae2ce);border:1px solid #eadbb9;box-shadow:inset 0 1px #fff,0 6px 0 #132c2344,0 10px 20px #0c251e33;font-size:17px}.tea{margin:20px 4px 8px}.tea>span{color:#e3c186;filter:drop-shadow(0 3px 2px #132f26)}.tea p,.tea strong,.gentle-note{color:#e4e1c9}.gentle-note{font-size:13px;margin-bottom:0}
.game-area{padding:20px 22px 12px;background:linear-gradient(150deg,#214636f5,#173a2df5);border:1px solid #d5b9828a;border-radius:20px;box-shadow:inset 0 1px #fbe3ab44,0 16px 0 #17302677,0 28px 55px #10231877;perspective:1600px;color:#ffefd1}
.game-heading{color:#f1e6c8;margin:0 3px 16px}.game-heading .mode{background:#eee0bf;color:#455139;box-shadow:0 2px 2px #09251d77}.dot{background:#e4c382;box-shadow:0 0 7px #e6d99966}
.sound-toolbar{background:linear-gradient(125deg,#fff6df,#e8ddc1);border:1px solid #dcc69f;box-shadow:inset 0 1px #fff,0 5px 0 #102e2544;color:#304834;margin-bottom:22px}.sound-toolbar-title small{color:#536447}.sound-control,.sound-settings-button{border-color:#9b9e7f;box-shadow:0 3px 0 #8d937568,inset 0 1px #fff7}.sound-control[aria-pressed=true]{background:linear-gradient(#45674e,#284d3a);border-color:#587857;box-shadow:0 3px 0 #153d2b}.sound-settings-button{background:linear-gradient(#e7ebd8,#d9dfc7)}
.board{border:12px solid #a87848;border-top-color:#cc9c64;border-left-color:#ba8956;border-right-color:#895d38;border-bottom-color:#734b2c;border-radius:17px;padding:17px 21px 8px;background:radial-gradient(ellipse at 35% 15%,#59794f55,transparent 60%),repeating-linear-gradient(0deg,#284e3c 0px,#284e3c 2px,#2c523f 3px,#2c523f 4px);box-shadow:0 0 0 1px #edcfa46b,0 2px 0 #71492c,0 6px 0 #69442b,0 10px 0 #533922,0 18px 22px #091f1977,inset 0 3px 8px #071f1a99;transform:rotateX(3deg);transform-origin:center center;transform-style:preserve-3d}
.board:after{inset:6px;border:1px solid #e9d8a046;box-shadow:inset 0 0 0 2px #183b2b33}.table-middle{padding:22px 0}.board-bottom{color:#dfe4c9}.opponent{color:#fff0cd}.opponent .tally{color:#ecedd5}
.hwatu{border:2px solid #f4e4c8;border-right-color:#cbb69b;border-bottom-color:#c7af90;border-radius:5px;background:linear-gradient(135deg,#fff8e8,#e4d4b4);box-shadow:1px 1px 0 #d5c09e,2px 2px 0 #b6a07f,3px 3px 0 #867458,4px 5px 0 #5d513f,5px 8px 9px #08251d99;transform:translateZ(0);transition:transform .18s ease,box-shadow .18s ease,filter .18s}
.hwatu:after{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;box-shadow:inset 1px 1px 1px #fff8; background:linear-gradient(130deg,#ffffff22,transparent 45%,#5c4d2110)}
.card-kind{background:linear-gradient(#fff9eb,#ecdfc7);color:#293f32}.card-month{background:#fff9eaf0;color:#263d30}.hwatu svg{background:#fff9e9}
.table-cards .hwatu:nth-child(3n+1){transform:rotate(-1.3deg)}.table-cards .hwatu:nth-child(3n+2){transform:rotate(1deg)}
.hwatu.matching{outline:3px solid #ffe29a;box-shadow:0 0 0 5px #ac833333,3px 5px 0 #917e50,0 7px 20px #e9d27860}
.hand{padding:15px 12px 18px;gap:10px;min-height:130px;border-radius:10px;background:repeating-linear-gradient(2deg,#bc916525 0,#bc916525 3px,#6c4b2b26 4px,#6c4b2b26 7px),linear-gradient(100deg,#d3b287,#b98f60 55%,#cea979);border-top:2px solid #ecd3a5;border-left:2px solid #cda97b;border-right:2px solid #8c633f;border-bottom:7px solid #795131;box-shadow:inset 0 3px 6px #523c2555,0 5px 0 #543c2877,0 10px 16px #102c2366;perspective:900px}
.hand .hwatu{box-shadow:1px 1px 0 #deceac,2px 2px 0 #b59d79,3px 4px 0 #8c7250,4px 7px 7px #4b342677}.hand .hwatu.selected{transform:translateY(-12px) rotateX(-6deg);border-color:#f5d784;box-shadow:0 0 0 3px #f8d87a88,3px 5px 0 #8d6637,0 15px 15px #3c2a2780}
.card-back{border-color:#e6cfa7;background:repeating-linear-gradient(45deg,#843c43 0 5px,#995057 5px 6px);box-shadow:1px 2px #ccba98,2px 4px #9f8260,3px 6px #e2cfaa,4px 8px #927958,5px 10px #d8c9a6,6px 12px #857356,8px 16px 9px #0d291c99;transform:rotate(-4deg)}
.my-score{color:#fff0c9;padding-top:30px}.goal{color:#e1d8b9}.turn-message{color:#fff0cc}.turn-message>span{color:#f1d397}.selection-label{color:#e8e3cd}.game-footer,.game-footer button{color:#e2dfc6}.sound-status{color:#d3dec6}.music-bars i{background:#ebcb8c}
.primary{background:linear-gradient(#ab5d64,#86434d);border-top:1px solid #e29b94;box-shadow:0 4px 0 #512e34,0 8px 12px #10292055;color:#fff8e5}.secondary{background:linear-gradient(#eff0da,#d2dbc0);border:1px solid #c8cda9;box-shadow:0 3px 0 #778261;color:#344732}
.fx-flying{box-shadow:2px 3px 0 #ac946a,4px 6px 0 #6c593e,8px 18px 22px #09251c77}.fx-toast{top:270px;background:linear-gradient(#fff7df,#eadab5);border-color:#f0cc7e;color:#754448;box-shadow:0 4px 0 #9b7c4b,0 10px 28px #0a261c77}
dialog{background:radial-gradient(ellipse at top,#fff9e8,#ece1c8);border:3px solid #d6b888;box-shadow:0 6px 0 #8d6e43,0 30px 90px #051c17aa}dialog::backdrop{background:#0b241b99}.welcome-flower{color:#b47b69;text-shadow:0 2px 0 #d7bea0}.welcome-rules span{background:#e3e6cf}
@media(hover:hover) and (pointer:fine){.hand button.hwatu:not(:disabled):hover{transform:translateY(-13px) rotateX(-9deg) rotateZ(-2deg);box-shadow:2px 4px 0 #bba67e,4px 7px 0 #87633e,0 19px 15px #3b2b2566}.hand button.hwatu.selected:hover{transform:translateY(-17px) rotateX(-6deg)}.portrait:hover .sunja-portrait{filter:saturate(1.03) brightness(1.04)}.table-cards .hwatu.pickable:hover{transform:translateY(-5px) rotateX(-5deg)} }
@media(max-width:1100px){.layout{grid-template-columns:220px minmax(0,1fr);padding:22px 20px;gap:20px}.companion{padding:18px 14px}.companion h1{font-size:26px}.portrait{height:250px}.game-area{padding:17px 15px 10px}.board{padding:15px 12px 6px;border-width:9px}.hand{padding:13px 7px 16px;gap:6px}.topbar{padding:16px 24px}}
@media(max-width:800px){body{background-attachment:scroll;background-position:center top;background-size:auto 1200px}.topbar{padding:13px 16px}.layout{display:flex;padding:16px 12px 28px;gap:14px}.companion{position:static;display:grid;grid-template-columns:83px 1fr;padding:12px;gap:13px;border-radius:16px;width:100%;background:#1e4436ed}.portrait{height:91px;width:83px;margin:0;border-radius:45px 45px 12px 12px;overflow:hidden;box-shadow:0 0 0 2px #d6b77966,0 4px 8px #08241d66}.sunja-portrait{height:100%;object-position:center 18%;top:auto}.portrait:after{border-radius:inherit}.speech{margin:0;padding:12px 13px;border-radius:10px;font-size:16px;box-shadow:0 3px 0 #16392d}.game-area{width:100%;padding:14px 10px 8px;border-radius:16px}.sound-toolbar{padding:12px;margin-bottom:18px}.board{transform:none;border-width:8px;padding:12px 9px 5px;box-shadow:0 1px 0 #e7bc7c,0 5px 0 #66452c,0 8px 0 #493626,0 14px 17px #08261e88,inset 0 3px 7px #112c20aa}.table-middle{padding:18px 0;gap:10px}.table-cards{gap:10px}.my-score{padding-top:24px}.hand{max-width:none;gap:11px 7px;padding:12px 7px 16px;min-height:130px}.hand .hwatu{max-width:76px}.hand .hwatu.selected{transform:translateY(-6px)}.hand .hwatu svg{height:69px}.turn-message{font-size:15px}.fx-toast{top:260px}.game-heading{font-size:13px}.large-type .speech{font-size:19px}}
@media(max-width:400px){.topbar{padding:12px 9px}.brand{font-size:18px;gap:5px}.topbar nav button{min-width:39px}.layout{padding:12px 7px 22px}.game-area{padding:12px 7px 6px}.companion{padding:10px;grid-template-columns:72px 1fr;gap:11px}.portrait{height:82px;width:72px}.speech{font-size:15px}.board{border-width:7px;padding:12px 6px 4px}.deck{min-width:37px}.table-middle{gap:8px}.table-cards{gap:9px}.table-cards .hwatu{width:47px}.table-cards .hwatu svg{height:59px}.hand{gap:10px 6px;padding:12px 6px 15px}.hand .hwatu svg{height:58px}.hand .card-kind{font-size:12px}.tally{gap:7px}.my-score .tally{gap:6px}.tally b{font-size:16px}.sound-toolbar-title{font-size:16px}.sound-toolbar{padding:10px}.sound-control{font-size:15px}}
.effects-off .hand button.hwatu:hover,.effects-off .hand button.hwatu.selected:hover,.effects-off .table-cards .hwatu.pickable:hover{transform:none}.effects-off .hand .hwatu.selected{transform:translateY(-5px)}
@media(prefers-reduced-motion:reduce){.hand button.hwatu:hover,.hand button.hwatu.selected:hover,.table-cards .hwatu.pickable:hover{transform:none!important}}