@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Literata:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root {
  --ink: #1c3424;
  --soft: #5a665c;
  --forest: #173f2b;
  --forest-2: #2e6e4c;
  --jade: #4b8668;
  --gold: #c99a3d;
  --paper: rgba(252, 247, 228, .96);
  --line: rgba(83, 85, 48, .2);
  --shadow: 0 20px 58px rgba(17, 44, 27, .23);
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #dfe7cf; color: var(--ink); }
body { overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(201,154,61,.72); outline-offset: 2px; }

.club-app { min-width: 1180px; min-height: 100vh; }
.club-header {
  min-height: 92px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 12px 28px;
  background:
    radial-gradient(circle at 72% 16%, rgba(231,205,121,.3), transparent 35%),
    linear-gradient(180deg, #fffdf3, #f3ebcf);
  border-bottom: 4px solid rgba(46,110,76,.34);
  position: relative;
  z-index: 30;
}
.back-link { min-height: 42px; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid rgba(88,74,33,.24); border-radius: 10px; background: rgba(255,255,247,.72); color: var(--forest); text-decoration: none; font-weight: 700; }
.club-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.club-emblem { width: 60px; height: 60px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #f7d77d; font-size: 26px; background: radial-gradient(circle at 50% 42%, #3d815f, #153e2a 68%, #d4a84f 69% 75%, #194630 76%); box-shadow: inset 0 0 0 2px #efcf77, 0 5px 14px rgba(25,62,37,.25); }
.club-title small, .club-title strong, .club-title em { display: block; }
.club-title small { color: #8e6d31; font-weight: 700; letter-spacing: 1px; }
.club-title strong { margin-top: 2px; font-family: 'Literata', serif; color: var(--forest); font-size: 28px; }
.club-title em { margin-top: 3px; color: #665f46; font-family: 'Literata', serif; font-size: 12px; }
.club-tools { display: flex; align-items: center; gap: 8px; }
.club-tools button, .club-tools a { min-height: 43px; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid rgba(87,73,32,.25); border-radius: 10px; background: rgba(255,255,245,.74); color: var(--forest); text-decoration: none; font-weight: 700; cursor: pointer; }
.club-tools a { color: white; border-color: #d2ac4d; background: linear-gradient(180deg, #347553, #18442e); }

.club-navigation { min-height: 48px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 6px 6%; background: linear-gradient(180deg, rgba(255,252,236,.98), rgba(238,226,187,.96)); border-bottom: 1px solid rgba(77,84,47,.28); box-shadow: 0 7px 19px rgba(42,61,40,.12); position: relative; z-index: 24; }
.club-navigation button { border: 0; border-radius: 7px; background: transparent; color: #47513f; font-family: 'Literata', serif; cursor: pointer; }
.club-navigation button:hover, .club-navigation button.active { color: white; background: linear-gradient(180deg, #377553, #18442e); box-shadow: inset 0 0 0 1px rgba(230,197,88,.65); }

.club-scene {
  min-height: calc(100vh - 140px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 18px 28px 124px;
  background:
    linear-gradient(180deg, rgba(255,224,136,.14), transparent 35%, rgba(21,54,32,.2)),
    url('/my-phu-summer.svg') center 45% / cover no-repeat,
    #93aa78;
}
.club-scene::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; box-shadow: inset 0 0 135px rgba(19,49,30,.31); }
.club-sun { position: absolute; z-index: 0; width: 470px; height: 470px; border-radius: 50%; top: -250px; right: 16%; background: radial-gradient(circle, rgba(255,246,186,.55), rgba(255,226,122,.13) 48%, transparent 72%); animation: sunPulse 9s ease-in-out infinite alternate; }
.club-cloud { position: absolute; z-index: 1; width: 220px; height: 65px; border-radius: 50%; background: rgba(255,255,255,.16); filter: blur(13px); }
.cloud-a { left: -15%; top: 12%; animation: cloudMove 58s linear infinite; }
.cloud-b { left: -28%; top: 31%; transform: scale(.72); animation: cloudMove 78s linear 12s infinite; }
.river-glimmer { position: absolute; inset: 25% 13% 10% 15%; z-index: 1; opacity: .17; mix-blend-mode: screen; pointer-events: none; clip-path: polygon(40% 0, 60% 8%, 68% 30%, 100% 47%, 77% 66%, 60% 100%, 42% 78%, 21% 98%, 28% 62%, 0 39%, 24% 20%); background: repeating-linear-gradient(105deg, transparent 0 17px, rgba(255,255,220,.58) 20px 22px, transparent 26px 44px); animation: waterMove 14s linear infinite; }

.club-summary { position: relative; z-index: 10; max-width: 980px; margin: 0 auto 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.club-summary article { min-height: 74px; display: grid; grid-template-columns: 68px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(95,77,32,.28); border-radius: 14px; background: rgba(252,247,228,.93); box-shadow: 0 10px 24px rgba(22,49,30,.16); }
.club-summary span { grid-row: 1 / 3; display: grid; place-items: center; color: var(--forest); font-family: 'Literata', serif; font-size: 22px; font-weight: 700; }
.club-summary strong { font-family: 'Literata', serif; font-size: 11px; }
.club-summary small { color: var(--soft); font-size: 8px; }

.strategy-map { position: relative; z-index: 8; width: min(1040px, calc(100% - 360px)); height: 580px; margin: 12px auto 0; border: 1px solid rgba(102,82,31,.32); border-radius: 26px; background: rgba(248,244,219,.14); box-shadow: inset 0 0 80px rgba(30,68,43,.12), 0 18px 44px rgba(18,46,29,.18); }
.command-center { position: absolute; z-index: 5; left: 50%; top: 50%; width: 260px; min-height: 200px; transform: translate(-50%, -50%); display: grid; justify-items: center; align-content: center; text-align: center; padding: 18px; border: 1px solid #e0b958; border-radius: 24px; color: white; background: linear-gradient(160deg, rgba(50,117,82,.96), rgba(18,57,37,.97)); box-shadow: 0 22px 44px rgba(17,47,29,.32), inset 0 0 0 1px rgba(255,255,255,.12); }
.command-icon { font-size: 40px; }
.command-center small { margin-top: 5px; color: #f0d68e; font-weight: 700; font-size: 9px; letter-spacing: .8px; }
.command-center strong { margin-top: 4px; font-family: 'Literata', serif; font-size: 20px; }
.command-center p { margin: 6px 0 12px; color: rgba(255,255,255,.82); font-size: 9px; line-height: 1.5; }
.command-center button { min-height: 35px; padding: 0 11px; border: 1px solid rgba(255,255,255,.38); border-radius: 9px; color: var(--forest); background: #f4e6b6; cursor: pointer; font-weight: 700; font-size: 9px; }

.team-node { position: absolute; z-index: 4; width: 150px; min-height: 82px; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 9px 10px; border: 1px solid rgba(223,188,83,.88); border-radius: 14px; text-align: left; color: #f8e7aa; background: linear-gradient(165deg, rgba(49,107,75,.97), rgba(20,61,39,.98)); box-shadow: 0 10px 22px rgba(17,47,29,.23); cursor: pointer; }
.team-node:hover { transform: translateY(-3px) scale(1.03); }
.team-node > span { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 21px; }
.team-node strong { font-family: 'Literata', serif; font-size: 10px; }
.team-node small { color: rgba(255,255,255,.72); font-size: 7px; line-height: 1.35; }
.team-1 { left: 10%; top: 6%; }
.team-2 { left: 31%; top: 0; }
.team-3 { right: 31%; top: 0; }
.team-4 { right: 10%; top: 6%; }
.team-5 { right: 0; top: 36%; }
.team-6 { right: 7%; bottom: 5%; }
.team-7 { right: 28%; bottom: -1%; }
.team-8 { left: 50%; bottom: -4%; transform: translateX(-50%); }
.team-8:hover { transform: translateX(-50%) translateY(-3px) scale(1.03); }
.team-9 { left: 28%; bottom: -1%; }
.team-10 { left: 7%; bottom: 5%; }
.team-11 { left: 0; top: 36%; }
.coordination-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.coordination-lines path { fill: none; stroke: rgba(230,202,112,.5); stroke-width: 2; stroke-dasharray: 8 8; animation: lineFlow 8s linear infinite; }

.activity-board { position: absolute; z-index: 12; right: 24px; top: 112px; width: 315px; max-height: calc(100% - 250px); display: flex; flex-direction: column; border: 1px solid rgba(94,75,29,.36); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; transition: transform .28s ease, width .28s ease; }
.activity-board.collapsed { width: 54px; transform: translateX(18px); }
.activity-board.collapsed > :not(.board-heading) { display: none; }
.activity-board.collapsed .board-heading span { display: none; }
.activity-board.collapsed .board-heading { min-height: 190px; writing-mode: vertical-rl; justify-content: center; padding: 12px 8px; }
.board-heading { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 9px 15px; color: white; background: linear-gradient(180deg, #2f6d4b, #173f2b); }
.board-heading small, .board-heading strong { display: block; }
.board-heading small { color: #e7cf85; font-size: 8px; }
.board-heading strong { margin-top: 2px; font-family: 'Literata', serif; font-size: 16px; }
.board-heading button { width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: rgba(255,255,255,.08); color: white; cursor: pointer; }
.activity-list { overflow: auto; }
.activity-list button { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; text-align: left; padding: 11px; border: 0; border-bottom: 1px solid rgba(82,84,49,.12); background: transparent; cursor: pointer; }
.activity-list button:hover { background: rgba(218,211,161,.25); }
.priority { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--forest-2); font-size: 10px; font-weight: 700; }
.priority.high { background: #b45c3c; }
.activity-list strong, .activity-list small { display: block; }
.activity-list strong { font-family: 'Literata', serif; font-size: 10px; }
.activity-list small { margin-top: 3px; color: var(--soft); font-size: 7px; }
.activity-list b { padding: 5px 7px; border-radius: 999px; color: var(--forest); background: rgba(50,112,78,.12); font-size: 7px; white-space: nowrap; }

.field-feed { position: absolute; z-index: 12; left: 24px; bottom: 20px; width: min(650px, calc(100% - 390px)); border: 1px solid rgba(94,75,29,.35); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.feed-heading { min-height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 15px; color: white; background: linear-gradient(180deg, #2f6d4b, #173f2b); }
.feed-heading small, .feed-heading strong { display: block; }
.feed-heading small { color: #e7cf85; font-size: 8px; }
.feed-heading strong { font-family: 'Literata', serif; }
.feed-heading button { min-height: 31px; padding: 0 9px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; color: white; background: rgba(255,255,255,.08); cursor: pointer; font-size: 8px; }
.feed-items { display: grid; grid-template-columns: repeat(3, 1fr); }
.feed-items article { min-height: 100px; display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: start; padding: 11px; border-right: 1px solid rgba(82,84,49,.11); }
.feed-items article:last-child { border-right: 0; }
.feed-items > article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(50,112,78,.12); font-size: 18px; }
.feed-items strong { font-family: 'Literata', serif; font-size: 10px; }
.feed-items p { margin: 4px 0; color: var(--soft); font-size: 7px; line-height: 1.45; }
.feed-items small { color: #8d6a2e; font-size: 6.5px; }

.club-modal-backdrop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: rgba(16,38,23,.5); backdrop-filter: blur(5px); }
.club-modal { width: min(720px, 92vw); max-height: 84vh; overflow: auto; position: relative; padding: 28px; border: 1px solid rgba(115,88,28,.4); border-radius: 20px; background: linear-gradient(145deg, rgba(255,253,240,.99), rgba(240,231,196,.98)); box-shadow: 0 30px 95px rgba(14,36,22,.38); }
.club-modal-close { position: absolute; top: 12px; right: 13px; width: 35px; height: 35px; border: 1px solid rgba(91,72,30,.3); border-radius: 50%; background: #f2e6b8; cursor: pointer; font-size: 23px; }
.club-modal > span { color: #947030; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.club-modal h2 { margin: 7px 0 6px; font-family: 'Literata', serif; color: var(--forest); font-size: 28px; }
.club-modal > p { margin: 0 0 16px; color: var(--soft); font-size: 10px; line-height: 1.6; }
#club-modal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
#club-modal-grid article { min-height: 75px; padding: 12px; border: 1px solid rgba(82,83,48,.16); border-radius: 11px; background: rgba(255,255,249,.7); }
#club-modal-grid strong, #club-modal-grid small { display: block; }
#club-modal-grid strong { color: var(--forest); font-size: 11px; }
#club-modal-grid small { margin-top: 4px; color: var(--soft); font-size: 8px; line-height: 1.4; }
.field-report-form { margin-top: 14px; padding: 13px; border: 1px dashed rgba(45,106,73,.4); border-radius: 12px; background: rgba(226,232,199,.48); }
.field-report-form label { display: grid; gap: 5px; margin-top: 9px; }
.field-report-form label span { font-size: 9px; font-weight: 700; }
.field-report-form input, .field-report-form textarea, .field-report-form select { width: 100%; border: 1px solid rgba(80,84,50,.22); border-radius: 8px; padding: 8px; background: rgba(255,255,255,.72); }
.field-report-form button { margin-top: 11px; min-height: 38px; padding: 0 13px; border: 1px solid #d0aa4d; border-radius: 9px; color: white; background: var(--forest-2); cursor: pointer; }

@keyframes cloudMove { from { transform: translateX(0); } to { transform: translateX(155vw); } }
@keyframes sunPulse { from { opacity: .55; transform: scale(.96); } to { opacity: .8; transform: scale(1.08); } }
@keyframes waterMove { from { background-position: 0 0; } to { background-position: 220px 0; } }
@keyframes lineFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -64; } }

@media (max-height: 780px) {
  .club-header { min-height: 80px; padding-block: 8px; }
  .club-title strong { font-size: 24px; }
  .club-navigation { min-height: 44px; }
  .club-scene { min-height: calc(100vh - 124px); padding-bottom: 106px; }
  .strategy-map { height: 520px; }
  .field-feed { bottom: 10px; }
}

@media (max-width: 1260px) {
  .club-app { min-width: 1024px; }
  .club-header { grid-template-columns: auto 1fr; }
  .club-tools { grid-column: 1 / -1; justify-content: flex-end; margin-top: -6px; }
  .strategy-map { width: calc(100% - 335px); }
  .activity-board { right: 14px; width: 295px; }
  .field-feed { left: 14px; width: calc(100% - 335px); }
  .team-node { width: 138px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}